From 6d303e5cef9c3a3c77294b79c4907ec69943226f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Oct 2024 10:38:06 +0200 Subject: Lightbox fallback without :target --- src/objects/_lightbox.scss | 101 +++++++++++++++++---------------------------- 1 file changed, 39 insertions(+), 62 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 02714d7..5562696 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -12,17 +12,8 @@ @include materialize-at-root(meta.module-variables('vars')); @include bem.object('lightbox') { - 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; + flex: 1 1 auto; + min-block-size: 0; @include bem.elem('header') { display: flex; @@ -34,56 +25,17 @@ @include bem.elem('img') { box-sizing: border-box; - display: none; + display: block; grid-area: content; place-self: center; max-inline-size: 100%; - max-block-size: 100%; + max-block-size: 80vh; padding: props.get(vars.$pad); - - @include bem.sibling-elem('img') { - @include bem.modifier('default') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - } - } - } - } - - @include bem.multi('&:target', 'is' 'visible') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - } - } - - @include bem.sibling-elem('img') { - @include bem.modifier('default') { - display: none; - - @include bem.next-elem('nav-btn') { - display: none; - - @include bem.next-elem('nav-btn') { - display: none; - } - } - } - } - } + margin-inline: auto; } @include bem.elem('thumbnails') { - display: flex; + display: none; grid-area: thumbnails; gap: props.get(vars.$thumbnail--spacing); padding: props.get(vars.$pad); @@ -91,14 +43,6 @@ overflow: auto; } - @include bem.elem('footer') { - display: flex; - grid-area: footer; - align-items: flex-start; - padding-block: 0 props.get(vars.$pad); - padding-inline: props.get(vars.$pad); - } - @include bem.elem('thumbnail') { position: relative; flex: 0 0 auto; @@ -163,6 +107,7 @@ } @include bem.elem('close-btn') { + display: none; flex: 0 0 auto; margin-block-start: calc(-.5 * props.get(vars.$pad)); margin-inline: auto calc(-.5 * props.get(vars.$pad)); @@ -205,6 +150,38 @@ } } + @include bem.modifier('interactive') { + display: grid; + grid-template-areas: + 'header header header' + 'prev content next' + 'thumbnails thumbnails thumbnails'; + grid-template-rows: auto minmax(0, 1fr) auto auto; + grid-template-columns: auto minmax(0, 1fr) auto; + + @include bem.elem('img') { + display: none; + max-block-size: 100%; + margin-inline: 0; + + @include bem.multi('&:target', 'is' 'visible') { + display: block; + } + } + + @include bem.elem('thumbnails') { + display: flex; + } + + @include bem.elem('close-btn') { + display: block; + } + + @include bem.elem('nav-btn') { + display: block; + } + } + @each $theme in map.keys(props.get(vars.$static-themes)) { @include bem.modifier(string.slice($theme, 3)) { color: props.get(vars.$static-themes, $theme, --text); -- cgit v1.2.3-70-g09d2