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 --- 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 ++-- 6 files changed, 108 insertions(+), 76 deletions(-) create mode 100644 tpl/objects/backdrop.pug create mode 100644 tpl/objects/dialog.pug (limited to 'tpl') 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-54-g00ecf