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, 39 insertions, 22 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index d8d48d7f8c..473617e981 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -64,6 +64,10 @@
 
   .#{$primary-stylename}-popup {
     @include valo-menubar-popup-style($primary-stylename);
+
+    &.#{$primary-stylename}-popup-animate-out {
+      @include animation(none);
+    }
   }
 
 }
@@ -77,13 +81,14 @@
   z-index: 1;
   display: inline-block;
   @include box-sizing(border-box);
-  @include valo-button-style($border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
+  @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
   background: transparent;
   border-width: 0 $border-width 0 0;
   height: 100%;
   vertical-align: top;
   line-height: $v-unit-size - $border-width*2 - 1px;
   text-align: center;
+
   @if $border-width == 0 {
     margin-right: 1px;
   }
@@ -115,9 +120,16 @@
     border-radius: inherit;
   }
 
-  &:hover:before {
-    @include valo-button-hover-style;
-    border: none;
+  @if $v-hover-styles-enabled {
+    &:hover {
+      // IE needs some nudging to show the :before element
+      zoom: 1;
+
+      &:before {
+        @include valo-button-hover-style;
+        border: none;
+      }
+    }
   }
 
   &:active:before {
@@ -144,11 +156,7 @@
 
 
 
-@mixin valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-background-color) {
-
-  $copy: $v-background-color;
-  $v-background-color: $context;
-
+@mixin valo-menubar-popup-style ($primary-stylename: v-menubar) {
   @include valo-selection-overlay-style;
 
   margin: ceil($v-unit-size/8) 0 0 1px !important;
@@ -203,8 +211,6 @@
   [class*="disabled"] {
     cursor: default;
   }
-
-  $v-background-color: $copy;
 }
 
 
@@ -241,6 +247,7 @@
 
   .#{$primary-stylename}-menuitem {
     line-height: $unit-size - first-number($v-border)*2;
+    padding: 0 round($unit-size/2.5);
 
     &[class*="-icon-only"] {
       width: $unit-size;
@@ -250,12 +257,13 @@
 
 @mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
   border: none;
+  border-radius: 0;
   padding: first-number($v-border);
   box-shadow: none;
   background: transparent;
   color: inherit;
 
-  &:focus:not(.v-disabled) {
+  &:not(.v-disabled):focus {
     border: none;
     box-shadow: none;
   }
@@ -265,7 +273,9 @@
     border: none;
     margin-right: max(1px, first-number($v-border));
     border-radius: $v-border-radius;
-    text-shadow: valo-text-shadow($offset: -1px);
+    color: $v-selection-color;
+    text-shadow: valo-text-shadow($font-color: $v-selection-color, $offset: -1px);
+    padding: 0 round($v-unit-size/3);
 
     @if $v-animations-enabled {
       @include transition(color 140ms);
@@ -273,30 +283,36 @@
 
     &:first-child,
     &:last-child {
-      border-radius: inherit;
+      border-radius: $v-border-radius;
     }
 
-    &:hover:before {
-      display: none;
+    &:before {
+      content: none;
     }
 
-    &:active:not(.#{$primary-stylename}-menuitem-disabled):before {
-      display: block;
+    &:hover {
+      color: lighten($v-selection-color, 10%);
     }
 
-    &:hover {
-      color: $v-focus-color;
+    &:active {
+      color: inherit;
     }
   }
 
-  .#{$primary-stylename}-menuitem-checked {
+  .#{$primary-stylename}-menuitem-checked,
+  .#{$primary-stylename}-menuitem-checked:first-child {
     border: valo-border();
-    line-height: $v-unit-size - first-number($v-border)*4 - 1px;
     color: $v-selection-color;
+
+    .#{$primary-stylename}-menuitem-caption {
+      position: relative;
+      top: first-number($v-border)*-1;
+    }
   }
 
   .#{$primary-stylename}-menuitem-selected {
     $font-color: valo-font-color($v-selection-color, 0.9);
+    color: $font-color;
     text-shadow: valo-text-shadow($background-color: $v-selection-color, $font-color: $font-color);
 
     &:hover {
@@ -304,6 +320,7 @@
     }
   }
 
+  .#{$primary-stylename}-menuitem-disabled,
   .#{$primary-stylename}-menuitem-disabled:hover {
     color: inherit;
   }