store-notices-rtl.css — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / store-notices-rtl.css

woocommerce / assets / client / blocks Last commit date

store-notices-rtl.css

419 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/js/base/components/notice-banner/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-components-notice-banner {
72	display: flex;
73	align-items: stretch;
74	align-content: flex-start;
75	color: #2f2f2f;
76	padding: 16px !important;
77	gap: 12px;
78	margin: 16px 0;
79	border-radius: 4px;
80	border-color: #2f2f2f;
81	font-weight: 400;
82	line-height: 1.5;
83	border: 1px solid;
84	font-size: 0.875em;
85	background-color: #fff;
86	box-sizing: border-box;
87	}
88	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
89	padding-left: 16px;
90	-ms-grid-row-align: center;
91	align-self: center;
92	white-space: normal;
93	flex-basis: 100%;
94	}
95	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content:last-child {
96	padding-left: 0;
97	}
98	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary {
99	margin: 0 0 8px;
100	font-weight: 600;
101	}
102	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ul,
103	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ol {
104	margin: 0 24px 0 0;
105	padding: 0;
106	}
107	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ul li::after,
108	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ol li::after {
109	content: "";
110	clear: both;
111	display: block;
112	}
113	.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
114	float: left;
115	color: #2f2f2f !important;
116	background: transparent !important;
117	padding: 0 !important;
118	margin: 0;
119	border: 0;
120	-moz-appearance: none;
121	appearance: none;
122	opacity: 0.6;
123	text-decoration-line: underline;
124	text-underline-position: under;
125	}
126	.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 {
127	opacity: 1;
128	}
129	.wc-block-components-notice-banner > svg {
130	fill: #fff;
131	border-radius: 50%;
132	padding: 2px;
133	background-color: #2f2f2f;
134	flex-shrink: 0;
135	flex-grow: 0;
136	height: 100%;
137	}
138	.wc-block-components-notice-banner > .wc-block-components-button {
139	margin: 6px auto 0 0 !important;
140	background: transparent none !important;
141	box-shadow: none !important;
142	outline: none !important;
143	border: 0 !important;
144	padding: 0 !important;
145	height: 16px !important;
146	width: 16px !important;
147	min-height: auto !important;
148	color: #2f2f2f !important;
149	min-width: 0 !important;
150	flex: 0 0 16px;
151	opacity: 0.6;
152	}
153	.wc-block-components-notice-banner > .wc-block-components-button > svg {
154	margin: 0 !important;
155	}
156	.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 {
157	opacity: 1;
158	}
159
160	.wc-block-components-notice-banner.is-error {
161	border-color: #cc1818;
162	background-color: #fff0f0;
163	}
164	.wc-block-components-notice-banner.is-error > svg {
165	background-color: #cc1818;
166	transform: rotate(-180deg);
167	}
168
169	.wc-block-components-notice-banner.is-warning {
170	border-color: #f0b849;
171	background-color: #fffbf4;
172	}
173	.wc-block-components-notice-banner.is-warning > svg {
174	background-color: #f0b849;
175	transform: rotate(-180deg);
176	}
177
178	.wc-block-components-notice-banner.is-success {
179	border-color: #4ab866;
180	background-color: #f4fff7;
181	}
182	.wc-block-components-notice-banner.is-success > svg {
183	background-color: #4ab866;
184	}
185
186	.wc-block-components-notice-banner.is-info {
187	border-color: #007cba;
188	background-color: #f4f8ff;
189	}
190	.wc-block-components-notice-banner.is-info > svg {
191	background-color: #007cba;
192	}
193	/!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
194	!* 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/button/style.scss *!
195	\******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
196	/**
197	* Converts a hex value into the rgb equivalent.
198	*
199	* @param {string} hex - the hexadecimal value to convert
200	* @return {string} comma separated rgb values
201	*/
202	/**
203	* Colors
204	*/
205	/**
206	* SCSS Variables.
207	*
208	* Please use variables from this sheet to ensure consistency across the UI.
209	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
210	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
211	*/
212	/**
213	* Converts a hex value into the rgb equivalent.
214	*
215	* @param {string} hex - the hexadecimal value to convert
216	* @return {string} comma separated rgb values
217	*/
218	/**
219	* Colors
220	*/
221	/**
222	* Fonts & basic variables.
223	*/
224	/**
225	* Grid System.
226	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
227	*/
228	/**
229	* Dimensions.
230	*/
231	/**
232	* Shadows.
233	*/
234	/**
235	* Editor widths.
236	*/
237	/**
238	* Block & Editor UI.
239	*/
240	/**
241	* Block paddings.
242	*/
243	/**
244	* React Native specific.
245	* These variables do not appear to be used anywhere else.
246	*/
247	/* stylelint-disable block-closing-brace-newline-after */
248	/* stylelint-enable */
249	@keyframes spinner__animation {
250	0% {
251	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
252	transform: rotate(0deg);
253	}
254	100% {
255	transform: rotate(-360deg);
256	}
257	}
258	@keyframes loading__animation {
259	100% {
260	transform: translateX(-100%);
261	}
262	}
263	.wc-block-components-button:not(.is-link) {
264	align-items: center;
265	display: inline-flex;
266	height: auto;
267	justify-content: center;
268	text-align: center;
269	position: relative;
270	transition: box-shadow 0.1s linear;
271	}
272	.wc-block-components-button:not(.is-link):focus {
273	box-shadow: 0 0 0 2px #0675c4;
274	box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #0675c4;
275	outline: 3px solid transparent;
276	}
277	.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
278	display: block;
279	}
280	.wc-block-components-button:not(.is-link) .wc-block-components-button__text > svg {
281	fill: currentColor;
282	}
283	.wc-block-components-button:not(.is-link) .wc-block-components-spinner + .wc-block-components-button__text {
284	visibility: hidden;
285	}
286	.wc-block-components-button:not(.is-link).text {
287	color: #1e1e1e;
288	}
289	.wc-block-components-button:not(.is-link).text:hover {
290	opacity: 0.9;
291	}
292	.wc-block-components-button:not(.is-link).outlined {
293	background: transparent;
294	color: currentColor;
295	}
296	.wc-block-components-button:not(.is-link).outlined:not(:focus) {
297	box-shadow: inset 0 0 0 1px currentColor;
298	}
299	.wc-block-components-button:not(.is-link).outlined:disabled, .wc-block-components-button:not(.is-link).outlined:hover, .wc-block-components-button:not(.is-link).outlined:focus, .wc-block-components-button:not(.is-link).outlined:active {
300	background-color: #1e1e1e;
301	color: #fff;
302	}
303	.wc-block-components-button:not(.is-link).outlined:hover {
304	background-color: #1e1e1e;
305	color: #fff;
306	opacity: 1;
307	}
308
309	body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
310	min-height: 3em;
311	}
312	body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus {
313	box-shadow: 0 0 0 2px #0675c4;
314	box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #0675c4;
315	outline: 3px solid transparent;
316	}
317	body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link).text {
318	color: #1e1e1e;
319	}
320	body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link).text:hover {
321	opacity: 0.9;
322	}
323	/!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!\
324	!* 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]!./packages/components/spinner/style.scss *!
325	\*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
326	/**
327	* Converts a hex value into the rgb equivalent.
328	*
329	* @param {string} hex - the hexadecimal value to convert
330	* @return {string} comma separated rgb values
331	*/
332	/**
333	* Colors
334	*/
335	/**
336	* SCSS Variables.
337	*
338	* Please use variables from this sheet to ensure consistency across the UI.
339	* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
340	* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
341	*/
342	/**
343	* Converts a hex value into the rgb equivalent.
344	*
345	* @param {string} hex - the hexadecimal value to convert
346	* @return {string} comma separated rgb values
347	*/
348	/**
349	* Colors
350	*/
351	/**
352	* Fonts & basic variables.
353	*/
354	/**
355	* Grid System.
356	* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
357	*/
358	/**
359	* Dimensions.
360	*/
361	/**
362	* Shadows.
363	*/
364	/**
365	* Editor widths.
366	*/
367	/**
368	* Block & Editor UI.
369	*/
370	/**
371	* Block paddings.
372	*/
373	/**
374	* React Native specific.
375	* These variables do not appear to be used anywhere else.
376	*/
377	/* stylelint-disable block-closing-brace-newline-after */
378	/* stylelint-enable */
379	@keyframes spinner__animation {
380	0% {
381	animation-timing-function: cubic-bezier(0.5856, 0.0703, 0.4143, 0.9297);
382	transform: rotate(0deg);
383	}
384	100% {
385	transform: rotate(-360deg);
386	}
387	}
388	@keyframes loading__animation {
389	100% {
390	transform: translateX(-100%);
391	}
392	}
393	.wc-block-components-spinner {
394	position: absolute;
395	width: 100%;
396	height: 100%;
397	color: inherit;
398	box-sizing: content-box;
399	text-align: center;
400	font-size: 1.25em;
401	}
402	.wc-block-components-spinner::after {
403	content: " ";
404	position: absolute;
405	top: 50%;
406	right: 50%;
407	margin: -0.5em -0.5em 0 0;
408	width: 1em;
409	height: 1em;
410	box-sizing: border-box;
411	transform-origin: 50% 50%;
412	transform: translateZ(0) scale(0.5);
413	backface-visibility: hidden;
414	border-radius: 50%;
415	border: 0.2em solid currentColor;
416	border-right-color: transparent;
417	animation: spinner__animation 1s infinite linear;
418	}
419