Valo font path fixes for Vaadin Sass compiler

Change-Id: I2c72d57ffdc006e583b5bac23155eae67f33aa1f

diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
index dfac86fd8dbeb0ff42152b871144c26b18c9c779..4509c23f15ccdf6c676e6365a87bcf1625907597 100644 (file)
--- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
+++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
@@ -1,7 +1,7 @@
 @mixin valo-colorpicker-global ($primary-stylename: v-colorpicker) {
   $valo-colorpicker-pathPrefix: null;
   @if $v-relative-paths == false {
-    $valo-colorpicker-pathPrefix: "../valo/components/img/colorpicker/";
+    $valo-colorpicker-pathPrefix: "../valo/components/";
   }
 
   .#{$primary-stylename}-popup.v-window {
@@ -17,11 +17,11 @@
   }
 
   .rgb-gradient .#{$primary-stylename}-gradient-background {
-    background: url(#{$valo-colorpicker-pathPrefix}gradient2.png);
+    background: url(#{$valo-colorpicker-pathPrefix}img/colorpicker/gradient2.png);
   }
 
   .hsv-gradient .#{$primary-stylename}-gradient-foreground {
-    background: url(#{$valo-colorpicker-pathPrefix}gradient.png);
+    background: url(#{$valo-colorpicker-pathPrefix}img/colorpicker/gradient.png);
   }
 
   .#{$primary-stylename}-gradient-higherbox {
@@ -51,7 +51,7 @@
   }
 
   .#{$primary-stylename}-popup .v-slider.hue-slider:before {
-    background: url(#{$valo-colorpicker-pathPrefix}slider_hue_bg.png);
+    background: url(#{$valo-colorpicker-pathPrefix}img/colorpicker/slider_hue_bg.png);
   }
 
   .#{$primary-stylename}-popup input.v-textfield-dark {

diff --git a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
index 8871648a43a519d5d0c0efc349c2e3fa4b25ab9a..b33e14d5d28061c7221c09441a99247333becf49 100644 (file)
--- a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
+++ b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss
@@ -6,9 +6,15 @@
 @import "lora/lora";
 
 
+$fontawesome-pathPrefix: null;
+  
+@if $v-relative-paths == true {
+  $fontawesome-pathPrefix: "../../../";
+}
+
 @mixin valo-fonts {
   // Font Awesome icons from the Base theme
-  @include v-font(FontAwesome, "../base/fonts/fontawesome-webfont");
+  @include v-font(FontAwesome, "#{$fontawesome-pathPrefix}../base/fonts/fontawesome-webfont");
 }
 
 

diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
index 0e554024497cc8360bef2d590132e2f41bbbb590..71d72b367cbe34cf8a450e8e1676185b7a918490 100644 (file)
--- a/WebContent/VAADIN/themes/valo/shared/_global.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -217,7 +217,7 @@ $valo-shared-pathPrefix: null;
       padding: round($v-unit-size/4);
       margin-top: round($_size/-2);
       margin-left: round($_size/-2);
-      background: #fff url($valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
+      background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50%;
       border-radius: $v-border-radius;
     }
 
@@ -247,7 +247,7 @@ $valo-shared-pathPrefix: null;
       width: 28px !important;
       height: 28px;
       padding: round($v-unit-size/4);
-      background: #fff url($valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%;
+      background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50%;
       border-radius: $v-border-radius;
       top: round($v-unit-size/4);
       right: round($v-unit-size/4);

diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
index 86d87fafa21d281e18dfa35b043a3d4dda12a8ca..56aab30d2bc6b40ceeb1e442c312e5c976012017 100644 (file)
--- a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
@@ -33,7 +33,7 @@
   .v-ie9 & {
     border: none;
     border-radius: $v-border-radius;
-    background: #fff url($valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50% 50%;
+    background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50% 50%;
     background-size: 80%;
   }