[FEATURE] slider element, add styles for caption alignment (Podio fea…

…ture_63) (#32)
t3kit · Jan 4, 2017 · a42fc68 · a42fc68
1 parent 0417793
commit a42fc68
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/dev/styles/main/contentElements/slider.less b/dev/styles/main/contentElements/slider.less
@@ -22,6 +22,19 @@
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
+}
+
+.img-slider__caption._left-align{
+    text-align: left;
+}
+
+.img-slider__caption._center-align{
+    text-align: center;
+}
+
+.img-slider__caption._right-align{
+    text-align: right;
 }
 
 .img-slider__caption-sub-header{

diff --git a/dev/templates/parts/content/contentElements/slider.hbs b/dev/templates/parts/content/contentElements/slider.hbs
@@ -3,7 +3,7 @@
         <div class="swiper-slide img-slider__slide">
             <div data-background="images/slider_image.jpg" class="swiper-lazy img-slider__slide-bg">
                 <div class="swiper-lazy-preloader"></div>
-                <div class="img-slider__caption">
+                <div class="img-slider__caption _center-align">
                     <h3 class="img-slider__caption-sub-header">Kickstart your projects in minutes!</h3>
                     <h2 class="img-slider__caption-header">A TYPO3 website starterkit</h2>
                     <p class="img-slider__caption-p js__img-slider__caption-p"></p>
@@ -14,7 +14,7 @@
         <div class="swiper-slide img-slider__slide">
             <div data-background="images/slider_image.jpg" class="swiper-lazy img-slider__slide-bg">
                 <div class="swiper-lazy-preloader"></div>
-                <div class="img-slider__caption">
+                <div class="img-slider__caption _center-align">
                     <h3 class="img-slider__caption-sub-header">Kickstart your projects in minutes!</h3>
                     <h2 class="img-slider__caption-header">A TYPO3 website starterkit</h2>
                     <p class="img-slider__caption-p js__img-slider__caption-p"></p>
@@ -25,7 +25,7 @@
         <div class="swiper-slide img-slider__slide">
             <div data-background="images/slider_image.jpg" class="swiper-lazy img-slider__slide-bg">
                 <div class="swiper-lazy-preloader"></div>
-                <div class="img-slider__caption">
+                <div class="img-slider__caption _center-align">
                     <h3 class="img-slider__caption-sub-header">Kickstart your projects in minutes!</h3>
                     <h2 class="img-slider__caption-header">A TYPO3 website starterkit</h2>
                     <p class="img-slider__caption-p js__img-slider__caption-p"></p>