refactor: style refactor [CustomerReviewsSlider] #134

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css

-.customerReviewsSlider-default-track {
-    margin: auto;
-    transition: height .2s ease-in-out;
-}
-
 .customerReviewsSlider-default-arrows {
     display: flex;
     align-items: center;
@@ -73,6 +68,7 @@
 .customerReviewsSlider-default-dots {
     position: absolute;
     left: 50%;
+    transform: translateX(-50%);
     bottom: 0;
     display: flex;
 }
@@ -90,6 +86,7 @@
 
 .customerReviewsSlider-default-dot.glide__bullet--active {
     border-color: #aaa;
+    background-color: transparent;
 }
 
 .customerReviewsSlider-default-dot:hover {

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html

@@ -16,7 +16,7 @@
 
         {if $arrows}
         <div class="customerReviewsSlider-default-arrows" data-glide-el="controls">
-                <span class="customerReviewsSlider-default-arrow customerReviewsSlider-default-arrow-left"
+                <span class="customerReviewsSlider-arrow customerReviewsSlider-default-arrow customerReviewsSlider-default-arrow-left"
                       data-glide-dir="<">
                     <span class="arrow fa fa-arrow-left"></span>
                 </span>
@@ -74,7 +74,7 @@
 
         {if $arrows}
         <div class="customerReviewsSlider-default-arrows" data-glide-el="controls">
-                <span class="customerReviewsSlider-default-arrow customerReviewsSlider-default-arrow-right"
+                <span class="customerReviewsSlider-arrow customerReviewsSlider-default-arrow customerReviewsSlider-default-arrow-right"
                       data-glide-dir=">">
                     <span class="arrow fa fa-arrow-right"></span>
                 </span>

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.php

@@ -54,8 +54,11 @@ public function getBody()
             'arrows'  => $this->getAttribute('showArrows')
         ];
 
-        $this->addCSSFile(
-            \dirname(__FILE__) . '/CustomerReviewsSlider.' . $template . '.css'
+        $this->addCSSFiles(
+            [
+                \dirname(__FILE__) . '/CustomerReviewsSlider.css',
+                \dirname(__FILE__) . '/CustomerReviewsSlider.' . $template . '.css'
+            ]
         );
 
         $Engine->assign($options);

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.css

-.customerReviewsSlider-track {
-    opacity: 0;
-    transition: height .2s ease-in-out, opacity .2s ease-in-out;
-    padding-bottom: 2.5rem;
-}
-
 .customerReviewsSlider-templateOne-arrows {
     display: flex;
     align-items: center;
@@ -87,10 +81,6 @@
     background: #aaa;
 }
 
-.customerReviewsSlider-templateOne-dot:hover {
-    cursor: pointer;
-}
-
 .customerReviewsSlider-templateOne-slider-wrapper {
     display: flex;
 }
@@ -114,9 +104,6 @@
 
 @media screen and (max-width: 768px) {
 
-    .customerReviewsSlider-templateOne-track {
-        margin: 0;
-    }
 
     .customerReviewsSlider-templateOne-arrows {
         display: none;

src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.html

@@ -16,7 +16,7 @@
 
         {if $arrows}
         <div class="customerReviewsSlider-templateOne-arrows" data-glide-el="controls">
-                <span class="customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-arrow-left"
+                <span class="customerReviewsSlider-arrow customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-arrow-left"
                       data-glide-dir="<">
                     <span class="arrow"> &lt; </span>
                 </span>
@@ -95,17 +95,17 @@
 
         {if $arrows}
         <div class="customerReviewsSlider-templateOne-arrows" data-glide-el="controls">
-                <span class="customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-arrow-right"
+                <span class="customerReviewsSlider-arrow customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-arrow-right"
                       data-glide-dir=">">
                     <span class="arrow"> &gt; </span>
                 </span>
         </div>
         {/if}
 
-        <div class="customerReviewsSlider-templateOne-dots" data-glide-el="controls[nav]">
+        <div class="customerReviewsSlider-dots customerReviewsSlider-templateOne-dots" data-glide-el="controls[nav]">
             {assign var=counter value=0}
             {foreach from=$entries item=entry}
-            <span class="customerReviewsSlider-templateOne-dot" data-glide-dir="={$counter}"></span>
+            <span class="customerReviewsSlider-dot customerReviewsSlider-templateOne-dot" data-glide-dir="={$counter}"></span>
             {assign var=counter value=$counter+1}
             {/foreach}
         </div>