Update

author: Volpeon <git@volpeon.ink> 2024-06-29 16:32:53 +0200
committer: Volpeon <git@volpeon.ink> 2024-06-29 16:32:53 +0200
commit: a05667c3ddaf57a561c849dc87f65a4256230e99 (patch)
tree: aac51b8d28fd8bb04d14ecb3008e89622e922ee5
parent: Update (diff)
download: iro-design-a05667c3ddaf57a561c849dc87f65a4256230e99.tar.gz
iro-design-a05667c3ddaf57a561c849dc87f65a4256230e99.tar.bz2
iro-design-a05667c3ddaf57a561c849dc87f65a4256230e99.zip
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;
    @include iro.props-store((
        --dims: (
            --pad: fn.global-dim(--size --150),
            --thumbnail: (
                --size:      fn.global-dim(--size --700),
                --rounding:  fn.global-dim(--rounding),
                --spacing:   fn.global-dim(--size --100),
-                --idle:      fn.global-dim(--border --thin),
+                --border:    fn.global-dim(--border --thin),
-                --selected:  fn.global-dim(--border --medium),
+                
+                --selected: (
+                    --border: fn.global-dim(--border --medium),
+                ),
+                --key-focus: (
+                    --border:        fn.global-dim(--key-focus --border),
+                    --border-offset: fn.global-dim(--key-focus --border-offset),
+                    --outline:       fn.global-dim(--key-focus --outline),
+                ),
            ),
            --close-button: (
                --font-size: fn.global-dim(--font-size --200),
            ),
            --nav-button: (
                --width:     fn.global-dim(--size --2000),
                --height:    fn.global-dim(--size --3800),
@@ -27,8 +39,20 @@ $static-themes: 'black' 'white' !default;
        ),
        --colors: (
            --thumbnail: (
-                --idle:     fn.global-color(--border-strong),
+                --border: fn.global-color(--border-strong),
-                --selected: fn.global-color(--heading),
+                
+                --hover: (
+                    --border: fn.global-color(--text-mute-more),
+                ),
+                
+                --selected: (
+                    --border: fn.global-color(--heading),
+                ),
+                --key-focus: (
+                    --border:  fn.global-color(--focus --border),
+                    --outline: fn.global-color(--focus --outline),
+                ),
            ),
        ),
    ));
@@ -37,10 +61,22 @@ $static-themes: 'black' 'white' !default;
        @include iro.props-store((
            --colors: (
                --static-#{$theme}: (
-                    --text:         fn.global-color(--white-transparent --800),
+                    --text: fn.global-color(--white-transparent --800),
                    --thumbnail: (
-                        --idle:     fn.global-color(--white-transparent --400),
+                        --border: fn.global-color(--white-transparent --400),
-                        --selected: fn.global-color(--white-transparent --900),
+                
+                        --hover: (
+                            --border: fn.global-color(--white-transparent --500),
+                        ),
+                        
+                        --selected: (
+                            --border: fn.global-color(--white-transparent --900),
+                        ),
+                        --key-focus: (
+                            --border:  fn.global-color(--#{$theme}-transparent --900),
+                            --outline: fn.global-color(--#{$theme}-transparent --300),
+                        ),
                    ),
                )
            )
@@ -131,12 +167,12 @@ $static-themes: 'black' 'white' !default;
        }
        @include iro.bem-elem('thumbnails') {
-            grid-area:      thumbnails;
+            grid-area:          thumbnails;
-            display:        flex;
+            display:            flex;
-            gap:            fn.dim(--thumbnail --spacing);
+            gap:                fn.dim(--thumbnail --spacing);
-            padding-block:  fn.dim(--thumbnail --selected) fn.dim(--pad);
+            padding:            fn.dim(--pad);
-            padding-inline: fn.dim(--pad);
+            margin-block-start: calc(-1 * fn.dim(--pad));
-            overflow:       auto;
+            overflow:           auto;
        }
        @include iro.bem-elem('footer') {
@@ -148,23 +184,42 @@ $static-themes: 'black' 'white' !default;
        }
        @include iro.bem-elem('thumbnail') {
-            position:      relative;
+            position:       relative;
-            flex:          0 0 auto;
+            flex:           0 0 auto;
-            inline-size:   fn.dim(--thumbnail --size);
+            inline-size:    fn.dim(--thumbnail --size);
-            block-size:    fn.dim(--thumbnail --size);
+            block-size:     fn.dim(--thumbnail --size);
-            overflow:      hidden;
+            overflow:       hidden;
-            border-radius: fn.dim(--thumbnail --rounding);
+            border-radius:  fn.dim(--thumbnail --rounding);
-            outline:       fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle);
+            outline:        fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
+            outline-offset: calc(-1 * fn.dim(--thumbnail --border));
            opacity:       .75;
            &:hover,
+            &:active,
            &:focus-visible {
-                opacity: 1;
+                outline-color: fn.color(--thumbnail --hover --border);
+                opacity:       1;
            }
            @include iro.bem-is('selected') {
-                outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected);
+                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
-                opacity: 1;
+                margin:        $focus-border-offset;
+                border:        fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border);
+                border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                outline:       none;
+                opacity:       1;
+            }
+            &:focus-visible {
+                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset));
+                margin:         $focus-border-offset;
+                border:         fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
+                border-radius:  calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                outline:        fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
+                outline-offset: 0;
+                box-shadow:     0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
            }
        }
@@ -234,10 +289,22 @@ $static-themes: 'black' 'white' !default;
                color: fn.color(--static-#{$theme} --text);
                @include iro.bem-elem('thumbnail') {
-                    outline-color: fn.color(--static-#{$theme} --thumbnail --idle);
+                    outline-color: fn.color(--static-#{$theme} --thumbnail --border);
+                    &:hover,
+                    &:active,
+                    &:focus-visible {
+                        outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
+                    }
        
                    @include iro.bem-is('selected') {
-                        outline-color: fn.color(--static-#{$theme} --thumbnail --selected);
+                        border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
+                    }
+                    &:focus-visible {
+                        border-color:  transparent;
+                        outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border);
+                        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);
                    }
                }
            }
author	Volpeon <git@volpeon.ink>	2024-06-29 16:32:53 +0200
committer	Volpeon <git@volpeon.ink>	2024-06-29 16:32:53 +0200
commit	a05667c3ddaf57a561c849dc87f65a4256230e99 (patch)
tree	aac51b8d28fd8bb04d14ecb3008e89622e922ee5
parent	Update (diff)
download	iro-design-a05667c3ddaf57a561c849dc87f65a4256230e99.tar.gz iro-design-a05667c3ddaf57a561c849dc87f65a4256230e99.tar.bz2 iro-design-a05667c3ddaf57a561c849dc87f65a4256230e99.zip

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	}