summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_objects.scss1
-rw-r--r--src/objects/_badge.scss41
2 files changed, 42 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}