diff options
-rw-r--r-- | src/objects/_menu.scss | 9 | ||||
-rw-r--r-- | tpl/objects/badge.pug | 3 | ||||
-rw-r--r-- | tpl/views/menu.pug | 14 |
3 files changed, 21 insertions, 5 deletions
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index cbd4194..b8bbb02 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -36,6 +36,10 @@ | |||
36 | --border: fn.global-color(--focus --fill), | 36 | --border: fn.global-color(--focus --fill), |
37 | --shadow: fn.global-color(--focus --shadow), | 37 | --shadow: fn.global-color(--focus --shadow), |
38 | ), | 38 | ), |
39 | --badge: ( | ||
40 | --bg: fn.global-color(--bg), | ||
41 | --label: fn.global-color(--fg-lo), | ||
42 | ) | ||
39 | ), | 43 | ), |
40 | ), | 44 | ), |
41 | ), 'colors'); | 45 | ), 'colors'); |
@@ -72,6 +76,11 @@ | |||
72 | @include iro.bem-multi('&:hover, &:active', 'is' 'selected') { | 76 | @include iro.bem-multi('&:hover, &:active', 'is' 'selected') { |
73 | background-color: fn.color(--item --hover --bg); | 77 | background-color: fn.color(--item --hover --bg); |
74 | color: fn.color(--item --hover --label); | 78 | color: fn.color(--item --hover --label); |
79 | |||
80 | @include iro.bem-elem('badge') { | ||
81 | background-color: fn.color(--item --badge --bg); | ||
82 | color: fn.color(--item --badge --label); | ||
83 | } | ||
75 | } | 84 | } |
76 | 85 | ||
77 | @include iro.bem-at-theme('keyboard') { | 86 | @include iro.bem-at-theme('keyboard') { |
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug index 1525130..441eb51 100644 --- a/tpl/objects/badge.pug +++ b/tpl/objects/badge.pug | |||
@@ -1,7 +1,8 @@ | |||
1 | mixin badge(variant) | 1 | mixin badge(variant) |
2 | - | 2 | - |
3 | let classes = { | 3 | let classes = { |
4 | 'o-badge': true | 4 | 'o-badge': true, |
5 | 'o-menu__badge': !!attributes.menu | ||
5 | } | 6 | } |
6 | if (attributes.size) { | 7 | if (attributes.size) { |
7 | classes['o-badge--' + attributes.size] = true | 8 | classes['o-badge--' + attributes.size] = true |
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug index 6d2cf10..4d7444f 100644 --- a/tpl/views/menu.pug +++ b/tpl/views/menu.pug | |||
@@ -19,10 +19,16 @@ mixin view-menu | |||
19 | 19 | ||
20 | +menu-item(header=true) | 20 | +menu-item(header=true) |
21 | = 'Libera' | 21 | = 'Libera' |
22 | +menu-item(icon='hash')= 'achannel' | 22 | +menu-item(icon='hash') |
23 | +menu-item(icon='hash')= 'kitsuneirc' | 23 | = 'achannel' |
24 | +menu-item(icon='green' iconIsStatus=true)= 'volpeon' | 24 | +badge('primary')(menu=true)= '12 ' |
25 | +menu-item(icon='red' iconIsStatus=true)= 'someone' | 25 | +menu-item(icon='hash') |
26 | = 'kitsuneirc' | ||
27 | +badge(menu=true)= '31 ' | ||
28 | +menu-item(icon='green' iconIsStatus=true) | ||
29 | = 'volpeon' | ||
30 | +menu-item(icon='red' iconIsStatus=true) | ||
31 | = 'someone' | ||
26 | 32 | ||
27 | +menu-separator | 33 | +menu-separator |
28 | 34 | ||