From a6745cc1c39dca0a26a72ffde885dda33acfed5f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 25 Jun 2024 21:45:22 +0200 Subject: Added back action button --- src/.old/objects/_action-button.scss | 222 ---------------------------------- src/_objects.scss | 2 +- src/objects/_action-button.scss | 227 +++++++++++++++++++++++++++++++++++ src/objects/_button.scss | 25 ++-- src/objects/_checkbox.scss | 2 +- src/objects/_radio.scss | 2 +- 6 files changed, 242 insertions(+), 238 deletions(-) delete mode 100644 src/.old/objects/_action-button.scss create mode 100644 src/objects/_action-button.scss (limited to 'src') diff --git a/src/.old/objects/_action-button.scss b/src/.old/objects/_action-button.scss deleted file mode 100644 index 48ac2a6..0000000 --- a/src/.old/objects/_action-button.scss +++ /dev/null @@ -1,222 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('action-button') { - @include iro.props-store(( - --dims: ( - --line-height: 1.4, - --pad-x: fn.global-dim(--size --100), - --pad-y: fn.global-dim(--size --85), - --rounding: 3px, - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --bg: fn.global-color(--bg-hi), - --label: fn.global-color(--fg), - --border: fn.global-color(--obj-lo), - - --hover: ( - --bg: fn.global-color(--bg-hi2), - --label: fn.global-color(--fg-lo), - --border: fn.global-color(--fg-hi2), - ), - --active: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg-lo), - --border: fn.global-color(--fg-hi2), - ), - --selected: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg), - --border: fn.global-color(--fg-hi3), - - --hover: ( - --label: fn.global-color(--fg-lo), - --border: fn.global-color(--fg-hi2), - ), - ), - --disabled: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg-hi3), - --border: fn.global-color(--obj-hi), - ), - --key-focus: ( - --border: fn.global-color(--focus --fill), - --shadow: fn.global-color(--focus --shadow), - ), - --quiet: ( - --label: fn.global-color(--fg), - - --hover: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg-lo), - ), - --active: ( - --bg: fn.global-color(--obj), - --label: fn.global-color(--fg-lo), - ), - --selected: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg), - - --hover: ( - --bg: fn.global-color(--obj), - --label: fn.global-color(--fg-lo), - ), - ), - --disabled: ( - --label: fn.global-color(--fg-hi3), - ), - ), - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline-block; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - overflow: hidden; - border: 1px solid fn.color(--disabled --border); - border-radius: fn.dim(--rounding); - background-color: fn.color(--disabled --bg); - color: fn.color(--disabled --label); - line-height: fn.dim(--line-height); - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - - &:link, - &:visited, - &:enabled { - border-color: fn.color(--border); - background-color: fn.color(--bg); - color: fn.color(--label); - - &:hover { - border-color: fn.color(--hover --border); - background-color: fn.color(--hover --bg); - color: fn.color(--hover --label); - } - - &:active { - border-color: fn.color(--active --border); - background-color: fn.color(--active --bg); - color: fn.color(--active --label); - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - background-color: fn.color(--hover --bg); - color: fn.color(--hover --label); - } - } - } - - @include iro.bem-is('selected') { - &:link, - &:visited, - &:enabled { - border-color: fn.color(--selected --border); - background-color: fn.color(--selected --bg); - color: fn.color(--selected --label); - - &:hover, - &:active { - border-color: fn.color(--selected --hover --border); - background-color: fn.color(--selected --bg); - color: fn.color(--selected --hover --label); - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - background-color: fn.color(--selected --bg); - color: fn.color(--selected --hover --label); - } - } - } - } - - @include iro.bem-modifier('quiet') { - border-color: transparent; - background-color: transparent; - box-shadow: none; - color: fn.color(--quiet --disabled --label); - - &:link, - &:visited, - &:enabled { - border-color: transparent; - background-color: transparent; - box-shadow: none; - color: fn.color(--quiet --label); - - &:hover { - border-color: transparent; - background-color: fn.color(--quiet --hover --bg); - box-shadow: none; - color: fn.color(--quiet --hover --label); - } - - &:active { - border-color: transparent; - background-color: fn.color(--quiet --active --bg); - box-shadow: none; - color: fn.color(--quiet --active --label); - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - background-color: fn.color(--quiet --hover --bg); - color: fn.color(--quiet --hover --label); - } - } - } - - @include iro.bem-is('selected') { - background-color: fn.color(--quiet --selected --bg); - color: fn.color(--quiet --disabled --label); - - &:link, - &:visited, - &:enabled { - border-color: transparent; - background-color: fn.color(--quiet --selected --bg); - box-shadow: none; - color: fn.color(--quiet --selected --label); - - &:hover, - &:active { - border-color: transparent; - background-color: fn.color(--quiet --selected --hover --bg); - box-shadow: none; - color: fn.color(--quiet --selected --hover --label); - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - background-color: fn.color(--quiet --selected --bg); - color: fn.color(--quiet --selected --hover --label); - } - } - } - } - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - border-color: fn.color(--key-focus --border); - box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); - } - } - - @include iro.bem-modifier('round') { - width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y)); - padding-right: 0; - padding-left: 0; - border-radius: 100em; - } - } -} diff --git a/src/_objects.scss b/src/_objects.scss index 525e31a..b1872c9 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -9,7 +9,7 @@ @use 'objects/radio'; @use 'objects/checkbox'; @use 'objects/switch'; -// @use 'objects/action-button'; +@use 'objects/action-button'; // @use 'objects/overflow-button'; // @use 'objects/status-indicator'; // @use 'objects/avatar'; diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss new file mode 100644 index 0000000..6f0288d --- /dev/null +++ b/src/objects/_action-button.scss @@ -0,0 +1,227 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('action-button') { + @include iro.props-store(( + --dims: ( + --line-height: 1.4, + --pad-i: fn.global-dim(--size --100), + --pad-b: fn.global-dim(--size --85), + --border: fn.global-dim(--border --thin), + --rounding: fn.global-dim(--rounding), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + --border-offset: fn.global-dim(--key-focus --border-offset), + --outline: fn.global-dim(--key-focus --outline), + ), + ), + --colors: ( + --bg: fn.global-color(--base --75), + --label: fn.global-color(--text), + --border: fn.global-color(--border-strong), + + --hover: ( + --bg: fn.global-color(--base --50), + --label: fn.global-color(--heading), + --border: fn.global-color(--text-mute-more), + ), + --active: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--heading), + --border: fn.global-color(--text-mute-more), + ), + --selected: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--text), + --border: fn.global-color(--text-disabled), + + --hover: ( + --label: fn.global-color(--heading), + --border: fn.global-color(--text-mute-more), + ), + ), + --disabled: ( + --bg: fn.global-color(--bg-base), + --label: fn.global-color(--text-disabled), + --border: fn.global-color(--border-mute), + ), + --key-focus: ( + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + --quiet: ( + --label: fn.global-color(--text), + + --hover: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--heading), + ), + --active: ( + --bg: fn.global-color(--border), + --label: fn.global-color(--heading), + ), + --selected: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--text), + + --hover: ( + --bg: fn.global-color(--border), + --label: fn.global-color(--heading), + ), + ), + --disabled: ( + --label: fn.global-color(--text-disabled), + ), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + position: relative; + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + border: fn.dim(--border) solid fn.color(--disabled --border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--disabled --bg); + color: fn.color(--disabled --label); + line-height: fn.dim(--line-height); + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + + &::after { + content: ''; + display: none; + position: absolute; + z-index: 1; + inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); + outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + pointer-events: none; + } + + &:link, + &:visited, + &:enabled { + border-color: fn.color(--border); + background-color: fn.color(--bg); + color: fn.color(--label); + + &:hover, + &:focus-visible { + border-color: fn.color(--hover --border); + background-color: fn.color(--hover --bg); + color: fn.color(--hover --label); + } + + &:active { + border-color: fn.color(--active --border); + background-color: fn.color(--active --bg); + color: fn.color(--active --label); + } + + &:focus-visible { + &::after { + display: block; + } + } + } + + @include iro.bem-is('selected') { + &:link, + &:visited, + &:enabled { + border-color: fn.color(--selected --border); + background-color: fn.color(--selected --bg); + color: fn.color(--selected --label); + + &:hover, + &:active, + &:focus-visible { + border-color: fn.color(--selected --hover --border); + background-color: fn.color(--selected --bg); + color: fn.color(--selected --hover --label); + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--selected --bg); + color: fn.color(--selected --hover --label); + } + } + } + } + + @include iro.bem-modifier('quiet') { + border-color: transparent; + background-color: transparent; + box-shadow: none; + color: fn.color(--quiet --disabled --label); + + &:link, + &:visited, + &:enabled { + border-color: transparent; + background-color: transparent; + box-shadow: none; + color: fn.color(--quiet --label); + + &:hover, + &:focus-visible { + border-color: transparent; + background-color: fn.color(--quiet --hover --bg); + box-shadow: none; + color: fn.color(--quiet --hover --label); + } + + &:active { + border-color: transparent; + background-color: fn.color(--quiet --active --bg); + box-shadow: none; + color: fn.color(--quiet --active --label); + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--quiet --hover --bg); + color: fn.color(--quiet --hover --label); + } + } + } + + @include iro.bem-is('selected') { + background-color: fn.color(--quiet --selected --bg); + color: fn.color(--quiet --disabled --label); + + &:link, + &:visited, + &:enabled { + border-color: transparent; + background-color: fn.color(--quiet --selected --bg); + box-shadow: none; + color: fn.color(--quiet --selected --label); + + &:hover, + &:active, + &:focus-visible { + border-color: transparent; + background-color: fn.color(--quiet --selected --hover --bg); + box-shadow: none; + color: fn.color(--quiet --selected --hover --label); + } + } + } + } + + @include iro.bem-modifier('round') { + inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); + padding-inline: 0; + border-radius: 100em; + } + } +} diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 49f3f67..1c907c0 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -231,13 +231,22 @@ $static-themes: 'black' 'white' !default; display: none; position: absolute; z-index: 1; - inset-block: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); - inset-inline: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); - border-radius: fn.dim(--rounding); + inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); pointer-events: none; } + + &:link, + &:visited, + &:enabled { + &:focus-visible { + &::after { + display: block; + } + } + } @include iro.bem-modifier('block') { display: block; @@ -268,16 +277,6 @@ $static-themes: 'black' 'white' !default; @include theme($theme); } } - - &:link, - &:visited, - &:enabled { - &:focus-visible { - &::after { - display: block; - } - } - } @each $theme in $static-themes { @include iro.bem-modifier(static-#{$theme}) { diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 509822b..8527948 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -15,7 +15,7 @@ --key-focus: ( --border: fn.global-dim(--key-focus --border), --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --border), + --outline: fn.global-dim(--key-focus --outline), ), ), --colors: ( diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 7ade7e1..9fa937d 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -15,7 +15,7 @@ --key-focus: ( --border: fn.global-dim(--key-focus --border), --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --border), + --outline: fn.global-dim(--key-focus --outline), ), ), --colors: ( -- cgit v1.2.3-70-g09d2