1 files changed, 30 insertions, 13 deletions
diff --git a/public/css/_sass/components/panel.sass b/public/css/_sass/components/panel.sass
index b9d339e..3c32be6 100644
--- a/public/css/_sass/components/panel.sass
+++ b/public/css/_sass/components/panel.sass
@@ -1,13 +1,17 @@
-$panel-item-border: 1px solid $border !default
+$panel-margin: $block-spacing !default
+$panel-item-border: 1px solid $border-light !default
+$panel-radius: $radius-large !default
+$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 
-$panel-heading-background-color: $background !default
+$panel-heading-background-color: $border-light !default
 $panel-heading-color: $text-strong !default
 $panel-heading-line-height: 1.25 !default
-$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-padding: 0.75em 1em !default
 $panel-heading-radius: $radius !default
 $panel-heading-size: 1.25em !default
-$panel-heading-weight: $weight-light !default
+$panel-heading-weight: $weight-bold !default
 
+$panel-tabs-font-size: 0.875em !default
 $panel-tab-border-bottom: 1px solid $border !default
 $panel-tab-active-border-bottom-color: $link-active-border !default
 $panel-tab-active-color: $link-active !default
@@ -24,22 +28,32 @@ $panel-block-active-icon-color: $link !default
 $panel-icon-color: $text-light !default
 
 .panel
+  border-radius: $panel-radius
+  box-shadow: $panel-shadow
   font-size: $size-normal
   &:not(:last-child)
-    margin-bottom: 1.5rem
+    margin-bottom: $panel-margin
+  // Colors
+  @each $name, $components in $message-colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    &.is-#{$name}
+      .panel-heading
+        background-color: $color
+        color: $color-invert
+      .panel-tabs a.is-active
+        border-bottom-color: $color
+      .panel-block.is-active .panel-icon
+        color: $color
 
-.panel-heading,
 .panel-tabs,
 .panel-block
-  border-bottom: $panel-item-border
-  border-left: $panel-item-border
-  border-right: $panel-item-border
-  &:first-child
-    border-top: $panel-item-border
+  &:not(:last-child)
+    border-bottom: $panel-item-border
 
 .panel-heading
   background-color: $panel-heading-background-color
-  border-radius: $panel-heading-radius $panel-heading-radius 0 0
+  border-radius: $panel-radius $panel-radius 0 0
   color: $panel-heading-color
   font-size: $panel-heading-size
   font-weight: $panel-heading-weight
@@ -49,7 +63,7 @@ $panel-icon-color: $text-light !default
 .panel-tabs
   align-items: flex-end
   display: flex
-  font-size: 0.875em
+  font-size: $panel-tabs-font-size
   justify-content: center
   a
     border-bottom: $panel-tab-border-bottom
@@ -85,6 +99,9 @@ $panel-icon-color: $text-light !default
     color: $panel-block-active-color
     .panel-icon
       color: $panel-block-active-icon-color
+  &:last-child
+    border-bottom-left-radius: $panel-radius
+    border-bottom-right-radius: $panel-radius
 
 a.panel-block,
 label.panel-block