From 67722515b4882458547bcbe8ac13e60ba3790a56 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 11 Feb 2022 17:34:57 +0100 Subject: Added backdrop and dialog --- src/_utils.scss | 8 ++++ src/index.scss | 2 + src/objects/_action-menu.scss | 10 +--- src/objects/_backdrop.scss | 36 ++++++++++++++ src/objects/_dialog.scss | 57 +++++++++++++++++++++++ tpl/index.pug | 106 +++++++++++++++++++++++++----------------- tpl/objects/action-menu.pug | 9 +--- tpl/objects/backdrop.pug | 3 ++ tpl/objects/dialog.pug | 16 +++++++ tpl/objects/heading.pug | 42 ++++++++--------- tpl/objects/rule.pug | 8 ++-- 11 files changed, 213 insertions(+), 84 deletions(-) create mode 100644 src/objects/_backdrop.scss create mode 100644 src/objects/_dialog.scss create mode 100644 tpl/objects/backdrop.pug create mode 100644 tpl/objects/dialog.pug diff --git a/src/_utils.scss b/src/_utils.scss index 72c1f2f..7525f34 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -12,3 +12,11 @@ overflow: hidden; text-overflow: ellipsis; } + +@include iro.bem-utility('ps') { + position: static; +} + +@include iro.bem-utility('pr') { + position: relative; +} diff --git a/src/index.scss b/src/index.scss index 44fba76..3796c18 100644 --- a/src/index.scss +++ b/src/index.scss @@ -21,6 +21,8 @@ @use 'objects/avatar'; @use 'objects/action-menu'; @use 'objects/menu'; +@use 'objects/backdrop'; +@use 'objects/dialog'; @use 'layouts/form'; diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 1e95b39..3c10604 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -4,8 +4,6 @@ @include iro.props-namespace('action-menu') { @include iro.props-store(( --dims: ( - --x: 0, - --y: 0, --pad-x: 0, --pad-y: .3rem, --separator: .3rem, @@ -45,8 +43,8 @@ @include iro.bem-object(iro.props-namespace()) { position: absolute; z-index: 10000; - top: fn.dim(--y); - left: fn.dim(--x); + top: var(--y); + left: var(--x); padding: fn.dim(--pad-y) fn.dim(--pad-x); border: fn.dim(--border) solid fn.color(--border); border-radius: fn.dim(--rounding); @@ -54,10 +52,6 @@ box-shadow: fn.color(--shadow); color: fn.global-color(--fg); - @include iro.bem-modifier('static') { - position: static; - } - @include iro.bem-modifier('up-left') { transform: translate(0, -100%); } diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss new file mode 100644 index 0000000..bc63a27 --- /dev/null +++ b/src/objects/_backdrop.scss @@ -0,0 +1,36 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('backdrop') { + @include iro.props-store(( + --dims: ( + --z-index: 10000, + --pad-x: iro.fn-px-to-rem(14px), + --pad-y: iro.fn-px-to-rem(60px), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: rgba(#000, .3), + ), + ), 'colors'); + + @include iro.props-store(( + --dims: ( + --pad-y: iro.fn-px-to-rem(30px), + ) + ), 'sm'); + + @include iro.bem-object(iro.props-namespace()) { + position: fixed; + z-index: fn.dim(--z-index); + top: 0; + right: 0; + bottom: 0; + left: 0; + box-sizing: border-box; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + background-color: fn.color(--bg); + } +} diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss new file mode 100644 index 0000000..453b32b --- /dev/null +++ b/src/objects/_dialog.scss @@ -0,0 +1,57 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('dialog') { + @include iro.props-store(( + --dims: ( + --pad-x: iro.fn-px-to-rem(40px), + --pad-y: iro.fn-px-to-rem(40px), + --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, + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --shadow: 0 .2em .5em rgba(#000, .2), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + 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); + + @include iro.bem-modifier('sm') { + max-width: fn.dim(--width-sm); + } + + @include iro.bem-modifier('lg') { + max-width: fn.dim(--width-lg); + } + + @include iro.bem-elem('header') { + padding-bottom: .5rem; + } + + @include iro.bem-elem('title') { + margin-top: 0; + } + + @include iro.bem-elem('body') { + padding-top: .5rem; + } + + @include iro.bem-elem('footer') { + padding-top: fn.dim(--pad-y); + text-align: right; + } + } +} diff --git a/tpl/index.pug b/tpl/index.pug index 510e09b..0b74ed8 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -17,6 +17,8 @@ include objects/status-indicator.pug include objects/avatar.pug include objects/action-menu.pug include objects/menu.pug +include objects/backdrop.pug +include objects/dialog.pug mixin box +container(padX=true padY=true inPage=true theme="raised") @@ -44,46 +46,46 @@ html body +container(padX=true padY=true narrow=true) - +h1-heading(level='xl')= 'Heading' - +rule(level='medium') + +h1-heading('xl')= 'Heading' + +rule('medium') +box - +div-heading(level='xxl')= 'XXL Heading' - +div-heading(level='xl')= 'XL Heading' - +div-heading(level='lg')= 'LG Heading' - +div-heading(level='md')= 'MD Heading' - +div-heading(level='sm')= 'SM Heading' - +div-heading(level='xs')= 'XS Heading' + +div-heading('xxl')= 'XXL Heading' + +div-heading('xl')= 'XL Heading' + +div-heading('lg')= 'LG Heading' + +div-heading('md')= 'MD Heading' + +div-heading('sm')= 'SM Heading' + +div-heading('xs')= 'XS Heading' //----------------------------------------- - +h1-heading(level='xl')= 'Rule' - +rule(level='medium') + +h1-heading('xl')= 'Rule' + +rule('medium') +box - +div-heading(level='lg')= 'Heading' - +rule(level='strong') + +div-heading('lg')= 'Heading' + +rule('strong') p= loremIpsum +box - +div-heading(level='sm')= 'Heading' - +rule(level='medium') + +div-heading('sm')= 'Heading' + +rule('medium') p= loremIpsum +box - +div-heading(level='xs')= 'Heading' - +rule(level='faint') + +div-heading('xs')= 'Heading' + +rule('faint') p= loremIpsum +box - +rule(level='strong')= 'Strong' - +rule(level='medium')= 'Medium' - +rule(level='faint')= 'Faint' + +rule('strong')= 'Strong' + +rule('medium')= 'Medium' + +rule('faint')= 'Faint' //----------------------------------------- - +h1-heading(level='xl')= 'Button' - +rule(level='medium') + +h1-heading('xl')= 'Button' + +rule('medium') +box +a-button(variant='accent')= 'Button' @@ -114,8 +116,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Text field' - +rule(level='medium') + +h1-heading('xl')= 'Text field' + +rule('medium') +box +text-field(placeholder='Placeholder') @@ -143,8 +145,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Field label' - +rule(level='medium') + +h1-heading('xl')= 'Field label' + +rule('medium') +box +field-label('First name') @@ -220,8 +222,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Radio' - +rule(level='medium') + +h1-heading('xl')= 'Radio' + +rule('medium') +box +radio(name="radio-demo-1")= 'Cats' @@ -242,8 +244,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Checkbox' - +rule(level='medium') + +h1-heading('xl')= 'Checkbox' + +rule('medium') +box +checkbox(indeterminate=true)= 'Cats' @@ -264,8 +266,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Switch' - +rule(level='medium') + +h1-heading('xl')= 'Switch' + +rule('medium') +box +switch= 'Cats' @@ -286,8 +288,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Form' - +rule(level='medium') + +h1-heading('xl')= 'Form' + +rule('medium') +box +form(labelsAlign="left") @@ -319,8 +321,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Action button' - +rule(level='medium') + +h1-heading('xl')= 'Action button' + +rule('medium') +box +action-button= 'Idle' @@ -378,8 +380,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Status indicator' - +rule(level='medium') + +h1-heading('xl')= 'Status indicator' + +rule('medium') +box +status-indicator @@ -392,8 +394,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Avatar' - +rule(level='medium') + +h1-heading('xl')= 'Avatar' + +rule('medium') +box div(style={ display: 'flex', gap: '.3em' }) @@ -449,8 +451,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Action menu' - +rule(level='medium') + +h1-heading('xl')= 'Action menu' + +rule('medium') +box div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) @@ -472,8 +474,8 @@ html //----------------------------------------- - +h1-heading(level='xl')= 'Menu' - +rule(level='medium') + +h1-heading('xl')= 'Menu' + +rule('medium') +box div(style={ display: 'flex', gap: '3rem' }) @@ -516,4 +518,22 @@ html +menu-item +user-card('johndoe', 270) + //----------------------------------------- + + +h1-heading('xl')= 'Backdrop' + +rule('medium') + + +box + +backdrop + + //----------------------------------------- + + +h1-heading('xl')= 'Dialog' + +rule('medium') + + +box + +backdrop + +dialog('Lorem ipsum') + = loremIpsum + diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 8c1a584..e8cecb2 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug @@ -2,14 +2,7 @@ include icon.pug include status-indicator.pug mixin action-menu - - - let classes = { - 'o-action-menu': true, - 'o-action-menu--static': true, - 't-raised': true - } - - div(class=classes) + .o-action-menu.u-ps.t-raised block mixin action-menu-item diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug new file mode 100644 index 0000000..6ad72d7 --- /dev/null +++ b/tpl/objects/backdrop.pug @@ -0,0 +1,3 @@ +mixin backdrop + .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em' }) + block diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug new file mode 100644 index 0000000..2cbbd4f --- /dev/null +++ b/tpl/objects/dialog.pug @@ -0,0 +1,16 @@ +include rule.pug +include button.pug +include heading.pug + +mixin dialog(title) + .o-dialog.t-raised + header.o-dialog__header + +div-heading('lg')(class='o-dialog__title') + = title + +rule('medium') + section.o-dialog__body + block + footer.o-dialog__footer + +a-button(outline=true)= 'Cancel' + = ' ' + +a-button(outline=true variant='primary')= 'Continue' diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug index 546df43..a0de4af 100644 --- a/tpl/objects/heading.pug +++ b/tpl/objects/heading.pug @@ -1,34 +1,34 @@ -mixin h1-heading - - let classes = ['o-heading', 'o-heading--' + attributes.level] - h1(class=classes) +mixin h1-heading(level) + - let classes = ['o-heading', 'o-heading--' + level] + h1(class=classes)&attributes(attributes) block -mixin h2-heading - - let classes = ['o-heading', 'o-heading--' + attributes.level] - h2(class=classes) +mixin h2-heading(level) + - let classes = ['o-heading', 'o-heading--' + level] + h2(class=classes)&attributes(attributes) block -mixin h3-heading - - let classes = ['o-heading', 'o-heading--' + attributes.level] - h3(class=classes) +mixin h3-heading(level) + - let classes = ['o-heading', 'o-heading--' + level] + h3(class=classes)&attributes(attributes) block -mixin h4-heading - - let classes = ['o-heading', 'o-heading--' + attributes.level] - h4(class=classes) +mixin h4-heading(level) + - let classes = ['o-heading', 'o-heading--' + level] + h4(class=classes)&attributes(attributes) block -mixin h5-heading - - let classes = ['o-heading', 'o-heading--' + attributes.level] - h5(class=classes) +mixin h5-heading(level) + - let classes = ['o-heading', 'o-heading--' + level] + h5(class=classes)&attributes(attributes) block -mixin h6-heading - - let classes = ['o-heading', 'o-heading--' + attributes.level] - h6(class=classes) +mixin h6-heading(level) + - let classes = ['o-heading', 'o-heading--' + level] + h6(class=classes)&attributes(attributes) block -mixin div-heading - - let classes = ['o-heading', 'o-heading--' + attributes.level] - div(class=classes) +mixin div-heading(level) + - let classes = ['o-heading', 'o-heading--' + level] + div(class=classes)&attributes(attributes) block diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug index 958ff18..63a039f 100644 --- a/tpl/objects/rule.pug +++ b/tpl/objects/rule.pug @@ -1,10 +1,10 @@ -mixin rule +mixin rule(level) - let classes = { - 'o-rule': true, - 'o-rule--labelled': !!block + 'o-rule': true, + 'o-rule--labelled': !!block, + ['o-rule--' + level]: true } - classes['o-rule--' + attributes.level] = true div(class=classes) if block -- cgit v1.2.3-70-g09d2