From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/objects/_action-button.scss | 179 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 src/objects/_action-button.scss (limited to 'src/objects/_action-button.scss') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss new file mode 100644 index 0000000..0a65b8d --- /dev/null +++ b/src/objects/_action-button.scss @@ -0,0 +1,179 @@ +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../props'; + +@forward 'action-button.vars'; +@use 'action-button.vars' as vars; + +@mixin -apply-theme($theme, $key: ()) { + color: props.get($theme, list.join($key, --disabled --label)...); + background-color: props.get($theme, list.join($key, --disabled --bg)...); + border-color: props.get($theme, list.join($key, --disabled --border)...); + + &::after { + outline-color: props.get($theme, list.join($key, --key-focus --border)...); + 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-width)...); + } + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --label)...); + background-color: props.get($theme, list.join($key, --bg)...); + border-color: props.get($theme, list.join($key, --border)...); + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --hover --label)...); + background-color: props.get($theme, list.join($key, --hover --bg)...); + border-color: props.get($theme, list.join($key, --hover --border)...); + } + + &:active { + color: props.get($theme, list.join($key, --active --label)...); + background-color: props.get($theme, list.join($key, --active --bg)...); + border-color: props.get($theme, list.join($key, --active --border)...); + } + } + + @include iro.bem-modifier('quiet') { + color: props.get($theme, list.join($key, --quiet --disabled --label)...); + background-color: transparent; + border-color: transparent; + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --quiet --label)...); + background-color: transparent; + border-color: transparent; + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --quiet --hover --label)...); + background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); + border-color: transparent; + } + + &:active { + color: props.get($theme, list.join($key, --quiet --active --label)...); + background-color: props.get($theme, list.join($key, --quiet --active --bg)...); + border-color: transparent; + } + } + } + + @include iro.bem-is('selected') { + color: props.get($theme, list.join($key, --selected --disabled --label)...); + background-color: props.get($theme, list.join($key, --selected --disabled --bg)...); + border-color: props.get($theme, list.join($key, --selected --disabled --border)...); + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --selected --label)...); + background-color: props.get($theme, list.join($key, --selected --bg)...); + border-color: props.get($theme, list.join($key, --selected --border)...); + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --selected --hover --label)...); + background-color: props.get($theme, list.join($key, --selected --hover --bg)...); + border-color: props.get($theme, list.join($key, --selected --hover --border)...); + } + + &:active { + color: props.get($theme, list.join($key, --selected --active --label)...); + background-color: props.get($theme, list.join($key, --selected --active --bg)...); + border-color: props.get($theme, list.join($key, --selected --active --border)...); + } + } + } +} + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('action-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); + 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); + + &::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 { + &::after { + display: block; + } + } + } + + @include -apply-theme(vars.$default-theme); + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include iro.bem-modifier($theme) { + @include -apply-theme(vars.$static-themes, $theme); + } + } + + @include iro.bem-modifier('pill') { + padding-inline: props.get(vars.$pad-i-pill); + border-radius: 100em; + + &::after { + border-radius: 100em; + } + } + + @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @include iro.bem-modifier($mod) { + padding-block: props.get($pad-i); + padding-inline: props.get($pad-i); + font-size: props.get($font-size); + + @include iro.bem-modifier('pill') { + padding-inline: props.get($pad-i-pill); + } + } + } + + @include iro.bem-modifier('icon') { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); + padding-inline: 0; + + @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @include iro.bem-modifier($mod) { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); + padding-inline: 0; + } + } + } + } +} -- cgit v1.3.1