Carousel and Step header improvements

src/scss/cdb-components/carousel.scss

@@ -5,24 +5,25 @@
 # Carousel
 
 ```
-<ul>
+<ul class="CDB-Steps">
-  <li class="CDB-Step">
+  <li class="CDB-Step-item">
-    <div class="CDB-Step-header">
+    <div class="CDB-Step-header u-bSpace--xl">
-      <div class="CDB-Step-header-numeration CDB-Text is-semibold">1</div>
+      <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
-      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Aggregation</p>
+
+      <div class="CDB-Step-headerInfo CDB-Text">
+        <p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Aggregation</p>
+        <p class="CDB-Size-small u-uppercase u-color-cTypo3">Histogram</p>
+        <p class="CDB-Size-medium u-color-cTypo3">Distribution of a numeric variable in a range</p>
+      </div>
     </div>
 
     <div class="CDB-Carousel">
-      <div class="CDB-Carousel-selection-info CDB-Text">
+      <ul class="CDB-Carousel-inner">
-        <p class="CDB-Size-small u-uppercase">Histogram</p>
+        <li class="CDB-Carousel-item"></li>
-        <p class="CDB-Size-medium">Distribution of a numeric variable in a range</p>
+        <li class="CDB-Carousel-item"></li>
-      </div>
+        <li class="CDB-Carousel-item"></li>
-      <ul class="CDB-Carousel-cards">
+        <li class="CDB-Carousel-item"></li>
-        <li class="CDB-Carousel-card"></li>
+        <li class="CDB-Carousel-item"></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>
@@ -39,48 +40,20 @@
   margin-left: 32px;
 }
 
-.CDB-Carousel-selection-info {
+.CDB-Carousel-inner {
-  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 {
+.CDB-Carousel-item {
-  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;
+  background: $cThirdBackground;
   margin-right: 10px;
   vertical-align: top;
 

src/scss/cdb-components/step.scss

@@ -6,22 +6,35 @@
 
 ```
 <ul class="CDB-Steps">
-  <li class="CDB-Step">
+  <li class="CDB-Step-item">
     <div class="CDB-Step-header">
-      <div class="CDB-Step-header-numeration CDB-Text is-semibold">1</div>
+      <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">1</div>
-      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Aggregation</p>
+
+      <div class="CDB-Step-headerInfo CDB-Text">
+        <p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Aggregation</p>
+        <p class="CDB-Size-small u-uppercase u-color-cTypo3">Heatmap</p>
+      </div>
     </div>
   </li>
-  <li class="CDB-Step">
+  <li class="CDB-Step-item">
     <div class="CDB-Step-header">
-      <div class="CDB-Step-header-numeration CDB-Text is-semibold">2</div>
+      <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">2</div>
-      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Select style</p>
+
+      <div class="CDB-Step-headerInfo CDB-Text">
+        <p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Select style</p>
+        <p class="CDB-Size-small u-uppercase u-color-cTypo3">None</p>
+      </div>
     </div>
   </li>
-  <li class="CDB-Step">
+  <li class="CDB-Step-item">
     <div class="CDB-Step-header">
-      <div class="CDB-Step-header-numeration CDB-Text is-semibold">3</div>
+      <div class="CDB-Step-headerNumeration CDB-Text is-semibold u-rSpace--m">3</div>
-      <p class="CDB-Step-header-title CDB-Text CDB-Size-large">Select template</p>
+
+      <div class="CDB-Step-headerInfo CDB-Text">
+        <p class="CDB-Step-headerTitle CDB-Text CDB-Size-large u-bSpace--m">Type</p>
+        <p class="CDB-Size-small u-uppercase u-color-cTypo3">Histogram</p>
+        <p class="CDB-Size-medium u-color-cTypo3">Distribution of a numeric variable in a range</p>
+      </div>
     </div>
   </li>
 </ul>
@@ -32,33 +45,30 @@
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
-.CDB-Steps {
+.CDB-Step-item {
-  display: block;
-}
-
-.CDB-Step {
   margin-bottom: 40px;
-}
-
-.CDB-Step-header {
   width: 300px;
 }
 
-.CDB-Step-header-numeration {
+.CDB-Step-header {
-  @include inline-block();
+  @include display-flex();
-  width: $baseSize * 3;
+  @include flex-direction(row);
-  height: $baseSize * 3;
+  @include align-items(flex-start, flex-start);
-  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 {
+.CDB-Step-headerNumeration {
-  @include inline-block();
+  width: $baseSize * 3;
+  height: $baseSize * 3;
+  margin-right: 1px;
+  border: 1px solid $cMainLine;
+  border-radius: 4px;
+  background-color: $cWhite;
+  color: $cTypo3;
+  font-size: $sFontSize-small;
+  line-height: $baseSize * 3;
+  text-align: center;
+}
+
+.CDB-Step-headerInfo {
   color: $cMainDark;
-}
+}

src/scss/cdb-utilities/helpers.scss

@@ -2,7 +2,9 @@
 // ----------------------------------------------
 
 @import './mixins';
+@import '../cdb-variables/colors';
 
+/* Margins */
 .u-tSpace {
   margin-top: 4px;
 }
@@ -21,6 +23,12 @@
 .u-rSpace--xl {
   margin-right: 12px;
 }
+.u-bSpace--m {
+  margin-bottom: 8px;
+}
+.u-bSpace--xl {
+  margin-bottom: 12px;
+}
 .u-bSpace-xxxl {
   margin-bottom: 40px;
 }
@@ -30,6 +38,8 @@
 .u-lSpace--xl {
   margin-left: 12px;
 }
+
+/* Displays */
 .u-iBlock {
   @include inline-block();
 }
@@ -39,10 +49,16 @@
 .u-showMobile {
   display: none !important;
 }
+
+/* Text */
 .u-uppercase {
   text-transform: uppercase;
 }
+.u-color-cTypo3 {
+  color: $cTypo3;
+}
 
+/* Media queries*/
 @include media-query-mobile() {
   .u-showDesktop {
     display: none !important;