2019-10-29 08:22:51 +00:00
|
|
|
//
|
|
|
|
// Mixins: Backgrounds
|
|
|
|
//
|
|
|
|
|
|
|
|
// Background Variant
|
|
|
|
@mixin background-variant($name, $color) {
|
|
|
|
.bg-#{$name} {
|
|
|
|
background-color: #{$color} !important;
|
|
|
|
|
|
|
|
&,
|
|
|
|
> a {
|
|
|
|
color: color-yiq($color) !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.btn {
|
|
|
|
&:hover {
|
|
|
|
border-color: darken($color, 10%);
|
|
|
|
color: darken(color-yiq($color), 7.5%);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
|
|
&:not(:disabled):not(.disabled).active,
|
|
|
|
&:active,
|
|
|
|
&.active {
|
|
|
|
background-color: darken($color, 10%) !important;
|
|
|
|
border-color: darken($color, 12.5%);
|
|
|
|
color: color-yiq(darken($color, 10%));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Background Gradient Variant
|
|
|
|
@mixin background-gradient-variant($name, $color) {
|
|
|
|
.bg-gradient-#{$name} {
|
2020-09-21 09:03:47 +00:00
|
|
|
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
2019-10-29 08:22:51 +00:00
|
|
|
color: color-yiq($color);
|
|
|
|
|
|
|
|
&.btn {
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
|
|
&:not(:disabled):not(.disabled).active,
|
|
|
|
.show > &.dropdown-toggle {
|
|
|
|
background-image: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
2020-09-21 09:03:47 +00:00
|
|
|
background: $color linear-gradient(180deg, mix($body-bg, darken($color, 7.5%), 15%), darken($color, 7.5%)) repeat-x !important;
|
2019-10-29 08:22:51 +00:00
|
|
|
border-color: darken($color, 10%);
|
|
|
|
color: darken(color-yiq($color), 7.5%);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
|
|
&:not(:disabled):not(.disabled).active,
|
|
|
|
&:active,
|
|
|
|
&.active {
|
2020-09-21 09:03:47 +00:00
|
|
|
background: $color linear-gradient(180deg, mix($body-bg, darken($color, 10%), 15%), darken($color, 10%)) repeat-x !important;
|
2019-10-29 08:22:51 +00:00
|
|
|
border-color: darken($color, 12.5%);
|
|
|
|
color: color-yiq(darken($color, 10%));
|
|
|
|
}
|
2021-05-15 19:01:08 +00:00
|
|
|
|
|
|
|
&:disabled,
|
|
|
|
&.disabled {
|
|
|
|
background-image: none !important;
|
2021-05-16 15:23:38 +00:00
|
|
|
border-color: $color;
|
2021-06-12 15:13:59 +00:00
|
|
|
color: color-yiq($color);
|
2021-05-15 19:01:08 +00:00
|
|
|
}
|
2019-10-29 08:22:51 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|