PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 1.5.2
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v1.5.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.5.2, at assets/css/usk-florence-carousel.css

327 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 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category a {
137 font-size: 11px;
138 color: #9FA8BC;
139 text-transform: uppercase;
140 font-weight: 500;
141 display: inline-block;
142 border: 1px solid #c0c9dd;
143 padding: 2px 10px;
144 transition: all .3s ease; }
145 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category a:hover {
146 color: #E6EDEF;
147 background: #2B2D42;
148 border: 1px solid #2B2D42; }
149 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-title {
150 display: inline-block;
151 margin-bottom: 10px; }
152 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-title .title {
153 color: #2B2D42;
154 text-transform: capitalize;
155 font-weight: 700;
156 font-size: 16px;
157 margin: 0; }
158 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price {
159 font-size: 12px;
160 font-weight: 700;
161 color: #9FA8BC;
162 margin-bottom: 14px; }
163 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price del {
164 font-weight: 500; }
165 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price ins {
166 text-decoration: none;
167 padding-left: 7px; }
168 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating {
169 display: flex;
170 align-items: center;
171 width: 100%;
172 margin-bottom: 0px; }
173 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating {
174 display: flex;
175 align-items: center;
176 padding: 0; }
177 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating .star-rating {
178 font-size: 12px;
179 margin: 0; }
180 .usk-florence-carousel .usk-carousel .usk-item:hover .usk-image .image-default {
181 opacity: 0;
182 transform: scale(1); }
183 .usk-florence-carousel .usk-carousel .usk-item:hover .usk-image .image-hover {
184 opacity: 1;
185 transform: scale(1.1); }
186 .usk-florence-carousel .usk-carousel .usk-item:hover .usk-shoping .usk-action-btn {
187 opacity: 1;
188 transform: translateX(0px); }
189
190 .usk-florence-carousel .usk-carousel-layout {
191 grid-template-columns: repeat(1, 1fr); }
192 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-item-box {
193 overflow: hidden; }
194 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-content {
195 padding: 20px; }
196 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-content .usk-desc {
197 display: none; }
198 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-content .usk-price {
199 margin: 0; }
200 .usk-florence-carousel .usk-carousel-layout .usk-have-rating .usk-content .usk-price {
201 opacity: 1;
202 transition: all 0.3s ease;
203 transform: translateY(0); }
204 .usk-florence-carousel .usk-carousel-layout .usk-have-rating .usk-content .usk-rating {
205 transform: translateY(0);
206 opacity: 0;
207 transition: all 0.3s ease; }
208 .usk-florence-carousel .usk-carousel-layout .usk-have-rating:hover .usk-content .usk-rating {
209 transform: translateY(-20px);
210 opacity: 1; }
211 .usk-florence-carousel .usk-carousel-layout .usk-have-rating:hover .usk-content .usk-price {
212 transform: translateY(-20px);
213 opacity: 0; }
214 .usk-florence-carousel .usk-carousel-layout .usk-shoping {
215 bottom: 15px;
216 right: 15px; }
217 .usk-florence-carousel .usk-carousel-layout .usk-shoping .usk-action-btn {
218 height: 30px;
219 width: 30px; }
220 .usk-florence-carousel .usk-carousel-layout .usk-shoping .usk-action-btn .icon {
221 font-size: 12px; }
222 .usk-florence-carousel .usk-carousel-layout .usk-badge-label-wrapper {
223 top: 15px;
224 left: 15px; }
225
226 .usk-florence-carousel .usk-badge-label-wrapper {
227 top: 10px;
228 left: 10px; }
229
230 /*------------------------------------
231 Florence Carousel elementor-widget Css
232 --------------------------------------*/
233 .elementor-widget-usk-florence-carousel .usk-arrows-container {
234 -webkit-transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 40));
235 transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 40)); }
236
237 .elementor-widget-usk-florence-carousel .usk-dots-container {
238 -webkit-transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 30));
239 transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 30)); }
240
241 .elementor-widget-usk-florence-carousel .usk-arrows-dots-container {
242 -webkit-transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 40));
243 transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 40)); }
244
245 .elementor-widget-usk-florence-carousel .usk-arrows-fraction-container {
246 -webkit-transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 40));
247 transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 40)); }
248
249 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-arrows-container,
250 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-arrows-container {
251 -webkit-transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 0)) rotate(90deg);
252 transform: translate(var(--usk-florence-carousel-arrows-ncx, 0), var(--usk-florence-carousel-arrows-ncy, 0)) rotate(90deg); }
253
254 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-dots-container,
255 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-dots-container {
256 -webkit-transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 0)) rotate(90deg);
257 transform: translate(var(--usk-florence-carousel-dots-nnx, 0), var(--usk-florence-carousel-dots-nny, 0)) rotate(90deg); }
258
259 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-arrows-dots-container,
260 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-arrows-dots-container {
261 -webkit-transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 0)) rotate(90deg);
262 transform: translate(var(--usk-florence-carousel-both-ncx, 0), var(--usk-florence-carousel-both-ncy, 0)) rotate(90deg); }
263
264 .elementor-widget-usk-florence-carousel .usk-position-center-left .usk-arrows-fraction-container,
265 .elementor-widget-usk-florence-carousel .usk-position-center-right .usk-arrows-fraction-container {
266 -webkit-transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 0)) rotate(90deg);
267 transform: translate(var(--usk-florence-carousel-arrows-fraction-ncx, 0), var(--usk-florence-carousel-arrows-fraction-ncy, 0)) rotate(90deg); }
268
269 @media (min-width: 768px) {
270 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content > div .usk-badge {
271 padding: 6px; }
272 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-sale-badge,
273 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-percantage-badge,
274 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-stock-status-badge,
275 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-trending-badge {
276 margin-bottom: 10px; }
277 .usk-florence-carousel .usk-carousel-layout {
278 carousel-template-columns: repeat(2, 1fr); }
279 .usk-florence-carousel .usk-carousel-layout .usk-shoping {
280 bottom: 20px;
281 right: 20px; }
282 .usk-florence-carousel .usk-carousel-layout .usk-badge-label-wrapper {
283 top: 20px;
284 left: 20px; }
285 .usk-florence-carousel .usk-list-layout {
286 carousel-template-columns: repeat(1, 1fr); }
287 .usk-florence-carousel .usk-list-layout .usk-shoping {
288 bottom: 15px;
289 right: 15px; }
290 .usk-florence-carousel .usk-list-layout .usk-badge-label-wrapper {
291 top: 15px;
292 left: 15px; } }
293
294 @media (min-width: 1024px) {
295 .usk-florence-carousel .usk-carousel .usk-item .usk-shoping {
296 bottom: 25px;
297 right: 25px; }
298 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category {
299 margin-bottom: 18px; }
300 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-category a {
301 font-size: 13px; }
302 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-title .title {
303 font-size: 18px; }
304 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-price {
305 font-size: 14px; }
306 .usk-florence-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating .star-rating {
307 font-size: 14px; }
308 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper {
309 top: 25px;
310 left: 25px; }
311 .usk-florence-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content div .usk-badge {
312 padding: 4px 8px;
313 font-size: 11px; }
314 .usk-florence-carousel .usk-carousel-layout {
315 grid-template-columns: repeat(3, 1fr); }
316 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-shoping .usk-action-btn {
317 height: 35px;
318 width: 35px; }
319 .usk-florence-carousel .usk-carousel-layout .usk-item .usk-shoping .usk-action-btn .icon {
320 font-size: 14px; } }
321
322 @keyframes rotation {
323 0% {
324 transform: rotate(0deg); }
325 100% {
326 transform: rotate(360deg); } }
327