parent
b50138e38e
commit
7246587b6b
@ -0,0 +1,87 @@
|
||||
$translucent-color-opacity: .6 ;
|
||||
|
||||
// Sections
|
||||
|
||||
$section-colors: () !default;
|
||||
$section-colors: map-merge((
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"light": $gray-400,
|
||||
"dark": $dark,
|
||||
"darker": $dark
|
||||
), $section-colors);
|
||||
|
||||
// Contextual backgrounds
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin bg-gradient-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-translucent-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
// Backgrounds
|
||||
//
|
||||
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@include bg-variant(".bg-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
|
||||
// Background colors with transparency
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-translucent-variant(".bg-translucent-#{$color}", $value);
|
||||
}
|
||||
|
||||
|
||||
// Sections backgrounds
|
||||
|
||||
@each $color, $value in $section-colors {
|
||||
@include bg-variant(".section-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
|
||||
// Shape (svg) fill colors
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.fill-#{$color} {
|
||||
fill: $value;
|
||||
}
|
||||
|
||||
.stroke-#{$color} {
|
||||
stroke: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-opacity-8 {
|
||||
fill-opacity: .8;
|
||||
}
|
||||
|
Loading…
Reference in New Issue