Steps and carousel improvements

src/scss/cdb-components/carousel.scss

@@ -0,0 +1,91 @@
+// Carousel styles
+// ----------------------------------------------
+
+/* SG
+# Carousel
+
+```
+<ul>
+  <li class="CDB-Step">
+    <div class="CDB-Step-header">
+      <div class="CDB-Step-header-numeration CDB-Text is-semibold">1</div>
+      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Aggregation</p>
+    </div>
+
+    <div class="CDB-Carousel">
+      <div class="CDB-Carousel-selection-info CDB-Text">
+        <p class="CDB-Size-small u-uppercase">Histogram</p>
+        <p class="CDB-Size-medium">Distribution of a numeric variable in a range</p>
+      </div>
+      <ul class="CDB-Carousel-cards">
+        <li class="CDB-Carousel-card"></li>
+        <li class="CDB-Carousel-card"></li>
+        <li class="CDB-Carousel-card"></li>
+        <li class="CDB-Carousel-card"></li>
+        <li class="CDB-Carousel-card"></li>
+      </ul>
+    </div>
+  </li>
+</ul>
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-Carousel {
+  width: 300px;
+  margin-left: 32px;
+}
+
+.CDB-Carousel-selection-info {
+  color: $cTypo3;
+}
+
+.CDB-Carousel-cards {
+  width: 300px;
+  padding: $sMargin-element 0;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+.CDB-Carousel-cards::-webkit-scrollbar {
+  width: 100%;
+  height: 3px;
+  cursor: pointer;
+}
+
+.CDB-Carousel-cards::-webkit-scrollbar-thumb {
+  background-color: $cSecondaryLine;
+  border-radius: 4px;
+  height: 3px;
+
+  &:hover {
+    background-color: $cMainLine;
+  }
+}
+
+.CDB-Carousel-cards::-webkit-scrollbar-track {
+  height: 1px;
+  background-color: $cThirdBackground;
+  border-top: 1px solid $cWhite;
+  border-bottom: 1px solid $cWhite;
+}
+
+.CDB-Carousel-card {
+  @include inline-block();
+  width: $baseSize * 11;
+  height: $baseSize * 7;
+  background: $cThirdBackground;
+  border: 1px solid $cSecondaryLine;
+  border-radius: 4px;
+  margin-right: 10px;
+  vertical-align: top;
+
+  &:hover {
+    border: 1px solid $cMainLine;
+    cursor: pointer;
+  }
+}

src/scss/cdb-components/step.scss

@@ -0,0 +1,64 @@
+// Step styles
+// ----------------------------------------------
+
+/* SG
+# Step
+
+```
+<ul class="CDB-Steps">
+  <li class="CDB-Step">
+    <div class="CDB-Step-header">
+      <div class="CDB-Step-header-numeration CDB-Text is-semibold">1</div>
+      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Aggregation</p>
+    </div>
+  </li>
+  <li class="CDB-Step">
+    <div class="CDB-Step-header">
+      <div class="CDB-Step-header-numeration CDB-Text is-semibold">2</div>
+      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Select style</p>
+    </div>
+  </li>
+  <li class="CDB-Step">
+    <div class="CDB-Step-header">
+      <div class="CDB-Step-header-numeration CDB-Text is-semibold">3</div>
+      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Select template</p>
+    </div>
+  </li>
+</ul>
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-Steps {
+  display: block;
+}
+
+.CDB-Step {
+  margin-bottom: 40px;
+}
+
+.CDB-Step-header {
+  width: 300px;
+}
+
+.CDB-Step-header-numeration {
+  @include inline-block();
+  width: $baseSize * 3;
+  height: $baseSize * 3;
+  color: $cTypo3;
+  margin-right: 1px;
+  background-color: $cWhite;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  font-size: $sFontSize-small;
+  text-align: center;
+  line-height: $baseSize * 3;
+}
+
+.CDB-Step-header-title {
+  @include inline-block();
+  color: $cMainDark;
+}

src/scss/cdb-components/steps/carousel.scss

@@ -1,89 +0,0 @@
-// Step carousel styles
-// ----------------------------------------------
-
-/* SG
-# Steps/Carousel
-
-```
-<div>
-  <div class="CDB-StepHeader">
-    <div class="CDB-StepHeader-numeration CDB-Text is-semibold">1</div>
-    <p class="CDB-StepHeader-title CDB-Text CDB-Size-large">Aggregation</p>
-  </div>
-  
-  <div class="CDB-Carousel">
-    <div class="CDB-Carousel-selection CDB-Text CDB-Size-small">
-      <span>None</span>
-    </div>
-    <div class="CDB-CarouselElements">
-      <div class="CDB-CarouselCard"></div>
-      <div class="CDB-CarouselCard"></div>
-      <div class="CDB-CarouselCard"></div>
-      <div class="CDB-CarouselCard"></div>
-      <div class="CDB-CarouselCard"></div>
-    </div>
-  </div>
-</div>
-```
-*/
-
-@import '../../cdb-utilities/mixins';
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-.CDB-Carousel {
-  width: 300px;
-  margin-left: 32px;
-}
-
-.CDB-Carousel-selection {
-  color: $cTypo3;
-  text-transform: uppercase;
-}
-
-.CDB-CarouselContainer {
-  width: 300px;
-  padding: $sMargin-element 0;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  white-space: nowrap;
-}
-
-.CDB-CarouselContainer::-webkit-scrollbar {
-  width: 100%;
-  height: 3px;
-  cursor: pointer;
-}
-
-.CDB-CarouselContainer::-webkit-scrollbar-thumb {
-  background-color: $cSecondaryLine;
-  border-radius: 4px;
-  height: 3px;
-
-  &:hover {
-    background-color: $cMainLine;
-  }
-}
-
-.CDB-CarouselContainer::-webkit-scrollbar-track {
-  height: 1px;
-  background-color: $cThirdBackground;
-  border-top: 1px solid $cWhite;
-  border-bottom: 1px solid $cWhite;
-}
-
-.CDB-CarouselCard {
-  @include inline-block();
-  width: $baseSize * 11;
-  height: $baseSize * 7;
-  background: $cThirdBackground;
-  border: 1px solid $cSecondaryLine;
-  border-radius: 4px;
-  margin-right: 10px;
-  vertical-align: top;
-
-  &:hover {
-    border: 1px solid $cMainLine;
-    cursor: pointer;
-  }
-}

src/scss/cdb-components/steps/header.scss

@@ -1,40 +0,0 @@
-// Step header styles
-// ----------------------------------------------
-
-/* SG
-# Steps/Header
-
-```
-<div class="CDB-StepHeader">
-  <div class="CDB-StepHeader-numeration CDB-Text is-semibold">1</div>
-  <p class="CDB-StepHeader-title CDB-Text CDB-Size-large">Aggregation</p>
-</div>
-```
-*/
-
-@import '../../cdb-utilities/mixins';
-@import '../../cdb-variables/sizes';
-@import '../../cdb-variables/colors';
-
-.CDB-StepHeader {
-  width: 300px;
-}
-
-.CDB-StepHeader-numeration {
-  @include inline-block();
-  width: $baseSize * 3;
-  height: $baseSize * 3;
-  color: $cTypo3;
-  margin-right: 1px;
-  background-color: $cWhite;
-  border: 1px solid $cMainLine;
-  border-radius: 4px;
-  font-size: $sFontSize-small;
-  text-align: center;
-  line-height: $baseSize * 3;
-}
-
-.CDB-StepHeader-title {
-  @include inline-block();
-  color: $cMainDark;
-}

src/scss/cdb-utilities/helpers.scss

@@ -39,6 +39,9 @@
 .u-showMobile {
   display: none !important;
 }
+.u-uppercase {
+  text-transform: uppercase;
+}
 
 @include media-query-mobile() {
   .u-showDesktop {