summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-26 21:47:55 +0200
committerVolpeon <git@volpeon.ink>2024-06-26 21:47:55 +0200
commit03bb4268367dcd3b2d327d3834e2047a56687a86 (patch)
tree83f6f6837fc909dd8cc5f8166c3c1b4ae78c85d9
parentUpdate (diff)
downloadiro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.gz
iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.bz2
iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.zip
Menus
Diffstat
-rw-r--r--src/.old/objects/_menu.scss124
-rw-r--r--src/_objects.scss5
-rw-r--r--src/objects/_action-menu.scss111
-rw-r--r--src/objects/_menu.scss127
-rw-r--r--src/objects/_popover.scss46
-rw-r--r--src/objects/_side-nav.scss122
-rw-r--r--tpl/index.pug11
-rw-r--r--tpl/objects/action-menu.pug35
-rw-r--r--tpl/objects/menu.pug11
-rw-r--r--tpl/objects/popover.pug12
-rw-r--r--tpl/objects/side-nav.pug48
-rw-r--r--tpl/views/action-menu.pug29
-rw-r--r--tpl/views/menu.pug8
-rw-r--r--tpl/views/popover.pug6
-rw-r--r--tpl/views/side-nav.pug26
15 files changed, 428 insertions, 293 deletions
diff --git a/src/.old/objects/_menu.scss b/src/.old/objects/_menu.scss
deleted file mode 100644
index 7db4896..0000000
--- a/src/.old/objects/_menu.scss
+++ /dev/null
@@ -1,124 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use './icon';
5
6@include iro.props-namespace('menu') {
7 @include iro.props-store((
8 --dims: (
9 --spacing: fn.global-dim(--size --50),
10 --header: (
11 --font-size: fn.global-dim(--font-size --50),
12 ),
13 --separator: fn.global-dim(--size --200),
14 --item: (
15 --pad-x: fn.global-dim(--size --150),
16 --pad-y: fn.global-dim(--size --100),
17 --rounding: 3px,
18 ),
19 ),
20 ), 'dims');
21
22 @include iro.props-store((
23 --colors: (
24 --header: (
25 --label: fn.global-color(--fg-hi),
26 ),
27 --item: (
28 --hover: (
29 --bg: fn.global-color(--obj-hi),
30 --label: fn.global-color(--fg-lo),
31 ),
32 --disabled: (
33 --label: fn.global-color(--fg-hi3),
34 ),
35 --key-focus: (
36 --border: fn.global-color(--focus --fill),
37 --shadow: fn.global-color(--focus --shadow),
38 ),
39 --badge: (
40 --bg: fn.global-color(--bg),
41 --label: fn.global-color(--fg-lo),
42 )
43 ),
44 ),
45 ), 'colors');
46
47 @include iro.bem-object(iro.props-namespace()) {
48 display: flex;
49 flex-direction: column;
50 gap: fn.dim(--spacing);
51
52 @include iro.bem-elem('header') {
53 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
54 color: fn.color(--header --label);
55 font-size: fn.dim(--header --font-size);
56 font-weight: 500;
57 letter-spacing: .5px;
58 text-transform: uppercase;
59
60 @include iro.bem-next-twin-elem {
61 margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
62 }
63 }
64
65 @include iro.bem-elem('item') {
66 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
67 border: 2px solid transparent;
68 border-radius: fn.dim(--item --rounding);
69 color: fn.color(--item --disabled --label);
70
71 &:link,
72 &:visited,
73 &:enabled {
74 color: currentColor;
75
76 @include iro.bem-multi('&:hover, &:active', 'is' 'selected') {
77 background-color: fn.color(--item --hover --bg);
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 }
84 }
85
86 @include iro.bem-at-theme('keyboard') {
87 &:focus {
88 border-radius: calc(fn.dim(--item --rounding) - 1px);
89 border-color: fn.color(--item --key-focus --border);
90 background-color: fn.color(--item --hover --bg);
91 box-shadow: fn.color(--item --key-focus --shadow);
92 color: fn.color(--item --hover --label);
93 }
94 }
95 }
96
97 @include iro.bem-next-elem('header') {
98 margin-top: calc(fn.dim(--separator) + fn.dim(--spacing));
99 }
100 }
101
102 @include iro.bem-elem('header') {
103 &:link,
104 &:visited,
105 &:enabled {
106 color: fn.color(--header --label);
107 }
108 }
109
110 @include iro.bem-elem('separator') {
111 height: fn.dim(--separator);
112 }
113
114 @include iro.bem-elem('icon-slot') {
115 display: flex;
116 justify-content: center;
117 width: fn.foreign-dim(--icon, --size);
118 }
119
120 @include iro.bem-modifier('pull') {
121 margin: calc(-1 * fn.dim(--item --pad-x));
122 }
123 }
124}
diff --git a/src/_objects.scss b/src/_objects.scss
index 0973920..0497fe0 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -14,8 +14,9 @@
14@use 'objects/status-indicator'; 14@use 'objects/status-indicator';
15@use 'objects/avatar'; 15@use 'objects/avatar';
16// @use 'objects/message'; 16// @use 'objects/message';
17@use 'objects/action-menu'; 17@use 'objects/side-nav';
18// @use 'objects/menu'; 18@use 'objects/popover';
19@use 'objects/menu';
19// @use 'objects/icon-nav'; 20// @use 'objects/icon-nav';
20// @use 'objects/backdrop'; 21// @use 'objects/backdrop';
21// @use 'objects/dialog'; 22// @use 'objects/dialog';
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
deleted file mode 100644
index 2a74834..0000000
--- a/src/objects/_action-menu.scss
+++ /dev/null
@@ -1,111 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --pad-i: 0,
8 --pad-b: fn.global-dim(--size --85),
9 --separator: fn.global-dim(--size --85),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 --item: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 ),
16 ),
17 --colors: (
18 --bg: fn.global-color(--bg-l2),
19 --text: fn.global-color(--text),
20 --shadow: 0 .2em .5em rgba(#000, .1),
21 --border: fn.global-color(--border),
22 --separator: fn.global-color(--border),
23 --icon: fn.global-color(--text-mute),
24 --item: (
25 --hover: (
26 --bg: fn.global-color(--border-mute),
27 --label: fn.global-color(--heading),
28 ),
29 --disabled: (
30 --label: fn.global-color(--text-disabled),
31 ),
32 --key-focus: (
33 --border: fn.global-color(--focus --border),
34 --outline: fn.global-color(--focus --outline),
35 ),
36 ),
37 ),
38 ));
39
40 @include iro.bem-object(iro.props-namespace()) {
41 position: absolute;
42 z-index: 10000;
43 inset-block-start: 0;
44 inset-inline-start: 0;
45 padding-block: fn.dim(--pad-b);
46 padding-inline: fn.dim(--pad-i);
47 transform: translate(var(--x), var(--y));
48 border: fn.dim(--border) solid fn.color(--border);
49 border-radius: fn.dim(--rounding);
50 background-clip: padding-box;
51 background-color: fn.color(--bg);
52 box-shadow: fn.color(--shadow);
53 color: fn.color(--text);
54
55 @include iro.bem-modifier('up-left') {
56 transform: translate(var(--x), calc(var(--y) - 100%));
57 }
58
59 @include iro.bem-modifier('up-right') {
60 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
61 }
62
63 @include iro.bem-modifier('down-right') {
64 transform: translate(calc(var(--x) - 100%), var(--y));
65 }
66
67 @include iro.bem-elem('item') {
68 display: block;
69 box-sizing: border-box;
70 inline-size: 100%;
71 padding-block: calc(fn.dim(--item --pad-b) - 2px);
72 padding-inline: calc(fn.dim(--item --pad-i) - 2px);
73 border: 2px solid transparent;
74 color: fn.color(--item --disabled --label);
75
76 &:link,
77 &:visited,
78 &:enabled {
79 color: currentColor;
80
81 &:hover,
82 &:active,
83 &:focus-visible {
84 background-color: fn.color(--item --hover --bg);
85 color: fn.color(--item --hover --label);
86 }
87
88 &:focus-visible {
89 border-color: fn.color(--item --key-focus --border);
90 }
91 }
92 }
93
94 @include iro.bem-elem('separator') {
95 block-size: 1px;
96 margin-block: fn.dim(--separator);
97 background-color: fn.color(--separator);
98 }
99
100 @include iro.bem-elem('slot') {
101 padding-block: fn.dim(--item --pad-b);
102 padding-inline: fn.dim(--item --pad-i);
103 }
104
105 @include iro.bem-elem('icon-slot') {
106 display: flex;
107 justify-content: center;
108 inline-size: fn.foreign-dim(--icon, --size);
109 }
110 }
111}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
new file mode 100644
index 0000000..091098d
--- /dev/null
+++ b/src/objects/_menu.scss
@@ -0,0 +1,127 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use './icon';
5
6@include iro.props-namespace('menu') {
7 @include iro.props-store((
8 --dims: (
9 --spacing: 0em,
10 --header: (
11 --font-size: fn.global-dim(--font-size --50),
12 ),
13 --separator: fn.global-dim(--size --85),
14 --item: (
15 --pad-i: fn.global-dim(--size --150),
16 --pad-b: fn.global-dim(--size --100),
17 --rounding: 0em,
18 ),
19
20 --key-focus: (
21 --border: fn.global-dim(--key-focus --border),
22 --border-offset: fn.global-dim(--key-focus --border-offset),
23 --outline: fn.global-dim(--key-focus --outline),
24 ),
25 ),
26 --colors: (
27 --separator: fn.global-color(--border),
28 --header: (
29 --label: fn.global-color(--heading),
30 ),
31 --item: (
32 --hover: (
33 --bg: fn.global-color(--border-mute),
34 --label: fn.global-color(--heading),
35 ),
36 --active: (
37 --bg: fn.global-color(--border),
38 --label: fn.global-color(--heading),
39 ),
40 --disabled: (
41 --label: fn.global-color(--text-disabled),
42 ),
43 --key-focus: (
44 --border: fn.global-color(--focus --border),
45 --outline: fn.global-color(--focus --outline),
46 ),
47 ),
48 ),
49 ));
50
51 @include iro.bem-object(iro.props-namespace()) {
52 display: flex;
53 flex-direction: column;
54 gap: fn.dim(--spacing);
55
56 @include iro.bem-elem('header') {
57 padding-block: fn.dim(--item --pad-b);
58 padding-inline: fn.dim(--item --pad-i);
59 color: fn.color(--header --label);
60 font-size: fn.dim(--header --font-size);
61 font-weight: 500;
62 letter-spacing: .5px;
63 text-transform: uppercase;
64
65 @include iro.bem-next-twin-elem {
66 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
67 }
68 }
69
70 @include iro.bem-elem('item') {
71 padding-block: calc(fn.dim(--item --pad-b) - 2px);
72 padding-inline: calc(fn.dim(--item --pad-i) - 2px);
73 border: 2px solid transparent;
74 border-radius: fn.dim(--item --rounding);
75 color: fn.color(--item --disabled --label);
76
77 &:link,
78 &:visited,
79 &:enabled {
80 color: currentColor;
81
82 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
83 background-color: fn.color(--item --hover --bg);
84 color: fn.color(--item --hover --label);
85 }
86
87 &:active {
88 background-color: fn.color(--item --active --bg);
89 color: fn.color(--item --active --label);
90 }
91 }
92
93 @include iro.bem-next-elem('header') {
94 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
95 }
96 }
97
98 @include iro.bem-elem('header') {
99 &:link,
100 &:visited,
101 &:enabled {
102 color: fn.color(--header --label);
103 }
104 }
105
106 @include iro.bem-elem('separator') {
107 block-size: 1px;
108 margin-block: fn.dim(--separator);
109 background-color: fn.color(--separator);
110 }
111
112 @include iro.bem-elem('slot') {
113 padding-block: fn.dim(--item --pad-b);
114 padding-inline: fn.dim(--item --pad-i);
115 }
116
117 @include iro.bem-elem('icon-slot') {
118 display: flex;
119 justify-content: center;
120 inline-size: fn.foreign-dim(--icon, --size);
121 }
122
123 @include iro.bem-modifier('pull') {
124 margin: calc(-1 * fn.dim(--item --pad-i));
125 }
126 }
127}
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
new file mode 100644
index 0000000..9d4b1c7
--- /dev/null
+++ b/src/objects/_popover.scss
@@ -0,0 +1,46 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('popover') {
5 @include iro.props-store((
6 --dims: (
7 --z-index: 10000,
8 --pad-i: 0,
9 --pad-b: fn.global-dim(--size --85),
10 --separator: fn.global-dim(--size --85),
11 --rounding: fn.global-dim(--rounding),
12 --border: fn.global-dim(--border --thin),
13 ),
14 --colors: (
15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--border),
17 --shadow: 0 .2em .5em rgba(#000, .1),
18 ),
19 ));
20
21 @include iro.bem-object(iro.props-namespace()) {
22 position: absolute;
23 z-index: fn.dim(--z-index);
24 inset-block-start: 0;
25 inset-inline-start: 0;
26 padding-block: fn.dim(--pad-b);
27 padding-inline: fn.dim(--pad-i);
28 transform: translate(var(--x), var(--y));
29 border: fn.dim(--border) solid fn.color(--border);
30 border-radius: fn.dim(--rounding);
31 background-color: fn.color(--bg);
32 box-shadow: fn.color(--shadow);
33
34 @include iro.bem-modifier('up-left') {
35 transform: translate(var(--x), calc(var(--y) - 100%));
36 }
37
38 @include iro.bem-modifier('up-right') {
39 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
40 }
41
42 @include iro.bem-modifier('down-right') {
43 transform: translate(calc(var(--x) - 100%), var(--y));
44 }
45 }
46}
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
new file mode 100644
index 0000000..8e4e131
--- /dev/null
+++ b/src/objects/_side-nav.scss
@@ -0,0 +1,122 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use './icon';
5
6@include iro.props-namespace('side-nav') {
7 @include iro.props-store((
8 --dims: (
9 --spacing: fn.global-dim(--size --50),
10 --header: (
11 --font-size: fn.global-dim(--font-size --50),
12 ),
13 --separator: fn.global-dim(--size --200),
14 --item: (
15 --pad-i: fn.global-dim(--size --150),
16 --pad-b: fn.global-dim(--size --100),
17 --rounding: fn.global-dim(--rounding),
18
19 --key-focus: (
20 --border: fn.global-dim(--key-focus --border),
21 --border-offset: fn.global-dim(--key-focus --border-offset),
22 --outline: fn.global-dim(--key-focus --outline),
23 ),
24 ),
25 ),
26 --colors: (
27 --header: (
28 --label: fn.global-color(--text-mute-more),
29 ),
30 --item: (
31 --hover: (
32 --bg: fn.global-color(--border-mute),
33 --label: fn.global-color(--heading),
34 ),
35 --active: (
36 --bg: fn.global-color(--border),
37 --label: fn.global-color(--heading),
38 ),
39 --disabled: (
40 --label: fn.global-color(--text-disabled),
41 ),
42 --key-focus: (
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ),
48 ));
49
50 @include iro.bem-object(iro.props-namespace()) {
51 display: flex;
52 flex-direction: column;
53 gap: fn.dim(--spacing);
54
55 @include iro.bem-elem('header') {
56 padding-block: fn.dim(--item --pad-b);
57 padding-inline: fn.dim(--item --pad-i);
58 color: fn.color(--header --label);
59 font-size: fn.dim(--header --font-size);
60 font-weight: 500;
61 letter-spacing: .5px;
62 text-transform: uppercase;
63
64 @include iro.bem-next-twin-elem {
65 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
66 }
67 }
68
69 @include iro.bem-elem('item') {
70 padding-block: fn.dim(--item --pad-b);
71 padding-inline: fn.dim(--item --pad-i);
72 margin: calc(-1 * fn.dim(--item --key-focus --border-offset));
73 border: fn.dim(--item --key-focus --border-offset) solid transparent;
74 border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset));
75 color: fn.color(--item --disabled --label);
76 background-clip: padding-box;
77
78 &:link,
79 &:visited,
80 &:enabled {
81 color: currentColor;
82
83 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
84 background-color: fn.color(--item --hover --bg);
85 color: fn.color(--item --hover --label);
86 }
87
88 &:active {
89 background-color: fn.color(--item --active --bg);
90 color: fn.color(--item --active --label);
91 }
92
93 &:focus-visible {
94 outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
95 box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
96 }
97 }
98
99 @include iro.bem-next-elem('header') {
100 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
101 }
102 }
103
104 @include iro.bem-elem('header') {
105 &:link,
106 &:visited,
107 &:enabled {
108 color: fn.color(--header --label);
109 }
110 }
111
112 @include iro.bem-elem('separator') {
113 block-size: fn.dim(--separator);
114 }
115
116 @include iro.bem-elem('icon-slot') {
117 display: flex;
118 justify-content: center;
119 inline-size: fn.foreign-dim(--icon, --size);
120 }
121 }
122}
diff --git a/tpl/index.pug b/tpl/index.pug
index a93418c..7b419b3 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -21,8 +21,9 @@ include objects/action-button.pug
21include objects/overflow-button.pug 21include objects/overflow-button.pug
22include objects/status-indicator.pug 22include objects/status-indicator.pug
23include objects/avatar.pug 23include objects/avatar.pug
24include objects/action-menu.pug 24include objects/popover.pug
25include objects/menu.pug 25include objects/menu.pug
26include objects/side-nav.pug
26include objects/icon-nav.pug 27include objects/icon-nav.pug
27include objects/emoji.pug 28include objects/emoji.pug
28include objects/backdrop.pug 29include objects/backdrop.pug
@@ -48,7 +49,7 @@ mixin user-card(name, hue)
48 const avaName = name.slice(0, 1) 49 const avaName = name.slice(0, 1)
49 50
50 .l-media.l-media--flush.l-media--75 51 .l-media.l-media--flush.l-media--75
51 +avatar(block=true size='50' class='l-media__block' hue=hue) 52 +avatar(block=true size='xs' class='l-media__block' hue=hue)
52 = avaName 53 = avaName
53 = name 54 = name
54 55
@@ -71,8 +72,10 @@ include views/action-button.pug
71include views/overflow-button.pug 72include views/overflow-button.pug
72include views/status-indicator.pug 73include views/status-indicator.pug
73include views/avatar.pug 74include views/avatar.pug
75include views/popover.pug
74include views/action-menu.pug 76include views/action-menu.pug
75include views/menu.pug 77include views/menu.pug
78include views/side-nav.pug
76include views/icon-nav.pug 79include views/icon-nav.pug
77include views/backdrop.pug 80include views/backdrop.pug
78include views/dialog.pug 81include views/dialog.pug
@@ -116,8 +119,10 @@ html
116 +view-overflow-button 119 +view-overflow-button
117 +view-status-indicator 120 +view-status-indicator
118 +view-avatar 121 +view-avatar
119 +view-action-menu 122 +view-side-nav
123 +view-popover
120 +view-menu 124 +view-menu
125 +view-action-menu
121 +view-icon-nav 126 +view-icon-nav
122 +view-backdrop 127 +view-backdrop
123 +view-dialog 128 +view-dialog
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
deleted file mode 100644
index be9d86d..0000000
--- a/tpl/objects/action-menu.pug
+++ /dev/null
@@ -1,35 +0,0 @@
1include icon.pug
2include status-indicator.pug
3
4mixin action-menu
5 .o-action-menu.u-p-static.t-up
6 block
7
8mixin action-menu-item
9 button.o-action-menu__item(disabled=attributes.disabled)
10 .l-media.l-media--flush
11 .l-media__block.o-action-menu__icon-slot
12 if attributes.icon
13 if attributes.iconIsStatus
14 +status-indicator(attributes.icon)(class='o-action-menu__icon')
15 else
16 +icon(attributes.icon)(class='o-action-menu__icon')
17 .l-media__block.l-media__block--main
18 block
19 .l-media__block.o-action-menu__icon-slot
20 if attributes.postIcon
21 +icon(attributes.postIcon)(class='o-action-menu__icon')
22
23mixin action-menu-separator
24 .o-action-menu__separator
25
26mixin action-menu-slot
27 -
28 let classes = {
29 'o-action-menu__slot ': true,
30 }
31 if (attributes.class) {
32 classes[attributes.class] = true;
33 }
34 div(class=classes)
35 block
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 1dd38ef..a8b20d7 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -46,3 +46,14 @@ mixin menu-header
46 46
47mixin menu-separator 47mixin menu-separator
48 .o-menu__separator 48 .o-menu__separator
49
50mixin menu-slot
51 -
52 let classes = {
53 'o-menu__slot ': true,
54 }
55 if (attributes.class) {
56 classes[attributes.class] = true;
57 }
58 div(class=classes)
59 block
diff --git a/tpl/objects/popover.pug b/tpl/objects/popover.pug
new file mode 100644
index 0000000..ba93a81
--- /dev/null
+++ b/tpl/objects/popover.pug
@@ -0,0 +1,12 @@
1mixin popover
2 -
3 let classes = {
4 'o-popover': true,
5 'u-p-static': true,
6 }
7 if (attributes.class) {
8 classes[attributes.class] = true;
9 }
10
11 div(class=classes, style=styles)
12 block
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
new file mode 100644
index 0000000..511f298
--- /dev/null
+++ b/tpl/objects/side-nav.pug
@@ -0,0 +1,48 @@
1include icon.pug
2include status-indicator.pug
3include action-button.pug
4
5mixin side-nav
6 -
7 let classes = {
8 'o-side-nav': true,
9 }
10 if (attributes.class) {
11 classes[attributes.class] = true;
12 }
13
14 div(class=classes)&attributes(attributes)
15 block
16
17mixin side-nav-item
18 -
19 let classes = {
20 'o-side-nav__item': true,
21 'l-media': true,
22 'l-media--75': true,
23 'o-side-nav__header': attributes.header,
24 'is-selected': attributes.selected,
25 }
26 if (attributes.class) {
27 classes[attributes.class] = true;
28 }
29
30 #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
31 if attributes.icon
32 .l-media__block.o-side-nav__icon-slot
33 if attributes.iconIsStatus
34 +status-indicator(attributes.icon)(class='o-side-nav__icon')
35 else
36 +icon(attributes.icon)(class='o-side-nav__icon')
37 .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass })
38 block
39 if attributes.postIcon
40 .l-media__block.o-side-nav__icon-slot
41 +icon(attributes.postIcon)(class='o-side-nav__icon')
42
43mixin side-nav-header
44 header.o-side-nav__header
45 block
46
47mixin side-nav-separator
48 .o-side-nav__separator
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug
index 3357caa..0546463 100644
--- a/tpl/views/action-menu.pug
+++ b/tpl/views/action-menu.pug
@@ -3,17 +3,18 @@ mixin view-action-menu
3 .c-box 3 .c-box
4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) 4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
5 +action-button(quiet=true selected=true)= 'Menu' 5 +action-button(quiet=true selected=true)= 'Menu'
6 +action-menu 6 +popover
7 +action-menu-slot(class='l-media l-media--flush') 7 +menu
8 +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') 8 +menu-slot(class='l-media l-media--flush')
9 .l-media__block.l-media__block--main 9 +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
10 strong.u-d-block= 'Volpeon' 10 .l-media__block.l-media__block--main
11 small.u-d-block= '@volpeon@mk.vulpes.one' 11 strong.u-d-block= 'Volpeon'
12 +action-menu-separator 12 small.u-d-block= '@volpeon@mk.vulpes.one'
13 +action-menu-item(icon='user')= 'View profile' 13 +menu-separator
14 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' 14 +menu-item(icon='user')= 'View profile'
15 +action-menu-separator 15 +menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
16 +action-menu-item(icon='trash' disabled=true)= 'Delete' 16 +menu-separator
17 +action-menu-item(icon='bookmark')= 'Bookmark' 17 +menu-item(icon='trash' disabled=true)= 'Delete'
18 +action-menu-item(icon='tags')= 'Tags' 18 +menu-item(icon='bookmark')= 'Bookmark'
19 +action-menu-item(postIcon='chevron-right')= 'More' 19 +menu-item(icon='tags')= 'Tags'
20 +menu-item(postIcon='chevron-right')= 'More'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 4d7444f..c61cb92 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -20,11 +20,11 @@ mixin view-menu
20 +menu-item(header=true) 20 +menu-item(header=true)
21 = 'Libera' 21 = 'Libera'
22 +menu-item(icon='hash') 22 +menu-item(icon='hash')
23 = 'achannel' 23 = 'achannel '
24 +badge('primary')(menu=true)= '12 ' 24 +badge('primary')(size='sm')= '12 '
25 +menu-item(icon='hash') 25 +menu-item(icon='hash')
26 = 'kitsuneirc' 26 = 'kitsuneirc '
27 +badge(menu=true)= '31 ' 27 +badge(size='sm')= '31 '
28 +menu-item(icon='green' iconIsStatus=true) 28 +menu-item(icon='green' iconIsStatus=true)
29 = 'volpeon' 29 = 'volpeon'
30 +menu-item(icon='red' iconIsStatus=true) 30 +menu-item(icon='red' iconIsStatus=true)
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug
new file mode 100644
index 0000000..b269596
--- /dev/null
+++ b/tpl/views/popover.pug
@@ -0,0 +1,6 @@
1mixin view-popover
2 +view('popover', 'Popover')
3 .c-box
4 +action-button(quiet=true selected=true)= 'Popover'
5 +popover
6 = loremIpsum
diff --git a/tpl/views/side-nav.pug b/tpl/views/side-nav.pug
new file mode 100644
index 0000000..30fbcbb
--- /dev/null
+++ b/tpl/views/side-nav.pug
@@ -0,0 +1,26 @@
1mixin view-side-nav
2 +view('side-nav', 'Side Nav')
3 .c-box
4 +side-nav
5 +side-nav-item= 'Section 1'
6 +side-nav-item(tag='div')= 'Section 2'
7 +side-nav-item= 'Section 3'
8
9 .c-box
10 +side-nav
11 +side-nav-item= 'Section 1'
12 +side-nav-item= 'Section 2'
13
14 +side-nav-header= 'Category 1'
15 +side-nav-item= 'Section 3'
16 +side-nav-item= 'Section 4'
17
18 +side-nav-header= 'Category 2'
19 +side-nav-item= 'Section 5'
20 +side-nav-item= 'Section 6'
21
22 .c-box
23 +side-nav
24 +side-nav-item(icon='hash')= 'Section 1'
25 +side-nav-item(tag='div' icon='bookmark')= 'Section 2'
26 +side-nav-item(icon='tags')= 'Section 3'
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 02:11:48 +0000