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/_core.scss | 2 +- src/_props.scss | 2 +- src/_themes.scss | 26 +++++----- src/_utils.scss | 102 ++++++++++++++++++------------------- 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 +- src/objects/_action-button.scss | 20 ++++---- src/objects/_alert.scss | 6 +-- src/objects/_avatar.scss | 28 +++++----- src/objects/_backdrop.scss | 4 +- src/objects/_badge.scss | 20 ++++---- src/objects/_button.scss | 26 +++++----- src/objects/_card.scss | 46 ++++++++--------- src/objects/_checkbox.scss | 57 +++++++++++---------- src/objects/_divider.scss | 30 +++++------ src/objects/_emoji.scss | 12 ++--- src/objects/_field-label.scss | 34 ++++++------- src/objects/_heading.scss | 12 ++--- src/objects/_icon.scss | 6 +-- src/objects/_lightbox.scss | 56 ++++++++++---------- src/objects/_menu.scss | 24 ++++----- src/objects/_palette.scss | 16 +++--- src/objects/_popover.scss | 10 ++-- src/objects/_radio.scss | 40 +++++++-------- src/objects/_side-nav.scss | 20 ++++---- src/objects/_status-indicator.scss | 6 +-- src/objects/_switch.scss | 44 ++++++++-------- src/objects/_table.scss | 52 +++++++++---------- src/objects/_text-field.scss | 48 ++++++++--------- src/scopes/_blockquotes.scss | 6 +-- src/scopes/_code.scss | 4 +- src/scopes/_headings.scss | 8 +-- src/scopes/_implicit.scss | 2 +- src/scopes/_links.scss | 10 ++-- src/scopes/_lists.scss | 6 +-- src/scopes/_tables.scss | 8 +-- src_demo/components/_box.scss | 4 +- src_demo/components/_content.scss | 4 +- src_demo/components/_sidebar.scss | 4 +- src_demo/components/_view.scss | 4 +- 46 files changed, 460 insertions(+), 459 deletions(-) diff --git a/src/_core.scss b/src/_core.scss index ea84f6c..3dccd54 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -19,7 +19,7 @@ } } } @else { - @include iro.bem-theme($theme-name) { + @include bem.theme($theme-name) { @include props.materialize(map.get($theme, 'light')); @if map.has-key($theme, 'dark') { diff --git a/src/_props.scss b/src/_props.scss index 9a1ecec..748d785 100644 --- a/src/_props.scss +++ b/src/_props.scss @@ -26,7 +26,7 @@ @each $theme-name in map.keys(config.$themes) { @if $theme-name != config.$theme-default { - @include iro.bem-theme($theme-name) { + @include bem.theme($theme-name) { @include props.materialize($ref, null); @each $breakpoint in map.keys(media.$breakpoints) { diff --git a/src/_themes.scss b/src/_themes.scss index f246465..ec54af4 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use 'include-media/dist/include-media' as media; @@ -7,64 +7,64 @@ @forward 'core.vars'; @mixin styles { - @include iro.bem-theme('base') { + @include bem.theme('base') { background-color: props.get(vars.$theme, --bg-base); - @include iro.bem-suffix('light') { + @include bem.suffix('light') { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --bg-base); } } - @include iro.bem-suffix('dark') { + @include bem.suffix('dark') { @media (prefers-color-scheme: dark) { background-color: props.get(vars.$theme, --bg-base); } } } - @include iro.bem-theme('l1') { + @include bem.theme('l1') { background-color: props.get(vars.$theme, --bg-l1); - @include iro.bem-suffix('light') { + @include bem.suffix('light') { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --bg-l1); } } - @include iro.bem-suffix('dark') { + @include bem.suffix('dark') { @media (prefers-color-scheme: dark) { background-color: props.get(vars.$theme, --bg-l1); } } } - @include iro.bem-theme('l2') { + @include bem.theme('l2') { background-color: props.get(vars.$theme, --bg-l2); - @include iro.bem-suffix('light') { + @include bem.suffix('light') { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --bg-l2); } } - @include iro.bem-suffix('dark') { + @include bem.suffix('dark') { @media (prefers-color-scheme: dark) { background-color: props.get(vars.$theme, --bg-l2); } } } - @include iro.bem-theme('50') { + @include bem.theme('50') { background-color: props.get(vars.$theme, --base, --50); - @include iro.bem-suffix('light') { + @include bem.suffix('light') { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --base, --50); } } - @include iro.bem-suffix('dark') { + @include bem.suffix('dark') { @media (prefers-color-scheme: dark) { background-color: props.get(vars.$theme, --base, --50); } diff --git a/src/_utils.scss b/src/_utils.scss index a96666d..132e8bf 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use 'include-media/dist/include-media' as media; @@ -32,216 +32,216 @@ $-sizes: ( ) !default; @mixin styles { - @include iro.bem-utility('d-block') { + @include bem.utility('d-block') { display: block; } - @include iro.bem-utility('d-inline-block') { + @include bem.utility('d-inline-block') { display: inline-block; } - @include iro.bem-utility('d-contents') { + @include bem.utility('d-contents') { display: contents; } - @include iro.bem-utility('td-none') { + @include bem.utility('td-none') { text-decoration: none; } - @include iro.bem-utility('d-none') { + @include bem.utility('d-none') { display: none; @each $breakpoint in map.keys(media.$breakpoints) { @include media.media('<=#{$breakpoint}') { - @include iro.bem-suffix('#{$breakpoint}-lo') { + @include bem.suffix('#{$breakpoint}-lo') { display: none; } } @include media.media('>#{$breakpoint}') { - @include iro.bem-suffix('#{$breakpoint}-hi') { + @include bem.suffix('#{$breakpoint}-hi') { display: none; } } } - @include iro.bem-at-theme('js') { - @include iro.bem-suffix('js') { + @include bem.at-theme('js') { + @include bem.suffix('js') { display: none; } } - @include iro.bem-at-theme('no-js') { - @include iro.bem-suffix('no-js') { + @include bem.at-theme('no-js') { + @include bem.suffix('no-js') { display: none; } } - @include iro.bem-suffix('empty') { + @include bem.suffix('empty') { &:empty { display: none; } } } - @include iro.bem-utility('ta-start') { + @include bem.utility('ta-start') { text-align: start; } - @include iro.bem-utility('ta-end') { + @include bem.utility('ta-end') { text-align: end; } - @include iro.bem-utility('ta-center') { + @include bem.utility('ta-center') { text-align: center; } - @include iro.bem-utility('fw-normal') { + @include bem.utility('fw-normal') { font-weight: normal; } - @include iro.bem-utility('ai-center') { + @include bem.utility('ai-center') { align-items: center; } - @include iro.bem-utility('ai-start') { + @include bem.utility('ai-start') { align-items: flex-start; } - @include iro.bem-utility('ai-end') { + @include bem.utility('ai-end') { align-items: flex-end; } - @include iro.bem-utility('jc-center') { + @include bem.utility('jc-center') { justify-content: center; } - @include iro.bem-utility('jc-start') { + @include bem.utility('jc-start') { justify-content: flex-start; } - @include iro.bem-utility('jc-end') { + @include bem.utility('jc-end') { justify-content: flex-end; } - @include iro.bem-utility('tt-upper') { + @include bem.utility('tt-upper') { text-transform: uppercase; } - @include iro.bem-utility('tt-lower') { + @include bem.utility('tt-lower') { text-transform: lowercase; } - @include iro.bem-utility('c-heading') { + @include bem.utility('c-heading') { color: props.get(vars.$theme, --heading); } - @include iro.bem-utility('c-text') { + @include bem.utility('c-text') { color: props.get(vars.$theme, --text); } - @include iro.bem-utility('c-mute') { + @include bem.utility('c-mute') { color: props.get(vars.$theme, --text-mute); } - @include iro.bem-utility('c-mute-more') { + @include bem.utility('c-mute-more') { color: props.get(vars.$theme, --text-mute-more); } @each $dir, $prop in (is: inline-size, bs: block-size) { - @include iro.bem-utility('#{$dir}-100') { + @include bem.utility('#{$dir}-100') { #{$prop}: 100%; } - @include iro.bem-utility('#{$dir}-75') { + @include bem.utility('#{$dir}-75') { #{$prop}: 75%; } - @include iro.bem-utility('#{$dir}-50') { + @include bem.utility('#{$dir}-50') { #{$prop}: 50%; } - @include iro.bem-utility('#{$dir}-25') { + @include bem.utility('#{$dir}-25') { #{$prop}: 25%; } - @include iro.bem-utility('#{$dir}-1px') { + @include bem.utility('#{$dir}-1px') { #{$prop}: 1px; } - @include iro.bem-utility('#{$dir}-0') { + @include bem.utility('#{$dir}-0') { #{$prop}: 0; } } - @include iro.bem-utility('elp') { + @include bem.utility('elp') { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - @include iro.bem-utility('p-static') { + @include bem.utility('p-static') { position: static; } - @include iro.bem-utility('p-relative') { + @include bem.utility('p-relative') { position: relative; } - @include iro.bem-utility('p-fixed') { + @include bem.utility('p-fixed') { position: fixed; } - @include iro.bem-utility('p-sticky-bs') { + @include bem.utility('p-sticky-bs') { position: sticky; inset-block-start: 0; } @each $dir, $suffix in $-dirs { - @include iro.bem-utility('m#{$dir}-auto') { + @include bem.utility('m#{$dir}-auto') { margin#{$suffix}: auto; } - @include iro.bem-utility('p#{$dir}-auto') { + @include bem.utility('p#{$dir}-auto') { padding#{$suffix}: auto; } @each $mod, $size in $-sizes { - @include iro.bem-utility('m#{$dir}-#{$mod}') { + @include bem.utility('m#{$dir}-#{$mod}') { margin#{$suffix}: props.get($size); } - @include iro.bem-utility('p#{$dir}-#{$mod}') { + @include bem.utility('p#{$dir}-#{$mod}') { padding#{$suffix}: props.get($size); } } - @include iro.bem-utility('b#{$dir}-0') { + @include bem.utility('b#{$dir}-0') { border#{$suffix}: 0; - @include iro.bem-suffix('light') { + @include bem.suffix('light') { @media (prefers-color-scheme: light) { border#{$suffix}: 0; } } - @include iro.bem-suffix('dark') { + @include bem.suffix('dark') { @media (prefers-color-scheme: dark) { border#{$suffix}: 0; } } } - @include iro.bem-utility('b#{$dir}-1') { + @include bem.utility('b#{$dir}-1') { border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); - @include iro.bem-suffix('light') { + @include bem.suffix('light') { @media (prefers-color-scheme: light) { border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); } } - @include iro.bem-suffix('dark') { + @include bem.suffix('dark') { @media (prefers-color-scheme: dark) { border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); } @@ -249,7 +249,7 @@ $-sizes: ( } } - @include iro.bem-utility('mbs-neutralize') { + @include bem.utility('mbs-neutralize') { &::before { display: block; margin-block: -100em 100em; 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; } diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 046cd16..caba917 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -2,7 +2,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 *; @@ -45,7 +45,7 @@ } } - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); background-color: transparent; border-color: transparent; @@ -72,7 +72,7 @@ } } - @include iro.bem-is('selected') { + @include bem.is('selected') { color: props.get($theme, list.join($key, --selected --disabled --label-color)...); background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); @@ -103,7 +103,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('action-button') { + @include bem.object('action-button') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); @@ -140,12 +140,12 @@ @include -apply-theme(vars.$default-theme); @each $theme in map.keys(props.get(vars.$themes)) { - @include iro.bem-modifier(string.slice($theme, 3)) { + @include bem.modifier(string.slice($theme, 3)) { @include -apply-theme(vars.$themes, $theme); } } - @include iro.bem-modifier('pill') { + @include bem.modifier('pill') { padding-inline: props.get(vars.$pad-i-pill); border-radius: 100em; @@ -155,23 +155,23 @@ } @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { padding-block: props.get($pad-b); padding-inline: props.get($pad-i); font-size: props.get($font-size); - @include iro.bem-modifier('pill') { + @include bem.modifier('pill') { padding-inline: props.get($pad-i-pill); } } } - @include iro.bem-modifier('icon') { + @include bem.modifier('icon') { inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); padding-inline: 0; @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); padding-inline: 0; } diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index e4c2038..3c9209a 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @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 *; @@ -10,7 +10,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('alert') { + @include bem.object('alert') { padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); background-color: props.get(vars.$bg-color); @@ -18,7 +18,7 @@ border-radius: props.get(vars.$rounding); @each $mod, $theme in vars.$themes-config { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { border-color: props.get(vars.$themes, $theme, --border-color); } } diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 0f8e70f..535537f 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.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 *; @@ -7,11 +7,11 @@ @use 'avatar.vars' as vars; @mixin status($indicator-size) { - @include iro.bem-elem('status') { + @include bem.elem('status') { inline-size: props.get($indicator-size); block-size: props.get($indicator-size); - @include iro.bem-next-elem('content') { + @include bem.next-elem('content') { mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at calc(100% - .5 * props.get($indicator-size)) calc(100% - .5 * props.get($indicator-size)), @@ -24,7 +24,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('avatar') { + @include bem.object('avatar') { position: relative; display: inline-block; font-size: props.get(vars.$font-size); @@ -50,7 +50,7 @@ props.get(vars.$key-focus--outline-color); } - @include iro.bem-elem('status') { + @include bem.elem('status') { position: absolute; inset-block-end: 0; inset-inline-end: 0; @@ -58,7 +58,7 @@ @include status(vars.$indicator-size); - @include iro.bem-elem('content') { + @include bem.elem('content') { display: block; inline-size: props.get(vars.$size); block-size: props.get(vars.$size); @@ -69,38 +69,38 @@ border-radius: props.get(vars.$rounding); } - @include iro.bem-modifier('circle') { + @include bem.modifier('circle') { border-radius: 100%; &::after { border-radius: 100%; } - @include iro.bem-elem('content') { + @include bem.elem('content') { border-radius: 100%; } } - @include iro.bem-modifier('placeholder') { - @include iro.bem-elem('content') { + @include bem.modifier('placeholder') { + @include bem.elem('content') { background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); } } - @include iro.bem-modifier('colored') { - @include iro.bem-elem('content') { + @include bem.modifier('colored') { + @include bem.elem('content') { color: #fff; background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); } } @each $mod, $size, $font-size, $indicator-size in vars.$sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { font-size: props.get($font-size); @include status($indicator-size); - @include iro.bem-elem('content') { + @include bem.elem('content') { inline-size: props.get($size); block-size: props.get($size); line-height: props.get($size); diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index bf38079..0e8a7f0 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.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-object('backdrop') { + @include bem.object('backdrop') { position: fixed; inset: 0; z-index: props.get(vars.$z-index); diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 1c28095..d50752a 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -2,7 +2,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 *; @use '../core.vars' as core; @@ -29,7 +29,7 @@ } } - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { color: props.get($theme, list.join($key, --quiet --label)...); background-color: props.get($theme, list.join($key, --quiet --bg)...); @@ -65,7 +65,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('badge') { + @include bem.object('badge') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); @@ -98,25 +98,25 @@ } } - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline: props.get(vars.$pad-i-label); } @include -apply-theme(vars.$default-theme, $static: true); @each $theme in map.keys(props.get(vars.$themes)) { - @include iro.bem-modifier(string.slice($theme, 3)) { + @include bem.modifier(string.slice($theme, 3)) { @include -apply-theme(vars.$themes, $theme); } } @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)) { @include -apply-theme(vars.$static-themes, $theme, true); } } - @include iro.bem-modifier('pill') { + @include bem.modifier('pill') { padding-inline: props.get(vars.$pad-i-pill); border-radius: 10em; @@ -126,16 +126,16 @@ } @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { padding-block: props.get($pad-b); padding-inline: props.get($pad-i); font-size: props.get($font-size); - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline: props.get($pad-i-label); } - @include iro.bem-modifier('pill') { + @include bem.modifier('pill') { padding-inline: props.get($pad-i-pill); } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 9d5a8a1..1809ba6 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -2,7 +2,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 *; @use '../core.vars' as core; @@ -19,7 +19,7 @@ border-color: transparent; } - @include iro.bem-modifier('outline') { + @include bem.modifier('outline') { &:link, &:visited, &:enabled { @@ -62,14 +62,14 @@ props.get($theme, list.join($key, --key-focus --outline)...); } - @include iro.bem-modifier('outline') { + @include bem.modifier('outline') { background-color: transparent; border-color: props.get($theme, list.join($key, --disabled --outline-border)...); } @include -apply-theme($theme, $key); - @include iro.bem-modifier('primary') { + @include bem.modifier('primary') { @include -apply-theme($theme, list.join($key, --primary)); } } @@ -77,7 +77,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('button') { + @include bem.object('button') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); @@ -111,25 +111,25 @@ } } - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline: props.get(vars.$pad-i-label); } - @include iro.bem-modifier('block') { + @include bem.modifier('block') { display: block; } - @include iro.bem-modifier('outline') { + @include bem.modifier('outline') { background-color: transparent; } @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { padding-block: props.get($pad-b); padding-inline: props.get($pad-i); font-size: props.get($font-size); - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline: props.get($pad-i-label); } } @@ -138,18 +138,18 @@ @include -apply-static-theme(vars.$default-theme); @each $theme in map.keys(props.get(vars.$themes)) { - @include iro.bem-modifier(string.slice($theme, 3)) { + @include bem.modifier(string.slice($theme, 3)) { @include -apply-theme(vars.$themes, $theme); } } @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)) { @include -apply-static-theme(vars.$static-themes, $theme); } } - @include iro.bem-modifier('round') { + @include bem.modifier('round') { inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); padding-inline: 0; border-radius: 100em; diff --git a/src/objects/_card.scss b/src/objects/_card.scss index d92237b..a085491 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.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 *; @use 'avatar.vars' as avatar; @@ -10,7 +10,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('card') { + @include bem.object('card') { position: relative; display: flex; flex-direction: column; @@ -21,14 +21,14 @@ border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); transition: transform .2s; - @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, &:active, &:focus-visible { transform: translateY(props.get(vars.$hover--offset-b)); - @include iro.bem-elem('body') { - @include iro.bem-modifier('hidden') { + @include bem.elem('body') { + @include bem.modifier('hidden') { visibility: visible; opacity: 1; transition: @@ -49,12 +49,12 @@ } } - @include iro.bem-elem('avatar') { + @include bem.elem('avatar') { margin-block-start: props.get(vars.$pad-b); margin-inline-start: props.get(vars.$pad-i); } - @include iro.bem-elem('image') { + @include bem.elem('image') { display: block; flex: 0 0 auto; inline-size: 100%; @@ -71,12 +71,12 @@ border-end-end-radius: props.get(vars.$rounding); } - @include iro.bem-next-elem('avatar') { + @include bem.next-elem('avatar') { margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); } } - @include iro.bem-elem('body') { + @include bem.elem('body') { flex: 1 0 auto; padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); @@ -87,7 +87,7 @@ content: ''; } - @include iro.bem-modifier('hidden') { + @include bem.modifier('hidden') { position: absolute; inset-block-end: 0; inset-inline: 0; @@ -101,18 +101,18 @@ opacity .2s ease, visibility 0s .2s linear; - @include iro.bem-next-elem('image') { + @include bem.next-elem('image') { border-start-start-radius: props.get(vars.$rounding); border-start-end-radius: props.get(vars.$rounding); } } } - @include iro.bem-elem('content') { + @include bem.elem('content') { margin-block-start: props.get(vars.$spacing); } - @include iro.bem-elem('footer') { + @include bem.elem('footer') { flex: 0 0 auto; padding-block: 0 props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); @@ -127,18 +127,18 @@ } } - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { position: relative; background-color: transparent; border: 0; - @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, &:active, &:focus-visible { transform: none; - @include iro.bem-elem('image') { + @include bem.elem('image') { background-color: props.get(vars.$quiet--hover--image-color); opacity: .75; transform: translateY(props.get(vars.$hover--offset-b)); @@ -149,7 +149,7 @@ outline: none; box-shadow: none; - @include iro.bem-elem('image') { + @include bem.elem('image') { background-color: props.get(vars.$quiet--hover--image-color); outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: @@ -163,7 +163,7 @@ } } - @include iro.bem-elem('image') { + @include bem.elem('image') { position: relative; margin: calc(-1 * props.get(vars.$key-focus--border-width)); background-color: props.get(vars.$quiet--image-color); @@ -172,24 +172,24 @@ border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); } - @include iro.bem-elem('body') { + @include bem.elem('body') { padding: 0; padding-block-start: props.get(vars.$spacing); } - @include iro.bem-elem('footer') { + @include bem.elem('footer') { padding-inline: 0; } } - @include iro.bem-modifier('horizontal') { + @include bem.modifier('horizontal') { flex-direction: row; align-items: center; - @include iro.bem-elem('body') { + @include bem.elem('body') { flex: 0 0 auto; - @include iro.bem-modifier('main') { + @include bem.modifier('main') { flex-shrink: 1; inline-size: 100%; min-inline-size: 0; diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index f0c6b85..f902da7 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -1,5 +1,6 @@ @use 'sass:meta'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; +@use 'iro-sass/src/functions' as fn; @use 'iro-sass/src/props'; @use '../props' as *; @use '../core.vars' as core; @@ -10,7 +11,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('checkbox') { + @include bem.object('checkbox') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); @@ -19,7 +20,7 @@ calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); - @include iro.bem-elem('box') { + @include bem.elem('box') { position: relative; display: inline-block; flex: 0 0 auto; @@ -66,7 +67,7 @@ } } - @include iro.bem-elem('check-icon') { + @include bem.elem('check-icon') { position: absolute; inset-block-start: calc(1 * props.get(vars.$border-width)); inset-inline-start: calc(1 * props.get(vars.$border-width)); @@ -76,17 +77,17 @@ block-size: calc(100% - 2 * props.get(vars.$border-width)); margin: 0; color: props.get(vars.$box-bg-color); - stroke-width: iro.fn-px-to-rem(3px); + stroke-width: fn.px-to-rem(3px); transition: transform .2s ease; transform: scale(0); transform-origin: 40% 90%; } - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); } - @include iro.bem-elem('native') { + @include bem.elem('native') { position: absolute; inset-block-start: 0; inset-inline-start: 0; @@ -101,29 +102,29 @@ &:hover, &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$hover--label-color); } - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$hover--box-border-color); } } &:checked { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { &::before { transform: scale(0); } - @include iro.bem-elem('check-icon') { + @include bem.elem('check-icon') { transform: scale(1); } } } &:indeterminate { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { &::before { transform: scale(0); } @@ -132,18 +133,18 @@ transform: scale(1); } - @include iro.bem-elem('check-icon') { + @include bem.elem('check-icon') { transform: scale(0); } } } &:disabled { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$disabled--label-color); } - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -153,11 +154,11 @@ } &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$key-focus--label-color); } - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: 0 @@ -169,42 +170,42 @@ } } - @include iro.bem-modifier('standalone') { - @include iro.bem-elem('box') { + @include bem.modifier('standalone') { + @include bem.elem('box') { margin-block-start: 0; } } - @include iro.bem-modifier('accent') { - @include iro.bem-elem('native') { + @include bem.modifier('accent') { + @include bem.elem('native') { &:checked { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:indeterminate { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:disabled { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -213,13 +214,13 @@ } &:checked { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); } } &:indeterminate { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); } } diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 49bc028..6932c7e 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.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 *; @use '../core.vars' as core; @@ -12,7 +12,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('divider') { + @include bem.object('divider') { display: flex; flex: 0 0 auto; flex-direction: row; @@ -39,11 +39,11 @@ display: block; } - @include iro.bem-elem('label') { + @include bem.elem('label') { flex: 0 0 auto; } - @include iro.bem-modifier('vertical') { + @include bem.modifier('vertical') { align-self: stretch; inline-size: 1px; block-size: auto; @@ -56,7 +56,7 @@ } } - @include iro.bem-modifier('medium') { + @include bem.modifier('medium') { font-size: props.get(vars.$medium--label-font-size); font-weight: 500; color: props.get(vars.$medium--label-color); @@ -68,7 +68,7 @@ } } - @include iro.bem-modifier('faint') { + @include bem.modifier('faint') { font-size: props.get(vars.$faint--label-font-size); font-weight: 500; color: props.get(vars.$faint--label-color); @@ -80,7 +80,7 @@ } } - @include iro.bem-modifier('labelled') { + @include bem.modifier('labelled') { &::before { margin-inline-end: 1em; } @@ -92,47 +92,47 @@ } @each $theme in map.keys(props.get(vars.$themes)) { - @include iro.bem-modifier(string.slice($theme, 3)) { + @include bem.modifier(string.slice($theme, 3)) { &::before, &::after { background-color: props.get(vars.$themes, $theme, --bg); } - @include iro.bem-elem('label') { + @include bem.elem('label') { color: props.get(vars.$themes, $theme, --label); } } } @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)) { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --strong, --bg); } - @include iro.bem-elem('label') { + @include bem.elem('label') { color: props.get(vars.$static-themes, $theme, --strong, --label); } - @include iro.bem-modifier('medium') { + @include bem.modifier('medium') { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --medium, --bg); } - @include iro.bem-elem('label') { + @include bem.elem('label') { color: props.get(vars.$static-themes, $theme, --medium, --label); } } - @include iro.bem-modifier('faint') { + @include bem.modifier('faint') { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --faint, --bg); } - @include iro.bem-elem('label') { + @include bem.elem('label') { color: props.get(vars.$static-themes, $theme, --faint, --label); } } diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index 114c867..56d4e66 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.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 *; @use 'icon.vars' as icon; @@ -10,7 +10,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('emoji') { + @include bem.object('emoji') { position: relative; display: inline-block; inline-size: calc(props.get(vars.$size)); @@ -20,24 +20,24 @@ vertical-align: props.get(vars.$valign); object-fit: contain; - @include iro.bem-modifier('icon') { + @include bem.modifier('icon') { margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); vertical-align: props.get(icon.$valign); } @each $mod, $size, $valign in vars.$sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { inline-size: props.get($size); block-size: props.get($size); vertical-align: props.get($valign); - @include iro.bem-modifier('icon') { + @include bem.modifier('icon') { margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); } } } - @include iro.bem-modifier('zoomable') { + @include bem.modifier('zoomable') { border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); transition: transform .2s ease, background-color .2s ease; diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 8c275ee..9f87a20 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.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,10 +9,10 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('field-label') { + @include bem.object('field-label') { display: block; - @include iro.bem-elem('label') { + @include bem.elem('label') { display: block; flex: 0 0 auto; padding-inline-end: props.get(vars.$spacing-i); @@ -21,56 +21,56 @@ line-height: 1.3; color: props.get(vars.$label-color); - @include iro.bem-next-elem('content') { + @include bem.next-elem('content') { margin-block-start: props.get(vars.$spacing-b); } } - @include iro.bem-elem('content') { + @include bem.elem('content') { display: block; flex: 1 1 auto; } - @include iro.bem-elem('hint') { + @include bem.elem('hint') { display: block; margin-block-start: props.get(vars.$spacing-b); font-size: props.get(vars.$hint-font-size); color: props.get(vars.$hint-color); } - @include iro.bem-is('invalid') { - @include iro.bem-elem('hint') { + @include bem.is('invalid') { + @include bem.elem('hint') { color: props.get(vars.$error-hint-color); } } - @include iro.bem-is('disabled') { - @include iro.bem-elem('label', 'hint') { + @include bem.is('disabled') { + @include bem.elem('label', 'hint') { color: props.get(vars.$disabled-color); } } - @include iro.bem-modifier('align-start', 'align-end') { + @include bem.modifier('align-start', 'align-end') { display: flex; align-items: baseline; - @include iro.bem-elem('label') { + @include bem.elem('label') { display: inline-block; - @include iro.bem-next-elem('content') { + @include bem.next-elem('content') { margin-block-start: 0; } } } - @include iro.bem-modifier('align-start') { - @include iro.bem-elem('label') { + @include bem.modifier('align-start') { + @include bem.elem('label') { text-align: start; } } - @include iro.bem-modifier('align-end') { - @include iro.bem-elem('label') { + @include bem.modifier('align-end') { + @include bem.elem('label') { text-align: end; } } diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 7efb23b..f3ee5b5 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.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-object('heading') { + @include bem.object('heading') { display: block; margin-block-start: props.get(vars.$margin-bs); font-family: props.get(vars.$font-family); @@ -24,7 +24,7 @@ margin-block-start: props.get(vars.$margin-bs-sibling); } - @include iro.bem-elem('highlight') { + @include bem.elem('highlight') { background-image: linear-gradient(to top, transparent .05em, props.get(vars.$bg-color) .05em, @@ -33,7 +33,7 @@ } @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { font-family: props.get($font-family); font-size: props.get($font-size); font-weight: props.get($font-weight); @@ -43,9 +43,9 @@ } } - @include iro.bem-modifier('display') { + @include bem.modifier('display') { @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { - @include iro.bem-modifier($mod) { + @include bem.modifier($mod) { font-family: props.get($font-family); font-size: props.get($font-size); font-weight: props.get($font-weight); diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index f80915e..1e35830 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.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-object('icon') { + @include bem.object('icon') { display: inline; inline-size: props.get(vars.$size); block-size: props.get(vars.$size); @@ -18,7 +18,7 @@ stroke-linejoin: round; stroke-width: props.get(vars.$stroke-width); - @include iro.bem-modifier('block') { + @include bem.modifier('block') { display: block; } } 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); } diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 0741929..46ca109 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.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 *; @use 'icon.vars' as icon; @@ -10,12 +10,12 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('menu') { + @include bem.object('menu') { display: flex; flex-direction: column; gap: props.get(vars.$spacing); - @include iro.bem-elem('header') { + @include bem.elem('header') { padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); font-size: props.get(vars.$header--font-size); @@ -24,12 +24,12 @@ text-transform: uppercase; letter-spacing: .5px; - @include iro.bem-next-twin-elem { + @include bem.next-twin-elem { margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); } } - @include iro.bem-elem('item') { + @include bem.elem('item') { padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); @@ -43,7 +43,7 @@ &:enabled { color: currentColor; - @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { + @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { color: props.get(vars.$item--hover--label-color); background-color: props.get(vars.$item--hover--bg-color); } @@ -64,12 +64,12 @@ } } - @include iro.bem-next-elem('header') { + @include bem.next-elem('header') { margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); } } - @include iro.bem-elem('header') { + @include bem.elem('header') { &:link, &:visited, &:enabled { @@ -77,25 +77,25 @@ } } - @include iro.bem-elem('separator') { + @include bem.elem('separator') { block-size: 1px; margin-block: props.get(vars.$separator-width); margin-inline: props.get(vars.$item--pad-i); background-color: props.get(vars.$separator-color); } - @include iro.bem-elem('slot') { + @include bem.elem('slot') { padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); } - @include iro.bem-elem('icon-slot') { + @include bem.elem('icon-slot') { display: flex; justify-content: center; inline-size: props.get(icon.$size); } - @include iro.bem-modifier('pull') { + @include bem.modifier('pull') { margin: calc(-1 * props.get(vars.$item--pad-i)); } } diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 88ce9b5..243810f 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -1,17 +1,17 @@ @use 'sass:list'; @use 'sass:map'; @use 'sass:string'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use '../config'; @use 'iro-sass/src/props'; @use '../core.vars' as core; @mixin styles { - @include iro.bem-object('palette') { + @include bem.object('palette') { display: flex; block-size: 3em; - @include iro.bem-elem('item') { + @include bem.elem('item') { flex: 1 1 auto; $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); @@ -29,8 +29,8 @@ @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); - @include iro.bem-modifier(string.slice($palette-name, 3)) { - @include iro.bem-elem('item') { + @include bem.modifier(string.slice($palette-name, 3)) { + @include bem.elem('item') { @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); @@ -42,12 +42,12 @@ } } - @include iro.bem-modifier('static') { + @include bem.modifier('static') { @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { $contrasts: map.get(config.$static-colors, --contrasts); - @include iro.bem-modifier(string.slice($palette-name, 3)) { - @include iro.bem-elem('item') { + @include bem.modifier(string.slice($palette-name, 3)) { + @include bem.elem('item') { @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 406c143..ae874ba 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.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-object('popover') { + @include bem.object('popover') { position: absolute; inset-block-start: 0; inset-inline-start: 0; @@ -22,15 +22,15 @@ border-radius: props.get(vars.$rounding); transform: translate(var(--x), var(--y)); - @include iro.bem-modifier('up-left') { + @include bem.modifier('up-left') { transform: translate(var(--x), calc(var(--y) - 100%)); } - @include iro.bem-modifier('up-right') { + @include bem.modifier('up-right') { transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); } - @include iro.bem-modifier('down-right') { + @include bem.modifier('down-right') { transform: translate(calc(var(--x) - 100%), var(--y)); } } diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index c6e5a60..b603a0d 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.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 *; @use '../core.vars' as core; @@ -10,7 +10,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('radio') { + @include bem.object('radio') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); @@ -19,7 +19,7 @@ calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); - @include iro.bem-elem('circle') { + @include bem.elem('circle') { display: inline-block; flex: 0 0 auto; inline-size: props.get(vars.$diameter); @@ -45,11 +45,11 @@ } } - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); } - @include iro.bem-elem('native') { + @include bem.elem('native') { position: absolute; inset-block-start: 0; inset-inline-start: 0; @@ -64,17 +64,17 @@ &:hover, &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$hover--label-color); } - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$hover--circle-border-color); } } &:checked { - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { &::after { transform: scale(.44); } @@ -82,11 +82,11 @@ } &:disabled { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$disabled--label-color); } - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -96,11 +96,11 @@ } &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$key-focus--label-color); } - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: 0 @@ -112,29 +112,29 @@ } } - @include iro.bem-modifier('standalone') { - @include iro.bem-elem('circle') { + @include bem.modifier('standalone') { + @include bem.elem('circle') { margin-block-start: 0; } } - @include iro.bem-modifier('accent') { - @include iro.bem-elem('native') { + @include bem.modifier('accent') { + @include bem.elem('native') { &:checked { - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$accent--circle-border-color); } &:hover, &:focus-visible { - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$accent--hover--circle-border-color); } } } &:disabled { - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -143,7 +143,7 @@ } &:checked { - @include iro.bem-sibling-elem('circle') { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$disabled--circle-border-color); } } diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index c1e984f..9488bec 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.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 *; @use 'icon.vars' as icon; @@ -10,12 +10,12 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('side-nav') { + @include bem.object('side-nav') { display: flex; flex-direction: column; gap: props.get(vars.$spacing); - @include iro.bem-elem('header') { + @include bem.elem('header') { padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); font-size: props.get(vars.$header--font-size); @@ -24,12 +24,12 @@ text-transform: uppercase; letter-spacing: .5px; - @include iro.bem-next-twin-elem { + @include bem.next-twin-elem { margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } - @include iro.bem-elem('item') { + @include bem.elem('item') { padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); @@ -43,7 +43,7 @@ &:enabled { color: currentColor; - @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { + @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { color: props.get(vars.$item--hover--label-color); background-color: props.get(vars.$item--hover--bg-color); } @@ -64,12 +64,12 @@ } } - @include iro.bem-next-elem('header') { + @include bem.next-elem('header') { margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } - @include iro.bem-elem('header') { + @include bem.elem('header') { &:link, &:visited, &:enabled { @@ -77,11 +77,11 @@ } } - @include iro.bem-elem('separator') { + @include bem.elem('separator') { block-size: props.get(vars.$separator); } - @include iro.bem-elem('icon-slot') { + @include bem.elem('icon-slot') { display: flex; justify-content: center; inline-size: props.get(icon.$size); diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index bf113a4..126f724 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.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('status-indicator') { + @include bem.object('status-indicator') { display: inline-block; inline-size: props.get(vars.$size); block-size: props.get(vars.$size); @@ -20,7 +20,7 @@ border-radius: 10em; @each $theme in map.keys(props.get(vars.$themes)) { - @include iro.bem-is(string.slice($theme, 3)) { + @include bem.is(string.slice($theme, 3)) { background-color: props.get(vars.$themes, $theme); } } diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index f368229..15d75b9 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.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 *; @use '../core.vars' as core; @@ -10,7 +10,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('switch') { + @include bem.object('switch') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); @@ -19,7 +19,7 @@ calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); - @include iro.bem-elem('indicator') { + @include bem.elem('indicator') { display: inline-block; flex: 0 0 auto; inline-size: props.get(vars.$inline-size); @@ -44,11 +44,11 @@ } } - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline-start: props.get(vars.$label-gap); } - @include iro.bem-elem('native') { + @include bem.elem('native') { position: absolute; inset-block-start: 0; inset-inline-start: 0; @@ -63,11 +63,11 @@ &:hover, &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$hover--label-color); } - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { &::after { border-color: props.get(vars.$hover--handle-border-color); } @@ -75,7 +75,7 @@ } &:checked { - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { background-color: props.get(vars.$handle-border-color); &::after { @@ -86,7 +86,7 @@ &:hover, &:focus-visible { - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { background-color: props.get(vars.$hover--handle-border-color); &::after { @@ -97,11 +97,11 @@ } &:disabled { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$disabled--label-color); } - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { background-color: props.get(vars.$disabled--track-bg-color); &::after { @@ -111,7 +111,7 @@ } &:checked { - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { background-color: props.get(vars.$disabled--handle-border-color); &::after { @@ -122,11 +122,11 @@ } &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$key-focus--label-color); } - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: 0 @@ -138,16 +138,16 @@ } } - @include iro.bem-modifier('standalone') { - @include iro.bem-elem('indicator') { + @include bem.modifier('standalone') { + @include bem.elem('indicator') { margin-block-start: 0; } } - @include iro.bem-modifier('accent') { - @include iro.bem-elem('native') { + @include bem.modifier('accent') { + @include bem.elem('native') { &:checked { - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { background-color: props.get(vars.$accent--handle-border-color); &::after { @@ -157,7 +157,7 @@ &:hover, &:focus-visible { - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { background-color: props.get(vars.$accent--hover--handle-border-color); &::after { @@ -168,12 +168,12 @@ } &:disabled { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$disabled--label-color); } &:checked { - @include iro.bem-sibling-elem('indicator') { + @include bem.sibling-elem('indicator') { background-color: props.get(vars.$disabled--handle-border-color); &::after { diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 491db20..c0a7360 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.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,15 +9,15 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('table') { + @include bem.object('table') { border-spacing: 0; border-collapse: separate; - @include iro.bem-modifier('fixed') { + @include bem.modifier('fixed') { table-layout: fixed; } - @include iro.bem-elem('head-cell') { + @include bem.elem('head-cell') { padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); font-family: props.get(vars.$heading--font-family); @@ -29,7 +29,7 @@ letter-spacing: props.get(vars.$heading--letter-spacing); } - @include iro.bem-elem('cell') { + @include bem.elem('cell') { padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); border-color: props.get(vars.$border-color); @@ -37,21 +37,21 @@ border-width: 0; border-block-start-width: props.get(vars.$border-width); - @include iro.bem-modifier('divider') { + @include bem.modifier('divider') { border-inline-end-width: props.get(vars.$border-width); } } - @include iro.bem-elem('row') { + @include bem.elem('row') { &:last-child { - @include iro.bem-elem('cell') { + @include bem.elem('cell') { border-block-end-width: props.get(vars.$border-width); } } } - @include iro.bem-modifier('flush') { - @include iro.bem-elem('head-cell', 'cell') { + @include bem.modifier('flush') { + @include bem.elem('head-cell', 'cell') { &:first-child { padding-inline-start: 0; } @@ -62,8 +62,8 @@ } } - @include iro.bem-modifier('box') { - @include iro.bem-elem('cell') { + @include bem.modifier('box') { + @include bem.elem('cell') { background-color: props.get(vars.$box--bg-color); &:first-child { @@ -75,9 +75,9 @@ } } - @include iro.bem-elem('row') { + @include bem.elem('row') { &:first-child { - @include iro.bem-elem('cell') { + @include bem.elem('cell') { &:first-child { border-start-start-radius: props.get(vars.$rounding); } @@ -89,7 +89,7 @@ } &:last-child { - @include iro.bem-elem('cell') { + @include bem.elem('cell') { &:first-child { border-end-start-radius: props.get(vars.$rounding); } @@ -102,35 +102,35 @@ } } - @include iro.bem-modifier('interactive') { - @include iro.bem-elem('row') { - @include iro.bem-elem('cell') { + @include bem.modifier('interactive') { + @include bem.elem('row') { + @include bem.elem('cell') { cursor: pointer; } &:hover { - @include iro.bem-elem('cell') { + @include bem.elem('cell') { background-color: props.get(vars.$hover--bg-color); } } &:active { - @include iro.bem-elem('cell') { + @include bem.elem('cell') { background-color: props.get(vars.$active--bg-color); } } } - @include iro.bem-modifier('box') { - @include iro.bem-elem('row') { + @include bem.modifier('box') { + @include bem.elem('row') { &:hover { - @include iro.bem-elem('cell') { + @include bem.elem('cell') { background-color: props.get(vars.$box--hover--bg-color); } } &:active { - @include iro.bem-elem('cell') { + @include bem.elem('cell') { background-color: props.get(vars.$box--active--bg-color); } } @@ -138,8 +138,8 @@ } } - @include iro.bem-modifier('sm') { - @include iro.bem-elem('head-cell', 'cell') { + @include bem.modifier('sm') { + @include bem.elem('head-cell', 'cell') { padding-block: props.get(vars.$pad-b--sm); } } diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index b945866..0f96634 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.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 -invalid { $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); @@ -17,20 +17,20 @@ } &:hover { - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { border-color: props.get(vars.$error--hover--border-color); } } &:focus { - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { border-color: props.get(vars.$error--focus--border-color); } } } @mixin -keyboard-focus { - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { border-color: props.get(vars.$key-focus--border-color); outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); //outline-offset: props.get(vars.$focus --border); @@ -40,7 +40,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('text-field') { + @include bem.object('text-field') { $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); position: relative; @@ -48,7 +48,7 @@ background-color: props.get(vars.$bg-color); border-radius: props.get(vars.$rounding); - @include iro.bem-elem('bg') { + @include bem.elem('bg') { position: absolute; inset-block: 0; inset-inline: 0; @@ -58,7 +58,7 @@ border-radius: props.get(vars.$rounding); } - @include iro.bem-elem('native') { + @include bem.elem('native') { box-sizing: border-box; inline-size: 100%; padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); @@ -78,7 +78,7 @@ } &:hover { - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { border-color: props.get(vars.$hover--border-color); } } @@ -86,7 +86,7 @@ &:focus { outline: 0; - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); @@ -104,24 +104,24 @@ } } - @include iro.bem-modifier('extended') { + @include bem.modifier('extended') { padding: props.get(vars.$extended--pad); - @include iro.bem-multi('&', 'elem' 'bg') { + @include bem.multi('&', 'elem' 'bg') { border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); } - @include iro.bem-elem('native') { + @include bem.elem('native') { &:focus { - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); } } } } - @include iro.bem-is('invalid') { - @include iro.bem-elem('native') { + @include bem.is('invalid') { + @include bem.elem('native') { @include -invalid; &:focus-visible { @@ -130,10 +130,10 @@ } } - @include iro.bem-is('disabled') { + @include bem.is('disabled') { background-color: props.get(vars.$disabled--bg-color); - @include iro.bem-elem('native') { + @include bem.elem('native') { color: props.get(vars.$disabled--text-color); &::placeholder { @@ -141,21 +141,21 @@ } } - @include iro.bem-elem('bg') { + @include bem.elem('bg') { border-color: props.get(vars.$disabled--border-color); } - @include iro.bem-is('invalid') { - @include iro.bem-elem('native') { - @include iro.bem-sibling-elem('bg') { + @include bem.is('invalid') { + @include bem.elem('native') { + @include bem.sibling-elem('bg') { border-color: props.get(vars.$disabled--border-color); } } } - @include iro.bem-elem('native') { + @include bem.elem('native') { &:invalid { - @include iro.bem-sibling-elem('bg') { + @include bem.sibling-elem('bg') { border-color: props.get(vars.$disabled--border-color); } } diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss index 7406c89..7989cb7 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.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-scope('blockquotes') { + @include bem.scope('blockquotes') { blockquote { padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); margin-block: props.get(vars.$margin-bs); @@ -17,7 +17,7 @@ border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); } - @include iro.bem-modifier('compact') { + @include bem.modifier('compact') { blockquote { padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); } diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index 5035879..367a110 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.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-scope('code') { + @include bem.scope('code') { code { padding-block: props.get(vars.$inline--pad-b); padding-inline: props.get(vars.$inline--pad-i); diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index c786a75..415fb15 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -1,5 +1,5 @@ @use 'sass:map'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../objects/heading.vars' as heading; @@ -14,7 +14,7 @@ xxl: h1, ); - @include iro.bem-scope('headings') { + @include bem.scope('headings') { h1, h2, h3, @@ -32,7 +32,7 @@ transform: translateX(props.get(heading.$offset)); } - @include iro.bem-elem('highlight') { + @include bem.elem('highlight') { background-image: linear-gradient(to top, transparent .15em, props.get(heading.$bg-color) .15em, @@ -51,7 +51,7 @@ } } - @include iro.bem-modifier('display') { + @include bem.modifier('display') { @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { #{map.get($-size-map, $mod)} { font-family: props.get($font-family); diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 7b1f43b..707339e 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -1,6 +1,6 @@ @use 'sass:math'; @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 *; @use '../core.vars' as core; diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 41472c7..8ecf0ae 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.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-scope('links') { + @include bem.scope('links') { :link, :visited { color: currentColor; @@ -40,14 +40,14 @@ } } - @include iro.bem-modifier('invisible') { + @include bem.modifier('invisible') { :link, :visited { text-decoration: none; } } - @include iro.bem-modifier('colored') { + @include bem.modifier('colored') { :link { color: props.get(vars.$colored--text-color); text-decoration-color: props.get(vars.$colored--underline-color); @@ -68,7 +68,7 @@ } @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)) { :link, :visited { color: props.get(vars.$static-themes, $theme, --text-color); diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss index 7f18df0..0cf8c54 100644 --- a/src/scopes/_lists.scss +++ b/src/scopes/_lists.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 *; @use '../core.vars' as core; @@ -10,7 +10,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-scope('lists') { + @include bem.scope('lists') { ul, ol { padding-inline-start: props.get(vars.$indent); @@ -46,7 +46,7 @@ margin-inline: props.get(vars.$indent) 0; } - @include iro.bem-modifier('compact') { + @include bem.modifier('compact') { ul, ol { padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index 08df871..e50f134 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.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 *; @use '../objects/table.vars' as table; @@ -10,7 +10,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-scope('tables') { + @include bem.scope('tables') { table { margin-block-start: props.get(vars.$margin-bs); border-spacing: 0; @@ -46,7 +46,7 @@ } } - @include iro.bem-modifier('flush') { + @include bem.modifier('flush') { th, td { &:first-child { @@ -59,7 +59,7 @@ } } - @include iro.bem-modifier('box') { + @include bem.modifier('box') { td { background-color: props.get(table.$box--bg-color); diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss index 8edcb0e..22b3de0 100644 --- a/src_demo/components/_box.scss +++ b/src_demo/components/_box.scss @@ -1,8 +1,8 @@ -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../../src/core.vars'; -@include iro.bem-component('box') { +@include bem.component('box') { padding: 2em; margin-block: 2em; border: 1px solid props.get(core.$theme, --border); diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss index cd38954..81b4598 100644 --- a/src_demo/components/_content.scss +++ b/src_demo/components/_content.scss @@ -1,6 +1,6 @@ -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; -@include iro.bem-component('content') { +@include bem.component('content') { grid-area: content; overflow: auto; } diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss index 4cce9b8..3d4ad89 100644 --- a/src_demo/components/_sidebar.scss +++ b/src_demo/components/_sidebar.scss @@ -1,6 +1,6 @@ -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; -@include iro.bem-component('sidebar') { +@include bem.component('sidebar') { grid-area: sidebar; min-inline-size: 15em; min-block-size: 0; diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss index 9516b12..446de7e 100644 --- a/src_demo/components/_view.scss +++ b/src_demo/components/_view.scss @@ -1,6 +1,6 @@ -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; -@include iro.bem-component('view') { +@include bem.component('view') { display: none; &:target { -- cgit v1.2.3-70-g09d2