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

diff --git a/WebContent/VAADIN/themes/valo/util/_gradient.scss b/WebContent/VAADIN/themes/valo/util/_gradient.scss
index 5611c33da6..df159ad611 100644
--- a/WebContent/VAADIN/themes/valo/util/_gradient.scss
+++ b/WebContent/VAADIN/themes/valo/util/_gradient.scss
@@ -1,31 +1,46 @@
-@mixin valo-gradient($color, $style: $v-gradient-style, $depth: $v-gradient-depth, $fallback: null, $direction: to bottom) {
+@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) {
   @if $color {
-    @if $depth <= 0 {
-      background: $fallback or $color;
-    } @else {
-      $color-stops: valo-gradient-color-stops($color, $style, $depth);
+    @if $gradient {
+      $color-stops: valo-gradient-color-stops($color, $gradient);
       @include linear-gradient($direction, $color-stops, $fallback: $fallback or $color);
+    } @else {
+      background: $fallback or $color;
     }
   }
 }
 
-@function valo-gradient-color-stops($color, $style: $v-gradient-style, $depth: $v-gradient-depth) {
-  @if $depth > 0 {
-    
+@function valo-gradient-color-stops($color, $gradient: $v-gradient) {
+  $style: valo-gradient-style($gradient);
+  $opacity: valo-gradient-opacity($gradient);
+
+  @if $style != none and $opacity > 0 {
     @if $style == v-linear or $style == v-linear-reverse {
-      $start: blend-overlay(transparentize(#fff, 1-$depth/100%), $color);
-      $end: blend-overlay(transparentize(#000, max(0, 1-$depth/100%)), $color);
-      $end: blend-multiply(transparentize(#000, max(0, 1-$depth/200%)), $end);
-      
+      $start: blend-overlay(rgba(#fff, $opacity/100%), $color);
+      $end: blend-overlay(rgba(#000, max(0, $opacity/100%)), $color);
+      $end: blend-multiply(rgba(#000, max(0, $opacity/200%)), $end);
+
       @if $style == v-linear {
         @return $start 2%, $end 98%;
       } @else {
         @return $end 2%, $start 98%;
       }
-    
     }
-
   }
 
   @return $color 0%, $color 100%;
 }
+
+
+@function valo-gradient-style($gradient: $v-gradient) {
+  @if type-of($gradient) != list {
+    @return none;
+  }
+  @return first-string($gradient);
+}
+
+@function valo-gradient-opacity($gradient: $v-gradient) {
+  @if type-of($gradient) != list {
+    @return 0%;
+  }
+  @return first-number($gradient);
+}