diff --git a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.css b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.css
index c70781095578ada162a116798a8f9306eb72ca35..9c6e6dddeb070b3892478fa393cfbb13a8828408 100644
--- a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.css
+++ b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.css
@@ -1,14 +1,7 @@
-.customerReviewsSlider {
- position: relative;
-}
-
.customerReviewsSlider-track {
opacity: 0;
transition: height .2s ease-in-out, opacity .2s ease-in-out;
-}
-
-.customerReviewsSlider-templateOne-track {
- margin: auto;
+ padding-bottom: 2.5rem;
}
.customerReviewsSlider-templateOne-arrows {
@@ -25,24 +18,16 @@
}
.customerReviewsSlider-templateOne-arrows .customerReviewsSlider-templateOne-arrow {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- border: 2px solid #aaa;
color: #aaa;
- display: flex;
- justify-content: center;
- align-items: center;
+ font-size: 2rem;
+ font-weight: bold;
transition: all .2s ease-in-out;
}
.customerReviewsSlider-templateOne-arrows .customerReviewsSlider-templateOne-arrow:hover {
border-color: #333;
color: #333;
-}
-
-.customerReviewsSlider-templateOne-review {
- font-size: 1.125rem;
+ cursor: pointer;
}
.customerReviewsSlider-templateOne-client {
@@ -51,8 +36,8 @@
}
.customerReviewsSlider-templateOne-client-img {
- width: 100px;
- height: 100px;
+ width: 80px;
+ height: 80px;
margin-right: 2rem;
}
@@ -81,6 +66,7 @@
.customerReviewsSlider-templateOne-dots {
position: absolute;
left: 50%;
+ transform: translateX(-50%);
bottom: 0;
display: flex;
}
@@ -88,27 +74,44 @@
.customerReviewsSlider-templateOne-dot {
width: 10px;
height: 10px;
- border: 2px solid rgba(0,0,0,0);
+ border: 2px solid #aaa;
border-radius: 50%;
margin: 0 5px;
display: block;
- background-color: #aaa;
+ background-color: transparent;
transition: all .2s ease-in-out;
}
.customerReviewsSlider-templateOne-dot.glide__bullet--active {
- border-color: #aaa;
- background: transparent;
+ border-color: transparent;
+ background: #aaa;
}
.customerReviewsSlider-templateOne-dot:hover {
- border-radius: 50%;
+ cursor: pointer;
}
.customerReviewsSlider-templateOne-slider-wrapper {
display: flex;
}
+.customerReviewsSlider-content-wrapper {
+ padding: 1rem;
+ margin: 1rem;
+}
+
+.customerReviewsSlider-quote {
+ width: 50px;
+ height: 50px;
+ margin: 1rem 0;
+}
+
+.customerReviewsSlider-quote svg{
+ width: 100%;
+ height: 100%;
+ fill-opacity: 0.25
+}
+
@media screen and (max-width: 768px) {
.customerReviewsSlider-templateOne-track {
diff --git a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.html b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.html
index 6b93277174fa4d9772795929873008ed50f82554..4d9cbc571f85f59569c9921c18f52d8bcce6729b 100644
--- a/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.html
+++ b/src/QUI/Bricks/Controls/Slider/CustomerReviewsSlider.templateOne.html
@@ -18,7 +18,7 @@
<div class="customerReviewsSlider-templateOne-arrows" data-glide-el="controls">
<span class="customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-arrow-left"
data-glide-dir="<">
- <span class="arrow fa fa-arrow-left"></span>
+ <span class="arrow"> < </span>
</span>
</div>
{/if}
@@ -30,40 +30,61 @@
<li class="glide__slide customerReviewsSlider-templateOne-slide">
- {if $entry['review']}
- <div class="customerReviewsSlider-templateOne-review">
- {$entry['review']}
- </div>
- {/if}
-
- <div class="customerReviewsSlider-templateOne-client">
+ <div class="customerReviewsSlider-content-wrapper">
+ <div class="customerReviewsSlider-quote">
+ <svg width="192" height="192" version="1.1" viewBox="0 0 50.8 50.8" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+ <rdf:RDF>
+ <cc:Work rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+ <dc:title/>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g transform="translate(0 -246.2)">
+ <g transform="scale(.97499 1.0257)" aria-label='"'>
+ <path d="m9.2646 271.8q3.2283-4.0891 4.3761-7.1022l-4.1609-6.2413q0-1.65 0.86087-3.2283 0.93261-1.65 2.5826-2.6543 1.65-1.0044 3.7304-1.0044 3.0848 0 5.237 2.2239 2.1522 2.1522 2.1522 5.5239 0 3.9456-3.1565 8.9674t-9.9 9.7565zm18.796 0q3.2283-4.0891 4.3761-7.1022l-4.1609-6.2413q0-1.65 0.86087-3.2283 0.93261-1.65 2.5826-2.6543 1.65-1.0044 3.7304-1.0044 3.0848 0 5.237 2.2239 2.1522 2.1522 2.1522 5.5239 0 3.9456-3.1565 8.9674t-9.9 9.7565z" stroke-width="1.7935" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+ </g>
+ </g>
+ </svg>
+ </div>
- <div class="customerReviewsSlider-templateOne-client-img">
- {if $entry['image']}
- {image src=$entry['image'] loading="lazy" data-src="{$entry['image']}"}
- {/if}
+ {if $entry['review']}
+ <div class="customerReviewsSlider-templateOne-review">
+ {$entry['review']}
</div>
+ {/if}
- <div class="customerReviewsSlider-templateOne-client-content">
- {if $entry['customerName']}
- <span class="customerReviewsSlider-templateOne-client-name">{$entry['customerName']}</span>
- {/if}
- {if $entry['addition']}
- <span class="customerReviewsSlider-templateOne-client-addition">{$entry['addition']}</span>
- {/if}
-
- {if $entry['url']}
- <a href="{$entry['url']}" class="customerReviewsSlider-templateOne-url">
- {if $entry['urlTitle']}
- {$entry['urlTitle']}
- {else}
- {$entry['url']}
+ <div class="customerReviewsSlider-templateOne-client">
+
+ <div class="customerReviewsSlider-templateOne-client-img">
+ {if $entry['image']}
+ {image src=$entry['image'] loading="lazy" data-src="{$entry['image']}"}
{/if}
- </a>
- {/if}
+ </div>
- </div>
+ <div class="customerReviewsSlider-templateOne-client-content">
+ {if $entry['customerName']}
+ <span class="customerReviewsSlider-templateOne-client-name">{$entry['customerName']}</span>
+ {/if}
+ {if $entry['addition']}
+ <span class="customerReviewsSlider-templateOne-client-addition">{$entry['addition']}</span>
+ {/if}
+
+ {if $entry['url']}
+ <a href="{$entry['url']}" class="customerReviewsSlider-templateOne-url">
+ {if $entry['urlTitle']}
+ {$entry['urlTitle']}
+ {else}
+ {$entry['url']}
+ {/if}
+ </a>
+ {/if}
+ </div>
+
+ </div>
</div>
</li>
@@ -76,7 +97,7 @@
<div class="customerReviewsSlider-templateOne-arrows" data-glide-el="controls">
<span class="customerReviewsSlider-templateOne-arrow customerReviewsSlider-templateOne-arrow-right"
data-glide-dir=">">
- <span class="arrow fa fa-arrow-right"></span>
+ <span class="arrow"> > </span>
</span>
</div>
{/if}