From a89f32b5691efdcbd6d6fae78723ba9ac978903e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Garc=C3=ADa?=
 <emiliogarcia@MacBook-Pro-de-Emilio.local>
Date: Mon, 25 Jan 2016 23:37:58 +0100
Subject: [PATCH 1/5] add buttons components

---
 src/scss/cdb-components/buttons.scss | 164 +++++++++++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 src/scss/cdb-components/buttons.scss

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
new file mode 100644
index 0000000..c6ffb21
--- /dev/null
+++ b/src/scss/cdb-components/buttons.scss
@@ -0,0 +1,164 @@
+// Buttons styles
+// ----------------------------------------------
+
+/* SG
+# Buttons/Primary
+
+```
+<button class="CDB-Button CDB-Button--primary is-medium">
+  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary is-disabled">
+  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary is-mini">
+  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary is-mini is-disabled">
+  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+</button>
+
+<br/>
+<br/>
+<br/>
+
+<div style="background: #2E3C43; padding: 20px;">
+  <button class="CDB-Button CDB-Button--primary is-medium">
+    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary is-disabled">
+    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary is-mini">
+    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary is-mini is-disabled">
+    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  </button>
+</div>
+
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+
+.CDB-Button {
+  padding: 8px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &.is-mini {
+    padding: 5px 12px;
+  }
+  .CDB-Button-Text {
+    display: block;
+  }
+  &.is-disabled {
+    cursor: default;
+    opacity: 0.24;
+  }
+}
+
+.CDB-Button--primary {
+  background: $cBlue;
+  color: $cWhite;
+  
+  &:hover {
+    background: darken($cBlue, 8%);
+  }
+  &:active {
+    background: darken($cBlue, 16%);
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cBlue;
+    }
+    &:active {
+      background: $cBlue;
+    }
+  }
+}
+
+
+
+// Buttons styles
+// ----------------------------------------------
+
+/* SG
+# Buttons/Secondary
+
+```
+<button class="CDB-Button CDB-Button--secondary is-medium">
+  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--secondary is-disabled">
+  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--secondary is-mini">
+  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--secondary is-mini is-disabled">
+  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+</button>
+
+<br/>
+<br/>
+<br/>
+
+<div style="background: #2E3C43; padding: 20px;">
+  <button class="CDB-Button CDB-Button--secondary is-medium">
+    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary is-disabled">
+    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary is-mini">
+    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary is-mini is-disabled">
+    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  </button>
+</div>
+
+```
+*/
+
+
+.CDB-Button--secondary {
+  border: 1px solid $cBlue;
+  background: $cWhite;
+  color: $cBlue;
+
+  &:hover {
+    background: rgba($cBlue, 0.08);
+  }
+  &:active {
+    background: $cBlue;
+    color: $cWhite;
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: $cWhite;
+    }
+    &:active {
+      background: $cWhite;
+    }
+  }
+}

From b5d5bc2a7865275377c298f681833bbda33895a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Garc=C3=ADa?=
 <emiliogarcia@MacBook-Pro-de-Emilio.local>
Date: Mon, 25 Jan 2016 23:53:56 +0100
Subject: [PATCH 2/5] fix hound

---
 src/scss/cdb-components/buttons.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index c6ffb21..c6befc7 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -71,7 +71,7 @@
 .CDB-Button--primary {
   background: $cBlue;
   color: $cWhite;
-  
+
   &:hover {
     background: darken($cBlue, 8%);
   }

From c1143441eb6134364beeb7a23e726e46978067a9 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Tue, 26 Jan 2016 12:16:40 +0100
Subject: [PATCH 3/5] fix PR

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

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index c6befc7..b757e30 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -5,19 +5,19 @@
 # Buttons/Primary
 
 ```
-<button class="CDB-Button CDB-Button--primary is-medium">
+<button class="CDB-Button CDB-Button--primary">
   <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary is-disabled">
+  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--primary CDB-Button--small">
   <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--primary is-mini">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--primary is-mini is-disabled">
+<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
   <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
 </button>
 
@@ -26,19 +26,19 @@
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--primary is-medium">
+  <button class="CDB-Button CDB-Button--primary">
     <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary is-disabled">
+    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--primary CDB-Button--small">
     <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
   </button>
 
-  <button class="CDB-Button CDB-Button--primary is-mini">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--primary is-mini is-disabled">
+  <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
     <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
   </button>
 </div>
@@ -56,9 +56,6 @@
   border-radius: 4px;
   cursor: pointer;
 
-  &.is-mini {
-    padding: 5px 12px;
-  }
   .CDB-Button-Text {
     display: block;
   }
@@ -68,6 +65,10 @@
   }
 }
 
+.CDB-Button--small {
+  padding: 5px 12px;
+}
+
 .CDB-Button--primary {
   background: $cBlue;
   color: $cWhite;
@@ -98,19 +99,19 @@
 # Buttons/Secondary
 
 ```
-<button class="CDB-Button CDB-Button--secondary is-medium">
+<button class="CDB-Button CDB-Button--secondary">
   <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary is-disabled">
+  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+</button>
+
+<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
   <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--secondary is-mini">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
-</button>
-
-<button class="CDB-Button CDB-Button--secondary is-mini is-disabled">
+<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
   <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
 </button>
 
@@ -119,19 +120,19 @@
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--secondary is-medium">
+  <button class="CDB-Button CDB-Button--secondary">
     <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary is-disabled">
+    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  </button>
+
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
     <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
   </button>
 
-  <button class="CDB-Button CDB-Button--secondary is-mini">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
-  </button>
-
-  <button class="CDB-Button CDB-Button--secondary is-mini is-disabled">
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
     <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
   </button>
 </div>

From a1b891824ed09e45e234b873b2025b6fd1c46632 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Tue, 26 Jan 2016 12:22:16 +0100
Subject: [PATCH 4/5] use vars

---
 src/scss/cdb-components/buttons.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index b757e30..24cc727 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -52,8 +52,8 @@
 
 
 .CDB-Button {
-  padding: 8px 20px;
-  border-radius: 4px;
+  padding: $baseSize $baseSize + 12;
+  border-radius: $baseSize / 2;
   cursor: pointer;
 
   .CDB-Button-Text {
@@ -66,7 +66,7 @@
 }
 
 .CDB-Button--small {
-  padding: 5px 12px;
+  padding: $baseSize - 3 $baseSize + 4;
 }
 
 .CDB-Button--primary {

From 04b0c54e3c7bb903192678a24d66daae20aa5551 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Tue, 26 Jan 2016 14:49:38 +0100
Subject: [PATCH 5/5] add info elements

---
 src/scss/cdb-components/buttons.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index 24cc727..d2cf5e5 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -4,6 +4,9 @@
 /* SG
 # Buttons/Primary
 
+Layout Component:
+[CDB-Button][CDB-Button--primary | CDB-Button--secondary]
+
 ```
 <button class="CDB-Button CDB-Button--primary">
   <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>