Restructure elements and components

2026-03-21 12:44:30 -07:00 · 2016-04-18 21:50:59 +01:00
parent b7fb0b9ed3
commit 23dcb47e22
11 changed files with 32 additions and 19 deletions
--- a/sass/components/message.sass
+++ b/sass/components/message.sass
@@ -0,0 +1,39 @@
+.message-body
+  border: 1px solid $border
+  border-radius: $radius
+  padding: 12px 15px
+  strong
+    color: inherit
+
+.message-header
+  background: $text
+  border-radius: $radius $radius 0 0
+  color: $text-invert
+  padding: 7px 10px
+  strong
+    color: inherit
+  & + .message-body
+    border-radius: 0 0 $radius $radius
+    border-top: none
+
+.message
+  @extend .block
+  background: $background
+  border-radius: $radius
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    $lightning: (100% - lightness($color)) - 4%
+    $darkness: max(lightness($color) - 10%, lightness($color))
+    &.is-#{$name}
+      background: lighten($color, $lightning)
+      .message-header
+        background: $color
+        color: $color-invert
+      .message-body
+        border-color: $color
+        @if (colorLuminance($color) > 0.8)
+          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
+        @else
+          color: desaturate(lighten(darken($color, 100%), 50%), 30%)