From f6db321559133b4aacdd28327f30dfc697d49243 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Wed, 22 Jun 2016 10:07:37 +0200
Subject: [PATCH] change buttons and electric blue

---
 src/scss/cdb-components/buttons.scss | 111 +++++++++++++++++++++++++++
 src/scss/cdb-variables/_colors.scss  |   2 +-
 2 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index ec8be31..5ed9761 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -42,6 +42,73 @@ Layout Component:
 <br/>
 <br/>
 
+<button class="CDB-Button CDB-Button--alert CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--alert">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--alert CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+
+<br/>
+<br/>
+<br/>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--big is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+</button>
+
+
+<button class="CDB-Button CDB-Button--error">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--small is-disabled">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--error CDB-Button--icon">
+  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
+</button>
+
+<br/>
+<br/>
+<br/>
+
 <div style="background: #2E3C43; padding: 20px;">
 
   <button class="CDB-Button CDB-Button--primary CDB-Button--big">
@@ -83,6 +150,7 @@ Layout Component:
 
 
 .CDB-Button {
+  @include transition(background, 300ms);
   padding: $baseSize + 1 $baseSize + 12;
   border: 1px solid transparent;
   border-radius: $baseSize / 2;
@@ -131,6 +199,49 @@ Layout Component:
   }
 }
 
+.CDB-Button--alert {
+  background: $cAlert;
+  color: $cWhite;
+
+  &:hover {
+    background: darken($cAlert, 8%);
+  }
+  &:active {
+    background: darken($cAlert, 16%);
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cAlert;
+    }
+    &:active {
+      background: $cAlert;
+    }
+  }
+}
+
+
+.CDB-Button--error {
+  background: $cError;
+  color: $cWhite;
+
+  &:hover {
+    background: darken($cError, 8%);
+  }
+  &:active {
+    background: darken($cError, 16%);
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cError;
+    }
+    &:active {
+      background: $cError;
+    }
+  }
+}
+
 
 
 // Buttons styles
diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss
index bc31a89..394a701 100644
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -2,7 +2,7 @@
 // ----------------------------------------------
 
 // General
-$cBlue: #3AA9E3;
+$cBlue: #1181FB;
 $cBlack: #000;
 $cWhite: #FFF;
 $cMainBg: #2E3C43;