[TASK] add possibility to edit slider controls color (#331)

t3kit · Nov 1, 2017 · d4fcfe8 · d4fcfe8
1 parent 97e7083
commit d4fcfe8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/Resources/Private/Templates/ContentElements/Slider.html b/Resources/Private/Templates/ContentElements/Slider.html
@@ -47,10 +47,10 @@ <h2 class="img-slider__caption-header">{image.referenceProperties.title}</h2>
 			<f:comment><!-- If there are more than one image --></f:comment>
 			<f:if condition="{slides->f:count()} > 1">
 				<f:comment><!-- Add Pagination --></f:comment>
-				<div class="js__img-slider__pagination img-slider__pagination swiper-pagination swiper-pagination-white img-slider__pagination"></div>
+				<div class="js__img-slider__pagination img-slider__pagination swiper-pagination"></div>
 				<f:comment><!-- Navigation --></f:comment>
-				<div class="js__img-slider__btn-next img-slider__btn-next swiper-button-next swiper-button-white"></div>
-				<div class="js__img-slider__btn-prev img-slider__btn-prev swiper-button-prev swiper-button-white"></div>
+				<div class="js__img-slider__btn-next img-slider__btn-next swiper-button-next"></div>
+				<div class="js__img-slider__btn-prev img-slider__btn-prev swiper-button-prev"></div>
 			</f:if>
 		</div>
 	</f:if>

diff --git a/felayout_t3kit/dev/styles/main/contentElements/slider.less b/felayout_t3kit/dev/styles/main/contentElements/slider.less
@@ -90,6 +90,10 @@
     display: none;
 }
 
+.img-slider__pagination .swiper-pagination-bullet {
+    background: @carousel-control-color;
+}
+
 @media (min-width: @screen-sm-min) {
     .img-slider__caption {
         padding: 30px 50px;
@@ -100,12 +104,32 @@
         text-align: center;
     }
 
-    .img-slider__btn-next {
+    .img-slider__btn-next,
+    .img-slider__btn-prev {
         display: block;
+        background-image: none;
+        width: auto;
+        margin-top: 0;
+        transform: translateY(-50%);
+
+        &:before {
+            .icons();
+
+            color: @carousel-control-color;
+            font-size: @carousel-control-font-size;
+        }
+    }
+
+    .img-slider__btn-next {
+        &:before {
+            content: '\e675';
+        }
     }
 
     .img-slider__btn-prev {
-        display: block;
+        &:before {
+            content: '\e672';
+        }
     }
 
     .img-slider {