Multiple fixes to Valo theme

- Added initial Sass API for Accordion and TabSheet (previously only
one mixin)

- Renamed ‘darker-of’ function to ‘darkest-color’, which now supports
more than two colors

- Refactored notifications to use the new position classes as well as
the new animation-in/out functionality

- Refactored overlay styles to use animation-in/out functionality

- Fixed all unwanted white-space and scrollbar issues in all browsers
(font-size:0 or line-height:0 no longer necessary), and fixes vertical
centering in horizontal layout (#13671)

- Fixed borderless menubar clicking bug (Firefox and Opera)

- Fixed table column selector, which no longer produces scrollbars if
placed directly inside a scrollable area in full size

- Fixed table outline overflow in Opera (now using box-shadow instead
in all other browsers except IE8)

- Added toolbar support for windows (header and footer)

- Moved optional notification styles to common-stylenames.scss

-Various other small tweaks

Change-Id: I42343199be12f6d909b9584b7dce3e258846da81

1 files changed, 99 insertions, 29 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index 050a8156d3..d8c10b7347 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -1,26 +1,29 @@
 $v-window-background-color: $v-panel-background-color !default;
-$v-window-border-radius: null !default;
-$v-window-shadow: 0 4px 12px 6px rgba(0,0,0, $v-shadow-opacity/100%), $v-overlay-shadow !default;
-$v-window-open-animation: null !default;
-$v-window-animations-enabled: $v-animations-enabled !default;
+$v-window-border-radius: $v-border-radius !default;
+$v-window-shadow: 0 4px 20px 6px (v-shade 2), $v-overlay-shadow !default;
+$v-window-animate-in: valo-placeholder-animate-in 140ms, valo-anim-fade-in 140ms !default;
+$v-window-animate-out: valo-placeholder-animate-out 80ms, valo-anim-scale-down-fade-out 80ms !default;
 
 
-@if $v-window-animations-enabled {
+@if $v-animations-enabled {
   @include keyframes(valo-modal-window-indication) {
     0% { opacity: 0; }
     100% { opacity: 1; }
   }
+
+  @include keyframes(valo-anim-scale-down-fade-out) {
+    100% {
+      @include transform(scale(0.8));
+      opacity: 0;
+    }
+  }
 }
 
 
 @mixin valo-window ($primary-stylename: v-window) {
 
   .#{$primary-stylename} {
-    @include valo-overlay-style($background-color: $v-window-background-color);
-
-    @if $v-window-animations-enabled and $v-window-open-animation {
-      @include animation($v-window-open-animation);
-    }
+    @include valo-overlay-style($background-color: $v-window-background-color, $animate-in: $v-window-animate-in, $animate-out: $v-window-animate-out);
 
     @if $v-window-shadow {
       @if $v-window-shadow == none {
@@ -29,16 +32,21 @@ $v-window-animations-enabled: $v-animations-enabled !default;
         box-shadow: valo-bevel-and-shadow($shadow: $v-window-shadow);
       }
     }
-    border-radius: $v-window-border-radius;
-    //border: first-number($v-border) solid valo-panel-border-color();
+    @if $v-window-border-radius != $v-border-radius {
+      border-radius: $v-window-border-radius;
+    }
     padding: 0;
     min-width: 4*$v-unit-size !important;
     min-height: $v-unit-size !important;
-    overflow: hidden !important;
     white-space: nowrap;
+    overflow: hidden !important;
 
-    @if $v-window-animations-enabled {
+    @if $v-animations-enabled {
       @include transition(width 200ms, height 200ms, top 200ms, left 200ms);
+
+      &.#{$primary-stylename}-animate-in {
+        @include transition(none);
+      }
     }
   }
 
@@ -100,19 +108,26 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   .#{$primary-stylename}-maximizebox,
   .#{$primary-stylename}-restorebox {
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     top: 0;
     right: 0;
-    width: $v-unit-size;
+    @include box-sizing(border-box);
+    width: $v-unit-size - round($v-unit-size/9);
     height: $v-unit-size - 1px;
+    background-color: $v-window-background-color;
     line-height: $v-unit-size - 3px;
     text-align: center;
     cursor: pointer;
     font-family: FontAwesome;
     font-size: round($v-font-size * 1.3);
-    @include opacity(.4);
+    color: valo-font-color($v-window-background-color, .4);
+
     @if $v-animations-enabled {
-      @include transition(all 140ms);
+      @include transition(color 140ms);
+    }
+
+    @if $v-window-border-radius > 0 {
+      border-radius: 0 0 0 $v-window-border-radius;
     }
 
     &:focus {
@@ -130,17 +145,29 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   }
 
   .#{$primary-stylename}-closebox {
+    padding-right: round($v-unit-size/9);
     @include valo-window-close-icon-style;
   }
 
   .#{$primary-stylename}-maximizebox,
   .#{$primary-stylename}-restorebox {
-    right: $v-unit-size;
+    right: $v-unit-size - round($v-unit-size/9);
+    padding-left: round($v-unit-size/9);
+
+    + .#{$primary-stylename}-closebox {
+      border-bottom-left-radius: 0;
+    }
   }
 
   .#{$primary-stylename}-restorebox-disabled,
   .#{$primary-stylename}-maximizebox-disabled {
     display: none;
+
+    + .#{$primary-stylename}-closebox {
+      width: $v-unit-size;
+      padding-right: 0;
+      border-bottom-left-radius: $v-window-border-radius;
+    }
   }
 
   .#{$primary-stylename}-maximizebox {
@@ -234,15 +261,10 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   }
 
 
-
-
+  .#{$primary-stylename}-top-toolbar,
   .#{$primary-stylename}-bottom-toolbar {
-    padding: round($v-unit-size/5) round($v-unit-size/3);
-    @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color);
-    border-top: valo-border($strength: 0.5);
-
-    .v-expand {
-      overflow: visible;
+    > .v-widget {
+      vertical-align: top;
     }
 
     .v-label {
@@ -254,10 +276,58 @@ $v-window-animations-enabled: $v-animations-enabled !default;
     }
   }
 
+  .#{$primary-stylename}-top-toolbar {
+    &.v-layout {
+      padding: round($v-unit-size/5) round($v-unit-size/3);
+      position: relative;
+      z-index: 2;
+      border-top: valo-border($strength: 0.5);
+      border-bottom: valo-border($strength: 0.5);
+      background-color: $v-background-color;
+    }
+
+    &.v-menubar {
+      margin: round($v-unit-size/3) round($v-unit-size/3) round($v-unit-size/6);
+    }
+
+    &.v-menubar-borderless {
+      padding-left: round($v-unit-size/6);
+      padding-right: round($v-unit-size/6);
+      margin: round($v-unit-size/6) - first-number($v-border) 0;
+    }
+  }
+
+  .#{$primary-stylename}-bottom-toolbar.v-layout {
+    padding: round($v-unit-size/5) round($v-unit-size/3);
+    @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color);
+    border-top: valo-border($strength: 0.5);
+    border-radius: 0 0 $v-border-radius $v-border-radius;
+  }
+
+  .v-margin-left.v-margin-right.v-margin-top {
+    .#{$primary-stylename}-top-toolbar {
+      &.v-layout {
+        @include box-sizing(content-box);
+        margin: round($v-unit-size/-3) round($v-unit-size/-3) 0;
+      }
+
+      &.v-menubar {
+        margin: 0;
+      }
+
+      &.v-menubar-borderless {
+        margin: round($v-unit-size/6) - round($v-unit-size/3) round($v-unit-size/6) - round($v-unit-size/3) 0;
+        padding: 0;
+      }
+    }
+  }
+
   .v-margin-left.v-margin-right.v-margin-bottom {
     .#{$primary-stylename}-bottom-toolbar {
-      margin: 0 round($v-unit-size/-3) round($v-unit-size/-3);
-      @include box-sizing(content-box);
+      &.v-layout {
+        @include box-sizing(content-box);
+        margin: 0 round($v-unit-size/-3) round($v-unit-size/-3);
+      }
     }
   }