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 / volume-discounts / admin / preview.css

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

466 lines 13.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: 320px;
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 .mrc-preview-single-product-elements {
386 width: 100%;
387 display: -webkit-box;
388 display: -ms-flexbox;
389 display: flex;
390 gap: 25px;
391 }
392 .mrc-preview-single-product-elements .mrc-preview-left-column {
393 width: 30%;
394 min-width: 30%;
395 }
396 .mrc-preview-single-product-elements .mrc-preview-right-column {
397 width: 70%;
398 padding-top: 25px;
399 }
400 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
401 background-color: #f5f5f5;
402 height: 12vw;
403 }
404 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs {
405 width: 100%;
406 display: -webkit-box;
407 display: -ms-flexbox;
408 display: flex;
409 gap: 10px;
410 -ms-flex-wrap: nowrap;
411 flex-wrap: nowrap;
412 }
413 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
414 width: 100%;
415 height: 3vw;
416 background-color: #f5f5f5;
417 margin-top: 10px;
418 }
419
420 .mrc-mw-70 {
421 max-width: 70%;
422 }
423
424 .mrc-mw-30 {
425 max-width: 30%;
426 }
427
428 .mrc-mw-40 {
429 max-width: 40%;
430 }
431
432 .mrc-preview-text-placeholder {
433 background-color: #f5f5f5;
434 height: 13px;
435 }
436 .mrc-preview-text-placeholder + .mrc-preview-text-placeholder, .mrc-preview-text-placeholder + .mrc-preview-addtocart-placeholder {
437 margin-top: 15px;
438 }
439
440 .mrc-preview-addtocart-placeholder {
441 background-color: #e5e5e5;
442 width: 140px;
443 height: 30px;
444 }
445
446 @media (max-width: 991px) {
447 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image {
448 height: 33vw;
449 }
450 .mrc-preview-single-product-elements .mrc-preview-product-image-wrapper .mrc-preview-product-image-thumbs .mrc-preview-product-image-thumb {
451 height: 7vw;
452 }
453 }
454 .mrc-preview-right-column {
455 padding-top: 10px !important;
456 }
457
458 .merchant-volume-discounts {
459 max-width: 350px;
460 margin: 0 !important;
461 }
462
463 .rtl .merchant-volume-discounts-item-label > span {
464 margin-right: 10px;
465 margin-left: unset;
466 }