From 726b0fb550571b7702a500f61cbe63bbee847eab Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 30 Oct 2023 18:50:50 +0100 Subject: Badge --- src/_functions.scss | 4 ++++ src/objects/_badge.scss | 16 ++++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/_functions.scss b/src/_functions.scss index 6b14c6b..b956b67 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -139,3 +139,7 @@ @return $colors; } + +@function px-to-em($size, $base: iro.$vars-root-size) { + @return math.div($size, $base) * 1em; +} diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index eebf136..f24d2f8 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -4,22 +4,22 @@ @include iro.props-namespace('badge') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --50), + --pad-x: fn.px-to-em(4px), --pad-y: 0, --rounding: 3px, --fixed-100: 1em, --fixed-200: 1.5em, --200: ( - --pad-x: fn.global-dim(--size --75), - --pad-y: fn.global-dim(--size --25), + --pad-x: fn.px-to-em(6px), + --pad-y: fn.px-to-em(2px), ), --pill: ( - --pad-x: fn.global-dim(--size --115), + --pad-x: fn.px-to-em(9px), --200: ( - --pad-x: fn.global-dim(--size --125), + --pad-x: fn.px-to-em(10px), ), ), ), @@ -153,8 +153,12 @@ width: fn.dim(--fixed-200); } - @include iro.bem-modifier('small') { + @include iro.bem-modifier('sm') { font-size: fn.global-dim(--font-size --75); } + + @include iro.bem-modifier('xs') { + font-size: fn.global-dim(--font-size --50); + } } } -- cgit v1.2.3-70-g09d2