From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 6 Aug 2025 16:40:56 +0200 Subject: Switch to tab indentation --- src/objects/_alert.scss | 54 +-- src/objects/_alert.vars.scss | 22 +- src/objects/_avatar.scss | 220 ++++++------ src/objects/_avatar.vars.scss | 12 +- src/objects/_backdrop.scss | 24 +- src/objects/_button.scss | 532 ++++++++++++++-------------- src/objects/_button.vars.scss | 598 ++++++++++++++++---------------- src/objects/_card.scss | 530 ++++++++++++++-------------- src/objects/_checkbox.scss | 422 +++++++++++----------- src/objects/_divider.scss | 372 ++++++++++---------- src/objects/_divider.vars.scss | 60 ++-- src/objects/_emoji.scss | 78 ++--- src/objects/_emoji.vars.scss | 6 +- src/objects/_field-label.scss | 110 +++--- src/objects/_figure.scss | 28 +- src/objects/_heading.scss | 90 ++--- src/objects/_heading.vars.scss | 24 +- src/objects/_icon.scss | 26 +- src/objects/_lightbox.scss | 244 ++++++------- src/objects/_lightbox.vars.scss | 12 +- src/objects/_menu.scss | 182 +++++----- src/objects/_navbar.scss | 358 +++++++++---------- src/objects/_navbar.vars.scss | 102 +++--- src/objects/_palette.scss | 90 ++--- src/objects/_placeholders.scss | 22 +- src/objects/_popover.scss | 62 ++-- src/objects/_radio.scss | 248 ++++++------- src/objects/_side-nav.scss | 134 +++---- src/objects/_status-indicator.scss | 26 +- src/objects/_status-indicator.vars.scss | 18 +- src/objects/_switch.scss | 338 +++++++++--------- src/objects/_tabbar.scss | 174 +++++----- src/objects/_table.scss | 232 ++++++------- src/objects/_text-field.scss | 336 +++++++++--------- src/objects/_thumbnail.scss | 160 ++++----- src/objects/_thumbnail.vars.scss | 34 +- 36 files changed, 2990 insertions(+), 2990 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index de0e913..697ac18 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -8,33 +8,33 @@ @use 'alert.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @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); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); + @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); + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get(vars.$shadow-color); - @each $mod, $theme in vars.$themes-config { - @include bem.modifier($mod) { - background-color: props.get(vars.$themes, $theme, --bg-color); - border-color: props.get(vars.$themes, $theme, --border-color); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$themes, $theme, --shadow-color); - } - } - } + @each $mod, $theme in vars.$themes-config { + @include bem.modifier($mod) { + background-color: props.get(vars.$themes, $theme, --bg-color); + border-color: props.get(vars.$themes, $theme, --border-color); + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get(vars.$themes, $theme, --shadow-color); + } + } + } } diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss index f23928d..62d3414 100644 --- a/src/objects/_alert.vars.scss +++ b/src/objects/_alert.vars.scss @@ -17,20 +17,20 @@ $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text- $shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; $themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, ) !default; $themes: props.def(--o-alert, (), 'color'); @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - $key: ( - --bg-color: props.get(core.$theme, --bg-l2), - --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800), - --shadow-color: props.get(core.$theme, $key, --200), - ) - )); + $themes: props.merge($themes, ( + $key: ( + --bg-color: props.get(core.$theme, --bg-l2), + --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800), + --shadow-color: props.get(core.$theme, $key, --200), + ) + )); } diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 81396e3..9d51ffb 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -7,120 +7,120 @@ @use 'avatar.vars' as vars; @mixin status($indicator-size) { - @include bem.elem('status') { - inline-size: props.get($indicator-size); - block-size: props.get($indicator-size); - - @include bem.sibling-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)), - transparent 95%, - #fff); - } - } + @include bem.elem('status') { + inline-size: props.get($indicator-size); + block-size: props.get($indicator-size); + + @include bem.sibling-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)), + transparent 95%, + #fff); + } + } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('avatar') { - position: relative; - display: inline-block; - font-size: props.get(vars.$font-size); - font-style: normal; - vertical-align: .05em; - border-radius: props.get(vars.$rounding); - - &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; - pointer-events: none; - content: ''; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: props.get(vars.$rounding); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - - @include bem.elem('status') { - position: absolute; - inset-block-end: 0; - inset-inline-end: 0; - } - - @include status(vars.$indicator-size); - - @include bem.elem('content') { - display: block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - line-height: props.get(vars.$size); - text-align: center; - object-fit: cover; - object-position: center center; - border-radius: props.get(vars.$rounding); - } - - @include bem.modifier('circle') { - border-radius: 100%; - - &::after { - border-radius: 100%; - } - - @include bem.elem('content') { - border-radius: 100%; - } - } - - @include bem.modifier('placeholder') { - @include bem.elem('content') { - background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); - } - } - - @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)); - } - } - - @include bem.modifier('colored-gradient') { - @include bem.elem('content') { - color: #fff; - background: linear-gradient(props.get(vars.$bg-angle), - hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), - hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); - } - } - - @each $mod, $size, $font-size, $indicator-size in vars.$sizes { - @include bem.modifier($mod) { - font-size: props.get($font-size); + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('avatar') { + position: relative; + display: inline-block; + font-size: props.get(vars.$font-size); + font-style: normal; + vertical-align: .05em; + border-radius: props.get(vars.$rounding); + + &::after { + position: absolute; + inset: calc(-1 * props.get(vars.$key-focus--border-offset)); + z-index: 1; + display: none; + pointer-events: none; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + content: ''; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: props.get(vars.$rounding); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + + @include bem.elem('status') { + position: absolute; + inset-block-end: 0; + inset-inline-end: 0; + } + + @include status(vars.$indicator-size); + + @include bem.elem('content') { + display: block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + line-height: props.get(vars.$size); + text-align: center; + object-fit: cover; + object-position: center center; + border-radius: props.get(vars.$rounding); + } + + @include bem.modifier('circle') { + border-radius: 100%; + + &::after { + border-radius: 100%; + } + + @include bem.elem('content') { + border-radius: 100%; + } + } + + @include bem.modifier('placeholder') { + @include bem.elem('content') { + background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); + } + } + + @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)); + } + } + + @include bem.modifier('colored-gradient') { + @include bem.elem('content') { + color: #fff; + background: linear-gradient(props.get(vars.$bg-angle), + hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), + hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); + } + } + + @each $mod, $size, $font-size, $indicator-size in vars.$sizes { + @include bem.modifier($mod) { + font-size: props.get($font-size); - @include status($indicator-size); + @include status($indicator-size); - @include bem.elem('content') { - inline-size: props.get($size); - block-size: props.get($size); - line-height: props.get($size); - } - } - } + @include bem.elem('content') { + inline-size: props.get($size); + block-size: props.get($size); + line-height: props.get($size); + } + } + } - &:focus-visible { - &::after { - display: block; - } - } - } + &:focus-visible { + &::after { + display: block; + } + } + } } diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss index 9986de5..2374f5a 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss @@ -49,10 +49,10 @@ $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props. $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; $sizes: ( - 'xs' $size--xs $font-size--xs $indicator-size--xs, - 'sm' $size--sm $font-size--sm $indicator-size--sm, - 'lg' $size--lg $font-size--lg $indicator-size--lg, - 'xl' $size--xl $font-size--xl $indicator-size--xl, - 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, - 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, + 'xs' $size--xs $font-size--xs $indicator-size--xs, + 'sm' $size--sm $font-size--sm $indicator-size--sm, + 'lg' $size--lg $font-size--lg $indicator-size--lg, + 'xl' $size--xl $font-size--xl $indicator-size--xl, + 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, + 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, ) !default; diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 9cc9e2e..346cf5f 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss @@ -7,17 +7,17 @@ @use 'backdrop.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('backdrop') { - position: fixed; - inset: 0; - z-index: props.get(vars.$z-index); - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: auto; - background-color: props.get(vars.$bg-color); - backdrop-filter: blur(props.get(vars.$blur)); - } + @include bem.object('backdrop') { + position: fixed; + inset: 0; + z-index: props.get(vars.$z-index); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: auto; + background-color: props.get(vars.$bg-color); + backdrop-filter: blur(props.get(vars.$blur)); + } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 5ba8576..8163cf9 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -10,276 +10,276 @@ @use 'button.vars' as vars; @mixin -apply-theme($theme, $key: ()) { - color: props.get($theme, list.join($key, --disabled --label-color)...); - background-color: props.get($theme, list.join($key, --disabled --bg-color)...); - border-color: props.get($theme, list.join($key, --disabled --border-color)...); - - &::after { - outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get($theme, list.join($key, --key-focus --outline-color)...); - } - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --label-color)...); - background-color: props.get($theme, list.join($key, --bg-color)...); - border-color: props.get($theme, list.join($key, --border-color)...); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --shadow-color)...); + color: props.get($theme, list.join($key, --disabled --label-color)...); + background-color: props.get($theme, list.join($key, --disabled --bg-color)...); + border-color: props.get($theme, list.join($key, --disabled --border-color)...); + + &::after { + outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get($theme, list.join($key, --key-focus --outline-color)...); + } + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --label-color)...); + background-color: props.get($theme, list.join($key, --bg-color)...); + border-color: props.get($theme, list.join($key, --border-color)...); + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --shadow-color)...); - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --hover --label-color)...); - background-color: props.get($theme, list.join($key, --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --hover --border-color)...); - } - - &:active { - color: props.get($theme, list.join($key, --active --label-color)...); - background-color: props.get($theme, list.join($key, --active --bg-color)...); - border-color: props.get($theme, list.join($key, --active --border-color)...); - box-shadow: none; - } - } - - @include bem.modifier('badge') { - color: props.get($theme, list.join($key, --badge --label-color)...); - background-color: props.get($theme, list.join($key, --badge --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --border-color)...); - box-shadow: none; - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --badge --label-color)...); - background-color: props.get($theme, list.join($key, --badge --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --border-color)...); - box-shadow: none; - - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --badge --hover --label-color)...); - background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); - } - - &:active { - color: props.get($theme, list.join($key, --badge --active --label-color)...); - background-color: props.get($theme, list.join($key, --badge --active --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --active --border-color)...); - } - } - } - - @include bem.modifier('quiet') { - color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); - background-color: transparent; - border-color: transparent; - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --quiet --label-color)...); - background-color: transparent; - border-color: transparent; - box-shadow: none; - - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --quiet --hover --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); - border-color: transparent; - } - - &:active { - color: props.get($theme, list.join($key, --quiet --active --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); - border-color: transparent; - } - } - } - - @include bem.is('highlighted') { - &:link, - &:visited, - &:enabled { - &, - &:hover, - &:focus-visible { - border-color: props.get($theme, list.join($key, --highlighted --border-color)...); - } - - box-shadow: - 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --highlighted --shadow-color)...); - - &:focus-visible { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --shadow-color)...); - } - } - } - - @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)...); - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') { - color: props.get($theme, list.join($key, --selected --label-color)...); - background-color: props.get($theme, list.join($key, --selected --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --border-color)...); - } - - &:link, - &:visited, - &:enabled { - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --selected --hover --label-color)...); - background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); - } + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --hover --label-color)...); + background-color: props.get($theme, list.join($key, --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --hover --border-color)...); + } + + &:active { + color: props.get($theme, list.join($key, --active --label-color)...); + background-color: props.get($theme, list.join($key, --active --bg-color)...); + border-color: props.get($theme, list.join($key, --active --border-color)...); + box-shadow: none; + } + } + + @include bem.modifier('badge') { + color: props.get($theme, list.join($key, --badge --label-color)...); + background-color: props.get($theme, list.join($key, --badge --bg-color)...); + border-color: props.get($theme, list.join($key, --badge --border-color)...); + box-shadow: none; + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --badge --label-color)...); + background-color: props.get($theme, list.join($key, --badge --bg-color)...); + border-color: props.get($theme, list.join($key, --badge --border-color)...); + box-shadow: none; + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --badge --hover --label-color)...); + background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); + } + + &:active { + color: props.get($theme, list.join($key, --badge --active --label-color)...); + background-color: props.get($theme, list.join($key, --badge --active --bg-color)...); + border-color: props.get($theme, list.join($key, --badge --active --border-color)...); + } + } + } + + @include bem.modifier('quiet') { + color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); + background-color: transparent; + border-color: transparent; + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --quiet --label-color)...); + background-color: transparent; + border-color: transparent; + box-shadow: none; + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --quiet --hover --label-color)...); + background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); + border-color: transparent; + } + + &:active { + color: props.get($theme, list.join($key, --quiet --active --label-color)...); + background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); + border-color: transparent; + } + } + } + + @include bem.is('highlighted') { + &:link, + &:visited, + &:enabled { + &, + &:hover, + &:focus-visible { + border-color: props.get($theme, list.join($key, --highlighted --border-color)...); + } + + box-shadow: + 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --highlighted --shadow-color)...); + + &:focus-visible { + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --shadow-color)...); + } + } + } + + @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)...); + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') { + color: props.get($theme, list.join($key, --selected --label-color)...); + background-color: props.get($theme, list.join($key, --selected --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --border-color)...); + } + + &:link, + &:visited, + &:enabled { + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --selected --hover --label-color)...); + background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); + } - &:active { - color: props.get($theme, list.join($key, --selected --active --label-color)...); - background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --active --border-color)...); - } - } - } + &:active { + color: props.get($theme, list.join($key, --selected --active --label-color)...); + background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --active --border-color)...); + } + } + } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('button') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - line-height: props.get(vars.$line-height); - font-size: props.get(vars.$font-size); - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - border: props.get(vars.$border-width) solid transparent; - border-radius: props.get(vars.$rounding); - transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s; - - &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; - pointer-events: none; - content: ''; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - outline: transparent solid props.get(vars.$key-focus--border-width); - } - - &:link, - &:visited, - &:enabled { - &:focus-visible { - transition: none; - - &::after { - display: block; - } - } - } - - @include bem.elem('label') { - margin-inline: props.get(vars.$pad-i-label); - } - - @include -apply-theme(vars.$default-theme); - - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.modifier(string.slice($theme, 3)) { - @include -apply-theme(vars.$themes, $theme); - } - } - - @include bem.modifier('pill') { - padding-inline: props.get(vars.$pad-i-pill); - border-radius: 100em; - - &::after { - border-radius: 100em; - } - } - - @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-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { - @include bem.modifier($mod) { - padding-block: props.get($pad-b); - padding-inline: props.get($pad-i); - font-size: props.get($font-size); - - @include bem.elem('label') { - margin-inline: props.get($pad-i-label); - } - - @include bem.modifier('pill') { - padding-inline: props.get($pad-i-pill); - } - - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); - padding-inline: 0; - } - } - } - - @include bem.modifier('align-block') { - margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); - - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); - } - - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); - } - - @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { - @include bem.modifier($mod) { - margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('button') { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + text-overflow: ellipsis; + font-size: props.get(vars.$font-size); + line-height: props.get(vars.$line-height); + text-align: center; + white-space: nowrap; + text-decoration: none; + border: props.get(vars.$border-width) solid transparent; + border-radius: props.get(vars.$rounding); + transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s; + + &::after { + position: absolute; + inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); + z-index: 1; + display: none; + pointer-events: none; + outline: transparent solid props.get(vars.$key-focus--border-width); + content: ''; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + } + + &:link, + &:visited, + &:enabled { + &:focus-visible { + transition: none; + + &::after { + display: block; + } + } + } + + @include bem.elem('label') { + margin-inline: props.get(vars.$pad-i-label); + } + + @include -apply-theme(vars.$default-theme); + + @each $theme in map.keys(props.get(vars.$themes)) { + @include bem.modifier(string.slice($theme, 3)) { + @include -apply-theme(vars.$themes, $theme); + } + } + + @include bem.modifier('pill') { + padding-inline: props.get(vars.$pad-i-pill); + border-radius: 100em; + + &::after { + border-radius: 100em; + } + } + + @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-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @include bem.modifier($mod) { + padding-block: props.get($pad-b); + padding-inline: props.get($pad-i); + font-size: props.get($font-size); + + @include bem.elem('label') { + margin-inline: props.get($pad-i-label); + } + + @include bem.modifier('pill') { + padding-inline: props.get($pad-i-pill); + } + + @include bem.modifier('icon') { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); + padding-inline: 0; + } + } + } + + @include bem.modifier('align-block') { + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); + + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); + } + + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); + } + + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @include bem.modifier($mod) { + margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); - } - - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); - } - } - } - } - } + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); + } + + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); + } + } + } + } + } } diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 00a11c3..6e2298f 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -41,334 +41,334 @@ $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; $fixed-sizes: ( - 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, - 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, - 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, + 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, + 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, + 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, ) !default; $themes: props.def(--o-button, (), 'color'); $default-theme-override: () !default; $default-theme: map.deep-merge(( - --bg-color: props.get(core.$theme, --bg-l2), - --label-color: props.get(core.$theme, --text), - --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), - --shadow-color: props.get(core.$theme, --shadow), - - --hover: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - - --disabled: ( - --bg-color: transparent, - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --text-disabled), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, --focus, --border), - --shadow-color: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), - - --hover: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, --text), - - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), + --bg-color: props.get(core.$theme, --bg-l2), + --label-color: props.get(core.$theme, --text), + --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), + --shadow-color: props.get(core.$theme, --shadow), + + --hover: ( + --bg-color: props.get(core.$theme, --bg-l1), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), + ), + + --disabled: ( + --bg-color: transparent, + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --text-disabled), + ), + + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --highlighted: ( + --border-color: props.get(core.$theme, --focus, --border), + --shadow-color: props.get(core.$theme, --focus, --outline), + ), + + --selected: ( + --bg-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), + + --hover: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --active: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --badge: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-mute), + + --hover: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), + ), + ), + + --quiet: ( + --label-color: props.get(core.$theme, --text), + + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + ), + + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), ), $default-theme-override) !default; $default-theme: props.def(--o-button, $default-theme, 'color'); $default-theme-dark-override: () !default; $default-theme-dark: map.deep-merge(( - --bg-color: props.get(core.$theme, --border-mute), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-strong), - ), - - --selected: ( - --border-color: props.get(core.$theme, --text), - ), + --bg-color: props.get(core.$theme, --border-mute), + --border-color: props.get(core.$theme, --border-mute), + + --hover: ( + --bg-color: props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-strong), + ), + + --selected: ( + --border-color: props.get(core.$theme, --text), + ), ), $default-theme-override) !default; $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: --static-#{string.slice($theme, 3)}; - - $themes: props.merge($themes, ( - $button-theme: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), - --shadow-color: props.get(core.$transparent-colors, --black, --200), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --400), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --500), - ), - - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --100), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --300), - ), - - --key-focus: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), - ), - - --highlighted: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --shadow-color: props.get(core.$transparent-colors, --black, --200), - ), - - --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - ), - - --badge: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, + $button-theme: --static-#{string.slice($theme, 3)}; + + $themes: props.merge($themes, ( + $button-theme: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --400), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --500), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --100), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --key-focus: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --highlighted: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + ), + + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + ), + + --badge: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + ), - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), - ), - - --quiet: ( - --label-color: props.get(core.$transparent-colors, $theme, --900), + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + ), + ), + + --quiet: ( + --label-color: props.get(core.$transparent-colors, $theme, --900), - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), - --disabled: ( - --label-color: props.get(core.$transparent-colors, $theme, --500), - ), - ), - ) - )); + --disabled: ( + --label-color: props.get(core.$transparent-colors, $theme, --500), + ), + ), + ) + )); } $themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, ) !default; @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), - --shadow-color: props.get(core.$theme, $key, --200), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --600), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --800), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, $key, --900), - --shadow-color: props.get(core.$theme, $key, --200), - ), - - --selected: ( - --bg-color: props.get(core.$theme, #{$key}-static, --900), - --label-color: props.get(core.$theme, #{$key}-static, --900-text), - --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), - - --hover: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1000), - --label-color: props.get(core.$theme, #{$key}-static, --1000-text), - --border-color: props.get(core.$theme, #{$key}-static, --1000), - ), - - --active: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1100), - --label-color: props.get(core.$theme, #{$key}-static, --1100-text), - --border-color: props.get(core.$theme, #{$key}-static, --1100), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --300), + $themes: props.merge($themes, ( + --#{$theme}: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), + --shadow-color: props.get(core.$theme, $key, --200), + + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --600), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --800), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --bg-l1), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border), + ), + + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --highlighted: ( + --border-color: props.get(core.$theme, $key, --900), + --shadow-color: props.get(core.$theme, $key, --200), + ), + + --selected: ( + --bg-color: props.get(core.$theme, #{$key}-static, --900), + --label-color: props.get(core.$theme, #{$key}-static, --900-text), + --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), + + --hover: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1000), + --label-color: props.get(core.$theme, #{$key}-static, --1000-text), + --border-color: props.get(core.$theme, #{$key}-static, --1000), + ), + + --active: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1100), + --label-color: props.get(core.$theme, #{$key}-static, --1100-text), + --border-color: props.get(core.$theme, #{$key}-static, --1100), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --badge: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --300), - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --400), - ), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --400), + ), - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --500), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, $key, --1100), + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --500), + ), + ), + + --quiet: ( + --label-color: props.get(core.$theme, $key, --1100), - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - ), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + ), - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - ), + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + ), - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), - ) - )); + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), + ) + )); } diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 4bd6a59..ebab339 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -8,270 +8,270 @@ @use 'card.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('card') { - position: relative; - display: flex; - flex-direction: column; - background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s; - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { - &:hover, - &:active, - &:focus-visible { - transform: translateY(props.get(vars.$hover--offset-b)); - background-color: props.get(vars.$hover--bg-color); - border-color: props.get(vars.$hover--border-color); - box-shadow: none; - } - - &:focus-visible { - margin: calc(-1 * props.get(vars.$key-focus--border-width)); - transition: transform .2s; - border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - - @include bem.modifier('borderless') { - border-color: props.get(vars.$bg-color); - } - - @include bem.modifier('shadow') { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); - - @include bem.modifier('quiet') { - @include bem.elem('image') { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); - } - } - } - - @include bem.elem('avatar') { - margin-block-start: props.get(vars.$pad-b); - margin-inline-start: props.get(vars.$pad-i); - } - - @include bem.elem('image') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: calc(100% + 2 * props.get(vars.$border-width)); - margin: calc(-1 * props.get(vars.$border-width)); - overflow: hidden; - object-fit: cover; - transition: background-color .2s, transform .2s, opacity .2s; - - &:first-child { - border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - } - - &:last-child { - border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - } - - @include bem.next-elem('avatar') { - margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); - } - } - - @include bem.elem('image-img') { - display: block; - inline-size: 100%; - object-fit: cover; - } - - @include bem.elem('image-overlay') { - position: absolute; - inset-block-end: 0; - inset-inline: 0; - z-index: 5; - padding-block: props.get(vars.$image-overlay--pad-b); - padding-inline: props.get(vars.$image-overlay--pad-i); - } - - @include bem.elem('body') { - flex: 1 0 auto; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - - &::before { - display: block; - margin-block: -100em 100em; - content: ''; - } - } - - @include bem.elem('content') { - margin-block-start: props.get(vars.$spacing); - } - - @include bem.elem('footer') { - flex: 0 0 auto; - padding-block: 0 props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin-block-start: calc(-1 * props.get(vars.$pad-b)); - - &::before { - display: block; - block-size: props.get(vars.$divider-width); - margin-block: props.get(vars.$spacing); - content: ''; - background-color: props.get(vars.$divider-width); - } - } - - @include bem.modifier('quiet') { - margin-inline: 0; - background-color: transparent; - border: 0; - box-shadow: none; - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { - &:hover, - &:active, - &:focus-visible { - transform: none; - background-color: transparent; - - @include bem.elem('image') { - background-color: props.get(vars.$quiet--hover--image-color); - opacity: .75; - transform: translateY(props.get(vars.$hover--offset-b)); - } - } - - &:focus-visible { - margin: 0; - outline: none; - border: 0; - box-shadow: none; - - @include bem.elem('image') { - margin: calc(-1 * props.get(vars.$key-focus--border-width)); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - 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: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - opacity: 1; - } - } - } - - @include bem.elem('image') { - position: relative; - background-color: props.get(vars.$quiet--image-color); - background-clip: padding-box; - border-radius: props.get(vars.$rounding); - } - - @include bem.elem('body') { - padding: 0; - padding-block-start: props.get(vars.$spacing); - } - - @include bem.elem('footer') { - padding-inline: 0; - } - } - - @include bem.modifier('thumbnail') { - @include bem.elem('image') { - border-radius: props.get(vars.$rounding); - } - - @include bem.elem('body') { - position: absolute; - inset-block-end: calc(-1 * props.get(vars.$border-width)); - inset-inline: calc(-1 * props.get(vars.$border-width)); - z-index: 10; - visibility: hidden; - background-color: props.get(vars.$hover--bg-color); - border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); - border-color: transparent; - border-style: solid; - border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - opacity: 0; - transition: - border-color .2s ease, - opacity .2s ease, - visibility 0s .2s linear; - } - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { - &:hover, - &:active, - &:focus-visible { - @include bem.elem('body') { - border-color: props.get(vars.$hover--border-color); - visibility: visible; - opacity: 1; - transition: - border-color .2s ease, - opacity .2s ease, - visibility .2s linear; - } - } - } - } - - @include bem.modifier('horizontal') { - flex-direction: row; - align-items: center; - - @include bem.elem('image') { - align-self: stretch; - inline-size: auto; - - &:first-child { - border-start-end-radius: 0; - border-end-start-radius: props.get(vars.$rounding); - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('card') { + position: relative; + display: flex; + flex-direction: column; + background-color: props.get(vars.$bg-color); + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s; + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active, + &:focus-visible { + background-color: props.get(vars.$hover--bg-color); + border-color: props.get(vars.$hover--border-color); + box-shadow: none; + transform: translateY(props.get(vars.$hover--offset-b)); + } + + &:focus-visible { + margin: calc(-1 * props.get(vars.$key-focus--border-width)); + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + box-shadow: + 0 0 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + transition: transform .2s; + } + } + + @include bem.modifier('borderless') { + border-color: props.get(vars.$bg-color); + } + + @include bem.modifier('shadow') { + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get(vars.$shadow-color); + + @include bem.modifier('quiet') { + @include bem.elem('image') { + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get(vars.$shadow-color); + } + } + } + + @include bem.elem('avatar') { + margin-block-start: props.get(vars.$pad-b); + margin-inline-start: props.get(vars.$pad-i); + } + + @include bem.elem('image') { + position: relative; + display: block; + flex: 0 0 auto; + inline-size: calc(100% + 2 * props.get(vars.$border-width)); + margin: calc(-1 * props.get(vars.$border-width)); + overflow: hidden; + object-fit: cover; + transition: background-color .2s, transform .2s, opacity .2s; + + &:first-child { + border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + } + + &:last-child { + border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + } + + @include bem.next-elem('avatar') { + margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); + } + } + + @include bem.elem('image-img') { + display: block; + inline-size: 100%; + object-fit: cover; + } + + @include bem.elem('image-overlay') { + position: absolute; + inset-block-end: 0; + inset-inline: 0; + z-index: 5; + padding-block: props.get(vars.$image-overlay--pad-b); + padding-inline: props.get(vars.$image-overlay--pad-i); + } + + @include bem.elem('body') { + flex: 1 0 auto; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + + &::before { + display: block; + margin-block: -100em 100em; + content: ''; + } + } + + @include bem.elem('content') { + margin-block-start: props.get(vars.$spacing); + } + + @include bem.elem('footer') { + flex: 0 0 auto; + padding-block: 0 props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin-block-start: calc(-1 * props.get(vars.$pad-b)); + + &::before { + display: block; + block-size: props.get(vars.$divider-width); + margin-block: props.get(vars.$spacing); + content: ''; + background-color: props.get(vars.$divider-width); + } + } + + @include bem.modifier('quiet') { + margin-inline: 0; + background-color: transparent; + border: 0; + box-shadow: none; + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active, + &:focus-visible { + background-color: transparent; + transform: none; + + @include bem.elem('image') { + background-color: props.get(vars.$quiet--hover--image-color); + opacity: .75; + transform: translateY(props.get(vars.$hover--offset-b)); + } + } + + &:focus-visible { + margin: 0; + outline: none; + border: 0; + box-shadow: none; + + @include bem.elem('image') { + margin: calc(-1 * props.get(vars.$key-focus--border-width)); + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + background-color: props.get(vars.$quiet--hover--image-color); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + opacity: 1; + } + } + } + + @include bem.elem('image') { + position: relative; + background-color: props.get(vars.$quiet--image-color); + background-clip: padding-box; + border-radius: props.get(vars.$rounding); + } + + @include bem.elem('body') { + padding: 0; + padding-block-start: props.get(vars.$spacing); + } + + @include bem.elem('footer') { + padding-inline: 0; + } + } + + @include bem.modifier('thumbnail') { + @include bem.elem('image') { + border-radius: props.get(vars.$rounding); + } + + @include bem.elem('body') { + position: absolute; + inset-block-end: calc(-1 * props.get(vars.$border-width)); + inset-inline: calc(-1 * props.get(vars.$border-width)); + z-index: 10; + visibility: hidden; + background-color: props.get(vars.$hover--bg-color); + border-color: transparent; + border-style: solid; + border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); + border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + opacity: 0; + transition: + border-color .2s ease, + opacity .2s ease, + visibility 0s .2s linear; + } + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active, + &:focus-visible { + @include bem.elem('body') { + visibility: visible; + border-color: props.get(vars.$hover--border-color); + opacity: 1; + transition: + border-color .2s ease, + opacity .2s ease, + visibility .2s linear; + } + } + } + } + + @include bem.modifier('horizontal') { + flex-direction: row; + align-items: center; + + @include bem.elem('image') { + align-self: stretch; + inline-size: auto; + + &:first-child { + border-start-end-radius: 0; + border-end-start-radius: props.get(vars.$rounding); + } - &:last-child { - border-start-end-radius: props.get(vars.$rounding); - border-end-start-radius: 0; - } - } - - @include bem.elem('body') { - flex: 0 0 auto; - - @include bem.modifier('main') { - flex-shrink: 1; - inline-size: 100%; - min-inline-size: 0; - } - } - } - } + &:last-child { + border-start-end-radius: props.get(vars.$rounding); + border-end-start-radius: 0; + } + } + + @include bem.elem('body') { + flex: 0 0 auto; + + @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 82dd596..5faafb9 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -9,223 +9,223 @@ @use 'checkbox.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('checkbox') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin-inline: - 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 bem.object('checkbox') { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin-inline: + 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 bem.elem('box') { - position: relative; - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$box-border-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); - - &::before, - &::after { - position: absolute; - display: block; - content: ''; - } - - &::before { - inset-block-start: props.get(vars.$border-width); - inset-inline-start: props.get(vars.$border-width); - z-index: 2; - inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); - background-color: props.get(vars.$box-bg-color); - transition: transform .2s ease; - } - - &::after { - inset-block-start: calc(.5 * props.get(vars.$size) - 1px); - inset-inline-start: calc(1.5 * props.get(vars.$border-width)); - z-index: 3; - box-sizing: border-box; - inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); - block-size: 0; - border-color: props.get(vars.$box-bg-color); - border-style: solid; - border-radius: 2px; - transition: transform .2s ease; - transform: scale(0); - border-block-width: 0 2px; - border-inline-width: 0 2px; - } - } - - @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)); - z-index: 2; - display: block; - inline-size: calc(100% - 2 * props.get(vars.$border-width)); - block-size: calc(100% - 2 * props.get(vars.$border-width)); - margin: 0; - color: props.get(vars.$box-bg-color); - stroke-width: fn.px-to-rem(3px); - transition: transform .2s ease; - transform: scale(0); - transform-origin: 40% 90%; - } - - @include bem.elem('label') { - margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); - } - - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); - - &:hover, - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$hover--label-color); - } - - @include bem.sibling-elem('box') { - background-color: props.get(vars.$hover--box-border-color); - } - } - - &:checked { - @include bem.sibling-elem('box') { - &::before { - transform: scale(0); - } - - @include bem.elem('check-icon') { - transform: scale(1); - } - } - } - - &:indeterminate { - @include bem.sibling-elem('box') { - &::before { - transform: scale(0); - } - - &::after { - transform: scale(1); - } - - @include bem.elem('check-icon') { - transform: scale(0); - } - } - } - - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } - - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); - - &::before { - background-color: props.get(vars.$disabled--box-bg-color); - } - } - } - - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$key-focus--label-color); - } + @include bem.elem('box') { + position: relative; + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); + vertical-align: top; + background-color: props.get(vars.$box-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); + + &::before, + &::after { + position: absolute; + display: block; + content: ''; + } + + &::before { + inset-block-start: props.get(vars.$border-width); + inset-inline-start: props.get(vars.$border-width); + z-index: 2; + inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + background-color: props.get(vars.$box-bg-color); + transition: transform .2s ease; + } + + &::after { + inset-block-start: calc(.5 * props.get(vars.$size) - 1px); + inset-inline-start: calc(1.5 * props.get(vars.$border-width)); + z-index: 3; + box-sizing: border-box; + inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); + block-size: 0; + border-color: props.get(vars.$box-bg-color); + border-style: solid; + border-radius: 2px; + transform: scale(0); + transition: transform .2s ease; + border-block-width: 0 2px; + border-inline-width: 0 2px; + } + } + + @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)); + z-index: 2; + display: block; + inline-size: calc(100% - 2 * props.get(vars.$border-width)); + block-size: calc(100% - 2 * props.get(vars.$border-width)); + margin: 0; + color: props.get(vars.$box-bg-color); + stroke-width: fn.px-to-rem(3px); + transform: scale(0); + transform-origin: 40% 90%; + transition: transform .2s ease; + } + + @include bem.elem('label') { + margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); + } + + @include bem.elem('native') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); + + &:hover, + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$hover--label-color); + } + + @include bem.sibling-elem('box') { + background-color: props.get(vars.$hover--box-border-color); + } + } + + &:checked { + @include bem.sibling-elem('box') { + &::before { + transform: scale(0); + } + + @include bem.elem('check-icon') { + transform: scale(1); + } + } + } + + &:indeterminate { + @include bem.sibling-elem('box') { + &::before { + transform: scale(0); + } + + &::after { + transform: scale(1); + } + + @include bem.elem('check-icon') { + transform: scale(0); + } + } + } + + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } + + @include bem.sibling-elem('box') { + background-color: props.get(vars.$disabled--box-border-color); + + &::before { + background-color: props.get(vars.$disabled--box-bg-color); + } + } + } + + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$key-focus--label-color); + } - @include bem.sibling-elem('box') { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } - - @include bem.modifier('standalone') { - @include bem.elem('box') { - margin-block-start: 0; - } - } - - @include bem.modifier('accent') { - @include bem.elem('native') { - &:checked { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--box-border-color); - } + @include bem.sibling-elem('box') { + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } + + @include bem.modifier('standalone') { + @include bem.elem('box') { + margin-block-start: 0; + } + } + + @include bem.modifier('accent') { + @include bem.elem('native') { + &:checked { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--box-border-color); + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--hover--box-border-color); - } - } - } - - &:indeterminate { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--box-border-color); - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--hover--box-border-color); + } + } + } + + &:indeterminate { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--box-border-color); + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--hover--box-border-color); - } - } - } - - &:disabled { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); + &:hover, + &:focus-visible { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--hover--box-border-color); + } + } + } + + &:disabled { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$disabled--box-border-color); - &::before { - background-color: props.get(vars.$disabled--box-bg-color); - } - } + &::before { + background-color: props.get(vars.$disabled--box-bg-color); + } + } - &:checked { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); - } - } + &:checked { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$disabled--box-border-color); + } + } - &:indeterminate { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); - } - } - } - } - } - } + &:indeterminate { + @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 9b58e77..27af173 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -10,195 +10,195 @@ @use 'divider.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('divider') { - display: flex; - flex: 0 0 auto; - flex-direction: row; - align-items: center; - block-size: 1em; - margin-block: props.get(vars.$margin-b); - font-size: props.get(vars.$strong--label-font-size); - font-weight: 700; - line-height: 1; - color: props.get(vars.$strong--label-color); - text-transform: uppercase; - letter-spacing: .5px; - background-color: transparent; - - &::before, - &::after { - flex: 1 1 auto; - inline-size: 100%; - block-size: props.get(vars.$strong--border-width); - content: ''; - background-color: props.get(vars.$strong--bg-color); - } - - &::before { - display: block; - } - - @include bem.elem('label') { - flex: 0 0 auto; - } - - @include bem.modifier('vertical') { - align-self: stretch; - inline-size: props.get(vars.$vertical--border-width); - block-size: auto; - margin-block: 0; - background-color: props.get(vars.$strong--bg-color); - - &::before, - &::after { - display: none; - } - } - - @include bem.modifier('dot') { - align-self: center; - inline-size: props.get(vars.$dot--size); - block-size: props.get(vars.$dot--size); - margin-block: 0; - background-color: props.get(vars.$strong--bg-color); - border-radius: props.get(vars.$dot--size); - - &::before, - &::after { - display: none; - } - } - - @include bem.modifier('medium') { - font-size: props.get(vars.$medium--label-font-size); - font-weight: 500; - color: props.get(vars.$medium--label-color); - - &::before, - &::after { - block-size: props.get(vars.$medium--border-width); - background-color: props.get(vars.$medium--bg-color); - } - - @include bem.modifier('vertical') { - background-color: props.get(vars.$medium--bg-color); - } - - @include bem.modifier('dot') { - background-color: props.get(vars.$medium--bg-color); - } - } - - @include bem.modifier('quiet') { - font-size: props.get(vars.$quiet--label-font-size); - font-weight: 500; - color: props.get(vars.$quiet--label-color); - - &::before, - &::after { - block-size: props.get(vars.$quiet--border-width); - background-color: props.get(vars.$quiet--bg-color); - } - - @include bem.modifier('vertical') { - background-color: props.get(vars.$vertical--quiet--bg-color); - } - - @include bem.modifier('dot') { - background-color: props.get(vars.$dot--quiet--bg-color); - } - } - - @include bem.modifier('faint') { - font-size: props.get(vars.$faint--label-font-size); - font-weight: 500; - color: props.get(vars.$faint--label-color); - - &::before, - &::after { - block-size: props.get(vars.$faint--border-width); - background-color: props.get(vars.$faint--bg-color); - } - - @include bem.modifier('vertical') { - background-color: props.get(vars.$vertical--quiet--bg-color); - } - - @include bem.modifier('dot') { - background-color: props.get(vars.$dot--quiet--bg-color); - } - } - - @include bem.modifier('labelled') { - &::before { - margin-inline-end: 1em; - } - - &::after { - display: block; - margin-inline-start: 1em; - } - } - - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.modifier(string.slice($theme, 3)) { - &::before, - &::after { - background-color: props.get(vars.$themes, $theme, --bg); - } - - @include bem.elem('label') { - color: props.get(vars.$themes, $theme, --label); - } - } - } - - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --strong, --bg); - } - - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --strong, --label); - } - - @include bem.modifier('medium') { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --medium, --bg); - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('divider') { + display: flex; + flex: 0 0 auto; + flex-direction: row; + align-items: center; + block-size: 1em; + margin-block: props.get(vars.$margin-b); + font-size: props.get(vars.$strong--label-font-size); + font-weight: 700; + line-height: 1; + color: props.get(vars.$strong--label-color); + text-transform: uppercase; + letter-spacing: .5px; + background-color: transparent; + + &::before, + &::after { + flex: 1 1 auto; + inline-size: 100%; + block-size: props.get(vars.$strong--border-width); + content: ''; + background-color: props.get(vars.$strong--bg-color); + } + + &::before { + display: block; + } + + @include bem.elem('label') { + flex: 0 0 auto; + } + + @include bem.modifier('vertical') { + align-self: stretch; + inline-size: props.get(vars.$vertical--border-width); + block-size: auto; + margin-block: 0; + background-color: props.get(vars.$strong--bg-color); + + &::before, + &::after { + display: none; + } + } + + @include bem.modifier('dot') { + align-self: center; + inline-size: props.get(vars.$dot--size); + block-size: props.get(vars.$dot--size); + margin-block: 0; + background-color: props.get(vars.$strong--bg-color); + border-radius: props.get(vars.$dot--size); + + &::before, + &::after { + display: none; + } + } + + @include bem.modifier('medium') { + font-size: props.get(vars.$medium--label-font-size); + font-weight: 500; + color: props.get(vars.$medium--label-color); + + &::before, + &::after { + block-size: props.get(vars.$medium--border-width); + background-color: props.get(vars.$medium--bg-color); + } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$medium--bg-color); + } + + @include bem.modifier('dot') { + background-color: props.get(vars.$medium--bg-color); + } + } + + @include bem.modifier('quiet') { + font-size: props.get(vars.$quiet--label-font-size); + font-weight: 500; + color: props.get(vars.$quiet--label-color); + + &::before, + &::after { + block-size: props.get(vars.$quiet--border-width); + background-color: props.get(vars.$quiet--bg-color); + } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$vertical--quiet--bg-color); + } + + @include bem.modifier('dot') { + background-color: props.get(vars.$dot--quiet--bg-color); + } + } + + @include bem.modifier('faint') { + font-size: props.get(vars.$faint--label-font-size); + font-weight: 500; + color: props.get(vars.$faint--label-color); + + &::before, + &::after { + block-size: props.get(vars.$faint--border-width); + background-color: props.get(vars.$faint--bg-color); + } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$vertical--quiet--bg-color); + } + + @include bem.modifier('dot') { + background-color: props.get(vars.$dot--quiet--bg-color); + } + } + + @include bem.modifier('labelled') { + &::before { + margin-inline-end: 1em; + } + + &::after { + display: block; + margin-inline-start: 1em; + } + } + + @each $theme in map.keys(props.get(vars.$themes)) { + @include bem.modifier(string.slice($theme, 3)) { + &::before, + &::after { + background-color: props.get(vars.$themes, $theme, --bg); + } + + @include bem.elem('label') { + color: props.get(vars.$themes, $theme, --label); + } + } + } + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --strong, --bg); + } + + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --strong, --label); + } + + @include bem.modifier('medium') { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --medium, --bg); + } - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --medium, --label); - } - } + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --medium, --label); + } + } - @include bem.modifier('quiet') { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); - } + @include bem.modifier('quiet') { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); + } - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --quiet, --label); - } - } + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --quiet, --label); + } + } - @include bem.modifier('faint') { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --faint, --bg); - } + @include bem.modifier('faint') { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --faint, --bg); + } - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --faint, --label); - } - } - } - } - } + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --faint, --label); + } + } + } + } + } } diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 5a5639b..688fbb3 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -38,42 +38,42 @@ $dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get $static-themes: props.def(--o-divider, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: --static-#{string.slice($theme, 3)}; - - $static-themes: props.merge($static-themes, ( - $button-theme: ( - --strong: ( - --bg: props.get(core.$transparent-colors, $theme, --800), - --label: props.get(core.$transparent-colors, $theme, --900), - ), - --medium: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --quiet: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --faint: ( - --bg: props.get(core.$transparent-colors, $theme, --200), - --label: props.get(core.$transparent-colors, $theme, --400), - ), - ) - )); + $button-theme: --static-#{string.slice($theme, 3)}; + + $static-themes: props.merge($static-themes, ( + $button-theme: ( + --strong: ( + --bg: props.get(core.$transparent-colors, $theme, --800), + --label: props.get(core.$transparent-colors, $theme, --900), + ), + --medium: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --quiet: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --faint: ( + --bg: props.get(core.$transparent-colors, $theme, --200), + --label: props.get(core.$transparent-colors, $theme, --400), + ), + ) + )); } $themes-config: ( - accent: --accent, - negative: --negative, + accent: --accent, + negative: --negative, ) !default; $themes: props.def(--o-divider, (), 'color'); @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg: props.get(core.$theme, $key, --800), - --label: props.get(core.$theme, $key, --1000), - ) - )); + $themes: props.merge($themes, ( + --#{$theme}: ( + --bg: props.get(core.$theme, $key, --800), + --label: props.get(core.$theme, $key, --1000), + ) + )); } diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index ce2dfa7..fd36535 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss @@ -8,43 +8,43 @@ @use 'emoji.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('emoji') { - position: relative; - display: inline-block; - inline-size: calc(props.get(vars.$size)); - block-size: calc(props.get(vars.$size)); - padding: calc(props.get(vars.$pad)); - margin: calc(-1 * props.get(vars.$pad)); - vertical-align: props.get(vars.$valign); - object-fit: contain; - - @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 bem.modifier($mod) { - inline-size: props.get($size); - block-size: props.get($size); - vertical-align: props.get($valign); - - @include bem.modifier('icon') { - margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); - } - } - } - - @include bem.modifier('zoomable') { - border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); - transition: transform .2s ease, background-color .2s ease; - - &:hover { - background-color: props.get(vars.$bg-color); - transform: scale(props.get(vars.$zoom)); - } - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('emoji') { + position: relative; + display: inline-block; + inline-size: calc(props.get(vars.$size)); + block-size: calc(props.get(vars.$size)); + padding: calc(props.get(vars.$pad)); + margin: calc(-1 * props.get(vars.$pad)); + vertical-align: props.get(vars.$valign); + object-fit: contain; + + @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 bem.modifier($mod) { + inline-size: props.get($size); + block-size: props.get($size); + vertical-align: props.get($valign); + + @include bem.modifier('icon') { + margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); + } + } + } + + @include bem.modifier('zoomable') { + border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); + transition: transform .2s ease, background-color .2s ease; + + &:hover { + background-color: props.get(vars.$bg-color); + transform: scale(props.get(vars.$zoom)); + } + } + } } diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index 073f88b..b7a8a43 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -18,9 +18,9 @@ $size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; $valign--200: props.def(--o-emoji--200--valign, -1em) !default; $sizes: ( - '125' $size--125 $valign--125, - '150' $size--150 $valign--150, - '200' $size--200 $valign--200, + '125' $size--125 $valign--125, + '150' $size--150 $valign--150, + '200' $size--200 $valign--200, ) !default; $bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 564ab2b..aa12eb5 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -7,70 +7,70 @@ @use 'field-label.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('field-label') { - @include bem.elem('label') { - display: block; - flex: 0 0 auto; - padding-inline-end: props.get(vars.$spacing-i); - font-size: props.get(vars.$label-font-size); - font-weight: 400; - line-height: 1.3; - color: props.get(vars.$label-color); + @include bem.object('field-label') { + @include bem.elem('label') { + display: block; + flex: 0 0 auto; + padding-inline-end: props.get(vars.$spacing-i); + font-size: props.get(vars.$label-font-size); + font-weight: 400; + line-height: 1.3; + color: props.get(vars.$label-color); - @include bem.next-elem('content') { - margin-block-start: props.get(vars.$spacing-b); - } - } + @include bem.next-elem('content') { + margin-block-start: props.get(vars.$spacing-b); + } + } - @include bem.elem('content') { - display: block; - flex: 1 1 auto; - } + @include bem.elem('content') { + display: block; + flex: 1 1 auto; + } - @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 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 bem.is('invalid') { - @include bem.elem('hint') { - color: props.get(vars.$error-hint-color); - } - } + @include bem.is('invalid') { + @include bem.elem('hint') { + color: props.get(vars.$error-hint-color); + } + } - @include bem.is('disabled') { - @include bem.elem('label', 'hint') { - color: props.get(vars.$disabled-color); - } - } + @include bem.is('disabled') { + @include bem.elem('label', 'hint') { + color: props.get(vars.$disabled-color); + } + } - @include bem.modifier('align-start', 'align-end') { - display: flex; - align-items: baseline; + @include bem.modifier('align-start', 'align-end') { + display: flex; + align-items: baseline; - @include bem.elem('label') { - display: inline-block; + @include bem.elem('label') { + display: inline-block; - @include bem.next-elem('content') { - margin-block-start: 0; - } - } - } + @include bem.next-elem('content') { + margin-block-start: 0; + } + } + } - @include bem.modifier('align-start') { - @include bem.elem('label') { - text-align: start; - } - } + @include bem.modifier('align-start') { + @include bem.elem('label') { + text-align: start; + } + } - @include bem.modifier('align-end') { - @include bem.elem('label') { - text-align: end; - } - } - } + @include bem.modifier('align-end') { + @include bem.elem('label') { + text-align: end; + } + } + } } diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss index 38837be..27e0f6a 100644 --- a/src/objects/_figure.scss +++ b/src/objects/_figure.scss @@ -7,20 +7,20 @@ @use 'figure.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('figure') { - @include bem.elem('caption') { - padding-block: props.get(vars.$pad-b); - font-size: props.get(vars.$font-size); - color: props.get(vars.$text-color); - border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); + @include bem.object('figure') { + @include bem.elem('caption') { + padding-block: props.get(vars.$pad-b); + font-size: props.get(vars.$font-size); + color: props.get(vars.$text-color); + border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); - &::before { - display: block; - margin-block: -100em 100em; - content: ''; - } - } - } + &::before { + display: block; + margin-block: -100em 100em; + content: ''; + } + } + } } diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index bdc7027..d27b595 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -7,54 +7,54 @@ @use 'heading.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('heading') { - display: block; - margin-block-start: props.get(vars.$margin-bs); - font-family: props.get(vars.$font-family); - font-weight: props.get(vars.$font-weight); - font-feature-settings: props.get(vars.$feature-settings); - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - text-transform: none; - letter-spacing: normal; + @include bem.object('heading') { + display: block; + margin-block-start: props.get(vars.$margin-bs); + font-family: props.get(vars.$font-family); + font-weight: props.get(vars.$font-weight); + font-feature-settings: props.get(vars.$feature-settings); + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + text-transform: none; + letter-spacing: normal; - & + & { - margin-block-start: props.get(vars.$margin-bs-sibling); - } + & + & { + margin-block-start: props.get(vars.$margin-bs-sibling); + } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent .05em, - props.get(vars.$bg-color) .05em, - props.get(vars.$bg-color) .5em, - transparent .5em); - } + @include bem.elem('highlight') { + background-image: linear-gradient(to top, + transparent .05em, + props.get(vars.$bg-color) .05em, + props.get(vars.$bg-color) .5em, + transparent .5em); + } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { - @include bem.modifier($mod) { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); - font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - letter-spacing: props.get($letter-spacing); - } - } + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { + @include bem.modifier($mod) { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + } + } - @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { - @include bem.modifier($mod) { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); - font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - letter-spacing: props.get($letter-spacing); - transform: translateX(props.get(vars.$offset)); - } - } - } - } + @include bem.modifier('display') { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { + @include bem.modifier($mod) { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + transform: translateX(props.get(vars.$offset)); + } + } + } + } } diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 90278c8..1d6df26 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -56,12 +56,12 @@ $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $sizes: ( - 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, - 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, - 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, - 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, - 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, - 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, + 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, + 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, + 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, + 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, + 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, + 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, ) !default; $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; @@ -114,10 +114,10 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro $display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; $display--sizes: ( - 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, - 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, - 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, - 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, - 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, - 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, + 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, + 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, + 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, + 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, + 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, + 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, ) !default; diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 187938e..1941960 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -7,19 +7,19 @@ @use 'icon.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('icon') { - display: inline; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - vertical-align: props.get(vars.$valign); - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: props.get(vars.$stroke-width); + @include bem.object('icon') { + display: inline; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + vertical-align: props.get(vars.$valign); + stroke-width: props.get(vars.$stroke-width); + stroke-linecap: round; + stroke-linejoin: round; - @include bem.modifier('block') { - display: block; - } - } + @include bem.modifier('block') { + display: block; + } + } } diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index b62c353..b95148f 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -9,127 +9,127 @@ @use 'lightbox.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('lightbox') { - flex: 1 1 auto; - min-block-size: 0; - - @include bem.elem('header') { - display: flex; - grid-area: header; - align-items: flex-start; - padding-block-start: props.get(vars.$pad); - padding-inline: props.get(vars.$pad); - } - - @include bem.elem('img') { - box-sizing: border-box; - display: block; - grid-area: content; - place-self: center; - inline-size: auto; - max-inline-size: 100%; - block-size: auto; - max-block-size: props.get(vars.$image--max-height); - padding: props.get(vars.$pad); - margin-inline: auto; - border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); - } - - @include bem.elem('thumbnails') { - display: none; - grid-area: thumbnails; - gap: props.get(vars.$thumbnails--spacing); - padding: props.get(vars.$pad); - margin-block-start: calc(-1 * props.get(vars.$pad)); - overflow: auto; - } - - @include bem.elem('close-btn') { - display: none; - flex: 0 0 auto; - margin-block-start: calc(-.5 * props.get(vars.$pad)); - margin-inline: auto calc(-.5 * props.get(vars.$pad)); - font-size: props.get(vars.$close-button--font-size); - } - - @include bem.elem('nav-btn') { - position: relative; - display: none; - align-self: center; - overflow: visible; - font-size: props.get(vars.$nav-button--font-size); - - &::before { - position: absolute; - inset-block-start: 50%; - display: block; - inline-size: props.get(vars.$nav-button--inline-size); - block-size: props.get(vars.$nav-button--block-size); - content: ''; - transform: translateY(-50%); - } - - @include bem.modifier('prev') { - grid-area: prev; - margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); - - &::before { - inset-inline-start: 0; - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('lightbox') { + flex: 1 1 auto; + min-block-size: 0; + + @include bem.elem('header') { + display: flex; + grid-area: header; + align-items: flex-start; + padding-block-start: props.get(vars.$pad); + padding-inline: props.get(vars.$pad); + } + + @include bem.elem('img') { + box-sizing: border-box; + display: block; + grid-area: content; + place-self: center; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; + max-block-size: props.get(vars.$image--max-height); + padding: props.get(vars.$pad); + margin-inline: auto; + border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); + } + + @include bem.elem('thumbnails') { + display: none; + grid-area: thumbnails; + gap: props.get(vars.$thumbnails--spacing); + padding: props.get(vars.$pad); + margin-block-start: calc(-1 * props.get(vars.$pad)); + overflow: auto; + } + + @include bem.elem('close-btn') { + display: none; + flex: 0 0 auto; + margin-block-start: calc(-.5 * props.get(vars.$pad)); + margin-inline: auto calc(-.5 * props.get(vars.$pad)); + font-size: props.get(vars.$close-button--font-size); + } + + @include bem.elem('nav-btn') { + position: relative; + display: none; + align-self: center; + overflow: visible; + font-size: props.get(vars.$nav-button--font-size); + + &::before { + position: absolute; + inset-block-start: 50%; + display: block; + inline-size: props.get(vars.$nav-button--inline-size); + block-size: props.get(vars.$nav-button--block-size); + content: ''; + transform: translateY(-50%); + } + + @include bem.modifier('prev') { + grid-area: prev; + margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); + + &::before { + inset-inline-start: 0; + } + } - @include bem.modifier('next') { - grid-area: next; - margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); - - &::before { - inset-inline-end: 0; - } - } - } - - @include bem.modifier('interactive') { - display: grid; - grid-template-areas: - 'header header header' - 'prev content next' - 'thumbnails thumbnails thumbnails'; - grid-template-rows: auto minmax(0, 1fr) auto auto; - grid-template-columns: auto minmax(0, 1fr) auto; - - @include bem.modifier('fullscreen') { - block-size: props.get(vars.$fullscreen--height); - } - - @include bem.elem('img') { - display: none; - max-block-size: 100%; - margin-inline: 0; - - @include bem.multi('&:target', 'is' 'visible') { - display: block; - } - } - - @include bem.elem('thumbnails') { - display: flex; - } - - @include bem.elem('close-btn') { - display: block; - } - - @include bem.elem('nav-btn') { - display: block; - } - } - - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - color: props.get(vars.$static-themes, $theme, --text); - } - } - } + @include bem.modifier('next') { + grid-area: next; + margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); + + &::before { + inset-inline-end: 0; + } + } + } + + @include bem.modifier('interactive') { + display: grid; + grid-template-areas: + 'header header header' + 'prev content next' + 'thumbnails thumbnails thumbnails'; + grid-template-rows: auto minmax(0, 1fr) auto auto; + grid-template-columns: auto minmax(0, 1fr) auto; + + @include bem.modifier('fullscreen') { + block-size: props.get(vars.$fullscreen--height); + } + + @include bem.elem('img') { + display: none; + max-block-size: 100%; + margin-inline: 0; + + @include bem.multi('&:target', 'is' 'visible') { + display: block; + } + } + + @include bem.elem('thumbnails') { + display: flex; + } + + @include bem.elem('close-btn') { + display: block; + } + + @include bem.elem('nav-btn') { + display: block; + } + } + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + color: props.get(vars.$static-themes, $theme, --text); + } + } + } } diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index cc926e4..6d22aa8 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -23,11 +23,11 @@ $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(cor $static-themes: props.def(--o-lightbox, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $lightbox-theme: --static-#{string.slice($theme, 3)}; + $lightbox-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $lightbox-theme: ( - --text: props.get(core.$transparent-colors, $theme, --800), - ) - )); + $static-themes: props.merge($static-themes, ( + $lightbox-theme: ( + --text: props.get(core.$transparent-colors, $theme, --800), + ) + )); } diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 4d31874..f370067 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -8,95 +8,95 @@ @use 'menu.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('menu') { - display: flex; - flex-direction: column; - gap: props.get(vars.$spacing); - - @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); - font-weight: 500; - color: props.get(vars.$header--label-color); - text-transform: uppercase; - letter-spacing: .5px; - - @include bem.next-twin-elem { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); - } - } - - @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)); - color: props.get(vars.$item--disabled--label-color); - background-clip: padding-box; - border: props.get(vars.$item--key-focus--outline-width) solid transparent; - border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); - - &:link, - &:visited, - &:enabled { - color: currentColor; - - @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); - } - - &:active { - color: props.get(vars.$item--active--label-color); - background-color: props.get(vars.$item--active--bg-color); - } - - &:focus-visible { - outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) - props.get(vars.$item--key-focus--outline-color); - } - } - - @include bem.next-elem('header') { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); - } - } - - @include bem.elem('header') { - &:link, - &:visited, - &:enabled { - color: props.get(vars.$header--label-color); - } - } - - @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 bem.elem('slot') { - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - } - - @include bem.elem('icon-slot') { - display: flex; - justify-content: center; - inline-size: props.get(icon.$size); - } - - @include bem.modifier('pull') { - margin: calc(-1 * props.get(vars.$item--pad-i)); - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('menu') { + display: flex; + flex-direction: column; + gap: props.get(vars.$spacing); + + @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); + font-weight: 500; + color: props.get(vars.$header--label-color); + text-transform: uppercase; + letter-spacing: .5px; + + @include bem.next-twin-elem { + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + } + } + + @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)); + color: props.get(vars.$item--disabled--label-color); + background-clip: padding-box; + border: props.get(vars.$item--key-focus--outline-width) solid transparent; + border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + @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); + } + + &:active { + color: props.get(vars.$item--active--label-color); + background-color: props.get(vars.$item--active--bg-color); + } + + &:focus-visible { + outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + props.get(vars.$item--key-focus--outline-color); + } + } + + @include bem.next-elem('header') { + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + } + } + + @include bem.elem('header') { + &:link, + &:visited, + &:enabled { + color: props.get(vars.$header--label-color); + } + } + + @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 bem.elem('slot') { + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + } + + @include bem.elem('icon-slot') { + display: flex; + justify-content: center; + inline-size: props.get(icon.$size); + } + + @include bem.modifier('pull') { + margin: calc(-1 * props.get(vars.$item--pad-i)); + } + } } diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index 59d4c51..ec03c62 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -9,183 +9,183 @@ @use 'navbar.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('navbar') { - display: flex; - block-size: props.get(vars.$block-size); - - @include bem.elem('item-content-text') { - margin-inline: props.get(vars.$item--pad-i-label); - } - - @include bem.elem('item-content') { - position: relative; - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$item--font-size); - color: currentColor; - white-space: nowrap; - border-radius: 100em; - - &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: -10; - display: block; - pointer-events: none; - visibility: hidden; - content: ''; - border-radius: 100em; - outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$default-theme, --key-focus, --outline); - } - } - - @include bem.elem('item') { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - inline-size: 100%; - padding-inline: calc(.5 * props.get(vars.$spacing)); - font-weight: 500; - color: props.get(vars.$default-theme, --disabled, --label-color); - - &:link, - &:visited, - &:enabled { - color: props.get(vars.$default-theme, --label-color); - - &:hover, - &:focus-visible { - color: props.get(vars.$default-theme, --hover, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --hover, --bg-color); - } - } - - &:focus-visible { - @include bem.elem('item-content') { - &::after { - visibility: visible; - } - } - } - - &:active { - color: props.get(vars.$default-theme, --active, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --active, --bg-color); - } - } - } - - @include bem.is('selected') { - font-weight: bold; - color: props.get(vars.$default-theme, --selected, --disabled, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); - } - - &:link, - &:visited, - &:enabled { - color: props.get(vars.$default-theme, --selected, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --bg-color); - } - - &:hover, - &:focus-visible { - color: props.get(vars.$default-theme, --selected, --hover, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); - } - } - - &:active { - color: props.get(vars.$default-theme, --selected, --active, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); - } - } - } - } - } - - @include bem.modifier('hide-unselected') { - @include bem.elem('item') { - display: none; - - @include bem.is('selected') { - display: flex; - } - } - } - - @include bem.modifier('adapt') { - gap: props.get(vars.$spacing); - block-size: 100%; - - @include bem.elem('item') { - padding-inline: 0; - } - } - - - @include bem.modifier('align-block') { - margin-inline: calc(-1 * props.get(vars.$item--pad-i)); - } - - @include bem.modifier('quiet') { - @include bem.elem('item') { - @include bem.is('selected') { - color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); - } - - &:link, - &:visited, - &:enabled { - color: props.get(vars.$default-theme, --quiet, --selected, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); - } - - &:hover, - &:focus-visible { - color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); - } - } - - &:active { - color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); - } - } - } - } - } - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('navbar') { + display: flex; + block-size: props.get(vars.$block-size); + + @include bem.elem('item-content-text') { + margin-inline: props.get(vars.$item--pad-i-label); + } + + @include bem.elem('item-content') { + position: relative; + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + font-size: props.get(vars.$item--font-size); + color: currentColor; + white-space: nowrap; + border-radius: 100em; + + &::after { + position: absolute; + inset: calc(-1 * props.get(vars.$key-focus--border-offset)); + z-index: -10; + display: block; + visibility: hidden; + pointer-events: none; + outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); + content: ''; + border-radius: 100em; + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$default-theme, --key-focus, --outline); + } + } + + @include bem.elem('item') { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + inline-size: 100%; + padding-inline: calc(.5 * props.get(vars.$spacing)); + font-weight: 500; + color: props.get(vars.$default-theme, --disabled, --label-color); + + &:link, + &:visited, + &:enabled { + color: props.get(vars.$default-theme, --label-color); + + &:hover, + &:focus-visible { + color: props.get(vars.$default-theme, --hover, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --hover, --bg-color); + } + } + + &:focus-visible { + @include bem.elem('item-content') { + &::after { + visibility: visible; + } + } + } + + &:active { + color: props.get(vars.$default-theme, --active, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --active, --bg-color); + } + } + } + + @include bem.is('selected') { + font-weight: bold; + color: props.get(vars.$default-theme, --selected, --disabled, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); + } + + &:link, + &:visited, + &:enabled { + color: props.get(vars.$default-theme, --selected, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --bg-color); + } + + &:hover, + &:focus-visible { + color: props.get(vars.$default-theme, --selected, --hover, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); + } + } + + &:active { + color: props.get(vars.$default-theme, --selected, --active, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); + } + } + } + } + } + + @include bem.modifier('hide-unselected') { + @include bem.elem('item') { + display: none; + + @include bem.is('selected') { + display: flex; + } + } + } + + @include bem.modifier('adapt') { + gap: props.get(vars.$spacing); + block-size: 100%; + + @include bem.elem('item') { + padding-inline: 0; + } + } + + + @include bem.modifier('align-block') { + margin-inline: calc(-1 * props.get(vars.$item--pad-i)); + } + + @include bem.modifier('quiet') { + @include bem.elem('item') { + @include bem.is('selected') { + color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); + } + + &:link, + &:visited, + &:enabled { + color: props.get(vars.$default-theme, --quiet, --selected, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); + } + + &:hover, + &:focus-visible { + color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); + } + } + + &:active { + color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); + } + } + } + } + } + } + } } diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss index fcdac80..8e18def 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss @@ -17,68 +17,68 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props $default-theme-override: () !default; $default-theme: map.deep-merge(( - --label-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --text), - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - ), + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + ), - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - ), + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + ), - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), - --key-focus: ( - --label: props.get(core.$theme, --focus, --text), - --border: props.get(core.$theme, --focus, --border), - --outline: props.get(core.$theme, --focus, --outline), - ), + --key-focus: ( + --label: props.get(core.$theme, --focus, --text), + --border: props.get(core.$theme, --focus, --border), + --outline: props.get(core.$theme, --focus, --outline), + ), - --selected: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), + --selected: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), - --hover: ( - --bg-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --base, --50), - ), + --hover: ( + --bg-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --base, --50), + ), - --active: ( - --bg-color: props.get(core.$theme, --text-mute), - --label-color: props.get(core.$theme, --base, --50), - ), + --active: ( + --bg-color: props.get(core.$theme, --text-mute), + --label-color: props.get(core.$theme, --base, --50), + ), - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - ), - ), + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + ), + ), - --quiet: ( - --selected: ( - --bg-color: props.get(core.$theme, --accent, --200), - --label-color: props.get(core.$theme, --accent, --1100), + --quiet: ( + --selected: ( + --bg-color: props.get(core.$theme, --accent, --200), + --label-color: props.get(core.$theme, --accent, --1100), - --hover: ( - --bg-color: props.get(core.$theme, --accent, --300), - --label-color: props.get(core.$theme, --accent, --1200), - ), + --hover: ( + --bg-color: props.get(core.$theme, --accent, --300), + --label-color: props.get(core.$theme, --accent, --1200), + ), - --active: ( - --bg-color: props.get(core.$theme, --accent, --400), - --label-color: props.get(core.$theme, --accent, --1300), - ), + --active: ( + --bg-color: props.get(core.$theme, --accent, --400), + --label-color: props.get(core.$theme, --accent, --1300), + ), - --disabled: ( - --bg-color: props.get(core.$theme, --accent, --200), - --label-color: props.get(core.$theme, --accent, --800), - ), - ) - ) + --disabled: ( + --bg-color: props.get(core.$theme, --accent, --200), + --label-color: props.get(core.$theme, --accent, --800), + ), + ) + ) ), $default-theme-override) !default; $default-theme: props.def(--o-navbar, $default-theme, 'color'); diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 8a6cdb2..79c0f6c 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -7,57 +7,57 @@ @use '../core.vars' as core; @mixin styles { - @include bem.object('palette') { - display: flex; - block-size: 3em; + @include bem.object('palette') { + display: flex; + block-size: 3em; - @include bem.elem('item') { - flex: 1 1 auto; + @include bem.elem('item') { + flex: 1 1 auto; - $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); - $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); + $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); + $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); - @for $i from 1 through list.length($levels) { - $key: list.nth(map.keys($levels), $i); + @for $i from 1 through list.length($levels) { + $key: list.nth(map.keys($levels), $i); - &:nth-child(#{$i}) { - background-color: props.get(core.$theme, --base, $key); - } - } - } + &:nth-child(#{$i}) { + background-color: props.get(core.$theme, --base, $key); + } + } + } - @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { - $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); + @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { + $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); - @include bem.modifier(string.slice($palette-name, 3)) { - @include bem.elem('item') { - @for $i from 1 through list.length($levels) { - $key: list.nth(map.keys($levels), $i); + @include bem.modifier(string.slice($palette-name, 3)) { + @include bem.elem('item') { + @for $i from 1 through list.length($levels) { + $key: list.nth(map.keys($levels), $i); - &:nth-child(#{$i}) { - background-color: props.get(core.$theme, $palette-name, $key); - } - } - } - } - } - - @include bem.modifier('static') { - @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { - $levels: map.get(config.$static-colors, --levels); - - @include bem.modifier(string.slice($palette-name, 3)) { - @include bem.elem('item') { - @for $i from 1 through list.length($levels) { - $key: list.nth(map.keys($levels), $i); + &:nth-child(#{$i}) { + background-color: props.get(core.$theme, $palette-name, $key); + } + } + } + } + } + + @include bem.modifier('static') { + @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { + $levels: map.get(config.$static-colors, --levels); + + @include bem.modifier(string.slice($palette-name, 3)) { + @include bem.elem('item') { + @for $i from 1 through list.length($levels) { + $key: list.nth(map.keys($levels), $i); - &:nth-child(#{$i}) { - background-color: props.get(core.$theme, #{$palette-name}-static, $key); - } - } - } - } - } - } - } + &:nth-child(#{$i}) { + background-color: props.get(core.$theme, #{$palette-name}-static, $key); + } + } + } + } + } + } + } } diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss index e148f21..80fc913 100644 --- a/src/objects/_placeholders.scss +++ b/src/objects/_placeholders.scss @@ -7,16 +7,16 @@ @use 'placeholders.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('placeholders') { - @include bem.elem('placeholder') { - display: inline-block; - min-block-size: props.get(vars.$min-block-size); - vertical-align: middle; - background-color: currentColor; - border-radius: props.get(vars.$rounding); - opacity: props.get(vars.$opacity); - } - } + @include bem.object('placeholders') { + @include bem.elem('placeholder') { + display: inline-block; + min-block-size: props.get(vars.$min-block-size); + vertical-align: middle; + background-color: currentColor; + border-radius: props.get(vars.$rounding); + opacity: props.get(vars.$opacity); + } + } } diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 4356dff..2746477 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -7,39 +7,39 @@ @use 'popover.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('popover') { - position: fixed; - inset-block-start: 0; - inset-inline-start: 0; - z-index: props.get(vars.$z-index); - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin: 0; - color: currentColor; - background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - transform: translate(var(--x), var(--y)); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); + @include bem.object('popover') { + position: fixed; + inset-block-start: 0; + inset-inline-start: 0; + z-index: props.get(vars.$z-index); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin: 0; + color: currentColor; + background-color: props.get(vars.$bg-color); + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get(vars.$shadow-color); + transform: translate(var(--x), var(--y)); - @include bem.modifier('up-left') { - transform: translate(var(--x), calc(var(--y) - 100%)); - } + @include bem.modifier('up-left') { + transform: translate(var(--x), calc(var(--y) - 100%)); + } - @include bem.modifier('up-right') { - transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); - } + @include bem.modifier('up-right') { + transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); + } - @include bem.modifier('down-right') { - transform: translate(calc(var(--x) - 100%), var(--y)); - } - } + @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 aef6b92..8327a15 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -8,147 +8,147 @@ @use 'radio.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('radio') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin-inline: - 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 bem.object('radio') { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin-inline: + 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 bem.elem('circle') { - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$diameter); - block-size: props.get(vars.$diameter); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$circle-border-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: 2em; + @include bem.elem('circle') { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$diameter); + block-size: props.get(vars.$diameter); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); + vertical-align: top; + background-color: props.get(vars.$circle-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; - &::after { - position: relative; - inset-block-start: props.get(vars.$border-width); - inset-inline-start: props.get(vars.$border-width); - display: block; - inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - content: ''; - background-color: props.get(vars.$circle-bg-color); - border-radius: props.get(vars.$diameter); - transition: transform .2s ease; - } - } + &::after { + position: relative; + inset-block-start: props.get(vars.$border-width); + inset-inline-start: props.get(vars.$border-width); + display: block; + inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + content: ''; + background-color: props.get(vars.$circle-bg-color); + border-radius: props.get(vars.$diameter); + transition: transform .2s ease; + } + } - @include bem.elem('label') { - margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); - } + @include bem.elem('label') { + margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); + } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + @include bem.elem('native') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); - &:hover, - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$hover--label-color); - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$hover--label-color); + } - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$hover--circle-border-color); - } - } + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$hover--circle-border-color); + } + } - &:checked { - @include bem.sibling-elem('circle') { - &::after { - transform: scale(.44); - } - } - } + &:checked { + @include bem.sibling-elem('circle') { + &::after { + transform: scale(.44); + } + } + } - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); - &::after { - background-color: props.get(vars.$disabled--circle-bg-color); - } - } - } + &::after { + background-color: props.get(vars.$disabled--circle-bg-color); + } + } + } - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$key-focus--label-color); - } + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$key-focus--label-color); + } - @include bem.sibling-elem('circle') { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } + @include bem.sibling-elem('circle') { + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } - @include bem.modifier('standalone') { - @include bem.elem('circle') { - margin-block-start: 0; - } - } + @include bem.modifier('standalone') { + @include bem.elem('circle') { + margin-block-start: 0; + } + } - @include bem.modifier('accent') { - @include bem.elem('native') { - &:checked { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$accent--circle-border-color); - } + @include bem.modifier('accent') { + @include bem.elem('native') { + &:checked { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$accent--circle-border-color); + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$accent--hover--circle-border-color); - } - } - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$accent--hover--circle-border-color); + } + } + } - &:disabled { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); + &:disabled { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); - &::after { - background-color: props.get(vars.$disabled--circle-bg-color); - } - } + &::after { + background-color: props.get(vars.$disabled--circle-bg-color); + } + } - &:checked { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); - } - } - } - } - } - } + &:checked { + @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 6c60777..4a1feda 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss @@ -8,83 +8,83 @@ @use 'side-nav.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('side-nav') { - display: flex; - flex-direction: column; - gap: props.get(vars.$spacing); + @include bem.object('side-nav') { + display: flex; + flex-direction: column; + gap: props.get(vars.$spacing); - @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); - font-weight: 500; - color: props.get(vars.$header--label-color); - text-transform: uppercase; - letter-spacing: .5px; + @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); + font-weight: 500; + color: props.get(vars.$header--label-color); + text-transform: uppercase; + letter-spacing: .5px; - @include bem.next-twin-elem { - margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); - } - } + @include bem.next-twin-elem { + margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); + } + } - @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)); - color: props.get(vars.$item--disabled--label-color); - background-clip: padding-box; - border: props.get(vars.$item--key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); + @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)); + color: props.get(vars.$item--disabled--label-color); + background-clip: padding-box; + border: props.get(vars.$item--key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); - &:link, - &:visited, - &:enabled { - color: currentColor; + &:link, + &:visited, + &:enabled { + color: currentColor; - @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); - } + @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); + } - &:active { - color: props.get(vars.$item--active--label-color); - background-color: props.get(vars.$item--active--bg-color); - } + &:active { + color: props.get(vars.$item--active--label-color); + background-color: props.get(vars.$item--active--bg-color); + } - &:focus-visible { - outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) - props.get(vars.$item--key-focus--outline-color); - } - } + &:focus-visible { + outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + props.get(vars.$item--key-focus--outline-color); + } + } - @include bem.next-elem('header') { - margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); - } - } + @include bem.next-elem('header') { + margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); + } + } - @include bem.elem('header') { - &:link, - &:visited, - &:enabled { - color: props.get(vars.$header--label-color); - } - } + @include bem.elem('header') { + &:link, + &:visited, + &:enabled { + color: props.get(vars.$header--label-color); + } + } - @include bem.elem('separator') { - block-size: props.get(vars.$separator); - } + @include bem.elem('separator') { + block-size: props.get(vars.$separator); + } - @include bem.elem('icon-slot') { - display: flex; - justify-content: center; - inline-size: props.get(icon.$size); - } - } + @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 1fcdf02..4e4aa42 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -9,19 +9,19 @@ @use 'status-indicator.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('status-indicator') { - display: inline-block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - background-color: props.get(vars.$default); - border-radius: 10em; + @include bem.object('status-indicator') { + display: inline-block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + background-color: props.get(vars.$default); + border-radius: 10em; - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.is(string.slice($theme, 3)) { - background-color: props.get(vars.$themes, $theme); - } - } - } + @each $theme in map.keys(props.get(vars.$themes)) { + @include bem.is(string.slice($theme, 3)) { + background-color: props.get(vars.$themes, $theme); + } + } + } } diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index 6289145..55b446a 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -9,18 +9,18 @@ $default: props.def(--o-status-indicator--default, props.get(core.$theme, --bord $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; $themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, ) !default; $themes: props.def(--o-status-indicator, (), 'color'); @each $theme, $key in $themes-config { - @if $theme != --base { - $themes: props.merge($themes, ( - --#{$theme}: props.get(core.$theme, $key, --700), - )); - } + @if $theme != --base { + $themes: props.merge($themes, ( + --#{$theme}: props.get(core.$theme, $key, --700), + )); + } } diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 8612d31..48cec24 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -8,181 +8,181 @@ @use 'switch.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('switch') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin-inline: - 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 bem.elem('indicator') { - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$inline-size); - block-size: props.get(vars.$block-size); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$track-bg-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: 2em; - transition: background-color .2s ease; - - &::after { - display: block; - inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - content: ''; - background-color: props.get(vars.$handle-bg-color); - border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); - border-radius: props.get(vars.$inline-size); - transition: transform .2s ease; - } - } - - @include bem.elem('label') { - margin-inline-start: props.get(vars.$label-gap); - } - - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); - - &:hover, - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$hover--label-color); - } - - @include bem.sibling-elem('indicator') { - &::after { - border-color: props.get(vars.$hover--handle-border-color); - } - } - } - - &:checked { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$handle-border-color); - - &::after { - border-color: props.get(vars.$handle-border-color); - transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); - } - } - - &:hover, - &:focus-visible { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$hover--handle-border-color); + @include bem.object('switch') { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin-inline: + 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 bem.elem('indicator') { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$inline-size); + block-size: props.get(vars.$block-size); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); + vertical-align: top; + background-color: props.get(vars.$track-bg-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; + transition: background-color .2s ease; + + &::after { + display: block; + inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + content: ''; + background-color: props.get(vars.$handle-bg-color); + border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); + border-radius: props.get(vars.$inline-size); + transition: transform .2s ease; + } + } + + @include bem.elem('label') { + margin-inline-start: props.get(vars.$label-gap); + } + + @include bem.elem('native') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); + + &:hover, + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$hover--label-color); + } + + @include bem.sibling-elem('indicator') { + &::after { + border-color: props.get(vars.$hover--handle-border-color); + } + } + } + + &:checked { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$handle-border-color); + + &::after { + border-color: props.get(vars.$handle-border-color); + transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); + } + } + + &:hover, + &:focus-visible { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$hover--handle-border-color); - &::after { - border-color: props.get(vars.$hover--handle-border-color); - } - } - } - } - - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } - - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$disabled--track-bg-color); - - &::after { - background-color: props.get(vars.$disabled--handle-bg-color); - border-color: props.get(vars.$disabled--handle-border-color); - } - } - - &:checked { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$disabled--handle-border-color); - - &::after { - border-color: props.get(vars.$disabled--handle-border-color); - } - } - } - } - - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$key-focus--label-color); - } + &::after { + border-color: props.get(vars.$hover--handle-border-color); + } + } + } + } + + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } + + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$disabled--track-bg-color); + + &::after { + background-color: props.get(vars.$disabled--handle-bg-color); + border-color: props.get(vars.$disabled--handle-border-color); + } + } + + &:checked { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$disabled--handle-border-color); + + &::after { + border-color: props.get(vars.$disabled--handle-border-color); + } + } + } + } + + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$key-focus--label-color); + } - @include bem.sibling-elem('indicator') { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } - - @include bem.modifier('standalone') { - @include bem.elem('indicator') { - margin-block-start: 0; - } - } - - @include bem.modifier('accent') { - @include bem.elem('native') { - &:checked { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$accent--handle-border-color); + @include bem.sibling-elem('indicator') { + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } + + @include bem.modifier('standalone') { + @include bem.elem('indicator') { + margin-block-start: 0; + } + } + + @include bem.modifier('accent') { + @include bem.elem('native') { + &:checked { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$accent--handle-border-color); - &::after { - border-color: props.get(vars.$accent--handle-border-color); - } - } + &::after { + border-color: props.get(vars.$accent--handle-border-color); + } + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$accent--hover--handle-border-color); - - &::after { - border-color: props.get(vars.$accent--hover--handle-border-color); - } - } - } - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$accent--hover--handle-border-color); + + &::after { + border-color: props.get(vars.$accent--hover--handle-border-color); + } + } + } + } - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } - &:checked { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$disabled--handle-border-color); + &:checked { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$disabled--handle-border-color); - &::after { - border-color: props.get(vars.$disabled--handle-border-color); - } - } - } - } - } - } - } + &::after { + border-color: props.get(vars.$disabled--handle-border-color); + } + } + } + } + } + } + } } diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss index 131c832..a9daaae 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss @@ -9,105 +9,105 @@ @use 'tabbar.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('tabbar') { - min-inline-size: 0; - block-size: props.get(vars.$block-size); - overflow: hidden; + @include bem.object('tabbar') { + min-inline-size: 0; + block-size: props.get(vars.$block-size); + overflow: hidden; - &::after { - display: block; - block-size: props.get(vars.$indicator--width); - margin-block-start: calc(-1 * props.get(vars.$indicator--width)); - content: ''; - background-color: props.get(vars.$railing--bg-color); - } + &::after { + display: block; + block-size: props.get(vars.$indicator--width); + margin-block-start: calc(-1 * props.get(vars.$indicator--width)); + content: ''; + background-color: props.get(vars.$railing--bg-color); + } - @include bem.elem('tabs') { - display: flex; - block-size: 100%; - margin-inline: calc(-.5 * props.get(vars.$spacing)); - overflow-inline: auto; - } + @include bem.elem('tabs') { + display: flex; + block-size: 100%; + margin-inline: calc(-.5 * props.get(vars.$spacing)); + overflow-inline: auto; + } - @include bem.modifier('quiet') { - box-shadow: none; - } + @include bem.modifier('quiet') { + box-shadow: none; + } - @include bem.modifier('adapt') { - block-size: 100%; - } + @include bem.modifier('adapt') { + block-size: 100%; + } - @include bem.elem('tab') { - position: relative; - display: flex; - align-items: center; - padding-inline: calc(.5 * props.get(vars.$spacing)); - color: props.get(vars.$tab--text-color); - white-space: nowrap; + @include bem.elem('tab') { + position: relative; + display: flex; + align-items: center; + padding-inline: calc(.5 * props.get(vars.$spacing)); + color: props.get(vars.$tab--text-color); + white-space: nowrap; - &::before { - position: absolute; - inset-block-start: 50%; - inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); - z-index: -10; - block-size: 1.5em; - content: ''; - border-radius: props.get(vars.$rounding); - transform: translateY(-50%); - } + &::before { + position: absolute; + inset-block-start: 50%; + inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); + z-index: -10; + block-size: 1.5em; + content: ''; + border-radius: props.get(vars.$rounding); + transform: translateY(-50%); + } - &::after { - position: absolute; - inset-block-end: 0; - inset-inline: calc(.5 * props.get(vars.$spacing)); - z-index: 10; - display: none; - block-size: props.get(vars.$indicator--width); - content: ''; - background-color: props.get(vars.$tab--selected--text-color); - } + &::after { + position: absolute; + inset-block-end: 0; + inset-inline: calc(.5 * props.get(vars.$spacing)); + z-index: 10; + display: none; + block-size: props.get(vars.$indicator--width); + content: ''; + background-color: props.get(vars.$tab--selected--text-color); + } - &:link, - &:visited { - &:hover, - &:active, - &:focus-visible { - color: props.get(vars.$tab--selected--text-color); - } + &:link, + &:visited { + &:hover, + &:active, + &:focus-visible { + color: props.get(vars.$tab--selected--text-color); + } - &:focus-visible { - &::before { - color: props.get(vars.$key-focus--text-color); - text-decoration: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } + &:focus-visible { + &::before { + color: props.get(vars.$key-focus--text-color); + text-decoration: none; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } - @include bem.is('selected') { - color: props.get(vars.$tab--selected--text-color); + @include bem.is('selected') { + color: props.get(vars.$tab--selected--text-color); - &::after { - display: block; - } - } - } + &::after { + display: block; + } + } + } - @include bem.modifier('accent') { - @include bem.elem('tab') { - &::after { - background-color: props.get(vars.$tab--accent--text-color); - } + @include bem.modifier('accent') { + @include bem.elem('tab') { + &::after { + background-color: props.get(vars.$tab--accent--text-color); + } - @include bem.is('selected') { - color: props.get(vars.$tab--accent--text-color); - } - } - } - } + @include bem.is('selected') { + color: props.get(vars.$tab--accent--text-color); + } + } + } + } } diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 2b63737..9e4891d 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -7,141 +7,141 @@ @use 'table.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('table') { - border-spacing: 0; - border-collapse: separate; + @include bem.object('table') { + border-spacing: 0; + border-collapse: separate; - @include bem.modifier('fixed') { - table-layout: fixed; - } + @include bem.modifier('fixed') { + table-layout: fixed; + } - @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); - font-size: props.get(vars.$heading--font-size); - font-weight: props.get(vars.$heading--font-weight); - color: props.get(vars.$heading-color); - text-align: start; - text-transform: props.get(vars.$heading--text-transform); - letter-spacing: props.get(vars.$heading--letter-spacing); - } + @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); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); + color: props.get(vars.$heading-color); + text-align: start; + text-transform: props.get(vars.$heading--text-transform); + letter-spacing: props.get(vars.$heading--letter-spacing); + } - @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); - border-style: solid; - border-width: 0; - border-block-start-width: props.get(vars.$border-width); + @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); + border-style: solid; + border-width: 0; + border-block-start-width: props.get(vars.$border-width); - @include bem.modifier('divider') { - border-inline-end-width: props.get(vars.$border-width); - } - } + @include bem.modifier('divider') { + border-inline-end-width: props.get(vars.$border-width); + } + } - @include bem.elem('row') { - &:last-child { - @include bem.elem('cell') { - border-block-end-width: props.get(vars.$border-width); - } - } - } + @include bem.elem('row') { + &:last-child { + @include bem.elem('cell') { + border-block-end-width: props.get(vars.$border-width); + } + } + } - @include bem.modifier('flush') { - @include bem.elem('head-cell', 'cell') { - &:first-child { - padding-inline-start: 0; - } + @include bem.modifier('flush') { + @include bem.elem('head-cell', 'cell') { + &:first-child { + padding-inline-start: 0; + } - &:last-child { - padding-inline-end: 0; - } - } - } + &:last-child { + padding-inline-end: 0; + } + } + } - @include bem.modifier('box') { - @include bem.elem('cell') { - background-color: props.get(vars.$box--bg-color); + @include bem.modifier('box') { + @include bem.elem('cell') { + background-color: props.get(vars.$box--bg-color); - &:first-child { - border-inline-start-width: props.get(vars.$border-width); - } + &:first-child { + border-inline-start-width: props.get(vars.$border-width); + } - &:last-child { - border-inline-end-width: props.get(vars.$border-width); - } - } + &:last-child { + border-inline-end-width: props.get(vars.$border-width); + } + } - @include bem.elem('row') { - &:first-child { - @include bem.elem('cell') { - &:first-child { - border-start-start-radius: props.get(vars.$rounding); - } + @include bem.elem('row') { + &:first-child { + @include bem.elem('cell') { + &:first-child { + border-start-start-radius: props.get(vars.$rounding); + } - &:last-child { - border-start-end-radius: props.get(vars.$rounding); - } - } - } + &:last-child { + border-start-end-radius: props.get(vars.$rounding); + } + } + } - &:last-child { - @include bem.elem('cell') { - &:first-child { - border-end-start-radius: props.get(vars.$rounding); - } + &:last-child { + @include bem.elem('cell') { + &:first-child { + border-end-start-radius: props.get(vars.$rounding); + } - &:last-child { - border-end-end-radius: props.get(vars.$rounding); - } - } - } - } - } + &:last-child { + border-end-end-radius: props.get(vars.$rounding); + } + } + } + } + } - @include bem.modifier('interactive') { - @include bem.elem('row') { - @include bem.elem('cell') { - cursor: pointer; - } + @include bem.modifier('interactive') { + @include bem.elem('row') { + @include bem.elem('cell') { + cursor: pointer; + } - &:hover { - @include bem.elem('cell') { - background-color: props.get(vars.$hover--bg-color); - } - } + &:hover { + @include bem.elem('cell') { + background-color: props.get(vars.$hover--bg-color); + } + } - &:active { - @include bem.elem('cell') { - background-color: props.get(vars.$active--bg-color); - } - } - } + &:active { + @include bem.elem('cell') { + background-color: props.get(vars.$active--bg-color); + } + } + } - @include bem.modifier('box') { - @include bem.elem('row') { - &:hover { - @include bem.elem('cell') { - background-color: props.get(vars.$box--hover--bg-color); - } - } + @include bem.modifier('box') { + @include bem.elem('row') { + &:hover { + @include bem.elem('cell') { + background-color: props.get(vars.$box--hover--bg-color); + } + } - &:active { - @include bem.elem('cell') { - background-color: props.get(vars.$box--active--bg-color); - } - } - } - } - } + &:active { + @include bem.elem('cell') { + background-color: props.get(vars.$box--active--bg-color); + } + } + } + } + } - @include bem.modifier('sm') { - @include bem.elem('head-cell', 'cell') { - padding-block: props.get(vars.$pad-b--sm); - } - } - } + @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 a52050c..b89e148 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -7,181 +7,181 @@ @use 'text-field.vars' as vars; @mixin -invalid { - $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); - @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); - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - } - - &:hover { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$error--hover--border-color); - } - } - - &:focus { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$error--focus--border-color); - } - } + @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); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + } + + &:hover { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$error--hover--border-color); + } + } + + &:focus { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$error--focus--border-color); + } + } } @mixin -keyboard-focus { - @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); - } + @include bem.sibling-elem('bg') { + outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); + border-color: props.get(vars.$key-focus--border-color); + //outline-offset: props.get(vars.$focus --border); + } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('text-field') { - $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); + @include bem.object('text-field') { + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); - position: relative; - min-inline-size: 0; - background-color: props.get(vars.$bg-color); - border-radius: props.get(vars.$rounding); - - @include bem.elem('bg') { - position: absolute; - inset-block: 0; - inset-inline: 0; - display: block; - pointer-events: none; - border: props.get(vars.$border-width) solid props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - } - - @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)); - padding-inline: props.get(vars.$pad-i); - font: inherit; - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - appearance: none; - resize: none; - background-color: transparent; - border: 1px solid transparent; - - &::placeholder { - font-style: italic; - color: props.get(vars.$placeholder-color); - opacity: 1; - } - - &:hover { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$hover--border-color); - } - } - - &:focus { - outline: 0; - - @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); - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - } - } - - &:invalid { - @include -invalid; - } - - &:focus-visible, - &:invalid:focus-visible { - @include -keyboard-focus; - } - } - - @include bem.modifier('extended') { - padding: props.get(vars.$extended--pad); - - @include bem.multi('&', 'elem' 'bg') { - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); - } - - @include bem.elem('native') { - &:focus { - @include bem.sibling-elem('bg') { - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); - } - } - } - } - - @include bem.modifier('pill') { - @include bem.multi('&', 'elem' 'bg') { - border-radius: 100em; - } - - @include bem.elem('native') { - padding-inline: props.get(vars.$pad-i-pill); - - &:focus { - @include bem.sibling-elem('bg') { - border-radius: 100em; - } - } - } - - @include bem.modifier('extended') { - @include bem.elem('native') { - padding-inline: props.get(vars.$pad-i); - } - } - } - - @include bem.is('invalid') { - @include bem.elem('native') { - @include -invalid; - - &:focus-visible { - @include -keyboard-focus; - } - } - } - - @include bem.is('disabled') { - background-color: props.get(vars.$disabled--bg-color); - - @include bem.elem('native') { - color: props.get(vars.$disabled--text-color); - - &::placeholder { - color: props.get(vars.$disabled--placeholder-color); - } - } - - @include bem.elem('bg') { - border-color: props.get(vars.$disabled--border-color); - } - - @include bem.is('invalid') { - @include bem.elem('native') { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$disabled--border-color); - } - } - } - - @include bem.elem('native') { - &:invalid { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$disabled--border-color); - } - } - } - } - } + position: relative; + min-inline-size: 0; + background-color: props.get(vars.$bg-color); + border-radius: props.get(vars.$rounding); + + @include bem.elem('bg') { + position: absolute; + inset-block: 0; + inset-inline: 0; + display: block; + pointer-events: none; + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + } + + @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)); + padding-inline: props.get(vars.$pad-i); + font: inherit; + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + appearance: none; + resize: none; + background-color: transparent; + border: 1px solid transparent; + + &::placeholder { + font-style: italic; + color: props.get(vars.$placeholder-color); + opacity: 1; + } + + &:hover { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$hover--border-color); + } + } + + &:focus { + outline: 0; + + @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); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + } + } + + &:invalid { + @include -invalid; + } + + &:focus-visible, + &:invalid:focus-visible { + @include -keyboard-focus; + } + } + + @include bem.modifier('extended') { + padding: props.get(vars.$extended--pad); + + @include bem.multi('&', 'elem' 'bg') { + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); + } + + @include bem.elem('native') { + &:focus { + @include bem.sibling-elem('bg') { + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); + } + } + } + } + + @include bem.modifier('pill') { + @include bem.multi('&', 'elem' 'bg') { + border-radius: 100em; + } + + @include bem.elem('native') { + padding-inline: props.get(vars.$pad-i-pill); + + &:focus { + @include bem.sibling-elem('bg') { + border-radius: 100em; + } + } + } + + @include bem.modifier('extended') { + @include bem.elem('native') { + padding-inline: props.get(vars.$pad-i); + } + } + } + + @include bem.is('invalid') { + @include bem.elem('native') { + @include -invalid; + + &:focus-visible { + @include -keyboard-focus; + } + } + } + + @include bem.is('disabled') { + background-color: props.get(vars.$disabled--bg-color); + + @include bem.elem('native') { + color: props.get(vars.$disabled--text-color); + + &::placeholder { + color: props.get(vars.$disabled--placeholder-color); + } + } + + @include bem.elem('bg') { + border-color: props.get(vars.$disabled--border-color); + } + + @include bem.is('invalid') { + @include bem.elem('native') { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$disabled--border-color); + } + } + } + + @include bem.elem('native') { + &:invalid { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$disabled--border-color); + } + } + } + } + } } diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 73a8cb0..60a98af 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss @@ -9,96 +9,96 @@ @use 'thumbnail.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('thumbnail') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - overflow: hidden; - border-radius: props.get(vars.$rounding); - outline: props.get(vars.$border-color) solid props.get(vars.$border-width); - outline-offset: calc(-1 * props.get(vars.$border-width)); - opacity: .75; + @include bem.object('thumbnail') { + position: relative; + display: block; + flex: 0 0 auto; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + overflow: hidden; + outline: props.get(vars.$border-color) solid props.get(vars.$border-width); + outline-offset: calc(-1 * props.get(vars.$border-width)); + border-radius: props.get(vars.$rounding); + opacity: .75; - &:hover, - &:active, - &:focus-visible { - outline-color: props.get(vars.$hover--border-color); - opacity: 1; - } + &:hover, + &:active, + &:focus-visible { + outline-color: props.get(vars.$hover--border-color); + opacity: 1; + } - @include bem.is('selected') { - $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); + @include bem.is('selected') { + $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); - margin: $focus-border-offset; - border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - outline: none; - opacity: 1; - } + margin: $focus-border-offset; + outline: none; + border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + opacity: 1; + } - @include bem.elem('image') { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - display: block; - inline-size: 100%; - block-size: 100%; - object-fit: cover; - object-position: center center; - } + @include bem.elem('image') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + display: block; + inline-size: 100%; + block-size: 100%; + object-fit: cover; + object-position: center center; + } - @include bem.elem('icon') { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - } + @include bem.elem('icon') { + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); + } - &:focus-visible { - $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); + &:focus-visible { + $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); - margin: $focus-border-offset; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - outline-offset: 0; - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) - props.get(vars.$key-focus--outline-color); - } + margin: $focus-border-offset; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + outline-offset: 0; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + props.get(vars.$key-focus--outline-color); + } - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - outline-color: props.get(vars.$static-themes, $theme, --border); + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + outline-color: props.get(vars.$static-themes, $theme, --border); - &:hover, - &:active, - &:focus-visible { - outline-color: props.get(vars.$static-themes, $theme, --hover, --border); - } + &:hover, + &:active, + &:focus-visible { + outline-color: props.get(vars.$static-themes, $theme, --hover, --border); + } - @include bem.is('selected') { - border-color: props.get(vars.$static-themes, $theme, --selected, --border); - } + @include bem.is('selected') { + border-color: props.get(vars.$static-themes, $theme, --selected, --border); + } - &:focus-visible { - border-color: transparent; - outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) - props.get(vars.$static-themes, $theme, --key-focus, --outline); - } - } - } - } + &:focus-visible { + outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); + border-color: transparent; + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + props.get(vars.$static-themes, $theme, --key-focus, --outline); + } + } + } + } } diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index 60bf2e9..e49e52e 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -28,24 +28,24 @@ $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !def $static-themes: props.def(--o-thumbnail, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $thumbnail-theme: --static-#{string.slice($theme, 3)}; + $thumbnail-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $thumbnail-theme: ( - --border: props.get(core.$transparent-colors, $theme, --400), + $static-themes: props.merge($static-themes, ( + $thumbnail-theme: ( + --border: props.get(core.$transparent-colors, $theme, --400), - --hover: ( - --border: props.get(core.$transparent-colors, $theme, --500), - ), + --hover: ( + --border: props.get(core.$transparent-colors, $theme, --500), + ), - --selected: ( - --border: props.get(core.$transparent-colors, $theme, --900), - ), - - --key-focus: ( - --border: props.get(core.$transparent-colors, $theme, --900), - --outline: props.get(core.$transparent-colors, $theme, --300), - ), - ) - )); + --selected: ( + --border: props.get(core.$transparent-colors, $theme, --900), + ), + + --key-focus: ( + --border: props.get(core.$transparent-colors, $theme, --900), + --outline: props.get(core.$transparent-colors, $theme, --300), + ), + ) + )); } -- cgit v1.2.3-70-g09d2