PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.2.7
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.2.7
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 / volume-discounts / admin / preview.css

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

551 lines 15.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Admin Preview
3 * Volume Discounts
4 *
5 */
6 .merchant-flexible-content-control.volume-discounts-style .layout:not(.active) {
7 border-color: #5c5f62;
8 }
9 .merchant-flexible-content-control.volume-discounts-style .layout .layout-body {
10 grid-gap: unset;
11 }
12 .merchant-flexible-content-control.volume-discounts-style .layout .layout-body .merchant-module-page-setting-field {
13 margin-bottom: 20px;
14 }
15 .merchant-flexible-content-control.volume-discounts-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 position: relative;
21 min-height: 440px;
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: 25px;
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-transform: translateY(-50%);
61 transform: translateY(-50%);
62 -webkit-transition: opacity 300ms, visibility 300ms;
63 transition: opacity 300ms, visibility 300ms;
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 }
311 .merchant-checkout-preview .order-received .upsell-offer .offer-title,
312 .merchant-thank-you-preview .order-received .upsell-offer .offer-title {
313 font-size: 18px;
314 margin-bottom: 15px;
315 padding-bottom: 15px;
316 border-bottom: 1px solid #E3E3E3;
317 }
318 .merchant-checkout-preview .order-received .upsell-offer .product-details,
319 .merchant-thank-you-preview .order-received .upsell-offer .product-details {
320 display: -webkit-box;
321 display: -ms-flexbox;
322 display: flex;
323 gap: 20px;
324 }
325 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
326 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
327 width: 150px;
328 height: 150px;
329 background-color: #ddd;
330 }
331 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info,
332 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info {
333 -webkit-box-flex: 1;
334 -ms-flex-positive: 1;
335 flex-grow: 1;
336 }
337 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .product-name,
338 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .product-name {
339 font-size: 16px;
340 margin: 0 0 5px;
341 }
342 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info p,
343 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info p {
344 font-size: 14px;
345 color: #666;
346 margin: 0 0 10px;
347 }
348 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .add-to-order,
349 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .add-to-order {
350 background-color: #333;
351 color: #fff;
352 border: none;
353 padding: 10px 15px;
354 cursor: pointer;
355 font-size: 12px;
356 font-weight: bold;
357 }
358 @media (max-width: 600px) {
359 .merchant-checkout-preview .order-received .order-details,
360 .merchant-thank-you-preview .order-received .order-details {
361 -webkit-box-orient: vertical;
362 -webkit-box-direction: normal;
363 -ms-flex-direction: column;
364 flex-direction: column;
365 }
366 .merchant-checkout-preview .order-received .order-details .order-info,
367 .merchant-thank-you-preview .order-received .order-details .order-info {
368 -ms-flex-preferred-size: 100%;
369 flex-basis: 100%;
370 }
371 .merchant-checkout-preview .order-received .upsell-offer .product-details,
372 .merchant-thank-you-preview .order-received .upsell-offer .product-details {
373 -webkit-box-orient: vertical;
374 -webkit-box-direction: normal;
375 -ms-flex-direction: column;
376 flex-direction: column;
377 }
378 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
379 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
380 width: 100%;
381 height: 200px;
382 }
383 }
384
385 .tiered-radio,
386 .standard-style {
387 display: none;
388 }
389 .tiered-radio.show,
390 .standard-style.show {
391 display: block;
392 }
393
394 .tiered-radio {
395 border: 3px dashed var(--merchant-item-bg-color, #fcf0f1);
396 padding: 20px;
397 border-radius: 8px;
398 }
399 .tiered-radio .merchant-volume-discounts {
400 max-width: unset;
401 }
402 .tiered-radio .merchant-selected-offer {
403 -webkit-appearance: none;
404 -moz-appearance: none;
405 appearance: none;
406 width: 15px;
407 height: 15px;
408 border: 2px solid #333;
409 border-radius: 50%;
410 outline: none;
411 cursor: pointer;
412 -webkit-transition: all 0.3s ease;
413 transition: all 0.3s ease;
414 position: relative;
415 vertical-align: middle;
416 }
417 .tiered-radio .merchant-selected-offer:checked {
418 background-color: var(--merchant-item-border-color, #d83b3b);
419 border-color: var(--merchant-item-border-color, #d83b3b);
420 }
421 .tiered-radio .merchant-selected-offer:checked::before {
422 display: none;
423 }
424 .tiered-radio .merchant-selected-offer:checked::after {
425 content: "";
426 display: block;
427 width: 8px;
428 height: 8px;
429 background: #fff;
430 border-radius: 50%;
431 position: absolute;
432 top: 50%;
433 left: 50%;
434 -webkit-transform: translate(-50%, -50%);
435 transform: translate(-50%, -50%);
436 }
437 .tiered-radio .merchant-selected-offer:hover {
438 border-color: var(--merchant-item-border-color, #d83b3b);
439 }
440 .tiered-radio .merchant-selected-offer:focus {
441 outline: none;
442 -webkit-box-shadow: none;
443 box-shadow: none;
444 }
445 .tiered-radio .add-to-cart-wrapper {
446 display: -webkit-box;
447 display: -ms-flexbox;
448 display: flex;
449 -webkit-box-pack: end;
450 -ms-flex-pack: end;
451 justify-content: flex-end;
452 }
453 .tiered-radio .add-to-cart-wrapper .merchant-blk-discounts-add-to-cart {
454 width: 100%;
455 background-color: #212121;
456 color: #fff;
457 border-radius: 0;
458 border: none;
459 text-transform: uppercase;
460 text-decoration: none;
461 outline: none;
462 padding: 10px 5px;
463 }
464 .tiered-radio .add-to-cart-wrapper .merchant-blk-discounts-add-to-cart:focus {
465 outline: none;
466 -webkit-box-shadow: none;
467 box-shadow: none;
468 }
469
470 .mrc-preview-single-product-elements {
471 width: 100%;
472 display: -webkit-box;
473 display: -ms-flexbox;
474 display: flex;
475 gap: 25px;
476 }
477 .mrc-preview-single-product-elements .mrc-preview-left-column {
478 width: 30%;
479 min-width: 30%;
480 }
481 .mrc-preview-single-product-elements .mrc-preview-right-column {
482 width: 70%;
483 padding-top: 25px;
484 }
485 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
486 background-color: #f5f5f5;
487 height: 12vw;
488 }
489 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs {
490 width: 100%;
491 display: -webkit-box;
492 display: -ms-flexbox;
493 display: flex;
494 gap: 10px;
495 -ms-flex-wrap: nowrap;
496 flex-wrap: nowrap;
497 }
498 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
499 width: 100%;
500 height: 3vw;
501 background-color: #f5f5f5;
502 margin-top: 10px;
503 }
504
505 .mrc-mw-70 {
506 max-width: 70%;
507 }
508
509 .mrc-mw-30 {
510 max-width: 30%;
511 }
512
513 .mrc-mw-40 {
514 max-width: 40%;
515 }
516
517 .mrc-preview-text-placeholder {
518 background-color: #f5f5f5;
519 height: 13px;
520 }
521 .mrc-preview-text-placeholder + .mrc-preview-text-placeholder, .mrc-preview-text-placeholder + .mrc-preview-addtocart-placeholder {
522 margin-top: 15px;
523 }
524
525 .mrc-preview-addtocart-placeholder {
526 background-color: #e5e5e5;
527 width: 140px;
528 height: 30px;
529 }
530
531 @media (max-width: 991px) {
532 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
533 height: 33vw;
534 }
535 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
536 height: 7vw;
537 }
538 }
539 .mrc-preview-right-column {
540 padding-top: 10px !important;
541 }
542
543 .merchant-volume-discounts {
544 max-width: 350px;
545 margin: 0 !important;
546 }
547
548 .rtl .merchant-volume-discounts-item-label > span {
549 margin-right: 10px;
550 margin-left: unset;
551 }