From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 13:00:59 +0200 Subject: Revert "Paths" This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226. --- src/objects/_lightbox.scss | 159 +++++++++++++++++++++++---------------------- 1 file changed, 80 insertions(+), 79 deletions(-) (limited to 'src/objects/_lightbox.scss') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 2b4abad..a173d57 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -1,40 +1,40 @@ -@use "sass:map"; -@use "sass:meta"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "lightbox.vars"; -@use "lightbox.vars" as vars; +@forward 'lightbox.vars'; +@use 'lightbox.vars' as vars; -@use "button.vars" as button; -@use "backdrop.vars" as backdrop; -@use "thumbnail.vars" as thumbnail; +@use 'button.vars' as button; +@use 'backdrop.vars' as backdrop; +@use 'thumbnail.vars' as thumbnail; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); - - @include bem.object("lightbox") { - box-sizing: border-box; - display: none; - flex: 1 1 auto; - grid-template-areas: "image" "thumbnails"; - grid-template-rows: 1fr auto; + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('lightbox') { + box-sizing: border-box; + display: none; + flex: 1 1 auto; + grid-template-areas: 'image' 'thumbnails'; + grid-template-rows: 1fr auto; grid-template-columns: 1fr; - align-items: center; - justify-items: center; - inline-size: 100%; - max-inline-size: none; - block-size: 100%; - min-block-size: 0; - max-block-size: none; - padding: 0; - margin: 0; - overflow: hidden; - background-color: transparent; - border: 0; - pointer-events: none; + align-items: center; + justify-items: center; + inline-size: 100%; + max-inline-size: none; + block-size: 100%; + min-block-size: 0; + max-block-size: none; + padding: 0; + margin: 0; + overflow: hidden; + background-color: transparent; + border: 0; + pointer-events: none; &::backdrop { background-color: props.get(backdrop.$bg-color); @@ -42,7 +42,7 @@ } &[open], - &:popover-open { + &:popover-open { display: grid; } @@ -50,79 +50,80 @@ pointer-events: auto; } - @include bem.elem("info", "controls") { - position: absolute; + @include bem.elem('info', 'controls') { + position: absolute; inset-block-start: props.get(vars.$pad); - z-index: 20; - display: flex; - align-items: center; - block-size: props.get(vars.$controls--block-size); - padding-inline: props.get(vars.$controls--pad-i); - background-color: props.get(vars.$controls--bg); - border-radius: 10em; - box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y) - props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow) + z-index: 20; + display: flex; + align-items: center; + block-size: props.get(vars.$controls--block-size); + padding-inline: props.get(vars.$controls--pad-i); + background-color: props.get(vars.$controls--bg); + border-radius: 10em; + box-shadow: + props.get(vars.$controls--shadow-x) + props.get(vars.$controls--shadow-y) + props.get(vars.$controls--shadow-blur) + props.get(vars.$controls--shadow-grow) props.get(vars.$controls--shadow-color); } - @include bem.elem("info") { - inset-inline-start: props.get(vars.$pad); + @include bem.elem('info') { + inset-inline-start: props.get(vars.$pad); font-variant-numeric: tabular-nums; } - @include bem.elem("controls") { - inset-inline-end: props.get(vars.$pad); + @include bem.elem('controls') { + inset-inline-end: props.get(vars.$pad); } - @include bem.elem("img") { - position: relative; - z-index: 10; - display: block; - grid-area: image; - inline-size: auto; + @include bem.elem('img') { + position: relative; + z-index: 10; + display: block; + grid-area: image; + inline-size: auto; min-inline-size: 0; max-inline-size: 100%; - block-size: auto; - min-block-size: 0; - max-block-size: 100%; - user-select: none; - object-fit: contain; + block-size: auto; + min-block-size: 0; + max-block-size: 100%; + user-select: none; + object-fit: contain; - @include bem.is("hidden") { + @include bem.is('hidden') { display: none; - @include bem.next-elem("placeholder") { + @include bem.next-elem('placeholder') { display: block; } } } - @include bem.elem("placeholder") { - position: absolute; - inset-block-start: 50%; + @include bem.elem('placeholder') { + position: absolute; + inset-block-start: 50%; inset-inline-start: 50%; - z-index: 5; - display: none; - transform: translate(-50, -50); + z-index: 5; + display: none; + transform: translate(-50, -50); } - @include bem.elem("thumbnails") { - display: flex; - grid-area: thumbnails; - gap: props.get(vars.$thumbnail--spacing); + @include bem.elem('thumbnails') { + display: flex; + grid-area: thumbnails; + gap: props.get(vars.$thumbnail--spacing); justify-content: center; - padding: props.get(vars.$pad); - overflow: auto; + padding: props.get(vars.$pad); + overflow: auto; } - @include bem.elem("thumbnail") { + @include bem.elem('thumbnail') { inline-size: props.get(vars.$thumbnail--width); - transition: - inline-size 0.2s ease, - margin-inline 0.2s ease; + transition: inline-size .2s ease, margin-inline .2s ease; - @include bem.is("selected") { - inline-size: props.get(vars.$thumbnail--active--width); + @include bem.is('selected') { + inline-size: props.get(vars.$thumbnail--active--width); margin-inline: props.get(vars.$thumbnail--active--spacing); } } -- cgit v1.3.1