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, 19 insertions, 29 deletions

diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index 6f29b1efef..d0ff42fcce 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -9,7 +9,9 @@
 $v-overlay-background-color: valo-overlay-background-color() !default;
 $v-overlay-border-radius: $v-border-radius !default;
 $v-overlay-border-width: first-number($v-border) !default;
-$v-overlay-open-animation: valo-overlay-open 200ms !default;
+
+$v-overlay-animate-in: valo-overlay-animate-in 120ms !default;
+$v-overlay-animate-out: valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms !default;
 
 $v-overlay-padding: round($v-unit-size/9) !default;
 $v-overlay-padding-vertical: $v-overlay-padding !default;
@@ -52,7 +54,7 @@ $v-selection-item-selection-color: $v-selection-color !default;
     bottom: -$shadow-offset-y + $shadow-blur - $shadow-spread;
     left: $shadow-offset-x - $shadow-blur - $shadow-spread;
     background: $shadow-color;
-    filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true);
+    filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=false);
   }
 }
 
@@ -69,17 +71,6 @@ $v-selection-item-selection-color: $v-selection-color !default;
   .v-ie8 & {
     display: block;
 
-    // Border simulation
-    /*.center {
-      position: absolute;
-      top: -$v-overlay-border-width;
-      right: -$v-overlay-border-width;
-      bottom: -$v-overlay-border-width;
-      left: -$v-overlay-border-width;
-      background: darken(valo-overlay-background-color(), $v-bevel-depth);
-      filter: alpha(opacity=round($v-bevel-depth/1%));
-    }*/
-
     // Up to 8 shadows are supported
     $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
     $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow);
@@ -110,7 +101,8 @@ $v-selection-item-selection-color: $v-selection-color !default;
 @mixin valo-overlay-style (
     $background-color: $v-overlay-background-color,
     $shadow: $v-overlay-shadow,
-    $open-animation: $v-overlay-open-animation
+    $animate-in: $v-overlay-animate-in,
+    $animate-out: $v-overlay-animate-out
   ) {
   padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
   border-radius: $v-overlay-border-radius;
@@ -120,8 +112,17 @@ $v-selection-item-selection-color: $v-selection-color !default;
 
   box-shadow:  valo-bevel-and-shadow($bevel: null, $shadow: $shadow);
 
-  @if $v-animations-enabled and $v-overlay-open-animation {
-    @include animation($open-animation);
+  @if $v-animations-enabled {
+    @if $animate-in {
+      &[class*="animate-in"] {
+        @include animation($animate-in);
+      }
+    }
+    @if $animate-out {
+      &[class*="animate-out"] {
+        @include animation($animate-out);
+      }
+    }
   }
 
   -webkit-backface-visibility: hidden;
@@ -132,22 +133,11 @@ $v-selection-item-selection-color: $v-selection-color !default;
 
 
 
-@if $v-animations-enabled {
-  @include keyframes(valo-overlay-open) {
-    0% {
-      @include transform(translatey(-3px));
-      opacity: 0;
-    }
-  }
-}
-
-
-
 
 
 
-@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $open-animation: $v-overlay-open-animation) {
-  @include valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
+@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in) {
+  @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in);
   padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
 }