message.sass 2.6 KB

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