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 +-- tpl/objects/action-button.pug | 6 ++- tpl/views/action-button.pug | 89 +++++++++++++++++++++++++++-------------- 5 files changed, 125 insertions(+), 47 deletions(-) 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); diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index c0d7582..976a646 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -6,9 +6,13 @@ mixin action-button 'o-action-button': true, 'u-d-block': attributes.block, 'o-action-button--quiet': attributes.quiet, - 'o-action-button--round': attributes.round, + 'o-action-button--pill': attributes.pill, + 'o-action-button--icon': !!attributes.icon && !block, 'is-selected': attributes.selected } + if (attributes.size) { + classes['o-action-button--' + attributes.size] = true + } if (attributes.class) { classes[attributes.class] = true; } diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug index 8fb4e58..2c94c68 100644 --- a/tpl/views/action-button.pug +++ b/tpl/views/action-button.pug @@ -1,31 +1,63 @@ mixin view-action-button +view('action-button', 'Action button') .c-box + +action-button(size='sm')= 'Idle' + = ' ' +action-button= 'Idle' = ' ' - +action-button(selected=true)= 'Selected' + +action-button(size='lg')= 'Idle' = ' ' - +action-button(disabled=true)= 'Disabled' + +action-button(size='xl')= 'Idle' + + .c-box + +action-button(icon='trash' size='sm') = ' ' - +action-button(selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(icon='trash')= 'Idle' + +action-button(icon='trash') + = ' ' + +action-button(icon='trash' size='lg') + = ' ' + +action-button(icon='trash' size='xl') + + .c-box + +action-button(pill=true size='sm')= 'Idle' = ' ' - +action-button(icon='trash' selected=true)= 'Selected' + +action-button(pill=true)= 'Idle' = ' ' - +action-button(icon='trash' disabled=true)= 'Disabled' + +action-button(pill=true size='lg')= 'Idle' + = ' ' + +action-button(pill=true size='xl')= 'Idle' + + .c-box + +action-button(pill=true icon='trash' size='sm') + = ' ' + +action-button(pill=true icon='trash') + = ' ' + +action-button(pill=true icon='trash' size='lg') + = ' ' + +action-button(pill=true icon='trash' size='xl') + + .c-box + +action-button= 'Label' + = ' ' + +action-button(icon='trash')= 'Label' = ' ' - +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' - br - br +action-button(icon='trash') + + .c-box + +action-button(quiet=true)= 'Label' + = ' ' + +action-button(quiet=true icon='trash')= 'Label' + = ' ' + +action-button(quiet=true icon='trash') + + .c-box + +action-button= 'Idle' = ' ' - +action-button(icon='trash' selected=true) + +action-button(selected=true)= 'Selected' = ' ' - +action-button(icon='trash' disabled=true) + +action-button(disabled=true)= 'Disabled' = ' ' - +action-button(icon='trash' selected=true disabled=true) + +action-button(selected=true disabled=true)= 'Selected + disabled' .c-box +action-button(quiet=true )= 'Idle' @@ -35,26 +67,21 @@ mixin view-action-button +action-button(quiet=true disabled=true)= 'Disabled' = ' ' +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(quiet=true icon='trash')= 'Idle' - = ' ' - +action-button(quiet=true icon='trash' selected=true)= 'Selected' - = ' ' - +action-button(quiet=true icon='trash' disabled=true)= 'Disabled' - = ' ' - +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(quiet=true icon='trash') + + .c-box + +action-button(pill=true)= 'Idle' = ' ' - +action-button(quiet=true icon='trash' selected=true) + +action-button(pill=true selected=true)= 'Selected' = ' ' - +action-button(quiet=true icon='trash' disabled=true) + +action-button(pill=true disabled=true)= 'Disabled' = ' ' - +action-button(quiet=true icon='trash' selected=true disabled=true) + +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' .c-box - +action-button= 'Idle' + +action-button(pill=true quiet=true)= 'Idle' = ' ' - +action-button(icon='trash') + +action-button(pill=true quiet=true selected=true)= 'Selected' + = ' ' + +action-button(pill=true quiet=true disabled=true)= 'Disabled' + = ' ' + +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' -- cgit v1.2.3-70-g09d2