variation-gallery-admin.scss — WooCommerce 10.9.4

woocommerce / assets / css / variation-gallery-admin.scss

woocommerce / assets / css Last commit date

variation-gallery-admin.scss

422 lines

1	/**
2	* Variation gallery (classic admin).
3	*/
4
5	/* === Local utility mixins ============================================= */
6
7	/* Stretch a positioned child to fill its containing block. */
8	@mixin fill-parent {
9	position: absolute;
10	inset: 0;
11	}
12
13	/* Flex container that centers a single child both axes. */
14	@mixin center-content {
15	display: flex;
16	align-items: center;
17	justify-content: center;
18	}
19
20	/* Make an <img> behave as a cover-fitted block of its parent's size. */
21	@mixin cover-image {
22	display: block;
23	width: 100%;
24	height: 100%;
25	object-fit: cover;
26	}
27
28	#variable_product_options
29	.woocommerce_variation:has(.wc-variation-gallery-field) {
30	/* === Design tokens ============================================== */
31
32	/* Colors (WP admin palette). */
33	--wc-vg-link: #2271b1;
34	--wc-vg-link-hover: #135e96;
35	--wc-vg-surface: #f0f0f1;
36	--wc-vg-surface-hover: #f6f7f7;
37	--wc-vg-surface-strong: #1d2327;
38	--wc-vg-surface-strongest: #000;
39	--wc-vg-on-surface: #fff;
40	--wc-vg-border: #dcdcde;
41	--wc-vg-border-dashed: #c3c4c7;
42	--wc-vg-border-hover: #8c8f94;
43	--wc-vg-text-strong: #1d2327;
44	--wc-vg-text-muted: #50575e;
45	--wc-vg-text-subtle: #787c82;
46	--wc-vg-text-placeholder: #a7aaad;
47	--wc-vg-focus-ring: rgba(34, 113, 177, 0.4);
48
49	/* Spacing scale (4px base). */
50	--wc-vg-space-1: 4px;
51	--wc-vg-space-2: 6px;
52	--wc-vg-space-3: 8px;
53	--wc-vg-space-4: 10px;
54	--wc-vg-space-5: 12px;
55	--wc-vg-space-6: 24px;
56
57	/* Sizing tokens. */
58	--wc-vg-thumb-size: 40px;
59	--wc-vg-icon-sm: 14px;
60	--wc-vg-icon-md: 20px;
61	--wc-vg-icon-lg: 28px;
62	--wc-vg-icon-xl: 42px;
63	--wc-vg-upload-col-width: 200px;
64
65	/* Radii (aliased onto the spacing scale). */
66	--wc-vg-radius-sm: var(--wc-vg-space-1);
67	--wc-vg-radius-md: var(--wc-vg-space-3);
68
69	/* Elevation. */
70	--wc-vg-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12);
71	--wc-vg-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.2);
72	--wc-vg-elevation-3-hover: 0 1px 4px rgba(0, 0, 0, 0.3),
73	0 0 0 2px var(--wc-vg-focus-ring);
74
75	/* Typography. */
76	--wc-vg-font-size-xs: 12px;
77	--wc-vg-font-size-sm: 13px;
78	--wc-vg-font-weight-medium: 500;
79	--wc-vg-font-weight-semibold: 600;
80
81	/* Motion. */
82	--wc-vg-transition-fast: 120ms ease-out;
83
84	/* === Layout overrides for the gallery's flex row ================= */
85	/* Scoped to the specific .form-flex-box that contains the gallery
86	* field; other variation rows (pricing, weight, dimensions, etc.)
87	* use the same .form-flex-box class and must keep their own layout. */
88
89	.form-flex-box:has(.wc-variation-gallery-field) {
90	align-items: flex-start;
91	gap: var(--wc-vg-space-6);
92	justify-content: flex-start;
93
94	.form-row.upload_image {
95	width: var(--wc-vg-upload-col-width);
96	flex: 0 0 var(--wc-vg-upload-col-width);
97	margin: 0;
98	padding: 0;
99	}
100
101	.form-row.upload_image > a.upload_image_button {
102	display: none;
103	}
104
105	.form-row.form-row-last {
106	flex: 1 1 auto;
107	width: auto;
108	float: none;
109	margin: 0;
110	}
111	}
112
113	.wc-variation-gallery-field__thumbs .ui-sortable-helper {
114	pointer-events: none;
115	}
116	}
117
118	/* === Component ===================================================== */
119
120	#variable_product_options .wc-variation-gallery-field {
121	display: flex;
122	flex-direction: column;
123	gap: var(--wc-vg-space-4);
124	width: 100%;
125	box-sizing: border-box;
126
127	.wc-variation-gallery-field__header {
128	display: flex;
129	align-items: baseline;
130	justify-content: space-between;
131	gap: var(--wc-vg-space-4);
132	}
133
134	.wc-variation-gallery-field__title-block {
135	display: flex;
136	align-items: baseline;
137	gap: var(--wc-vg-space-2);
138	flex-wrap: wrap;
139	}
140
141	.wc-variation-gallery-field__title {
142	font-size: var(--wc-vg-font-size-sm);
143	font-weight: var(--wc-vg-font-weight-semibold);
144	margin: 0;
145	}
146
147	.wc-variation-gallery-field__count {
148	color: var(--wc-vg-text-subtle);
149	font-size: var(--wc-vg-font-size-xs);
150
151	&::before {
152	content: "·";
153	margin-right: var(--wc-vg-space-1);
154	}
155	}
156
157	.wc-variation-gallery-manage {
158	color: var(--wc-vg-link);
159	background: transparent;
160	border: none;
161	padding: 0;
162	cursor: pointer;
163	font-size: var(--wc-vg-font-size-sm);
164	text-decoration: none;
165
166	&:hover,
167	&:focus {
168	color: var(--wc-vg-link-hover);
169	text-decoration: underline;
170	}
171	}
172
173	.wc-variation-gallery-field__hero {
174	position: relative;
175	width: 100%;
176	aspect-ratio: 1 / 1;
177	border-radius: var(--wc-vg-radius-md);
178	overflow: hidden;
179	background: var(--wc-vg-surface);
180	border: 1px solid var(--wc-vg-border);
181	}
182
183	.wc-variation-gallery-field__hero-img {
184	@include fill-parent;
185	@include cover-image;
186	}
187
188	.wc-variation-gallery-field__hero-broken {
189	@include fill-parent;
190	@include center-content;
191	color: var(--wc-vg-text-placeholder);
192
193	.dashicons {
194	font-size: var(--wc-vg-icon-xl);
195	width: var(--wc-vg-icon-xl);
196	height: var(--wc-vg-icon-xl);
197	}
198	}
199
200	.wc-variation-gallery-field__badge {
201	position: absolute;
202	top: var(--wc-vg-space-4);
203	right: var(--wc-vg-space-4);
204	display: inline-flex;
205	align-items: center;
206	gap: var(--wc-vg-space-1);
207	padding: var(--wc-vg-space-2) var(--wc-vg-space-4);
208	background: var(--wc-vg-on-surface);
209	border-radius: var(--wc-vg-radius-sm);
210	font-size: var(--wc-vg-font-size-xs);
211	font-weight: var(--wc-vg-font-weight-semibold);
212	color: var(--wc-vg-text-strong);
213	box-shadow: var(--wc-vg-elevation-1);
214
215	.dashicons {
216	font-size: var(--wc-vg-icon-sm);
217	width: var(--wc-vg-icon-sm);
218	height: var(--wc-vg-icon-sm);
219	line-height: 1;
220	color: var(--wc-vg-link);
221	}
222	}
223
224	.wc-variation-gallery-replace {
225	position: absolute;
226	bottom: var(--wc-vg-space-4);
227	right: var(--wc-vg-space-4);
228	background: var(--wc-vg-surface-strong);
229	color: var(--wc-vg-on-surface);
230	border: none;
231	border-radius: var(--wc-vg-radius-sm);
232	padding: var(--wc-vg-space-2) var(--wc-vg-space-5);
233	font-size: var(--wc-vg-font-size-xs);
234	font-weight: var(--wc-vg-font-weight-medium);
235	cursor: pointer;
236	box-shadow: var(--wc-vg-elevation-2);
237	min-height: 0;
238	line-height: 1.3;
239
240	&:hover,
241	&:focus {
242	background: var(--wc-vg-surface-strongest);
243	color: var(--wc-vg-on-surface);
244	box-shadow: var(--wc-vg-elevation-3-hover);
245	outline: none;
246	}
247	}
248
249	.wc-variation-gallery-field__empty-cta {
250	@include fill-parent;
251	display: inline-flex;
252	flex-direction: column;
253	align-items: center;
254	justify-content: center;
255	gap: var(--wc-vg-space-3);
256	background: transparent;
257	border: 2px dashed var(--wc-vg-border-dashed);
258	border-radius: var(--wc-vg-radius-md);
259	color: var(--wc-vg-text-muted);
260	cursor: pointer;
261	font-size: var(--wc-vg-font-size-sm);
262	transition: background-color var(--wc-vg-transition-fast),
263	border-color var(--wc-vg-transition-fast);
264
265	&:hover,
266	&:focus {
267	background: var(--wc-vg-surface-hover);
268	border-color: var(--wc-vg-link);
269	color: var(--wc-vg-link);
270	outline: none;
271	}
272
273	.dashicons {
274	font-size: var(--wc-vg-icon-lg);
275	width: var(--wc-vg-icon-lg);
276	height: var(--wc-vg-icon-lg);
277	line-height: 1;
278	}
279	}
280
281	.wc-variation-gallery-field__thumbs {
282	display: flex;
283	flex-wrap: wrap;
284	gap: var(--wc-vg-space-3);
285	margin: 0;
286	padding: 0;
287	list-style: none;
288	min-height: 0;
289
290	.wc-variation-gallery-thumb,
291	.wc-metabox-sortable-placeholder {
292	width: var(--wc-vg-thumb-size);
293	height: var(--wc-vg-thumb-size);
294	margin: 0;
295	padding: 0;
296	list-style: none;
297	border-radius: var(--wc-vg-radius-sm);
298	box-sizing: border-box;
299	}
300
301	.wc-variation-gallery-thumb {
302	position: relative;
303	border: 2px solid transparent;
304	cursor: grab;
305	transition: border-color var(--wc-vg-transition-fast),
306	box-shadow var(--wc-vg-transition-fast);
307
308	&.is-active {
309	border-color: var(--wc-vg-link);
310	}
311
312	&:not(.is-active):hover {
313	border-color: var(--wc-vg-border-hover);
314	}
315
316	&.is-dragging {
317	opacity: 0.6;
318	cursor: grabbing;
319
320	.wc-variation-gallery-thumb__remove {
321	opacity: 0;
322	pointer-events: none;
323	}
324	}
325
326	&.is-broken {
327	@include center-content;
328	background: var(--wc-vg-surface);
329	color: var(--wc-vg-text-placeholder);
330	}
331
332	&:hover .wc-variation-gallery-thumb__remove,
333	.wc-variation-gallery-thumb__remove:focus-visible {
334	opacity: 1;
335	}
336	}
337
338	.wc-variation-gallery-thumb__button {
339	display: block;
340	width: 100%;
341	height: 100%;
342	padding: 0;
343	margin: 0;
344	border: 0;
345	background: var(--wc-vg-surface);
346	cursor: inherit;
347
348	&:focus {
349	outline: none;
350	}
351
352	img {
353	@include cover-image;
354	}
355	}
356
357	.wc-variation-gallery-thumb__broken .dashicons {
358	font-size: var(--wc-vg-icon-md);
359	width: var(--wc-vg-icon-md);
360	height: var(--wc-vg-icon-md);
361	}
362
363	.wc-variation-gallery-thumb__remove {
364	position: absolute;
365	top: -4px;
366	right: -4px;
367	display: flex;
368	align-items: center;
369	justify-content: center;
370	width: 18px;
371	height: 18px;
372	border-radius: 50%;
373	background: var(--wc-vg-surface-strong);
374	color: var(--wc-vg-on-surface);
375	cursor: pointer;
376	opacity: 0;
377	transition: opacity var(--wc-vg-transition-fast), background-color var(--wc-vg-transition-fast);
378
379	.dashicons {
380	font-size: 14px;
381	width: 14px;
382	height: 14px;
383	line-height: 1;
384	}
385
386	@media (hover: none) {
387	opacity: 1;
388	}
389
390	@media (prefers-reduced-motion: reduce) {
391	transition: none;
392	}
393	}
394
395	.wc-metabox-sortable-placeholder {
396	border: 2px dashed var(--wc-vg-border-dashed);
397	background: transparent;
398	}
399
400	&.is-sorting .wc-variation-gallery-thumb:hover .wc-variation-gallery-thumb__remove,
401	&.is-sorting .wc-variation-gallery-thumb .wc-variation-gallery-thumb__remove {
402	opacity: 0;
403	pointer-events: none;
404	}
405	}
406
407	&.is-empty .wc-variation-gallery-field__thumbs {
408	display: none;
409	}
410
411	.wc-variation-gallery-field__hint {
412	margin: 0;
413	color: var(--wc-vg-text-muted);
414	font-size: var(--wc-vg-font-size-xs);
415	line-height: 1.4;
416	}
417
418	&.is-empty .wc-variation-gallery-field__hint {
419	display: none;
420	}
421	}
422