From a05667c3ddaf57a561c849dc87f65a4256230e99 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 16:32:53 +0200 Subject: Update --- src/objects/_lightbox.scss | 117 +++++++++++++++++++++++++++++++++++---------- 1 file 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), - --selected: fn.global-dim(--border --medium), + --border: fn.global-dim(--border --thin), + + --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), - --selected: fn.global-color(--heading), + --border: fn.global-color(--border-strong), + + --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), - --selected: fn.global-color(--white-transparent --900), + --border: fn.global-color(--white-transparent --400), + + --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; - display: flex; - gap: fn.dim(--thumbnail --spacing); - padding-block: fn.dim(--thumbnail --selected) fn.dim(--pad); - padding-inline: fn.dim(--pad); - overflow: auto; + grid-area: thumbnails; + display: flex; + gap: fn.dim(--thumbnail --spacing); + padding: fn.dim(--pad); + margin-block-start: calc(-1 * fn.dim(--pad)); + overflow: auto; } @include iro.bem-elem('footer') { @@ -148,23 +184,42 @@ $static-themes: 'black' 'white' !default; } @include iro.bem-elem('thumbnail') { - position: relative; - flex: 0 0 auto; - inline-size: fn.dim(--thumbnail --size); - block-size: fn.dim(--thumbnail --size); - overflow: hidden; - border-radius: fn.dim(--thumbnail --rounding); - outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); + position: relative; + flex: 0 0 auto; + inline-size: fn.dim(--thumbnail --size); + block-size: fn.dim(--thumbnail --size); + overflow: hidden; + border-radius: fn.dim(--thumbnail --rounding); + 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); - opacity: 1; + $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border)); + + 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); } } } -- cgit v1.2.3-70-g09d2