wc-blocks.css — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / wc-blocks.css

woocommerce / assets / client / blocks Last commit date

wc-blocks.css

592 lines

1	/!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
2	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/css/style.scss *!
3	\********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
4	/**
5	* Converts a hex value into the rgb equivalent.
6	*
7	* @param {string} hex - the hexadecimal value to convert
8	* @return {string} comma separated rgb values
9	*/
10	/**
11	* Colors
12	*/
13	/**
14	* SCSS Variables.
15	*
16	* Please use variables from this sheet to ensure consistency across the UI.
17	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
18	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
19	*/
20	/**
21	* Converts a hex value into the rgb equivalent.
22	*
23	* @param {string} hex - the hexadecimal value to convert
24	* @return {string} comma separated rgb values
25	*/
26	/**
27	* Colors
28	*/
29	/**
30	* Fonts & basic variables.
31	*/
32	/**
33	* Grid System.
34	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
35	*/
36	/**
37	* Dimensions.
38	*/
39	/**
40	* Shadows.
41	*/
42	/**
43	* Editor widths.
44	*/
45	/**
46	* Block & Editor UI.
47	*/
48	/**
49	* Block paddings.
50	*/
51	/**
52	* React Native specific.
53	* These variables do not appear to be used anywhere else.
54	*/
55	/* stylelint-disable block-closing-brace-newline-after */
56	/* stylelint-enable */
57	@keyframes spinner__animation {
58	0% {
59	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
60	transform: rotate(0deg);
61	}
62	100% {
63	transform: rotate(360deg);
64	}
65	}
66	@keyframes loading__animation {
67	100% {
68	transform: translateX(100%);
69	}
70	}
71	.wc-block-grid__products .wc-block-grid__product-image {
72	text-decoration: none;
73	display: block;
74	position: relative;
75	}
76	.wc-block-grid__products .wc-block-grid__product-image a {
77	text-decoration: none;
78	border: 0;
79	outline: 0;
80	box-shadow: none;
81	}
82	.wc-block-grid__products .wc-block-grid__product-image img {
83	height: auto;
84	width: auto;
85	max-width: 100%;
86	}
87	.wc-block-grid__products .wc-block-grid__product-image img[hidden] {
88	display: none;
89	}
90	.wc-block-grid__products .wc-block-grid__product-image img[alt=""] {
91	border: 1px solid #f2f2f2;
92	}
93
94	.edit-post-visual-editor .editor-block-list__block .wc-block-grid__product-title,
95	.editor-styles-wrapper .wc-block-grid__product-title,
96	.wc-block-grid__product-title {
97	font-family: inherit;
98	line-height: 1.2;
99	font-weight: 700;
100	padding: 0;
101	color: inherit;
102	font-size: inherit;
103	display: block;
104	}
105
106	.wc-block-grid__product-price {
107	display: block;
108	}
109	.wc-block-grid__product-price .wc-block-grid__product-price__regular {
110	margin-right: 0.5em;
111	}
112
113	.wc-block-grid__product-add-to-cart.wp-block-button {
114	word-break: break-word;
115	white-space: normal;
116	}
117	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
118	word-break: break-word;
119	white-space: normal;
120	margin-right: auto !important;
121	margin-left: auto !important;
122	display: inline-flex;
123	justify-content: center;
124	text-align: center;
125	font-size: 1em;
126	}
127	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.loading {
128	opacity: 0.25;
129	}
130	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.added::after {
131	font-family: WooCommerce; /* stylelint-disable-line */
132	content: "\e017";
133	margin-left: 0.5em;
134	display: inline-block;
135	width: auto;
136	height: auto;
137	}
138	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link.loading::after {
139	font-family: WooCommerce; /* stylelint-disable-line */
140	content: "\e031";
141	animation: spin 2s linear infinite;
142	margin-left: 0.5em;
143	display: inline-block;
144	width: auto;
145	height: auto;
146	}
147
148	.has-5-columns:not(.alignfull) .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after,
149	.has-6-columns .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after,
150	.has-7-columns .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after,
151	.has-8-columns .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after,
152	.has-9-columns .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link::after {
153	content: "";
154	margin: 0;
155	}
156
157	.wc-block-grid__product-rating {
158	display: block;
159	}
160	.wc-block-grid__product-rating .wc-block-grid__product-rating__stars,
161	.wc-block-grid__product-rating .star-rating {
162	overflow: hidden;
163	position: relative;
164	width: 5.3em;
165	height: 1.618em;
166	line-height: 1.618;
167	font-size: 1em;
168	/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
169	font-family: star;
170	font-weight: 400;
171	margin: 0 auto;
172	text-align: left;
173	}
174	.wc-block-grid__product-rating .wc-block-grid__product-rating__stars::before,
175	.wc-block-grid__product-rating .star-rating::before {
176	content: "SSSSS";
177	top: 0;
178	left: 0;
179	right: 0;
180	position: absolute;
181	opacity: 0.5;
182	white-space: nowrap;
183	}
184	.wc-block-grid__product-rating .wc-block-grid__product-rating__stars span,
185	.wc-block-grid__product-rating .star-rating span {
186	overflow: hidden;
187	top: 0;
188	left: 0;
189	right: 0;
190	position: absolute;
191	padding-top: 1.5em;
192	}
193	.wc-block-grid__product-rating .wc-block-grid__product-rating__stars span::before,
194	.wc-block-grid__product-rating .star-rating span::before {
195	content: "SSSSS";
196	color: inherit;
197	top: 0;
198	left: 0;
199	right: 0;
200	position: absolute;
201	white-space: nowrap;
202	}
203
204	.wc-block-grid__product-image .wc-block-grid__product-onsale,
205	.wc-block-grid .wc-block-grid__product-onsale {
206	font-size: 0.875em;
207	padding: 0.25em 0.75em;
208	display: inline-block;
209	width: auto;
210	border: 1px solid #43454b;
211	border-radius: 4px;
212	color: #43454b;
213	background: #fff;
214	text-align: center;
215	text-transform: uppercase;
216	font-weight: 600;
217	z-index: 9;
218	position: absolute;
219	top: 4px;
220	right: 4px;
221	left: auto;
222	}
223
224	.wc-block-grid__product .wc-block-grid__product-link,
225	.wc-block-grid__product .wc-block-grid__product-image {
226	display: inline-block;
227	position: relative;
228	}
229	.wc-block-grid__product .wc-block-grid__product-image:not(.wc-block-components-product-image),
230	.wc-block-grid__product .wc-block-grid__product-title {
231	margin: 0 0 12px;
232	}
233	.wc-block-grid__product .wc-block-grid__product-price,
234	.wc-block-grid__product .wc-block-grid__product-rating,
235	.wc-block-grid__product .wc-block-grid__product-add-to-cart,
236	.wc-block-grid__product .wc-block-grid__product-onsale {
237	margin: 0 auto 12px;
238	}
239
240	.theme-twentysixteen .wc-block-grid .price ins {
241	color: #77a464;
242	}
243
244	.theme-twentynineteen .wc-block-grid__product {
245	font-size: 0.88889em;
246	}
247	.theme-twentynineteen .wc-block-grid__product-title,
248	.theme-twentynineteen .wc-block-grid__product-onsale,
249	.theme-twentynineteen .wc-block-components-product-title,
250	.theme-twentynineteen .wc-block-components-product-sale-badge {
251	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
252	}
253	.theme-twentynineteen .wc-block-grid__product-title::before {
254	display: none;
255	}
256	.theme-twentynineteen .wc-block-grid__product-onsale,
257	.theme-twentynineteen .wc-block-components-product-sale-badge {
258	line-height: 1;
259	}
260	.theme-twentynineteen .editor-styles-wrapper .wp-block-button .wp-block-button__link:not(.has-text-color) {
261	color: #fff;
262	}
263
264	.theme-twentytwenty .wc-block-grid__product-link {
265	color: #000;
266	}
267	.theme-twentytwenty .wc-block-grid__product-title,
268	.theme-twentytwenty .wc-block-components-product-title {
269	font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
270	color: #cd2653;
271	font-size: 1em;
272	}
273	.theme-twentytwenty .wp-block-columns .wc-block-components-product-title {
274	margin-top: 0;
275	}
276	.theme-twentytwenty .wc-block-grid__product-price__value,
277	.theme-twentytwenty .wc-block-grid__product-price .woocommerce-Price-amount,
278	.theme-twentytwenty .wc-block-components-product-price__value,
279	.theme-twentytwenty .wc-block-components-product-price .woocommerce-Price-amount {
280	font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
281	font-size: 0.9em;
282	}
283	.theme-twentytwenty .wc-block-grid__product-price del,
284	.theme-twentytwenty .wc-block-components-product-price del {
285	opacity: 0.5;
286	}
287	.theme-twentytwenty .wc-block-grid__product-price ins,
288	.theme-twentytwenty .wc-block-components-product-price ins {
289	text-decoration: none;
290	}
291	.theme-twentytwenty .wc-block-grid__product-rating,
292	.theme-twentytwenty .star-rating {
293	font-size: 0.7em;
294	}
295	.theme-twentytwenty .wc-block-grid__product-rating .wc-block-grid__product-rating__stars,
296	.theme-twentytwenty .wc-block-grid__product-rating .wc-block-components-product-rating__stars,
297	.theme-twentytwenty .star-rating .wc-block-grid__product-rating__stars,
298	.theme-twentytwenty .star-rating .wc-block-components-product-rating__stars {
299	line-height: 1;
300	}
301	.theme-twentytwenty .wc-block-grid__product-add-to-cart > .wp-block-button__link,
302	.theme-twentytwenty .wc-block-components-product-button > .wp-block-button__link {
303	font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
304	}
305	.theme-twentytwenty .wc-block-grid__products .wc-block-grid__product-onsale,
306	.theme-twentytwenty .wc-block-components-product-sale-badge {
307	background: #cd2653;
308	color: #fff;
309	font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, sans-serif;
310	font-weight: 700;
311	letter-spacing: -0.02em;
312	line-height: 1.2;
313	text-transform: uppercase;
314	}
315	.theme-twentytwenty .wc-block-grid__products .wc-block-components-product-sale-badge {
316	position: static;
317	}
318	.theme-twentytwenty .wc-block-grid__products .wc-block-grid__product-image .wc-block-components-product-sale-badge {
319	position: absolute;
320	}
321	.theme-twentytwenty .wc-block-grid__products .wc-block-grid__product-onsale:not(.wc-block-components-product-sale-badge) {
322	position: absolute;
323	right: 4px;
324	top: 4px;
325	z-index: 1;
326	}
327	.theme-twentytwenty .wc-block-active-filters__title,
328	.theme-twentytwenty .wc-block-attribute-filter__title,
329	.theme-twentytwenty .wc-block-price-filter__title,
330	.theme-twentytwenty .wc-block-stock-filter__title {
331	font-size: 1em;
332	}
333	.theme-twentytwenty .wc-block-active-filters .wc-block-active-filters__clear-all {
334	font-size: 0.75em;
335	}
336	.theme-twentytwenty .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
337	font-size: 0.75em;
338	}
339	@media only screen and (min-width: 768px) {
340	.theme-twentytwenty .wc-block-grid__products .wc-block-grid__product-onsale {
341	font-size: 0.875em;
342	padding: 0.5em;
343	}
344	}
345	@media only screen and (min-width: 1168px) {
346	.theme-twentytwenty .wc-block-grid__products .wc-block-grid__product-onsale {
347	font-size: 0.875em;
348	padding: 0.5em;
349	}
350	}
351
352	.theme-twentytwentytwo .wc-block-grid__product-add-to-cart .added_to_cart {
353	margin-top: 12px;
354	display: block;
355	}
356	.theme-twentytwentytwo .wc-block-components-product-price ins,
357	.theme-twentytwentytwo .wc-block-grid__product-price ins {
358	text-decoration: none;
359	}
360
361	.screen-reader-text {
362	border: 0;
363	clip: rect(1px, 1px, 1px, 1px);
364	clip-path: inset(50%);
365	height: 1px;
366	width: 1px;
367	margin: -1px;
368	overflow: hidden;
369	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
370	overflow-wrap: normal !important;
371	word-wrap: normal !important;
372	padding: 0;
373	position: absolute !important;
374	}
375
376	.screen-reader-text:focus {
377	background-color: #fff;
378	border-radius: 3px;
379	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
380	clip: auto !important;
381	clip-path: none;
382	color: #2b2d2f;
383	display: block;
384	font-size: 0.875rem;
385	font-weight: 700;
386	height: auto;
387	left: 5px;
388	line-height: normal;
389	padding: 15px 23px 14px;
390	text-decoration: none;
391	top: 5px;
392	width: auto;
393	z-index: 100000;
394	}
395
396	.wp-block-group.woocommerce.product .up-sells.upsells.products {
397	max-width: var(--wp--style--global--wide-size);
398	}
399	/!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
400	!* css ../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.88.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.32_webpack@5.88.2/node_modules/postcss-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@10.1.0_sass@1.69.5_webpack@5.88.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/js/base/components/notice-banner/style.scss *!
401	\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
402	/**
403	* Converts a hex value into the rgb equivalent.
404	*
405	* @param {string} hex - the hexadecimal value to convert
406	* @return {string} comma separated rgb values
407	*/
408	/**
409	* Colors
410	*/
411	/**
412	* SCSS Variables.
413	*
414	* Please use variables from this sheet to ensure consistency across the UI.
415	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
416	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
417	*/
418	/**
419	* Converts a hex value into the rgb equivalent.
420	*
421	* @param {string} hex - the hexadecimal value to convert
422	* @return {string} comma separated rgb values
423	*/
424	/**
425	* Colors
426	*/
427	/**
428	* Fonts & basic variables.
429	*/
430	/**
431	* Grid System.
432	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
433	*/
434	/**
435	* Dimensions.
436	*/
437	/**
438	* Shadows.
439	*/
440	/**
441	* Editor widths.
442	*/
443	/**
444	* Block & Editor UI.
445	*/
446	/**
447	* Block paddings.
448	*/
449	/**
450	* React Native specific.
451	* These variables do not appear to be used anywhere else.
452	*/
453	/* stylelint-disable block-closing-brace-newline-after */
454	/* stylelint-enable */
455	@keyframes spinner__animation {
456	0% {
457	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
458	transform: rotate(0deg);
459	}
460	100% {
461	transform: rotate(360deg);
462	}
463	}
464	@keyframes loading__animation {
465	100% {
466	transform: translateX(100%);
467	}
468	}
469	.wc-block-components-notice-banner {
470	display: flex;
471	align-items: stretch;
472	align-content: flex-start;
473	color: #2f2f2f;
474	padding: 16px !important;
475	gap: 12px;
476	margin: 16px 0;
477	border-radius: 4px;
478	border-color: #2f2f2f;
479	font-weight: 400;
480	line-height: 1.5;
481	border: 1px solid;
482	font-size: 0.875em;
483	background-color: #fff;
484	box-sizing: border-box;
485	}
486	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
487	padding-right: 16px;
488	-ms-grid-row-align: center;
489	align-self: center;
490	white-space: normal;
491	flex-basis: 100%;
492	}
493	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content:last-child {
494	padding-right: 0;
495	}
496	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary {
497	margin: 0 0 8px;
498	font-weight: 600;
499	}
500	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ul,
501	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ol {
502	margin: 0 0 0 24px;
503	padding: 0;
504	}
505	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ul li::after,
506	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ol li::after {
507	content: "";
508	clear: both;
509	display: block;
510	}
511	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
512	float: right;
513	color: #2f2f2f !important;
514	background: transparent !important;
515	padding: 0 !important;
516	margin: 0;
517	border: 0;
518	-moz-appearance: none;
519	appearance: none;
520	opacity: 0.6;
521	text-decoration-line: underline;
522	text-underline-position: under;
523	}
524	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover, .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:focus, .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:active {
525	opacity: 1;
526	}
527	.wc-block-components-notice-banner > svg {
528	fill: #fff;
529	border-radius: 50%;
530	padding: 2px;
531	background-color: #2f2f2f;
532	flex-shrink: 0;
533	flex-grow: 0;
534	height: 100%;
535	}
536	.wc-block-components-notice-banner > .wc-block-components-button {
537	margin: 6px 0 0 auto !important;
538	background: transparent none !important;
539	box-shadow: none !important;
540	outline: none !important;
541	border: 0 !important;
542	padding: 0 !important;
543	height: 16px !important;
544	width: 16px !important;
545	min-height: auto !important;
546	color: #2f2f2f !important;
547	min-width: 0 !important;
548	flex: 0 0 16px;
549	opacity: 0.6;
550	}
551	.wc-block-components-notice-banner > .wc-block-components-button > svg {
552	margin: 0 !important;
553	}
554	.wc-block-components-notice-banner > .wc-block-components-button:hover, .wc-block-components-notice-banner > .wc-block-components-button:focus, .wc-block-components-notice-banner > .wc-block-components-button:active {
555	opacity: 1;
556	}
557
558	.wc-block-components-notice-banner.is-error {
559	border-color: #cc1818;
560	background-color: #fff0f0;
561	}
562	.wc-block-components-notice-banner.is-error > svg {
563	background-color: #cc1818;
564	transform: rotate(180deg);
565	}
566
567	.wc-block-components-notice-banner.is-warning {
568	border-color: #f0b849;
569	background-color: #fffbf4;
570	}
571	.wc-block-components-notice-banner.is-warning > svg {
572	background-color: #f0b849;
573	transform: rotate(180deg);
574	}
575
576	.wc-block-components-notice-banner.is-success {
577	border-color: #4ab866;
578	background-color: #f4fff7;
579	}
580	.wc-block-components-notice-banner.is-success > svg {
581	background-color: #4ab866;
582	}
583
584	.wc-block-components-notice-banner.is-info {
585	border-color: #007cba;
586	background-color: #f4f8ff;
587	}
588	.wc-block-components-notice-banner.is-info > svg {
589	background-color: #007cba;
590	}
591
592	/# sourceMappingURL=wc-blocks.css.map/