diff options
-rw-r--r-- | src/objects/_badge.scss | 39 | ||||
-rw-r--r-- | tpl/views/badge.pug | 4 |
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' | ||