diff options
Diffstat (limited to 'public/css/_sass/components/message.sass')
| -rw-r--r-- | public/css/_sass/components/message.sass | 33 |
1 files changed, 23 insertions, 10 deletions
diff --git a/public/css/_sass/components/message.sass b/public/css/_sass/components/message.sass index badac5d..89e4cc9 100644 --- a/public/css/_sass/components/message.sass +++ b/public/css/_sass/components/message.sass @@ -13,10 +13,11 @@ $message-body-color: $text !default $message-body-padding: 1.25em 1.5em !default $message-body-radius: $radius !default -$message-body-pre-background-color: $white !default +$message-body-pre-background-color: $scheme-main !default $message-body-pre-code-background-color: transparent !default $message-header-body-border-width: 0 !default +$message-colors: $colors !default .message @extend %block @@ -36,21 +37,33 @@ $message-header-body-border-width: 0 !default &.is-large font-size: $size-large // Colors - @each $name, $pair in $colors - $color: nth($pair, 1) - $color-invert: nth($pair, 2) - $color-lightning: max((100% - lightness($color)) - 2%, 0%) - $color-luminance: colorLuminance($color) - $darken-percentage: $color-luminance * 70% - $desaturate-percentage: $color-luminance * 30% + @each $name, $components in $message-colors + $color: nth($components, 1) + $color-invert: nth($components, 2) + $color-light: null + $color-dark: null + + @if length($components) >= 3 + $color-light: nth($components, 3) + @if length($components) >= 4 + $color-dark: nth($components, 4) + @else + $color-luminance: colorLuminance($color) + $darken-percentage: $color-luminance * 70% + $desaturate-percentage: $color-luminance * 30% + $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) + @else + $color-lightning: max((100% - lightness($color)) - 2%, 0%) + $color-light: lighten($color, $color-lightning) + &.is-#{$name} - background-color: lighten($color, $color-lightning) + background-color: $color-light .message-header background-color: $color color: $color-invert .message-body border-color: $color - color: desaturate(darken($color, $darken-percentage), $desaturate-percentage) + color: $color-dark .message-header align-items: center |