summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-10-30 18:50:50 +0100
committerVolpeon <git@volpeon.ink>2023-10-30 18:50:50 +0100
commit726b0fb550571b7702a500f61cbe63bbee847eab (patch)
treed19f2e693c6c6f55b11b565b1a845adce5228058 /src
parentFix badge + action button combo (diff)
downloadiro-design-726b0fb550571b7702a500f61cbe63bbee847eab.tar.gz
iro-design-726b0fb550571b7702a500f61cbe63bbee847eab.tar.bz2
iro-design-726b0fb550571b7702a500f61cbe63bbee847eab.zip
Badge
Diffstat (limited to 'src')
-rw-r--r--src/_functions.scss4
-rw-r--r--src/objects/_badge.scss16
2 files changed, 14 insertions, 6 deletions
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 @@
139 139
140 @return $colors; 140 @return $colors;
141} 141}
142
143@function px-to-em($size, $base: iro.$vars-root-size) {
144 @return math.div($size, $base) * 1em;
145}
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 @@
4@include iro.props-namespace('badge') { 4@include iro.props-namespace('badge') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --50), 7 --pad-x: fn.px-to-em(4px),
8 --pad-y: 0, 8 --pad-y: 0,
9 --rounding: 3px, 9 --rounding: 3px,
10 --fixed-100: 1em, 10 --fixed-100: 1em,
11 --fixed-200: 1.5em, 11 --fixed-200: 1.5em,
12 12
13 --200: ( 13 --200: (
14 --pad-x: fn.global-dim(--size --75), 14 --pad-x: fn.px-to-em(6px),
15 --pad-y: fn.global-dim(--size --25), 15 --pad-y: fn.px-to-em(2px),
16 ), 16 ),
17 17
18 --pill: ( 18 --pill: (
19 --pad-x: fn.global-dim(--size --115), 19 --pad-x: fn.px-to-em(9px),
20 20
21 --200: ( 21 --200: (
22 --pad-x: fn.global-dim(--size --125), 22 --pad-x: fn.px-to-em(10px),
23 ), 23 ),
24 ), 24 ),
25 ), 25 ),
@@ -153,8 +153,12 @@
153 width: fn.dim(--fixed-200); 153 width: fn.dim(--fixed-200);
154 } 154 }
155 155
156 @include iro.bem-modifier('small') { 156 @include iro.bem-modifier('sm') {
157 font-size: fn.global-dim(--font-size --75); 157 font-size: fn.global-dim(--font-size --75);
158 } 158 }
159
160 @include iro.bem-modifier('xs') {
161 font-size: fn.global-dim(--font-size --50);
162 }
159 } 163 }
160} 164}