PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 1.5.1
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v1.5.1
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-glossy-carousel.css

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

222 lines 11.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .usk-glossy-carousel .usk-carousel .usk-item {
2 background: #fff;
3 position: relative;
4 height: auto;
5 overflow: hidden; }
6 .usk-glossy-carousel .usk-carousel .usk-item .usk-image {
7 position: relative;
8 overflow: hidden;
9 width: 100%;
10 height: 100%; }
11 .usk-glossy-carousel .usk-carousel .usk-item .usk-image .img {
12 width: 100%;
13 height: 100%;
14 object-fit: cover; }
15 .usk-glossy-carousel .usk-carousel .usk-item .usk-image .default-image {
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-glossy-carousel .usk-carousel .usk-item .usk-image .hover-image {
20 position: absolute;
21 top: 0;
22 left: 0;
23 right: 0;
24 bottom: 0;
25 opacity: 0;
26 transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18), opacity 0.5s; }
27 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper {
28 display: block;
29 position: absolute;
30 text-align: left;
31 top: 0;
32 right: 0;
33 padding: 20px; }
34 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content {
35 display: block; }
36 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content div {
37 display: flex;
38 justify-content: flex-end; }
39 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content div .usk-badge {
40 text-decoration: none;
41 padding: 6px 6px;
42 font-size: 10px;
43 border-radius: 3px;
44 text-transform: capitalize; }
45 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-sale-badge .usk-badge {
46 background: #2B2D42;
47 color: #fff; }
48 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-sale-badge, .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-percantage-badge,
49 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-stock-status-badge,
50 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-trending-badge {
51 margin-bottom: 10px; }
52 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-percantage-badge .usk-badge {
53 background: #9FA8BC;
54 color: #fff; }
55 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-stock-status-badge .usk-badge {
56 background: #EF233C;
57 color: #fff; }
58 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-trending-badge .usk-badge {
59 background: #ff006e;
60 color: #fff; }
61 .usk-glossy-carousel .usk-carousel .usk-item .usk-badge-label-wrapper .usk-badge-label-content .usk-new-badge .usk-badge {
62 background: #D90429;
63 color: #fff; }
64 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping {
65 position: absolute;
66 top: 20px;
67 left: 20px;
68 right: auto; }
69 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping a {
70 text-decoration: none;
71 display: block;
72 text-align: center;
73 border: 1px solid transparent;
74 border-radius: 500px;
75 margin-bottom: 5px; }
76 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping a .icon {
77 display: inline-flex;
78 align-items: center;
79 justify-content: center;
80 border-radius: 50px;
81 width: 28px;
82 height: 28px; }
83 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping a .icon::before {
84 margin: 0;
85 font-size: 10px; }
86 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-wishlist {
87 transition: all 0.3s ease;
88 background: #2B2D42;
89 color: #ffffffdb; }
90 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-compare {
91 transition: all 0.5s ease;
92 background: #2B2D42;
93 color: #ffffffdb; }
94 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-shoping-icon-quickview {
95 transition: all 0.6s ease;
96 background: #2B2D42;
97 color: #ffffffdb; }
98 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-cart {
99 transition: all 0.7s ease;
100 background: #2B2D42;
101 color: #ffffffdb; }
102 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.added i::before {
103 display: none; }
104 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.added i::after {
105 content: "\2713";
106 font-size: 16px; }
107 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.loading .icon::before {
108 display: none; }
109 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping .usk-cart.loading .icon::after {
110 content: "";
111 width: 16px;
112 height: 16px;
113 border: 2px dotted #fff;
114 border-radius: 50%;
115 display: inline-block;
116 animation: rotation 2s linear infinite; }
117 .usk-glossy-carousel .usk-carousel .usk-item .usk-content {
118 padding: 30px; }
119 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-title {
120 text-decoration: none;
121 margin-bottom: 10px;
122 display: block; }
123 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-title .title {
124 font-size: 14px;
125 color: #2B2D42;
126 font-weight: 700;
127 transition: all 0.3s ease;
128 text-transform: capitalize;
129 margin: 0; }
130 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-title .title:hover {
131 color: #D90429; }
132 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-price {
133 color: #9FA8BC;
134 text-transform: capitalize;
135 font-weight: 600;
136 font-size: 12px;
137 margin-bottom: 15px; }
138 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-price del {
139 font-weight: 500; }
140 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-price ins {
141 text-decoration: none;
142 padding-left: 10px; }
143 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-rating {
144 display: flex;
145 align-items: center; }
146 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating {
147 display: flex;
148 align-items: center;
149 padding: 0; }
150 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-rating .woocommerce-product-rating .star-rating {
151 margin: 0;
152 font-size: 14px; }
153 .usk-glossy-carousel .usk-carousel .usk-item:hover .usk-shoping a {
154 transform: translateY(0px);
155 opacity: 1; }
156 .usk-glossy-carousel .usk-carousel .usk-item:hover .usk-image .default-image {
157 opacity: 0;
158 transform: scale(1); }
159 .usk-glossy-carousel .usk-carousel .usk-item:hover .usk-image .hover-image {
160 opacity: 1;
161 transform: scale(1.1); }
162
163 .elementor-widget-usk-glossy-carousel .usk-arrows-container {
164 -webkit-transform: translate(var(--usk-glossy-carousel-arrows-ncx, 0), var(--usk-glossy-carousel-arrows-ncy, 40));
165 transform: translate(var(--usk-glossy-carousel-arrows-ncx, 0), var(--usk-glossy-carousel-arrows-ncy, 40)); }
166
167 .elementor-widget-usk-glossy-carousel .usk-dots-container {
168 -webkit-transform: translate(var(--usk-glossy-carousel-dots-nnx, 0), var(--usk-glossy-carousel-dots-nny, 30));
169 transform: translate(var(--usk-glossy-carousel-dots-nnx, 0), var(--usk-glossy-carousel-dots-nny, 30)); }
170
171 .elementor-widget-usk-glossy-carousel .usk-arrows-dots-container {
172 -webkit-transform: translate(var(--usk-glossy-carousel-both-ncx, 0), var(--usk-glossy-carousel-both-ncy, 40));
173 transform: translate(var(--usk-glossy-carousel-both-ncx, 0), var(--usk-glossy-carousel-both-ncy, 40)); }
174
175 .elementor-widget-usk-glossy-carousel .usk-arrows-fraction-container {
176 -webkit-transform: translate(var(--usk-glossy-carousel-arrows-fraction-ncx, 0), var(--usk-glossy-carousel-arrows-fraction-ncy, 40));
177 transform: translate(var(--usk-glossy-carousel-arrows-fraction-ncx, 0), var(--usk-glossy-carousel-arrows-fraction-ncy, 40)); }
178
179 .elementor-widget-usk-glossy-carousel .usk-position-center-left .usk-arrows-container,
180 .elementor-widget-usk-glossy-carousel .usk-position-center-right .usk-arrows-container {
181 -webkit-transform: translate(var(--usk-glossy-carousel-arrows-ncx, 0), var(--usk-glossy-carousel-arrows-ncy, 0)) rotate(90deg);
182 transform: translate(var(--usk-glossy-carousel-arrows-ncx, 0), var(--usk-glossy-carousel-arrows-ncy, 0)) rotate(90deg); }
183
184 .elementor-widget-usk-glossy-carousel .usk-position-center-left .usk-dots-container,
185 .elementor-widget-usk-glossy-carousel .usk-position-center-right .usk-dots-container {
186 -webkit-transform: translate(var(--usk-glossy-carousel-dots-nnx, 0), var(--usk-glossy-carousel-dots-nny, 0)) rotate(90deg);
187 transform: translate(var(--usk-glossy-carousel-dots-nnx, 0), var(--usk-glossy-carousel-dots-nny, 0)) rotate(90deg); }
188
189 .elementor-widget-usk-glossy-carousel .usk-position-center-left .usk-arrows-dots-container,
190 .elementor-widget-usk-glossy-carousel .usk-position-center-right .usk-arrows-dots-container {
191 -webkit-transform: translate(var(--usk-glossy-carousel-both-ncx, 0), var(--usk-glossy-carousel-both-ncy, 0)) rotate(90deg);
192 transform: translate(var(--usk-glossy-carousel-both-ncx, 0), var(--usk-glossy-carousel-both-ncy, 0)) rotate(90deg); }
193
194 .elementor-widget-usk-glossy-carousel .usk-position-center-left .usk-arrows-fraction-container,
195 .elementor-widget-usk-glossy-carousel .usk-position-center-right .usk-arrows-fraction-container {
196 -webkit-transform: translate(var(--usk-glossy-carousel-arrows-fraction-ncx, 0), var(--usk-glossy-carousel-arrows-fraction-ncy, 0)) rotate(90deg);
197 transform: translate(var(--usk-glossy-carousel-arrows-fraction-ncx, 0), var(--usk-glossy-carousel-arrows-fraction-ncy, 0)) rotate(90deg); }
198
199 @media (min-width: 1024px) {
200 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-title .title {
201 font-size: 18px; }
202 .usk-glossy-carousel .usk-carousel .usk-item .usk-content .usk-price {
203 font-size: 14px; }
204 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping a .icon {
205 width: 35px;
206 height: 35px; }
207 .usk-glossy-carousel .usk-carousel .usk-item .usk-shoping a .icon::before {
208 font-size: 14px; }
209 .usk-glossy-carousel .usk-carousel .usk-item .usk-imageper .usk-badge-label-wrapper .usk-badge-label-content div .usk-badge {
210 padding: 7px 10px;
211 font-size: 12px; }
212 .usk-glossy-carousel .usk-carousel .usk-item .usk-imageper .usk-badge-label-wrapper .usk-badge-label-content .usk-sale-badge, .usk-glossy-carousel .usk-carousel .usk-item .usk-imageper .usk-badge-label-wrapper .usk-badge-label-content .usk-percantage-badge,
213 .usk-glossy-carousel .usk-carousel .usk-item .usk-imageper .usk-badge-label-wrapper .usk-badge-label-content .usk-stock-status-badge,
214 .usk-glossy-carousel .usk-carousel .usk-item .usk-imageper .usk-badge-label-wrapper .usk-badge-label-content .usk-trending-badge {
215 margin-bottom: 15px; } }
216
217 @keyframes rotation {
218 0% {
219 transform: rotate(0deg); }
220 100% {
221 transform: rotate(360deg); } }
222