message.sass 3.0 KB

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