Carousel css

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

@@ -0,0 +1,89 @@
+// 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

@@ -0,0 +1,40 @@
+// 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

@@ -21,6 +21,9 @@
 .u-rSpace--xl {
   margin-right: 12px;
 }
+.u-bSpace-xxxl {
+  margin-bottom: 40px;
+}
 .u-lSpace {
   margin-left: 4px;
 }

src/scss/cdb-variables/_sizes.scss

@@ -9,8 +9,8 @@ $mobileLayout: 280px;
 $baseSize: 8px;
 
 // Margins
-$sMargin-section: 24px; // To separate main section
+$sMargin-section: 24px;  // To separate main section
-$sMargin-element: 14px; // To separate elements inside a group
+$sMargin-element: 14px;  // To separate elements inside a group
 
 // Font sizes
 $sFontSize-small: 10px;