From 62c3ca9a9f51a8bbca93e5e003d5feb052806a2f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 09:36:00 +0100 Subject: Init --- tpl/index.pug | 331 ++++++++++++++++++++++++++++++++++++++++++++++ tpl/layouts/container.pug | 18 +++ 2 files changed, 349 insertions(+) create mode 100644 tpl/index.pug create mode 100644 tpl/layouts/container.pug (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug new file mode 100644 index 0000000..2fb865d --- /dev/null +++ b/tpl/index.pug @@ -0,0 +1,331 @@ +- + let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat' + +include layouts/container.pug +include objects/heading.pug +include objects/rule.pug +include objects/button.pug +include objects/icon.pug +include objects/text-input.pug +include objects/field-label.pug +include objects/radio.pug +include objects/checkbox.pug +include objects/switch.pug +include objects/form.pug +include objects/action-button.pug + +mixin box + +container(padH=true padV=true theme='box' inPage=true) + block + + +doctype html +html + head + meta(charset='utf-8') + meta(name='viewport' content='width=device-width, initial-scale=1') + title iro-design + + body(class='t-lighter') + +container(padH=true padV=true narrow=true) + + +h1-heading(level='xl')= 'Heading' + +rule(level='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' + + //----------------------------------------- + + +h1-heading(level='xl')= 'Rule' + +rule(level='medium') + + +box + +div-heading(level='lg')= 'Heading' + +rule(level='strong') + p= loremIpsum + + +box + +div-heading(level='sm')= 'Heading' + +rule(level='medium') + p= loremIpsum + + +box + +div-heading(level='xs')= 'Heading' + +rule(level='faint') + p= loremIpsum + + +box + +rule(level='strong')= 'Strong' + +rule(level='medium')= 'Medium' + +rule(level='faint')= 'Faint' + + //----------------------------------------- + + +h1-heading(level='xl')= 'Button' + +rule(level='medium') + + +box + +a-button(variant='primary')= 'Button' + = ' ' + +a-button(variant='primary' disabled=true)= 'Button' + br + br + +a-button(variant='secondary')= 'Button' + = ' ' + +a-button(variant='secondary' disabled=true)= 'Button' + + +box + +a-button(variant='primary' quiet=true)= 'Button' + = ' ' + +a-button(variant='primary' quiet=true disabled=true)= 'Button' + br + br + +a-button(variant='secondary' quiet=true)= 'Button' + = ' ' + +a-button(variant='secondary' quiet=true disabled=true)= 'Button' + + //----------------------------------------- + + +h1-heading(level='xl')= 'Text input' + +rule(level='medium') + + +box + +text-input(placeholder='Placeholder') + br + br + +text-input(value='Just landed in L.A.') + br + br + +text-input(value='Readonly' readonly=true) + br + br + +text-input(value='Incorrect input' pattern='a+' required=true) + br + br + +text-input(placeholder='Placeholder' disabled=true) + br + br + +text-input(value='Just landed in L.A.' disabled=true) + br + br + +text-input(value='Readonly' readonly=true disabled=true) + br + br + +text-input(value='Incorrect input' pattern='a+' required=true disabled=true) + + //----------------------------------------- + + +h1-heading(level='xl')= 'Field label' + +rule(level='medium') + + +box + +field-label('First name') + +text-input(placeholder='Placeholder') + br + br + +field-label('Password', 'At least 6 characters required') + +text-input(placeholder='Placeholder' type='password') + br + br + +field-label('Password', 'At least 6 characters required')(invalid=true) + +text-input(placeholder='Placeholder' type='password' invalid=true) + br + br + +field-label('First name')(disabled=true) + +text-input(placeholder='Placeholder' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(disabled=true) + +text-input(placeholder='Placeholder' type='password' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true) + +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true) + + +box + +field-label('First name')(align='left' labelWidth='100px') + +text-input(placeholder='Placeholder') + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') + +text-input(placeholder='Placeholder' type='password') + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) + +text-input(placeholder='Placeholder' type='password' invalid=true) + br + br + +field-label('First name')(align='left' labelWidth='100px' disabled=true) + +text-input(placeholder='Placeholder' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) + +text-input(placeholder='Placeholder' type='password' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) + +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true) + + +box + +field-label('First name')(align='right' labelWidth='100px') + +text-input(placeholder='Placeholder') + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') + +text-input(placeholder='Placeholder' type='password') + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) + +text-input(placeholder='Placeholder' type='password' invalid=true) + br + br + +field-label('First name')(align='right' labelWidth='100px' disabled=true) + +text-input(placeholder='Placeholder' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) + +text-input(placeholder='Placeholder' type='password' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) + +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true) + + //----------------------------------------- + + +h1-heading(level='xl')= 'Radio' + +rule(level='medium') + + +box + +radio(name="radio-demo-1")= 'Cats' + +radio(name="radio-demo-1")= 'Dogs' + +radio(name="radio-demo-1" checked=true)= 'Foxes' + br + +radio(name="radio-demo-2" disabled=true)= 'Cats' + +radio(name="radio-demo-2" disabled=true)= 'Dogs' + +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes' + + //----------------------------------------- + + +h1-heading(level='xl')= 'Checkbox' + +rule(level='medium') + + +box + +checkbox(indeterminate=true)= 'Cats' + +checkbox= 'Dogs' + +checkbox(checked=true)= 'Foxes' + br + +checkbox(indeterminate=true disabled=true)= 'Cats' + +checkbox(disabled=true)= 'Dogs' + +checkbox(checked=true disabled=true)= 'Foxes' + + //----------------------------------------- + + +h1-heading(level='xl')= 'Switch' + +rule(level='medium') + + +box + +switch= 'Cats' + +switch= 'Dogs' + +switch(checked=true)= 'Foxes' + br + +switch(disabled=true)= 'Cats' + +switch(disabled=true)= 'Dogs' + +switch(checked=true disabled=true)= 'Foxes' + + //----------------------------------------- + + +h1-heading(level='xl')= 'Form' + +rule(level='medium') + + +box + +form + +form-item('Username') + +text-input(placeholder='Example: Feuerfuchs') + + +form-item('Password', 'At least 6 characters, all characters allowed') + +text-input(placeholder='Example: hunter2' type='password') + + +form-item('Bio') + +text-input(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') + + +form-item('Favorite animal') + +radio(name="form-demo-1" checked=true)= 'Foxes' + +radio(name="form-demo-1")= 'Other' + + +form-item('Notification settings') + +switch= 'In-app notifications' + br + +switch= 'Desktop notifications' + br + +switch= 'Email notifications' + + +form-item('') + +checkbox= 'I\'ve read and accept the terms and conditions' + + +form-item('') + +a-button(variant='primary')= 'Register' + + //----------------------------------------- + + +h1-heading(level='xl')= 'Action button' + +rule(level='medium') + + +box + +a-action-button= 'Idle' + = ' ' + +a-action-button(selected=true)= 'Selected' + = ' ' + +a-action-button(disabled=true)= 'Disabled' + = ' ' + +a-action-button(selected=true disabled=true)= 'Selected + disabled' + br + br + +a-action-button(icon='trash')= 'Idle' + = ' ' + +a-action-button(icon='trash' selected=true)= 'Selected' + = ' ' + +a-action-button(icon='trash' disabled=true)= 'Disabled' + = ' ' + +a-action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' + br + br + +a-action-button(icon='trash') + = ' ' + +a-action-button(icon='trash' selected=true) + = ' ' + +a-action-button(icon='trash' disabled=true) + = ' ' + +a-action-button(icon='trash' selected=true disabled=true) + + +box + +a-action-button(quiet=true )= 'Idle' + = ' ' + +a-action-button(quiet=true selected=true)= 'Selected' + = ' ' + +a-action-button(quiet=true disabled=true)= 'Disabled' + = ' ' + +a-action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' + br + br + +a-action-button(quiet=true icon='trash')= 'Idle' + = ' ' + +a-action-button(quiet=true icon='trash' selected=true)= 'Selected' + = ' ' + +a-action-button(quiet=true icon='trash' disabled=true)= 'Disabled' + = ' ' + +a-action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled' + br + br + +a-action-button(quiet=true icon='trash') + = ' ' + +a-action-button(quiet=true icon='trash' selected=true) + = ' ' + +a-action-button(quiet=true icon='trash' disabled=true) + = ' ' + +a-action-button(quiet=true icon='trash' selected=true disabled=true) diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug new file mode 100644 index 0000000..75e3b36 --- /dev/null +++ b/tpl/layouts/container.pug @@ -0,0 +1,18 @@ +mixin container + - + let classes = { + 'l-container': true, + 'l-container--padH': attributes.padH, + 'l-container--padV': attributes.padV, + 'l-container--narrow': attributes.narrow, + 'l-container--smNarrow': attributes.smNarrow, + 'l-container--inPage': attributes.inPage, + 'l-container--themed': !!attributes.theme + } + if (!!attributes.theme) { + classes['t-' + attributes.theme] = true + } + + div(class=classes) + .l-container__inner + block -- cgit v1.2.3-70-g09d2