From 6376f1a5225b2fa45f6c861d4a265bf13b56d038 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 10:01:02 +0200 Subject: Update --- src/objects/_lightbox.scss | 243 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 243 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..7844eae --- /dev/null +++ b/src/objects/_lightbox.scss @@ -0,0 +1,243 @@ +@use 'iro-sass/src/index' 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), + --spacing: fn.global-dim(--size --100), + --idle: fn.global-dim(--border --thin), + --selected: fn.global-dim(--border --medium), + ), + --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: ( + --idle: fn.global-color(--border-strong), + --selected: fn.global-color(--heading), + ), + ), + )); + + @each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --text: fn.global-color(--white-transparent --800), + --thumbnail: ( + --idle: fn.global-color(--white-transparent --400), + --selected: fn.global-color(--white-transparent --900), + ), + ) + ) + )); + } + + @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()) { + display: grid; + grid-template-rows: auto minmax(0, 1fr) auto auto; + grid-template-columns: auto minmax(0, 1fr) auto; + grid-template-areas: + 'header header header' + 'prev content next' + 'thumbnails thumbnails thumbnails' + 'footer footer footer'; + box-sizing: border-box; + block-size: 100%; + min-block-size: 0; + + @include iro.bem-elem('header') { + grid-area: header; + display: flex; + align-items: flex-start; + padding-block-start: fn.dim(--pad); + padding-inline: fn.dim(--pad); + } + + @include iro.bem-elem('img') { + display: none; + box-sizing: border-box; + grid-area: content; + inline-size: 100%; + block-size: 100%; + padding: fn.dim(--pad); + object-fit: scale-down; + + @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') { + 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; + } + + @include iro.bem-elem('footer') { + grid-area: footer; + display: flex; + 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); + outline: fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle); + opacity: .75; + + &:hover, + &:focus-visible { + opacity: 1; + } + + @include iro.bem-is('selected') { + outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected); + opacity: 1; + } + } + + @include iro.bem-elem('thumbnail-img') { + display: block; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + 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') { + display: none; + position: relative; + align-self: center; + overflow: visible; + font-size: fn.dim(--nav-button --font-size); + + &::before { + content: ''; + display: block; + position: absolute; + inset-block-start: 50%; + inline-size: fn.dim(--nav-button --width); + block-size: fn.dim(--nav-button --height); + 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 --idle); + + @include iro.bem-is('selected') { + outline-color: fn.color(--static-#{$theme} --thumbnail --selected); + } + } + } + } + } +} -- cgit v1.2.3-54-g00ecf