From 0cd81a322b92ede51d0da1f8227a3828f08eebdf Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Feb 2022 10:52:55 +0100 Subject: Improved action menu --- src/_base.scss | 10 ++++++++++ src/_utils.scss | 14 ++++++++++++++ src/index.scss | 2 ++ src/objects/_action-menu.scss | 4 ++++ tpl/index.pug | 6 ++++++ tpl/objects/action-menu.pug | 11 +++++++++++ tpl/objects/avatar.pug | 7 +++++-- 7 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 src/_utils.scss diff --git a/src/_base.scss b/src/_base.scss index 54df879..6e404fe 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -35,6 +35,16 @@ p { } } +strong { + color: fn.color(--fg-lo); + font-weight: bold; +} + +small { + color: fn.color(--fg-hi); + font-size: fn.dim(--font-size --sm); +} + ul, ol { margin: fn.dim(--paragraph --margin-top) 0 0; diff --git a/src/_utils.scss b/src/_utils.scss new file mode 100644 index 0000000..72c1f2f --- /dev/null +++ b/src/_utils.scss @@ -0,0 +1,14 @@ +@use 'iro-sass/src/index' as iro; + +@include iro.bem-utility('db') { + display: block; +} + +@include iro.bem-utility('dc') { + display: contents; +} + +@include iro.bem-utility('elp') { + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/index.scss b/src/index.scss index 5ceb11f..b4c437e 100644 --- a/src/index.scss +++ b/src/index.scss @@ -23,4 +23,6 @@ @use 'layouts/form'; +@use 'utils'; + @use 'apply-vars'; diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 7c2dc4f..e908fdf 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -100,6 +100,10 @@ } } + @include iro.bem-elem('slot') { + padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); + } + @include iro.bem-elem('icon-slot') { display: flex; justify-content: center; diff --git a/tpl/index.pug b/tpl/index.pug index b878944..4978cc0 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -446,6 +446,12 @@ html 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-card l-card--flush') + +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block') + .l-card__block.l-card__block--main + strong.u-db= 'Volpeon' + small.u-db= '@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 diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 0f690ce..55ceacb 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug @@ -30,3 +30,14 @@ mixin action-menu-item 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/avatar.pug b/tpl/objects/avatar.pug index 83c0f7c..16de7c5 100644 --- a/tpl/objects/avatar.pug +++ b/tpl/objects/avatar.pug @@ -4,9 +4,12 @@ mixin avatar - let classes = { 'o-avatar': true, - 'o-avatar--circle': attributes.circle + 'o-avatar--circle': attributes.circle, + 'u-db': attributes.block + } + if (attributes.class) { + classes[attributes.class] = true; } - if (attributes.size) { classes['o-avatar--' + attributes.size] = true; } -- cgit v1.2.3-70-g09d2