From 9e5f08e31b4d228da011fa7cd92240433116997f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 31 Mar 2022 09:51:12 +0200 Subject: Added icon nav component --- package.json | 2 +- src/_objects.scss | 1 + src/layouts/_flex.scss | 4 +++ src/objects/_action-button.scss | 38 ++++++++++++++++++----- src/objects/_icon-nav.scss | 68 +++++++++++++++++++++++++++++++++++++++++ src/objects/_menu.scss | 16 +++++----- tpl/index.pug | 3 ++ tpl/objects/icon-nav.pug | 29 ++++++++++++++++++ tpl/objects/menu.pug | 6 ++++ tpl/views/icon-nav.pug | 17 +++++++++++ 10 files changed, 168 insertions(+), 16 deletions(-) create mode 100644 src/objects/_icon-nav.scss create mode 100644 tpl/objects/icon-nav.pug create mode 100644 tpl/views/icon-nav.pug diff --git a/package.json b/package.json index 5f463b1..6b07da6 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 lock user chevron-left chevron-right hash x send smile public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg", "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", diff --git a/src/_objects.scss b/src/_objects.scss index e2551ad..3e09104 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -14,6 +14,7 @@ @use 'objects/bubble'; @use 'objects/action-menu'; @use 'objects/menu'; +@use 'objects/icon-nav'; @use 'objects/backdrop'; @use 'objects/dialog'; @use 'objects/lightbox'; diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss index e8cdbaa..d3f4f9c 100644 --- a/src/layouts/_flex.scss +++ b/src/layouts/_flex.scss @@ -19,5 +19,9 @@ @include iro.bem-modifier('align-end') { align-items: flex-end; } + + @include iro.bem-modifier('column') { + flex-direction: column; + } } } diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 2dcbb12..1cce94f 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -103,6 +103,13 @@ background-color: fn.color(--active --bg); color: fn.color(--active --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--hover --bg); + color: fn.color(--hover --label); + } + } } @include iro.bem-is('selected') { @@ -119,6 +126,13 @@ background-color: fn.color(--selected --bg); color: fn.color(--selected --hover --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--selected --bg); + color: fn.color(--selected --hover --label); + } + } } } @@ -149,6 +163,13 @@ box-shadow: none; color: fn.color(--quiet --active --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--quiet --hover --bg); + color: fn.color(--quiet --hover --label); + } + } } @include iro.bem-is('selected') { @@ -170,18 +191,21 @@ box-shadow: none; color: fn.color(--quiet --selected --hover --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--quiet --selected --bg); + color: fn.color(--quiet --selected --hover --label); + } + } } } } @include iro.bem-at-theme('keyboard') { - &:link, - &:visited, - &:enabled { - &:focus { - border-color: fn.color(--key-focus --border); - box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); - } + &:focus { + border-color: fn.color(--key-focus --border); + box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); } } diff --git a/src/objects/_icon-nav.scss b/src/objects/_icon-nav.scss new file mode 100644 index 0000000..25f4a57 --- /dev/null +++ b/src/objects/_icon-nav.scss @@ -0,0 +1,68 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('icon-nav') { + @include iro.props-store(( + --dims: ( + --spacing: fn.global-dim(--size --100), + --item: ( + --pad: fn.global-dim(--size --125), + ) + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --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), + ), + ), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: flex; + align-items: center; + gap: fn.dim(--spacing); + + @include iro.bem-elem('item') { + padding: fn.dim(--item --pad); + border: 2px solid transparent; + border-radius: 10em; + 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-at-theme('keyboard') { + &:focus { + 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-modifier('vertical') { + flex-direction: column; + } + } +} diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index f732ab7..fae3207 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -4,6 +4,7 @@ @include iro.props-namespace('menu') { @include iro.props-store(( --dims: ( + --spacing: fn.global-dim(--size --25), --header: ( --font-size: fn.global-dim(--font-size --50), ), @@ -30,8 +31,6 @@ --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), ), @@ -40,6 +39,10 @@ ), '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); @@ -50,9 +53,6 @@ } @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; border-radius: fn.dim(--item --rounding); @@ -70,11 +70,11 @@ @include iro.bem-at-theme('keyboard') { &:focus { - border-radius: 2px; + border-radius: calc(fn.dim(--item --rounding) - 1px); border-color: fn.color(--item --key-focus --border); - background-color: fn.color(--item --key-focus --bg); + background-color: fn.color(--item --hover --bg); box-shadow: fn.color(--item --key-focus --shadow); - color: fn.color(--item --key-focus --label); + color: fn.color(--item --hover --label); } } } diff --git a/tpl/index.pug b/tpl/index.pug index 4ed1ae3..6565589 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -21,6 +21,7 @@ include objects/status-indicator.pug include objects/avatar.pug include objects/action-menu.pug include objects/menu.pug +include objects/icon-nav.pug include objects/backdrop.pug include objects/dialog.pug include objects/lightbox.pug @@ -64,6 +65,7 @@ include views/status-indicator.pug include views/avatar.pug include views/action-menu.pug include views/menu.pug +include views/icon-nav.pug include views/backdrop.pug include views/dialog.pug include views/lightbox.pug @@ -101,6 +103,7 @@ html +view-avatar +view-action-menu +view-menu + +view-icon-nav +view-backdrop +view-dialog +view-lightbox diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug new file mode 100644 index 0000000..6f45bf6 --- /dev/null +++ b/tpl/objects/icon-nav.pug @@ -0,0 +1,29 @@ +include icon.pug +include status-indicator.pug +include action-button.pug + +mixin icon-nav + - + let classes = { + 'o-icon-nav': true, + 'o-icon-nav--vertical': attributes.vertical, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + div(class=classes)&attributes(attributes) + block + +mixin icon-nav-item(icon) + - + let classes = { + 'o-icon-nav__item': true, + 'is-selected': attributes.selected, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + button(class=classes)&attributes(attributes) + +icon(icon)(block=true) diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index c6e8223..f9d59b8 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -7,6 +7,9 @@ mixin menu let classes = { 'o-menu': true, } + if (attributes.class) { + classes[attributes.class] = true; + } div(class=classes)&attributes(attributes) block @@ -17,6 +20,9 @@ mixin menu-item 'o-menu__item': true, 'is-selected': attributes.selected, } + if (attributes.class) { + classes[attributes.class] = true; + } #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) .l-card.l-card--flush.l-card--75 diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug new file mode 100644 index 0000000..e71229d --- /dev/null +++ b/tpl/views/icon-nav.pug @@ -0,0 +1,17 @@ +mixin view-icon-nav + +view('icon-nav', 'Icon nav') + .c-box + +icon-nav + +icon-nav-item('hash') + +icon-nav-item('bookmark')(selected=true) + +icon-nav-item('tags') + +icon-nav-item('cog')(class='u-ml-auto') + +icon-nav-item('logout') + + .c-box + +icon-nav(vertical=true style={ height: '20em' }) + +icon-nav-item('hash') + +icon-nav-item('bookmark')(selected=true) + +icon-nav-item('tags') + +icon-nav-item('cog')(class='u-mt-auto') + +icon-nav-item('logout') -- cgit v1.2.3-54-g00ecf