2016-01-24 00:03:43 +00:00
|
|
|
.message-body
|
|
|
|
|
border: 1px solid $border
|
|
|
|
|
border-radius: $radius
|
|
|
|
|
padding: 12px 15px
|
|
|
|
|
strong
|
|
|
|
|
color: inherit
|
|
|
|
|
|
|
|
|
|
.message-header
|
|
|
|
|
background: $text
|
|
|
|
|
border-radius: $radius $radius 0 0
|
|
|
|
|
color: $text-invert
|
2016-04-10 15:00:32 +00:00
|
|
|
padding: 7px 10px
|
|
|
|
|
strong
|
|
|
|
|
color: inherit
|
2016-01-24 00:03:43 +00:00
|
|
|
& + .message-body
|
|
|
|
|
border-radius: 0 0 $radius $radius
|
|
|
|
|
border-top: none
|
|
|
|
|
|
|
|
|
|
.message
|
2016-02-14 22:10:05 +00:00
|
|
|
@extend .block
|
2016-01-24 00:03:43 +00:00
|
|
|
background: $background
|
|
|
|
|
border-radius: $radius
|
2016-04-10 15:00:32 +00:00
|
|
|
// Colors
|
2016-01-24 00:03:43 +00:00
|
|
|
@each $name, $pair in $colors
|
|
|
|
|
$color: nth($pair, 1)
|
|
|
|
|
$color-invert: nth($pair, 2)
|
2016-05-05 23:23:00 +00:00
|
|
|
$lightning: max((100% - lightness($color)) - 4%, 0%)
|
2016-01-24 00:03:43 +00:00
|
|
|
$darkness: max(lightness($color) - 10%, lightness($color))
|
|
|
|
|
&.is-#{$name}
|
|
|
|
|
background: lighten($color, $lightning)
|
|
|
|
|
.message-header
|
|
|
|
|
background: $color
|
|
|
|
|
color: $color-invert
|
|
|
|
|
.message-body
|
|
|
|
|
border-color: $color
|
|
|
|
|
@if (colorLuminance($color) > 0.8)
|
|
|
|
|
color: desaturate(lighten(darken($color, 100%), 40%), 40%)
|
|
|
|
|
@else
|
|
|
|
|
color: desaturate(lighten(darken($color, 100%), 50%), 30%)
|
