Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 20:24:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init light dark colors

Browse Source
This commit is contained in:
Jeremy Thomas
2019-05-17 15:49:25 +01:00
parent 9d3c36e02c
commit 770bae827f
6 changed files with 86 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
sass/components/message.sass
View File

@@ -37,21 +37,29 @@ $message-colors: $colors !default
&.is-large
font-size: $size-large
// Colors
@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%
@each $name, $list in $message-colors
$color: nth($list, 1)
$color-invert: nth($list, 2)
$color-light: null
$color-dark: null
@if length($list) > 2
$color-light: nth($list, 3)
$color-dark: nth($list, 4)
@else
$color-light: findLightColor($color)
$color-dark: findDarkColor($color)
// $color-lightning: max((100% - lightness($color)) - 2%, 0%)
// $color-luminance: colorLuminance($color)
// $darken-percentage: $color-luminance * 70%
// $desaturate-percentage: $color-luminance * 30%
&.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