PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 1.5.0
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v1.5.0
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-grid.css

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

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