product-gallery-rtl.css — WooCommerce 8.5.0-beta.1

woocommerce / assets / client / blocks / product-gallery-rtl.css

woocommerce / assets / client / blocks Last commit date

product-gallery-rtl.css

477 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/blocks/product-gallery/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-product-gallery .wc-block-product-gallery-dialog__overlay {
72	height: 100vh;
73	width: 100vw;
74	position: fixed;
75	top: 0;
76	right: 0;
77	background-color: #808080;
78	z-index: 9999;
79	}
80	.wc-block-product-gallery dialog {
81	position: fixed;
82	border: none;
83	top: 0;
84	z-index: 9999;
85	padding-top: 0;
86	height: 100vh;
87	}
88	.admin-bar .wc-block-product-gallery dialog {
89	margin-top: 32px;
90	height: calc(100vh - 32px);
91	}
92	@media screen and (max-width: 782px) {
93	.admin-bar .wc-block-product-gallery dialog {
94	margin-top: 46px;
95	height: calc(100vh - 46px);
96	}
97	}
98	.wc-block-product-gallery dialog .wc-block-product-gallery-dialog__header {
99	padding-top: 15px;
100	}
101	.wc-block-product-gallery dialog .wc-block-product-galler-dialog__header-right {
102	display: flex;
103	justify-content: flex-end;
104	}
105	.wc-block-product-gallery dialog .wc-block-product-galler-dialog__header-right .wc-block-product-gallery-dialog__close {
106	border: none;
107	background-color: transparent;
108	outline: none;
109	cursor: pointer;
110	}
111	.wc-block-product-gallery dialog .wc-block-product-gallery-large-image {
112	height: calc(100vh - 29px - 15px);
113	}
114	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image {
115	height: calc(100vh - 32px - 29px - 15px);
116	}
117	@media screen and (max-width: 782px) {
118	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image {
119	height: calc(100vh - 46px - 29px - 15px);
120	}
121	}
122	.wc-block-product-gallery dialog .wc-block-product-gallery-large-image img {
123	-o-object-fit: unset;
124	object-fit: unset;
125	aspect-ratio: unset;
126	max-height: calc(100vh - 58px - 15px);
127	width: auto;
128	}
129	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image img {
130	max-height: calc(100vh - 32px - 58px - 15px);
131	}
132	@media screen and (max-width: 782px) {
133	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image img {
134	max-height: calc(100vh - 46px - 58px - 15px);
135	}
136	}
137	.wc-block-product-gallery dialog .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__wrapper {
138	align-items: center;
139	aspect-ratio: unset;
140	}
141	.wc-block-product-gallery dialog .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__container {
142	height: calc(100vh - 58px - 15px);
143	overflow: hidden;
144	}
145	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__container {
146	height: calc(100vh - 32px - 58px - 15px);
147	}
148	@media screen and (max-width: 782px) {
149	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__container {
150	height: calc(100vh - 46px - 58px - 15px);
151	}
152	}
153	.wc-block-product-gallery dialog .wc-block-product-gallery-large-image-next-previous {
154	height: calc(100vh - 29px - 15px);
155	}
156	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image-next-previous {
157	height: calc(100vh - 32px - 29px - 15px);
158	}
159	@media screen and (max-width: 782px) {
160	.admin-bar .wc-block-product-gallery dialog .wc-block-product-gallery-large-image-next-previous {
161	height: calc(100vh - 46px - 29px - 15px);
162	}
163	}
164
165	.wc-block-product-gallery-large-image {
166	width: 100%;
167	height: -moz-fit-content;
168	height: fit-content;
169	position: relative;
170	overflow: hidden;
171	flex-grow: 1;
172	}
173	.wc-block-product-gallery[data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image) .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__image-element {
174	overflow: hidden;
175	margin-left: auto;
176	margin-right: auto;
177	max-width: calc(100% - 60px);
178	}
179	.wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__wrapper {
180	aspect-ratio: 1/1;
181	flex-shrink: 0;
182	max-width: 100%;
183	overflow: hidden;
184	width: 100%;
185	display: flex;
186	align-items: center;
187	}
188	.wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__container {
189	display: flex;
190	overflow-x: hidden;
191	-ms-scroll-snap-type: x mandatory;
192	scroll-snap-type: x mandatory;
193	width: -moz-fit-content;
194	width: fit-content;
195	height: -moz-fit-content;
196	height: fit-content;
197	scroll-behavior: auto;
198	align-items: center;
199	}
200	.wc-block-product-gallery:not([data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image)) .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__image-element {
201	width: -moz-fit-content;
202	width: fit-content;
203	overflow: hidden;
204	margin-left: auto;
205	margin-right: auto;
206	}
207	.wc-block-product-gallery-large-image img {
208	display: block;
209	position: relative;
210	margin: 0 auto;
211	z-index: 1;
212	transition: all 0.1s linear;
213	aspect-ratio: 1/1;
214	-o-object-fit: contain;
215	object-fit: contain;
216	}
217	.wc-block-product-gallery-large-image img.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click {
218	cursor: pointer;
219	}
220	.wc-block-product-gallery-large-image img.wc-block-woocommerce-product-gallery-large-image__image--hoverZoom {
221	cursor: zoom-in;
222	}
223	.wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__inner-blocks {
224	display: flex;
225	flex-direction: column;
226	position: absolute;
227	width: 100%;
228	height: 100%;
229	top: 0;
230	}
231	.wc-block-product-gallery[data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image) .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__inner-blocks > * {
232	margin-right: 30px;
233	margin-left: 30px;
234	}
235	.wc-block-product-gallery:not([data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image)) .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__inner-blocks > * {
236	margin-right: unset;
237	margin-left: unset;
238	}
239
240	.wc-block-product-gallery-large-image-next-previous {
241	display: flex;
242	position: absolute;
243	flex-direction: row;
244	justify-content: space-between;
245	width: 100%;
246	height: 100%;
247	}
248	.wc-block-product-gallery-large-image-next-previous button {
249	cursor: pointer;
250	z-index: 3;
251	pointer-events: all;
252	padding: 0;
253	border: none;
254	background: none;
255	}
256	.wc-block-product-gallery-large-image-next-previous .is-vertically-aligned-top {
257	align-items: flex-start;
258	}
259	.wc-block-product-gallery-large-image-next-previous .is-vertically-aligned-center {
260	align-items: center;
261	}
262	.wc-block-product-gallery-large-image-next-previous .is-vertically-aligned-bottom {
263	align-items: flex-end;
264	}
265
266	.wc-block-product-gallery-large-image-next-previous-settings {
267	width: 100%;
268	}
269
270	.wc-block-product-gallery-large-image-next-previous-left--off,
271	.wc-block-product-gallery-large-image-next-previous-right--off {
272	display: none;
273	}
274
275	.wc-block-product-gallery-large-image-next-previous-left--inside-image {
276	margin-right: 15px;
277	}
278
279	.wc-block-product-gallery-large-image-next-previous-right--inside-image {
280	margin-left: 15px;
281	}
282
283	.wc-block-product-gallery[data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image) .wc-block-product-gallery-large-image-next-previous-left--outside-image {
284	bottom: 0;
285	right: 0;
286	position: absolute;
287	}
288
289	.wc-block-product-gallery[data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image) .wc-block-product-gallery-large-image-next-previous-right--outside-image {
290	bottom: 0;
291	left: 0;
292	position: absolute;
293	}
294
295	.wc-block-product-gallery[data-next-previous-buttons-position=outsideTheImage]:not(.is-single-product-gallery-image) .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image-next-previous {
296	margin-left: 0;
297	margin-right: 0;
298	}
299
300	.wc-block-product-gallery-large-image-next-previous-container {
301	display: flex;
302	flex-direction: row;
303	justify-content: space-between;
304	position: absolute;
305	width: 100%;
306	}
307	.wc-block-product-gallery-large-image-next-previous-container.wc-block-product-gallery-large-image-next-previous--inside-image {
308	margin-top: 15px;
309	margin-bottom: 15px;
310	}
311
312	.wc-block-product-gallery-pager__pager {
313	display: flex;
314	justify-content: center;
315	list-style: none;
316	gap: 12px;
317	margin-top: 0;
318	margin-bottom: 0;
319	padding: 0;
320	}
321
322	.wc-block-product-gallery-pager__pager-item {
323	font-size: 1em;
324	color: #949494;
325	cursor: pointer;
326	}
327
328	.wc-block-product-gallery-pager__pager-item--is-active {
329	font-weight: bold;
330	color: #000;
331	}
332
333	.wc-block-product-gallery-thumbnails {
334	display: flex;
335	}
336	.wc-block-product-gallery-thumbnails img {
337	cursor: pointer;
338	height: auto;
339	width: auto;
340	max-width: 100%;
341	}
342	.wc-block-product-gallery[data-thumbnails-position=bottom] .wc-block-product-gallery-thumbnails {
343	flex-direction: row;
344	gap: 0 15px;
345	}
346	.wc-block-product-gallery:not([data-thumbnails-position=bottom]) .wc-block-product-gallery-thumbnails {
347	flex-direction: column;
348	gap: 15px 0;
349	flex-basis: calc((100% - 30px - 6px - 4px) / 3);
350	}
351	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="3"]:not([data-thumbnails-position=bottom]) .wc-block-product-gallery-thumbnails {
352	flex-basis: calc((100% - 30px - 6px) / 3);
353	}
354	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="4"]:not([data-thumbnails-position=bottom]) .wc-block-product-gallery-thumbnails {
355	flex-basis: calc((100% - 45px - 8px) / 4);
356	}
357	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="5"]:not([data-thumbnails-position=bottom]) .wc-block-product-gallery-thumbnails {
358	flex-basis: calc((100% - 60px - 10px) / 5);
359	}
360	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="6"]:not([data-thumbnails-position=bottom]) .wc-block-product-gallery-thumbnails {
361	flex-basis: calc((100% - 75px - 12px) / 6);
362	}
363	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="7"]:not([data-thumbnails-position=bottom]) .wc-block-product-gallery-thumbnails {
364	flex-basis: calc((100% - 90px - 14px) / 7);
365	}
366	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="8"]:not([data-thumbnails-position=bottom]) .wc-block-product-gallery-thumbnails {
367	flex-basis: calc((100% - 105px - 16px) / 8);
368	}
369	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
370	border: 1px solid rgba(0, 0, 0, 0.1);
371	height: auto;
372	width: auto;
373	display: flex;
374	justify-content: center;
375	align-items: center;
376	aspect-ratio: 1/1;
377	position: relative;
378	flex-basis: 0;
379	flex-grow: 1;
380	}
381	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail img {
382	aspect-ratio: 1/1;
383	-o-object-fit: contain;
384	object-fit: contain;
385	}
386	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail::before {
387	content: "";
388	display: block;
389	padding-top: 100%;
390	}
391	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="3"][data-thumbnails-position=bottom] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
392	flex: 0 0 calc((100% - 30px - 6px) / 3);
393	}
394	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="4"][data-thumbnails-position=bottom] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
395	flex: 0 0 calc((100% - 45px - 8px) / 4);
396	}
397	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="5"][data-thumbnails-position=bottom] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
398	flex: 0 0 calc((100% - 60px - 10px) / 5);
399	}
400	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="6"][data-thumbnails-position=bottom] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
401	flex: 0 0 calc((100% - 75px - 12px) / 6);
402	}
403	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="7"][data-thumbnails-position=bottom] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
404	flex: 0 0 calc((100% - 90px - 14px) / 7);
405	}
406	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="8"][data-thumbnails-position=bottom] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail {
407	flex: 0 0 calc((100% - 105px - 16px) / 8);
408	}
409	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay {
410	cursor: pointer;
411	display: flex;
412	flex-direction: column;
413	align-items: center;
414	justify-content: center;
415	position: absolute;
416	background-color: rgba(0, 0, 0, 0.4);
417	top: 0;
418	width: 100%;
419	height: 100%;
420	}
421	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
422	font-weight: 700;
423	}
424	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
425	text-decoration: underline;
426	}
427	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count,
428	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
429	color: #fff;
430	}
431	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
432	font-size: clamp(1rem, 1.5vw, 2rem);
433	}
434	.wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
435	font-size: clamp(0.75rem, 0.5vw, 2rem);
436	display: block;
437	}
438	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="3"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
439	font-size: clamp(1rem, 1.5vw, 2rem);
440	}
441	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="3"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
442	font-size: clamp(0.75rem, 0.5vw, 2rem);
443	display: block;
444	}
445	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="4"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
446	font-size: clamp(1rem, 1.25vw, 2rem);
447	}
448	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="4"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
449	font-size: clamp(0.75rem, 0.25vw, 2rem);
450	display: block;
451	}
452	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="5"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
453	font-size: clamp(1rem, 1.25vw, 2rem);
454	}
455	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="5"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
456	font-size: clamp(0.75rem, 0.25vw, 2rem);
457	display: block;
458	}
459	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="6"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
460	font-size: clamp(1rem, 1.25vw, 2rem);
461	}
462	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="6"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
463	display: none;
464	}
465	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="7"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
466	font-size: clamp(1rem, 1.25vw, 2rem);
467	}
468	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="7"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
469	display: none;
470	}
471	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="8"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
472	font-size: clamp(1rem, 1.25vw, 2rem);
473	}
474	.wc-block-product-gallery[data-thumbnails-number-of-thumbnails="8"] .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__thumbnail__overlay .wc-block-product-gallery-thumbnails__thumbnail__view-all {
475	display: none;
476	}
477