public/vendors/bulma/sass/components/message.sass

   1 $message-background-color: $background !default
   2 $message-radius: $radius !default
   3
   4 $message-header-background-color: $text !default
   5 $message-header-color: $text-invert !default
   6 $message-header-weight: $weight-bold !default
   7 $message-header-padding: 0.75em 1em !default
   8 $message-header-radius: $radius !default
   9
  10 $message-body-border-color: $border !default
  11 $message-body-border-width: 0 0 0 4px !default
  12 $message-body-color: $text !default
  13 $message-body-padding: 1.25em 1.5em !default
  14 $message-body-radius: $radius !default
  15
  16 $message-body-pre-background-color: $scheme-main !default
  17 $message-body-pre-code-background-color: transparent !default
  18
  19 $message-header-body-border-width: 0 !default
  20 $message-colors: $colors !default
  21
  22 .message
  23   @extend %block
  24   background-color: $message-background-color
  25   border-radius: $message-radius
  26   font-size: $size-normal
  27   strong
  28     color: currentColor
  29   a:not(.button):not(.tag):not(.dropdown-item)
  30     color: currentColor
  31     text-decoration: underline
  32   // Sizes
  33   &.is-small
  34     font-size: $size-small
  35   &.is-medium
  36     font-size: $size-medium
  37   &.is-large
  38     font-size: $size-large
  39   // Colors
  40   @each $name, $components in $message-colors
  41     $color: nth($components, 1)
  42     $color-invert: nth($components, 2)
  43     $color-light: null
  44     $color-dark: null
  45
  46     @if length($components) >= 3
  47       $color-light: nth($components, 3)
  48       @if length($components) >= 4
  49         $color-dark: nth($components, 4)
  50       @else
  51         $color-luminance: colorLuminance($color)
  52         $darken-percentage: $color-luminance * 70%
  53         $desaturate-percentage: $color-luminance * 30%
  54         $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
  55     @else
  56       $color-lightning: max((100% - lightness($color)) - 2%, 0%)
  57       $color-light: lighten($color, $color-lightning)
  58
  59     &.is-#{$name}
  60       background-color: $color-light
  61       .message-header
  62         background-color: $color
  63         color: $color-invert
  64       .message-body
  65         border-color: $color
  66         color: $color-dark
  67
  68 .message-header
  69   align-items: center
  70   background-color: $message-header-background-color
  71   border-radius: $message-header-radius $message-header-radius 0 0
  72   color: $message-header-color
  73   display: flex
  74   font-weight: $message-header-weight
  75   justify-content: space-between
  76   line-height: 1.25
  77   padding: $message-header-padding
  78   position: relative
  79   .delete
  80     flex-grow: 0
  81     flex-shrink: 0
  82     margin-left: 0.75em
  83   & + .message-body
  84     border-width: $message-header-body-border-width
  85     border-top-left-radius: 0
  86     border-top-right-radius: 0
  87
  88 .message-body
  89   border-color: $message-body-border-color
  90   border-radius: $message-body-radius
  91   border-style: solid
  92   border-width: $message-body-border-width
  93   color: $message-body-color
  94   padding: $message-body-padding
  95   code,
  96   pre
  97     background-color: $message-body-pre-background-color
  98   pre code
  99     background-color: $message-body-pre-code-background-color