PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.6
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.6
2.3.2 2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 All 60 releases
merchant / assets / css / modules / quick-view / quick-view.css

quick-view.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 1.6, at assets/css/modules/quick-view/quick-view.css

557 lines 14.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Quick View.
3 *
4 */
5 .woocommerce .product .merchant-quick-view-button {
6 display: -webkit-inline-box !important;
7 display: -ms-inline-flexbox !important;
8 display: inline-flex !important;
9 -webkit-box-pack: center !important;
10 -ms-flex-pack: center !important;
11 justify-content: center !important;
12 -webkit-box-align: center !important;
13 -ms-flex-align: center !important;
14 align-items: center !important;
15 -webkit-transition: all .2s;
16 transition: all .2s;
17 text-decoration: none;
18 -ms-flex-item-align: start;
19 align-self: flex-start;
20 color: var(--mrc-qv-button-text-color, #FFF) !important;
21 border-color: var(--mrc-qv-button-border-color, #212121) !important;
22 background-color: var(--mrc-qv-button-bg-color, #212121) !important;
23 transition: all .2s;
24 }
25
26 .woocommerce .product .merchant-quick-view-button svg + span {
27 display: inline-block;
28 margin-left: 8px;
29 }
30
31 .woocommerce .product .merchant-quick-view-button svg {
32 width: 1em;
33 height: 1em;
34 fill: var(--mrc-qv-button-icon-color, #FFF) !important;
35 -webkit-transition: all .2s;
36 transition: all .2s;
37 }
38
39 .woocommerce .product .merchant-quick-view-button svg path {
40 fill: var(--mrc-qv-button-icon-color, #FFF) !important;
41 }
42
43 .woocommerce .product .merchant-quick-view-button:hover {
44 color: var(--mrc-qv-button-color-hover, #FFF) !important;
45 border-color: var(--mrc-qv-button-border-color-hover, #414141) !important;
46 background-color: var(--mrc-qv-button-bg-color-hover, #414141) !important;
47 }
48
49 .woocommerce .product .merchant-quick-view-button:hover svg {
50 fill: var(--mrc-qv-button-icon-color-hover, #FFF) !important;
51 }
52
53 .woocommerce .product .merchant-quick-view-button:hover svg path {
54 fill: var(--mrc-qv-button-icon-color-hover, #FFF) !important;
55 }
56
57 .products .product {
58 position: relative;
59 }
60
61 .products .product .merchant-quick-view-position-overlay {
62 position: absolute;
63 z-index: 10;
64 top: var(--mrc-qv-button-position-top, 50%);
65 left: var(--mrc-qv-button-position-left, 50%);
66 -webkit-transform: translate(calc(var(--mrc-qv-button-position-top, 50%) * -1), calc(var(--mrc-qv-button-position-left, 50%) * -1));
67 transform: translate(calc(var(--mrc-qv-button-position-top, 50%) * -1), calc(var(--mrc-qv-button-position-left, 50%) * -1));
68 margin: 0;
69 white-space: nowrap !important;
70 opacity: 0;
71 -webkit-transition: all .2s;
72 transition: all .2s;
73 }
74
75 .products .product:hover .merchant-quick-view-position-overlay {
76 opacity: 1;
77 }
78
79 .merchant-quick-view-modal {
80 position: fixed;
81 z-index: 999;
82 top: 0;
83 left: 0;
84 right: 0;
85 bottom: 0;
86 display: -webkit-box;
87 display: -ms-flexbox;
88 display: flex;
89 -webkit-box-align: center;
90 -ms-flex-align: center;
91 align-items: center;
92 -webkit-box-pack: center;
93 -ms-flex-pack: center;
94 justify-content: center;
95 opacity: 0;
96 visibility: hidden;
97 pointer-events: none;
98 -webkit-transition: all .3s ease;
99 transition: all .3s ease;
100 }
101
102 .merchant-quick-view-modal.merchant-show {
103 opacity: 1;
104 visibility: visible;
105 pointer-events: auto;
106 }
107
108 .merchant-quick-view-modal.merchant-loading .merchant-quick-view-loader {
109 opacity: 1;
110 visibility: visible;
111 }
112
113 .merchant-quick-view-overlay {
114 position: absolute;
115 z-index: 1;
116 top: 0;
117 left: 0;
118 right: 0;
119 bottom: 0;
120 background-color: rgba(0, 0, 0, 0.9);
121 }
122
123 .merchant-quick-view-loader {
124 position: absolute;
125 z-index: 2;
126 display: -webkit-box;
127 display: -ms-flexbox;
128 display: flex;
129 font-size: 26px;
130 -webkit-animation: merchant-fa-spin .75s linear infinite;
131 animation: merchant-fa-spin .75s linear infinite;
132 opacity: 0;
133 visibility: hidden;
134 }
135
136 .merchant-quick-view-loader svg {
137 width: 1em;
138 height: 1em;
139 fill: #fff;
140 }
141
142 .merchant-quick-view-inner {
143 position: relative;
144 z-index: 3;
145 width: var(--mrc-qv-modal-width, 1000px);
146 max-height: var(--mrc-qv-modal-height, 500px);
147 max-width: 90vw;
148 padding: 35px;
149 background-color: #FFF;
150 opacity: 0;
151 visibility: hidden;
152 -webkit-transition: opacity .3s ease, visibility .3s ease;
153 transition: opacity .3s ease, visibility .3s ease;
154 }
155
156 .merchant-quick-view-inner.merchant-show {
157 opacity: 1;
158 visibility: visible;
159 }
160
161 .merchant-quick-view-close-button {
162 position: absolute;
163 z-index: 1;
164 right: -7px;
165 top: -32px;
166 width: 30px;
167 height: 30px;
168 font-size: 24px;
169 display: -webkit-box;
170 display: -ms-flexbox;
171 display: flex;
172 -webkit-box-align: center;
173 -ms-flex-align: center;
174 align-items: center;
175 -webkit-box-pack: center;
176 -ms-flex-pack: center;
177 justify-content: center;
178 }
179
180 .merchant-quick-view-close-button svg {
181 width: 1em;
182 height: 1em;
183 fill: #fff;
184 }
185
186 @-webkit-keyframes merchant-fa-spin {
187 0% {
188 -webkit-transform: rotate(0deg);
189 transform: rotate(0deg);
190 }
191 to {
192 -webkit-transform: rotate(1turn);
193 transform: rotate(1turn);
194 }
195 }
196
197 @keyframes merchant-fa-spin {
198 0% {
199 -webkit-transform: rotate(0deg);
200 transform: rotate(0deg);
201 }
202 to {
203 -webkit-transform: rotate(1turn);
204 transform: rotate(1turn);
205 }
206 }
207
208 .merchant-quick-view-row {
209 display: -webkit-box;
210 display: -ms-flexbox;
211 display: flex;
212 grid-gap: 30px;
213 }
214
215 .merchant-quick-view-column {
216 -webkit-box-flex: 1;
217 -ms-flex: 1;
218 flex: 1;
219 width: 50%;
220 }
221
222 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image {
223 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px);
224 }
225
226 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image img {
227 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px);
228 }
229
230 .merchant-quick-view-product-gallery .woocommerce-product-gallery {
231 width: 100% !important;
232 float: none !important;
233 margin: 0 !important;
234 }
235
236 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar {
237 width: 6px;
238 }
239
240 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar-track {
241 background: #ddd;
242 border-radius: 6px;
243 }
244
245 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
246 background: #999;
247 border-radius: 6px;
248 }
249
250 .merchant-quick-view-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb:hover {
251 background: #000;
252 }
253
254 .merchant-quick-view-product-gallery .flex-control-thumbs li {
255 display: -webkit-box !important;
256 display: -ms-flexbox !important;
257 display: flex !important;
258 margin: 0 !important;
259 width: auto !important;
260 }
261
262 .merchant-quick-view-product-gallery .flex-control-thumbs li img {
263 width: 60px !important;
264 }
265
266 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery {
267 display: -webkit-box !important;
268 display: -ms-flexbox !important;
269 display: flex !important;
270 grid-gap: 5px !important;
271 -webkit-box-orient: horizontal !important;
272 -webkit-box-direction: reverse !important;
273 -ms-flex-direction: row-reverse !important;
274 flex-direction: row-reverse !important;
275 }
276
277 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery .flex-control-thumbs {
278 padding-right: 5px !important;
279 -ms-flex-negative: 0 !important;
280 flex-shrink: 0 !important;
281 display: -webkit-box !important;
282 display: -ms-flexbox !important;
283 display: flex !important;
284 grid-gap: 10px !important;
285 -webkit-box-orient: vertical !important;
286 -webkit-box-direction: normal !important;
287 -ms-flex-direction: column !important;
288 flex-direction: column !important;
289 margin: 0 !important;
290 overflow-y: auto !important;
291 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px) !important;
292 }
293
294 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery {
295 display: -webkit-box !important;
296 display: -ms-flexbox !important;
297 display: flex !important;
298 grid-gap: 5px !important;
299 }
300
301 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
302 display: none !important;
303 }
304
305 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery .flex-control-thumbs {
306 padding-right: 5px !important;
307 -ms-flex-negative: 0 !important;
308 flex-shrink: 0 !important;
309 display: -webkit-box !important;
310 display: -ms-flexbox !important;
311 display: flex !important;
312 grid-gap: 10px !important;
313 -webkit-box-orient: vertical !important;
314 -webkit-box-direction: normal !important;
315 -ms-flex-direction: column !important;
316 flex-direction: column !important;
317 margin: 0 !important;
318 overflow-y: auto !important;
319 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px) !important;
320 }
321
322 .merchant-quick-view-thumbs-at-bottom .woocommerce-product-gallery {
323 display: -webkit-box !important;
324 display: -ms-flexbox !important;
325 display: flex !important;
326 grid-gap: 10px !important;
327 -webkit-box-orient: vertical !important;
328 -webkit-box-direction: normal !important;
329 -ms-flex-direction: column !important;
330 flex-direction: column !important;
331 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px) !important;
332 }
333
334 .merchant-quick-view-thumbs-at-bottom .woocommerce-product-gallery .flex-control-thumbs {
335 -ms-flex-negative: 0 !important;
336 flex-shrink: 0 !important;
337 display: -webkit-box !important;
338 display: -ms-flexbox !important;
339 display: flex !important;
340 -ms-flex-wrap: wrap !important;
341 flex-wrap: wrap !important;
342 grid-gap: 10px !important;
343 margin: 0 !important;
344 }
345
346 .merchant-quick-view-summary {
347 display: -webkit-box;
348 display: -ms-flexbox;
349 display: flex;
350 grid-gap: 10px;
351 -webkit-box-orient: vertical;
352 -webkit-box-direction: normal;
353 -ms-flex-direction: column;
354 flex-direction: column;
355 max-height: calc(var(--mrc-qv-modal-height, 500px) - 70px);
356 overflow-y: auto;
357 padding-right: 12px;
358 scrollbar-color: #444 #ddd;
359 }
360
361 .merchant-quick-view-summary .woocommerce-variation-price,
362 .merchant-quick-view-summary .merchant-quick-view-product-price {
363 color: var(--mrc-qv-regular-price-color, #999999);
364 }
365
366 .merchant-quick-view-summary .woocommerce-variation-price del,
367 .merchant-quick-view-summary .merchant-quick-view-product-price del {
368 color: var(--mrc-qv-regular-price-color, #999999);
369 }
370
371 .merchant-quick-view-summary .woocommerce-variation-price ins,
372 .merchant-quick-view-summary .merchant-quick-view-product-price ins {
373 color: var(--mrc-qv-sale-price-color, #212121);
374 margin: 0;
375 font-size: 24px;
376 }
377
378 .merchant-quick-view-summary form.cart,
379 .merchant-quick-view-summary .woocommerce-variation-add-to-cart {
380 display: -webkit-box;
381 display: -ms-flexbox;
382 display: flex;
383 grid-gap: 10px;
384 -ms-flex-wrap: wrap;
385 flex-wrap: wrap;
386 margin: 0 !important;
387 }
388
389 .merchant-quick-view-summary form.cart > *,
390 .merchant-quick-view-summary .woocommerce-variation-add-to-cart > * {
391 -ms-flex-item-align: inherit !important;
392 align-self: inherit !important;
393 justify-self: inherit !important;
394 margin: 0 !important;
395 }
396
397 .merchant-quick-view-summary .quantity {
398 margin: 0;
399 width: auto;
400 }
401
402 .merchant-quick-view-summary > div:empty {
403 display: none;
404 }
405
406 .merchant-quick-view-summary::-webkit-scrollbar {
407 width: 6px;
408 }
409
410 .merchant-quick-view-summary::-webkit-scrollbar-track {
411 background: #ddd;
412 border-radius: 6px;
413 }
414
415 .merchant-quick-view-summary::-webkit-scrollbar-thumb {
416 background: #999;
417 border-radius: 6px;
418 }
419
420 .merchant-quick-view-summary::-webkit-scrollbar-thumb:hover {
421 background: #000;
422 }
423
424 .merchant-quick-view-product-title h1.product_title {
425 margin: 0;
426 font-size: 32px;
427 font-weight: bold;
428 line-height: 1.2;
429 }
430
431 .merchant-quick-view-product-rating .star-rating {
432 margin-left: 0;
433 }
434
435 .merchant-quick-view-product-excerpt p:last-child {
436 margin-bottom: 0;
437 }
438
439 .merchant-quick-view-product-add-to-cart {
440 margin: 10px 0;
441 padding: 20px 0;
442 border-top: 1px solid #eee;
443 border-bottom: 1px solid #eee;
444 }
445
446 .merchant-quick-view-product-add-to-cart .button {
447 text-decoration: none;
448 }
449
450 .merchant-quick-view-product-add-to-cart .button:hover {
451 text-decoration: none;
452 }
453
454 .merchant-quick-view-product-add-to-cart .disabled {
455 -webkit-user-select: none;
456 -moz-user-select: none;
457 -ms-user-select: none;
458 user-select: none;
459 pointer-events: none;
460 }
461
462 .merchant-hide-quantity .quantity {
463 display: none !important;
464 }
465
466 .merchant-quick-view-product-meta .product_meta {
467 display: -webkit-box;
468 display: -ms-flexbox;
469 display: flex;
470 grid-gap: 5px;
471 -webkit-box-orient: vertical;
472 -webkit-box-direction: normal;
473 -ms-flex-direction: column;
474 flex-direction: column;
475 }
476
477 .merchant-quick-view-product-meta .product_meta span {
478 font-weight: bold;
479 }
480
481 .merchant-quick-view-product-meta .product_meta span a,
482 .merchant-quick-view-product-meta .product_meta span span {
483 font-weight: normal;
484 }
485
486 @media (max-width: 767px) {
487 .merchant-quick-view-row {
488 -webkit-box-orient: vertical;
489 -webkit-box-direction: normal;
490 -ms-flex-direction: column;
491 flex-direction: column;
492 }
493 .merchant-quick-view-column {
494 width: 100%;
495 }
496 .merchant-quick-view-content {
497 max-height: 100%;
498 overflow-y: auto;
499 overflow-x: hidden;
500 }
501 .merchant-quick-view-inner {
502 padding: 15px;
503 max-width: 80vw;
504 max-height: 85vh;
505 height: 85vh;
506 }
507 .merchant-quick-view-modal {
508 -webkit-box-align: start;
509 -ms-flex-align: start;
510 align-items: flex-start;
511 padding-top: 7vh;
512 }
513 .merchant-quick-view-summary {
514 max-height: none;
515 overflow: hidden;
516 }
517 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image {
518 max-height: none;
519 }
520 .merchant-quick-view-product-gallery .woocommerce-product-gallery__image img {
521 max-height: none;
522 }
523 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery,
524 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery {
525 display: -webkit-box !important;
526 display: -ms-flexbox !important;
527 display: flex !important;
528 grid-gap: 10px !important;
529 -webkit-box-orient: vertical !important;
530 -webkit-box-direction: normal !important;
531 -ms-flex-direction: column !important;
532 flex-direction: column !important;
533 }
534 .merchant-quick-view-thumbs-at-left .woocommerce-product-gallery .flex-control-thumbs,
535 .merchant-quick-view-thumbs-at-right .woocommerce-product-gallery .flex-control-thumbs {
536 -ms-flex-negative: 0 !important;
537 flex-shrink: 0 !important;
538 display: -webkit-box !important;
539 display: -ms-flexbox !important;
540 display: flex !important;
541 -ms-flex-wrap: wrap !important;
542 flex-wrap: wrap !important;
543 -webkit-box-orient: horizontal !important;
544 -webkit-box-direction: normal !important;
545 -ms-flex-direction: row !important;
546 flex-direction: row !important;
547 grid-gap: 10px !important;
548 margin: 0 !important;
549 padding: 0 !important;
550 overflow: hidden !important;
551 max-height: none !important;
552 }
553 .merchant-quick-view-thumbs-at-bottom .woocommerce-product-gallery {
554 max-height: none !important;
555 }
556 }
557