From 8f49d0cba610e4829e183e81e4126aba136dfccc Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 7 Feb 2022 18:37:09 +0100 Subject: Added action-menu --- tpl/objects/action-button.pug | 37 ++++++++++++++++++++----------------- tpl/objects/action-menu.pug | 25 +++++++++++++++++++++++++ tpl/objects/icon.pug | 15 ++++++++++----- tpl/objects/status-indicator.pug | 5 ++++- 4 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 tpl/objects/action-menu.pug (limited to 'tpl/objects') diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index 0afe1ea..eb524a2 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -1,21 +1,24 @@ include icon.pug mixin action-button - - - let classes = { - 'o-action-button': true, - 'o-action-button--block': attributes.block, - 'o-action-button--quiet': attributes.quiet, - 'is-disabled': attributes.disabled, - 'is-selected': attributes.selected - } - - let href = attributes.disabled ? null : '#'; + - + let classes = { + 'o-action-button': true, + 'o-action-button--block': attributes.block, + 'o-action-button--quiet': attributes.quiet, + 'is-disabled': attributes.disabled, + 'is-selected': attributes.selected + } + if (attributes.class) { + classes[attributes.class] = true; + } - a(class=classes href=href) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-action-button__label - block + let href = attributes.disabled ? null : '#'; + + a(class=classes href=href) + if attributes.icon + +icon(attributes.icon) + = ' ' + if block + span.o-action-button__label + block diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug new file mode 100644 index 0000000..85f93bf --- /dev/null +++ b/tpl/objects/action-menu.pug @@ -0,0 +1,25 @@ +include ../objects/action-button.pug +include icon.pug + +mixin action-menu + - + let classes = { + 'o-action-menu': true, + 'o-action-menu--static': true, + 't-raised': true + } + + div(class=classes) + block + +mixin action-menu-item + button.o-action-menu__item.o-action-menu__item--native + .l-card.l-card--flush + .l-card__block.o-action-menu__icon-slot + if attributes.icon + +icon(attributes.icon) + .l-card__block.l-card__block--main + block + +mixin action-menu-separator + .o-action-menu__separator diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug index 0e444f9..494abf6 100644 --- a/tpl/objects/icon.pug +++ b/tpl/objects/icon.pug @@ -1,7 +1,12 @@ mixin icon(id) - - - let href = 'icons.svg#' + id - let classes = attributes.class ? attributes.class : '' + - + let href = 'icons.svg#' + id + let classes = { + 'o-icon': true + } + if (attributes.class) { + classes[attributes.class] = true; + } - svg(class=['o-icon', classes] width='1em' height='1em') - use(href=href) + svg(class=classes width='1em' height='1em') + use(href=href) diff --git a/tpl/objects/status-indicator.pug b/tpl/objects/status-indicator.pug index 9b240e1..7ecb08a 100644 --- a/tpl/objects/status-indicator.pug +++ b/tpl/objects/status-indicator.pug @@ -4,5 +4,8 @@ mixin status-indicator(status) 'o-status-indicator': true, } classes['is-' + status] = true + if (attributes.class) { + classes[attributes.class] = true; + } - div(class=classes)&attributes(attributes) + div(class=classes) -- cgit v1.2.3-54-g00ecf