diff options
-rw-r--r-- | src/objects/_menu.scss | 12 | ||||
-rw-r--r-- | tpl/views/menu.pug | 10 |
2 files changed, 18 insertions, 4 deletions
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 2e525da..3a2d057 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -4,11 +4,11 @@ | |||
4 | @include iro.props-namespace('menu') { | 4 | @include iro.props-namespace('menu') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --spacing: fn.global-dim(--size --25), | 7 | --spacing: fn.global-dim(--size --50), |
8 | --header: ( | 8 | --header: ( |
9 | --font-size: fn.global-dim(--font-size --50), | 9 | --font-size: fn.global-dim(--font-size --50), |
10 | ), | 10 | ), |
11 | --separator: fn.global-dim(--size --150), | 11 | --separator: fn.global-dim(--size --200), |
12 | --item: ( | 12 | --item: ( |
13 | --pad-x: fn.global-dim(--size --150), | 13 | --pad-x: fn.global-dim(--size --150), |
14 | --pad-y: fn.global-dim(--size --100), | 14 | --pad-y: fn.global-dim(--size --100), |
@@ -50,6 +50,10 @@ | |||
50 | font-weight: 500; | 50 | font-weight: 500; |
51 | letter-spacing: .5px; | 51 | letter-spacing: .5px; |
52 | text-transform: uppercase; | 52 | text-transform: uppercase; |
53 | |||
54 | @include iro.bem-next-twin-elem { | ||
55 | margin-top: calc(fn.dim(--separator) + fn.dim(--spacing)); | ||
56 | } | ||
53 | } | 57 | } |
54 | 58 | ||
55 | @include iro.bem-elem('item') { | 59 | @include iro.bem-elem('item') { |
@@ -78,6 +82,10 @@ | |||
78 | } | 82 | } |
79 | } | 83 | } |
80 | } | 84 | } |
85 | |||
86 | @include iro.bem-next-elem('header') { | ||
87 | margin-top: calc(fn.dim(--separator) + fn.dim(--spacing)); | ||
88 | } | ||
81 | } | 89 | } |
82 | 90 | ||
83 | @include iro.bem-elem('separator') { | 91 | @include iro.bem-elem('separator') { |
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug index a255999..5d0ec7c 100644 --- a/tpl/views/menu.pug +++ b/tpl/views/menu.pug | |||
@@ -6,7 +6,7 @@ mixin view-menu | |||
6 | +menu-header= 'Category 1' | 6 | +menu-header= 'Category 1' |
7 | +menu-item= 'Mark as away' | 7 | +menu-item= 'Mark as away' |
8 | +menu-item= 'Delete' | 8 | +menu-item= 'Delete' |
9 | +menu-separator | 9 | |
10 | +menu-header= 'Category 2' | 10 | +menu-header= 'Category 2' |
11 | +menu-item(icon='bookmark')= 'Bookmark' | 11 | +menu-item(icon='bookmark')= 'Bookmark' |
12 | +menu-item(icon='tags')= 'Tags' | 12 | +menu-item(icon='tags')= 'Tags' |
@@ -14,17 +14,23 @@ mixin view-menu | |||
14 | +menu | 14 | +menu |
15 | +menu-item | 15 | +menu-item |
16 | strong= 'Bouncer' | 16 | strong= 'Bouncer' |
17 | |||
17 | +menu-separator | 18 | +menu-separator |
19 | |||
18 | +menu-item | 20 | +menu-item |
19 | strong= 'Libera' | 21 | strong= 'Libera' |
20 | +menu-item(icon='hash')= 'achannel' | 22 | +menu-item(icon='hash')= 'achannel' |
21 | +menu-item(icon='hash')= 'kitsuneirc' | 23 | +menu-item(icon='hash')= 'kitsuneirc' |
22 | +menu-item(icon='green' iconIsStatus=true)= 'volpeon' | 24 | +menu-item(icon='green' iconIsStatus=true)= 'volpeon' |
23 | +menu-item(icon='red' iconIsStatus=true)= 'someone' | 25 | +menu-item(icon='red' iconIsStatus=true)= 'someone' |
26 | |||
24 | +menu-separator | 27 | +menu-separator |
28 | |||
25 | +menu-item | 29 | +menu-item |
26 | strong= 'Ergo Testnet' | 30 | strong= 'Ergo Testnet' |
31 | |||
27 | +menu-separator | 32 | +menu-separator |
33 | |||
28 | +menu-item | 34 | +menu-item |
29 | strong= 'NixNet' | 35 | strong= 'NixNet' |
30 | 36 | ||
@@ -34,7 +40,7 @@ mixin view-menu | |||
34 | +user-card('volpeon', 0) | 40 | +user-card('volpeon', 0) |
35 | +menu-item | 41 | +menu-item |
36 | +user-card('curiousfox', 90) | 42 | +user-card('curiousfox', 90) |
37 | +menu-separator | 43 | |
38 | +menu-header= 'Moderators' | 44 | +menu-header= 'Moderators' |
39 | +menu-item | 45 | +menu-item |
40 | +user-card('user3567', 135) | 46 | +user-card('user3567', 135) |