From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/objects/_lightbox.scss | 313 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 313 insertions(+) create mode 100644 src/objects/_lightbox.scss (limited to 'src/objects/_lightbox.scss') 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 @@ +@use 'iro-sass/src/iro-sass' as iro; +@use '../functions' as fn; + +@use 'action-button'; + +$static-themes: 'black' 'white' !default; + +@include iro.props-namespace('lightbox') { + @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), + --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), + --font-size: fn.global-dim(--font-size --200), + ), + ), + --colors: ( + --thumbnail: ( + --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), + ), + ), + ), + )); + + @each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --text: fn.global-color(--white-transparent --800), + --thumbnail: ( + --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), + ), + ), + ) + ) + )); + } + + @include iro.props-store(( + --dims: ( + --thumbnail: ( + --size: fn.global-dim(--size --600), + ), + --nav-button: ( + --width: fn.global-dim(--size --2500), + --height: fn.global-dim(--size --2500), + ), + ), + ), 'md'); + + @include iro.bem-object(iro.props-namespace()) { + box-sizing: border-box; + display: grid; + flex: 1 1 auto; + grid-template-areas: + 'header header header' + 'prev content next' + 'thumbnails thumbnails thumbnails' + 'footer footer footer'; + grid-template-rows: auto minmax(0, 1fr) auto auto; + grid-template-columns: auto minmax(0, 1fr) auto; + min-block-size: 0; + + @include iro.bem-elem('header') { + display: flex; + grid-area: header; + align-items: flex-start; + padding-block-start: fn.dim(--pad); + padding-inline: fn.dim(--pad); + } + + @include iro.bem-elem('img') { + box-sizing: border-box; + display: none; + grid-area: content; + place-self: center; + max-inline-size: 100%; + max-block-size: 100%; + padding: fn.dim(--pad); + + @include iro.bem-sibling-elem('img') { + @include iro.bem-modifier('default') { + display: block; + + @include iro.bem-next-elem('nav-btn') { + display: block; + + @include iro.bem-next-elem('nav-btn') { + display: block; + } + } + } + } + + @include iro.bem-multi('&:target', 'is' 'visible') { + display: block; + + @include iro.bem-next-elem('nav-btn') { + display: block; + + @include iro.bem-next-elem('nav-btn') { + display: block; + } + } + + @include iro.bem-sibling-elem('img') { + @include iro.bem-modifier('default') { + display: none; + + @include iro.bem-next-elem('nav-btn') { + display: none; + + @include iro.bem-next-elem('nav-btn') { + display: none; + } + } + } + } + } + } + + @include iro.bem-elem('thumbnails') { + display: flex; + grid-area: thumbnails; + gap: fn.dim(--thumbnail --spacing); + padding: fn.dim(--pad); + margin-block-start: calc(-1 * fn.dim(--pad)); + overflow: auto; + } + + @include iro.bem-elem('footer') { + display: flex; + grid-area: footer; + align-items: flex-start; + padding-block: 0 fn.dim(--pad); + padding-inline: fn.dim(--pad); + } + + @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 --border) solid fn.color(--thumbnail --border); + outline-offset: calc(-1 * fn.dim(--thumbnail --border)); + opacity: .75; + + &:hover, + &:active, + &:focus-visible { + outline-color: fn.color(--thumbnail --hover --border); + opacity: 1; + } + + @include iro.bem-is('selected') { + $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); + } + } + + @include iro.bem-elem('thumbnail-img') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + display: block; + inline-size: 100%; + block-size: 100%; + object-fit: cover; + object-position: center center; + } + + @include iro.bem-elem('thumbnail-icon') { + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); + } + + @include iro.bem-elem('close-btn') { + flex: 0 0 auto; + margin-block-start: calc(-.5 * fn.dim(--pad)); + margin-inline: auto calc(-.5 * fn.dim(--pad)); + font-size: fn.dim(--close-button --font-size); + } + + @include iro.bem-elem('nav-btn') { + position: relative; + display: none; + align-self: center; + overflow: visible; + font-size: fn.dim(--nav-button --font-size); + + &::before { + position: absolute; + inset-block-start: 50%; + display: block; + inline-size: fn.dim(--nav-button --width); + block-size: fn.dim(--nav-button --height); + content: ''; + transform: translateY(-50%); + } + + @include iro.bem-modifier('prev') { + grid-area: prev; + margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad)); + + &::before { + inset-inline-start: 0; + } + } + + @include iro.bem-modifier('next') { + grid-area: next; + margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad)); + + &::before { + inset-inline-end: 0; + } + } + } + + @each $theme in $static-themes { + @include iro.bem-modifier(static-#{$theme}) { + color: fn.color(--static-#{$theme} --text); + + @include iro.bem-elem('thumbnail') { + 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') { + 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.3.1