diff --git a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css index 7a2bdfe76b4fc55ebd5c614466f6655976eeb624..464862b6b00f92f129eda02701ea6bb3a0482b6d 100644 --- a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css +++ b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.css @@ -1,22 +1,22 @@ -.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 diff --git a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html index 391abfc56357d6276c70c618e1280493a781128a..8520686b55a8bba3d6aeccb81b8daf4c52242bb7 100644 --- a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.default.html +++ b/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>