Ümit Tunç
129 lines
3.7 KiB
SCSS
129 lines
3.7 KiB
SCSS
//
|
|
// Background
|
|
// --------------------------------------------------
|
|
|
|
// Contextual colors
|
|
@include bg-variant('.bg-primary-op', rgba($brand-primary, .75));
|
|
@include bg-variant('.bg-primary-dark', $brand-dark);
|
|
@include bg-variant('.bg-primary-dark-op', rgba($brand-dark, .8));
|
|
@include bg-variant('.bg-primary-darker', $brand-darker);
|
|
@include bg-variant('.bg-primary-light', $brand-light);
|
|
@include bg-variant('.bg-primary-lighter', $brand-lighter);
|
|
@include bg-variant('.bg-body', $body-bg);
|
|
@include bg-variant('.bg-body-light', $body-bg-light);
|
|
@include bg-variant('.bg-body-dark', $body-bg-dark);
|
|
@include bg-variant('.bg-muted', $gray-dark);
|
|
@include bg-variant('.bg-success-light ', $brand-success-light);
|
|
@include bg-variant('.bg-warning-light ', $brand-warning-light);
|
|
@include bg-variant('.bg-info-light ', $brand-info-light);
|
|
@include bg-variant('.bg-danger-light ', $brand-danger-light);
|
|
@include bg-variant('.bg-white', $white);
|
|
@include bg-variant('.bg-black', $black);
|
|
@include bg-variant('.bg-gray', $gray);
|
|
@include bg-variant('.bg-gray-dark', $gray-dark);
|
|
@include bg-variant('.bg-gray-darker', $gray-darker);
|
|
@include bg-variant('.bg-gray-light', $gray-light);
|
|
@include bg-variant('.bg-gray-lighter', $gray-lighter);
|
|
|
|
// Gradients
|
|
@include bg-gradient-variant('.bg-gd-primary', 135deg, darken($brand-primary, 15%), lighten($brand-primary, 5%));
|
|
@include bg-gradient-variant('.bg-gd-dusk', 135deg, $theme-elegance-primary, $brand-primary);
|
|
@include bg-gradient-variant('.bg-gd-cherry', 135deg, lighten($theme-pulse-primary, 5%), darken($theme-pulse-primary, 10%));
|
|
@include bg-gradient-variant('.bg-gd-aqua', 135deg, $theme-corporate-primary, $theme-flat-primary);
|
|
@include bg-gradient-variant('.bg-gd-emerald', 135deg, $theme-earth-primary, $theme-corporate-primary);
|
|
@include bg-gradient-variant('.bg-gd-sea', 135deg, darken($brand-primary, 7%), $brand-info);
|
|
@include bg-gradient-variant('.bg-gd-leaf', 135deg, $brand-warning, $brand-success);
|
|
@include bg-gradient-variant('.bg-gd-lake', 135deg, $brand-info, $brand-success);
|
|
@include bg-gradient-variant('.bg-gd-sun', 135deg, $brand-danger, $brand-warning);
|
|
|
|
@include bg-gradient-variant('.bg-gd-light', 0deg, $body-bg-light, $white);
|
|
|
|
// Black/White with opacity
|
|
.bg-black-op {
|
|
background-color: rgba(0,0,0,.5) !important;
|
|
|
|
&-5 {
|
|
background-color: rgba(0,0,0,.05) !important;
|
|
}
|
|
|
|
&-10 {
|
|
background-color: rgba(0,0,0,.1) !important;
|
|
}
|
|
|
|
&-25 {
|
|
background-color: rgba(0,0,0,.25) !important;
|
|
}
|
|
|
|
&-75 {
|
|
background-color: rgba(0,0,0,.75) !important;
|
|
}
|
|
|
|
&-90 {
|
|
background-color: rgba(0,0,0,.9) !important;
|
|
}
|
|
|
|
&-95 {
|
|
background-color: rgba(0,0,0,.95) !important;
|
|
}
|
|
}
|
|
|
|
.bg-white-op {
|
|
background-color: rgba(255,255,255,.5) !important;
|
|
|
|
&-5 {
|
|
background-color: rgba(255,255,255,.05) !important;
|
|
}
|
|
|
|
&-10 {
|
|
background-color: rgba(255,255,255,.1) !important;
|
|
}
|
|
|
|
&-25 {
|
|
background-color: rgba(255,255,255,.25) !important;
|
|
}
|
|
|
|
&-75 {
|
|
background-color: rgba(255,255,255,.75) !important;
|
|
}
|
|
|
|
&-90 {
|
|
background-color: rgba(255,255,255,.9) !important;
|
|
}
|
|
|
|
&-95 {
|
|
background-color: rgba(255,255,255,.95) !important;
|
|
}
|
|
}
|
|
|
|
// Image Background
|
|
.bg-image {
|
|
background-color: $gray-lighter;
|
|
background-position: 0% 50%;
|
|
background-size: cover;
|
|
|
|
&-top {
|
|
background-position-y: 0%;
|
|
}
|
|
|
|
&-bottom {
|
|
background-position-y: 100%;
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
&-fixed {
|
|
background-attachment: fixed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pattern Image
|
|
.bg-pattern {
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
// Video Background
|
|
.bg-video {
|
|
width: 100%;
|
|
transform: translateZ(0);
|
|
}
|