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

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

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