diff options
Diffstat (limited to 'tpl/objects')
-rw-r--r-- | tpl/objects/action-menu.pug | 35 | ||||
-rw-r--r-- | tpl/objects/menu.pug | 11 | ||||
-rw-r--r-- | tpl/objects/popover.pug | 12 | ||||
-rw-r--r-- | tpl/objects/side-nav.pug | 48 |
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 @@ | |||
1 | include icon.pug | ||
2 | include status-indicator.pug | ||
3 | |||
4 | mixin action-menu | ||
5 | .o-action-menu.u-p-static.t-up | ||
6 | block | ||
7 | |||
8 | mixin 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 | |||
23 | mixin action-menu-separator | ||
24 | .o-action-menu__separator | ||
25 | |||
26 | mixin 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 | ||
47 | mixin menu-separator | 47 | mixin menu-separator |
48 | .o-menu__separator | 48 | .o-menu__separator |
49 | |||
50 | mixin 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 @@ | |||
1 | mixin 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 @@ | |||
1 | include icon.pug | ||
2 | include status-indicator.pug | ||
3 | include action-button.pug | ||
4 | |||
5 | mixin 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 | |||
17 | mixin 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 | |||
43 | mixin side-nav-header | ||
44 | header.o-side-nav__header | ||
45 | block | ||
46 | |||
47 | mixin side-nav-separator | ||
48 | .o-side-nav__separator | ||