From 8bdc4c712b8275d683e026e75f024be7468b7978 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Mon, 8 Feb 2016 15:23:14 +0100
Subject: [PATCH] Step component: added to headers stylesheet

---
 src/scss/cdb-components/headers.scss | 53 +++++++++++++++++++++-
 src/scss/cdb-components/step.scss    | 68 ----------------------------
 2 files changed, 52 insertions(+), 69 deletions(-)
 delete mode 100644 src/scss/cdb-components/step.scss

diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss
index 02ca1b2..790850e 100644
--- a/src/scss/cdb-components/headers.scss
+++ b/src/scss/cdb-components/headers.scss
@@ -47,9 +47,11 @@
     </li>
   </ul>
 </div>
+
 <br/>
 <br/>
 <br/>
+
 <div class="CDB-HeaderInfo">
   <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
@@ -85,6 +87,7 @@
     <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
   </div>
 </div>
+
 <br/>
 <br/>
 <br/>
@@ -111,6 +114,7 @@
     <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium">Positron by CartoDB</p>
   </div>
 </div>
+
 <br/>
 <br/>
 <br/>
@@ -130,10 +134,28 @@
     <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
   </div>
 </div>
+
 <br/>
 <br/>
 <br/>
 
+<div class="CDB-Step-header u-bSpace--xl">
+  <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+
+  <div class="CDB-Step-headerInfo CDB-Text">
+    <p class="CDB-Size-large u-color-cMainDark u-bSpace--m">Type</p>
+    <p class="CDB-Step-headerDetails is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
+    <p class="CDB-Step-headerDetails CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
+  </div>
+
+  <div class="CDB-Shape">
+    <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
+  </div>
+</div>
+
+<br/>
+<br/>
+<br/>
 ```
 */
 
@@ -191,5 +213,34 @@
   vertical-align: middle;
 }
 
+/* Steps header */
+.CDB-Step-header {
+  @include display-flex();
+  @include flex-direction(row);
+  @include align-items(flex-start, flex-start);
+}
+.CDB-Step-headerNumeration {
+  width: $baseSize * 3;
+  height: $baseSize * 3;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background-color: $cWhite;
+  color: $cTypo3;
+  font-size: $sFontSize-small;
+  line-height: $baseSize * 3;
+  text-align: center;
+  box-sizing: border-box;
+}
+.CDB-Step-headerInfo {
+  @include flex-grow(2);
+}
+.CDB-Step-headerTitle {
+  color: $cMainDark;
+}
+.CDB-Step-headerDetails {
+  color: $cTypo3;
 
-
+  &.is-uppercase {
+    text-transform: uppercase;
+  }
+}
diff --git a/src/scss/cdb-components/step.scss b/src/scss/cdb-components/step.scss
deleted file mode 100644
index 42f29f5..0000000
--- a/src/scss/cdb-components/step.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-// Step styles
-// ----------------------------------------------
-
-/* SG
-# Step
-
-```
-<ol class="CDB-Steps">
-  <li>
-    <div class="CDB-Step-header u-bSpace--xl">
-      <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
-
-      <div class="CDB-Step-headerInfo CDB-Text">
-        <p class="CDB-Size-large u-color-cMainDark u-bSpace--m">Type</p>
-        <p class="CDB-Step-headerDetails is-uppercase CDB-FontSize-small u-bSpace--m">Histogram</p>
-        <p class="CDB-Step-headerDetails CDB-FontSize-medium">Distribution of a numeric variable in a range</p>
-      </div>
-
-      <div class="CDB-Shape">
-        <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
-      </div>
-    </div>
-  </li>
-</ol>
-```
-*/
-
-@import '../cdb-utilities/mixins';
-@import '../cdb-variables/sizes';
-@import '../cdb-variables/colors';
-
-.CDB-Step-header {
-  @include display-flex();
-  @include flex-direction(row);
-  @include align-items(flex-start, flex-start);
-}
-.CDB-Step-headerNumeration {
-  width: $baseSize * 3;
-  height: $baseSize * 3;
-  border: 1px solid $cMainLine;
-  border-radius: 4px;
-  background-color: $cWhite;
-  color: $cTypo3;
-  font-size: $sFontSize-small;
-  line-height: $baseSize * 3;
-  text-align: center;
-  box-sizing: border-box;
-}
-.CDB-Step-headerInfo {
-  @include flex-grow(2);
-}
-.CDB-Step-headerTitle {
-  color: $cMainDark;
-}
-.CDB-Step-headerDetails {
-  color: $cTypo3;
-
-  &.is-uppercase {
-    text-transform: uppercase;
-  }
-}
-.CDB-Step-action {
-  width: $baseSize * 3;
-  height: $baseSize * 3;
-  font-size: 14px;
-  text-align: center;
-  cursor: pointer;
-}