From 0855207eda7258f84aebd8b6b35adc7ec7365192 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 23 Apr 2024 17:51:49 +0200 Subject: Button fixes to handle icons without margin adjustments --- src/objects/_action-button.scss | 14 ++++++++------ src/objects/_button.scss | 16 +++++++++------- src/objects/_icon.scss | 4 +--- 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index cfd859c..48ac2a6 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -4,9 +4,10 @@ @include iro.props-namespace('action-button') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --125), - --pad-y: fn.global-dim(--size --125), - --rounding: 3px, + --line-height: 1.4, + --pad-x: fn.global-dim(--size --100), + --pad-y: fn.global-dim(--size --85), + --rounding: 3px, ), ), 'dims'); @@ -80,7 +81,7 @@ border-radius: fn.dim(--rounding); background-color: fn.color(--disabled --bg); color: fn.color(--disabled --label); - line-height: 1; + line-height: fn.dim(--line-height); text-align: center; text-decoration: none; text-overflow: ellipsis; @@ -212,8 +213,9 @@ } @include iro.bem-modifier('round') { - padding-right: fn.dim(--pad-y); - padding-left: fn.dim(--pad-y); + 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/_button.scss b/src/objects/_button.scss index b830475..7cc24fa 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -43,13 +43,14 @@ @include iro.props-namespace('button') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --225), - --pad-y: fn.global-dim(--size --100), - --rounding: 10em, + --line-height: 1.4, + --pad-x: fn.global-dim(--size --225), + --pad-y: fn.global-dim(--size --65), + --rounding: 10em, --lg: ( --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --100), ), ), ), 'dims'); @@ -133,7 +134,7 @@ box-shadow: fn.color(--any --disabled --shadow); color: fn.color(--any --disabled --label); font-weight: 500; - line-height: 1; + line-height: fn.dim(--line-height); text-align: center; text-decoration: none; vertical-align: top; @@ -169,8 +170,9 @@ } @include iro.bem-modifier('round') { - padding-right: fn.dim(--pad-y); - padding-left: fn.dim(--pad-y); + 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/_icon.scss b/src/objects/_icon.scss index 0522d4b..5c4bfab 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -6,8 +6,7 @@ --dims: ( --stroke: 1.5px, --size: calc(1 / 14 * 16em), - --margin: calc((1em - fn.dim(--size, null)) * .5), - --valign: -.14em, + --valign: -.2em, ) ), 'dims'); @@ -15,7 +14,6 @@ display: inline; width: fn.dim(--size); height: fn.dim(--size); - margin: fn.dim(--margin); stroke-width: fn.dim(--stroke); stroke-linecap: round; stroke-linejoin: round; -- cgit v1.2.3-54-g00ecf