summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_badge.scss29
-rw-r--r--tpl/objects/badge.pug3
-rw-r--r--tpl/views/badge.pug17
3 files changed, 43 insertions, 6 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 7258cc0..17bb204 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -13,7 +13,15 @@
13 --200: ( 13 --200: (
14 --pad-x: fn.global-dim(--size --75), 14 --pad-x: fn.global-dim(--size --75),
15 --pad-y: fn.global-dim(--size --25), 15 --pad-y: fn.global-dim(--size --25),
16 ) 16 ),
17
18 --pill: (
19 --pad-x: fn.global-dim(--size --115),
20
21 --200: (
22 --pad-x: fn.global-dim(--size --125),
23 ),
24 ),
17 ), 25 ),
18 ), 'dims'); 26 ), 'dims');
19 27
@@ -119,6 +127,21 @@
119 } 127 }
120 } 128 }
121 129
130 @include iro.bem-modifier('pill') {
131 padding-right: fn.dim(--pill --pad-x);
132 padding-left: fn.dim(--pill --pad-x);
133 border-radius: 10em;
134 }
135
136 @include iro.bem-modifier('200') {
137 padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x);
138
139 @include iro.bem-modifier('pill') {
140 padding-right: fn.dim(--pill --200 --pad-x);
141 padding-left: fn.dim(--pill --200 --pad-x);
142 }
143 }
144
122 @include iro.bem-modifier('fixed-100') { 145 @include iro.bem-modifier('fixed-100') {
123 width: fn.dim(--fixed-100); 146 width: fn.dim(--fixed-100);
124 } 147 }
@@ -127,10 +150,6 @@
127 width: fn.dim(--fixed-200); 150 width: fn.dim(--fixed-200);
128 } 151 }
129 152
130 @include iro.bem-modifier('200') {
131 padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x);
132 }
133
134 @include iro.bem-modifier('small') { 153 @include iro.bem-modifier('small') {
135 font-size: fn.global-dim(--font-size --75); 154 font-size: fn.global-dim(--font-size --75);
136 } 155 }
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index 441eb51..53e972c 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -2,7 +2,8 @@ mixin badge(variant)
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-badge': true, 4 'o-badge': true,
5 'o-menu__badge': !!attributes.menu 5 'o-badge--pill': !!attributes.pill,
6 'o-menu__badge': !!attributes.menu,
6 } 7 }
7 if (attributes.size) { 8 if (attributes.size) {
8 classes['o-badge--' + attributes.size] = true 9 classes['o-badge--' + attributes.size] = true
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index 9979049..4c44af2 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -16,3 +16,20 @@ mixin view-badge
16 +badge('accent')(size=200)= 'new' 16 +badge('accent')(size=200)= 'new'
17 = ' ' 17 = ' '
18 +badge('accent-quiet')(size=200)= 'new' 18 +badge('accent-quiet')(size=200)= 'new'
19
20 .c-box
21 +badge(pill=true)= '100'
22 = ' '
23 +badge('primary')(pill=true)= 'new'
24 = ' '
25 +badge('accent')(pill=true)= 'new'
26 = ' '
27 +badge('accent-quiet')(pill=true)= 'new'
28 = ' '
29 +badge(size=200, pill=true)= '100'
30 = ' '
31 +badge('primary')(size=200, pill=true)= 'new'
32 = ' '
33 +badge('accent')(size=200, pill=true)= 'new'
34 = ' '
35 +badge('accent-quiet')(size=200, pill=true)= 'new'