Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add color scheme

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-13 15:12:30 +01:00
parent 5131f2ab04
commit 0f988eadd9
28 changed files with 472 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
sass/components/message.sass
View File

@@ -13,7 +13,7 @@ $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
@@ -40,18 +40,31 @@ $message-colors: $colors !default
@each $name, $pair in $message-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%
$light-background: null
@if length($pair) > 2
$light-background: nth($pair, 3)
@else
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
$light-background: lighten($color, $color-lightning)
$dark-color: null
@if length($pair) > 3
$dark-color: nth($pair, 4)
@else
$color-luminance: colorLuminance($color)
$darken-percentage: $color-luminance * 70%
$desaturate-percentage: $color-luminance * 30%
$dark-color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
&.is-#{$name}
background-color: lighten($color, $color-lightning)
background-color: $light-background
.message-header
background-color: $color
color: $color-invert
.message-body
border-color: $color
color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
color: $dark-color
.message-header
align-items: center