From 5ec8402e70b426aec9cc02c47722ead73b055664 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Wed, 10 May 2017 11:43:15 +0200
Subject: [PATCH] add states

---
 src/scss/cdb-components/buttons.scss | 32 ++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index 50d0eed..3184375 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -368,8 +368,13 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
@@ -380,8 +385,13 @@ Layout Component:
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--white">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
@@ -430,11 +440,11 @@ Layout Component:
     cursor: default;
 
     &:hover {
-      background: $cWhite;
+      background: none;
       color: $cBlue;
     }
     &:active {
-      background: $cWhite;
+      background: none;
       color: $cBlue;
     }
   }
@@ -464,4 +474,18 @@ Layout Component:
       color: $cWhite;
     }
   }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover {
+      background: none;
+      color: $cWhite;
+    }
+    &:active {
+      background: none;
+      color: $cWhite;
+    }
+  }
+
 }