diff options
-rw-r--r-- | src/_objects.scss | 1 | ||||
-rw-r--r-- | src/objects/_badge.scss | 41 | ||||
-rw-r--r-- | tpl/index.pug | 11 | ||||
-rw-r--r-- | tpl/objects/badge.pug | 11 |
4 files changed, 64 insertions, 0 deletions
diff --git a/src/_objects.scss b/src/_objects.scss index 1b23d44..4049101 100644 --- a/src/_objects.scss +++ b/src/_objects.scss | |||
@@ -1,6 +1,7 @@ | |||
1 | @use 'objects/icon'; | 1 | @use 'objects/icon'; |
2 | @use 'objects/heading'; | 2 | @use 'objects/heading'; |
3 | @use 'objects/rule'; | 3 | @use 'objects/rule'; |
4 | @use 'objects/badge'; | ||
4 | @use 'objects/button'; | 5 | @use 'objects/button'; |
5 | @use 'objects/text-field'; | 6 | @use 'objects/text-field'; |
6 | @use 'objects/field-label'; | 7 | @use 'objects/field-label'; |
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss new file mode 100644 index 0000000..cb35d39 --- /dev/null +++ b/src/objects/_badge.scss | |||
@@ -0,0 +1,41 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('badge') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --pad-x: fn.global-dim(--size --75), | ||
8 | --pad-y: fn.global-dim(--size --50), | ||
9 | --rounding: 3px, | ||
10 | --font-size: fn.global-dim(--font-size --75), | ||
11 | ), | ||
12 | ), 'dims'); | ||
13 | |||
14 | @include iro.props-store(( | ||
15 | --colors: ( | ||
16 | --bg: fn.global-color(--obj-hi), | ||
17 | --label: fn.global-color(--fg-lo), | ||
18 | --accent: ( | ||
19 | --bg: fn.global-color(--accent --primary --bg), | ||
20 | --label: fn.global-color(--accent --primary --fg), | ||
21 | ) | ||
22 | ), | ||
23 | ), 'colors'); | ||
24 | |||
25 | @include iro.bem-object(iro.props-namespace()) { | ||
26 | display: inline-block; | ||
27 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
28 | border-radius: fn.dim(--rounding); | ||
29 | background-color: fn.color(--bg); | ||
30 | color: fn.color(--label); | ||
31 | font-size: fn.dim(--font-size); | ||
32 | font-weight: 500; | ||
33 | line-height: 1; | ||
34 | text-align: center; | ||
35 | |||
36 | @include iro.bem-modifier('accent') { | ||
37 | background-color: fn.color(--accent --bg); | ||
38 | color: fn.color(--accent --label); | ||
39 | } | ||
40 | } | ||
41 | } | ||
diff --git a/tpl/index.pug b/tpl/index.pug index ed538df..4926889 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -5,6 +5,7 @@ include layouts/container.pug | |||
5 | 5 | ||
6 | include objects/heading.pug | 6 | include objects/heading.pug |
7 | include objects/rule.pug | 7 | include objects/rule.pug |
8 | include objects/badge.pug | ||
8 | include objects/button.pug | 9 | include objects/button.pug |
9 | include objects/text-field.pug | 10 | include objects/text-field.pug |
10 | include objects/field-label.pug | 11 | include objects/field-label.pug |
@@ -98,6 +99,16 @@ html | |||
98 | 99 | ||
99 | //----------------------------------------- | 100 | //----------------------------------------- |
100 | 101 | ||
102 | +h1-heading('xl')= 'Badge' | ||
103 | +rule('medium') | ||
104 | |||
105 | +box | ||
106 | +badge= '100' | ||
107 | = ' ' | ||
108 | +badge('accent')= 'new' | ||
109 | |||
110 | //----------------------------------------- | ||
111 | |||
101 | +h1-heading('xl')= 'Button' | 112 | +h1-heading('xl')= 'Button' |
102 | +rule('medium') | 113 | +rule('medium') |
103 | 114 | ||
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug new file mode 100644 index 0000000..e0d8c44 --- /dev/null +++ b/tpl/objects/badge.pug | |||
@@ -0,0 +1,11 @@ | |||
1 | mixin badge(variant) | ||
2 | - | ||
3 | let classes = { | ||
4 | 'o-badge': true, | ||
5 | } | ||
6 | if (variant) { | ||
7 | classes['o-badge--' + variant] = true | ||
8 | } | ||
9 | |||
10 | div(class=classes) | ||
11 | block | ||