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