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 | ||
