From bdd534a2fea536f4143d29dd26138a4705c1f825 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Mar 2022 22:00:33 +0100 Subject: Improved dialog --- src/_layouts.scss | 2 + src/layouts/_card.scss | 9 ++++ src/layouts/_flex.scss | 23 +++++++++ src/layouts/_overflow.scss | 9 ++++ src/objects/_dialog.scss | 115 ++++++++++++++++++++++++++++----------------- src/objects/_lightbox.scss | 2 +- src/objects/_menu.scss | 18 +++---- src/objects/_rule.scss | 8 ++++ tpl/index.pug | 28 ++++++++--- tpl/objects/dialog.pug | 36 +++++++++++--- tpl/objects/menu.pug | 7 ++- 11 files changed, 192 insertions(+), 65 deletions(-) create mode 100644 src/layouts/_flex.scss create mode 100644 src/layouts/_overflow.scss diff --git a/src/_layouts.scss b/src/_layouts.scss index 99a003e..3a4c32b 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -2,3 +2,5 @@ @use 'layouts/container'; @use 'layouts/button-group'; @use 'layouts/form'; +@use 'layouts/flex'; +@use 'layouts/overflow'; diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index 3022da0..e6c379d 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -14,6 +14,10 @@ --200: ( --pad-x: fn.global-dim(--size --300), --pad-y: fn.global-dim(--size --150), + ), + --300: ( + --pad-x: fn.global-dim(--size --450), + --pad-y: fn.global-dim(--size --225), ) ) ), 'dims'); @@ -35,6 +39,11 @@ gap: fn.dim(--200 --pad-x); } + @include iro.bem-modifier('300') { + padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); + gap: fn.dim(--300 --pad-x); + } + @include iro.bem-modifier('flush') { padding: 0; } diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss new file mode 100644 index 0000000..e8cdbaa --- /dev/null +++ b/src/layouts/_flex.scss @@ -0,0 +1,23 @@ +@use 'iro-sass/src/index' as iro; + +@include iro.props-namespace('flex') { + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + + @include iro.bem-modifier('align-stretch') { + align-items: stretch; + } + + @include iro.bem-modifier('align-center') { + align-items: center; + } + + @include iro.bem-modifier('align-start') { + align-items: flex-start; + } + + @include iro.bem-modifier('align-end') { + align-items: flex-end; + } + } +} diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss new file mode 100644 index 0000000..d3af570 --- /dev/null +++ b/src/layouts/_overflow.scss @@ -0,0 +1,9 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('overflow') { + @include iro.bem-layout(iro.props-namespace()) { + overflow: auto; + scrollbar-color: fn.global-color(--obj-lo) transparent; + } +} diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index d5b6ed9..9c61e93 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -4,13 +4,15 @@ @include iro.props-namespace('dialog') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --300), - --width-sm: iro.fn-px-to-rem(500px), - --width-md: iro.fn-px-to-rem(800px), - --width-lg: iro.fn-px-to-rem(1100px), - --rounding: 3px, - --title-body-spacing: fn.global-dim(--size --200), + --pad-x: fn.global-dim(--size --300), + --pad-y: fn.global-dim(--size --300), + --width-sm: iro.fn-px-to-rem(500px), + --width-md: iro.fn-px-to-rem(800px), + --width-lg: iro.fn-px-to-rem(1100px), + --rounding: 3px, + --sidebar: ( + --pad-x: fn.global-dim(--size --150), + ) ), ), 'dims'); @@ -24,24 +26,40 @@ @include iro.props-store(( --colors: ( --shadow: 0 .2em .5em rgba(#000, .2), + --sidebar: ( + --bg: fn.global-color(--bg), + --border: fn.global-color(--obj), + ) ), ), 'colors'); + @include iro.props-store(( + --colors: ( + --sidebar: ( + --bg: fn.global-color(--bg-hi), + --border: fn.global-color(--bg-hi), + ), + ), + ), 'colors-dark'); + @include iro.bem-object(iro.props-namespace()) { - display: grid; - grid-template-rows: auto auto 1fr auto; - grid-template-areas: 'header' 'rule' 'body' 'footer'; - position: relative; - box-sizing: border-box; - width: 100%; - max-width: fn.dim(--width-md); - margin: 0 auto; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - overflow: hidden; - border-radius: fn.dim(--rounding); - background-color: fn.global-color(--bg); - box-shadow: fn.color(--shadow); - color: fn.global-color(--fg); + display: grid; + grid-template-rows: auto 1fr auto; + grid-template-columns: auto 1fr; + grid-template-areas: + 'sidebar header' + 'sidebar body' + 'sidebar footer'; + position: relative; + box-sizing: border-box; + width: 100%; + max-width: fn.dim(--width-md); + margin: 0 auto; + overflow: hidden; + border-radius: fn.dim(--rounding); + background-color: fn.global-color(--bg); + box-shadow: fn.color(--shadow); + color: fn.global-color(--fg); @include iro.bem-modifier('sm') { max-width: fn.dim(--width-sm); @@ -51,39 +69,52 @@ max-width: fn.dim(--width-lg); } - @include iro.bem-elem('header') { - grid-area: header; - margin-bottom: fn.dim(--title-body-spacing); + @include iro.bem-elem('sidebar') { + grid-area: sidebar; + padding: fn.dim(--pad-y) fn.dim(--sidebar --pad-x); + border-right: 1px solid fn.color(--sidebar --border); + background-color: fn.color(--sidebar --bg); } - @include iro.bem-elem('close-btn') { - position: absolute; - top: iro.fn-px-to-rem(12px); - right: iro.fn-px-to-rem(12px); - font-size: fn.global-dim(--font-size --150); - } + @include iro.bem-elem('header') { + grid-area: header; + margin: fn.dim(--pad-y) fn.dim(--pad-x) 0; - @include iro.bem-elem('rule') { - grid-area: rule; - margin: 0; + @include iro.bem-sibling-elem('body') { + &::before { + display: none; + } + } } - @include iro.bem-elem('title') { - margin-top: 0; + @include iro.bem-elem('body') { + grid-area: body; + min-height: 0; + margin: fn.dim(--pad-y) fn.dim(--pad-x); + + &::before { + content: ''; + width: fn.global-dim(--size --500); + height: fn.global-dim(--size --500); + float: right; + } } - @include iro.bem-elem('body') { - grid-area: body; - min-height: 0; - margin-top: fn.dim(--title-body-spacing); - overflow: auto; - scrollbar-color: fn.global-color(--obj-lo) transparent; + @include iro.bem-elem('close-btn') { + position: absolute; + top: fn.global-dim(--size --150); + right: fn.global-dim(--size --150); + font-size: fn.global-dim(--font-size --150); } @include iro.bem-elem('footer') { grid-area: footer; justify-content: flex-end; - margin-top: fn.dim(--pad-y); + margin: fn.dim(--pad-y) fn.dim(--pad-x); + } + + @include iro.bem-elem('title') { + margin-top: 0; } } } diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 6d83f01..f3addf7 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -10,7 +10,7 @@ --thumbnail: ( --size: fn.global-dim(--size --800), --spacing: fn.global-dim(--size --100), - --selected: 3px, //fn.global-dim(--border-width --medium), + --selected: 2px, //fn.global-dim(--border-width --medium), ), --button: ( --font-size: fn.global-dim(--font-size --200), diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index f03dbc1..40610e0 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -9,8 +9,9 @@ ), --separator: fn.global-dim(--size --150), --item: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --100), + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --100), + --rounding: 3px, ), ), ), 'dims'); @@ -52,12 +53,13 @@ } @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); + 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); + color: fn.color(--item --disabled --label); &:link, &:visited, diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index 777e864..693729a 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss @@ -45,6 +45,14 @@ margin-bottom: fn.dim(--margin-y); background-color: fn.color(--strong --bg); + @include iro.bem-modifier('vertical') { + width: 1px; + height: auto; + margin-top: 0; + margin-bottom: 0; + background-color: fn.color(--faint --bg); + } + @include iro.bem-modifier('medium') { height: fn.dim(--medium --border-width); background-color: fn.color(--medium --bg); diff --git a/tpl/index.pug b/tpl/index.pug index 623a513..98aec2e 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -533,16 +533,30 @@ html +box +backdrop +dialog('Lorem ipsum') - = loremIpsum + +slot('body') + = loremIpsum +box +backdrop - +dialog('Lorem ipsum') - p.u-mt-0= loremIpsum - p= loremIpsum - p= loremIpsum - p= loremIpsum - p= loremIpsum + +dialog('Lorem ipsum')(bodyClass='l-overflow') + +slot('body') + p.u-mt-0= loremIpsum + p= loremIpsum + p= loremIpsum + p= loremIpsum + p= loremIpsum + + +box + +backdrop + +dialog('Lorem ipsum')(noRule=true) + +slot('sidebar') + +menu(style={ 'min-width': '10em' }) + +menu-header= '#channel' + +menu-item(icon='bookmark', selected=true)= 'Bookmark' + +menu-item(icon='tags')= 'Tags' + +slot('body') + p.u-mt-0= loremIpsum + //----------------------------------------- diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 0ee52df..3a47b2f 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -4,15 +4,39 @@ include heading.pug include action-button.pug mixin dialog(title) - .o-dialog.t-raised + - const slots = {} + + mixin slot(key) + - slots[key] = block + + - + block ? block() : undefined + + let classes = { + 'o-dialog': true, + 't-raised': true, + 'o-dialog--split': !!slots.sidebar, + } + + let bodyClass = { + 'o-dialog__body': true + } + if (attributes.bodyClass) { + bodyClass[attributes.bodyClass] = true; + } + + div(class=classes) + if slots.sidebar + .o-dialog__sidebar + - slots.sidebar() header.o-dialog__header +div-heading('lg')(class='o-dialog__title') = title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') - +rule('medium')(class='o-dialog__rule') - section.o-dialog__body - block + section(class=bodyClass) + +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') + if slots.body + - slots.body() footer.o-dialog__footer.l-button-group +a-button(outline=true)= 'Cancel' = ' ' - +a-button(outline=true variant='primary')= 'Continue' + +a-button(variant='accent')= 'Continue' diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 0a654ce..84321d7 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -3,7 +3,12 @@ include status-indicator.pug include action-button.pug mixin menu - .o-menu + - + let classes = { + 'o-menu': true, + } + + div(class=classes)&attributes(attributes) block mixin menu-item -- cgit v1.2.3-70-g09d2