message.sass 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. .message-body
  2. border: 1px solid $border
  3. border-radius: $radius
  4. padding: 12px 15px
  5. strong
  6. color: inherit
  7. .message-header
  8. background-color: $text
  9. border-radius: $radius $radius 0 0
  10. color: $text-invert
  11. padding: 7px 10px
  12. strong
  13. color: inherit
  14. & + .message-body
  15. border-radius: 0 0 $radius $radius
  16. border-top: none
  17. .message
  18. @extend .block
  19. background-color: $background
  20. border-radius: $radius
  21. // Colors
  22. @each $name, $pair in $colors
  23. $color: nth($pair, 1)
  24. $color-invert: nth($pair, 2)
  25. $lightning: max((100% - lightness($color)) - 4%, 0%)
  26. $darkness: max(lightness($color) - 10%, lightness($color))
  27. &.is-#{$name}
  28. background-color: lighten($color, $lightning)
  29. .message-header
  30. background-color: $color
  31. color: $color-invert
  32. .message-body
  33. border-color: $color
  34. @if (colorLuminance($color) > 0.8)
  35. color: desaturate(lighten(darken($color, 100%), 40%), 40%)
  36. @else
  37. color: desaturate(lighten(darken($color, 100%), 50%), 30%)