From f2652106b3bd27185a85bec44d07fff9498890af Mon Sep 17 00:00:00 2001
From: Maria Checa <mariajecheca@gmail.com>
Date: Tue, 9 Feb 2016 16:55:40 +0100
Subject: [PATCH] Carousel component: inside elements horizontal and vertically
 centered

---
 src/scss/cdb-components/carousel.scss | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss
index 30f5256..0db7835 100644
--- a/src/scss/cdb-components/carousel.scss
+++ b/src/scss/cdb-components/carousel.scss
@@ -7,11 +7,11 @@
 ```
 <div>
   <ul class="CDB-Carousel">
-    <li class="CDB-Carousel-item is-selected"></li>
-    <li class="CDB-Carousel-item"></li>
-    <li class="CDB-Carousel-item"></li>
-    <li class="CDB-Carousel-item"></li>
-    <li class="CDB-Carousel-item"></li>
+    <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>
 ```
@@ -22,11 +22,15 @@
 @import '../cdb-variables/colors';
 
 .CDB-Carousel {
+  @include display-flex();
+  @include justify-content(flex-start);
   width: 100%;
   font-size: 0;
 }
-.CDB-Carousel-item {
-  @include inline-block();
+.CDB-CarouselItem {
+  @include display-flex();
+  @include align-items(center);
+  @include justify-content(center);
   width: $baseSize * 11;
   height: $baseSize * 7;
   margin-right: 8px;
@@ -38,13 +42,11 @@
   &:last-child {
     margin-right: 0;
   }
-
   &:hover {
     border: 1px solid $cMainLine;
     cursor: pointer;
   }
 }
-.CDB-Carousel-item.is-selected {
+.CDB-CarouselItem.is-selected {
   border: 2px solid $cBlue;
 }
-