From 0c08695652ea818c130b23eb9cdebf4b4123eab9 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Wed, 3 Feb 2016 19:19:42 +0100
Subject: [PATCH] add first infoBoxes

---
 src/scss/cdb-components/boxes.scss   | 61 ++++++++++++++++++++++++++++
 src/scss/cdb-components/buttons.scss |  1 -
 src/scss/cdb-utilities/helpers.scss  |  3 ++
 src/scss/cdb-variables/_colors.scss  |  1 +
 4 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss
index 3c104b4..8a60bec 100644
--- a/src/scss/cdb-components/boxes.scss
+++ b/src/scss/cdb-components/boxes.scss
@@ -10,6 +10,7 @@
 ```
 */
 
+@import '../cdb-utilities/mixins';
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
@@ -19,3 +20,63 @@
   background: $cWhite;
   box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
 }
+
+/* SG
+# Boxes/Info Boxes
+
+
+```
+<div class="CDB-InfoBox">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
+  <ul class="CDB-InfoBox-footer">
+    <li class="CDB-InfoBox-footerItem">
+      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+    </li>
+    <li class="CDB-InfoBox-footerItem">
+      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+      </button>
+    </li>
+  </ul>
+</div>
+<br/>
+<br/>
+<br/>
+<div class="CDB-InfoBox is-alert">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
+  <ul class="CDB-InfoBox-footer">
+    <li class="CDB-InfoBox-footerItem">
+      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+    </li>
+    <li class="CDB-InfoBox-footerItem is-right">
+      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+      </button>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+.CDB-InfoBox {
+  padding: 12px 16px;
+  border-radius: 4px;
+  background: $cThirdBackground;
+  &.is-alert {
+    background: rgba($cHighlightYellow, 0.60);
+  }
+}
+
+.CDB-InfoBox-footer {
+  @include display-flex();
+  @include align-items(center);
+}
+
+.CDB-InfoBox-footerItem {
+  @include flex(1);
+  &.is-right {
+    text-align: right;
+  }
+}
diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index adb1478..0ecc069 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -146,7 +146,6 @@ Layout Component:
 
 .CDB-Button--secondary {
   border: 1px solid $cBlue;
-  background: $cWhite;
   color: $cBlue;
 
   &:hover {
diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss
index cee8ce7..13b03a0 100644
--- a/src/scss/cdb-utilities/helpers.scss
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -27,6 +27,9 @@
 .u-lSpace--xl {
   margin-left: 12px;
 }
+.u-bSpace--m {
+  margin-bottom: 8px;
+}
 .u-iBlock {
   @include inline-block();
 }
diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss
index 7c7ff2d..fc0bc81 100644
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -29,3 +29,4 @@ $cPublic: #9BC63B;
 $cLink: #FEB100;
 $cPassword: #FB7B23;
 $cError: #F15743;
+$cHighlightYellow: #FFFFC0;