summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_menu.scss9
-rw-r--r--tpl/objects/badge.pug3
-rw-r--r--tpl/views/menu.pug14
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 @@
1mixin badge(variant) 1mixin 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