summaryrefslogtreecommitdiffstats
path: root/tpl/objects
diff options
context:
space:
mode:
Diffstat (limited to 'tpl/objects')
-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
4 files changed, 71 insertions, 35 deletions
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