diff options
-rw-r--r-- | src/_functions.scss | 4 | ||||
-rw-r--r-- | src/objects/_badge.scss | 16 |
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 | } |