woocommerce-blocktheme.scss — WooCommerce 10.9.4

woocommerce / assets / css / woocommerce-blocktheme.scss

woocommerce / assets / css Last commit date

woocommerce-blocktheme.scss

530 lines

1	/**
2	* woocommerce-blocktheme.scss
3	* Block theme default styles to ensure WooCommerce looks better out of the box with block themes that are not optimised for WooCommerce specifically.
4	*/
5	@import "fonts";
6	@import "variables";
7
8	/**
9	* Layout
10	*/
11	.woocommerce-cart,
12	.woocommerce-account,
13	.woocommerce-checkout {
14	.wp-block-post-title,
15	main .woocommerce {
16	// Allow Cart/Checkout/Account pages more space to breathe.
17	max-width: 1000px;
18	}
19	}
20
21	.clear {
22	clear: both;
23	}
24
25	/**
26	* General
27	*/
28	.woocommerce {
29	button.button,
30	a.button {
31
32	&.disabled,
33	&:disabled,
34	&:disabled[disabled]],
35	&.disabled:hover,
36	&:disabled:hover,
37	&:disabled[disabled]]:hover {
38	opacity: 0.5;
39	}
40	}
41
42	#respond input#submit,
43	input.button,
44	a.button.alt {
45
46	&:hover {
47	opacity: 0.9;
48	}
49
50	&.disabled,
51	&:disabled,
52	&:disabled[disabled]],
53	&.disabled:hover,
54	&:disabled:hover,
55	&:disabled[disabled]]:hover {
56	opacity: 0.5;
57	}
58	}
59	}
60
61	/**
62	* Products
63	*/
64	.woocommerce {
65	/**
66	* Shop products list
67	*/
68	ul.products li.product .woocommerce-loop-product__title {
69	// Slightly increase font size to make product title more readable.
70	font-size: 1.2em;
71	}
72
73	/**
74	* Single Product
75	*/
76	div.product {
77	// Ensure the single product contains its content.
78	// For details see https://github.com/woocommerce/woocommerce/pull/33511.
79	&::after {
80	content: "";
81	display: block;
82	clear: both;
83	}
84
85	div.summary > * {
86	// Ensure a more even block gap spacing in product summary.
87	margin-bottom: var(--wp--style--block-gap);
88	}
89
90	.woocommerce-tabs {
91	ul.tabs li.active {
92
93	&::before {
94	box-shadow: 2px 2px 0 var(--wp--preset--color--background, $contentbg);
95	}
96
97	&::after {
98	box-shadow: -2px 2px 0 var(--wp--preset--color--background, $contentbg);
99	}
100	}
101	}
102
103	form.cart {
104	div.quantity {
105	float: none; // Remove float set by WC core.
106	vertical-align: middle;
107
108	// Adjust positioning of quantity selector and button.
109	.qty {
110	margin-right: 0.5em;
111	}
112	}
113
114	button[name="add-to-cart"]="add-to-cart""],
115	button.single_add_to_cart_button {
116	display: inline-block;
117	float: none; // Remove float set by WC core.
118	margin-top: 0;
119	margin-bottom: 0;
120	vertical-align: middle;
121	word-break: normal;
122	}
123
124	.variations {
125	td, th {
126	word-break: normal;
127	}
128	}
129	}
130
131	.related.products {
132	// Ensure related products doesn't stick to product tabs.
133	margin-top: 5em;
134	}
135	}
136
137	.woocommerce-Reviews {
138	#comments {
139	// Add spacing between the review comments and the review form.
140	margin-bottom: var(--wp--style--block-gap);
141	}
142
143	.commentlist {
144	// Ensure review comments width doesn't exceed review container.
145	box-sizing: border-box;
146	}
147
148	.comment-reply-title {
149	// Make review form title visually distinct.
150	font-size: var(--wp--preset--font-size--medium);
151	font-weight: 700;
152	}
153	}
154
155	.price, .woocommerce-grouped-product-list-item__price, .wc-block-components-product-price {
156	ins, bdi {
157	// Ensure discounted prices aren't underlined.
158	// For details see https://github.com/woocommerce/woocommerce-blocks/pull/5684.
159	text-decoration: none;
160	}
161	}
162
163	span.onsale {
164	// Style "On Sale" badge in theme colors by default.
165	background-color: var(--wp--preset--color--foreground, $highlight);
166	color: var(--wp--preset--color--background, $highlightext);
167	}
168
169	/**
170	* Product variations
171	*/
172	table.variations {
173	display: block;
174
175	tr {
176	th,
177	td {
178	padding-bottom: var(--wp--style--block-gap);
179	text-align: left;
180	}
181
182	th {
183	// Ensure variation label doesn't stick to dropdown.
184	padding-right: 1em;
185	}
186
187	td select {
188	// Add padding to product variation dropdowns.
189	height: 3em;
190	padding: 0.9em 1.1em;
191	font-size: var(--wp--preset--font-size--small);
192	}
193	}
194	}
195
196	// Ensure variation label is vertically centered.
197	div.product form.cart table.variations td select {
198	min-width: 70%; // Fix for Safari.
199	}
200
201	div.product form.cart table.variations td,
202	div.product form.cart table.variations th {
203	vertical-align: middle;
204	}
205
206	.single_variation_wrap .woocommerce-variation {
207	margin-bottom: var(--wp--style--block-gap);
208	}
209	}
210
211	/**
212	* Products grid
213	*/
214	a.added_to_cart {
215	// Prevent "View Cart" button from sticking to "Add to Cart" button.
216	// For details see https://github.com/woocommerce/woocommerce-blocks/issues/5285.
217	display: block;
218	margin-top: 1em;
219	}
220
221	/**
222	* Form elements
223	*/
224	.woocommerce-page {
225	// Ensure text input fields aren't too small.
226	select,
227	.input-text,
228	.select2-container {
229	font-size: var(--wp--preset--font-size--small);
230	}
231
232	label {
233	margin-bottom: 0.7em;
234	}
235	}
236
237	.woocommerce {
238	form {
239	.form-row {
240	margin-bottom: 1em;
241	}
242
243	textarea {
244	// Ensure textareas don't look squished.
245	min-height: 100px;
246	}
247	}
248	}
249
250	/**
251	* Cart / Checkout
252	*/
253	.woocommerce-page {
254	/**
255	* Tables
256	*/
257	table.shop_table {
258	// Adjust table width to new checkout width.
259	width: 70%;
260	border-collapse: collapse;
261
262	@media only screen and ( max-width: 768px ) {
263	width: 100%;
264	}
265
266	th,
267	td {
268	// Allow cells more space to breathe.
269	padding: 1em;
270	}
271	}
272
273	table.shop_table_responsive {
274	// Responsive tables should still take up the full width.
275	width: 100%;
276	}
277
278	/**
279	* Cart specific
280	*/
281	.woocommerce-cart-form {
282	.product-remove {
283	// Decrease width of the product remove column.
284	width: 1em;
285	}
286
287	.product-thumbnail {
288	// Increase product thumbnails to improve visually fidelity.
289	width: 120px;
290
291	a img {
292	width: 117px;
293	}
294	}
295
296	.coupon {
297	display: flex;
298	align-items: center;
299	flex-wrap: wrap;
300	}
301
302	#coupon_code {
303	// Allow sufficient space for the coupon code.
304	width: auto;
305	margin-right: 0.8em;
306	height: 50px;
307	font-size: var(--wp--preset--font-size--small);
308	padding: 0 1.1em;
309	}
310
311	@media only screen and ( max-width: 768px ) {
312	.product-remove {
313	width: auto;
314	}
315
316	#coupon_code {
317	width: 50%;
318	margin-right: 0;
319	}
320	}
321	}
322
323	.cart-collaterals h2 {
324	// Ensure cart subheadline size is reasonable.
325	font-size: var(--wp--preset--font-size--medium);
326	}
327
328	/**
329	* Checkout specific
330	*/
331	.woocommerce-form-coupon .button {
332	min-height: 50px;
333	}
334
335	/**
336	* Order confirmation
337	*/
338	.woocommerce-thankyou-order-received,
339	.woocommerce-column__title,
340	.woocommerce-customer-details h2 {
341	font-size: var(--wp--preset--font-size--large);
342	font-weight: 300;
343	}
344
345	ul.woocommerce-order-overview {
346	// Display order overview items next to each other.
347	display: flex;
348	width: 100%;
349	padding-left: 0;
350	font-size: var(--wp--preset--font-size--small);
351
352	@media only screen and ( max-width: 768px ) {
353	flex-direction: column;
354	}
355
356	li {
357	flex-grow: 1;
358	margin-bottom: 1em;
359	border: none;
360	display: inline;
361	text-transform: uppercase;
362
363	strong {
364	text-transform: none;
365	display: block;
366	}
367	}
368	}
369
370	.woocommerce-customer-details address {
371	// Ensure customer details match order overview.
372	box-sizing: border-box;
373	width: 70%;
374	padding: 1em;
375	border-width: 1px;
376	border-radius: 0;
377	}
378	}
379
380	/**
381	* My account
382	*/
383	.woocommerce-account {
384	.woocommerce-MyAccount-navigation {
385	ul {
386	// Ensure top left alignment of the navigation.
387	margin: 0 0 2em;
388	padding: 0;
389	}
390
391	li {
392	// Remove default list styling.
393	list-style: none;
394	padding: 1em 0;
395
396	@media only screen and ( max-width: 768px ) {
397	padding: 0.35em 0;
398	}
399
400	&:first-child {
401	padding-top: 0;
402	}
403
404	&.is-active {
405	a {
406	text-decoration: underline;
407	}
408	}
409
410	a {
411	text-decoration: none;
412
413	&:hover {
414	text-decoration: underline;
415	}
416	}
417	}
418	}
419
420	.woocommerce-MyAccount-content {
421	> p:first-of-type,
422	p.form-row-first,
423	p.form-row-last {
424	// Ensure first paragraph in content is top aligned.
425	margin-block-start: 0;
426	}
427	}
428
429	table.shop_table.order_details,
430	.woocommerce-customer-details address {
431	// Ensure order/customer details are full width in My Account.
432	width: 100%;
433	}
434
435	.addresses .title .edit {
436	// Align "Add" and "Edit" buttons when title is too long (/my-account/edit-address/).
437	display: block;
438	margin-bottom: 1em;
439	}
440
441	&.woocommerce-edit-address .woocommerce-MyAccount-content form > h3 {
442	// Ensure headline is top aligned (/my-account/edit-address/shipping/).
443	margin-block-start: 0;
444	}
445
446	.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
447	&::before {
448	display: none;
449	}
450
451	a {
452	display: block;
453	margin-bottom: 1em;
454	text-align: center;
455	}
456	}
457	}
458
459	/**
460	* My account - Login form
461	*/
462	.woocommerce-page {
463	// For block themes we increase the padding of the input fields across classic checkout and my account pages.
464	form .form-row {
465	select,
466	textarea.input-text,
467	input.input-text {
468	// Ensure inputs are well spaced.
469	font-size: var(--wp--preset--font-size--small);
470	padding: 0.9rem 1.1rem;
471	}
472
473	select {
474	background-position: calc(100% - 1.1rem) 50%;
475	}
476
477	label {
478	margin-bottom: 0.7em;
479	}
480
481	// Ensure dropdowns are visually consistent with other form fields.
482	.select2-container {
483	.select2-selection--single .select2-selection__rendered {
484	padding: 0.9rem 1.1rem;
485	}
486	.select2-selection--single .select2-selection__arrow {
487	right: 1.1em;
488	}
489	}
490	}
491
492	.select2-container {
493	.select2-search--dropdown {
494	padding: 0 1.1rem 0.5rem;
495	}
496	.select2-search--dropdown .select2-search__field {
497	padding: 0.5rem;
498	font-size: var(--wp--preset--font-size--small);
499	}
500	.select2-results__option {
501	padding: 0.5rem 1.1rem;
502	}
503	}
504	}
505
506	/**
507	* Store notice
508	*/
509	p.demo_store,
510	.woocommerce-store-notice {
511	// Add theme colors to the store notice.
512
513	background: var(--wp--preset--color--foreground, $primary);
514	bottom: 0;
515	color: var(--wp--preset--color--background, $primarytext);
516	position: fixed;
517	top: auto !important;
518
519	a {
520	color: var(--wp--preset--color--background, $primarytext);
521	}
522	}
523
524	/**
525	* Product category count
526	*/
527	.woocommerce .product-category mark.count {
528	background-color: transparent;
529	}
530