1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- //
- // 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} {
- // Ignore warning for Bootstrap 4 deprecation
- // TODO: remove bg-gradient-variant dependencies
- @include bg-gradient-variant("&", $color, true);
- color: color-yiq($color);
- &.btn {
- &.disabled,
- &:disabled,
- &:not(:disabled):not(.disabled):active,
- &:not(:disabled):not(.disabled).active,
- .show > &.dropdown-toggle {
- background-image: none !important;
- }
- &:hover {
- // Ignore warning for Bootstrap 4 deprecation
- // TODO: remove bg-gradient-variant dependencies
- @include bg-gradient-variant("&", darken($color, 7.5%), true);
- border-color: darken($color, 10%);
- color: darken(color-yiq($color), 7.5%);
- }
- &:not(:disabled):not(.disabled):active,
- &:not(:disabled):not(.disabled).active,
- &:active,
- &.active {
- // Ignore warning for Bootstrap 4 deprecation
- // TODO: remove bg-gradient-variant dependencies
- @include bg-gradient-variant("&", darken($color, 10%), true);
- border-color: darken($color, 12.5%);
- color: color-yiq(darken($color, 10%));
- }
- }
- }
- }
|