twenty-twenty-three.scss — WooCommerce 9.1.0-beta.1

woocommerce / assets / css / twenty-twenty-three.scss

woocommerce / assets / css Last commit date

twenty-twenty-three.scss

1155 lines

1	/**
2	* Fonts
3	*/
4	@import "fonts";
5
6	@import "mixins";
7	@import "animation";
8
9
10	/*
11	Layout fix.
12	*/
13	.woocommerce-page {
14
15	main {
16	// This is to allow .woocommerce div to have width of 1000px on styles with full width layout (such as Pitch).
17	max-width: calc(1000px + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
18	margin-left: auto;
19	margin-right: auto;
20
21	.woocommerce {
22	@include clearfix();
23	}
24	}
25	}
26
27	.theme-twentytwentythree {
28	.container-colors {
29	display: flex;
30	flex-direction: row;
31	}
32
33	.cube {
34	width: 20%;
35	height: 100px;
36	text-align: center;
37	vert-align: middle;
38	}
39
40	.base {
41	background-color: var(--wp--preset--color--base);
42	}
43
44	.contrast {
45	background-color: var(--wp--preset--color--contrast);
46	color: var(--wp--preset--color--base);
47	}
48
49	.primary {
50	background-color: var(--wp--preset--color--primary);
51	}
52
53	.secondary {
54	background-color: var(--wp--preset--color--secondary);
55	}
56
57	.tertiary {
58	background-color: var(--wp--preset--color--tertiary);
59	}
60
61
62	}
63
64	.woocommerce {
65
66	/*
67	Common/global
68	*/
69
70	// Make quantity selector less wide.
71	.quantity {
72	input[type="number"]="number""] {
73	width: 3em;
74	}
75
76	input[type="number"]="number""]::-webkit-inner-spin-button,
77	input[type="number"]="number""]::-webkit-outer-spin-button {
78	opacity: 1;
79	}
80	}
81
82	// Breadcrumbs are unnecessary on the shop page.
83	&.woocommerce-shop .woocommerce-breadcrumb {
84	display: none;
85	}
86
87	// Make sure breadcrumbs are not overlapping with Sale badge on the Single product page, etc.
88	.woocommerce-breadcrumb {
89	margin-bottom: 1rem;
90	}
91	// Checkout notice group styling.
92	.woocommerce-NoticeGroup-checkout {
93	ul.woocommerce-error[role="alert"]="alert""] {
94	color: var(--wp--preset--color--contrast);
95	background: var(--wp--preset--color--primary);
96
97	&::before {
98	display: none;
99	}
100	li {
101	display: inherit;
102	margin-bottom: 1rem;
103	}
104	}
105	}
106
107	/*
108	Shop page.
109	*/
110
111	// Styling the buttons on the Shop page.
112	a.button,
113	button[name="add-to-cart"]="add-to-cart""],
114	input[name="submit"]="submit""],
115	button.single_add_to_cart_button,
116	button[type="submit"]="submit""]:not(.wp-block-search__button) {
117	display: inline-block;
118	text-align: center;
119	word-break: break-word;
120	padding: 1rem 2rem;
121	margin-top: 1rem;
122	text-decoration: none;
123	font-size: medium;
124	cursor: pointer;
125
126	}
127
128	// Style the 'Showing A-B of X results' text.
129	.woocommerce-result-count {
130	margin-top: 0;
131	}
132
133	// The 'order by' dropdown on the Shop page is rather tiny unless the font size is increased.
134	select.orderby {
135	font-size: var(--wp--preset--font-size--medium);
136	}
137
138	// Products.
139	ul.products {
140
141	padding-inline-start: 0;
142	display: flex;
143	align-items: stretch;
144	flex-direction: row;
145	flex-wrap: wrap;
146	justify-content: flex-start;
147	@media only screen and (max-width: 768px) {
148	justify-content: space-between;
149	}
150
151	li.product {
152	list-style: none;
153	margin-top: var(--wp--style--block-gap);
154	text-align: center;
155	display: flex;
156	flex-direction: column;
157	justify-content: space-between;
158	align-items: flex-start;
159
160	a.woocommerce-loop-product__link {
161	text-decoration: none;
162	display: block;
163	border: 0;
164	}
165
166	h2.woocommerce-loop-product__title {
167	color: var(--wp--preset--color--contrast);
168	font-family: var(--wp--preset--font-family--system-font);
169	text-decoration: none;
170	margin-bottom: 0;
171	}
172
173	h2.woocommerce-loop-category__title {
174	font-size: revert;
175	}
176
177	// Add to cart/Select options/Read more buttons.
178	a.button {
179	padding: 0.8rem 10%;
180	margin-left: auto;
181	margin-right: auto;
182
183	&.loading {
184	opacity: 0.5;
185	}
186	}
187
188	// View cart link.
189	a.added_to_cart {
190	margin: 1rem auto;
191	}
192
193	}
194	}
195
196	// Position page numbers under list of products horizontally in the centre of the page.
197	ul.page-numbers {
198	text-align: center;
199	}
200
201	// On sale badge.
202	span.onsale {
203	top: -1rem;
204	right: -1rem;
205	position: absolute;
206	background: var(--wp--preset--color--tertiary);
207	color: var(--wp--preset--color--contrast);
208	border-radius: 2rem;
209	line-height: 2.6rem;
210	font-size: 0.8rem;
211	padding: 0 0.5rem 0 0.5rem;
212	}
213
214	/*
215	Single product page.
216	*/
217
218	div.product {
219	position: relative;
220
221	> span.onsale {
222	position: absolute;
223	left: -1rem;
224	top: -1rem;
225	width: 1.8rem;
226	z-index: 1;
227	}
228
229	// How price gets displayed
230	.entry-summary {
231	.woocommerce-Price-amount,
232	del,
233	.price {
234	font-size: var(--wp--preset--font-size--large);
235	}
236	}
237
238	div.woocommerce-product-gallery {
239	position: relative;
240
241	a.woocommerce-product-gallery__trigger {
242	position: absolute;
243	top: 1rem;
244	right: 1rem;
245	z-index: 1;
246	text-decoration: none;
247	border-radius: 1rem;
248	border-style: solid;
249	line-height: 1.5rem;
250	padding: 0;
251	font-size: 0.6rem;
252	background: var(--wp--preset--color--white);
253	border-color: var(--wp--preset--color--white);
254	height: 1.5rem;
255	width: 1.5rem;
256	overflow: hidden;
257
258	&::before {
259	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" width="24" height="24"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z" /></svg>');
260	display: block;
261	transform: rotateY(180deg);
262	margin-left: 1.55rem;
263	}
264	}
265
266	figure.woocommerce-product-gallery__wrapper,
267	div.woocommerce-product-gallery__wrapper {
268	margin: 0;
269	}
270
271	}
272
273	div.summary {
274	font-size: 1rem;
275
276	h1.product_title {
277	font-size: var(--wp--preset--font-size--huge);
278	margin: 0;
279	}
280
281	figure.woocommerce-product-gallery__wrapper,
282	div.woocommerce-product-gallery__wrapper {
283	margin: 0;
284	}
285
286	.woocommerce-product-rating {
287	.star-rating {
288	display: inline-block;
289	}
290	.woocommerce-review-link {
291	display: inline-block;
292	overflow: hidden;
293	position: relative;
294	top: -0.5em;
295	font-size: 1em;
296	}
297	}
298	}
299
300	table.variations tr {
301
302	display: table-row;
303	margin-bottom: 0;
304	text-align: left;
305
306	td select {
307	margin: calc(var(--wp--style--block-gap) / 4) 0;
308	}
309	}
310
311	.single_variation_wrap {
312	margin-top: var(--wp--style--block-gap);
313
314	// Prevent height flickering when selecting a variation.
315	.single_variation .woocommerce-variation-description > :first-child {
316	margin-top: 0;
317	}
318	}
319
320	ol.flex-control-thumbs {
321	padding-left: 0;
322	float: left;
323
324	li {
325	list-style: none;
326	cursor: pointer;
327	float: left;
328	width: 18%;
329	margin-right: 1rem;
330	}
331
332	}
333
334	a.reset_variations {
335	margin-left: 0.5em;
336	}
337
338	table.group_table {
339	td {
340	padding-right: 0.5rem;
341	padding-bottom: 1rem;
342	}
343
344	margin-bottom: var(--wp--style--block-gap);
345	}
346
347	.related.products {
348	margin-top: 7rem;
349	clear: both;
350	}
351
352	.upsells.products {
353	clear: both;
354	}
355	}
356
357	// Reviews tab.
358	.woocommerce-Reviews {
359	ol.commentlist {
360	list-style: none;
361	padding-left: 0;
362
363	li {
364	margin-bottom: var(--wp--style--block-gap);
365	}
366
367	img.avatar {
368	float: left;
369	}
370
371	p.meta {
372	font-size: 1rem;
373	}
374
375	.comment-text {
376	display: flow-root;
377	padding-left: var(--wp--style--block-gap);
378
379	.star-rating {
380	margin-top: 0;
381	margin-right: unset;
382	margin-left: unset;
383	}
384	}
385	}
386
387	.comment-form-rating {
388	label {
389	display: inline-block;
390	padding-right: var(--wp--style--block-gap);
391	padding-top: var(--wp--style--block-gap);
392	}
393
394	p.stars {
395	display: inline;
396	a::before {
397	color: var(--wp--preset--color--contrast);
398	}
399	}
400	}
401
402	.comment-form-comment {
403	label {
404	float: left;
405	padding-right: var(--wp--style--block-gap);
406	}
407	}
408
409	#review_form_wrapper {
410	margin-top: 5rem;
411	}
412	}
413
414	// Rating: show stars instead of 1, 2, 3, 4, 5.
415	.star-rating {
416	overflow: hidden;
417	position: relative;
418	height: 1em;
419	line-height: 1;
420	width: 5.4rem;
421	font-family: WooCommerce;
422	font-style: normal;
423	color: var(--wp--preset--color--contrast);
424	margin: 1rem auto 0.7rem auto;
425
426	&::before {
427	content: "\73\73\73\73\73";
428	float: left;
429	top: 0;
430	left: 0;
431	position: absolute;
432	font-size: 1rem;
433	}
434
435	span {
436	overflow: hidden;
437	float: left;
438	top: 0;
439	left: 0;
440	position: absolute;
441	padding-top: 1.5em;
442	}
443
444	span::before {
445	content: "\53\53\53\53\53";
446	top: 0;
447	position: absolute;
448	left: 0;
449	font-size: 1rem;
450	}
451	}
452
453	// Rating stars.
454	p.stars {
455	margin-top: 0;
456
457	a {
458	position: relative;
459	height: 1em;
460	width: 1em;
461	text-indent: -999em;
462	display: inline-block;
463	text-decoration: none;
464	box-shadow: none;
465	font-style: normal;
466
467	&::before {
468	display: block;
469	position: absolute;
470	top: 0;
471	left: 0;
472	width: 1em;
473	height: 1em;
474	line-height: 1;
475	font-family: WooCommerce;
476	content: "\e021";
477	text-indent: 0;
478	}
479
480	&:hover {
481
482	~ a::before {
483	content: "\e021";
484	}
485	}
486	}
487
488	&:hover {
489
490	a {
491
492	&::before {
493	content: "\e020";
494	}
495	}
496	}
497
498	&.selected {
499
500	a.active {
501
502	&::before {
503	content: "\e020";
504	}
505
506	~ a::before {
507	content: "\e021";
508	}
509	}
510
511	a:not(.active) {
512
513	&::before {
514	content: "\e020";
515	}
516	}
517	}
518	}
519	}
520
521	// Description/Additional info/Reviews tabs.
522	.woocommerce-tabs {
523	padding-top: var(--wp--style--block-gap);
524	}
525
526	ul.wc-tabs {
527	padding: 0;
528	border-bottom-style: solid;
529	border-bottom-width: 1px;
530	border-bottom-color: #eae9eb;
531
532	li {
533	opacity: 0.5;
534	color: var(--wp--preset--color--contrast);
535	margin: 0;
536	padding: 0.5em 1em 0.5em 1em;
537	border-color: #eae9eb;
538	border-top-left-radius: 5px;
539	border-top-right-radius: 5px;
540	float: left;
541	border-style: solid;
542	border-width: 1px;
543	font-weight: 600;
544	font-size: var(--wp--preset--font-size--medium);
545
546	&:first-child {
547	border-left-color: #eae9eb;
548	margin-left: 1em;
549	}
550
551	&.active {
552	background: var(--wp--preset--color--tertiary);
553	color: var(--wp--preset--color--contrast);
554	opacity: 1;
555	}
556
557	a {
558	text-decoration: none;
559	color: var(--wp--preset--color--contrast);
560	}
561	}
562	}
563
564	.woocommerce-Tabs-panel {
565	padding-top: var(--wp--style--block-gap);
566	font-size: var(--wp--preset--font-size--small);
567	margin-left: 1em;
568
569	// Hide repeated heading.
570	h2:first-of-type {
571	display: none;
572	}
573
574	// Attributes table styles.
575	table.woocommerce-product-attributes {
576	tbody {
577
578	td, th {
579	padding: 0.2rem 0.2rem 0.2rem 0;
580
581	p {
582	margin: 0;
583	}
584	}
585
586	th {
587	text-align: left;
588	padding-right: 1rem;
589	}
590	}
591	}
592	}
593
594	.woocommerce-page {
595	.woocommerce-cart-form {
596
597	// Make coupon code input less ginormous.
598	#coupon_code {
599	padding: 0 1rem;
600	}
601
602	.actions {
603	button.button {
604	height: initial;
605	}
606	}
607
608	// Cart table, aka review of cart items.
609	table.shop_table_responsive {
610
611	td,
612	th {
613	padding: 1rem 0 0.5rem 1rem;
614	}
615
616	tbody {
617
618	tr:last-of-type {
619	border-top: none;
620	}
621
622	@media only screen and (max-width: 768px) {
623	td {
624	padding-left: 0;
625	}
626
627	.product-remove {
628	text-align: left !important;
629	}
630
631	#coupon_code {
632	float: left;
633	margin-bottom: 1rem;
634	}
635	}
636	}
637
638	.product-remove {
639	font-size: var(--wp--preset--font-size--large);
640
641	a {
642	text-decoration: none;
643	}
644	}
645	}
646	}
647
648	// Elements around "Proceed to Checkout" button.
649	.cart-collaterals {
650	margin-top: 1.5rem;
651
652	h2 {
653	text-transform: uppercase;
654	font-family: inherit;
655	}
656
657	table.shop_table_responsive {
658
659	tr {
660	border-top: none;
661	}
662
663	th {
664	width: 11rem;
665	}
666
667	td,
668	th {
669	padding: 1rem 0;
670	vertical-align: text-top;
671	}
672	}
673
674	button[name="calc_shipping"]="calc_shipping""] {
675	padding: 1rem 2rem;
676	}
677
678	.woocommerce-Price-amount {
679	font-weight: normal;
680	}
681	}
682
683	// Style the payment gateway selection input--improve the size of the click target, etc
684	input[type="radio"]="radio""][name="payment_method"]="payment_method""],
685	input[type="radio"]="radio""].shipping_method {
686	display: none;
687
688	& + label {
689
690	&::before {
691	content: "";
692	display: inline-block;
693	width: 1rem;
694	height: 1rem;
695	border: 2px solid var(--wp--preset--color--black);
696	background: var(--wp--preset--color--white);
697	margin-left: 4px;
698	margin-right: 1.2rem;
699	border-radius: 100%;
700	transform: translateY(0.2rem);
701	}
702	}
703
704	& ~ .payment_box {
705	padding-left: 3rem;
706	margin-top: 1rem;
707	}
708
709	&:checked + label {
710
711	&::before {
712	background: radial-gradient(circle at center, black 45%, white 0);
713	}
714	}
715	}
716
717	// Style labels like "Remember me?" or "Ship to different address".
718	label.woocommerce-form__label-for-checkbox {
719	font-weight: normal;
720	cursor: pointer;
721
722	span {
723
724	&::before {
725	content: "";
726	display: inline-block;
727	height: 1rem;
728	width: 1rem;
729	border: 2px solid var(--wp--preset--color--black);
730	background: var(--wp--preset--color--white);
731	margin-right: 0.5rem;
732	transform: translateY(0.2rem);
733	}
734	}
735
736	input[type="checkbox"]="checkbox""] {
737	display: none;
738	}
739
740	input[type="checkbox"]="checkbox""]:checked + span::before {
741	background: var(--wp--preset--color--black);
742	box-shadow: inset 0.2rem 0.2rem var(--wp--preset--color--white), inset -0.2rem -0.2rem var(--wp--preset--color--white);
743	}
744	}
745
746	// Cart totals, Cart page table or Order list in My Account.
747	table.shop_table_responsive {
748	text-align: left;
749
750	th,
751	td {
752	font-size: var(--wp--preset--font-size--small);
753	font-weight: normal;
754	}
755
756	th {
757	padding-bottom: 1rem;
758	}
759
760	tbody {
761
762	tr {
763	border-top: 1px solid var(--wp--preset--color--contrast);
764	}
765
766	td {
767	a.button,
768	button {
769	margin-bottom: 1rem;
770	padding: 0.5rem 1rem 0.5rem 1rem;
771	}
772
773	&.woocommerce-orders-table__cell-order-actions {
774	a.button {
775	display: block;
776
777	@media only screen and (max-width: 768px) {
778	width: 50%;
779	margin-left: auto;
780	}
781	}
782	}
783	}
784	}
785	}
786
787	table.shop_table,
788	table.shop_table_responsive {
789	tbody {
790	.product-name {
791
792	.variation {
793	dt {
794	font-style: italic;
795	margin-right: 0.25rem;
796	float: left;
797	}
798
799	dd {
800	font-style: normal;
801
802	a {
803	font-style: normal;
804	}
805	}
806	}
807	}
808	}
809
810	td,
811	th {
812	padding: 0.5rem;
813	}
814	}
815
816	// Improve styling of the 'Have a coupon?' section on the checkout page.
817	form.checkout_coupon {
818	padding-left: 1.5rem;
819	// 1.5 rem is to account for extra padding we added above.
820	width: calc(100% - 1.5rem);
821
822	.form-row {
823	button[name="apply_coupon"]="apply_coupon""] {
824	margin-top: 0;
825	}
826	}
827	}
828
829	// Hide the dot to the left of list items as we style the checkboxes: Shipping method and Payment method selection.
830	ul.wc_payment_methods,
831	ul.woocommerce-shipping-methods {
832	margin-top: 0;
833	margin-bottom: 0;
834	list-style-type: none;
835	padding-left: 0;
836
837	input[type="radio"]="radio""] {
838	margin-right: 0.6rem;
839	}
840
841	li.wc_payment_method {
842	margin-bottom: 1rem;
843	}
844	}
845
846	// Layout of the checkout: Billing vs Shipping address, Cart overview, etc.
847	.woocommerce-checkout,
848	&.woocommerce-order-pay {
849	display: table;
850
851	h3 {
852	font-family: inherit;
853	font-size: var(--wp--preset--font-size--large);
854	font-weight: 700;
855	}
856
857	.col2-set {
858	width: 43%;
859	float: right;
860	}
861
862	.blockUI.blockOverlay {
863	position: relative;
864	@include loader();
865	}
866
867	#customer_details {
868	width: 53%;
869	float: left;
870
871	.col-1,
872	.col-2 {
873	width: 100%;
874	float: none;
875	}
876	}
877
878	@media only screen and (max-width: 768px) {
879	.col2-set,
880	#customer_details {
881	width: 100%;
882	float: none;
883	}
884	}
885
886	.woocommerce-billing-fields__field-wrapper,
887	.woocommerce-checkout-review-order-table,
888	.woocommerce-checkout-payment,
889	#payment {
890	margin-top: 4rem;
891	}
892
893	.woocommerce-checkout-review-order-table,
894	#order_review .shop_table {
895	border-collapse: collapse;
896	width: 100%;
897
898	thead {
899	display: none;
900	}
901
902	th {
903	text-align: left;
904	font-weight: normal;
905	}
906
907	th,
908	td {
909	padding: 1rem 1rem 1rem 0;
910	vertical-align: text-top;
911	}
912
913	tbody {
914	border-bottom: 1px solid #d2ced2;
915	}
916
917	tr.order-total {
918	border-top: 1px solid #d2ced2;
919	}
920
921	.product-quantity {
922	font-weight: normal;
923	}
924
925	.product-total,
926	.cart-subtotal,
927	.order-total,
928	.tax-rate,
929	input[type="radio"]="radio""].shipping_method:checked + label,
930	input[type="hidden"]="hidden""].shipping_method + label {
931	.woocommerce-Price-amount {
932	font-weight: bold;
933	}
934	}
935	}
936
937	button#place_order {
938	width: 100%;
939	text-transform: uppercase;
940	}
941	}
942
943	/*
944	Thank you page (after checkout).
945	*/
946
947	// Adds a tiny bit of vertical spacing on the Thank you (after checkout) page.
948	.woocommerce-order > * {
949	margin-bottom: var(--wp--style--block-gap);
950	}
951
952	// Bottom section of the Thank you page---customer details: align, add border, make it look nice.
953	.woocommerce-customer-details {
954	address {
955	border: 1px solid var(--wp--preset--color--black);
956	font-style: inherit;
957
958	p[class^="woocommerce-customer-details--"]^="woocommerce-customer-details--""] {
959	&:first-of-type {
960	margin-top: 2rem;
961	}
962
963	margin-top: 1rem;
964	margin-bottom: 0;
965	}
966
967	.woocommerce-customer-details--phone::before {
968	content: "\01F4DE";
969	margin-right: 1rem;
970	}
971
972	.woocommerce-customer-details--email::before {
973	content: "\2709";
974	margin-right: 1rem;
975	font-size: 1.8rem;
976	}
977	}
978	}
979
980	// Better styling for Order line items on the Thank you page: create a table and align it to the left side.
981	.woocommerce-table--order-details {
982	border: 1px solid var(--wp--preset--color--black);
983
984	th,
985	td {
986	text-align: left;
987	border-top: 1px solid var(--wp--preset--color--black);
988	border-bottom: 1px solid var(--wp--preset--color--black);
989	font-weight: normal;
990	}
991
992	thead th {
993	text-transform: uppercase;
994	}
995
996	.wc-item-meta {
997	list-style-type: none;
998	padding-inline-start: 2rem;
999
1000	li > p {
1001	margin-block-start: 0.3rem;
1002	}
1003	}
1004	}
1005	}
1006
1007	/*
1008	My Account
1009	*/
1010
1011	.woocommerce-account {
1012
1013	// Make sure the floated content of My Account section doesn't overlap with the footer.
1014	.woocommerce {
1015	overflow: auto;
1016
1017	table.woocommerce-table--order-downloads,
1018	table.woocommerce-MyAccount-orders {
1019	thead tr {
1020	border-top: 2px solid var(--wp--preset--color--contrast);
1021
1022	span {
1023	font-weight: bold;
1024	}
1025
1026	}
1027
1028	tbody a.button {
1029	margin: calc(var(--wp--style--block-gap) / 6) 0;
1030	}
1031	}
1032
1033	.woocommerce-MyAccount-navigation li {
1034	&.is-active a {
1035	&::before {
1036	content: "> ";
1037	}
1038	}
1039
1040	a {
1041	text-decoration: initial;
1042
1043	&:hover {
1044	text-decoration: initial;
1045	}
1046	}
1047	}
1048
1049
1050	}
1051
1052	// Make the Log in form on My Account page less wide.
1053	.woocommerce-form-login {
1054	max-width: 516px;
1055	margin: 0 auto;
1056	}
1057
1058	}
1059
1060	// TODO: This could look nicer.
1061	.select2-container {
1062
1063	.select2-selection,
1064	.select2-dropdown {
1065	border: 1px solid var(--wp--preset--color--black);
1066	border-radius: 0;
1067	}
1068
1069	.select2-dropdown {
1070	border-top: 0;
1071
1072	.select2-search__field {
1073	border: 1px solid var(--wp--preset--color--black);
1074	border-radius: 0;
1075	}
1076	}
1077	}
1078
1079
1080	// Store-wide notice
1081	.theme-twentytwentythree .woocommerce-store-notice {
1082	color: black;
1083	border-top: 2px solid var(--wp--preset--color--primary);
1084	background: lightgray;
1085	padding: 2rem;
1086	position: fixed;
1087	bottom: 0;
1088	left: 0;
1089	width: 100%;
1090	z-index: 999;
1091	margin: 0;
1092
1093	.woocommerce-store-notice__dismiss-link {
1094	float: right;
1095	margin-right: 4rem;
1096	color: inherit;
1097	}
1098	}
1099
1100	/*
1101	Notice messages (like 'Added to cart', 'Billing address needs to be filled in', etc.
1102	*/
1103	.woocommerce-message,
1104	.woocommerce-error,
1105	.woocommerce-info {
1106	background-color: rgba( 176, 176, 176, 0.6 );
1107	color: #222;
1108	border-top-color: var( --wp--preset--color--primary );
1109	border-top-style: solid;
1110	border-top-width: 2px;
1111	padding: 1rem 1.5rem 1rem 3.5rem;
1112	margin-bottom: 2rem;
1113	list-style: none;
1114	font-size: var( --wp--preset--font-size--small );
1115	position: relative;
1116
1117	@include clearfix();
1118
1119	&[role='alert']='alert']::before {
1120	background: #d5d5d5;
1121	color: black;
1122	border-radius: 5rem;
1123	font-size: 1rem;
1124	content: "\e028";
1125	display: inline-block;
1126	margin-right: 1rem;
1127	height: 1.5em;
1128	line-height: 1.5em;
1129	text-align: center;
1130	width: 1.5em;
1131	position: absolute;
1132	top: 1em;
1133	left: 1.5em;
1134	}
1135
1136	a.button {
1137	margin-bottom: -0.5rem;
1138	margin-top: -0.5rem;
1139	border: none;
1140	padding: 0.5rem 1rem;
1141	}
1142	}
1143
1144	.woocommerce-error {
1145	&[role='alert']='alert']::before {
1146	content: 'X';
1147	}
1148	}
1149
1150	.woocommerce-message {
1151	&[role='alert']='alert']::before {
1152	content: '\2713';
1153	}
1154	}
1155