PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.10.0
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.10.0
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.10.0, at assets/css/modules/quick-view/quick-view.css

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