You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.0 KiB
101 lines
3.0 KiB
@import "../utilities/mixins" |
|
|
|
$message-background-color: $background !default |
|
$message-radius: $radius !default |
|
|
|
$message-header-background-color: $text !default |
|
$message-header-color: $text-invert !default |
|
$message-header-weight: $weight-bold !default |
|
$message-header-padding: 0.75em 1em !default |
|
$message-header-radius: $radius !default |
|
|
|
$message-body-border-color: $border !default |
|
$message-body-border-width: 0 0 0 4px !default |
|
$message-body-color: $text !default |
|
$message-body-padding: 1.25em 1.5em !default |
|
$message-body-radius: $radius !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 |
|
background-color: $message-background-color |
|
border-radius: $message-radius |
|
font-size: $size-normal |
|
strong |
|
color: currentColor |
|
a:not(.button):not(.tag):not(.dropdown-item) |
|
color: currentColor |
|
text-decoration: underline |
|
// Sizes |
|
&.is-small |
|
font-size: $size-small |
|
&.is-medium |
|
font-size: $size-medium |
|
&.is-large |
|
font-size: $size-large |
|
// Colors |
|
@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: $color-light |
|
.message-header |
|
background-color: $color |
|
color: $color-invert |
|
.message-body |
|
border-color: $color |
|
color: $color-dark |
|
|
|
.message-header |
|
align-items: center |
|
background-color: $message-header-background-color |
|
border-radius: $message-header-radius $message-header-radius 0 0 |
|
color: $message-header-color |
|
display: flex |
|
font-weight: $message-header-weight |
|
justify-content: space-between |
|
line-height: 1.25 |
|
padding: $message-header-padding |
|
position: relative |
|
.delete |
|
flex-grow: 0 |
|
flex-shrink: 0 |
|
+ltr-property("margin", 0.75em, false) |
|
& + .message-body |
|
border-width: $message-header-body-border-width |
|
border-top-left-radius: 0 |
|
border-top-right-radius: 0 |
|
|
|
.message-body |
|
border-color: $message-body-border-color |
|
border-radius: $message-body-radius |
|
border-style: solid |
|
border-width: $message-body-border-width |
|
color: $message-body-color |
|
padding: $message-body-padding |
|
code, |
|
pre |
|
background-color: $message-body-pre-background-color |
|
pre code |
|
background-color: $message-body-pre-code-background-color
|
|
|