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' | ||
