summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_lightbox.scss117
1 files changed, 92 insertions, 25 deletions
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 4902958..48470c0 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -9,16 +9,28 @@ $static-themes: 'black' 'white' !default;
9 @include iro.props-store(( 9 @include iro.props-store((
10 --dims: ( 10 --dims: (
11 --pad: fn.global-dim(--size --150), 11 --pad: fn.global-dim(--size --150),
12
12 --thumbnail: ( 13 --thumbnail: (
13 --size: fn.global-dim(--size --700), 14 --size: fn.global-dim(--size --700),
14 --rounding: fn.global-dim(--rounding), 15 --rounding: fn.global-dim(--rounding),
15 --spacing: fn.global-dim(--size --100), 16 --spacing: fn.global-dim(--size --100),
16 --idle: fn.global-dim(--border --thin), 17 --border: fn.global-dim(--border --thin),
17 --selected: fn.global-dim(--border --medium), 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 ),
18 ), 28 ),
29
19 --close-button: ( 30 --close-button: (
20 --font-size: fn.global-dim(--font-size --200), 31 --font-size: fn.global-dim(--font-size --200),
21 ), 32 ),
33
22 --nav-button: ( 34 --nav-button: (
23 --width: fn.global-dim(--size --2000), 35 --width: fn.global-dim(--size --2000),
24 --height: fn.global-dim(--size --3800), 36 --height: fn.global-dim(--size --3800),
@@ -27,8 +39,20 @@ $static-themes: 'black' 'white' !default;
27 ), 39 ),
28 --colors: ( 40 --colors: (
29 --thumbnail: ( 41 --thumbnail: (
30 --idle: fn.global-color(--border-strong), 42 --border: fn.global-color(--border-strong),
31 --selected: fn.global-color(--heading), 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 ),
32 ), 56 ),
33 ), 57 ),
34 )); 58 ));
@@ -37,10 +61,22 @@ $static-themes: 'black' 'white' !default;
37 @include iro.props-store(( 61 @include iro.props-store((
38 --colors: ( 62 --colors: (
39 --static-#{$theme}: ( 63 --static-#{$theme}: (
40 --text: fn.global-color(--white-transparent --800), 64 --text: fn.global-color(--white-transparent --800),
41 --thumbnail: ( 65 --thumbnail: (
42 --idle: fn.global-color(--white-transparent --400), 66 --border: fn.global-color(--white-transparent --400),
43 --selected: fn.global-color(--white-transparent --900), 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 ),
44 ), 80 ),
45 ) 81 )
46 ) 82 )
@@ -131,12 +167,12 @@ $static-themes: 'black' 'white' !default;
131 } 167 }
132 168
133 @include iro.bem-elem('thumbnails') { 169 @include iro.bem-elem('thumbnails') {
134 grid-area: thumbnails; 170 grid-area: thumbnails;
135 display: flex; 171 display: flex;
136 gap: fn.dim(--thumbnail --spacing); 172 gap: fn.dim(--thumbnail --spacing);
137 padding-block: fn.dim(--thumbnail --selected) fn.dim(--pad); 173 padding: fn.dim(--pad);
138 padding-inline: fn.dim(--pad); 174 margin-block-start: calc(-1 * fn.dim(--pad));
139 overflow: auto; 175 overflow: auto;
140 } 176 }
141 177
142 @include iro.bem-elem('footer') { 178 @include iro.bem-elem('footer') {
@@ -148,23 +184,42 @@ $static-themes: 'black' 'white' !default;
148 } 184 }
149 185
150 @include iro.bem-elem('thumbnail') { 186 @include iro.bem-elem('thumbnail') {
151 position: relative; 187 position: relative;
152 flex: 0 0 auto; 188 flex: 0 0 auto;
153 inline-size: fn.dim(--thumbnail --size); 189 inline-size: fn.dim(--thumbnail --size);
154 block-size: fn.dim(--thumbnail --size); 190 block-size: fn.dim(--thumbnail --size);
155 overflow: hidden; 191 overflow: hidden;
156 border-radius: fn.dim(--thumbnail --rounding); 192 border-radius: fn.dim(--thumbnail --rounding);
157 outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); 193 outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
194 outline-offset: calc(-1 * fn.dim(--thumbnail --border));
158 opacity: .75; 195 opacity: .75;
159 196
160 &:hover, 197 &:hover,
198 &:active,
161 &:focus-visible { 199 &:focus-visible {
162 opacity: 1; 200 outline-color: fn.color(--thumbnail --hover --border);
201 opacity: 1;
163 } 202 }
164 203
165 @include iro.bem-is('selected') { 204 @include iro.bem-is('selected') {
166 outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected); 205 $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
167 opacity: 1; 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);
168 } 223 }
169 } 224 }
170 225
@@ -234,10 +289,22 @@ $static-themes: 'black' 'white' !default;
234 color: fn.color(--static-#{$theme} --text); 289 color: fn.color(--static-#{$theme} --text);
235 290
236 @include iro.bem-elem('thumbnail') { 291 @include iro.bem-elem('thumbnail') {
237 outline-color: fn.color(--static-#{$theme} --thumbnail --idle); 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 }
238 299
239 @include iro.bem-is('selected') { 300 @include iro.bem-is('selected') {
240 outline-color: fn.color(--static-#{$theme} --thumbnail --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);
241 } 308 }
242 } 309 }
243 } 310 }