summaryrefslogtreecommitdiffstats
path: root/src/objects/_lightbox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_lightbox.scss')
-rw-r--r--src/objects/_lightbox.scss313
1 files changed, 313 insertions, 0 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
new file mode 100644
index 0000000..edbc62a
--- /dev/null
+++ b/src/objects/_lightbox.scss
@@ -0,0 +1,313 @@
1@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn;
3
4@use 'action-button';
5
6$static-themes: 'black' 'white' !default;
7
8@include iro.props-namespace('lightbox') {
9 @include iro.props-store((
10 --dims: (
11 --pad: fn.global-dim(--size --150),
12
13 --thumbnail: (
14 --size: fn.global-dim(--size --700),
15 --rounding: fn.global-dim(--rounding),
16 --spacing: fn.global-dim(--size --100),
17 --border: fn.global-dim(--border --thin),
18
19 --selected: (
20 --border: fn.global-dim(--border --medium),
21 ),
22
23 --key-focus: (
24 --border: fn.global-dim(--key-focus --border),
25 --border-offset: fn.global-dim(--key-focus --border-offset),
26 --outline: fn.global-dim(--key-focus --outline),
27 ),
28 ),
29
30 --close-button: (
31 --font-size: fn.global-dim(--font-size --200),
32 ),
33
34 --nav-button: (
35 --width: fn.global-dim(--size --2000),
36 --height: fn.global-dim(--size --3800),
37 --font-size: fn.global-dim(--font-size --200),
38 ),
39 ),
40 --colors: (
41 --thumbnail: (
42 --border: fn.global-color(--border-strong),
43
44 --hover: (
45 --border: fn.global-color(--text-mute-more),
46 ),
47
48 --selected: (
49 --border: fn.global-color(--heading),
50 ),
51
52 --key-focus: (
53 --border: fn.global-color(--focus --border),
54 --outline: fn.global-color(--focus --outline),
55 ),
56 ),
57 ),
58 ));
59
60 @each $theme in $static-themes {
61 @include iro.props-store((
62 --colors: (
63 --static-#{$theme}: (
64 --text: fn.global-color(--white-transparent --800),
65 --thumbnail: (
66 --border: fn.global-color(--white-transparent --400),
67
68 --hover: (
69 --border: fn.global-color(--white-transparent --500),
70 ),
71
72 --selected: (
73 --border: fn.global-color(--white-transparent --900),
74 ),
75
76 --key-focus: (
77 --border: fn.global-color(--#{$theme}-transparent --900),
78 --outline: fn.global-color(--#{$theme}-transparent --300),
79 ),
80 ),
81 )
82 )
83 ));
84 }
85
86 @include iro.props-store((
87 --dims: (
88 --thumbnail: (
89 --size: fn.global-dim(--size --600),
90 ),
91 --nav-button: (
92 --width: fn.global-dim(--size --2500),
93 --height: fn.global-dim(--size --2500),
94 ),
95 ),
96 ), 'md');
97
98 @include iro.bem-object(iro.props-namespace()) {
99 box-sizing: border-box;
100 display: grid;
101 flex: 1 1 auto;
102 grid-template-areas:
103 'header header header'
104 'prev content next'
105 'thumbnails thumbnails thumbnails'
106 'footer footer footer';
107 grid-template-rows: auto minmax(0, 1fr) auto auto;
108 grid-template-columns: auto minmax(0, 1fr) auto;
109 min-block-size: 0;
110
111 @include iro.bem-elem('header') {
112 display: flex;
113 grid-area: header;
114 align-items: flex-start;
115 padding-block-start: fn.dim(--pad);
116 padding-inline: fn.dim(--pad);
117 }
118
119 @include iro.bem-elem('img') {
120 box-sizing: border-box;
121 display: none;
122 grid-area: content;
123 place-self: center;
124 max-inline-size: 100%;
125 max-block-size: 100%;
126 padding: fn.dim(--pad);
127
128 @include iro.bem-sibling-elem('img') {
129 @include iro.bem-modifier('default') {
130 display: block;
131
132 @include iro.bem-next-elem('nav-btn') {
133 display: block;
134
135 @include iro.bem-next-elem('nav-btn') {
136 display: block;
137 }
138 }
139 }
140 }
141
142 @include iro.bem-multi('&:target', 'is' 'visible') {
143 display: block;
144
145 @include iro.bem-next-elem('nav-btn') {
146 display: block;
147
148 @include iro.bem-next-elem('nav-btn') {
149 display: block;
150 }
151 }
152
153 @include iro.bem-sibling-elem('img') {
154 @include iro.bem-modifier('default') {
155 display: none;
156
157 @include iro.bem-next-elem('nav-btn') {
158 display: none;
159
160 @include iro.bem-next-elem('nav-btn') {
161 display: none;
162 }
163 }
164 }
165 }
166 }
167 }
168
169 @include iro.bem-elem('thumbnails') {
170 display: flex;
171 grid-area: thumbnails;
172 gap: fn.dim(--thumbnail --spacing);
173 padding: fn.dim(--pad);
174 margin-block-start: calc(-1 * fn.dim(--pad));
175 overflow: auto;
176 }
177
178 @include iro.bem-elem('footer') {
179 display: flex;
180 grid-area: footer;
181 align-items: flex-start;
182 padding-block: 0 fn.dim(--pad);
183 padding-inline: fn.dim(--pad);
184 }
185
186 @include iro.bem-elem('thumbnail') {
187 position: relative;
188 flex: 0 0 auto;
189 inline-size: fn.dim(--thumbnail --size);
190 block-size: fn.dim(--thumbnail --size);
191 overflow: hidden;
192 border-radius: fn.dim(--thumbnail --rounding);
193 outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
194 outline-offset: calc(-1 * fn.dim(--thumbnail --border));
195 opacity: .75;
196
197 &:hover,
198 &:active,
199 &:focus-visible {
200 outline-color: fn.color(--thumbnail --hover --border);
201 opacity: 1;
202 }
203
204 @include iro.bem-is('selected') {
205 $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
206
207 margin: $focus-border-offset;
208 border: fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border);
209 border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
210 outline: none;
211 opacity: 1;
212 }
213
214 &:focus-visible {
215 $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset));
216
217 margin: $focus-border-offset;
218 border: fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
219 border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
220 outline: fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
221 outline-offset: 0;
222 box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
223 }
224 }
225
226 @include iro.bem-elem('thumbnail-img') {
227 position: absolute;
228 inset-block-start: 0;
229 inset-inline-start: 0;
230 display: block;
231 inline-size: 100%;
232 block-size: 100%;
233 object-fit: cover;
234 object-position: center center;
235 }
236
237 @include iro.bem-elem('thumbnail-icon') {
238 position: absolute;
239 inset-block-start: 50%;
240 inset-inline-start: 50%;
241 transform: translate(-50%, -50%);
242 }
243
244 @include iro.bem-elem('close-btn') {
245 flex: 0 0 auto;
246 margin-block-start: calc(-.5 * fn.dim(--pad));
247 margin-inline: auto calc(-.5 * fn.dim(--pad));
248 font-size: fn.dim(--close-button --font-size);
249 }
250
251 @include iro.bem-elem('nav-btn') {
252 position: relative;
253 display: none;
254 align-self: center;
255 overflow: visible;
256 font-size: fn.dim(--nav-button --font-size);
257
258 &::before {
259 position: absolute;
260 inset-block-start: 50%;
261 display: block;
262 inline-size: fn.dim(--nav-button --width);
263 block-size: fn.dim(--nav-button --height);
264 content: '';
265 transform: translateY(-50%);
266 }
267
268 @include iro.bem-modifier('prev') {
269 grid-area: prev;
270 margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
271
272 &::before {
273 inset-inline-start: 0;
274 }
275 }
276
277 @include iro.bem-modifier('next') {
278 grid-area: next;
279 margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
280
281 &::before {
282 inset-inline-end: 0;
283 }
284 }
285 }
286
287 @each $theme in $static-themes {
288 @include iro.bem-modifier(static-#{$theme}) {
289 color: fn.color(--static-#{$theme} --text);
290
291 @include iro.bem-elem('thumbnail') {
292 outline-color: fn.color(--static-#{$theme} --thumbnail --border);
293
294 &:hover,
295 &:active,
296 &:focus-visible {
297 outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
298 }
299
300 @include iro.bem-is('selected') {
301 border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
302 }
303
304 &:focus-visible {
305 border-color: transparent;
306 outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border);
307 box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline);
308 }
309 }
310 }
311 }
312 }
313}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 07:28:43 +0000