Valo Sass API refactoring (#13668)

Also fixes #13672 (added ‘notification’ v-included-components list)

Fixes #13746 as well (DragAndDropWrapper won’t hide the drag source any
more)

Loads of smaller tweaks and fixes, went through almost all components
again and fixed any issues I could find in testing.

Testing done with the following:
Desktop (OS X Mavericks)
-Safari 7
-Chrome 35
-Firefox 24.5
-Opera 21, 12
-Internet Explorer 8,10

Mobile:
-iOS 7
-Android 4
-Android 2.3
-Windows Phone 8

Change-Id: Ide32cacd1958b5b8db85afe23f455ad3140a7d21

1 files changed, 143 insertions, 65 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 853dd8bfd2..976dd7e1d4 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -1,8 +1,3 @@
-$v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
-
-
-
-
 @mixin valo-combobox ($primary-stylename: v-filterselect) {
 
   .#{$primary-stylename} {
@@ -13,13 +8,44 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
     .v-icon {
       position: absolute;
+      pointer-events: none;
     }
   }
-  
+
   .#{$primary-stylename}-suggestpopup {
     @include valo-combobox-popup-style;
   }
 
+  .#{$primary-stylename}-no-input {
+    cursor: pointer;
+    text-shadow: valo-text-shadow();
+
+    .#{$primary-stylename}-input {
+      @include user-select(none);
+      @include valo-gradient;
+      cursor: inherit;
+      box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient);
+      @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient);
+      text-shadow: inherit;
+      text-overflow: ellipsis;
+      @if $v-border-radius != $v-textfield-border-radius {
+        border-radius: $v-border-radius;
+      }
+
+      &:focus {
+        @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
+      }
+    }
+
+    .#{$primary-stylename}-button {
+      border-left: none !important;
+    }
+
+    &:hover .#{$primary-stylename}-button:before {
+      color: inherit;
+    }
+  }
+
 }
 
 
@@ -27,45 +53,67 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin valo-combobox-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
-                              $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, 
-                              $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
-                              $background-color: $v-textfield-background-color, $primary-stylename: v-filterselect) {
+@mixin valo-combobox-style (
+    $unit-size: $v-unit-size,
+
+    $font-color: null, // Computed by default
+    $font-weight: max(400, $v-font-weight),
+    $font-size: null, // Inherited by default
 
-  $background-color: $background-color or valo-textfield-background-color($v-background-color);
-  $bevel-style: $bevel-style or $v-bevel-style;
-  $bevel-depth: $bevel-depth or $v-bevel-depth;
-  $unit-size: $unit-size or $v-unit-size;
-  $border-radius: $border-radius or $v-border-radius;
+    $background-color: $v-textfield-background-color,
+    $border: $v-textfield-border,
+    $border-radius: $v-textfield-border-radius,
+
+    $gradient: none,
+    $bevel: $v-textfield-bevel,
+    $shadow: $v-textfield-shadow,
+
+    $primary-stylename: v-filterselect
+  ) {
+
+    height: $unit-size;
+    border-radius: $border-radius;
 
   .#{$primary-stylename}-input {
-    @include valo-combobox-input-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size, 
-                                         $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
-                                         $border-radius: $border-radius, $background-color: $background-color);
+    @include valo-combobox-input-style(
+          $unit-size: $unit-size,
+          $gradient: $gradient,
+          $bevel: $bevel,
+          $shadow: $shadow,
+          $border: $border,
+          $border-radius: $border-radius,
+          $background-color: $background-color,
+          $font-color: $font-color,
+          $font-size: $font-size,
+          $font-weight: $font-weight);
   }
 
-  .v-icon {
-    max-height: $unit-size;
+  .v-icon + .#{$primary-stylename}-input {
+    padding-left: $unit-size;
+  }
+
+  img.v-icon {
     $padding-width: ceil($unit-size/6);
+    max-height: $unit-size;
     @if $border-radius {
       $padding-width: $padding-width + ceil($border-radius/3);
     }
     margin-left: $padding-width;
+  }
 
-    + .#{$primary-stylename}-input {
-      padding-left: $padding-width + $unit-size;
-    }
+  span.v-icon {
+    color: valo-font-color($background-color);
+    width: $unit-size;
   }
-  
+
   &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input {
-    @include valo-textfield-prompt-style(valo-textfield-background-color($background-color));
+    @include valo-textfield-prompt-style($background-color);
   }
 
   .#{$primary-stylename}-button {
-    @include valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth,
-                                           $background-color: $background-color);
+    @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color);
   }
-  
+
   &.v-disabled  {
     @include opacity($v-textfield-disabled-opacity);
     & .#{$primary-stylename}-button {
@@ -106,18 +154,38 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin valo-combobox-input-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
-                                    $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
-                                    $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
-                                    $background-color: $v-textfield-background-color) {
+@mixin valo-combobox-input-style (
+    $unit-size: $v-unit-size,
+    $padding: null, // Computed by default
+
+    $font-color: null, // Computed by default
+    $font-weight: null, // Inherited by default
+    $font-size: null, // Inherited by default
+
+    $background-color: $v-textfield-background-color,
+    $border: $v-border,
+    $border-radius: $v-textfield-border-radius,
+
+    $gradient: none,
+    $bevel: $v-bevel,
+    $shadow: $v-shadow
+) {
   @include box-sizing(border-box);
-  @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, 
-                                  $shadow-style: $shadow-style, $shadow-depth: $shadow-depth,
-                                  $unit-size: $unit-size, $border-radius: $border-radius,
-                                  $background-color: $background-color) ;
-  width: 100%;
+  @include valo-textfield-style($unit-size: $unit-size,
+                                $padding: $padding,
+                                $font-color: $font-color,
+                                $font-weight: $font-weight,
+                                $font-size: $font-size,
+                                $background-color: $background-color,
+                                $border: $border,
+                                $border-radius: $border-radius,
+                                $gradient: $gradient,
+                                $bevel: $bevel,
+                                $shadow: $shadow);
+  width: 100% !important; // Need to override calculated inline style which is sometimes added
   height: 100%;
-  padding-right: $unit-size * 1.2;
+  padding-right: round($unit-size * 1.2);
+  border-radius: inherit;
 }
 
 
@@ -126,21 +194,26 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
-                                     $background-color: $v-textfield-background-color) {
+@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color) {
+  $border-width: first-number($v-textfield-border);
   @include valo-tappable;
   position: absolute;
-  top: $v-textfield-border-width;
-  right: $v-textfield-border-width;
-  bottom: $v-textfield-border-width;
+  top: $border-width;
+  right: $border-width;
+  bottom: $border-width;
   width: $unit-size;
   cursor: pointer;
-  border-left: $v-textfield-border-width solid blend-darken(black($bevel-depth/200%), $background-color);
+  border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+
+  .v-ie8 & {
+    background-color: $background-color;
+  }
 
   @if $v-border-radius > 0 {
-    border-radius: 0 $v-border-radius $v-border-radius 0;
+    $br: $v-border-radius - $border-width;
+    border-radius: 0 $br $br 0;
   }
-  
+
   &:before {
     @include valo-combobox-button-icon-style($background-color);
     color: mix($background-color, valo-font-color($background-color));
@@ -155,7 +228,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
     margin-top: -.47em;
   }
 
-  @if $v-combobox-hover-style-enabled {
+  @if $v-hover-styles-enabled {
     &:hover:before {
       color: valo-font-color($background-color);
     }
@@ -184,37 +257,36 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 
 
-@mixin valo-combobox-popup-style ($background-color: null) {
-  
+@mixin valo-combobox-popup-style {
+
   .v-filterselect-suggestmenu {
-    @include valo-selection-overlay-style($background-color: $background-color);
+    @include valo-selection-overlay-style;
     box-sizing: border-box;
     position: relative;
     z-index: 1;
   }
 
    margin-top: ceil($v-unit-size/8) !important;
-  
+
   table,
   tbody,
   tr,
   td {
     display: block;
   }
-  
+
   .gwt-MenuItem {
     @include valo-selection-item-style;
   }
-  
+
   .gwt-MenuItem-selected {
-    @include valo-selection-item-selected-style($parent-background-color: $background-color);
+    @include valo-selection-item-selected-style;
   }
 
   .v-filterselect-status {
     position: absolute;
     right: $v-border-radius;
-    $bg: $background-color or $v-background-color;
-    $bg: scale-color($bg, $lightness: -15%);
+    $bg: scale-color($v-background-color, $lightness: -15%);
     background: transparentize($bg, .1);
     color: valo-font-color($bg);
     border-radius: 0 0 $v-border-radius $v-border-radius;
@@ -229,13 +301,13 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
     @if $v-animations-enabled {
        @include animation(valo-combobox-show-status 200ms 80ms backwards);
     }
-    
+
     > * {
       color: valo-font-color($bg);
       text-decoration: none;
     }
   }
-  
+
   div[class*="page"] {
     position: absolute;
     z-index: 3;
@@ -250,19 +322,19 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
     font-family: FontAwesome;
     @include transform( scale(.8) );
 
-    $bg: $background-color or $v-background-color;
-    color: valo-font-color($bg);
-    
+    color: valo-font-color($v-background-color);
+
     &:hover {
       @include opacity(1);
+      background: rgba($v-background-color, .5);
     }
-    
+
     span {
       // Hide text
       display: none;
     }
   }
-  
+
   &:hover div[class*="page"] {
     @include transform( scale(1) );
   }
@@ -270,17 +342,23 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
   div[class*="prev"] {
     top: 0;
     @include transform-origin( 100% 0% );
+    border-radius: 0 $v-border-radius 0 $v-border-radius;
     &:before {
       content: "\f0d8";
     }
-    
+
   }
-  
+
   div[class*="next"] {
     bottom: 0;
     @include transform-origin( 100% 100% );
+    border-radius: $v-border-radius 0 $v-border-radius 0;
     &:before {
       content: "\f0d7";
     }
   }
+
+  div[class*="-off"] {
+    display: none;
+  }
 }