refactor: code refactor [CustomerReviewsSlider] #134

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

-.customerReviewsSlider-track {
+.customerReviewsSlider-default-track {
     margin: auto;
     transition: height .2s ease-in-out;
 }
 
-.customerReviewsSlider-arrows {
+.customerReviewsSlider-default-arrows {
     display: flex;
     align-items: center;
 }
 
-.customerReviewsSlider-arrow-left {
+.customerReviewsSlider-default-arrow-left {
     margin-right: 2rem;
 }
 
-.customerReviewsSlider-arrow-right {
+.customerReviewsSlider-default-arrow-right {
     margin-left: 2rem;
 }
 
-.customerReviewsSlider-arrows .customerReviewsSlider-arrow {
+.customerReviewsSlider-default-arrows .customerReviewsSlider-default-arrow {
     width: 40px;
     height: 40px;
     border-radius: 50%;
@@ -28,56 +28,56 @@
     transition: all .2s ease-in-out;
 }
 
-.customerReviewsSlider-arrows .customerReviewsSlider-arrow:hover {
+.customerReviewsSlider-default-arrows .customerReviewsSlider-default-arrow:hover {
     border-color: #333;
     color: #333;
 }
 
-.customerReviewsSlider-review {
+.customerReviewsSlider-default-review {
     font-size: 1.125rem;
 }
 
-.customerReviewsSlider-client {
+.customerReviewsSlider-default-client {
     display: flex;
     flex-direction: row;
 }
 
-.customerReviewsSlider-client-img {
+.customerReviewsSlider-default-client-img {
     width: 100px;
     height: 100px;
     margin-right: 2rem;
 }
 
-.customerReviewsSlider-client-img img {
+.customerReviewsSlider-default-client-img img {
     aspect-ratio: 1 / 1;
     height: auto;
     object-fit: cover;
     border-radius: 50%;
 }
 
-.customerReviewsSlider-client-content {
+.customerReviewsSlider-default-client-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-.customerReviewsSlider-client-name,
-.customerReviewsSlider-client-addition {
+.customerReviewsSlider-default-client-name,
+.customerReviewsSlider-default-client-addition {
     font-size: 0.975rem;
 }
 
-.customerReviewsSlider-client-name {
+.customerReviewsSlider-default-client-name {
     font-weight: 700;
 }
 
-.customerReviewsSlider-dots {
+.customerReviewsSlider-default-dots {
     position: absolute;
     left: 50%;
     bottom: 0;
     display: flex;
 }
 
-.customerReviewsSlider-dot {
+.customerReviewsSlider-default-dot {
     width: 10px;
     height: 10px;
     border: 2px solid rgba(0,0,0,0);
@@ -88,34 +88,33 @@
     transition: all .2s ease-in-out;
 }
 
-.customerReviewsSlider-dot.glide__bullet--active {
+.customerReviewsSlider-default-dot.glide__bullet--active {
     border-color: #aaa;
 }
 
-.customerReviewsSlider-dot:hover {
+.customerReviewsSlider-default-dot:hover {
     border-radius: 50%;
 }
 
-.customerReviewsSlider-slider-wrapper {
+.customerReviewsSlider-default-slider-wrapper {
     display: flex;
 }
 
 @media screen and (max-width: 768px) {
 
-    .customerReviewsSlider-track {
+    .customerReviewsSlider-default-track {
         margin: 0;
     }
 
-    .customerReviewsSlider-arrows {
+    .customerReviewsSlider-default-arrows {
         display: none;
     }
 
-    .customerReviewsSlider-dots {
-        display: block;
+    .customerReviewsSlider-default-dots {
         margin: 1rem auto;
     }
 
-    .customerReviewsSlider-slider-wrapper {
+    .customerReviewsSlider-default-slider-wrapper {
         flex-direction: column;
     }
 }
\ No newline at end of file

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

@@ -10,53 +10,54 @@
 </div>
 {/if}
 
-<div class="customerReviewsSlider">
+<div class="customerReviewsSlider-default">
 
-    <div class="glide customerReviewsSlider-slider-wrapper">
+    <div class="glide customerReviewsSlider-default-slider-wrapper customerReviewsSlider-slider-wrapper">
 
         {if $arrows}
-            <div class="customerReviewsSlider-arrows" data-glide-el="controls">
-                <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-left" data-glide-dir="<">
+        <div class="customerReviewsSlider-default-arrows" data-glide-el="controls">
+                <span class="customerReviewsSlider-default-arrow customerReviewsSlider-default-arrow-left"
+                      data-glide-dir="<">
                     <span class="arrow fa fa-arrow-left"></span>
                 </span>
-            </div>
+        </div>
         {/if}
 
-        <div data-glide-el="track" class="glide__track customerReviewsSlider-track">
-            <ul class="glide__slides customerReviewsSlider-slider">
+        <div data-glide-el="track" class="glide__track customerReviewsSlider-default-track customerReviewsSlider-track">
+            <ul class="glide__slides customerReviewsSlider-default-slider customerReviewsSlider-slider">
 
                 {foreach from=$entries item=entry}
 
-                <li class="glide__slide customerReviewsSlider-slide">
+                <li class="glide__slide customerReviewsSlider-default-slide">
 
                     {if $entry['review']}
-                    <div class="customerReviewsSlider-review">
+                    <div class="customerReviewsSlider-default-review">
                         {$entry['review']}
                     </div>
                     {/if}
 
-                    <div class="customerReviewsSlider-client">
+                    <div class="customerReviewsSlider-default-client">
 
-                        <div class="customerReviewsSlider-client-img">
+                        <div class="customerReviewsSlider-default-client-img">
                             {if $entry['image']}
                             {image src=$entry['image'] loading="lazy" data-src="{$entry['image']}"}
                             {/if}
                         </div>
 
-                        <div class="customerReviewsSlider-client-content">
+                        <div class="customerReviewsSlider-default-client-content">
                             {if $entry['customerName']}
-                            <span class="customerReviewsSlider-client-name">{$entry['customerName']}</span>
+                            <span class="customerReviewsSlider-default-client-name">{$entry['customerName']}</span>
                             {/if}
                             {if $entry['addition']}
-                            <span class="customerReviewsSlider-client-addition">{$entry['addition']}</span>
+                            <span class="customerReviewsSlider-default-client-addition">{$entry['addition']}</span>
                             {/if}
 
                             {if $entry['url']}
-                            <a href="{$entry['url']}" class="customerReviewsSlider-url">
+                            <a href="{$entry['url']}" class="customerReviewsSlider-default-url">
                                 {if $entry['urlTitle']}
-                                    {$entry['urlTitle']}
+                                {$entry['urlTitle']}
                                 {else}
-                                    {$entry['url']}
+                                {$entry['url']}
                                 {/if}
                             </a>
                             {/if}
@@ -72,18 +73,19 @@
         </div>
 
         {if $arrows}
-            <div class="customerReviewsSlider-arrows" data-glide-el="controls">
-                <span class="customerReviewsSlider-arrow customerReviewsSlider-arrow-right" data-glide-dir=">">
+        <div class="customerReviewsSlider-default-arrows" data-glide-el="controls">
+                <span class="customerReviewsSlider-default-arrow customerReviewsSlider-default-arrow-right"
+                      data-glide-dir=">">
                     <span class="arrow fa fa-arrow-right"></span>
                 </span>
-            </div>
+        </div>
         {/if}
 
-        <div class="customerReviewsSlider-dots" data-glide-el="controls[nav]">
+        <div class="customerReviewsSlider-default-dots" data-glide-el="controls[nav]">
             {assign var=counter value=0}
             {foreach from=$entries item=entry}
-                <span class="customerReviewsSlider-dot" data-glide-dir="={$counter}"></span>
-                {assign var=counter value=$counter+1}
+            <span class="customerReviewsSlider-default-dot" data-glide-dir="={$counter}"></span>
+            {assign var=counter value=$counter+1}
             {/foreach}
         </div>