// // overlay.scss // Theme utility //
.overlay {
position: relative; &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
}
// Colors
@each $color, $value in $theme-colors {
// Solid .overlay-#{$color} { @include overlay($value); } // Gradient .overlay-gradient-#{$color}-right { @include overlay-gradient($value, right); } .overlay-gradient-#{$color}-down { @include overlay-gradient($value, bottom); } .overlay-gradient-#{$color}-left { @include overlay-gradient($value, left); }
}
// Opacity
@for $i from 1 through 9 {
.overlay-#{$i * 10} { &::before { opacity: #{$i / 10}; } .bg-white { background: rgba(255, 255, 255, 0) !important; } &.active { &::before { opacity: 0; } h5 { color: $light !important; &.bg-white { background: rgba(0, 0, 0, 0.276) !important; } } // .badge { // display: block; // } } }
}