Ohm-Management - Projektarbeit B-ME
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.

message.sass 2.5KB

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