PathsHEAD master

author: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
committer: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
commit: cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree: d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_lightbox.scss
parent: Update _index.scss (diff)
download: iro-design-master.tar.gz
iro-design-master.tar.bz2
iro-design-master.zip
1 files changed, 78 insertions, 79 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index a173d57..2b4abad 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,40 +1,40 @@
-@use 'sass:map';
+@use "sass:map";
-@use 'sass:meta';
+@use "sass:meta";
-@use 'sass:string';
+@use "sass:string";
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
-@use 'pkg:iro-sass/src/props';
+@use "pkg:iro-sass/props";
-@use '../props' as *;
+@use "../props" as *;
-@forward 'lightbox.vars';
+@forward "lightbox.vars";
-@use 'lightbox.vars' as vars;
+@use "lightbox.vars" as vars;
-@use 'button.vars' as button;
+@use "button.vars" as button;
-@use 'backdrop.vars' as backdrop;
+@use "backdrop.vars" as backdrop;
-@use 'thumbnail.vars' as thumbnail;
+@use "thumbnail.vars" as thumbnail;
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
-        @include bem.object('lightbox') {
+        @include bem.object("lightbox") {
-                box-sizing:            border-box;
+                box-sizing: border-box;
-                display:               none;
+                display: none;
-                flex:                  1 1 auto;
+                flex: 1 1 auto;
-                grid-template-areas:   'image' 'thumbnails';
+                grid-template-areas: "image" "thumbnails";
-                grid-template-rows:    1fr auto;
+                grid-template-rows: 1fr auto;
                grid-template-columns: 1fr;
-                align-items:           center;
+                align-items: center;
-                justify-items:         center;
+                justify-items: center;
-                inline-size:           100%;
+                inline-size: 100%;
-                max-inline-size:       none;
+                max-inline-size: none;
-                block-size:            100%;
+                block-size: 100%;
-                min-block-size:        0;
+                min-block-size: 0;
-                max-block-size:        none;
+                max-block-size: none;
-                padding:               0;
+                padding: 0;
-                margin:                0;
+                margin: 0;
-                overflow:              hidden;
+                overflow: hidden;
-                background-color:      transparent;
+                background-color: transparent;
-                border:                0;
+                border: 0;
-                pointer-events:        none;
+                pointer-events: none;
                &::backdrop {
                        background-color: props.get(backdrop.$bg-color);
@@ -42,7 +42,7 @@
                }
                &[open],
-                &:popover-open {
+                &:popover-open {
                        display: grid;
                }
@@ -50,80 +50,79 @@
                        pointer-events: auto;
                }
-                @include bem.elem('info', 'controls') {
+                @include bem.elem("info", "controls") {
-                        position:          absolute;
+                        position: absolute;
                        inset-block-start: props.get(vars.$pad);
-                        z-index:           20;
+                        z-index: 20;
-                        display:           flex;
+                        display: flex;
-                        align-items:       center;
+                        align-items: center;
-                        block-size:        props.get(vars.$controls--block-size);
+                        block-size: props.get(vars.$controls--block-size);
-                        padding-inline:    props.get(vars.$controls--pad-i);
+                        padding-inline: props.get(vars.$controls--pad-i);
-                        background-color:  props.get(vars.$controls--bg);
+                        background-color: props.get(vars.$controls--bg);
-                        border-radius:     10em;
+                        border-radius: 10em;
-                        box-shadow:
+                        box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y)
-                                props.get(vars.$controls--shadow-x)
+                                props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow)
-                                props.get(vars.$controls--shadow-y)
-                                props.get(vars.$controls--shadow-blur)
-                                props.get(vars.$controls--shadow-grow)
                                props.get(vars.$controls--shadow-color);
                }
-                @include bem.elem('info') {
+                @include bem.elem("info") {
-                        inset-inline-start:   props.get(vars.$pad);
+                        inset-inline-start: props.get(vars.$pad);
                        font-variant-numeric: tabular-nums;
                }
-                @include bem.elem('controls') {
+                @include bem.elem("controls") {
-                        inset-inline-end:  props.get(vars.$pad);
+                        inset-inline-end: props.get(vars.$pad);
                }
-                @include bem.elem('img') {
+                @include bem.elem("img") {
-                        position:        relative;
+                        position: relative;
-                        z-index:         10;
+                        z-index: 10;
-                        display:         block;
+                        display: block;
-                        grid-area:       image;
+                        grid-area: image;
-                        inline-size:     auto;
+                        inline-size: auto;
                        min-inline-size: 0;
                        max-inline-size: 100%;
-                        block-size:      auto;
+                        block-size: auto;
-                        min-block-size:  0;
+                        min-block-size: 0;
-                        max-block-size:  100%;
+                        max-block-size: 100%;
-                        user-select:     none;
+                        user-select: none;
-                        object-fit:      contain;
+                        object-fit: contain;
-                        @include bem.is('hidden') {
+                        @include bem.is("hidden") {
                                display: none;
-                                @include bem.next-elem('placeholder') {
+                                @include bem.next-elem("placeholder") {
                                        display: block;
                                }
                        }
                }
-                @include bem.elem('placeholder') {
+                @include bem.elem("placeholder") {
-                        position:           absolute;
+                        position: absolute;
-                        inset-block-start:  50%;
+                        inset-block-start: 50%;
                        inset-inline-start: 50%;
-                        z-index:            5;
+                        z-index: 5;
-                        display:            none;
+                        display: none;
-                        transform:          translate(-50, -50);
+                        transform: translate(-50, -50);
                }
-                @include bem.elem('thumbnails') {
+                @include bem.elem("thumbnails") {
-                        display:                 flex;
+                        display: flex;
-                        grid-area:       thumbnails;
+                        grid-area: thumbnails;
-                        gap:             props.get(vars.$thumbnail--spacing);
+                        gap: props.get(vars.$thumbnail--spacing);
                        justify-content: center;
-                        padding:         props.get(vars.$pad);
+                        padding: props.get(vars.$pad);
-                        overflow:        auto;
+                        overflow: auto;
                }
-                @include bem.elem('thumbnail') {
+                @include bem.elem("thumbnail") {
                        inline-size: props.get(vars.$thumbnail--width);
-                        transition:  inline-size .2s ease, margin-inline .2s ease;
+                        transition:
+                                inline-size 0.2s ease,
+                                margin-inline 0.2s ease;
-                        @include bem.is('selected') {
+                        @include bem.is("selected") {
-                                inline-size:  props.get(vars.$thumbnail--active--width);
+                                inline-size: props.get(vars.$thumbnail--active--width);
                                margin-inline: props.get(vars.$thumbnail--active--spacing);
                        }
                }
author	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
committer	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
commit	cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree	d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_lightbox.scss
parent	Update _index.scss (diff)
download	iro-design-master.tar.gz iro-design-master.tar.bz2 iro-design-master.zip

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index a173d57..2b4abad 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss
@@ -1,40 +1,40 @@
1	@use 'sass:map';	1	@use "sass:map";
2	@use 'sass:meta';	2	@use "sass:meta";
3	@use 'sass:string';	3	@use "sass:string";
4	@use 'pkg:iro-sass/src/bem';	4	@use "pkg:iro-sass/bem";
5	@use 'pkg:iro-sass/src/props';	5	@use "pkg:iro-sass/props";
6	@use '../props' as *;	6	@use "../props" as *;
7		7
8	@forward 'lightbox.vars';	8	@forward "lightbox.vars";
9	@use 'lightbox.vars' as vars;	9	@use "lightbox.vars" as vars;
10		10
11	@use 'button.vars' as button;	11	@use "button.vars" as button;
12	@use 'backdrop.vars' as backdrop;	12	@use "backdrop.vars" as backdrop;
13	@use 'thumbnail.vars' as thumbnail;	13	@use "thumbnail.vars" as thumbnail;
14		14
15	@mixin styles {	15	@mixin styles {
16	@include materialize-at-root(meta.module-variables('vars'));	16	@include materialize-at-root(meta.module-variables("vars"));
17		17
18	@include bem.object('lightbox') {	18	@include bem.object("lightbox") {
19	box-sizing: border-box;	19	box-sizing: border-box;
20	display: none;	20	display: none;
21	flex: 1 1 auto;	21	flex: 1 1 auto;
22	grid-template-areas: 'image' 'thumbnails';	22	grid-template-areas: "image" "thumbnails";
23	grid-template-rows: 1fr auto;	23	grid-template-rows: 1fr auto;
24	grid-template-columns: 1fr;	24	grid-template-columns: 1fr;
25	align-items: center;	25	align-items: center;
26	justify-items: center;	26	justify-items: center;
27	inline-size: 100%;	27	inline-size: 100%;
28	max-inline-size: none;	28	max-inline-size: none;
29	block-size: 100%;	29	block-size: 100%;
30	min-block-size: 0;	30	min-block-size: 0;
31	max-block-size: none;	31	max-block-size: none;
32	padding: 0;	32	padding: 0;
33	margin: 0;	33	margin: 0;
34	overflow: hidden;	34	overflow: hidden;
35	background-color: transparent;	35	background-color: transparent;
36	border: 0;	36	border: 0;
37	pointer-events: none;	37	pointer-events: none;
38		38
39	&::backdrop {	39	&::backdrop {
40	background-color: props.get(backdrop.$bg-color);	40	background-color: props.get(backdrop.$bg-color);
@@ -42,7 +42,7 @@
42	}	42	}
43		43
44	&[open],	44	&[open],
45	&:popover-open {	45	&:popover-open {
46	display: grid;	46	display: grid;
47	}	47	}
48		48
@@ -50,80 +50,79 @@
50	pointer-events: auto;	50	pointer-events: auto;
51	}	51	}
52		52
53	@include bem.elem('info', 'controls') {	53	@include bem.elem("info", "controls") {
54	position: absolute;	54	position: absolute;
55	inset-block-start: props.get(vars.$pad);	55	inset-block-start: props.get(vars.$pad);
56	z-index: 20;	56	z-index: 20;
57	display: flex;	57	display: flex;
58	align-items: center;	58	align-items: center;
59	block-size: props.get(vars.$controls--block-size);	59	block-size: props.get(vars.$controls--block-size);
60	padding-inline: props.get(vars.$controls--pad-i);	60	padding-inline: props.get(vars.$controls--pad-i);
61	background-color: props.get(vars.$controls--bg);	61	background-color: props.get(vars.$controls--bg);
62	border-radius: 10em;	62	border-radius: 10em;
63	box-shadow:	63	box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y)
64	props.get(vars.$controls--shadow-x)	64	props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow)
65	props.get(vars.$controls--shadow-y)
66	props.get(vars.$controls--shadow-blur)
67	props.get(vars.$controls--shadow-grow)
68	props.get(vars.$controls--shadow-color);	65	props.get(vars.$controls--shadow-color);
69	}	66	}
70		67
71	@include bem.elem('info') {	68	@include bem.elem("info") {
72	inset-inline-start: props.get(vars.$pad);	69	inset-inline-start: props.get(vars.$pad);
73	font-variant-numeric: tabular-nums;	70	font-variant-numeric: tabular-nums;
74	}	71	}
75		72
76	@include bem.elem('controls') {	73	@include bem.elem("controls") {
77	inset-inline-end: props.get(vars.$pad);	74	inset-inline-end: props.get(vars.$pad);
78	}	75	}
79		76
80	@include bem.elem('img') {	77	@include bem.elem("img") {
81	position: relative;	78	position: relative;
82	z-index: 10;	79	z-index: 10;
83	display: block;	80	display: block;
84	grid-area: image;	81	grid-area: image;
85	inline-size: auto;	82	inline-size: auto;
86	min-inline-size: 0;	83	min-inline-size: 0;
87	max-inline-size: 100%;	84	max-inline-size: 100%;
88	block-size: auto;	85	block-size: auto;
89	min-block-size: 0;	86	min-block-size: 0;
90	max-block-size: 100%;	87	max-block-size: 100%;
91	user-select: none;	88	user-select: none;
92	object-fit: contain;	89	object-fit: contain;
93		90
94	@include bem.is('hidden') {	91	@include bem.is("hidden") {
95	display: none;	92	display: none;
96		93
97	@include bem.next-elem('placeholder') {	94	@include bem.next-elem("placeholder") {
98	display: block;	95	display: block;
99	}	96	}
100	}	97	}
101	}	98	}
102		99
103	@include bem.elem('placeholder') {	100	@include bem.elem("placeholder") {
104	position: absolute;	101	position: absolute;
105	inset-block-start: 50%;	102	inset-block-start: 50%;
106	inset-inline-start: 50%;	103	inset-inline-start: 50%;
107	z-index: 5;	104	z-index: 5;
108	display: none;	105	display: none;
109	transform: translate(-50, -50);	106	transform: translate(-50, -50);
110	}	107	}
111		108
112	@include bem.elem('thumbnails') {	109	@include bem.elem("thumbnails") {
113	display: flex;	110	display: flex;
114	grid-area: thumbnails;	111	grid-area: thumbnails;
115	gap: props.get(vars.$thumbnail--spacing);	112	gap: props.get(vars.$thumbnail--spacing);
116	justify-content: center;	113	justify-content: center;
117	padding: props.get(vars.$pad);	114	padding: props.get(vars.$pad);
118	overflow: auto;	115	overflow: auto;
119	}	116	}
120		117
121	@include bem.elem('thumbnail') {	118	@include bem.elem("thumbnail") {
122	inline-size: props.get(vars.$thumbnail--width);	119	inline-size: props.get(vars.$thumbnail--width);
123	transition: inline-size .2s ease, margin-inline .2s ease;	120	transition:
		121	inline-size 0.2s ease,
		122	margin-inline 0.2s ease;
124		123
125	@include bem.is('selected') {	124	@include bem.is("selected") {
126	inline-size: props.get(vars.$thumbnail--active--width);	125	inline-size: props.get(vars.$thumbnail--active--width);
127	margin-inline: props.get(vars.$thumbnail--active--spacing);	126	margin-inline: props.get(vars.$thumbnail--active--spacing);
128	}	127	}
129	}	128	}