summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_objects.scss1
-rw-r--r--src/objects/_badge.scss41
-rw-r--r--tpl/index.pug11
-rw-r--r--tpl/objects/badge.pug11
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
6include objects/heading.pug 6include objects/heading.pug
7include objects/rule.pug 7include objects/rule.pug
8include objects/badge.pug
8include objects/button.pug 9include objects/button.pug
9include objects/text-field.pug 10include objects/text-field.pug
10include objects/field-label.pug 11include 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 @@
1mixin 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