PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.10.4
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.10.4
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 1.10.4, at assets/css/modules/frequently-bought-together/admin/preview.css

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