From 4e87fb46f2958ae28bdcfbc469118f14297b4d26 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 09:19:02 +0200 Subject: Pill version for action button --- src/_config.scss | 3 ++ src/objects/_action-button.scss | 69 ++++++++++++++++++++++++++++++++++------- src/objects/_button.scss | 5 ++- 3 files changed, 62 insertions(+), 15 deletions(-) (limited to 'src') diff --git a/src/_config.scss b/src/_config.scss index 56a74e1..f4f43fd 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -82,6 +82,9 @@ $semantic-colors-common: ( --focus-raw: --accent, --focus-static: --accent-static, + --light: --white-transparent, + --shadow: --black-transparent, + --border-mute: --base --200, --border: --base --300, --border-strong: --base --400, diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 6286f4e..6dbdc2f 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -1,14 +1,37 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +$sizes: 'sm' 'lg' 'xl' !default; + @include iro.props-namespace('action-button') { @include iro.props-store(( --dims: ( --line-height: 1.4, - --pad-i: fn.global-dim(--size --100), + --pad-i: fn.global-dim(--size --150), + --pad-i-pill: fn.global-dim(--size --200), --pad-b: fn.global-dim(--size --85), --border: fn.global-dim(--border --thin), --rounding: fn.global-dim(--rounding), + --font-size: fn.global-dim(--font-size --100), + + --sm: ( + --pad-i: fn.global-dim(--size --100), + --pad-i-pill: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --40), + --font-size: fn.global-dim(--font-size --75), + ), + --lg: ( + --pad-i: fn.global-dim(--size --175), + --pad-i-pill: fn.global-dim(--size --225), + --pad-b: fn.global-dim(--size --115), + --font-size: fn.global-dim(--font-size --150), + ), + --xl: ( + --pad-i: fn.global-dim(--size --225), + --pad-i-pill: fn.global-dim(--size --300), + --pad-b: fn.global-dim(--size --150), + --font-size: fn.global-dim(--font-size --200), + ), --key-focus: ( --border: fn.global-dim(--key-focus --border), @@ -27,14 +50,14 @@ --border: fn.global-color(--text-mute-more), ), --active: ( - --bg: fn.global-color(--border-mute), + --bg: fn.global-color(--border), --label: fn.global-color(--heading), - --border: fn.global-color(--text-mute-more), + --border: fn.global-color(--text-mute), ), --disabled: ( --bg: fn.global-color(--bg-l1), --label: fn.global-color(--border-strong), - --border: fn.global-color(--border-mute), + --border: fn.global-color(--border), ), --selected: ( --bg: fn.global-color(--text-mute), @@ -73,7 +96,7 @@ --label: fn.global-color(--heading), ), --disabled: ( - --label: fn.global-color(--text-disabled), + --label: fn.global-color(--border-strong), ), ), ), @@ -92,7 +115,6 @@ text-align: center; text-decoration: none; text-overflow: ellipsis; - vertical-align: top; white-space: nowrap; &::after { @@ -137,7 +159,6 @@ @include iro.bem-modifier('quiet') { border-color: transparent; background-color: transparent; - box-shadow: none; color: fn.color(--quiet --disabled --label); &:link, @@ -145,21 +166,18 @@ &: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); } } @@ -192,10 +210,37 @@ } } - @include iro.bem-modifier('round') { + @include iro.bem-modifier('pill') { + padding-inline: fn.dim(--pad-i-pill); + border-radius: 100em; + + &::after { + border-radius: 100em; + } + } + + @each $size in $sizes { + @include iro.bem-modifier($size) { + padding-block: fn.dim(--#{$size} --pad-b); + padding-inline: fn.dim(--#{$size} --pad-i); + font-size: fn.dim(--#{$size} --font-size); + + @include iro.bem-modifier('pill') { + padding-inline: fn.dim(--#{$size} --pad-i-pill); + } + } + } + + @include iro.bem-modifier('icon') { inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); padding-inline: 0; - border-radius: 100em; + + @each $size in $sizes { + @include iro.bem-modifier($size) { + inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b)); + padding-inline: 0; + } + } } } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 1c907c0..27d3726 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -2,6 +2,7 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +$sizes: 'sm' 'lg' 'xl' !default; $themes: 'accent' 'negative' !default; $static-themes: 'black' 'white' !default; @@ -54,7 +55,6 @@ $static-themes: 'black' 'white' !default; @include iro.bem-modifier('outline') { border-color: fn.color(list.join($key, --disabled --outline-border)); background-color: transparent; - box-shadow: none; } @include theme(static-#{$theme}); @@ -255,10 +255,9 @@ $static-themes: 'black' 'white' !default; @include iro.bem-modifier('outline') { border-color: fn.color(--disabled --outline-border); background-color: transparent; - box-shadow: none; } - @each $size in sm lg xl { + @each $size in $sizes { @include iro.bem-modifier($size) { padding-block: fn.dim(--#{$size} --pad-b); padding-inline: fn.dim(--#{$size} --pad-i); -- cgit v1.2.3-54-g00ecf