From ac04c0bb55f51dd18daaf6813c47a0db8525180f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 28 Jan 2023 09:34:19 +0100 Subject: Added overflow button --- src/_objects.scss | 1 + src/objects/_emoji.scss | 2 +- src/objects/_overflow-button.scss | 132 ++++++++++++++++++++++++++++++++++++++ tpl/index.pug | 3 + tpl/objects/action-button.pug | 4 +- tpl/objects/overflow-button.pug | 22 +++++++ tpl/views/overflow-button.pug | 10 +++ 7 files changed, 170 insertions(+), 4 deletions(-) create mode 100644 src/objects/_overflow-button.scss create mode 100644 tpl/objects/overflow-button.pug create mode 100644 tpl/views/overflow-button.pug diff --git a/src/_objects.scss b/src/_objects.scss index f054c53..faa45bd 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -10,6 +10,7 @@ @use 'objects/checkbox'; @use 'objects/switch'; @use 'objects/action-button'; +@use 'objects/overflow-button'; @use 'objects/status-indicator'; @use 'objects/avatar'; @use 'objects/bubble'; diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index 0f878c3..37e1ccc 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss @@ -23,7 +23,7 @@ height: fn.dim(--size); margin: calc(-.5 * fn.dim(--size)) calc(-1 * fn.dim(--pad)); padding: fn.dim(--pad); - vertical-align: .2em; + vertical-align: .1em; @include iro.bem-modifier('zoomable') { transition: transform .2s ease, background-color .2s ease; diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss new file mode 100644 index 0000000..4cea74a --- /dev/null +++ b/src/objects/_overflow-button.scss @@ -0,0 +1,132 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('overflow-button') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --125), + --pad-y: fn.global-dim(--size --125), + --spacing: fn.global-dim(--size --50), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --label: fn.global-color(--fg), + + --hover: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + ), + --active: ( + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-lo), + ), + --selected: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg), + + --hover: ( + --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: inline-block; + color: fn.color(--disabled --label); + + @include iro.bem-elem('inside') { + display: inline-block; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border: 1px solid transparent; + border-radius: 100em; + line-height: 1; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + } + + @include iro.bem-elem('outside') { + display: inline-block; + margin-left: fn.dim(--spacing); + } + + &:link, + &:visited, + &:enabled { + @include iro.bem-elem('inside') { + color: fn.color(--label); + } + + &:hover { + @include iro.bem-elem('inside') { + background-color: fn.color(--hover --bg); + color: fn.color(--hover --label); + } + } + + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--active --bg); + color: fn.color(--active --label); + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-elem('inside') { + background-color: fn.color(--hover --bg); + color: fn.color(--hover --label); + } + } + } + } + + @include iro.bem-is('selected') { + &:link, + &:visited, + &:enabled { + @include iro.bem-elem('inside') { + background-color: fn.color(--selected --bg); + color: fn.color(--selected --label); + } + + &:hover, + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--selected --bg); + color: fn.color(--selected --hover --label); + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-elem('inside') { + background-color: fn.color(--selected --bg); + color: fn.color(--selected --hover --label); + } + } + } + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-elem('inside') { + 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/tpl/index.pug b/tpl/index.pug index 1f4f522..15929cf 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -17,6 +17,7 @@ include objects/checkbox.pug include objects/switch.pug include objects/form.pug include objects/action-button.pug +include objects/overflow-button.pug include objects/status-indicator.pug include objects/avatar.pug include objects/action-menu.pug @@ -65,6 +66,7 @@ include views/checkbox.pug include views/switch.pug include views/form.pug include views/action-button.pug +include views/overflow-button.pug include views/status-indicator.pug include views/avatar.pug include views/action-menu.pug @@ -108,6 +110,7 @@ html +view-switch +view-form +view-action-button + +view-overflow-button +view-status-indicator +view-avatar +view-action-menu diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index f99d789..e11e4a5 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -19,6 +19,4 @@ mixin action-button if attributes.icon +icon(attributes.icon)(block=!block) = ' ' - if block - span.o-action-button__label - block + block diff --git a/tpl/objects/overflow-button.pug b/tpl/objects/overflow-button.pug new file mode 100644 index 0000000..f52f12b --- /dev/null +++ b/tpl/objects/overflow-button.pug @@ -0,0 +1,22 @@ +include icon.pug + +mixin overflow-button + - + let classes = { + 'o-overflow-button': true, + 'u-d-block': attributes.block, + 'is-selected': attributes.selected + } + if (attributes.class) { + classes[attributes.class] = true; + } + + let href = attributes.disabled ? null : '#'; + + a(class=classes href=href) + .o-overflow-button__inside + if attributes.icon + +icon(attributes.icon)(block=!block) + = ' ' + .o-overflow-button__outside + block diff --git a/tpl/views/overflow-button.pug b/tpl/views/overflow-button.pug new file mode 100644 index 0000000..112aaab --- /dev/null +++ b/tpl/views/overflow-button.pug @@ -0,0 +1,10 @@ +mixin view-overflow-button + +view('overflow-button', 'Overflow button') + .c-box + +overflow-button(icon='trash')= '123' + = ' ' + +overflow-button(icon='trash' selected=true)= 'Delete' + = ' ' + +overflow-button(icon='trash' disabled=true)= 'Disabled' + = ' ' + +overflow-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' -- cgit v1.2.3-54-g00ecf