|
|
|
@ -2,35 +2,6 @@
|
|
|
|
|
* Custom toast styles to reflect Bootstrap colors
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Get subtle BG color.
|
|
|
|
|
* Returns the subtle bg color for a given color name.
|
|
|
|
|
*
|
|
|
|
|
* @param string $value - Bootstrap color name
|
|
|
|
|
* @return string - Bootstrap subtle bg color
|
|
|
|
|
*/
|
|
|
|
|
@function get-subtle-bg-color($value) {
|
|
|
|
|
@if $value == "primary" {
|
|
|
|
|
@return $primary-bg-subtle;
|
|
|
|
|
} @else if $value == "secondary" {
|
|
|
|
|
@return $secondary-bg-subtle;
|
|
|
|
|
} @else if $value == "success" {
|
|
|
|
|
@return $success-bg-subtle;
|
|
|
|
|
} @else if $value == "info" {
|
|
|
|
|
@return $info-bg-subtle;
|
|
|
|
|
} @else if $value == "warning" {
|
|
|
|
|
@return $warning-bg-subtle;
|
|
|
|
|
} @else if $value == "danger" {
|
|
|
|
|
@return $danger-bg-subtle;
|
|
|
|
|
} @else if $value == "light" {
|
|
|
|
|
@return $light-bg-subtle;
|
|
|
|
|
} @else if $value == "dark" {
|
|
|
|
|
@return $dark-bg-subtle;
|
|
|
|
|
} @else {
|
|
|
|
|
@return $value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Get button close SVG.
|
|
|
|
|
* Returns an either white or black button SVG dependent on the given color name.
|
|
|
|
@ -46,14 +17,6 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
// Adjusting size and margin
|
|
|
|
|
//
|
|
|
|
|
.toast {
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
margin: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
// Color variants
|
|
|
|
|
//
|
|
|
|
@ -63,7 +26,7 @@
|
|
|
|
|
--#{$prefix}toast-header-bg: #{$color};
|
|
|
|
|
--#{$prefix}toast-header-border-color: #{$color};
|
|
|
|
|
--#{$prefix}toast-border-color: #{$color};
|
|
|
|
|
--#{$prefix}toast-bg: #{get-subtle-bg-color($name)};
|
|
|
|
|
--#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle);
|
|
|
|
|
}
|
|
|
|
|
.toast-#{$name} .btn-close {
|
|
|
|
|
--#{$prefix}btn-close-bg: #{get-btn-close-svg($name)};
|
|
|
|
|