diff options
-rw-r--r-- | src/objects/_badge.scss | 21 | ||||
-rw-r--r-- | tpl/views/badge.pug | 20 |
2 files changed, 33 insertions, 8 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index f24d2f8..0f73382 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -14,6 +14,10 @@ | |||
14 | --pad-x: fn.px-to-em(6px), | 14 | --pad-x: fn.px-to-em(6px), |
15 | --pad-y: fn.px-to-em(2px), | 15 | --pad-y: fn.px-to-em(2px), |
16 | ), | 16 | ), |
17 | --300: ( | ||
18 | --pad-x: fn.px-to-em(10px), | ||
19 | --pad-y: fn.px-to-em(6px), | ||
20 | ), | ||
17 | 21 | ||
18 | --pill: ( | 22 | --pill: ( |
19 | --pad-x: fn.px-to-em(9px), | 23 | --pad-x: fn.px-to-em(9px), |
@@ -21,6 +25,9 @@ | |||
21 | --200: ( | 25 | --200: ( |
22 | --pad-x: fn.px-to-em(10px), | 26 | --pad-x: fn.px-to-em(10px), |
23 | ), | 27 | ), |
28 | --300: ( | ||
29 | --pad-x: fn.px-to-em(16px), | ||
30 | ), | ||
24 | ), | 31 | ), |
25 | ), | 32 | ), |
26 | ), 'dims'); | 33 | ), 'dims'); |
@@ -136,12 +143,14 @@ | |||
136 | border-radius: 10em; | 143 | border-radius: 10em; |
137 | } | 144 | } |
138 | 145 | ||
139 | @include iro.bem-modifier('200') { | 146 | @each $size in '200' '300' { |
140 | padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); | 147 | @include iro.bem-modifier($size) { |
141 | 148 | padding: fn.dim(--#{$size} --pad-y) fn.dim(--#{$size} --pad-x); | |
142 | @include iro.bem-modifier('pill') { | 149 | |
143 | padding-right: fn.dim(--pill --200 --pad-x); | 150 | @include iro.bem-modifier('pill') { |
144 | padding-left: fn.dim(--pill --200 --pad-x); | 151 | padding-right: fn.dim(--pill --#{$size} --pad-x); |
152 | padding-left: fn.dim(--pill --#{$size} --pad-x); | ||
153 | } | ||
145 | } | 154 | } |
146 | } | 155 | } |
147 | 156 | ||
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index d4ca4b0..a3c4eed 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug | |||
@@ -9,13 +9,21 @@ mixin view-badge | |||
9 | = ' ' | 9 | = ' ' |
10 | +badge('accent-quiet')= 'new' | 10 | +badge('accent-quiet')= 'new' |
11 | = ' ' | 11 | = ' ' |
12 | +badge(size=200 href='#')= '100' | 12 | +badge(size=200 href='#')= '200' |
13 | = ' ' | 13 | = ' ' |
14 | +badge('primary')(size=200 href='#')= 'new' | 14 | +badge('primary')(size=200 href='#')= 'new' |
15 | = ' ' | 15 | = ' ' |
16 | +badge('accent')(size=200 href='#')= 'new' | 16 | +badge('accent')(size=200 href='#')= 'new' |
17 | = ' ' | 17 | = ' ' |
18 | +badge('accent-quiet')(size=200 href='#')= 'new' | 18 | +badge('accent-quiet')(size=200 href='#')= 'new' |
19 | = ' ' | ||
20 | +badge(size=300 href='#')= '300' | ||
21 | = ' ' | ||
22 | +badge('primary')(size=300 href='#')= 'new' | ||
23 | = ' ' | ||
24 | +badge('accent')(size=300 href='#')= 'new' | ||
25 | = ' ' | ||
26 | +badge('accent-quiet')(size=300 href='#')= 'new' | ||
19 | 27 | ||
20 | .c-box | 28 | .c-box |
21 | +badge(pill=true)= '100' | 29 | +badge(pill=true)= '100' |
@@ -26,10 +34,18 @@ mixin view-badge | |||
26 | = ' ' | 34 | = ' ' |
27 | +badge('accent-quiet')(pill=true)= 'new' | 35 | +badge('accent-quiet')(pill=true)= 'new' |
28 | = ' ' | 36 | = ' ' |
29 | +badge(size=200, pill=true)= '100' | 37 | +badge(size=200, pill=true)= '200' |
30 | = ' ' | 38 | = ' ' |
31 | +badge('primary')(size=200, pill=true)= 'new' | 39 | +badge('primary')(size=200, pill=true)= 'new' |
32 | = ' ' | 40 | = ' ' |
33 | +badge('accent')(size=200, pill=true)= 'new' | 41 | +badge('accent')(size=200, pill=true)= 'new' |
34 | = ' ' | 42 | = ' ' |
35 | +badge('accent-quiet')(size=200, pill=true)= 'new' | 43 | +badge('accent-quiet')(size=200, pill=true)= 'new' |
44 | = ' ' | ||
45 | +badge(size=300, pill=true)= '300' | ||
46 | = ' ' | ||
47 | +badge('primary')(size=300, pill=true)= 'new' | ||
48 | = ' ' | ||
49 | +badge('accent')(size=300, pill=true)= 'new' | ||
50 | = ' ' | ||
51 | +badge('accent-quiet')(size=300, pill=true)= 'new' | ||