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

116 lines 3.1 KB Raw Download Zip

1	/**
2	* Admin Preview
3	* Product Labels
4	*
5	*/
6	.merchant-flexible-content .layout .merchant-upload-wrapper {
7	margin-bottom: 0;
8	}
9
10	.merchant-module-page-preview-browser-inner {
11	display: -webkit-box;
12	display: -ms-flexbox;
13	display: flex;
14	-webkit-box-flex: 0;
15	-ms-flex-positive: 0;
16	flex-grow: 0;
17	max-width: 300px;
18	width: 100%;
19	margin: auto;
20	padding: 50px 25px;
21	}
22
23	.merchant-product-labels-preview {
24	width: 100%;
25	}
26	.merchant-product-labels-preview .image-wrapper {
27	overflow: hidden;
28	position: relative;
29	height: 11vw;
30	max-height: 220px;
31	background-color: #f5f5f5;
32	}
33	.merchant-product-labels-preview .merchant-product-labels {
34	display: -webkit-box;
35	display: -ms-flexbox;
36	display: flex;
37	}
38
39	.merchant-flexible-content-control.product-labels-style .layout {
40	border-left: 3px solid #838383;
41	-webkit-transition: 300ms;
42	transition: 300ms;
43	}
44	.merchant-flexible-content-control.product-labels-style .layout.active {
45	border-left: 3px solid #3858e9;
46	}
47	.merchant-flexible-content-control.product-labels-style .layout-body {
48	grid-gap: unset;
49	}
50	.merchant-flexible-content-control.product-labels-style .layout-body .merchant-module-page-setting-field {
51	margin-bottom: 20px;
52	}
53
54	.merchant-choices-label_text_shape label figure,
55	.merchant-choices-label_image_shape label figure {
56	border-color: #E8E8E8;
57	}
58
59	.merchant-module-page-setting-field-choices .merchant-choices-label_text_shape {
60	gap: 5px;
61	-ms-flex-wrap: wrap;
62	flex-wrap: wrap;
63	}
64	@media (min-width: 1400px) {
65	.merchant-module-page-setting-field-choices .merchant-choices-label_text_shape label {
66	-webkit-box-flex: 1;
67	-ms-flex: 1 0 calc(12.5% - 10px);
68	flex: 1 0 calc(12.5% - 10px);
69	max-width: calc(12.5% + 10px);
70	}
71	}
72	.merchant-module-page-setting-field-choices .merchant-choices-label_image_shape {
73	gap: 5px;
74	-ms-flex-wrap: wrap;
75	flex-wrap: wrap;
76	}
77	.merchant-module-page-setting-field-choices .merchant-choices-label_image_shape label {
78	-webkit-box-flex: 1;
79	-ms-flex: 1 0 calc(12.5% - 10px);
80	flex: 1 0 calc(12.5% - 10px);
81	max-width: calc(12.5% + 10px);
82	}
83	@media (max-width: 1199px) {
84	.merchant-module-page-setting-field-choices .merchant-choices-label_image_shape label {
85	-webkit-box-flex: 1;
86	-ms-flex: 1 0 calc(16.66% - 10px);
87	flex: 1 0 calc(16.66% - 10px);
88	max-width: calc(16.66% + 10px);
89	}
90	}
91	@media (max-width: 991px) {
92	.merchant-module-page-setting-field-choices .merchant-choices-label_image_shape label {
93	-webkit-box-flex: 1;
94	-ms-flex: 1 0 calc(25% - 10px);
95	flex: 1 0 calc(25% - 10px);
96	max-width: calc(25% + 10px);
97	}
98	}
99	@media (max-width: 767px) {
100	.merchant-module-page-setting-field-choices .merchant-choices-label_image_shape label {
101	-webkit-box-flex: 1;
102	-ms-flex: 1 0 calc(25% - 10px);
103	flex: 1 0 calc(25% - 10px);
104	max-width: calc(25% + 10px);
105	}
106	}
107	.merchant-module-page-setting-field-choices .merchant-choices-label_image_shape figure {
108	width: 100%;
109	padding: 10px;
110	-webkit-box-pack: center;
111	-ms-flex-pack: center;
112	justify-content: center;
113	}
114	.merchant-module-page-setting-field-choices figure img {
115	width: 100%;
116	}