PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.10.5
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.10.5
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 / buy-x-get-y / admin / preview.css

preview.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 1.10.5, at assets/css/modules/buy-x-get-y/admin/preview.css

398 lines 11.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .merchant-module-page-preview-browser-inner {
2 padding: 15px;
3 width: 100%;
4 position: relative;
5 min-height: 430px;
6 margin: 0 auto;
7 }
8
9 .merchant-single-product-preview {
10 display: -webkit-box;
11 display: -ms-flexbox;
12 display: flex;
13 -ms-flex-wrap: nowrap;
14 flex-wrap: nowrap;
15 -webkit-box-align: center;
16 -ms-flex-align: center;
17 align-items: center;
18 -webkit-box-pack: center;
19 -ms-flex-pack: center;
20 justify-content: center;
21 visibility: hidden;
22 opacity: 0;
23 position: absolute;
24 top: 0;
25 left: 0;
26 right: 0;
27 bottom: 0;
28 -webkit-transition: opacity 300ms, visibility 300ms;
29 transition: opacity 300ms, visibility 300ms;
30 }
31 .merchant-single-product-preview.show {
32 visibility: visible;
33 opacity: 1;
34 }
35
36 .merchant-cart-preview {
37 visibility: hidden;
38 opacity: 0;
39 position: absolute;
40 top: 50%;
41 left: 0;
42 right: 0;
43 -webkit-transition: opacity 300ms, visibility 300ms;
44 transition: opacity 300ms, visibility 300ms;
45 -webkit-transform: translateY(-50%);
46 transform: translateY(-50%);
47 }
48 .merchant-cart-preview.show {
49 visibility: visible;
50 opacity: 1;
51 }
52 .merchant-cart-preview .my-cart {
53 max-width: 1200px;
54 margin: 0 auto;
55 padding: 20px;
56 }
57 .merchant-cart-preview .my-cart .cart-title {
58 font-size: 28px;
59 font-weight: bold;
60 margin-bottom: 20px;
61 }
62 .merchant-cart-preview .my-cart .cart-table {
63 width: 100%;
64 border-collapse: collapse;
65 border: 1px solid #e0e0e0;
66 }
67 .merchant-cart-preview .my-cart .cart-table th, .merchant-cart-preview .my-cart .cart-table td {
68 padding: 15px;
69 border: 1px solid #e0e0e0;
70 text-align: left;
71 }
72 .merchant-cart-preview .my-cart .cart-table thead {
73 background-color: #f5f5f5;
74 }
75 .merchant-cart-preview .my-cart .cart-table thead th {
76 font-weight: bold;
77 }
78 .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 {
79 width: 16.66%;
80 }
81 .merchant-cart-preview .my-cart .cart-table .cart-item .product {
82 display: -webkit-box;
83 display: -ms-flexbox;
84 display: flex;
85 -webkit-box-align: start;
86 -ms-flex-align: start;
87 align-items: flex-start;
88 }
89 .merchant-cart-preview .my-cart .cart-table .cart-item .product .remove-item {
90 background: none;
91 border: none;
92 font-size: 20px;
93 cursor: pointer;
94 padding: 0 10px;
95 }
96 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-image {
97 width: 80px;
98 height: 80px;
99 background-color: #ddd;
100 margin-right: 15px;
101 }
102 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .product-name {
103 font-size: 16px;
104 font-weight: bold;
105 margin: 0 0 10px;
106 }
107 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-offer {
108 font-size: 14px;
109 color: #666;
110 margin-bottom: 10px;
111 border-top: 1px solid #eee;
112 padding-top: 10px;
113 }
114 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product {
115 display: -webkit-box;
116 display: -ms-flexbox;
117 display: flex;
118 -webkit-box-align: start;
119 -ms-flex-align: start;
120 align-items: flex-start;
121 border-radius: 4px;
122 }
123 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-image {
124 width: 60px;
125 height: 60px;
126 background-color: #ddd;
127 margin-right: 10px;
128 }
129 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-name {
130 font-size: 14px;
131 font-weight: bold;
132 margin: 0 0 5px;
133 }
134 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info p {
135 font-size: 12px;
136 color: #666;
137 margin: 0 0 5px;
138 }
139 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-options {
140 display: -webkit-box;
141 display: -ms-flexbox;
142 display: flex;
143 gap: 10px;
144 margin-bottom: 10px;
145 }
146 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .upsell-options select {
147 padding: 5px;
148 font-size: 12px;
149 }
150 .merchant-cart-preview .my-cart .cart-table .cart-item .product .product-info .upsell-product .upsell-info .add-to-cart {
151 background-color: #333;
152 color: white;
153 border: none;
154 padding: 5px 10px;
155 font-size: 12px;
156 cursor: pointer;
157 pointer-events: none;
158 }
159 .merchant-cart-preview .my-cart .cart-table .cart-item .price-col .original-price {
160 text-decoration: line-through;
161 color: #999;
162 margin-right: 5px;
163 }
164 .merchant-cart-preview .my-cart .cart-table .cart-item .price-col .discounted-price {
165 font-weight: bold;
166 }
167 .merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control {
168 display: -webkit-box;
169 display: -ms-flexbox;
170 display: flex;
171 -webkit-box-align: center;
172 -ms-flex-align: center;
173 align-items: center;
174 border: 1px solid #e0e0e0;
175 border-radius: 3px;
176 max-width: 100px;
177 }
178 .merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control button {
179 background: none;
180 border: none;
181 padding: 5px 10px;
182 font-size: 16px;
183 cursor: pointer;
184 pointer-events: none;
185 }
186 .merchant-cart-preview .my-cart .cart-table .cart-item .quantity-col .quantity-control input {
187 width: 22px;
188 text-align: center;
189 border: none;
190 font-size: 14px;
191 }
192 .merchant-cart-preview .my-cart .cart-table .cart-item .total-col {
193 font-weight: bold;
194 }
195 @media (max-width: 768px) {
196 .merchant-cart-preview .my-cart .cart-table thead {
197 display: none;
198 }
199 .merchant-cart-preview .my-cart .cart-table tbody, .merchant-cart-preview .my-cart .cart-table tr, .merchant-cart-preview .my-cart .cart-table td {
200 display: block;
201 width: 100%;
202 }
203 .merchant-cart-preview .my-cart .cart-table .cart-item {
204 margin-bottom: 20px;
205 border: 1px solid #e0e0e0;
206 }
207 .merchant-cart-preview .my-cart .cart-table .cart-item td {
208 border: none;
209 position: relative;
210 padding-left: 50%;
211 text-align: right;
212 }
213 .merchant-cart-preview .my-cart .cart-table .cart-item td:before {
214 content: attr(data-label);
215 position: absolute;
216 left: 6px;
217 width: 45%;
218 padding-right: 10px;
219 white-space: nowrap;
220 font-weight: bold;
221 text-align: left;
222 }
223 .merchant-cart-preview .my-cart .cart-table .cart-item .product {
224 padding-left: 15px;
225 text-align: left;
226 }
227 .merchant-cart-preview .my-cart .cart-table .cart-item .product:before {
228 content: none;
229 }
230 }
231
232 .merchant-checkout-preview,
233 .merchant-thank-you-preview {
234 display: none;
235 }
236 .merchant-checkout-preview.show,
237 .merchant-thank-you-preview.show {
238 display: -webkit-box;
239 display: -ms-flexbox;
240 display: flex;
241 }
242 .merchant-checkout-preview .order-received,
243 .merchant-thank-you-preview .order-received {
244 padding: 20px;
245 width: 100%;
246 }
247 .merchant-checkout-preview .order-received .page-title,
248 .merchant-thank-you-preview .order-received .page-title {
249 font-size: 24px;
250 margin-bottom: 10px;
251 }
252 .merchant-checkout-preview .order-received > p,
253 .merchant-thank-you-preview .order-received > p {
254 font-size: 16px;
255 color: #666;
256 margin-bottom: 20px;
257 }
258 .merchant-checkout-preview .order-received .order-details,
259 .merchant-thank-you-preview .order-received .order-details {
260 background-color: #f5f5f5;
261 margin-bottom: 30px;
262 border-radius: 5px;
263 padding: 15px;
264 }
265 .merchant-checkout-preview .order-received .order-details .order-info,
266 .merchant-thank-you-preview .order-received .order-details .order-info {
267 min-width: 200px;
268 border-bottom: 1px solid #e0e0e0;
269 padding-bottom: 15px;
270 }
271 .merchant-checkout-preview .order-received .order-details .order-info:last-child,
272 .merchant-thank-you-preview .order-received .order-details .order-info:last-child {
273 border-bottom: none;
274 padding-bottom: 0;
275 padding-top: 15px;
276 }
277 .merchant-checkout-preview .order-received .order-details .order-info .item-title,
278 .merchant-thank-you-preview .order-received .order-details .order-info .item-title {
279 font-size: 14px;
280 color: #424242;
281 margin: 0 0 5px;
282 }
283 .merchant-checkout-preview .order-received .order-details .order-info p,
284 .merchant-thank-you-preview .order-received .order-details .order-info p {
285 font-size: 16px;
286 margin: 0;
287 color: #212121;
288 }
289 .merchant-checkout-preview .order-received .upsell-offer,
290 .merchant-thank-you-preview .order-received .upsell-offer {
291 border: 1px solid #E3E3E3;
292 padding: 20px;
293 }
294 .merchant-checkout-preview .order-received .upsell-offer .offer-title,
295 .merchant-thank-you-preview .order-received .upsell-offer .offer-title {
296 font-size: 18px;
297 margin-bottom: 15px;
298 padding-bottom: 15px;
299 border-bottom: 1px solid #E3E3E3;
300 }
301 .merchant-checkout-preview .order-received .upsell-offer .product-details,
302 .merchant-thank-you-preview .order-received .upsell-offer .product-details {
303 display: -webkit-box;
304 display: -ms-flexbox;
305 display: flex;
306 gap: 20px;
307 }
308 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
309 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
310 width: 150px;
311 height: 150px;
312 background-color: #ddd;
313 }
314 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info,
315 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info {
316 -webkit-box-flex: 1;
317 -ms-flex-positive: 1;
318 flex-grow: 1;
319 }
320 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .product-name,
321 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .product-name {
322 font-size: 16px;
323 margin: 0 0 5px;
324 }
325 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info p,
326 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info p {
327 font-size: 14px;
328 color: #666;
329 margin: 0 0 10px;
330 }
331 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-info .add-to-order,
332 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-info .add-to-order {
333 background-color: #333;
334 color: #fff;
335 border: none;
336 padding: 10px 15px;
337 cursor: pointer;
338 font-size: 12px;
339 font-weight: bold;
340 }
341 @media (max-width: 600px) {
342 .merchant-checkout-preview .order-received .order-details,
343 .merchant-thank-you-preview .order-received .order-details {
344 -webkit-box-orient: vertical;
345 -webkit-box-direction: normal;
346 -ms-flex-direction: column;
347 flex-direction: column;
348 }
349 .merchant-checkout-preview .order-received .order-details .order-info,
350 .merchant-thank-you-preview .order-received .order-details .order-info {
351 -ms-flex-preferred-size: 100%;
352 flex-basis: 100%;
353 }
354 .merchant-checkout-preview .order-received .upsell-offer .product-details,
355 .merchant-thank-you-preview .order-received .upsell-offer .product-details {
356 -webkit-box-orient: vertical;
357 -webkit-box-direction: normal;
358 -ms-flex-direction: column;
359 flex-direction: column;
360 }
361 .merchant-checkout-preview .order-received .upsell-offer .product-details .product-image,
362 .merchant-thank-you-preview .order-received .upsell-offer .product-details .product-image {
363 width: 100%;
364 height: 200px;
365 }
366 }
367
368 .merchant-flexible-content-control.buy-x-get-y-style .layout:not(.active) {
369 border-color: #5c5f62;
370 }
371 .merchant-flexible-content-control.buy-x-get-y-style .layout .layout-body {
372 grid-gap: unset;
373 }
374 .merchant-flexible-content-control.buy-x-get-y-style .layout .layout-body .merchant-module-page-setting-field {
375 margin-bottom: 20px;
376 }
377 .merchant-flexible-content-control.buy-x-get-y-style .layout .layout-body .merchant-module-page-setting-field-text input {
378 padding: 12px 8px;
379 }
380
381 .merchant-bogo-product-y {
382 border: 1px solid;
383 }
384
385 .merchant-bogo-product-label {
386 white-space: nowrap;
387 }
388
389 .rtl .merchant-bogo-arrow {
390 right: unset;
391 left: -30px;
392 -webkit-transform: rotate(180deg);
393 transform: rotate(180deg);
394 }
395 .rtl .merchant-bogo-product-contents {
396 padding-left: unset;
397 padding-right: 10px;
398 }