Make custom panel caption styles better looking (Valo)

If the background color of the caption is darker than the normal
background color, add a colored border around the whole caption.
Otherwise only draw the bottom border using the default background
color.

Fix caption bevel and “well” style box shadow handling as well.

Change-Id: I1964df984ba50da8fcd1eed48edeb89abc5d3d8c

1 files changed, 30 insertions, 4 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index 075de3daeb..6ccd5139da 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -5,6 +5,7 @@ $v-panel-border: $v-border !default;
 
   .#{$primary-stylename} {
     @include valo-panel-style;
+    overflow: visible !important;
   }
 
   .#{$primary-stylename}-caption {
@@ -69,7 +70,7 @@ $v-panel-border: $v-border !default;
 
 @mixin valo-panel-caption-style (
     $background-color : $v-background-color,
-    $bevel            : first($v-bevel),
+    $bevel            : $v-bevel,
     $gradient         : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4,
     $border           : $v-panel-border
   ) {
@@ -77,18 +78,43 @@ $v-panel-border: $v-border !default;
   padding: 0 round($v-unit-size/3);
   line-height: $v-unit-size - first-number($v-border);
   $bg: $background-color;
-  border-bottom: valo-border($border: $border, $color: $bg, $strength: 0.5);
+
+  $shadow: null;
+  @if color-luminance($background-color) < color-luminance($v-background-color) - 10 {
+    $border-style: valo-border($border: $border, $color: $bg, $strength: 0.7);
+    $shadow: 0 0 0 first-number($border-style) first-color($border-style);
+    border-bottom: none;
+    margin-bottom: first-number($border-style);
+
+    .v-ie8 & {
+      outline: first-number($border-style) solid first-color($border-style);
+    }
+  } @else {
+    border-bottom: valo-border($border: $border, $color: $v-background-color, $strength: 0.7);
+  }
   @include valo-gradient($color: $bg, $gradient: $gradient);
   color: valo-font-color($bg);
   font-weight: $v-caption-font-weight;
   font-size: $v-caption-font-size;
-  @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient));
+  @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $shadow: $shadow, $gradient: $gradient));
   text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel);
 }
 
 
 
-@mixin valo-panel-well-style ($shadow: (0 1px 0 0 v-tint, join(inset, $v-shadow))) {
+@mixin valo-panel-well-style ($shadow: false) {
+  @if $shadow == false {
+    $new-shadow: ();
+    @if list-of-lists($v-shadow) {
+      @each $part in $v-shadow {
+        $new-part: join(inset, $part);
+        $new-shadow: $new-shadow, $new-part;
+      }
+    } @else {
+      $new-shadow: join(inset, $v-shadow);
+    }
+    $shadow: 0 1px 0 0 v-tint, $new-shadow;
+  }
   $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%);
   background: $bg;
   color: valo-font-color($bg);