Merge pull request #43 from CartoDB/38-carousel_components

Carousel component

src/scss/cdb-components/carousel.scss

@@ -0,0 +1,51 @@
+// Carousel styles
+// ----------------------------------------------
+
+/* SG
+# Carousel
+
+```
+<div>
+  <ul class="CDB-Carousel">
+    <li class="CDB-CarouselItem is-selected"></li>
+    <li class="CDB-CarouselItem"></li>
+    <li class="CDB-CarouselItem"></li>
+    <li class="CDB-CarouselItem"></li>
+    <li class="CDB-CarouselItem"></li>
+  </ul>
+</div>
+```
+*/
+
+@import '../cdb-utilities/mixins';
+@import '../cdb-variables/sizes';
+@import '../cdb-variables/colors';
+
+.CDB-Carousel {
+  @include display-flex();
+  @include justify-content(flex-start);
+  width: 100%;
+}
+.CDB-CarouselItem {
+  @include display-flex();
+  @include align-items(center);
+  @include justify-content(center);
+  width: $baseSize * 11;
+  height: $baseSize * 7;
+  margin-right: 8px;
+  border: 1px solid $cSecondaryLine;
+  border-radius: 4px;
+  background: $cThirdBackground;
+  box-sizing: border-box;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  &:hover {
+    border: 1px solid $cMainLine;
+    cursor: pointer;
+  }
+}
+.CDB-CarouselItem.is-selected {
+  border: 2px solid $cBlue;
+}

src/scss/cdb-utilities/helpers.scss

@@ -4,6 +4,7 @@
 @import './mixins';
 @import '../cdb-variables/colors';
 
+/* Margins */
 .u-tSpace {
   margin-top: 4px;
 }
@@ -25,18 +26,21 @@
 .u-rSpace--xl {
   margin-right: 12px;
 }
-.u-lSpace {
-  margin-left: 4px;
-}
-.u-lSpace--xl {
-  margin-left: 12px;
-}
 .u-bSpace {
   margin-bottom: 4px;
 }
 .u-bSpace--m {
   margin-bottom: 8px;
 }
+.u-bSpace--xl {
+  margin-bottom: 12px;
+}
+.u-lSpace {
+  margin-left: 4px;
+}
+.u-lSpace--xl {
+  margin-left: 12px;
+}
 
 // Colors
 // Main Text Color is default color 
@@ -55,8 +59,7 @@
   color: $cHintText;
 }
 
-
-
+/* Displays */
 .u-iBlock {
   @include inline-block();
 }
@@ -67,6 +70,7 @@
   display: none !important;
 }
 
+/* Media queries*/
 @include media-query-mobile() {
   .u-showDesktop {
     display: none !important;