Fix !important handling in opacity mixin

This change makes the mixin opacity() compatible with both the
sass-lang implementation and our compiler.

Change-Id: I29923cb3cf6d876fcf39696608fe3a5e3222374d

2 files changed, 11 insertions, 6 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index 3b7687bc8d..2e28174fa7 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -311,7 +311,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   [class*="disabled"] {
     cursor: default;
     color: inherit !important;
-    @include opacity(.1 !important);
+    @include opacity(.1, true);
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/util/_css3.scss b/WebContent/VAADIN/themes/valo/util/_css3.scss
index ca354e89af..b1215d735f 100644
--- a/WebContent/VAADIN/themes/valo/util/_css3.scss
+++ b/WebContent/VAADIN/themes/valo/util/_css3.scss
@@ -1,11 +1,16 @@
-@mixin opacity ($o) {
-  opacity: $o;
+@mixin opacity ($value, $important: false) {
+  $importantValue: null;
+  @if $important {
+    $importantValue: unquote("!important");
+  }
+
+  opacity: $value $importantValue;
 
-  $value: first-number($o);
   @if $value < 1 {
-    filter: alpha(opacity=$value*100) remove-nth($o, 1);
+    $valueperc: $value*100;
+    filter: alpha(opacity=#{$valueperc}) #{$importantValue};
   } @else {
-    filter: none remove-nth($o, 1);
+    filter: none #{$importantValue};
   }
 }