You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.6 KiB
SCSS
88 lines
1.6 KiB
SCSS
$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;
|
|
}
|
|
|