PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 1.10.1
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v1.10.1
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 / admin / metabox.css

metabox.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 1.10.1, at assets/css/admin/metabox.css

1,103 lines 26.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .merchant-metabox {
2 display: -webkit-box;
3 display: -ms-flexbox;
4 display: flex;
5 padding: 20px;
6 }
7
8 .merchant-metabox-tabs {
9 display: -webkit-box;
10 display: -ms-flexbox;
11 display: flex;
12 -webkit-box-orient: vertical;
13 -webkit-box-direction: normal;
14 -ms-flex-direction: column;
15 flex-direction: column;
16 width: 225px;
17 margin-left: -20px;
18 }
19 .merchant-metabox-tabs a {
20 position: relative;
21 display: -webkit-box;
22 display: -ms-flexbox;
23 display: flex;
24 font-size: 16px;
25 line-height: 24px;
26 font-weight: 600;
27 color: #1a1a1a;
28 padding: 9px 16px;
29 text-decoration: none;
30 -webkit-transition: all 0.1s;
31 transition: all 0.1s;
32 }
33 .merchant-metabox-tabs a:before {
34 content: "";
35 position: absolute;
36 top: 0;
37 left: 0;
38 width: 4px;
39 height: 100%;
40 border-radius: 0 4px 4px 0;
41 opacity: 0;
42 visibility: hidden;
43 -webkit-transition: ease opacity 200ms;
44 transition: ease opacity 200ms;
45 }
46 .merchant-metabox-tabs a:focus, .merchant-metabox-tabs a:active, .merchant-metabox-tabs a:hover {
47 color: #757575;
48 outline: none;
49 -webkit-box-shadow: none;
50 box-shadow: none;
51 }
52 .merchant-metabox-tabs a:focus:before, .merchant-metabox-tabs a:active:before, .merchant-metabox-tabs a:hover:before {
53 background-color: #e1e1e1;
54 opacity: 1;
55 visibility: visible;
56 }
57 .merchant-metabox-tabs a.active {
58 color: #3858E9;
59 }
60 .merchant-metabox-tabs a.active:before {
61 background-color: #3858E9;
62 opacity: 1;
63 visibility: visible;
64 }
65
66 .merchant-metabox-contents {
67 -webkit-box-flex: 1;
68 -ms-flex: 1;
69 flex: 1;
70 display: -webkit-box;
71 display: -ms-flexbox;
72 display: flex;
73 -webkit-box-orient: vertical;
74 -webkit-box-direction: normal;
75 -ms-flex-direction: column;
76 flex-direction: column;
77 border: 1px solid #F0F0F1;
78 border-radius: 4px;
79 }
80
81 .merchant-metabox-content {
82 display: -webkit-box;
83 display: -ms-flexbox;
84 display: flex;
85 -webkit-box-orient: vertical;
86 -webkit-box-direction: normal;
87 -ms-flex-direction: column;
88 flex-direction: column;
89 }
90 .merchant-metabox-content:not(.active) {
91 display: none;
92 }
93
94 .merchant-metabox-content-title {
95 display: none;
96 margin: 0;
97 padding: 10px 15px;
98 color: #1e1e1e;
99 background-color: #eee;
100 }
101
102 .merchant-metabox-field {
103 display: -webkit-box;
104 display: -ms-flexbox;
105 display: flex;
106 -ms-flex-wrap: wrap;
107 flex-wrap: wrap;
108 grid-gap: 20px;
109 padding: 20px;
110 }
111 .merchant-metabox-field:first-child {
112 border-top: none;
113 }
114 .merchant-metabox-field:last-child {
115 border-bottom: none;
116 }
117
118 .merchant-metabox-field-hidden {
119 display: none;
120 }
121
122 .merchant-metabox-field-separator-before {
123 border-top: 1px solid #eee;
124 }
125
126 .merchant-metabox-field-separator-after {
127 border-bottom: 1px solid #eee;
128 }
129
130 .merchant-metabox-field-inline {
131 -webkit-box-orient: vertical;
132 -webkit-box-direction: normal;
133 -ms-flex-direction: column;
134 flex-direction: column;
135 }
136
137 .merchant-metabox-field-title {
138 width: 30%;
139 max-width: 275px;
140 display: -webkit-box;
141 display: -ms-flexbox;
142 display: flex;
143 -ms-flex-wrap: wrap;
144 flex-wrap: wrap;
145 grid-gap: 5px;
146 -webkit-box-orient: vertical;
147 -webkit-box-direction: normal;
148 -ms-flex-direction: column;
149 flex-direction: column;
150 }
151 .merchant-metabox-field-title h4 {
152 margin: 0;
153 color: #1e1e1e;
154 }
155 .merchant-metabox-field-title small {
156 opacity: 0.75;
157 }
158 .merchant-metabox-field-title small code {
159 font-size: 1em;
160 }
161
162 .merchant-metabox-field-content {
163 -webkit-box-flex: 1;
164 -ms-flex: 1;
165 flex: 1;
166 }
167
168 .merchant-metabox-field-description {
169 font-size: 80%;
170 opacity: 0.75;
171 margin-top: 10px;
172 }
173 .merchant-metabox-field-description code {
174 font-size: 1em;
175 }
176 .merchant-metabox-field-description a {
177 color: #3858E9;
178 }
179 .merchant-metabox-field-description a:focus {
180 -webkit-box-shadow: none;
181 box-shadow: none;
182 }
183
184 .merchant-metabox-field-text input {
185 width: 50%;
186 max-width: 100%;
187 }
188
189 .merchant-metabox-field-number input {
190 width: 100px;
191 max-width: 100%;
192 }
193
194 .merchant-metabox-field-textarea textarea {
195 width: 100%;
196 max-width: 100%;
197 min-height: 100px;
198 vertical-align: top;
199 }
200
201 .merchant-metabox-field-checkbox label {
202 display: -webkit-box;
203 display: -ms-flexbox;
204 display: flex;
205 grid-gap: 6px;
206 -webkit-box-align: center;
207 -ms-flex-align: center;
208 align-items: center;
209 -webkit-user-select: none;
210 -moz-user-select: none;
211 -ms-user-select: none;
212 user-select: none;
213 }
214 .merchant-metabox-field-checkbox label input {
215 margin: 0;
216 }
217
218 .merchant-metabox-field-switcher label {
219 display: -webkit-inline-box;
220 display: -ms-inline-flexbox;
221 display: inline-flex;
222 grid-gap: 6px;
223 -webkit-box-align: center;
224 -ms-flex-align: center;
225 align-items: center;
226 -webkit-user-select: none;
227 -moz-user-select: none;
228 -ms-user-select: none;
229 user-select: none;
230 }
231 .merchant-metabox-field-switcher i {
232 position: relative;
233 overflow: hidden;
234 display: -webkit-box;
235 display: -ms-flexbox;
236 display: flex;
237 width: 45px;
238 height: 22px;
239 background-color: #c8c8c8;
240 border-radius: 20px;
241 -webkit-transition: all 0.2s;
242 transition: all 0.2s;
243 }
244 .merchant-metabox-field-switcher i:before {
245 content: "";
246 position: absolute;
247 display: block;
248 width: 14px;
249 height: 14px;
250 top: 4px;
251 left: 6px;
252 background-color: #fff;
253 border-radius: 20px;
254 -webkit-transition: all 0.1s;
255 transition: all 0.1s;
256 }
257 .merchant-metabox-field-switcher input {
258 display: none;
259 }
260 .merchant-metabox-field-switcher input:checked + i {
261 background-color: #3858E9;
262 }
263 .merchant-metabox-field-switcher input:checked + i:before {
264 left: 26px;
265 }
266
267 .merchant-metabox-field-choices-images {
268 display: -webkit-box;
269 display: -ms-flexbox;
270 display: flex;
271 -ms-flex-wrap: wrap;
272 flex-wrap: wrap;
273 grid-gap: 2px;
274 }
275 .merchant-metabox-field-choices-images label {
276 display: -webkit-box;
277 display: -ms-flexbox;
278 display: flex;
279 -webkit-user-select: none;
280 -moz-user-select: none;
281 -ms-user-select: none;
282 user-select: none;
283 }
284 .merchant-metabox-field-choices-images figure {
285 padding: 4px;
286 margin: 0;
287 border: 2px solid transparent;
288 border-radius: 4px;
289 -webkit-transition: all 0.2s;
290 transition: all 0.2s;
291 max-width: 80px;
292 max-height: 80px;
293 }
294 .merchant-metabox-field-choices-images figure img {
295 width: 100%;
296 vertical-align: top;
297 }
298 .merchant-metabox-field-choices-images input {
299 display: none;
300 }
301 .merchant-metabox-field-choices-images input:checked + figure {
302 border-color: #1e1e1e;
303 }
304 .merchant-metabox-field-choices-images input:checked + figure:before {
305 left: 26px;
306 }
307
308 .merchant-metabox-field-uploads-thumbnail {
309 border-right: 1px solid #e5e5e5;
310 margin-right: 10px;
311 padding-right: 10px;
312 position: relative;
313 }
314
315 .merchant-metabox-field-uploads-thumbnail-remove {
316 position: absolute;
317 left: -8px;
318 top: -7px;
319 background: white;
320 border-radius: 50%;
321 color: #d58f90;
322 font-size: 18px;
323 width: 18px;
324 height: 18px;
325 }
326 .merchant-metabox-field-uploads-thumbnail-remove:hover {
327 color: #a00;
328 }
329
330 .merchant-metabox-field-uploads-thumbnail-upload {
331 display: -webkit-box;
332 display: -ms-flexbox;
333 display: flex;
334 -webkit-box-pack: center;
335 -ms-flex-pack: center;
336 justify-content: center;
337 -webkit-box-align: center;
338 -ms-flex-align: center;
339 align-items: center;
340 width: 40px;
341 height: 40px;
342 border: 1px solid #e5e5e5;
343 -webkit-box-sizing: border-box;
344 box-sizing: border-box;
345 color: #d4d4d4;
346 font-size: 25px;
347 font-weight: 200;
348 text-decoration: none;
349 }
350 .merchant-metabox-field-uploads-thumbnail-upload img {
351 width: 100%;
352 height: 100%;
353 -o-object-fit: cover;
354 object-fit: cover;
355 -o-object-position: center center;
356 object-position: center center;
357 }
358
359 .merchant-metabox-field-repeater-move,
360 .merchant-metabox-field-repeater-remove,
361 .merchant-metabox-field-flexible-content-move,
362 .merchant-metabox-field-flexible-content-remove {
363 cursor: pointer;
364 padding: 5px;
365 width: auto;
366 height: auto;
367 -webkit-user-select: none;
368 -moz-user-select: none;
369 -ms-user-select: none;
370 user-select: none;
371 color: #1e1e1e;
372 opacity: 0.5;
373 -webkit-transition: all 0.2s;
374 transition: all 0.2s;
375 }
376 .merchant-metabox-field-repeater-move:hover,
377 .merchant-metabox-field-repeater-remove:hover,
378 .merchant-metabox-field-flexible-content-move:hover,
379 .merchant-metabox-field-flexible-content-remove:hover {
380 opacity: 1;
381 }
382
383 .merchant-metabox-field-repeater-remove,
384 .merchant-metabox-field-flexible-content-remove {
385 color: #a00;
386 font-size: 18px;
387 }
388
389 .merchant-metabox-field-uploads-content,
390 .merchant-metabox-field-repeater-content {
391 display: -webkit-box;
392 display: -ms-flexbox;
393 display: flex;
394 -webkit-box-orient: vertical;
395 -webkit-box-direction: normal;
396 -ms-flex-direction: column;
397 flex-direction: column;
398 -webkit-box-align: start;
399 -ms-flex-align: start;
400 align-items: flex-start;
401 }
402 .merchant-metabox-field-uploads-content ul,
403 .merchant-metabox-field-repeater-content ul {
404 margin: 0;
405 padding: 0;
406 list-style: none;
407 width: 100%;
408 }
409 .merchant-metabox-field-uploads-content ul li,
410 .merchant-metabox-field-repeater-content ul li {
411 margin: 0;
412 padding: 0;
413 display: -webkit-box;
414 display: -ms-flexbox;
415 display: flex;
416 -webkit-box-align: center;
417 -ms-flex-align: center;
418 align-items: center;
419 -webkit-box-pack: start;
420 -ms-flex-pack: start;
421 justify-content: flex-start;
422 margin-bottom: 10px;
423 }
424 .merchant-metabox-field-uploads-content ul li.hidden,
425 .merchant-metabox-field-repeater-content ul li.hidden {
426 display: none;
427 }
428 .merchant-metabox-field-uploads-content ul li span,
429 .merchant-metabox-field-repeater-content ul li span {
430 font-size: 20px;
431 padding: 5px;
432 width: auto;
433 height: auto;
434 -webkit-user-select: none;
435 -moz-user-select: none;
436 -ms-user-select: none;
437 user-select: none;
438 }
439 .merchant-metabox-field-uploads-content input,
440 .merchant-metabox-field-repeater-content input {
441 width: 50%;
442 max-width: 100%;
443 max-width: 100%;
444 margin-right: 5px;
445 }
446 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field,
447 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field {
448 display: -webkit-box;
449 display: -ms-flexbox;
450 display: flex;
451 margin-right: 5px;
452 }
453 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field input,
454 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field input {
455 width: 100%;
456 }
457 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field span,
458 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field span {
459 font-size: 14px;
460 }
461 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-fields,
462 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-fields {
463 display: -webkit-box;
464 display: -ms-flexbox;
465 display: flex;
466 -webkit-box-align: center;
467 -ms-flex-align: center;
468 align-items: center;
469 -webkit-box-pack: start;
470 -ms-flex-pack: start;
471 justify-content: flex-start;
472 }
473
474 .merchant-metabox-field-size-chart ul {
475 margin: 0;
476 padding: 0;
477 list-style: none;
478 }
479 .merchant-metabox-field-size-chart ul li {
480 margin-bottom: 20px;
481 }
482 .merchant-metabox-field-size-chart ul li.hidden {
483 display: none;
484 }
485 .merchant-metabox-field-size-chart table {
486 width: 100%;
487 border-spacing: 0;
488 border-collapse: collapse;
489 background-color: #fff;
490 }
491 .merchant-metabox-field-size-chart table th,
492 .merchant-metabox-field-size-chart table td {
493 padding: 15px;
494 border: 1px solid rgba(0, 0, 0, 0.1);
495 }
496 .merchant-metabox-field-size-chart table th:last-child,
497 .merchant-metabox-field-size-chart table td:last-child {
498 width: 1%;
499 min-width: 75px;
500 }
501 .merchant-metabox-field-size-chart table thead {
502 text-align: center;
503 }
504 .merchant-metabox-field-size-chart table thead label {
505 display: -webkit-inline-box;
506 display: -ms-inline-flexbox;
507 display: inline-flex;
508 grid-gap: 5px;
509 -webkit-box-pack: center;
510 -ms-flex-pack: center;
511 justify-content: center;
512 -webkit-box-align: center;
513 -ms-flex-align: center;
514 align-items: center;
515 }
516 .merchant-metabox-field-size-chart table tbody input {
517 width: 100%;
518 max-width: 100%;
519 text-align: center;
520 }
521 .merchant-metabox-field-size-chart table tbody tr:nth-child(2) td:not(:last-child) {
522 background-color: #eee;
523 }
524 .merchant-metabox-field-size-chart table tfoot {
525 text-align: right;
526 }
527 .merchant-metabox-field-size-chart .merchant-buttons {
528 display: -webkit-box;
529 display: -ms-flexbox;
530 display: flex;
531 grid-gap: 10px;
532 -webkit-box-pack: center;
533 -ms-flex-pack: center;
534 justify-content: center;
535 -webkit-box-align: center;
536 -ms-flex-align: center;
537 align-items: center;
538 }
539 .merchant-metabox-field-size-chart .merchant-buttons a {
540 display: -webkit-box;
541 display: -ms-flexbox;
542 display: flex;
543 -webkit-box-pack: center;
544 -ms-flex-pack: center;
545 justify-content: center;
546 -webkit-box-align: center;
547 -ms-flex-align: center;
548 align-items: center;
549 width: 16px;
550 height: 16px;
551 font-size: 14px;
552 line-height: 1em;
553 font-weight: bold;
554 padding: 2px;
555 border-radius: 4px;
556 -webkit-user-select: none;
557 -moz-user-select: none;
558 -ms-user-select: none;
559 user-select: none;
560 -webkit-box-shadow: none;
561 box-shadow: none;
562 text-decoration: none;
563 }
564 .merchant-metabox-field-size-chart .merchant-buttons a:active {
565 opacity: 0.5;
566 }
567 .merchant-metabox-field-size-chart .merchant-add-col,
568 .merchant-metabox-field-size-chart .merchant-add-row {
569 color: #27ae60;
570 background-color: #d5f5e3;
571 }
572 .merchant-metabox-field-size-chart .merchant-del-col,
573 .merchant-metabox-field-size-chart .merchant-del-row {
574 color: #e74c3c;
575 background-color: #f2d7d5;
576 }
577 .merchant-metabox-field-size-chart .merchant-remove {
578 color: #fff;
579 border-color: #d50204;
580 background: #d50204;
581 }
582 .merchant-metabox-field-size-chart .merchant-remove:hover, .merchant-metabox-field-size-chart .merchant-remove:focus {
583 border-color: #b32d2e;
584 background: #b32d2e;
585 }
586 .merchant-metabox-field-size-chart .merchant-remove:focus {
587 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
588 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
589 }
590 .merchant-metabox-field-size-chart .merchant-remove:active {
591 border-color: #b32d2e;
592 background: #b32d2e;
593 }
594 .merchant-metabox-field-size-chart .merchant-duplicate {
595 display: -webkit-box;
596 display: -ms-flexbox;
597 display: flex;
598 -webkit-box-pack: center;
599 -ms-flex-pack: center;
600 justify-content: center;
601 -webkit-box-align: center;
602 -ms-flex-align: center;
603 align-items: center;
604 -webkit-user-select: none;
605 -moz-user-select: none;
606 -ms-user-select: none;
607 user-select: none;
608 -webkit-box-shadow: none;
609 box-shadow: none;
610 text-decoration: none;
611 color: #000;
612 -webkit-transition: all 0.2s;
613 transition: all 0.2s;
614 }
615 .merchant-metabox-field-size-chart .merchant-duplicate:hover, .merchant-metabox-field-size-chart .merchant-duplicate:active {
616 opacity: 0.5;
617 }
618 .merchant-metabox-field-size-chart .merchant-duplicate i {
619 width: auto;
620 height: auto;
621 font-size: 20px;
622 }
623
624 .merchant-metabox-field-media figure {
625 display: -webkit-box;
626 display: -ms-flexbox;
627 display: flex;
628 -webkit-box-pack: center;
629 -ms-flex-pack: center;
630 justify-content: center;
631 -webkit-box-align: center;
632 -ms-flex-align: center;
633 align-items: center;
634 margin: 0;
635 padding: 5px;
636 width: 75px;
637 height: 75px;
638 border: 1px solid #e5e5e5;
639 background-color: #fff;
640 -webkit-box-sizing: border-box;
641 box-sizing: border-box;
642 }
643 .merchant-metabox-field-media figure img {
644 max-width: 100%;
645 height: auto;
646 }
647 .merchant-metabox-field-media input {
648 display: none;
649 }
650 .merchant-metabox-field-media .merchant-button-remove {
651 color: #b32d2e;
652 border-color: #b32d2e;
653 background: #fff8f8;
654 }
655 .merchant-metabox-field-media .merchant-button-remove:hover, .merchant-metabox-field-media .merchant-button-remove:focus, .merchant-metabox-field-media .merchant-button-remove:active {
656 color: #b32d2e;
657 border-color: #b32d2e;
658 background: #fff0f0;
659 }
660 .merchant-metabox-field-media .merchant-button-remove:focus {
661 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
662 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
663 }
664
665 .merchant-metabox-field-select-ajax select {
666 display: none;
667 width: 100%;
668 }
669 .merchant-metabox-field-select-ajax ul {
670 margin: 0;
671 padding: 0;
672 list-style: none;
673 vertical-align: top;
674 }
675 .merchant-metabox-field-select-ajax ul li {
676 margin: 0;
677 padding: 0;
678 }
679 .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple .select2-selection__rendered {
680 width: auto;
681 display: inline;
682 padding: 0;
683 }
684 .merchant-metabox-field-select-ajax .select2-container .select2-search--inline .select2-search__field {
685 margin: 0;
686 padding: 0;
687 }
688 .merchant-metabox-field-select-ajax .select2-container--default.select2-container--focus .select2-selection--multiple {
689 border-color: #aaa;
690 }
691 .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple {
692 padding: 0 5px;
693 }
694 .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple .select2-selection__choice {
695 margin-left: 0;
696 }
697 .merchant-metabox-field-select-ajax .merchant-select2-clear {
698 display: block;
699 width: 100%;
700 clear: both;
701 }
702 .merchant-metabox-field-select-ajax .merchant-metabox-field-content {
703 min-height: 32px;
704 }
705
706 .merchant-metabox-field-wc-attributes ul {
707 margin: 0;
708 padding: 0;
709 list-style: none;
710 display: -webkit-box;
711 display: -ms-flexbox;
712 display: flex;
713 grid-gap: 5px;
714 -webkit-box-orient: vertical;
715 -webkit-box-direction: normal;
716 -ms-flex-direction: column;
717 flex-direction: column;
718 }
719 .merchant-metabox-field-wc-attributes ul li {
720 margin: 0;
721 padding: 0;
722 display: -webkit-box;
723 display: -ms-flexbox;
724 display: flex;
725 max-width: 300px;
726 -webkit-box-align: center;
727 -ms-flex-align: center;
728 align-items: center;
729 border: 1px solid #e5e5e5;
730 background-color: #fdfdfd;
731 border-radius: 3px;
732 }
733 .merchant-metabox-field-wc-attributes ul li:hover {
734 border-color: #ccc;
735 }
736 .merchant-metabox-field-wc-attributes ul li label {
737 display: -webkit-box;
738 display: -ms-flexbox;
739 display: flex;
740 grid-gap: 5px;
741 -webkit-box-align: center;
742 -ms-flex-align: center;
743 align-items: center;
744 -webkit-box-flex: 1;
745 -ms-flex: 1;
746 flex: 1;
747 padding: 8px;
748 -webkit-user-select: none;
749 -moz-user-select: none;
750 -ms-user-select: none;
751 user-select: none;
752 }
753 .merchant-metabox-field-wc-attributes ul li label input {
754 margin: 0;
755 }
756 .merchant-metabox-field-wc-attributes ul li .merchant-sortable-move {
757 cursor: pointer;
758 padding: 8px;
759 }
760
761 .merchant-metabox-field-code-editor .CodeMirror-wrap {
762 border: 1px solid #eee;
763 }
764
765 .merchant-metabox-field-media-content {
766 display: -webkit-box;
767 display: -ms-flexbox;
768 display: flex;
769 grid-gap: 10px;
770 -webkit-box-align: center;
771 -ms-flex-align: center;
772 align-items: center;
773 }
774
775 .merchant-metabox-field-media-button {
776 -webkit-box-flex: 1;
777 -ms-flex: 1;
778 flex: 1;
779 display: -webkit-box;
780 display: -ms-flexbox;
781 display: flex;
782 grid-gap: 5px;
783 }
784
785 .merchant-metabox-field-no-padding {
786 padding-top: 0;
787 padding-bottom: 0;
788 }
789
790 body:not(.block-editor-page) #merchant_metabox .inside {
791 margin: 0;
792 padding: 0;
793 }
794
795 #side-sortables .merchant-metabox-tabs {
796 display: none;
797 }
798 #side-sortables .merchant-metabox-content-title,
799 #side-sortables .merchant-metabox-content:not(.active) {
800 display: block;
801 }
802 #side-sortables .merchant-metabox-field {
803 grid-gap: 8px;
804 padding: 10px 15px;
805 -webkit-box-orient: vertical;
806 -webkit-box-direction: normal;
807 -ms-flex-direction: column;
808 flex-direction: column;
809 }
810 #side-sortables .merchant-metabox-field-title {
811 width: auto;
812 font-size: 12px;
813 }
814 #side-sortables .merchant-metabox-field-title:empty {
815 display: none;
816 }
817 #side-sortables .merchant-metabox-contents {
818 border-left: none;
819 border-right: none;
820 }
821 #side-sortables #merchant_metabox .postbox-header {
822 border-top: none;
823 }
824 #side-sortables #merchant_metabox .postbox-header h2 {
825 color: #1e1e1e;
826 padding: 0 0 0 15px;
827 font-size: 13px;
828 font-weight: 500;
829 }
830 #side-sortables #merchant_metabox .inside {
831 padding: 0;
832 }
833 #side-sortables .merchant-metabox-field-text input,
834 #side-sortables .merchant-metabox-field-uploads-content input,
835 #side-sortables .merchant-metabox-field-repeater-content input {
836 width: 100%;
837 }
838
839 .merchant-metabox-field-flexible-content-list {
840 display: -webkit-box;
841 display: -ms-flexbox;
842 display: flex;
843 -webkit-box-orient: vertical;
844 -webkit-box-direction: normal;
845 -ms-flex-direction: column;
846 flex-direction: column;
847 width: 100%;
848 grid-gap: 10px;
849 }
850 .merchant-metabox-field-flexible-content-list.empty {
851 border: 2px dashed #dcdcde;
852 min-height: 100px;
853 }
854
855 .merchant-metabox-field-flexible-content-item {
856 border: 1px solid #c3c4c7;
857 border-left: 3px solid #3858e9;
858 }
859 .merchant-metabox-field-flexible-content-item:first-child {
860 display: none;
861 }
862
863 .merchant-metabox-field-flexible-content-item-content {
864 display: -webkit-box;
865 display: -ms-flexbox;
866 display: flex;
867 -webkit-box-orient: vertical;
868 -webkit-box-direction: normal;
869 -ms-flex-direction: column;
870 flex-direction: column;
871 grid-gap: 10px;
872 padding: 15px;
873 }
874 .merchant-metabox-field-flexible-content-item-content > div {
875 display: -webkit-box;
876 display: -ms-flexbox;
877 display: flex;
878 grid-gap: 10px;
879 }
880 .merchant-metabox-field-flexible-content-item-content > div:not(:last-child) > div {
881 border-bottom: 1px solid #f3f3f3;
882 padding-bottom: 15px;
883 }
884 .merchant-metabox-field-flexible-content-item-content > div label {
885 width: 200px;
886 }
887 .merchant-metabox-field-flexible-content-item-content > div > div {
888 width: calc(100% - 200px);
889 }
890
891 .merchant-metabox-field-flexible-content-item-title {
892 margin-left: 10px;
893 font-weight: bold;
894 }
895
896 .merchant-metabox-field-flexible-content-item-actions {
897 display: -webkit-box;
898 display: -ms-flexbox;
899 display: flex;
900 -webkit-box-pack: end;
901 -ms-flex-pack: end;
902 justify-content: flex-end;
903 -webkit-box-flex: 1;
904 -ms-flex-positive: 1;
905 flex-grow: 1;
906 }
907
908 .merchant-metabox-field-flexible-content-item-header {
909 display: -webkit-box;
910 display: -ms-flexbox;
911 display: flex;
912 -webkit-box-align: center;
913 -ms-flex-align: center;
914 align-items: center;
915 padding: 10px 15px;
916 border-bottom: 1px solid #f3f3f3;
917 }
918
919 .merchant-metabox-field-flexible-content-item-count {
920 border-radius: 50%;
921 width: 24px;
922 height: 23px;
923 border: 1px solid #949494;
924 text-align: center;
925 display: -webkit-box;
926 display: -ms-flexbox;
927 display: flex;
928 -webkit-box-pack: center;
929 -ms-flex-pack: center;
930 justify-content: center;
931 -webkit-box-orient: vertical;
932 -webkit-box-direction: normal;
933 -ms-flex-direction: column;
934 flex-direction: column;
935 font-size: 12px;
936 font-weight: bold;
937 }
938
939 .merchant-metabox-field-flexible-content-add-wrapper {
940 position: relative;
941 display: inline-block;
942 }
943
944 .merchant-metabox-field-flexible-content-add-list {
945 opacity: 0;
946 visibility: hidden;
947 position: absolute;
948 background-color: #ffffff;
949 border: 1px solid #c3c4c7;
950 border-left: 3px solid #3858e9;
951 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
952 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
953 width: 180px;
954 bottom: 100%;
955 display: -webkit-box;
956 display: -ms-flexbox;
957 display: flex;
958 -webkit-box-orient: vertical;
959 -webkit-box-direction: normal;
960 -ms-flex-direction: column;
961 flex-direction: column;
962 left: 50%;
963 -webkit-transform: translate(-50%, 10px);
964 transform: translate(-50%, 10px);
965 padding: 3px 3px 3px 5px;
966 }
967 .merchant-metabox-field-flexible-content-add-list.active {
968 z-index: 10;
969 opacity: 1;
970 visibility: visible;
971 -webkit-transform: translate(-50%, -15px);
972 transform: translate(-50%, -15px);
973 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
974 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
975 }
976 .merchant-metabox-field-flexible-content-add-list:before, .merchant-metabox-field-flexible-content-add-list:after {
977 position: absolute;
978 z-index: -1;
979 content: "";
980 border-style: solid;
981 -webkit-transition-duration: 0.3s;
982 transition-duration: 0.3s;
983 -webkit-transition-property: -webkit-transform;
984 transition-property: -webkit-transform;
985 transition-property: transform;
986 transition-property: transform, -webkit-transform;
987 }
988 .merchant-metabox-field-flexible-content-add-list:before {
989 right: calc(50% - 12px);
990 bottom: -14px;
991 border-width: 14px 14px 0 15px;
992 border-color: #c3c4c7 transparent transparent transparent;
993 }
994 .merchant-metabox-field-flexible-content-add-list:after {
995 content: "";
996 right: calc(50% - 10px);
997 bottom: -12px;
998 border-width: 12px 12px 0 13px;
999 border-color: #ffffff transparent transparent transparent;
1000 }
1001
1002 .merchant-metabox-field-flexible-content-add {
1003 display: block;
1004 -ms-flex-negative: 0;
1005 flex-shrink: 0;
1006 padding: 10px;
1007 text-decoration: none;
1008 }
1009 .merchant-metabox-field-flexible-content-add:hover {
1010 background: #f0f0f1;
1011 }
1012
1013 .merchant-metabox-field-input-container {
1014 display: -webkit-box;
1015 display: -ms-flexbox;
1016 display: flex;
1017 }
1018
1019 .merchant-metabox-field-append, .merchant-metabox-field-prepend {
1020 background: #f0f0f1;
1021 border: 1px solid #8c8f94;
1022 -webkit-box-align: center;
1023 -ms-flex-align: center;
1024 align-items: center;
1025 display: -webkit-box;
1026 display: -ms-flexbox;
1027 display: flex;
1028 position: relative;
1029 padding: 0 8px;
1030 }
1031
1032 .merchant-metabox-field-append {
1033 font-size: 12px;
1034 margin-left: -7px;
1035 -ms-flex-negative: 0;
1036 flex-shrink: 0;
1037 border-top-right-radius: 5px;
1038 border-bottom-right-radius: 5px;
1039 }
1040
1041 .merchant-metabox-field-prepend {
1042 font-size: 14px;
1043 margin-right: -3px;
1044 padding: 0 10px;
1045 margin-left: 4px;
1046 border-top-left-radius: 5px;
1047 border-bottom-left-radius: 5px;
1048 }
1049
1050 @media only screen and (max-width: 991px) {
1051 .merchant-metabox-tabs {
1052 display: none;
1053 }
1054 .merchant-metabox-content-title,
1055 .merchant-metabox-content:not(.active) {
1056 display: block;
1057 }
1058 .merchant-metabox-field {
1059 grid-gap: 8px;
1060 padding: 15px;
1061 -webkit-box-orient: vertical;
1062 -webkit-box-direction: normal;
1063 -ms-flex-direction: column;
1064 flex-direction: column;
1065 }
1066 .merchant-metabox-field-title {
1067 width: auto;
1068 }
1069 .merchant-metabox-field-title:empty {
1070 display: none;
1071 }
1072 .merchant-metabox-contents {
1073 border-left: none;
1074 border-right: none;
1075 }
1076 #merchant_metabox .inside {
1077 padding: 0;
1078 }
1079 .merchant-metabox-field-text input,
1080 .merchant-metabox-field-uploads-content input,
1081 .merchant-metabox-field-repeater-content input {
1082 width: 100%;
1083 }
1084 }
1085 .rtl .merchant-metabox-tabs {
1086 margin-left: unset;
1087 margin-right: -20px;
1088 }
1089 .rtl .merchant-metabox-tabs a:before {
1090 right: 0;
1091 left: unset;
1092 }
1093 .rtl .merchant-metabox-field-append {
1094 border-radius: 5px;
1095 }
1096 .rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item {
1097 border-left: 1px solid #c3c4c7;
1098 border-right: 3px solid #3858e9;
1099 }
1100 .rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item-title {
1101 margin-left: unset;
1102 margin-right: 10px;
1103 }