From 03bb4268367dcd3b2d327d3834e2047a56687a86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 21:47:55 +0200 Subject: Menus --- src/.old/objects/_menu.scss | 124 ----------------------------------------- src/_objects.scss | 5 +- src/objects/_action-menu.scss | 111 ------------------------------------ src/objects/_menu.scss | 127 ++++++++++++++++++++++++++++++++++++++++++ src/objects/_popover.scss | 46 +++++++++++++++ src/objects/_side-nav.scss | 122 ++++++++++++++++++++++++++++++++++++++++ tpl/index.pug | 11 +++- tpl/objects/action-menu.pug | 35 ------------ tpl/objects/menu.pug | 11 ++++ tpl/objects/popover.pug | 12 ++++ tpl/objects/side-nav.pug | 48 ++++++++++++++++ tpl/views/action-menu.pug | 29 +++++----- tpl/views/menu.pug | 8 +-- tpl/views/popover.pug | 6 ++ tpl/views/side-nav.pug | 26 +++++++++ 15 files changed, 428 insertions(+), 293 deletions(-) delete mode 100644 src/.old/objects/_menu.scss delete mode 100644 src/objects/_action-menu.scss create mode 100644 src/objects/_menu.scss create mode 100644 src/objects/_popover.scss create mode 100644 src/objects/_side-nav.scss delete mode 100644 tpl/objects/action-menu.pug create mode 100644 tpl/objects/popover.pug create mode 100644 tpl/objects/side-nav.pug create mode 100644 tpl/views/popover.pug create mode 100644 tpl/views/side-nav.pug 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 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@use './icon'; - -@include iro.props-namespace('menu') { - @include iro.props-store(( - --dims: ( - --spacing: fn.global-dim(--size --50), - --header: ( - --font-size: fn.global-dim(--font-size --50), - ), - --separator: fn.global-dim(--size --200), - --item: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --100), - --rounding: 3px, - ), - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --header: ( - --label: fn.global-color(--fg-hi), - ), - --item: ( - --hover: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg-lo), - ), - --disabled: ( - --label: fn.global-color(--fg-hi3), - ), - --key-focus: ( - --border: fn.global-color(--focus --fill), - --shadow: fn.global-color(--focus --shadow), - ), - --badge: ( - --bg: fn.global-color(--bg), - --label: fn.global-color(--fg-lo), - ) - ), - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: flex; - flex-direction: column; - gap: fn.dim(--spacing); - - @include iro.bem-elem('header') { - padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); - color: fn.color(--header --label); - font-size: fn.dim(--header --font-size); - font-weight: 500; - letter-spacing: .5px; - text-transform: uppercase; - - @include iro.bem-next-twin-elem { - margin-top: calc(fn.dim(--separator) + fn.dim(--spacing)); - } - } - - @include iro.bem-elem('item') { - padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); - border: 2px solid transparent; - border-radius: fn.dim(--item --rounding); - color: fn.color(--item --disabled --label); - - &:link, - &:visited, - &:enabled { - color: currentColor; - - @include iro.bem-multi('&:hover, &:active', 'is' 'selected') { - background-color: fn.color(--item --hover --bg); - color: fn.color(--item --hover --label); - - @include iro.bem-elem('badge') { - background-color: fn.color(--item --badge --bg); - color: fn.color(--item --badge --label); - } - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - border-radius: calc(fn.dim(--item --rounding) - 1px); - border-color: fn.color(--item --key-focus --border); - background-color: fn.color(--item --hover --bg); - box-shadow: fn.color(--item --key-focus --shadow); - color: fn.color(--item --hover --label); - } - } - } - - @include iro.bem-next-elem('header') { - margin-top: calc(fn.dim(--separator) + fn.dim(--spacing)); - } - } - - @include iro.bem-elem('header') { - &:link, - &:visited, - &:enabled { - color: fn.color(--header --label); - } - } - - @include iro.bem-elem('separator') { - height: fn.dim(--separator); - } - - @include iro.bem-elem('icon-slot') { - display: flex; - justify-content: center; - width: fn.foreign-dim(--icon, --size); - } - - @include iro.bem-modifier('pull') { - margin: calc(-1 * fn.dim(--item --pad-x)); - } - } -} 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 @@ @use 'objects/status-indicator'; @use 'objects/avatar'; // @use 'objects/message'; -@use 'objects/action-menu'; -// @use 'objects/menu'; +@use 'objects/side-nav'; +@use 'objects/popover'; +@use 'objects/menu'; // @use 'objects/icon-nav'; // @use 'objects/backdrop'; // @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 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('action-menu') { - @include iro.props-store(( - --dims: ( - --pad-i: 0, - --pad-b: fn.global-dim(--size --85), - --separator: fn.global-dim(--size --85), - --rounding: fn.global-dim(--rounding), - --border: fn.global-dim(--border --thin), - --item: ( - --pad-i: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --85), - ), - ), - --colors: ( - --bg: fn.global-color(--bg-l2), - --text: fn.global-color(--text), - --shadow: 0 .2em .5em rgba(#000, .1), - --border: fn.global-color(--border), - --separator: fn.global-color(--border), - --icon: fn.global-color(--text-mute), - --item: ( - --hover: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--heading), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - ), - )); - - @include iro.bem-object(iro.props-namespace()) { - position: absolute; - z-index: 10000; - inset-block-start: 0; - inset-inline-start: 0; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - transform: translate(var(--x), var(--y)); - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); - background-clip: padding-box; - background-color: fn.color(--bg); - box-shadow: fn.color(--shadow); - color: fn.color(--text); - - @include iro.bem-modifier('up-left') { - transform: translate(var(--x), calc(var(--y) - 100%)); - } - - @include iro.bem-modifier('up-right') { - transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); - } - - @include iro.bem-modifier('down-right') { - transform: translate(calc(var(--x) - 100%), var(--y)); - } - - @include iro.bem-elem('item') { - display: block; - box-sizing: border-box; - inline-size: 100%; - padding-block: calc(fn.dim(--item --pad-b) - 2px); - padding-inline: calc(fn.dim(--item --pad-i) - 2px); - border: 2px solid transparent; - color: fn.color(--item --disabled --label); - - &:link, - &:visited, - &:enabled { - color: currentColor; - - &:hover, - &:active, - &:focus-visible { - background-color: fn.color(--item --hover --bg); - color: fn.color(--item --hover --label); - } - - &:focus-visible { - border-color: fn.color(--item --key-focus --border); - } - } - } - - @include iro.bem-elem('separator') { - block-size: 1px; - margin-block: fn.dim(--separator); - background-color: fn.color(--separator); - } - - @include iro.bem-elem('slot') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - } - - @include iro.bem-elem('icon-slot') { - display: flex; - justify-content: center; - inline-size: fn.foreign-dim(--icon, --size); - } - } -} 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 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@use './icon'; + +@include iro.props-namespace('menu') { + @include iro.props-store(( + --dims: ( + --spacing: 0em, + --header: ( + --font-size: fn.global-dim(--font-size --50), + ), + --separator: fn.global-dim(--size --85), + --item: ( + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --100), + --rounding: 0em, + ), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + --border-offset: fn.global-dim(--key-focus --border-offset), + --outline: fn.global-dim(--key-focus --outline), + ), + ), + --colors: ( + --separator: fn.global-color(--border), + --header: ( + --label: fn.global-color(--heading), + ), + --item: ( + --hover: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--heading), + ), + --active: ( + --bg: fn.global-color(--border), + --label: fn.global-color(--heading), + ), + --disabled: ( + --label: fn.global-color(--text-disabled), + ), + --key-focus: ( + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: flex; + flex-direction: column; + gap: fn.dim(--spacing); + + @include iro.bem-elem('header') { + padding-block: fn.dim(--item --pad-b); + padding-inline: fn.dim(--item --pad-i); + color: fn.color(--header --label); + font-size: fn.dim(--header --font-size); + font-weight: 500; + letter-spacing: .5px; + text-transform: uppercase; + + @include iro.bem-next-twin-elem { + margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + } + } + + @include iro.bem-elem('item') { + padding-block: calc(fn.dim(--item --pad-b) - 2px); + padding-inline: calc(fn.dim(--item --pad-i) - 2px); + border: 2px solid transparent; + border-radius: fn.dim(--item --rounding); + color: fn.color(--item --disabled --label); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { + background-color: fn.color(--item --hover --bg); + color: fn.color(--item --hover --label); + } + + &:active { + background-color: fn.color(--item --active --bg); + color: fn.color(--item --active --label); + } + } + + @include iro.bem-next-elem('header') { + margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + } + } + + @include iro.bem-elem('header') { + &:link, + &:visited, + &:enabled { + color: fn.color(--header --label); + } + } + + @include iro.bem-elem('separator') { + block-size: 1px; + margin-block: fn.dim(--separator); + background-color: fn.color(--separator); + } + + @include iro.bem-elem('slot') { + padding-block: fn.dim(--item --pad-b); + padding-inline: fn.dim(--item --pad-i); + } + + @include iro.bem-elem('icon-slot') { + display: flex; + justify-content: center; + inline-size: fn.foreign-dim(--icon, --size); + } + + @include iro.bem-modifier('pull') { + margin: calc(-1 * fn.dim(--item --pad-i)); + } + } +} 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 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('popover') { + @include iro.props-store(( + --dims: ( + --z-index: 10000, + --pad-i: 0, + --pad-b: fn.global-dim(--size --85), + --separator: fn.global-dim(--size --85), + --rounding: fn.global-dim(--rounding), + --border: fn.global-dim(--border --thin), + ), + --colors: ( + --bg: fn.global-color(--bg-l2), + --border: fn.global-color(--border), + --shadow: 0 .2em .5em rgba(#000, .1), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + position: absolute; + z-index: fn.dim(--z-index); + inset-block-start: 0; + inset-inline-start: 0; + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + transform: translate(var(--x), var(--y)); + border: fn.dim(--border) solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--bg); + box-shadow: fn.color(--shadow); + + @include iro.bem-modifier('up-left') { + transform: translate(var(--x), calc(var(--y) - 100%)); + } + + @include iro.bem-modifier('up-right') { + transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); + } + + @include iro.bem-modifier('down-right') { + transform: translate(calc(var(--x) - 100%), var(--y)); + } + } +} 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 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@use './icon'; + +@include iro.props-namespace('side-nav') { + @include iro.props-store(( + --dims: ( + --spacing: fn.global-dim(--size --50), + --header: ( + --font-size: fn.global-dim(--font-size --50), + ), + --separator: fn.global-dim(--size --200), + --item: ( + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --100), + --rounding: fn.global-dim(--rounding), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + --border-offset: fn.global-dim(--key-focus --border-offset), + --outline: fn.global-dim(--key-focus --outline), + ), + ), + ), + --colors: ( + --header: ( + --label: fn.global-color(--text-mute-more), + ), + --item: ( + --hover: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--heading), + ), + --active: ( + --bg: fn.global-color(--border), + --label: fn.global-color(--heading), + ), + --disabled: ( + --label: fn.global-color(--text-disabled), + ), + --key-focus: ( + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: flex; + flex-direction: column; + gap: fn.dim(--spacing); + + @include iro.bem-elem('header') { + padding-block: fn.dim(--item --pad-b); + padding-inline: fn.dim(--item --pad-i); + color: fn.color(--header --label); + font-size: fn.dim(--header --font-size); + font-weight: 500; + letter-spacing: .5px; + text-transform: uppercase; + + @include iro.bem-next-twin-elem { + margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + } + } + + @include iro.bem-elem('item') { + padding-block: fn.dim(--item --pad-b); + padding-inline: fn.dim(--item --pad-i); + margin: calc(-1 * fn.dim(--item --key-focus --border-offset)); + border: fn.dim(--item --key-focus --border-offset) solid transparent; + border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset)); + color: fn.color(--item --disabled --label); + background-clip: padding-box; + + &:link, + &:visited, + &:enabled { + color: currentColor; + + @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { + background-color: fn.color(--item --hover --bg); + color: fn.color(--item --hover --label); + } + + &:active { + background-color: fn.color(--item --active --bg); + color: fn.color(--item --active --label); + } + + &:focus-visible { + outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); + } + } + + @include iro.bem-next-elem('header') { + margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + } + } + + @include iro.bem-elem('header') { + &:link, + &:visited, + &:enabled { + color: fn.color(--header --label); + } + } + + @include iro.bem-elem('separator') { + block-size: fn.dim(--separator); + } + + @include iro.bem-elem('icon-slot') { + display: flex; + justify-content: center; + inline-size: fn.foreign-dim(--icon, --size); + } + } +} 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 include objects/overflow-button.pug include objects/status-indicator.pug include objects/avatar.pug -include objects/action-menu.pug +include objects/popover.pug include objects/menu.pug +include objects/side-nav.pug include objects/icon-nav.pug include objects/emoji.pug include objects/backdrop.pug @@ -48,7 +49,7 @@ mixin user-card(name, hue) const avaName = name.slice(0, 1) .l-media.l-media--flush.l-media--75 - +avatar(block=true size='50' class='l-media__block' hue=hue) + +avatar(block=true size='xs' class='l-media__block' hue=hue) = avaName = name @@ -71,8 +72,10 @@ include views/action-button.pug include views/overflow-button.pug include views/status-indicator.pug include views/avatar.pug +include views/popover.pug include views/action-menu.pug include views/menu.pug +include views/side-nav.pug include views/icon-nav.pug include views/backdrop.pug include views/dialog.pug @@ -116,8 +119,10 @@ html +view-overflow-button +view-status-indicator +view-avatar - +view-action-menu + +view-side-nav + +view-popover +view-menu + +view-action-menu +view-icon-nav +view-backdrop +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 @@ -include icon.pug -include status-indicator.pug - -mixin action-menu - .o-action-menu.u-p-static.t-up - block - -mixin action-menu-item - button.o-action-menu__item(disabled=attributes.disabled) - .l-media.l-media--flush - .l-media__block.o-action-menu__icon-slot - if attributes.icon - if attributes.iconIsStatus - +status-indicator(attributes.icon)(class='o-action-menu__icon') - else - +icon(attributes.icon)(class='o-action-menu__icon') - .l-media__block.l-media__block--main - block - .l-media__block.o-action-menu__icon-slot - if attributes.postIcon - +icon(attributes.postIcon)(class='o-action-menu__icon') - -mixin action-menu-separator - .o-action-menu__separator - -mixin action-menu-slot - - - let classes = { - 'o-action-menu__slot ': true, - } - if (attributes.class) { - classes[attributes.class] = true; - } - div(class=classes) - 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 mixin menu-separator .o-menu__separator + +mixin menu-slot + - + let classes = { + 'o-menu__slot ': true, + } + if (attributes.class) { + classes[attributes.class] = true; + } + div(class=classes) + 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 @@ +mixin popover + - + let classes = { + 'o-popover': true, + 'u-p-static': true, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + div(class=classes, style=styles) + 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 @@ +include icon.pug +include status-indicator.pug +include action-button.pug + +mixin side-nav + - + let classes = { + 'o-side-nav': true, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + div(class=classes)&attributes(attributes) + block + +mixin side-nav-item + - + let classes = { + 'o-side-nav__item': true, + 'l-media': true, + 'l-media--75': true, + 'o-side-nav__header': attributes.header, + 'is-selected': attributes.selected, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) + if attributes.icon + .l-media__block.o-side-nav__icon-slot + if attributes.iconIsStatus + +status-indicator(attributes.icon)(class='o-side-nav__icon') + else + +icon(attributes.icon)(class='o-side-nav__icon') + .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass }) + block + if attributes.postIcon + .l-media__block.o-side-nav__icon-slot + +icon(attributes.postIcon)(class='o-side-nav__icon') + +mixin side-nav-header + header.o-side-nav__header + block + +mixin side-nav-separator + .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 .c-box div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) +action-button(quiet=true selected=true)= 'Menu' - +action-menu - +action-menu-slot(class='l-media l-media--flush') - +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') - .l-media__block.l-media__block--main - strong.u-d-block= 'Volpeon' - small.u-d-block= '@volpeon@mk.vulpes.one' - +action-menu-separator - +action-menu-item(icon='user')= 'View profile' - +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' - +action-menu-separator - +action-menu-item(icon='trash' disabled=true)= 'Delete' - +action-menu-item(icon='bookmark')= 'Bookmark' - +action-menu-item(icon='tags')= 'Tags' - +action-menu-item(postIcon='chevron-right')= 'More' + +popover + +menu + +menu-slot(class='l-media l-media--flush') + +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') + .l-media__block.l-media__block--main + strong.u-d-block= 'Volpeon' + small.u-d-block= '@volpeon@mk.vulpes.one' + +menu-separator + +menu-item(icon='user')= 'View profile' + +menu-item(icon='red' iconIsStatus=true)= 'Mark as away' + +menu-separator + +menu-item(icon='trash' disabled=true)= 'Delete' + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags')= 'Tags' + +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 +menu-item(header=true) = 'Libera' +menu-item(icon='hash') - = 'achannel' - +badge('primary')(menu=true)= '12 ' + = 'achannel ' + +badge('primary')(size='sm')= '12 ' +menu-item(icon='hash') - = 'kitsuneirc' - +badge(menu=true)= '31 ' + = 'kitsuneirc ' + +badge(size='sm')= '31 ' +menu-item(icon='green' iconIsStatus=true) = 'volpeon' +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 @@ +mixin view-popover + +view('popover', 'Popover') + .c-box + +action-button(quiet=true selected=true)= 'Popover' + +popover + = 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 @@ +mixin view-side-nav + +view('side-nav', 'Side Nav') + .c-box + +side-nav + +side-nav-item= 'Section 1' + +side-nav-item(tag='div')= 'Section 2' + +side-nav-item= 'Section 3' + + .c-box + +side-nav + +side-nav-item= 'Section 1' + +side-nav-item= 'Section 2' + + +side-nav-header= 'Category 1' + +side-nav-item= 'Section 3' + +side-nav-item= 'Section 4' + + +side-nav-header= 'Category 2' + +side-nav-item= 'Section 5' + +side-nav-item= 'Section 6' + + .c-box + +side-nav + +side-nav-item(icon='hash')= 'Section 1' + +side-nav-item(tag='div' icon='bookmark')= 'Section 2' + +side-nav-item(icon='tags')= 'Section 3' -- cgit v1.2.3-54-g00ecf