From 5c878876d3bdd2c7cd094871fa0644f3310bcec8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 23 Jul 2025 08:34:23 +0200 Subject: Commit merge of button and badge into action-button (and rename it to button) --- src/objects/_action-button.scss | 256 ---------------------------------------- 1 file changed, 256 deletions(-) delete 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 deleted file mode 100644 index c997679..0000000 --- a/src/objects/_action-button.scss +++ /dev/null @@ -1,256 +0,0 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'iro-sass/src/bem'; -@use 'iro-sass/src/props'; -@use '../props' as *; - -@forward 'action-button.vars'; -@use 'action-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)...); - - &: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('static') { - color: props.get($theme, list.join($key, --static --label-color)...); - background-color: props.get($theme, list.join($key, --static --bg-color)...); - border-color: props.get($theme, list.join($key, --static --border-color)...); - box-shadow: none; - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --static --label-color)...); - background-color: props.get($theme, list.join($key, --static --bg-color)...); - border-color: props.get($theme, list.join($key, --static --border-color)...); - box-shadow: none; - - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --static --hover --label-color)...); - background-color: props.get($theme, list.join($key, --static --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --static --hover --border-color)...); - } - - &:active { - color: props.get($theme, list.join($key, --static --active --label-color)...); - background-color: props.get($theme, list.join($key, --static --active --bg-color)...); - border-color: props.get($theme, list.join($key, --static --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('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.modifier('static') { - 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 { - 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)...); - - &: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)...); - } - } - } -} - -@mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include 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 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)); - } - } - } - } - } -} -- cgit v1.2.3-70-g09d2