From 68bcf9ebc7df1a700e22eb3db8d58735cc4d5eb7 Mon Sep 17 00:00:00 2001
From: Mario Volke <info@mariovolke.com>
Date: Mon, 10 Nov 2014 14:46:18 +0100
Subject: [PATCH] second lighter error color for buttons and labels

---
 src/sass/base/_config.scss           |  2 ++
 src/sass/blocks/basics/_buttons.scss |  4 ++--
 src/sass/blocks/basics/_labels.scss  | 22 ++++++++++------------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/sass/base/_config.scss b/src/sass/base/_config.scss
index 9361263..acaa8bd 100755
--- a/src/sass/base/_config.scss
+++ b/src/sass/base/_config.scss
@@ -18,6 +18,7 @@ $color-black:                       #000;
 $color-white:                       #fff;
 $color-blue:                        #00c6ff;
 $color-red:                         #ff3f49;
+$color-red-light:                   #ff878d;
 $color-grey:                        #666;
 $color-grey-input:                  #949494;
 $color-grey-dark:                   #333;
@@ -37,6 +38,7 @@ $color-text-light:                  $color-grey-medium;
 $color-main:                        $color-blue;
 $color-main-text:                   $color-white;
 $color-error:                       $color-red;
+$color-error-area:                  $color-red-light;
 $color-error-text:                  $color-white;
 $color-border-light:                $color-grey-lighter;
 $color-touch-active:                rgba(0, 0, 0, 0.1);
diff --git a/src/sass/blocks/basics/_buttons.scss b/src/sass/blocks/basics/_buttons.scss
index 6b430a7..2f0ab28 100755
--- a/src/sass/blocks/basics/_buttons.scss
+++ b/src/sass/blocks/basics/_buttons.scss
@@ -68,7 +68,7 @@
 
     // Invalid button state
     &--invalid {
-        background-color: $color-error;
+        background-color: $color-error-area;
         color: $color-error-text;
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
 
@@ -82,7 +82,7 @@
 
         &:hover,
         &:focus {
-            background-color: lighten($color-error, 5%);
+            background-color: lighten($color-error-area, 5%);
         }
     }
 
diff --git a/src/sass/blocks/basics/_labels.scss b/src/sass/blocks/basics/_labels.scss
index 4195d85..4c928ab 100755
--- a/src/sass/blocks/basics/_labels.scss
+++ b/src/sass/blocks/basics/_labels.scss
@@ -12,19 +12,20 @@
 
     & > svg {
         display: inline-block;
-        fill: $color-main;
+        fill: $color-main-text;
         width: 1.5em;
-        height: 1em;
-        vertical-align: baseline;
+        height: 1.3em;
+        vertical-align: middle;
+        margin-top: -0.1em; // move upwards to optimize vertical alignment with label text
     }
 
     &--invalid {
-        background-color: $color-error;
+        background-color: $color-error-area;
         color: $color-error-text;
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJUlEQVQIW2NkQABJIPM5lCvJCGMgC4LYIAkUlTAFMB0gjRQaBQCw8go5lVnl5wAAAABJRU5ErkJggg==);
 
         & > svg {
-            fill: $color-error;
+            fill: $color-error-text;
         }
 
         @include scut-hd-bp {
@@ -33,18 +34,15 @@
     }
 
     &--invalid-clickable {
-        position: relative;
+        cursor: pointer;
 
         &:hover,
         &:focus {
-            transition: none;
-            background-color: lighten($color-main, 5%);
+            background-color: lighten($color-error-area, 5%);
         }
 
-        &:active,
-        &.active {
-            top: 1px;
-            left: 1px;
+        &:active {
+            transform: translateX(1px) translateY(1px);
         }
     }