diff options
-rw-r--r-- | src/objects/_badge.scss | 9 | ||||
-rw-r--r-- | tpl/objects/badge.pug | 5 | ||||
-rw-r--r-- | tpl/views/badge.pug | 4 |
3 files changed, 17 insertions, 1 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 2f250d2..ee9d5ac 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -10,6 +10,11 @@ | |||
10 | --font-size: fn.global-dim(--font-size --75), | 10 | --font-size: fn.global-dim(--font-size --75), |
11 | --fixed-100: 1em, | 11 | --fixed-100: 1em, |
12 | --fixed-200: 1.5em, | 12 | --fixed-200: 1.5em, |
13 | |||
14 | --200: ( | ||
15 | --pad-x: fn.global-dim(--size --125), | ||
16 | --pad-y: fn.global-dim(--size --50), | ||
17 | ) | ||
13 | ), | 18 | ), |
14 | ), 'dims'); | 19 | ), 'dims'); |
15 | 20 | ||
@@ -45,5 +50,9 @@ | |||
45 | @include iro.bem-modifier('fixed-200') { | 50 | @include iro.bem-modifier('fixed-200') { |
46 | width: fn.dim(--fixed-200); | 51 | width: fn.dim(--fixed-200); |
47 | } | 52 | } |
53 | |||
54 | @include iro.bem-modifier('200') { | ||
55 | padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); | ||
56 | } | ||
48 | } | 57 | } |
49 | } | 58 | } |
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug index e0d8c44..cc61366 100644 --- a/tpl/objects/badge.pug +++ b/tpl/objects/badge.pug | |||
@@ -1,7 +1,10 @@ | |||
1 | mixin badge(variant) | 1 | mixin badge(variant) |
2 | - | 2 | - |
3 | let classes = { | 3 | let classes = { |
4 | 'o-badge': true, | 4 | 'o-badge': true |
5 | } | ||
6 | if (attributes.size) { | ||
7 | classes['o-badge--' + attributes.size] = true | ||
5 | } | 8 | } |
6 | if (variant) { | 9 | if (variant) { |
7 | classes['o-badge--' + variant] = true | 10 | classes['o-badge--' + variant] = true |
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index 9b2c3e6..ce41f25 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug | |||
@@ -4,3 +4,7 @@ mixin view-badge | |||
4 | +badge= '100' | 4 | +badge= '100' |
5 | = ' ' | 5 | = ' ' |
6 | +badge('accent')= 'new' | 6 | +badge('accent')= 'new' |
7 | = ' ' | ||
8 | +badge(size=200)= '100' | ||
9 | = ' ' | ||
10 | +badge('accent')(size=200)= 'new' | ||