From 5855a6821cf5585378a70f9bee13563bdbfe2d86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Oct 2024 08:23:33 +0200 Subject: Less broad imports --- src/objects/_lightbox.scss | 56 +++++++++++++++++++++++----------------------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'src/objects/_lightbox.scss') diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 0ced4c6..341ed3d 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use 'sass:meta'; @use 'sass:string'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -11,7 +11,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('lightbox') { + @include bem.object('lightbox') { box-sizing: border-box; display: grid; flex: 1 1 auto; @@ -24,7 +24,7 @@ grid-template-columns: auto minmax(0, 1fr) auto; min-block-size: 0; - @include iro.bem-elem('header') { + @include bem.elem('header') { display: flex; grid-area: header; align-items: flex-start; @@ -32,7 +32,7 @@ padding-inline: props.get(vars.$pad); } - @include iro.bem-elem('img') { + @include bem.elem('img') { box-sizing: border-box; display: none; grid-area: content; @@ -41,39 +41,39 @@ max-block-size: 100%; padding: props.get(vars.$pad); - @include iro.bem-sibling-elem('img') { - @include iro.bem-modifier('default') { + @include bem.sibling-elem('img') { + @include bem.modifier('default') { display: block; - @include iro.bem-next-elem('nav-btn') { + @include bem.next-elem('nav-btn') { display: block; - @include iro.bem-next-elem('nav-btn') { + @include bem.next-elem('nav-btn') { display: block; } } } } - @include iro.bem-multi('&:target', 'is' 'visible') { + @include bem.multi('&:target', 'is' 'visible') { display: block; - @include iro.bem-next-elem('nav-btn') { + @include bem.next-elem('nav-btn') { display: block; - @include iro.bem-next-elem('nav-btn') { + @include bem.next-elem('nav-btn') { display: block; } } - @include iro.bem-sibling-elem('img') { - @include iro.bem-modifier('default') { + @include bem.sibling-elem('img') { + @include bem.modifier('default') { display: none; - @include iro.bem-next-elem('nav-btn') { + @include bem.next-elem('nav-btn') { display: none; - @include iro.bem-next-elem('nav-btn') { + @include bem.next-elem('nav-btn') { display: none; } } @@ -82,7 +82,7 @@ } } - @include iro.bem-elem('thumbnails') { + @include bem.elem('thumbnails') { display: flex; grid-area: thumbnails; gap: props.get(vars.$thumbnail--spacing); @@ -91,7 +91,7 @@ overflow: auto; } - @include iro.bem-elem('footer') { + @include bem.elem('footer') { display: flex; grid-area: footer; align-items: flex-start; @@ -99,7 +99,7 @@ padding-inline: props.get(vars.$pad); } - @include iro.bem-elem('thumbnail') { + @include bem.elem('thumbnail') { position: relative; flex: 0 0 auto; inline-size: props.get(vars.$thumbnail--size); @@ -117,7 +117,7 @@ opacity: 1; } - @include iro.bem-is('selected') { + @include bem.is('selected') { $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); margin: $focus-border-offset; @@ -144,7 +144,7 @@ } } - @include iro.bem-elem('thumbnail-img') { + @include bem.elem('thumbnail-img') { position: absolute; inset-block-start: 0; inset-inline-start: 0; @@ -155,21 +155,21 @@ object-position: center center; } - @include iro.bem-elem('thumbnail-icon') { + @include bem.elem('thumbnail-icon') { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); } - @include iro.bem-elem('close-btn') { + @include bem.elem('close-btn') { 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 iro.bem-elem('nav-btn') { + @include bem.elem('nav-btn') { position: relative; display: none; align-self: center; @@ -186,7 +186,7 @@ transform: translateY(-50%); } - @include iro.bem-modifier('prev') { + @include bem.modifier('prev') { grid-area: prev; margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); @@ -195,7 +195,7 @@ } } - @include iro.bem-modifier('next') { + @include bem.modifier('next') { grid-area: next; margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); @@ -206,10 +206,10 @@ } @each $theme in map.keys(props.get(vars.$static-themes)) { - @include iro.bem-modifier(string.slice($theme, 3)) { + @include bem.modifier(string.slice($theme, 3)) { color: props.get(vars.$static-themes, $theme, --text); - @include iro.bem-elem('thumbnail') { + @include bem.elem('thumbnail') { outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); &:hover, @@ -218,7 +218,7 @@ outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); } - @include iro.bem-is('selected') { + @include bem.is('selected') { border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); } -- cgit v1.2.3-70-g09d2