PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 1.6.2
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v1.6.2
3.1.4 3.0.8 3.0.9 3.1.0 3.1.2 3.1.3 3.0.7 3.0.5 3.0.4 3.0.3 3.0.2 trunk 1.5.0 1.5.1 1.5.2 1.6.1 1.6.2 1.6.3 1.6.4 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 All 93 releases
ultimate-store-kit / assets / css / usk-florence-carousel.css

usk-florence-carousel.css in Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder 1.6.2, at assets/css/usk-florence-carousel.css

329 lines 16.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .usk-florence-carousel .usk-carousel {
2 width: 100%;
3 display: carousel; }
4 .usk-florence-carousel .usk-carousel .usk-item {
5 background: #fff;
6 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); }
7 .usk-florence-carousel .usk-carousel .usk-item .usk-item-box {
8 position: relative; }
9 .usk-florence-carousel .usk-carousel .usk-item .usk-image {
10 position: relative;
11 overflow: hidden; }
12 .usk-florence-carousel .usk-carousel .usk-item .usk-image .img {
13 width: 100%;
14 overflow: hidden; }
15 .usk-florence-carousel .usk-carousel .usk-item .usk-image .image-default {
16 opacity: 1;
17 transform: scale(1.1);
18 transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18), opacity 0.5s; }
19 .usk-florence-carousel .usk-carousel .usk-item .image-hover {
20 position: absolute;
21 top: 0;
22 bottom: 0;
23 left: 0;
24 right: 0;
25 transition: all 0.5s ease;
26 opacity: 0;
27 transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18), opacity 0.5s; }
28 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping {
29 position: absolute;
30 display: inline-flex;
31 flex-direction: column; }
32 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-action-btn {
33 display: inline-flex;
34 align-items: center;
35 justify-content: center;
36 text-decoration: none;
37 margin-bottom: 5px;
38 opacity: 0;
39 transform: translateX(25px);
40 box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
41 border-radius: 2px; }
42 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-action-btn:nth-last-child(1) {
43 margin-bottom: 0; }
44 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-action-btn.added_to_cart {
45 display: none; }
46 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-wishlist {
47 color: #000;
48 background: #fff;
49 transition: all 0.3s ease; }
50 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-wishlist:hover {
51 background-color: #2B2D42;
52 color: #fff; }
53 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-wishlist.usk-active {
54 background-color: #D90429;
55 color: #fff; }
56 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-wishlist.usk-active:hover {
57 background-color: #D90429; }
58 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-compare {
59 transition: all 0.5s ease;
60 color: #000;
61 background: #fff; }
62 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-compare:hover {
63 background-color: #2B2D42;
64 color: #fff; }
65 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-quickview {
66 transition: all 0.6s ease;
67 color: #000;
68 background: #fff; }
69 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-quickview:hover {
70 background-color: #2B2D42;
71 color: #fff; }
72 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-cart {
73 transition: all 0.7s ease;
74 color: #000;
75 background: #fff; }
76 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.added i::before {
77 display: none; }
78 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.added i::after {
79 content: "\2713";
80 font-size: 16px; }
81 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.loading .icon::before {
82 display: none; }
83 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.loading .icon::after {
84 content: "";
85 width: 16px;
86 height: 16px;
87 border: 2px dotted #000;
88 border-radius: 50%;
89 display: inline-block;
90 animation: rotation 2s linear infinite; }
91 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping .usk-cart:hover {
92 background-color: #2B2D42;
93 color: #fff; }
94 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper {
95 display: block;
96 position: absolute;
97 text-align: left; }
98 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content {
99 display: block; }
100 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content > div {
101 display: flex; }
102 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content > div .usk-badge {
103 text-decoration: none;
104 padding: 4px;
105 font-size: 10px;
106 border-radius: 1px;
107 text-transform: capitalize; }
108 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-sale-badge .usk-badge {
109 background: #2B2D42;
110 color: #fff; }
111 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-sale-badge,
112 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-percantage-badge,
113 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-stock-status-badge,
114 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-trending-badge {
115 margin-bottom: 5px; }
116 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-percantage-badge .usk-badge {
117 background: #9FA8BC;
118 color: #fff; }
119 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-stock-status-badge .usk-badge {
120 background: #EF233C;
121 color: #fff; }
122 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-trending-badge .usk-badge {
123 background: #ff006e;
124 color: #fff; }
125 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-new-badge .usk-badge {
126 background: #D90429;
127 color: #fff; }
128 .usk-florence-carousel .usk-carousel .usk-item .usk-content {
129 display: flex;
130 align-items: center;
131 height: 100%; }
132 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-content-inner {
133 width: 100%; }
134 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category {
135 margin-bottom: 15px;
136 display: inline-flex;
137 flex-wrap: wrap;
138 gap: 5px; }
139 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category a {
140 font-size: 11px;
141 color: #9FA8BC;
142 text-transform: uppercase;
143 font-weight: 500;
144 border: 1px solid #c0c9dd;
145 padding: 2px 10px;
146 transition: all .3s ease; }
147 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category a:hover {
148 color: #E6EDEF;
149 background: #2B2D42;
150 border: 1px solid #2B2D42; }
151 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-title {
152 display: inline-block;
153 margin-bottom: 10px; }
154 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-title .title {
155 color: #2B2D42;
156 text-transform: capitalize;
157 font-weight: 700;
158 font-size: 16px;
159 margin: 0; }
160 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price {
161 font-size: 12px;
162 font-weight: 700;
163 color: #9FA8BC;
164 margin-bottom: 14px; }
165 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price del {
166 font-weight: 500; }
167 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price ins {
168 text-decoration: none;
169 padding-left: 7px; }
170 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating {
171 display: flex;
172 align-items: center;
173 width: 100%;
174 margin-bottom: 0px; }
175 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating {
176 display: flex;
177 align-items: center;
178 padding: 0; }
179 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating .star-rating {
180 font-size: 12px;
181 margin: 0; }
182 .usk-florence-carousel .usk-carousel .usk-item:hover .usk-image .image-default {
183 opacity: 0;
184 transform: scale(1); }
185 .usk-florence-carousel .usk-carousel .usk-item:hover .usk-image .image-hover {
186 opacity: 1;
187 transform: scale(1.1); }
188 .usk-florence-carousel .usk-carousel .usk-item:hover .usk-shoping .usk-action-btn {
189 opacity: 1;
190 transform: translateX(0px); }
191
192 .usk-florence-carousel .usk-carousel-layout {
193 grid-template-columns: repeat(1, 1fr); }
194 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-item-box {
195 overflow: hidden; }
196 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-content {
197 padding: 20px; }
198 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-content .usk-desc {
199 display: none; }
200 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-content .usk-price {
201 margin: 0; }
202 .usk-florence-carousel .usk-carousel-layout .usk-have-rating .usk-content .usk-price {
203 opacity: 1;
204 transition: all 0.3s ease;
205 transform: translateY(0); }
206 .usk-florence-carousel .usk-carousel-layout .usk-have-rating .usk-content .usk-rating {
207 transform: translateY(0);
208 opacity: 0;
209 transition: all 0.3s ease; }
210 .usk-florence-carousel .usk-carousel-layout .usk-have-rating:hover .usk-content .usk-rating {
211 transform: translateY(-20px);
212 opacity: 1; }
213 .usk-florence-carousel .usk-carousel-layout .usk-have-rating:hover .usk-content .usk-price {
214 transform: translateY(-20px);
215 opacity: 0; }
216 .usk-florence-carousel .usk-carousel-layout .usk-shoping {
217 bottom: 15px;
218 right: 15px; }
219 .usk-florence-carousel .usk-carousel-layout .usk-shoping .usk-action-btn {
220 height: 30px;
221 width: 30px; }
222 .usk-florence-carousel .usk-carousel-layout .usk-shoping .usk-action-btn .icon {
223 font-size: 12px; }
224 .usk-florence-carousel .usk-carousel-layout .usk-badge-label-wrapper {
225 top: 15px;
226 left: 15px; }
227
228 .usk-florence-carousel .usk-badge-label-wrapper {
229 top: 10px;
230 left: 10px; }
231
232 /*------------------------------------
233 Florence Carousel elementor-widget Css
234 --------------------------------------*/
235 .elementor-widget-usk-florence-carousel .usk-arrows-container {
236 -webkit-transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 40));
237 transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 40)); }
238
239 .elementor-widget-usk-florence-carousel .usk-dots-container {
240 -webkit-transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 30));
241 transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 30)); }
242
243 .elementor-widget-usk-florence-carousel .usk-arrows-dots-container {
244 -webkit-transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 40));
245 transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 40)); }
246
247 .elementor-widget-usk-florence-carousel .usk-arrows-fraction-container {
248 -webkit-transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 40));
249 transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 40)); }
250
251 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-arrows-container,
252 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-arrows-container {
253 -webkit-transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 0)) rotate(90deg);
254 transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 0)) rotate(90deg); }
255
256 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-dots-container,
257 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-dots-container {
258 -webkit-transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 0)) rotate(90deg);
259 transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 0)) rotate(90deg); }
260
261 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-arrows-dots-container,
262 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-arrows-dots-container {
263 -webkit-transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 0)) rotate(90deg);
264 transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 0)) rotate(90deg); }
265
266 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-arrows-fraction-container,
267 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-arrows-fraction-container {
268 -webkit-transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 0)) rotate(90deg);
269 transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 0)) rotate(90deg); }
270
271 @media (min-width: 768px) {
272 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content > div .usk-badge {
273 padding: 6px; }
274 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-sale-badge,
275 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-percantage-badge,
276 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-stock-status-badge,
277 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-trending-badge {
278 margin-bottom: 10px; }
279 .usk-florence-carousel .usk-carousel-layout {
280 carousel-template-columns: repeat(2, 1fr); }
281 .usk-florence-carousel .usk-carousel-layout .usk-shoping {
282 bottom: 20px;
283 right: 20px; }
284 .usk-florence-carousel .usk-carousel-layout .usk-badge-label-wrapper {
285 top: 20px;
286 left: 20px; }
287 .usk-florence-carousel .usk-list-layout {
288 carousel-template-columns: repeat(1, 1fr); }
289 .usk-florence-carousel .usk-list-layout .usk-shoping {
290 bottom: 15px;
291 right: 15px; }
292 .usk-florence-carousel .usk-list-layout .usk-badge-label-wrapper {
293 top: 15px;
294 left: 15px; } }
295
296 @media (min-width: 1024px) {
297 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping {
298 bottom: 25px;
299 right: 25px; }
300 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category {
301 margin-bottom: 18px; }
302 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category a {
303 font-size: 13px; }
304 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-title .title {
305 font-size: 18px; }
306 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price {
307 font-size: 14px; }
308 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating .star-rating {
309 font-size: 14px; }
310 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper {
311 top: 25px;
312 left: 25px; }
313 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content div .usk-badge {
314 padding: 4px 8px;
315 font-size: 11px; }
316 .usk-florence-carousel .usk-carousel-layout {
317 grid-template-columns: repeat(3, 1fr); }
318 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-shoping .usk-action-btn {
319 height: 35px;
320 width: 35px; }
321 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-shoping .usk-action-btn .icon {
322 font-size: 14px; } }
323
324 @keyframes rotation {
325 0% {
326 transform: rotate(0deg); }
327 100% {
328 transform: rotate(360deg); } }
329