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, 35 insertions, 11 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss
index 5d0e27a4f5..2c7e9925e7 100644
--- a/WebContent/VAADIN/themes/valo/components/_progressbar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_progressbar.scss
@@ -2,35 +2,59 @@ $v-progressbar-border-radius: $v-border-radius !default;
 
 
 @mixin valo-progressbar ($primary-stylename: v-progressbar) {
-  
+
   .#{$primary-stylename}-wrapper {
     @include valo-progressbar-track-style;
+    min-width: $v-unit-size * 2;
   }
 
   .#{$primary-stylename}-indicator {
     @include valo-progressbar-indicator-style;
+    min-width: max($v-border-radius*2, 3px);
+    @include transition(width 160ms );
+  }
+
+
+  .#{$primary-stylename}-point {
+    .#{$primary-stylename}-indicator {
+      background: transparent;
+      box-shadow: none;
+      border: none;
+      text-align: right;
+      overflow: hidden;
+
+      &:before {
+        content: "";
+        display: inline-block;
+        @include valo-progressbar-indicator-style;
+        width: round($v-unit-size/4);
+        vertical-align: top;
+      }
+    }
   }
 
 }
 
 
-@mixin valo-progressbar-track-style {
+@mixin valo-progressbar-track-style ($background-color: $v-background-color) {
   border-radius: $v-progressbar-border-radius;
   height: round($v-unit-size/4);
-  min-width: $v-unit-size * 2;
-  @include valo-gradient($color: scale-color($v-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse);
-  box-shadow: valo-textfield-box-shadow();
+  $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%));
+  @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to top);
   @include box-sizing(border-box);
 }
 
 
-@mixin valo-progressbar-indicator-style {
+@mixin valo-progressbar-indicator-style ($background-color: $v-selection-color, $border: $v-border) {
   border-radius: $v-progressbar-border-radius;
   height: inherit;
-  min-width: max($v-border-radius*2, 3px);
-  @include valo-gradient($color: valo-selection-color());
-  box-shadow: valo-button-box-shadow($background-color: valo-selection-color(), $bevel-depth: $v-bevel-depth/2);
-  border: $v-button-border-width solid;
-  border-color: valo-button-border-color($v-bevel-style, $v-bevel-depth/2, valo-selection-color());
+  @include valo-gradient($color: $background-color);
+  box-shadow: valo-bevel-and-shadow($background-color: $background-color);
+  @if $border {
+    border: valo-border($border: $border, $color: $background-color, $context: $v-app-background-color);
+  } @else {
+    border: none;
+  }
   @include box-sizing(border-box);
+  max-width: 100%;
 }