Color corrections and some small tweaks

SpareBank1 · Nov 5, 2015 · a23d952 · a23d952
1 parent 69ebd36
commit a23d952
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 28 deletions.
diff --git a/examples/colors.html b/examples/colors.html
@@ -63,11 +63,11 @@ <h3>Primær Fargepalett</h3>
             </li>
             <li class="color-patch">
                 <div class="color-box -sand"></div>
-                <div class="patch-descr">Sand<br>#F0EAD7</div>
+                <div class="patch-descr">Sand<br>#E1D5AF</div>
             </li>
             <li class="color-patch">
                 <div class="color-box -sand-50"></div>
-                <div class="patch-descr">Sand-50%<br>#F7F4EB</div>
+                <div class="patch-descr">Sand-50%<br>#F0EAD7</div>
             </li>
             <li class="color-patch">
                 <div class="color-box -sand-25"></div>
@@ -91,7 +91,7 @@ <h3>Primær Fargepalett</h3>
             </li>
             <li class="color-patch">
                 <div class="color-box -grey-light-bg"></div>
-                <div class="patch-descr">Grey-light-bg<br>#f3f3f3</div>
+                <div class="patch-descr">Grey-light-bg<br>#F1F1EF</div>
             </li>
             <li class="color-patch">
                 <div class="color-box -white"></div>

diff --git a/less/colors.less b/less/colors.less
@@ -3,7 +3,7 @@
 @blue-royal-light-wcag: #0075D2; // Secondary buttons
 @blue-royal-light: #008ED2; // Anchor, text on white buttons, active radio buttons
 @blue-royal-light-50: #7FC6E8;
-@blue-focus: #44C0FF; // Focus on buttons and controls
+@blue-focus: fade(#44C0FF,50%); // Focus on buttons and controls
 
 @green-wcag: #008A00; // Action buttons, slider tool, (should indicate affordance)
 @green-dark-10: #007B00;
@@ -18,12 +18,12 @@
 @purple: #C94096;
 
 @sand: #E1D5AF;
-@sand-50: #F0EAD7;
-@sand-25: #F7F4EB;
+@sand-50: fade(@sand,50%);
+@sand-25: fade(@sand,25%);
 
 @white: #FFFFFF;
 
-@grey-light-bg: #f3f3f3; // Background panels
+@grey-light-bg: #F1F1EF; // Background panels
 @grey-light: #D8D8D8; // Lines, borders, inactive tool elements (slider, etc.)
 @grey: #ADADAD;
 @grey-dark: #676767;

diff --git a/less/components/input-field.less b/less/components/input-field.less
@@ -4,12 +4,13 @@
     padding: 13px;
     font-family: MuseoSans-300, arial, sans-serif;
     font-size: 18px;
-    border-radius: 6px;
-    border: 1px solid @grey-light;
+    border-radius: 4px;
+    border: 2px solid @grey-light;
     transition: all 0.15s ease-in-out;
-    box-shadow: 0 1px 2px @grey inset;
+    box-shadow: 0 1px 2px 0 @grey-light-bg inset;
 
-    &:hover {
+
+&:hover {
         border-color: @blue-royal-light-wcag;
     }
 

diff --git a/less/components/radio-button.less b/less/components/radio-button.less
@@ -7,7 +7,7 @@
     margin: 10px 0;
     transition: width 0.15s ease-in-out;
     text-align: left;
-    padding-left: 40px;
+    padding-left: 30px;
 
     &.-inline {
       display: inline-block;
@@ -16,7 +16,7 @@
 
     &:before {
       .sb1-radioblob();
-      left: 10px;
+      left: 0;
       top: 3px;
     }
   }

diff --git a/less/components/radio-switch.less b/less/components/radio-switch.less
@@ -1,40 +1,39 @@
 .radio-switch {
-    padding: 8px 20px 8px 50px;
+    padding: 6px 20px 6px 50px;
     position: relative;
-    border: 1px solid @grey-light;
-    border-radius: 30px;
+    border: 2px solid @grey-light;
+    border-radius: 22px;
     display: inline-block;
     min-width: 100px;
-    margin: 10px 0 10px 10px;
     text-align: left;
-    color: @blue-royal-light;
+    color: @blue-royal-light-wcag;
     font-family: "MuseoSansRounded-700", arial, sans-serif;
     cursor: pointer;
     transition: all 0.15s ease-in-out;
-   .shadow-buttons();
+    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.05);
 
     &:before {
       .sb1-radioblob();
       left: 12px;
-      top: 11px;
+      top: 10px;
     }
 }
 
 .radio-input {
 
     &:checked + .radio-switch {
-        border-color: @blue-royal;
-        background-color: @blue-royal;
-        color: @white;
+        border-color: @blue-flat;
+        background-color: @white;
+        color: @blue-flat;
     }
 
     &:hover + .radio-switch{
         border-color: @blue-royal-light-wcag;
     }
 
     &:focus + .radio-switch {
-        border-color: @blue-focus;
-        box-shadow: 0 0 0 1px @blue-focus;
+        border-color: @blue-flat;
+        box-shadow: 0 0 0 2px @blue-focus;
     }
 
     &:checked + .radio-switch:before {

diff --git a/less/components/secondary-button.less b/less/components/secondary-button.less
@@ -3,6 +3,7 @@
     color: @blue-royal-light-wcag;
     background-color: @white;
     border: solid 2px @grey-light;
+    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.05);
 
   &:hover, &:focus,&:active {
     border-color: @blue-royal-light-wcag;

diff --git a/less/components/select-box.less b/less/components/select-box.less
@@ -1,7 +1,8 @@
 .select-box {
     padding: 10px 32px 10px 10px;
     height: 44px;
-    border: 1px solid @grey-light;
+    border: 2px solid @grey-light;
+    box-shadow: 0 1px 1px 0 @grey-light-bg;
     background-image: url('@{icon-url}/chevron-royal-light.svg');
     background-color: @white;
     background-size: 18px 18px;

diff --git a/less/mixins.less b/less/mixins.less
@@ -46,10 +46,10 @@
     Shadow for buttons: Commonly found on elements supposed to be buttons
 */
 .shadow-buttons() {
-  box-shadow: 0 1px 2px 1px rgba(0,0,0,0.05);
+  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
 }
 .shadow-buttons-hover() {
-  box-shadow: 0 1px 2px 1px rgba(0,0,0,0.15);
+  box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2);
 }
 .shadow-buttons-active() {
   box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.25);