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-shiny-carousel.css

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

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