From fd5dace4fd42a7005c60970288c098e94d74d00b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 30 Oct 2023 15:02:23 +0100 Subject: Add pill version for badge --- src/objects/_badge.scss | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 7258cc0..17bb204 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -13,7 +13,15 @@ --200: ( --pad-x: fn.global-dim(--size --75), --pad-y: fn.global-dim(--size --25), - ) + ), + + --pill: ( + --pad-x: fn.global-dim(--size --115), + + --200: ( + --pad-x: fn.global-dim(--size --125), + ), + ), ), ), 'dims'); @@ -119,6 +127,21 @@ } } + @include iro.bem-modifier('pill') { + padding-right: fn.dim(--pill --pad-x); + padding-left: fn.dim(--pill --pad-x); + border-radius: 10em; + } + + @include iro.bem-modifier('200') { + padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); + + @include iro.bem-modifier('pill') { + padding-right: fn.dim(--pill --200 --pad-x); + padding-left: fn.dim(--pill --200 --pad-x); + } + } + @include iro.bem-modifier('fixed-100') { width: fn.dim(--fixed-100); } @@ -127,10 +150,6 @@ width: fn.dim(--fixed-200); } - @include iro.bem-modifier('200') { - padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); - } - @include iro.bem-modifier('small') { font-size: fn.global-dim(--font-size --75); } -- cgit v1.2.3-70-g09d2