From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 6 Aug 2025 16:40:56 +0200 Subject: Switch to tab indentation --- src/objects/_lightbox.scss | 244 ++++++++++++++++++++++----------------------- 1 file changed, 122 insertions(+), 122 deletions(-) (limited to 'src/objects/_lightbox.scss') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index b62c353..b95148f 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -9,127 +9,127 @@ @use 'lightbox.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('lightbox') { - flex: 1 1 auto; - min-block-size: 0; - - @include bem.elem('header') { - display: flex; - grid-area: header; - align-items: flex-start; - padding-block-start: props.get(vars.$pad); - padding-inline: props.get(vars.$pad); - } - - @include bem.elem('img') { - box-sizing: border-box; - display: block; - grid-area: content; - place-self: center; - inline-size: auto; - max-inline-size: 100%; - block-size: auto; - max-block-size: props.get(vars.$image--max-height); - padding: props.get(vars.$pad); - margin-inline: auto; - border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); - } - - @include bem.elem('thumbnails') { - display: none; - grid-area: thumbnails; - gap: props.get(vars.$thumbnails--spacing); - padding: props.get(vars.$pad); - margin-block-start: calc(-1 * props.get(vars.$pad)); - overflow: auto; - } - - @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)); - font-size: props.get(vars.$close-button--font-size); - } - - @include bem.elem('nav-btn') { - position: relative; - display: none; - align-self: center; - overflow: visible; - font-size: props.get(vars.$nav-button--font-size); - - &::before { - position: absolute; - inset-block-start: 50%; - display: block; - inline-size: props.get(vars.$nav-button--inline-size); - block-size: props.get(vars.$nav-button--block-size); - content: ''; - transform: translateY(-50%); - } - - @include bem.modifier('prev') { - grid-area: prev; - margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); - - &::before { - inset-inline-start: 0; - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('lightbox') { + flex: 1 1 auto; + min-block-size: 0; + + @include bem.elem('header') { + display: flex; + grid-area: header; + align-items: flex-start; + padding-block-start: props.get(vars.$pad); + padding-inline: props.get(vars.$pad); + } + + @include bem.elem('img') { + box-sizing: border-box; + display: block; + grid-area: content; + place-self: center; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; + max-block-size: props.get(vars.$image--max-height); + padding: props.get(vars.$pad); + margin-inline: auto; + border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); + } + + @include bem.elem('thumbnails') { + display: none; + grid-area: thumbnails; + gap: props.get(vars.$thumbnails--spacing); + padding: props.get(vars.$pad); + margin-block-start: calc(-1 * props.get(vars.$pad)); + overflow: auto; + } + + @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)); + font-size: props.get(vars.$close-button--font-size); + } + + @include bem.elem('nav-btn') { + position: relative; + display: none; + align-self: center; + overflow: visible; + font-size: props.get(vars.$nav-button--font-size); + + &::before { + position: absolute; + inset-block-start: 50%; + display: block; + inline-size: props.get(vars.$nav-button--inline-size); + block-size: props.get(vars.$nav-button--block-size); + content: ''; + transform: translateY(-50%); + } + + @include bem.modifier('prev') { + grid-area: prev; + margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); + + &::before { + inset-inline-start: 0; + } + } - @include bem.modifier('next') { - grid-area: next; - margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); - - &::before { - inset-inline-end: 0; - } - } - } - - @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.modifier('fullscreen') { - block-size: props.get(vars.$fullscreen--height); - } - - @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); - } - } - } + @include bem.modifier('next') { + grid-area: next; + margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); + + &::before { + inset-inline-end: 0; + } + } + } + + @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.modifier('fullscreen') { + block-size: props.get(vars.$fullscreen--height); + } + + @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