From 69d753931c098bc18cd23e96af18f736a772f416 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 22 Jun 2024 23:00:16 +0200 Subject: Update --- src/objects/_button.scss | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) (limited to 'src/objects/_button.scss') diff --git a/src/objects/_button.scss b/src/objects/_button.scss index d3588f6..a823f17 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -47,11 +47,24 @@ $themes: primary accent positive negative warning; --line-height: 1.4, --pad-i: fn.global-dim(--size --225), --pad-b: fn.global-dim(--size --65), + --border: fn.global-dim(--border --medium), --rounding: 10em, + --font-size: fn.global-dim(--font-size --100), + --sm: ( + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --25), + --font-size: fn.global-dim(--font-size --75), + ), --lg: ( - --pad-i: fn.global-dim(--size --300), - --pad-b: fn.global-dim(--size --100), + --pad-i: fn.global-dim(--size --300), + --pad-b: fn.global-dim(--size --100), + --font-size: fn.global-dim(--font-size --150), + ), + --xl: ( + --pad-i: fn.global-dim(--size --400), + --pad-b: fn.global-dim(--size --150), + --font-size: fn.global-dim(--font-size --200), ), ), --colors: ( @@ -121,11 +134,12 @@ $themes: primary accent positive negative warning; display: inline-block; padding-block: fn.dim(--pad-b); padding-inline: fn.dim(--pad-i); - border: 2px solid transparent; + border: fn.dim(--border) solid transparent; border-radius: fn.dim(--rounding); border-color: fn.color(--disabled --bg); background-color: fn.color(--disabled --bg); color: fn.color(--disabled --label); + font-size: fn.dim(--font-size); font-weight: 500; line-height: fn.dim(--line-height); text-align: center; @@ -141,9 +155,12 @@ $themes: primary accent positive negative warning; box-shadow: none; } - @include iro.bem-modifier('lg') { - padding-block: fn.dim(--lg --pad-b); - padding-inline: fn.dim(--lg --pad-i); + @each $size in sm lg xl { + @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 button-variant(); @@ -160,6 +177,7 @@ $themes: primary accent positive negative warning; &:focus-visible { border-color: fn.color(--key-focus --border); background-color: fn.color(--key-focus --bg); + box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border); color: fn.color(--key-focus --label); } } -- cgit v1.2.3-54-g00ecf