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/layouts/_button-group.scss | 4 ++-- src/layouts/_card-list.scss | 32 ++++++++++++++++---------------- src/layouts/_container.scss | 10 +++++----- src/layouts/_container.vars.scss | 8 ++++---- src/layouts/_flex.scss | 14 +++++++------- src/layouts/_form.scss | 24 ++++++++++++------------ src/layouts/_media.scss | 14 +++++++------- src/layouts/_overflow.scss | 4 ++-- 8 files changed, 55 insertions(+), 55 deletions(-) (limited to 'src/layouts') diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss index 58d0986..4895647 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_button-group.scss @@ -1,5 +1,5 @@ @use 'sass:meta'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -9,7 +9,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-layout('button-group') { + @include bem.layout('button-group') { display: flex; flex-wrap: wrap; gap: props.get(vars.$spacing); diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index 0722a88..49f4b74 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -1,6 +1,6 @@ @use 'sass:meta'; @use 'include-media/dist/include-media' as media; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -10,47 +10,47 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-layout('card-list') { + @include bem.layout('card-list') { display: flex; flex-direction: column; gap: props.get(vars.$row-gap); - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { row-gap: props.get(vars.$quiet--row-gap); } - @include iro.bem-modifier('grid') { + @include bem.modifier('grid') { display: grid; grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { row-gap: props.get(vars.$grid--quiet--row-gap); } } - @include iro.bem-modifier('masonry') { + @include bem.modifier('masonry') { display: block; columns: auto props.get(vars.$masonry--col-width); column-gap: props.get(vars.$masonry--col-gap); - @include iro.bem-elem('card') { + @include bem.elem('card') { margin-block-end: props.get(vars.$masonry--row-gap); break-inside: avoid; } - @include iro.bem-modifier('quiet') { - @include iro.bem-elem('card') { + @include bem.modifier('quiet') { + @include bem.elem('card') { margin-block-end: props.get(vars.$masonry--quiet--row-gap); } } } - @include iro.bem-modifier('masonry-h') { + @include bem.modifier('masonry-h') { flex-flow: row wrap; gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); - @include iro.bem-modifier('no-flush') { + @include bem.modifier('no-flush') { &::after { display: block; flex: 1 0 auto; @@ -59,22 +59,22 @@ } } - @include iro.bem-elem('card') { + @include bem.elem('card') { flex: 1 0 auto; max-inline-size: 100%; } - @include iro.bem-elem('card-image') { + @include bem.elem('card-image') { block-size: props.get(vars.$masonry-h--row-height); } - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { row-gap: props.get(vars.$masonry-h--quiet--row-gap); } } - @include iro.bem-modifier('aspect-5\\/4') { - @include iro.bem-elem('card-image') { + @include bem.modifier('aspect-5\\/4') { + @include bem.elem('card-image') { aspect-ratio: 5 / 4; } } diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 8b2ed20..3336140 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -1,5 +1,5 @@ @use 'sass:meta'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -9,19 +9,19 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-layout('container') { + @include bem.layout('container') { @each $mod, $size in vars.$fixed-sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { max-inline-size: props.get($size); margin-inline: auto; } } - @include iro.bem-modifier('pad-i') { + @include bem.modifier('pad-i') { padding-inline: props.get(vars.$pad-i); } - @include iro.bem-modifier('pad-b') { + @include bem.modifier('pad-b') { padding-block: props.get(vars.$pad-b); } } diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss index f5343a6..cba7574 100644 --- a/src/layouts/_container.vars.scss +++ b/src/layouts/_container.vars.scss @@ -1,10 +1,10 @@ -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/functions' as fn; @use 'iro-sass/src/props'; @use '../core.vars' as core; -$fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default; -$fixed: props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default; -$fixed-75: props.def(--l-container--fixed-75, iro.fn-px-to-rem(500px)) !default; +$fixed-125: props.def(--l-container--fixed-125, fn.px-to-rem(720px)) !default; +$fixed: props.def(--l-container--fixed, fn.px-to-rem(610px)) !default; +$fixed-75: props.def(--l-container--fixed-75, fn.px-to-rem(500px)) !default; $fixed-sizes: ( 'fixed-125': $fixed-125, diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss index 6cc9dc6..d7cae95 100644 --- a/src/layouts/_flex.scss +++ b/src/layouts/_flex.scss @@ -1,26 +1,26 @@ -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @mixin styles { - @include iro.bem-layout('flex') { + @include bem.layout('flex') { display: flex; - @include iro.bem-modifier('align-stretch') { + @include bem.modifier('align-stretch') { align-items: stretch; } - @include iro.bem-modifier('align-center') { + @include bem.modifier('align-center') { align-items: center; } - @include iro.bem-modifier('align-start') { + @include bem.modifier('align-start') { align-items: flex-start; } - @include iro.bem-modifier('align-end') { + @include bem.modifier('align-end') { align-items: flex-end; } - @include iro.bem-modifier('column') { + @include bem.modifier('column') { flex-direction: column; } } diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 0bb9d4a..4ccf334 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -1,5 +1,5 @@ @use 'sass:meta'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -9,49 +9,49 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-layout('form') { + @include bem.layout('form') { display: flex; flex-direction: column; gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); - @include iro.bem-elem('item') { + @include bem.elem('item') { display: block; } - @include iro.bem-elem('item-content') { - @include iro.bem-modifier('align-start') { + @include bem.elem('item-content') { + @include bem.modifier('align-start') { align-self: start; } } - @include iro.bem-modifier('row') { + @include bem.modifier('row') { flex-direction: row; align-items: flex-end; } - @include iro.bem-modifier('labels-start', 'labels-end') { + @include bem.modifier('labels-start', 'labels-end') { display: grid; grid-template-rows: auto; grid-template-columns: auto 1fr; align-items: baseline; - @include iro.bem-elem('item') { + @include bem.elem('item') { display: contents; } - @include iro.bem-elem('item-label') { + @include bem.elem('item-label') { grid-column: 1; padding-inline-end: 0; } - @include iro.bem-elem('item-content') { + @include bem.elem('item-content') { grid-column: 2; margin-block-start: 0; } } - @include iro.bem-modifier('labels-end') { - @include iro.bem-elem('item-label') { + @include bem.modifier('labels-end') { + @include bem.elem('item-label') { text-align: end; } } diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss index 5658222..63daaf8 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss @@ -1,5 +1,5 @@ @use 'sass:meta'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -9,31 +9,31 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-layout('media') { + @include bem.layout('media') { display: flex; gap: props.get(vars.$gap); align-items: center; line-height: 1.4; @each $mod, $size in vars.$sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { gap: props.get($size); } } - @include iro.bem-modifier('wrap') { + @include bem.modifier('wrap') { flex-wrap: wrap; } - @include iro.bem-elem('block') { + @include bem.elem('block') { flex: 0 0 auto; - @include iro.bem-modifier('shrink', 'main') { + @include bem.modifier('shrink', 'main') { flex-shrink: 1; min-inline-size: 0; } - @include iro.bem-modifier('main') { + @include bem.modifier('main') { inline-size: 100%; } } diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss index 3489ed7..195132a 100644 --- a/src/layouts/_overflow.scss +++ b/src/layouts/_overflow.scss @@ -1,9 +1,9 @@ -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../core.vars' as core; @mixin styles { - @include iro.bem-layout('overflow') { + @include bem.layout('overflow') { overflow: auto; scrollbar-color: props.get(core.$theme, --text-disabled) transparent; } -- cgit v1.2.3-70-g09d2