Valo font path fixes for Vaadin Sass compiler

Change-Id: I2c72d57ffdc006e583b5bac23155eae67f33aa1f

4 files changed, 14 insertions, 8 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
index dfac86fd8d..4509c23f15 100644
--- 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 8871648a43..b33e14d5d2 100644
--- 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 0e55402449..71d72b367c 100644
--- 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 86d87fafa2..56aab30d2b 100644
--- 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%;
   }