github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Bootstrap color loop for custom toast styles

pull/5312/head
LEWE, GEORGE 2023-09-05 18:34:34 +02:00
parent 93e433a912
commit 04d9a3679a
1 changed files with 37 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/scss/_toasts.scss
View File

@ -1,86 +1,51 @@
/**
* 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;
}
}
//
// Adjusting size and margin
//
.toast {
min-width: 300px;
margin: 8px;
}
//
// Adding a bottom border radius the toast body
//
.toast .toast-body {
//--#{$prefix}toast-color: #{$black};
//--#{$prefix}toast-bg: #{$gray-100};
--#{$prefix}toast-border-radius: 0 0 .25rem .25rem;
}
//.toast-danger {
// --#{$prefix}toast-header-color: #{$white};
// --#{$prefix}toast-header-bg: #{$danger};
// --#{$prefix}toast-header-border-color: #{$danger};
// --#{$prefix}toast-border-color: #{$danger};
// --#{$prefix}toast-color: #{$white};
// --#{$prefix}toast-bg: #{$red-300};
//}
//
//.toast-dark {
// --#{$prefix}toast-header-color: #{$white};
// --#{$prefix}toast-header-bg: #{$dark};
// --#{$prefix}toast-header-border-color: #{$dark};
// --#{$prefix}toast-border-color: #{$dark};
// --#{$prefix}toast-color: #{$white};
// --#{$prefix}toast-bg: #{$gray-600};
//}
//
//.toast-info {
// --#{$prefix}toast-header-color: #{$white};
// --#{$prefix}toast-header-bg: #{$info};
// --#{$prefix}toast-header-border-color: #{$info};
// --#{$prefix}toast-border-color: #{$info};
// --#{$prefix}toast-bg: #{$cyan-300};
//}
//
//.toast-light {
// --#{$prefix}toast-header-color: #{$gray-900};
// --#{$prefix}toast-header-bg: #{$light};
// --#{$prefix}toast-header-border-color: #{$light};
// --#{$prefix}toast-border-color: #{$light};
// --#{$prefix}toast-color: #{$gray-900};
// --#{$prefix}toast-bg: #{$white};
//}
//
//.toast-primary {
// --#{$prefix}toast-header-color: #{$white};
// --#{$prefix}toast-header-bg: #{$primary};
// --#{$prefix}toast-header-border-color: #{$primary};
// --#{$prefix}toast-border-color: #{$primary};
// --#{$prefix}toast-color: #{$white};
// --#{$prefix}toast-bg: #{$blue-300};
//}
//
//.toast-secondary {
// --#{$prefix}toast-header-color: #{$white};
// --#{$prefix}toast-header-bg: #{$secondary};
// --#{$prefix}toast-header-border-color: #{$secondary};
// --#{$prefix}toast-border-color: #{$secondary};
// --#{$prefix}toast-bg: #{$gray-400};
//}
//
//.toast-success {
// --#{$prefix}toast-header-color: #{$white};
// --#{$prefix}toast-header-bg: #{$success};
// --#{$prefix}toast-header-border-color: #{$success};
// --#{$prefix}toast-border-color: #{$success};
// --#{$prefix}toast-color: #{$white};
// --#{$prefix}toast-bg: #{$green-300};
//}
//
//.toast-warning {
// --#{$prefix}toast-header-color: #{$white};
// --#{$prefix}toast-header-bg: #{$warning};
// --#{$prefix}toast-header-border-color: #{$warning};
// --#{$prefix}toast-border-color: #{$warning};
// --#{$prefix}toast-bg: #{$yellow-300};
//}
//
// Color variants
//
@ -90,6 +55,6 @@
--#{$prefix}toast-header-bg: #{$color};
--#{$prefix}toast-header-border-color: #{$color};
--#{$prefix}toast-border-color: #{$color};
--#{$prefix}toast-bg: #{$color};
--#{$prefix}toast-bg: #{get-subtle-bg-color($name)};
}
}