king-addons / includes / assets / libraries / woo-acf-fields / style.css

style.css in King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder 51.1.83, at includes/assets/libraries/woo-acf-fields/style.css

119 lines 2.9 KB

Raw Download Zip

1	/**
2	* ACF fields on the WooCommerce checkout and My Account pages.
3	*
4	* ACF's own field chrome is made for wp-admin: a border between fields, 15px
5	* of padding and labels in the admin's weight. On a storefront the fields
6	* should read like the WooCommerce rows around them, so the chrome is reset
7	* inside these blocks only and inputs take the theme's own input styles.
8	*
9	* The gap comes from --ka-acf-gap, which the widget's "Fields gap" control
10	* sets on the block itself; the fallback here never competes with it.
11	*/
12	.ka-acf-block {
13	display: grid;
14	gap: var(--ka-acf-gap, 12px);
15	margin: 0 0 1.5em;
16	}
17
18	.ka-woo-checkout-acf-fields__heading,
19	.ka-woo-account-acf-fields__heading {
20	margin: 0;
21	}
22
23	.ka-acf-block .acf-fields.ka-acf-fields {
24	display: grid;
25	gap: var(--ka-acf-gap, 12px);
26	border: 0;
27	}
28
29	.ka-acf-block .acf-fields.ka-acf-fields > .acf-field {
30	margin: 0;
31	padding: 0;
32	border: 0;
33	}
34
35	.ka-acf-block .acf-field .acf-label {
36	margin: 0 0 6px;
37	}
38
39	/* ACF sets its labels to weight 500; WooCommerce's inherit the body weight. */
40	.ka-acf-block .acf-field .acf-label label {
41	font-weight: inherit;
42	}
43
44	/* The fields carry WooCommerce's form-row class, whose "label { display:block }"
45	outweighs ACF's flex on the true/false switch label. ACF's place-items:center
46	is left behind and centres the switch in a block box. */
47	.ka-acf-block .acf-field .acf-true-false label {
48	display: flex;
49	}
50
51	.ka-acf-block .acf-field .acf-label .description,
52	.ka-acf-block .acf-field p.description {
53	margin: 4px 0 0;
54	font-size: 0.875em;
55	opacity: 0.8;
56	}
57
58	.ka-acf-block .acf-input input[type="text"],
59	.ka-acf-block .acf-input input[type="email"],
60	.ka-acf-block .acf-input input[type="url"],
61	.ka-acf-block .acf-input input[type="number"],
62	.ka-acf-block .acf-input input[type="password"],
63	.ka-acf-block .acf-input select,
64	.ka-acf-block .acf-input textarea {
65	width: 100%;
66	max-width: 100%;
67	box-sizing: border-box;
68	}
69
70	.ka-acf-block .acf-checkbox-list,
71	.ka-acf-block .acf-radio-list {
72	margin: 0;
73	padding: 0;
74	list-style: none;
75	}
76
77	.ka-acf-block .acf-checkbox-list label,
78	.ka-acf-block .acf-radio-list label {
79	display: inline-flex;
80	align-items: center;
81	gap: 6px;
82	font-weight: 400;
83	}
84
85	.ka-acf-block.ka-acf-no-required-mark .acf-required {
86	display: none;
87	}
88
89	.ka-acf-block .ka-acf-preview__note {
90	margin: 0;
91	font-size: 12px;
92	opacity: 0.75;
93	}
94
95	.ka-woo-account-acf-fields__actions {
96	margin: 0;
97	}
98
99	/* Stored fields on the thank-you page and in My Account > Orders. */
100	.ka-order-acf-fields {
101	margin-top: 2em;
102	}
103
104	.ka-order-acf-fields__table th,
105	.ka-order-acf-fields__table td {
106	text-align: start;
107	vertical-align: top;
108	}
109
110	.ka-order-acf-fields__table th {
111	width: 40%;
112	font-weight: 600;
113	}
114
115	.ka-order-acf-fields--block .ka-order-acf-fields__heading {
116	margin: 0;
117	font-size: clamp(16px, 0.984rem + ((1vw - 3.2px) * 0.809), 24px);
118	}
119