45 lines
1.3 KiB
SCSS
45 lines
1.3 KiB
SCSS
//
|
|
// Alert
|
|
// --------------------------------------------------
|
|
|
|
.alert {
|
|
--#{$prefix}alert-link-color: inherit;
|
|
.alert-link {
|
|
color: var(--#{$prefix}alert-link-color);
|
|
}
|
|
}
|
|
|
|
// Secondary / light alert
|
|
|
|
.alert-secondary {
|
|
--#{$prefix}alert-bg: #{lighten($secondary, 1%)};
|
|
}
|
|
.alert-secondary,
|
|
.alert-light {
|
|
--#{$prefix}alert-color: #{$gray-800};
|
|
--#{$prefix}alert-border-color: var(--#{$prefix}border-color);
|
|
--#{$prefix}alert-link-color: #{$gray-900};
|
|
}
|
|
|
|
|
|
// Dark alert
|
|
|
|
.alert-dark {
|
|
--#{$prefix}alert-border-color: #{$dark};
|
|
--#{$prefix}alert-bg: #{$dark};
|
|
--#{$prefix}alert-color: rgba(#{to-rgb($white)}, .85);
|
|
--#{$prefix}alert-link-color: #{$white};
|
|
}
|
|
|
|
|
|
// Dismissible alerts
|
|
|
|
.alert-dismissible .btn-close {
|
|
padding: calc(var(--#{$prefix}alert-padding-y) * 1.375) var(--#{$prefix}alert-padding-x);
|
|
}
|
|
@each $color, $value in map-remove($theme-colors, 'secondary', 'light', 'dark') {
|
|
.alert-#{$color} .btn-close {
|
|
background: transparent escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{darken($value, 18%)}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")) center / $btn-close-width auto no-repeat;
|
|
}
|
|
}
|