forms.scss — WooCommerce 10.8.0-beta.1

woocommerce / assets / css / forms.scss

woocommerce / assets / css Last commit date

forms.scss

239 lines

1	.woocommerce {
2	/**
3	* Generic forms styles used in places such as my account and the shortcode based checkout.
4	*/
5	form .form-row {
6	padding: 3px;
7	margin: 0 0 6px;
8
9	[placeholder]]:focus::-webkit-input-placeholder {
10	transition: opacity 0.5s 0.5s ease;
11	opacity: 0;
12	}
13
14	label {
15	line-height: 2;
16
17	&.hidden {
18	visibility: hidden;
19	}
20
21	&.inline {
22	display: inline;
23	}
24	}
25
26	.woocommerce-input-wrapper .description {
27	background: #1e85be;
28	color: #fff;
29	border-radius: 3px;
30	padding: 1em;
31	margin: 0.5em 0 0;
32	clear: both;
33	display: none;
34	position: relative;
35
36	a {
37	color: #fff;
38	text-decoration: underline;
39	border: 0;
40	box-shadow: none;
41	}
42
43	&::before {
44	left: 50%;
45	top: 0%;
46	margin-top: -4px;
47	transform: translateX(-50%) rotate(180deg);
48	content: "";
49	position: absolute;
50	border-width: 4px 6px 0 6px;
51	border-style: solid;
52	border-color: #1e85be transparent transparent transparent;
53	z-index: 100;
54	display: block;
55	}
56	}
57
58	.input-checkbox {
59	display: inline;
60	margin: -2px 8px 0 0;
61	text-align: center;
62	vertical-align: middle;
63	}
64
65	.input-text,
66	select {
67	font-family: inherit;
68	font-weight: normal;
69	letter-spacing: normal;
70	padding: .5em;
71	display: block;
72	background-color: var(--wc-form-color-background, #fff);
73	border: var(--wc-form-border-width) solid var(--wc-form-border-color);
74	border-radius: var(--wc-form-border-radius);
75	color: var(--wc-form-color-text, #000);
76	box-sizing: border-box;
77	width: 100%;
78	margin: 0;
79	line-height: normal;
80	height: auto;
81
82	&:focus {
83	border-color: currentColor;
84	}
85	}
86
87	select {
88	cursor: pointer;
89	/* We hide the default chevron because it cannot be directly modified. Instead, we add a custom chevron using a background image. */
90	appearance: none;
91	padding-right: 3em;
92	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=);
93	background-repeat: no-repeat;
94	background-size: 16px;
95	background-position: calc(100% - 0.5em) 50%;
96	}
97
98	textarea {
99	height: 4em;
100	line-height: 1.5;
101	box-shadow: none;
102	}
103
104	.country_to_state--single {
105	background: transparent;
106	border: 0;
107	padding: 0;
108	appearance: none;
109	background-image: none;
110	font: inherit;
111	font-weight: 700;
112	color: inherit;
113	width: auto;
114	pointer-events: none;
115	}
116
117	.required {
118	color: var(--wc-red);
119	font-weight: 700;
120	border: 0 !important;
121	text-decoration: none;
122	visibility: hidden; // Only show optional by default.
123	}
124
125	.optional {
126	visibility: visible;
127	}
128
129	&.woocommerce-invalid {
130	label {
131	color: var(--wc-red);
132	}
133	input.input-text,
134	select {
135	border-color: var(--wc-red);
136	}
137	.select2-container:not(.select2-container--open) .select2-selection {
138	border-color: var(--wc-red);
139	}
140	}
141
142	&.woocommerce-validated {
143	input.input-text,
144	select {
145	border-color: var(--wc-green);
146	}
147	.select2-container:not(.select2-container--open) .select2-selection {
148	border-color: var(--wc-green);
149	}
150	}
151
152	::-webkit-input-placeholder {
153	line-height: normal;
154	}
155
156	:-moz-placeholder {
157	line-height: normal;
158	}
159
160	:-ms-input-placeholder {
161	line-height: normal;
162	}
163	}
164	}
165
166	:where(.woocommerce) {
167	.select2-container {
168	width: 100%;
169
170	.select2-selection--single {
171	height: auto;
172
173	.select2-selection__rendered {
174	padding: 0.5em;
175	line-height: normal;
176	box-sizing: border-box;
177	color: var(--wc-form-color-text, #444);
178	font-weight: normal;
179	}
180
181	.select2-selection__placeholder {
182	color: var(--wc-form-color-text, #444);
183	}
184
185	.select2-selection__arrow {
186	position: absolute;
187	top: 2px;
188	right: 0.5em;
189	height: 100%;
190	width: 16px;
191
192	b {
193	border: none;
194	display: block;
195	background:
196	url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=)
197	no-repeat;
198	background-size: 16px;
199	width: 16px;
200	height: 16px;
201	position: absolute;
202	top: 50%;
203	left: 0;
204	margin: -8px 0 0;
205	}
206	}
207	}
208
209	.select2-selection,
210	.select2-dropdown {
211	background-color: var(--wc-form-color-background, #fff);
212	border: var(--wc-form-border-width, 1px) solid var(--wc-form-border-color, #aaa);
213	border-radius: var(--wc-form-border-radius, 4px);
214	}
215
216	&.select2-container--open .select2-dropdown--above {
217	border-bottom: none;
218	border-bottom-left-radius: 0;
219	border-bottom-right-radius: 0;
220	}
221
222	&.select2-container--open .select2-dropdown--below {
223	border-top: none;
224	border-top-left-radius: 0;
225	border-top-right-radius: 0;
226	}
227	}
228
229	.select2-results__options {
230	list-style: none;
231	margin: 0;
232	padding: 0;
233	}
234
235	.select2-results__option {
236	margin: 0;
237	}
238	}
239