summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_badge.scss39
-rw-r--r--tpl/views/badge.pug4
2 files changed, 30 insertions, 13 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index fd0fdc7..4ecde17 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -42,6 +42,17 @@
42 --bg: fn.global-color(--accent --primary --solid --obj-lo), 42 --bg: fn.global-color(--accent --primary --solid --obj-lo),
43 ), 43 ),
44 ), 44 ),
45
46 --accent-quiet: (
47 --bg: fn.global-color(--accent --primary --quiet --bg),
48 --label: fn.global-color(--accent --primary --quiet --fg),
49 --hover: (
50 --bg: fn.global-color(--accent --primary --quiet --obj),
51 ),
52 --active: (
53 --bg: fn.global-color(--accent --primary --quiet --obj-lo),
54 ),
55 )
45 ), 56 ),
46 ), 'colors'); 57 ), 'colors');
47 58
@@ -66,19 +77,21 @@
66 } 77 }
67 } 78 }
68 79
69 @include iro.bem-modifier('accent') { 80 @each $variant in 'accent' 'accent-quiet' {
70 background-color: fn.color(--accent --bg); 81 @include iro.bem-modifier($variant) {
71 color: fn.color(--accent --label); 82 background-color: fn.color(--#{$variant} --bg);
72 83 color: fn.color(--#{$variant} --label);
73 &:link, 84
74 &:visited, 85 &:link,
75 &:enabled { 86 &:visited,
76 &:hover { 87 &:enabled {
77 background-color: fn.color(--accent --hover --bg); 88 &:hover {
78 } 89 background-color: fn.color(--#{$variant} --hover --bg);
79 90 }
80 &:active { 91
81 background-color: fn.color(--accent --active --bg); 92 &:active {
93 background-color: fn.color(--#{$variant} --active --bg);
94 }
82 } 95 }
83 } 96 }
84 } 97 }
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index ce41f25..e81a723 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -5,6 +5,10 @@ mixin view-badge
5 = ' ' 5 = ' '
6 +badge('accent')= 'new' 6 +badge('accent')= 'new'
7 = ' ' 7 = ' '
8 +badge('accent-quiet')= 'new'
9 = ' '
8 +badge(size=200)= '100' 10 +badge(size=200)= '100'
9 = ' ' 11 = ' '
10 +badge('accent')(size=200)= 'new' 12 +badge('accent')(size=200)= 'new'
13 = ' '
14 +badge('accent-quiet')(size=200)= 'new'