From 9fb3237247f637b55a7da6bbf2847c17c2fb2ad0 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Feb 2022 18:05:15 +0100 Subject: Added menu --- package.json | 2 +- src/_functions.scss | 1 + src/index.scss | 1 + src/objects/_action-menu.scss | 30 +++----------- src/objects/_heading.scss | 23 ++++++----- src/objects/_menu.scss | 92 +++++++++++++++++++++++++++++++++++++++++++ tpl/index.pug | 57 +++++++++++++++++++++++++++ tpl/objects/action-menu.pug | 3 +- tpl/objects/menu.pug | 28 +++++++++++++ 9 files changed, 201 insertions(+), 36 deletions(-) create mode 100644 src/objects/_menu.scss create mode 100644 tpl/objects/menu.pug diff --git a/package.json b/package.json index 0a8a966..e89abdb 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", - "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash public/icons.svg", "build:style": "sass --load-path=node_modules src/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", diff --git a/src/_functions.scss b/src/_functions.scss index f15ed0c..9425413 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -43,6 +43,7 @@ font-style: font-prop($font, $overrides, $key, --style), line-height: font-prop($font, $overrides, $key, --line-height), text-transform: font-prop($font, $overrides, $key, --transform), + letter-spacing: font-prop($font, $overrides, $key, --spacing), font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), ); diff --git a/src/index.scss b/src/index.scss index b4c437e..44fba76 100644 --- a/src/index.scss +++ b/src/index.scss @@ -20,6 +20,7 @@ @use 'objects/status-indicator'; @use 'objects/avatar'; @use 'objects/action-menu'; +@use 'objects/menu'; @use 'layouts/form'; diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 2c922f8..ff88774 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -43,8 +43,6 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - @include iro.bem-composed-of('action-button' 'object'); - position: absolute; z-index: 10000; top: fn.dim(--y); @@ -72,12 +70,6 @@ transform: translate(-100%, 0); } - @include iro.bem-elem('separator') { - height: 1px; - margin: fn.dim(--separator) 0; - background-color: fn.color(--separator); - } - @include iro.bem-elem('item') { display: block; box-sizing: border-box; @@ -91,18 +83,10 @@ &:enabled { color: currentColor; - @include iro.bem-elem('icon') { - color: fn.color(--icon); - } - &:hover, &:active { background-color: fn.color(--item --hover --bg); color: fn.color(--item --hover --label); - - @include iro.bem-elem('icon') { - color: currentColor; - } } @include iro.bem-at-theme('keyboard') { @@ -112,15 +96,17 @@ background-color: fn.color(--item --key-focus --bg); box-shadow: fn.color(--item --key-focus --shadow); color: fn.color(--item --key-focus --label); - - @include iro.bem-elem('icon') { - color: currentColor; - } } } } } + @include iro.bem-elem('separator') { + height: 1px; + margin: fn.dim(--separator) 0; + background-color: fn.color(--separator); + } + @include iro.bem-elem('slot') { padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); } @@ -130,9 +116,5 @@ justify-content: center; width: 1em; } - - @include iro.bem-elem('icon') { - color: fn.color(--item --disabled --label); - } } } diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index cd91c61..c1feb5e 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -51,20 +51,25 @@ } @include iro.bem-modifier('sm') { - @include fn.set-font(--standard, (--line-height: null)); + @include fn.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --md), + --weight: 500 + )); - color: fn.color(--strong); - font-size: fn.global-dim(--font-size --md); - font-weight: 500; + color: fn.color(--strong); } @include iro.bem-modifier('xs') { - @include fn.set-font(--standard, (--line-height: null)); + @include fn.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --xs), + --weight: 500, + --transform: uppercase, + --spacing: .5px + )); - color: fn.color(--light); - font-size: fn.global-dim(--font-size --xs); - font-weight: 500; - text-transform: uppercase; + color: fn.color(--light); } } } diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss new file mode 100644 index 0000000..91ef0a5 --- /dev/null +++ b/src/objects/_menu.scss @@ -0,0 +1,92 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('menu') { + @include iro.props-store(( + --dims: ( + --separator: .6rem, + --item: ( + --pad-x: .8rem, + --pad-y: .4rem, + ), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --header: ( + --label: fn.global-color(--fg-hi2), + ), + --item: ( + --hover: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + ), + --disabled: ( + --label: fn.global-color(--fg-hi3), + ), + --key-focus: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), + ), + ), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-elem('header') { + padding: + calc(1.5 * fn.dim(--item --pad-y)) + fn.dim(--item --pad-x) + calc(.5 * fn.dim(--item --pad-y)); + color: fn.color(--header --label); + font-size: fn.global-dim(--font-size --xs); + font-weight: 500; + letter-spacing: .5px; + text-transform: uppercase; + } + + @include iro.bem-elem('item') { + display: block; + box-sizing: border-box; + width: 100%; + padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); + border: 2px solid transparent; + color: fn.color(--item --disabled --label); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + &:hover, + &:active { + background-color: fn.color(--item --hover --bg); + color: fn.color(--item --hover --label); + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + border-radius: 2px; + border-color: fn.color(--item --key-focus --border); + background-color: fn.color(--item --key-focus --bg); + box-shadow: fn.color(--item --key-focus --shadow); + color: fn.color(--item --key-focus --label); + } + } + } + } + + @include iro.bem-elem('separator') { + height: fn.dim(--separator); + } + + @include iro.bem-elem('icon-slot') { + display: flex; + justify-content: center; + width: 1em; + } + } +} diff --git a/tpl/index.pug b/tpl/index.pug index 4978cc0..fa9bd85 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -16,11 +16,21 @@ include objects/action-button.pug include objects/status-indicator.pug include objects/avatar.pug include objects/action-menu.pug +include objects/menu.pug mixin box +container(padX=true padY=true inPage=true theme="raised") block +mixin user-card(name, hue) + - + const avaName = name.slice(0, 1) + + .l-card.l-card--flush + +avatar(block=true size='xs' class='l-card__block' hue=hue) + = avaName + = name + doctype html html @@ -460,3 +470,50 @@ html +action-menu-item(icon='tags')= 'Tags' +action-menu-item(postIcon='chevron-right')= 'More' + //----------------------------------------- + + +h1-heading(level='xl')= 'Menu' + +rule(level='medium') + + +box + div(style={ display: 'flex', gap: '2rem' }) + +menu + +menu-header= 'Category 1' + +menu-item= 'Mark as away' + +menu-item= 'Delete' + +menu-separator + +menu-header= 'Category 2' + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags')= 'Tags' + + +menu + +menu-item + strong= 'Bouncer' + +menu-separator + +menu-item + strong= 'Libera' + +menu-item(icon='hash')= 'achannel' + +menu-item(icon='hash')= 'kitsuneirc' + +menu-item(icon='green' iconIsStatus=true)= 'volpeon' + +menu-item(icon='red' iconIsStatus=true)= 'someone' + +menu-separator + +menu-item + strong= 'Ergo Testnet' + +menu-separator + +menu-item + strong= 'NixNet' + + +menu + +menu-header= 'Operators' + +menu-item + +user-card('volpeon', 0) + +menu-item + +user-card('curiousfox', 90) + +menu-separator + +menu-header= 'Moderators' + +menu-item + +user-card('user3567', 135) + +menu-item + +user-card('johndoe', 270) + + diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 55ceacb..8c1a584 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug @@ -1,4 +1,3 @@ -include action-button.pug include icon.pug include status-indicator.pug @@ -14,7 +13,7 @@ mixin action-menu block mixin action-menu-item - button.o-action-menu__item.o-action-menu__item--native(disabled=attributes.disabled) + button.o-action-menu__item(disabled=attributes.disabled) .l-card.l-card--flush .l-card__block.o-action-menu__icon-slot if attributes.icon diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug new file mode 100644 index 0000000..7c9c07e --- /dev/null +++ b/tpl/objects/menu.pug @@ -0,0 +1,28 @@ +include icon.pug +include status-indicator.pug + +mixin menu + .o-menu + block + +mixin menu-item + button.o-menu__item(disabled=attributes.disabled) + .l-card.l-card--flush + if attributes.icon + .l-card__block.o-menu__icon-slot + if attributes.iconIsStatus + +status-indicator(attributes.icon)(class='o-menu__icon') + else + +icon(attributes.icon)(class='o-menu__icon') + .l-card__block.l-card__block--main + block + if attributes.postIcon + .l-card__block.o-menu__icon-slot + +icon(attributes.postIcon)(class='o-menu__icon') + +mixin menu-header + header.o-menu__header + block + +mixin menu-separator + .o-menu__separator -- cgit v1.2.3-54-g00ecf