PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.3.2
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.3.2
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 / frequently-bought-together / admin / preview.css

preview.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.3.2, at assets/css/modules/frequently-bought-together/admin/preview.css

656 lines 18.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /**
3 * Admin Preview
4 * Frequently Bought Together
5 *
6 */
7 .merchant-flexible-content-control.frequently-bought-together-style .layout:not(.active) {
8 border-color: #5c5f62;
9 }
10 .merchant-flexible-content-control.frequently-bought-together-style .layout .layout-body {
11 grid-gap: unset;
12 }
13 .merchant-flexible-content-control.frequently-bought-together-style .layout .layout-body .merchant-module-page-setting-field {
14 margin-bottom: 20px;
15 }
16 .merchant-flexible-content-control.frequently-bought-together-style .layout .layout-body .merchant-module-page-setting-field-text input {
17 padding: 12px 8px;
18 }
19
20 .merchant-module-page-preview-browser-inner {
21 min-height: 430px;
22 position: relative;
23 }
24
25 .link-do-nothing {
26 pointer-events: none;
27 }
28
29 .merchant-single-product-preview {
30 -webkit-box-flex: 0;
31 -ms-flex-positive: 0;
32 flex-grow: 0;
33 width: 100%;
34 margin: auto;
35 padding: 35px 20px 50px;
36 display: -webkit-box;
37 display: -ms-flexbox;
38 display: flex;
39 visibility: hidden;
40 opacity: 0;
41 position: absolute;
42 top: 0;
43 left: 0;
44 right: 0;
45 bottom: 0;
46 -webkit-transition: opacity 300ms, visibility 300ms;
47 transition: opacity 300ms, visibility 300ms;
48 }
49 .merchant-single-product-preview.show {
50 visibility: visible;
51 opacity: 1;
52 }
53
54 .merchant-cart-preview {
55 visibility: hidden;
56 opacity: 0;
57 position: absolute;
58 top: 50%;
59 left: 0;
60 right: 0;
61 -webkit-transition: opacity 300ms, visibility 300ms;
62 transition: opacity 300ms, visibility 300ms;
63 -webkit-transform: translateY(-50%);
64 transform: translateY(-50%);
65 }
66 .merchant-cart-preview.show {
67 visibility: visible;
68 opacity: 1;
69 }
70 .merchant-cart-preview .my-cart {
71 max-width: 1200px;
72 margin: 0 auto;
73 padding: 20px;
74 }
75 .merchant-cart-preview .my-cart .cart-title {
76 font-size: 28px;
77 font-weight: bold;
78 margin-bottom: 20px;
79 }
80 .merchant-cart-preview .my-cart .cart-table {
81 width: 100%;
82 border-collapse: collapse;
83 border: 1px solid #e0e0e0;
84 }
85 .merchant-cart-preview .my-cart .cart-table th, .merchant-cart-preview .my-cart .cart-table td {
86 padding: 15px;
87 border: 1px solid #e0e0e0;
88 text-align: left;
89 }
90 .merchant-cart-preview .my-cart .cart-table thead {
91 background-color: #f5f5f5;
92 }
93 .merchant-cart-preview .my-cart .cart-table thead th {
94 font-weight: bold;
95 }
96 .merchant-cart-preview .my-cart .cart-table .price-col, .merchant-cart-preview .my-cart .cart-table .quantity-col, .merchant-cart-preview .my-cart .cart-table .total-col {
97 width: 16.66%;
98 }
99 .merchant-cart-preview .my-cart .cart-table .cart-item .product {
100 display: -webkit-box;
101 display: -ms-flexbox;
102 display: flex;
103 -webkit-box-align: start;
104 -ms-flex-align: start;
105 align-items: flex-start;
106 }
107 .merchant-cart-preview .my-cart .cart-table .cart-item .product .remove-item {
108 background: none;
109 border: none;
110 font-size: 20px;
111 cursor: pointer;
112 padding: 0 10px;
113 }
114 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-image {
115 width: 80px;
116 height: 80px;
117 background-color: #ddd;
118 margin-right: 15px;
119 }
120 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .product-name {
121 font-size: 16px;
122 font-weight: bold;
123 margin: 0 0 10px;
124 }
125 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-offer {
126 font-size: 14px;
127 color: #666;
128 margin-bottom: 10px;
129 border-top: 1px solid #eee;
130 padding-top: 10px;
131 }
132 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product {
133 display: -webkit-box;
134 display: -ms-flexbox;
135 display: flex;
136 -webkit-box-align: start;
137 -ms-flex-align: start;
138 align-items: flex-start;
139 border-radius: 4px;
140 }
141 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-image {
142 width: 60px;
143 height: 60px;
144 background-color: #ddd;
145 margin-right: 10px;
146 }
147 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-name {
148 font-size: 14px;
149 font-weight: bold;
150 margin: 0 0 5px;
151 }
152 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info p {
153 font-size: 12px;
154 color: #666;
155 margin: 0 0 5px;
156 }
157 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-options {
158 display: -webkit-box;
159 display: -ms-flexbox;
160 display: flex;
161 gap: 10px;
162 margin-bottom: 10px;
163 }
164 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-options select {
165 padding: 5px;
166 font-size: 12px;
167 }
168 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .add-to-cart {
169 background-color: #333;
170 color: white;
171 border: none;
172 padding: 5px 10px;
173 font-size: 12px;
174 cursor: pointer;
175 pointer-events: none;
176 }
177 .merchant-cart-preview .my-cart .cart-table .cart-item .price-col .original-price {
178 text-decoration: line-through;
179 color: #999;
180 margin-right: 5px;
181 }
182 .merchant-cart-preview .my-cart .cart-table .cart-item .price-col .discounted-price {
183 font-weight: bold;
184 }
185 .merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control {
186 display: -webkit-box;
187 display: -ms-flexbox;
188 display: flex;
189 -webkit-box-align: center;
190 -ms-flex-align: center;
191 align-items: center;
192 border: 1px solid #e0e0e0;
193 border-radius: 3px;
194 max-width: 100px;
195 }
196 .merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control button {
197 background: none;
198 border: none;
199 padding: 5px 10px;
200 font-size: 16px;
201 cursor: pointer;
202 pointer-events: none;
203 }
204 .merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control input {
205 width: 22px;
206 text-align: center;
207 border: none;
208 font-size: 14px;
209 }
210 .merchant-cart-preview .my-cart .cart-table .cart-item .total-col {
211 font-weight: bold;
212 }
213 @media (max-width: 768px) {
214 .merchant-cart-preview .my-cart .cart-table thead {
215 display: none;
216 }
217 .merchant-cart-preview .my-cart .cart-table tbody, .merchant-cart-preview .my-cart .cart-table tr, .merchant-cart-preview .my-cart .cart-table td {
218 display: block;
219 width: 100%;
220 }
221 .merchant-cart-preview .my-cart .cart-table .cart-item {
222 margin-bottom: 20px;
223 border: 1px solid #e0e0e0;
224 }
225 .merchant-cart-preview .my-cart .cart-table .cart-item td {
226 border: none;
227 position: relative;
228 padding-left: 50%;
229 text-align: right;
230 }
231 .merchant-cart-preview .my-cart .cart-table .cart-item td:before {
232 content: attr(data-label);
233 position: absolute;
234 left: 6px;
235 width: 45%;
236 padding-right: 10px;
237 white-space: nowrap;
238 font-weight: bold;
239 text-align: left;
240 }
241 .merchant-cart-preview .my-cart .cart-table .cart-item .product {
242 padding-left: 15px;
243 text-align: left;
244 }
245 .merchant-cart-preview .my-cart .cart-table .cart-item .product:before {
246 content: none;
247 }
248 }
249
250 .merchant-checkout-preview,
251 .merchant-thank-you-preview {
252 display: none;
253 }
254 .merchant-checkout-preview.show,
255 .merchant-thank-you-preview.show {
256 display: -webkit-box;
257 display: -ms-flexbox;
258 display: flex;
259 }
260 .merchant-checkout-preview .order-received,
261 .merchant-thank-you-preview .order-received {
262 padding: 20px;
263 width: 100%;
264 }
265 .merchant-checkout-preview .order-received .page-title,
266 .merchant-thank-you-preview .order-received .page-title {
267 font-size: 24px;
268 margin-bottom: 10px;
269 }
270 .merchant-checkout-preview .order-received > p,
271 .merchant-thank-you-preview .order-received > p {
272 font-size: 16px;
273 color: #666;
274 margin-bottom: 20px;
275 }
276 .merchant-checkout-preview .order-received .order-details,
277 .merchant-thank-you-preview .order-received .order-details {
278 background-color: #f5f5f5;
279 margin-bottom: 30px;
280 border-radius: 5px;
281 padding: 15px;
282 }
283 .merchant-checkout-preview .order-received .order-details .order-info,
284 .merchant-thank-you-preview .order-received .order-details .order-info {
285 min-width: 200px;
286 border-bottom: 1px solid #e0e0e0;
287 padding-bottom: 15px;
288 }
289 .merchant-checkout-preview .order-received .order-details .order-info:last-child,
290 .merchant-thank-you-preview .order-received .order-details .order-info:last-child {
291 border-bottom: none;
292 padding-bottom: 0;
293 padding-top: 15px;
294 }
295 .merchant-checkout-preview .order-received .order-details .order-info .item-title,
296 .merchant-thank-you-preview .order-received .order-details .order-info .item-title {
297 font-size: 14px;
298 color: #424242;
299 margin: 0 0 5px;
300 }
301 .merchant-checkout-preview .order-received .order-details .order-info p,
302 .merchant-thank-you-preview .order-received .order-details .order-info p {
303 font-size: 16px;
304 margin: 0;
305 color: #212121;
306 }
307 .merchant-checkout-preview .order-received .upsell-offer,
308 .merchant-thank-you-preview .order-received .upsell-offer {
309 border: 1px solid #E3E3E3;
310 padding: 20px;
311 position: relative;
312 }
313 .merchant-checkout-preview .order-received .upsell-offer .offer-title,
314 .merchant-thank-you-preview .order-received .upsell-offer .offer-title {
315 font-size: 18px;
316 margin-bottom: 15px;
317 padding-bottom: 15px;
318 border-bottom: 1px solid #E3E3E3;
319 }
320 .merchant-checkout-preview .order-received .upsell-offer .product-details,
321 .merchant-thank-you-preview .order-received .upsell-offer .product-details {
322 display: -webkit-box;
323 display: -ms-flexbox;
324 display: flex;
325 gap: 20px;
326 }
327 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
328 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
329 width: 150px;
330 height: 150px;
331 background-color: #ddd;
332 }
333 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info,
334 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info {
335 -webkit-box-flex: 1;
336 -ms-flex-positive: 1;
337 flex-grow: 1;
338 }
339 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .product-name,
340 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .product-name {
341 font-size: 16px;
342 margin: 0 0 5px;
343 }
344 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info p,
345 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info p {
346 font-size: 14px;
347 color: #666;
348 margin: 0 0 10px;
349 }
350 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .add-to-order,
351 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .add-to-order {
352 background-color: #333;
353 color: #fff;
354 border: none;
355 padding: 10px 15px;
356 cursor: pointer;
357 font-size: 12px;
358 font-weight: bold;
359 }
360 @media (max-width: 600px) {
361 .merchant-checkout-preview .order-received .order-details,
362 .merchant-thank-you-preview .order-received .order-details {
363 -webkit-box-orient: vertical;
364 -webkit-box-direction: normal;
365 -ms-flex-direction: column;
366 flex-direction: column;
367 }
368 .merchant-checkout-preview .order-received .order-details .order-info,
369 .merchant-thank-you-preview .order-received .order-details .order-info {
370 -ms-flex-preferred-size: 100%;
371 flex-basis: 100%;
372 }
373 .merchant-checkout-preview .order-received .upsell-offer .product-details,
374 .merchant-thank-you-preview .order-received .upsell-offer .product-details {
375 -webkit-box-orient: vertical;
376 -webkit-box-direction: normal;
377 -ms-flex-direction: column;
378 flex-direction: column;
379 }
380 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
381 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
382 width: 100%;
383 height: 200px;
384 }
385 }
386 .merchant-checkout-preview .bonus-tip,
387 .merchant-thank-you-preview .bonus-tip {
388 font-size: 12px;
389 border-left: 2px solid #c8c8c8;
390 padding: 7px;
391 line-height: 1.4;
392 margin-top: 15px;
393 background-color: #f6f6f6;
394 display: table;
395 border-top-right-radius: 3px;
396 border-bottom-right-radius: 3px;
397 }
398 .merchant-checkout-preview .merchant-tooltip,
399 .merchant-thank-you-preview .merchant-tooltip {
400 position: absolute;
401 top: 10px;
402 right: 20px;
403 }
404 .merchant-checkout-preview .merchant-tooltip:hover .tooltip-text,
405 .merchant-thank-you-preview .merchant-tooltip:hover .tooltip-text {
406 visibility: visible;
407 opacity: 1;
408 }
409 .merchant-checkout-preview .merchant-tooltip .tooltip-icon,
410 .merchant-thank-you-preview .merchant-tooltip .tooltip-icon {
411 color: #a1a1a1;
412 font-size: 27px;
413 cursor: pointer;
414 height: 45px;
415 }
416 .merchant-checkout-preview .merchant-tooltip .tooltip-icon svg,
417 .merchant-thank-you-preview .merchant-tooltip .tooltip-icon svg {
418 width: 35px;
419 height: 35px;
420 }
421 .merchant-checkout-preview .merchant-tooltip .tooltip-text,
422 .merchant-thank-you-preview .merchant-tooltip .tooltip-text {
423 position: absolute;
424 width: 350px;
425 top: 100%;
426 right: 0;
427 background-color: #202020;
428 color: #fff;
429 padding: 10px;
430 font-size: 12px;
431 line-height: 1.4;
432 border-radius: 5px;
433 visibility: hidden;
434 opacity: 0;
435 -webkit-transition: 300ms;
436 transition: 300ms;
437 }
438 .merchant-checkout-preview .merchant-tooltip .tooltip-text:before,
439 .merchant-thank-you-preview .merchant-tooltip .tooltip-text:before {
440 content: "";
441 position: absolute;
442 top: -7px;
443 right: 11px;
444 width: 0;
445 height: 0;
446 border-left: 7px solid transparent;
447 border-right: 7px solid transparent;
448 border-bottom: 7px solid #202020;
449 }
450
451 .mrc-preview-single-product-elements {
452 width: 100%;
453 display: -webkit-box;
454 display: -ms-flexbox;
455 display: flex;
456 gap: 25px;
457 }
458 .mrc-preview-single-product-elements .mrc-preview-left-column {
459 width: 30%;
460 min-width: 30%;
461 }
462 .mrc-preview-single-product-elements .mrc-preview-right-column {
463 width: 70%;
464 padding-top: 25px;
465 }
466 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
467 background-color: #f5f5f5;
468 height: 12vw;
469 }
470 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs {
471 width: 100%;
472 display: -webkit-box;
473 display: -ms-flexbox;
474 display: flex;
475 gap: 10px;
476 -ms-flex-wrap: nowrap;
477 flex-wrap: nowrap;
478 }
479 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
480 width: 100%;
481 height: 3vw;
482 background-color: #f5f5f5;
483 margin-top: 10px;
484 }
485
486 .mrc-mw-70 {
487 max-width: 70%;
488 }
489
490 .mrc-mw-30 {
491 max-width: 30%;
492 }
493
494 .mrc-mw-40 {
495 max-width: 40%;
496 }
497
498 .mrc-preview-text-placeholder {
499 background-color: #f5f5f5;
500 height: 13px;
501 }
502 .mrc-preview-text-placeholder + .mrc-preview-text-placeholder, .mrc-preview-text-placeholder + .mrc-preview-addtocart-placeholder {
503 margin-top: 15px;
504 }
505
506 .mrc-preview-addtocart-placeholder {
507 background-color: #e5e5e5;
508 width: 140px;
509 height: 30px;
510 }
511
512 @media (max-width: 991px) {
513 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
514 height: 33vw;
515 }
516 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
517 height: 7vw;
518 }
519 }
520 .merchant-frequently-bought-together {
521 margin: 0 auto;
522 width: 100%;
523 }
524
525 .merchant-frequently-bought-together-bundle {
526 display: -webkit-box;
527 display: -ms-flexbox;
528 display: flex;
529 gap: 15px;
530 }
531
532 .merchant-frequently-bought-together-bundle-products {
533 display: -webkit-box;
534 display: -ms-flexbox;
535 display: flex;
536 gap: 25px;
537 }
538
539 .merchant-frequently-bought-together-bundle-offer .merchant-frequently-bought-together-bundle-total-price {
540 display: -webkit-box;
541 display: -ms-flexbox;
542 display: flex;
543 -webkit-box-align: center;
544 -ms-flex-align: center;
545 align-items: center;
546 gap: 10px;
547 }
548 .merchant-frequently-bought-together-bundle-offer .merchant-frequently-bought-together-bundle-total-price ins {
549 text-decoration: none;
550 font-weight: 700;
551 }
552
553 .merchant-frequently-bought-together-bundle-product {
554 padding: 0;
555 max-width: 140px;
556 border: none;
557 margin-right: 10px;
558 position: relative;
559 }
560 .merchant-frequently-bought-together-bundle-product .optional-product {
561 position: absolute;
562 top: 10px;
563 right: 5px;
564 -webkit-appearance: none;
565 -moz-appearance: none;
566 appearance: none;
567 width: 20px;
568 height: 20px;
569 border: 1px solid var(--merchant-fbt-checkbox-color, #000);
570 background: #fff;
571 cursor: pointer;
572 border-radius: var(--merchant-fbt-checkbox-border-radius, 0);
573 }
574 .merchant-frequently-bought-together-bundle-product .optional-product:focus {
575 outline: none;
576 -webkit-box-shadow: none;
577 box-shadow: none;
578 border: 1px solid var(--merchant-fbt-checkbox-color, #000);
579 }
580 .merchant-frequently-bought-together-bundle-product .optional-product:checked {
581 background: var(--merchant-fbt-checkbox-color, #000);
582 }
583 .merchant-frequently-bought-together-bundle-product .optional-product:checked:before {
584 display: none;
585 }
586 .merchant-frequently-bought-together-bundle-product .optional-product:checked:after {
587 content: "";
588 color: #fff;
589 position: absolute;
590 top: 50%;
591 left: 50%;
592 -webkit-transform: translate(-50%, -50%);
593 transform: translate(-50%, -50%);
594 font-size: 14px;
595 }
596
597 .merchant-frequently-bought-together-bundle-product img,
598 .merchant-frequently-bought-together-bundle-product:not(:first-child) img {
599 width: 100%;
600 height: auto;
601 }
602
603 .merchant-frequently-bought-together-bundle-product:not(:first-child) {
604 border: 1px solid;
605 }
606
607 @media (max-width: 1300px) {
608 .merchant-frequently-bought-together-bundle-product {
609 max-width: 120px;
610 }
611 }
612 .merchant-frequently-bought-together-bundle-product-plus {
613 right: -34px;
614 font-size: 20px;
615 width: 25px;
616 height: 25px;
617 }
618
619 .plus-icon {
620 position: relative;
621 margin-right: 10px;
622 }
623 .plus-icon .bundle-product-plus {
624 position: absolute;
625 right: 50%;
626 top: 60px;
627 -webkit-transform: translateX(50%);
628 transform: translateX(50%);
629 font-size: 25px;
630 background-color: #212121;
631 color: #fff;
632 border-radius: 50%;
633 width: 35px;
634 height: 35px;
635 z-index: 2;
636 display: -webkit-box;
637 display: -ms-flexbox;
638 display: flex;
639 -webkit-box-pack: center;
640 -ms-flex-pack: center;
641 justify-content: center;
642 -webkit-box-align: center;
643 -ms-flex-align: center;
644 align-items: center;
645 font-family: arial, serif;
646 }
647
648 .merchant-frequently-bought-together-bundles .woocommerce-loop-product__title a {
649 text-decoration: none;
650 }
651 .merchant-frequently-bought-together-bundles .merchant-add-bundle-to-cart {
652 background-color: #212121;
653 color: #FFF;
654 border-color: #212121;
655 pointer-events: none;
656 }