diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss index 1f59902..ae5e232 100644 --- a/src/scss/_drawing.scss +++ b/src/scss/_drawing.scss @@ -11,5 +11,6 @@ @import 'components/pagination'; @import 'components/cards'; @import 'components/menus'; +@import 'components/toasts'; @import 'components/tables'; @import 'components/previews'; diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index a29a03d..6a4e858 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -75,39 +75,16 @@ ul.card-list, .card > ul { &-success{@include list-color($color-success);} } -.smallcard, .toast { - @include panel($card-smallpad); +.smallcard { &-header { @include panel-header($card-bigpad); } } -.toast { - padding:$card-smallpad, -} - /* COLORIZE CARDS and TOASTS */ -.card, .smallcard, .menu { +.card, .smallcard { @each $name, $color in list-colors() { &-#{$name} { @include card-color(get-color($name)); } } } - -.toast { - @each $name, $color in list-colors() { - &-#{$name} { @include background-color(get-color($name)); } - } - - a, a:visited { - color: $color-font-light; - background-color:rgba(0,0,0,0.15); - text-decoration:none; - opacity:1; - &:hover, &:active, &:visited { - color: $color-font-light; - background-color:transparent; - opacity:1; - } - } - } diff --git a/src/scss/components/_toasts.scss b/src/scss/components/_toasts.scss new file mode 100644 index 0000000..73278a0 --- /dev/null +++ b/src/scss/components/_toasts.scss @@ -0,0 +1,25 @@ +@mixin toast-color($background-color) { + @include background-color($background-color); + color: getTextColorFromBackground($background-color); + + a, a:visited { + color: getTextColorFromBackground($background-color); + background-color: accentuate($background-color); + text-decoration:none; + opacity:1; + &:hover, &:active, &:visited { + color: getTextColorFromBackground($background-color); + background-color:transparent; + opacity:1; + } + } +} + +.toast { + @include panel($card-smallpad); + padding:$card-smallpad; + + @each $name, $color in list-colors() { + &-#{$name} { @include toast-color(get-color($name)); } + } +}