product-button.css — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / product-button.css

woocommerce / assets / client / blocks Last commit date

product-button.css

262 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/atomic/blocks/product-elements/button/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	.wp-block-button.wc-block-components-product-button {
72	word-break: break-word;
73	white-space: normal;
74	display: flex;
75	justify-content: center;
76	flex-direction: column;
77	align-items: center;
78	gap: 12px;
79	}
80	.wp-block-button.wc-block-components-product-button .wp-block-button__link {
81	word-break: break-word;
82	white-space: normal;
83	display: inline-flex;
84	justify-content: center;
85	text-align: center;
86	font-size: 1em;
87	}
88	.wp-block-button.wc-block-components-product-button .wp-block-button__link.loading {
89	opacity: 0.25;
90	}
91	.wp-block-button.wc-block-components-product-button .wp-block-button__link.loading::after {
92	font-family: WooCommerce; /* stylelint-disable-line */
93	content: "\e031";
94	animation: spin 2s linear infinite;
95	margin-right: 0;
96	margin-left: 0.5em;
97	display: inline-block;
98	width: auto;
99	height: auto;
100	}
101	.wp-block-button.wc-block-components-product-button a[hidden] {
102	display: none;
103	}
104	@keyframes slideOut {
105	from {
106	transform: translateY(0);
107	}
108	to {
109	transform: translateY(-100%);
110	}
111	}
112	@keyframes slideIn {
113	from {
114	transform: translateY(90%);
115	opacity: 0;
116	}
117	to {
118	transform: translate(0);
119	opacity: 1;
120	}
121	}
122	.wp-block-button.wc-block-components-product-button.align-left {
123	align-items: flex-start;
124	}
125	.wp-block-button.wc-block-components-product-button.align-right {
126	align-items: flex-end;
127	}
128	.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
129	border-style: none;
130	display: inline-flex;
131	justify-content: center;
132	white-space: normal;
133	word-break: break-word;
134	overflow: hidden;
135	align-items: center;
136	line-height: inherit;
137	}
138	.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button span.wc-block-slide-out {
139	animation: slideOut 0.1s linear 1 normal forwards;
140	}
141	.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button span.wc-block-slide-in {
142	animation: slideIn 0.1s linear 1 normal;
143	}
144	.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button--placeholder {
145	outline: 0 !important;
146	border: 0 !important;
147	background-color: currentColor !important;
148	color: currentColor !important;
149	width: 100%;
150	border-radius: 0.25rem;
151	display: block;
152	line-height: 1;
153	position: relative !important;
154	overflow: hidden !important;
155	max-width: 100% !important;
156	pointer-events: none;
157	box-shadow: none;
158	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
159	opacity: 0.15;
160	min-width: 8em;
161	min-height: 3em;
162	}
163	.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button--placeholder > * {
164	visibility: hidden;
165	}
166	.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button--placeholder::after {
167	content: " ";
168	display: block;
169	position: absolute;
170	left: 0;
171	right: 0;
172	top: 0;
173	height: 100%;
174	background-repeat: no-repeat;
175	background-image: linear-gradient(90deg, currentColor, rgba(245, 245, 245, 0.3019607843), currentColor);
176	transform: translateX(-100%);
177	animation: loading__animation 1.5s ease-in-out infinite;
178	}
179	@media screen and (prefers-reduced-motion: reduce) {
180	.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button--placeholder {
181	animation: none;
182	}
183	}
184	.wc-block-all-products .wp-block-button.wc-block-components-product-button {
185	margin-bottom: 12px;
186	}
187
188	.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
189	outline: 0 !important;
190	border: 0 !important;
191	background-color: currentColor !important;
192	color: currentColor !important;
193	width: 100%;
194	border-radius: 0.25rem;
195	display: block;
196	line-height: 1;
197	position: relative !important;
198	overflow: hidden !important;
199	max-width: 100% !important;
200	pointer-events: none;
201	box-shadow: none;
202	z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
203	opacity: 0.15;
204	min-width: 8em;
205	min-height: 3em;
206	}
207	.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button > * {
208	visibility: hidden;
209	}
210	.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button::after {
211	content: " ";
212	display: block;
213	position: absolute;
214	left: 0;
215	right: 0;
216	top: 0;
217	height: 100%;
218	background-repeat: no-repeat;
219	background-image: linear-gradient(90deg, currentColor, rgba(245, 245, 245, 0.3019607843), currentColor);
220	transform: translateX(-100%);
221	animation: loading__animation 1.5s ease-in-out infinite;
222	}
223	@media screen and (prefers-reduced-motion: reduce) {
224	.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
225	animation: none;
226	}
227	}
228
229	.theme-twentytwentyone .editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link {
230	background-color: var(--button--color-background);
231	color: var(--button--color-text);
232	border-color: var(--button--color-background);
233	}
234
235	.wp-block-button.is-style-outline .wp-block-button__link {
236	border: 2px solid currentColor;
237	}
238	.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
239	color: currentColor;
240	}
241	.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
242	background-color: transparent;
243	background-image: none;
244	}
245
246	.wp-block-button.has-custom-width .wp-block-button__link {
247	box-sizing: border-box;
248	}
249	.wp-block-button.wp-block-button__width-25 .wp-block-button__link {
250	width: 25%;
251	}
252	.wp-block-button.wp-block-button__width-50 .wp-block-button__link {
253	width: 50%;
254	}
255	.wp-block-button.wp-block-button__width-75 .wp-block-button__link {
256	width: 75%;
257	}
258	.wp-block-button.wp-block-button__width-100 .wp-block-button__link {
259	width: 100%;
260	}
261
262	/# sourceMappingURL=product-button.css.map/