From b5cfbf1246481caf7091db20f5735e52492eab65 Mon Sep 17 00:00:00 2001
From: gerard <gerard@verdnatura.es>
Date: Mon, 14 May 2018 12:54:17 +0200
Subject: [PATCH] Bug #253 Actualizar los estilos para que concuerden con la
 paleta

---
 client/auth/src/login/style.scss              |  3 +-
 client/client/src/addresses/addresses.html    |  8 ++--
 .../src/components/autocomplete/style.scss    | 10 ++--
 client/core/src/components/dialog/style.scss  |  4 +-
 .../core/src/components/drop-down/style.scss  |  6 ++-
 .../src/components/grid-header/style.scss     |  4 +-
 client/core/src/components/grid/style.scss    |  8 ++--
 .../src/components/icon-button/style.scss     | 25 ++++++++--
 .../src/components/label-value/style.scss     |  6 ++-
 client/core/src/components/paging/style.scss  |  4 +-
 .../core/src/components/snackbar/style.scss   |  3 +-
 .../src/components/step-control/style.scss    | 10 ++--
 client/core/src/styles/index.js               |  2 +-
 client/core/src/styles/mdl-override.css       | 29 -----------
 client/core/src/styles/mdl-override.scss      | 48 +++++++++++++++++++
 client/salix/src/components/home/style.scss   |  7 ++-
 .../salix/src/components/left-menu/style.scss |  3 +-
 .../salix/src/components/main-menu/style.scss | 12 +++--
 client/salix/src/styles/background.scss       |  4 +-
 client/salix/src/styles/colors.scss           | 20 ++++++--
 client/salix/src/styles/font-style.scss       |  7 ++-
 client/salix/src/styles/index.js              |  1 +
 client/salix/src/styles/misc.scss             | 36 +++++++-------
 client/salix/src/styles/summary.scss          |  6 +--
 client/salix/src/styles/title.scss            |  2 +
 webpack.config.js                             | 13 ++++-
 26 files changed, 183 insertions(+), 98 deletions(-)
 delete mode 100644 client/core/src/styles/mdl-override.css
 create mode 100644 client/core/src/styles/mdl-override.scss

diff --git a/client/auth/src/login/style.scss b/client/auth/src/login/style.scss
index d152c84ba..e959e15b2 100644
--- a/client/auth/src/login/style.scss
+++ b/client/auth/src/login/style.scss
@@ -1,3 +1,4 @@
+@import "colors";
 
 vn-login > div {
 	position: absolute;
@@ -5,7 +6,7 @@ vn-login > div {
 	width: 100%;
 	margin: 0;
 	padding: 0;
-	color: #333;
+	color: $main-font-color;
 	font-size: 1.1em;
 	font-weight: normal;
 	background-color: #3c393b;
diff --git a/client/client/src/addresses/addresses.html b/client/client/src/addresses/addresses.html
index 606019266..bac2f70c8 100644
--- a/client/client/src/addresses/addresses.html
+++ b/client/client/src/addresses/addresses.html
@@ -6,13 +6,13 @@
             <vn-one border-radius class="pad-small border-solid"
                 ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isActive && !address.isDefaultAddress}">
                 <vn-horizontal style="align-items: center;">
-                    <vn-none pad-medium-h style="color:#FFA410;">
-                        <i class="material-icons" ng-if="address.isDefaultAddress">star</i>
-                        <i class="material-icons"
+                    <vn-none pad-medium-h>
+                        <i class="material-icons" orange ng-if="address.isDefaultAddress">star</i>
+                        <i class="material-icons" orange
                             vn-tooltip="Active first to set as default" 
                             tooltip-position="left"  
                             ng-if="!address.isActive">star_border</i>
-                        <i class="material-icons pointer" 
+                        <i class="material-icons pointer" orange
                             ng-if="address.isActive && !address.isDefaultAddress" 
                             vn-tooltip="Set as default" 
                             tooltip-position="left" 
diff --git a/client/core/src/components/autocomplete/style.scss b/client/core/src/components/autocomplete/style.scss
index 3b56675f9..d18503402 100755
--- a/client/core/src/components/autocomplete/style.scss
+++ b/client/core/src/components/autocomplete/style.scss
@@ -1,3 +1,4 @@
+@import "colors";
 
 vn-autocomplete > div > .mdl-textfield {
     position: relative;
@@ -16,16 +17,15 @@ vn-autocomplete > div > .mdl-textfield {
         right: 0;
         top: 1.3em;
         height: 1em;
-        color: #888;
+        color: $secondary-font-color;
         border-radius: .2em;
-        background-color: rgba(255, 255, 255, .8);
 
         & > vn-icon {
             cursor: pointer;
             font-size: 18px;
 
             &:hover {
-                color: #333;
+                color: $main-font-color;
             }
         }
     }
@@ -51,10 +51,10 @@ ul.vn-autocomplete {
 
         &.active,
         &:hover {
-            background-color: rgba(1, 1, 1, .1);
+            background-color: $hover;
         }
         &.load-more {
-            color: #ffa410;
+            color: $main-01;
             font-family: vn-font-bold;
             padding: .4em .8em;
         }
diff --git a/client/core/src/components/dialog/style.scss b/client/core/src/components/dialog/style.scss
index de13f0f7c..8aa2ed7a1 100644
--- a/client/core/src/components/dialog/style.scss
+++ b/client/core/src/components/dialog/style.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
 .vn-dialog {
     display: none;
     justify-content: center;
@@ -62,7 +64,7 @@
             input[type="button"],
             input[type="submit"],
             input[type="reset"] {
-                color: #ffa410;
+                color: $main-01;
                 font-family: vn-font-bold;
                 padding: .7em;
                 margin: -0.7em;
diff --git a/client/core/src/components/drop-down/style.scss b/client/core/src/components/drop-down/style.scss
index 94521aff8..d0ab93745 100755
--- a/client/core/src/components/drop-down/style.scss
+++ b/client/core/src/components/drop-down/style.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
 vn-drop-down {
     .dropdown {
         display: flex;
@@ -28,7 +30,7 @@ vn-drop-down {
                 font-size: 18px; 
         
                 &:hover {
-                    color: #333;
+                    color: $main-font-color;
                 }
             }
             &:hover > vn-icon[icon=clear] {
@@ -64,7 +66,7 @@ vn-drop-down {
                 }
             }
             .status {
-                color: #ffab40;
+                color: $main-01;
                 font-weight: bold;
             }
         }
diff --git a/client/core/src/components/grid-header/style.scss b/client/core/src/components/grid-header/style.scss
index 8f3475b35..2018b192f 100644
--- a/client/core/src/components/grid-header/style.scss
+++ b/client/core/src/components/grid-header/style.scss
@@ -1,5 +1,7 @@
+@import "colors";
+
 vn-grid-header {
-    border-bottom: 3px solid #9D9D9D;
+    border-bottom: 3px solid $main-header;
     font-weight: bold;
     .orderly{
         text-align: center;
diff --git a/client/core/src/components/grid/style.scss b/client/core/src/components/grid/style.scss
index 00232e6c3..197ce71f4 100644
--- a/client/core/src/components/grid/style.scss
+++ b/client/core/src/components/grid/style.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
 .vn-grid {
     border-collapse: collapse;
     width: 100%;
@@ -17,17 +19,17 @@
         }
     }
     & > thead, & > tbody {
-        border-bottom: 3px solid #9D9D9D;
+        border-bottom: 3px solid $main-header;
     }
     & > tbody > tr {
-        border-bottom: 1px solid #9D9D9D;
+        border-bottom: 1px solid $main-header;
         transition: background-color 200ms ease-in-out;
 
         &.clickable {
             cursor: pointer;
 
             &:hover {
-                background-color: #e5e5e5;
+                background-color: $hover;
             }
         }
 
diff --git a/client/core/src/components/icon-button/style.scss b/client/core/src/components/icon-button/style.scss
index 7754c871a..5aeef63af 100644
--- a/client/core/src/components/icon-button/style.scss
+++ b/client/core/src/components/icon-button/style.scss
@@ -1,17 +1,34 @@
+@import "colors";
+
 vn-icon-button {
     display: inline-block;
     text-align: center;
-    color: rgba(#f7931e, 0.7);
+    color: rgba($main-01, 0.7);
     transition: color 200ms ease-in-out;
     cursor: pointer;
-
+    &.button {
+        background-color: $main-01;
+        color: white;
+        width: 64px;
+        height: 36px;
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+        border-radius: 2px;
+    }
+    &.button:focus {
+        will-change: box-shadow;
+        box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
+        transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
+    }
+    &.button i {
+        margin-top: 6px;
+    }
     & > i,
     & > i.material-icons {
         display: block;
         font-size: inherit;
         color: inherit;
     }
-    &:hover {
-        color: #f7931e;
+    &:not(.button):hover {
+        color: $main-01;
     }
 }
diff --git a/client/core/src/components/label-value/style.scss b/client/core/src/components/label-value/style.scss
index cbd90f52c..6a11b382f 100644
--- a/client/core/src/components/label-value/style.scss
+++ b/client/core/src/components/label-value/style.scss
@@ -1,9 +1,11 @@
+@import "colors";
+
 vn-label-value {
     & vn-label {
-        color: #9b9b9b
+        color: $secondary-font-color;
     }
 
     & span {
-        color: #222222
+        color: $main-font-color;
     }
 }
\ No newline at end of file
diff --git a/client/core/src/components/paging/style.scss b/client/core/src/components/paging/style.scss
index f52828dc1..318bdbd55 100644
--- a/client/core/src/components/paging/style.scss
+++ b/client/core/src/components/paging/style.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
 vn-paging {
     display: block;
     text-align: center;
@@ -18,7 +20,7 @@ vn-paging {
             margin-left: 0;
         }
         &.active > a {
-            background: #3c393b;
+            background: $main-header;
             color: #fff;
         }
         & > a,
diff --git a/client/core/src/components/snackbar/style.scss b/client/core/src/components/snackbar/style.scss
index 513280243..c3de5d50d 100644
--- a/client/core/src/components/snackbar/style.scss
+++ b/client/core/src/components/snackbar/style.scss
@@ -1,3 +1,4 @@
+@import "colors";
 vn-snackbar > div {
     box-sizing: border-box;
     background-color: #333;
@@ -39,7 +40,7 @@ vn-snackbar > div {
         border: none;
         background-color: transparent;
         font-weight: bold;
-        color: #ffab40;
+        color: $main-01;
         padding: 1em;
         margin: -1em;
         padding-left: 1.5em;
diff --git a/client/core/src/components/step-control/style.scss b/client/core/src/components/step-control/style.scss
index 085801634..f099281b0 100644
--- a/client/core/src/components/step-control/style.scss
+++ b/client/core/src/components/step-control/style.scss
@@ -1,9 +1,11 @@
+@import "colors";
+
 vn-step-control {
     display: flex;
     justify-content: center;
 
     .step-control {
-        border-top: 2px solid rgb(255,152,0);
+        border-top: 2px solid $main-01;
         margin-bottom: 15px;
 
         & > .steps {
@@ -19,8 +21,8 @@ vn-step-control {
         }
         
         & > .steps > .step .circle {
-            border: 2px solid rgb(255,152,0);
-            background-color: #FFF;
+            border: 2px solid $main-01;
+            background-color: white;
             align-content: center;
             margin-top: -9.5px;
             -moz-border-radius: 50%;
@@ -32,7 +34,7 @@ vn-step-control {
         }
  
         & > .steps > .step .circle.active {
-            background-color: rgb(255,152,0);
+            background-color: $main-01;
         }
 
         & > .buttons {
diff --git a/client/core/src/styles/index.js b/client/core/src/styles/index.js
index a8ed4b937..fea272aed 100644
--- a/client/core/src/styles/index.js
+++ b/client/core/src/styles/index.js
@@ -1,4 +1,4 @@
-import './mdl-override.css';
+import './mdl-override.scss';
 import './mdi-override.css';
 import './zoom-image.scss';
 import './fontello-head.css';
diff --git a/client/core/src/styles/mdl-override.css b/client/core/src/styles/mdl-override.css
deleted file mode 100644
index d781e5817..000000000
--- a/client/core/src/styles/mdl-override.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Rewrited CSS rules from Material Design Lite.
- * FIXME: don't use !important
- */
-body {
-    line-height: initial;
-    font-size: 12pt;
-}
-.mdl-button {
-    font-weight: bolder;
-    color: #ffa410;
-}
-.mdl-button--colored {
-    color: white !important;
-}
-.mdl-button--colored,
-.mdl-button--colored:focus,
-.mdl-button--colored:active {
-    background-color: #ffa410 !important;
-}
-.mdl-button--colored:hover,
-.mdl-button--raised:hover {
-    background-color: #ffa410 !important;
-}
-.mdl-button--fab{
-    color: white !important; 
-    background-color: #ff9400 !important;
-}
-
diff --git a/client/core/src/styles/mdl-override.scss b/client/core/src/styles/mdl-override.scss
new file mode 100644
index 000000000..95576bcfc
--- /dev/null
+++ b/client/core/src/styles/mdl-override.scss
@@ -0,0 +1,48 @@
+@import "colors";
+
+/**
+ * Rewrited CSS rules from Material Design Lite.
+ * FIXME: don't use !important
+ */
+body {
+    line-height: initial;
+    font-size: 12pt;
+}
+.mdl-button {
+    font-weight: bolder;
+    color: $main-01;
+}
+.mdl-button--colored {
+    color: white !important;
+}
+.mdl-textfield--floating-label.is-focused .mdl-textfield__label, 
+.mdl-textfield--floating-label.is-dirty .mdl-textfield__label, 
+.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
+    color: $main-01 !important;
+}
+.mdl-checkbox.is-checked .mdl-checkbox__box-outline, {
+    border: 2px solid $main-01;
+}
+fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline, .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
+    border: 2px solid rgba(0,0,0,.26);
+}
+.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
+    background: $main-01;
+}
+.mdl-textfield__label::after{
+    background-color: $main-01 !important;
+}
+.mdl-button--colored,
+.mdl-button--colored:focus,
+.mdl-button--colored:active {
+    background-color: $main-01 !important;
+}
+.mdl-button--colored:hover,
+.mdl-button--raised:hover {
+    background-color: $main-01 !important;
+}
+.mdl-button--fab{
+    color: white !important; 
+    background-color: $main-01 !important;
+}
+
diff --git a/client/salix/src/components/home/style.scss b/client/salix/src/components/home/style.scss
index b311ccdf7..b44afdab8 100644
--- a/client/salix/src/components/home/style.scss
+++ b/client/salix/src/components/home/style.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
 vn-home {
     padding: 2em;
 
@@ -17,7 +19,7 @@ vn-home {
             & > a {
                 overflow:hidden;
                 border-radius: 6px;
-                background-color: #FF9300;
+                background-color: $main-01;
                 color: white;
                 display: flex;
                 flex-direction: column;
@@ -30,7 +32,7 @@ vn-home {
                 transition: opacity 250ms ease-out;
             
                 &:hover {
-                    opacity: .7;
+                    background-color: $hover;
                 }
                 & > vn-icon {
                     font-size: 4em;
@@ -42,6 +44,7 @@ vn-home {
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
+                    color: white;
                 }
             }
         }
diff --git a/client/salix/src/components/left-menu/style.scss b/client/salix/src/components/left-menu/style.scss
index c14fd797e..a029594e6 100644
--- a/client/salix/src/components/left-menu/style.scss
+++ b/client/salix/src/components/left-menu/style.scss
@@ -1,7 +1,8 @@
+@import "colors";
 
 vn-menu-item {
     & > li.active {
-        background-color: #424242;
+        background-color: $main-header;
         color: white;
     }
 }
diff --git a/client/salix/src/components/main-menu/style.scss b/client/salix/src/components/main-menu/style.scss
index 8f6f12b85..eddeb2677 100644
--- a/client/salix/src/components/main-menu/style.scss
+++ b/client/salix/src/components/main-menu/style.scss
@@ -1,3 +1,5 @@
+@import "colors";
+
 vn-main-menu {
     #user {
         display: inline-block;
@@ -6,12 +8,15 @@ vn-main-menu {
         height: 2.5em;
         vertical-align: middle;
     }
+    #user h6{
+        color: white;
+    }
     & > div > vn-icon, & > div > a > vn-icon {
         font-size: 2.2em;
         cursor: pointer;
 
         &:hover {
-            color: #FF9300;
+            color: $main-01;
         }
     }
     .vn-popover ul {
@@ -20,7 +25,7 @@ vn-main-menu {
         color: white;
     
         li {
-            background-color: #FF9300;
+            background-color: $main-01;
             margin-bottom: .6em;
             cursor: pointer;
             padding: .8em;
@@ -32,8 +37,7 @@ vn-main-menu {
                 vertical-align: middle;
             }
             &:hover {
-                background-color: #FF9300;
-                opacity: 0.7 !important;
+                background-color: $hover;
             }
             &:last-child {
                 margin-bottom: 0;
diff --git a/client/salix/src/styles/background.scss b/client/salix/src/styles/background.scss
index b3a7ec7f2..58cab68d4 100644
--- a/client/salix/src/styles/background.scss
+++ b/client/salix/src/styles/background.scss
@@ -4,11 +4,11 @@ $bg-main: $color-green;
 $bg-minor: $color-orange;
 $bg-content: $color-light-grey;
 $bg-panel: $color-white;
-$bg-dark-bar: $color-dark;
+$bg-dark-bar: $main-header;
 $bg-dark-menu: $color-dark-grey;
 
 html [bg-main], .bg-main {
-  background-color: $bg-main;
+  background-color: $main-bg;
 }
 html [bg-minor], .bg-minor {
   background-color: $bg-minor;
diff --git a/client/salix/src/styles/colors.scss b/client/salix/src/styles/colors.scss
index 3e3876337..3a9cea1c6 100644
--- a/client/salix/src/styles/colors.scss
+++ b/client/salix/src/styles/colors.scss
@@ -1,11 +1,23 @@
+$main-font-color :#222222;
+$secondary-font-color: #9b9b9b;
+$main-header: #3d3d3d;
+$hover: #c4c4c4;
+$main-bg: #e5e5e5;
+$main-01: #f7931e;
+$main-01-05: rgba($main-01, 0.5);
+$main-01-03: rgba($main-01, 0.3);
+$main-02: #a3d131;
+$main-02-05: rgba($main-02, 0.5);
+$main-02-03: rgba($main-02, 0.3);
+
 $color-green: #a3d131;
 $color-orange: #f7931e;
 $color-white: white;
-$color-dark: #3d3d3d;
+$color-dark: $main-header; //headerbar
 $color-dark-grey: #424242;
-$color-light-grey: #e5e5e5;
-$color-medium-grey: #9b9b9b;
-$color-grey: #c4c4c4;
+$color-light-grey: $main-bg;
+$color-medium-grey: $secondary-font-color;
+$color-grey: #c4c4c4; //deprecated
 $color-medium-green: rgba($color-green, 0.5);
 $color-medium-orange: rgba($color-orange, 0.5);
 $color-light-green: rgba($color-green, 0.3);
diff --git a/client/salix/src/styles/font-style.scss b/client/salix/src/styles/font-style.scss
index bb26140ee..a33df7a6a 100644
--- a/client/salix/src/styles/font-style.scss
+++ b/client/salix/src/styles/font-style.scss
@@ -1,10 +1,9 @@
 @import "colors";
 @import "font-family";
 
-$font-color: $color-dark-grey;
 
 body {
-    color: $font-color;
+    color: $main-font-color;
     font-family: vn-font;
 }
 html [uppercase], .uppercase {
@@ -12,12 +11,12 @@ html [uppercase], .uppercase {
 }
 
 html [green], .green{color: $color-green}
-html [orange], .orange{color: $color-orange}
+html [orange], .orange{color: $main-01}
 html [white], .white{color: $color-white}
 html [dark], .dark{color: $color-dark}
 html [dark-grey], .dark-grey{color: $color-dark-grey}
 html [light-grey], .light-grey{color: $color-light-grey}
-html [medium-grey], .medium-grey{color: $color-medium-grey}
+html [medium-grey], .medium-grey{color: $hover}
 html [medium-green], .medium-green{color: $color-medium-green}
 html [medium-orange], .medium-orange{color: $color-medium-orange}
 html [light-green], .light-green{color: $color-light-green}
diff --git a/client/salix/src/styles/index.js b/client/salix/src/styles/index.js
index a3e9f74a3..31ef9c863 100644
--- a/client/salix/src/styles/index.js
+++ b/client/salix/src/styles/index.js
@@ -8,3 +8,4 @@ import './border.scss';
 import './font-style.scss';
 import './misc.scss';
 import './summary.scss';
+import './colors.scss';
diff --git a/client/salix/src/styles/misc.scss b/client/salix/src/styles/misc.scss
index 937323bfd..2f23a655b 100644
--- a/client/salix/src/styles/misc.scss
+++ b/client/salix/src/styles/misc.scss
@@ -64,9 +64,9 @@ html [vn-center], .vn-center{
 
 .list-element{
     padding: 8px 0 0 0;
-    border-bottom: 1px solid $color-medium-grey;
+    border-bottom: 1px solid $main-header;
     i {
-        color: $color-orange;
+        color: $main-01;
     }
 }
 .tooltip {
@@ -81,7 +81,7 @@ html [vn-center], .vn-center{
 }
 .list-footer{
     font-family: vn-font-bold;
-    border-top: 3px solid $color-medium-grey;
+    border-top: 3px solid $main-header;
 }
 .list-element.warning{
     background-color: $color-medium-orange;
@@ -97,7 +97,7 @@ html [vn-center], .vn-center{
     background-color: $color-light-orange;
 }
 .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
-    background-color: $color-orange;
+    background-color: $main-01;
 }
 
 html [pointer], .pointer{
@@ -121,7 +121,7 @@ a {
     transition: background-color 250ms ease-out;
 
     &:hover {
-        background-color: rgba(0, 0, 0, .1);
+        background-color: $hover;
     }
 }
 
@@ -134,6 +134,14 @@ vn-button-bar {
     margin-top: $margin-small;
 }
 
+vn-tool-bar {
+    display: flex;
+
+    & > * {
+        margin-right: .6em;
+    }
+}
+
 vn-main-block {
     display:block; 
     max-width: 1920px; 
@@ -150,7 +158,7 @@ vn-main-block {
 
 .vn-descriptor {
     .header {
-        background: #ffa410;
+        background: $main-01;
         color: white;
         justify-content: space-between;
         align-items: stretch;
@@ -183,7 +191,7 @@ vn-main-block {
             font-size: 1.5em;
         }
         & > vn-icon.bright {
-            color: #ffa410;
+            color: $main-01;
             opacity: 1;
         }
     }
@@ -194,14 +202,6 @@ vn-main-block {
     margin: 0 auto;
 }
 
-vn-tool-bar {
-    display: flex;
-
-    & > * {
-        margin-right: .6em;
-    }
-}
-
 .vn-list-item {
     @extend .pad-medium;
     @extend .border-solid-bottom;
@@ -216,7 +216,7 @@ vn-tool-bar {
 
         vn-icon {
             opacity: .4;
-            color: #ffa410;
+            color: $main-01;
             margin-left: .5em;
             transition: opacity 250ms ease-out;
             font-size: 2em;
@@ -228,12 +228,12 @@ vn-tool-bar {
 }
 /** START - FORM ELEMENTS DISABLED **/
 fieldset[disabled] .mdl-textfield .mdl-textfield__input, .mdl-textfield.is-disabled .mdl-textfield__input, 
-fieldset[disabled] .mdl-checkbox .mdl-checkbox__label, .mdl-checkbox.is-disabled .mdl-checkbox__label{
+fieldset[disabled] .mdl-checkbox .mdl-checkbox__label, .mdl-checkbox.is-disabled .mdl-checkbox__label {
     border: none !important;
     color: inherit !important;
 }	
 fieldset[disabled] .mdl-textfield .mdl-textfield__label, .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
-    color: rgb(255,171,64) !important;
+    color: $main-01 !important;
 }
 /** END - FORM ELEMENTS DISABLED **/
 
diff --git a/client/salix/src/styles/summary.scss b/client/salix/src/styles/summary.scss
index f89e1edea..37698f90a 100644
--- a/client/salix/src/styles/summary.scss
+++ b/client/salix/src/styles/summary.scss
@@ -2,12 +2,12 @@
 
 .summary{
     h5 {
-        border-bottom: 2px solid $color-orange;
+        border-bottom: 2px solid $main-01;
         margin: 0 0 5px 0
     }
     h5.title {
         border: none;
-        background: $color-orange;
+        background: $main-01;
         color: $color-white;
     }
     p {
@@ -36,7 +36,7 @@
     }
 
     & > div > button.close > vn-icon {
-        color: $color-orange;
+        color: $main-01;
     }
 
     & > div {
diff --git a/client/salix/src/styles/title.scss b/client/salix/src/styles/title.scss
index c32735686..e3da10663 100644
--- a/client/salix/src/styles/title.scss
+++ b/client/salix/src/styles/title.scss
@@ -1,3 +1,4 @@
+@import "colors";
 
 h1 {
     font-size: 32pt;
@@ -23,4 +24,5 @@ h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
     margin-bottom: .2em;
     font-family: vn-font-bold;
+    color: $main-font-color
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index fd13179bb..b6e0bfd18 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -35,7 +35,18 @@ let baseConfig = {
                 loader: 'style-loader!css-loader'
             }, {
                 test: /\.scss$/,
-                loader: 'style-loader!css-loader!sass-loader'
+                use: [
+                    {loader: 'style-loader'},
+                    {loader: 'css-loader'},
+                    {
+                        loader: 'sass-loader',
+                        options: {
+                            includePaths: [
+                                path.resolve(__dirname, 'client/salix/src/styles')
+                            ]
+                        }
+                    }
+                ]
             }, {
                 test: /\.(svg|png|ttf|woff|woff2)$/,
                 loader: 'file-loader'