From 144b7a2ea83507c98544d14ad9435cc5e51ac071 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 12:26:35 +0100 Subject: Update --- tpl/index.pug | 281 +--------------------------------------------- tpl/layouts/container.pug | 14 +-- tpl/objects/heading.pug | 34 ++++++ tpl/objects/rule.pug | 12 ++ 4 files changed, 58 insertions(+), 283 deletions(-) create mode 100644 tpl/objects/heading.pug create mode 100644 tpl/objects/rule.pug (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug index 2fb865d..c63e9f1 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -4,19 +4,11 @@ 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 + .t-raised + +container(padH=true padV=true inPage=true themed=true) + block doctype html @@ -25,6 +17,8 @@ html meta(charset='utf-8') meta(name='viewport' content='width=device-width, initial-scale=1') title iro-design + link(rel="stylesheet", href="style.css") + script(src="script.js") body(class='t-lighter') +container(padH=true padV=true narrow=true) @@ -64,268 +58,3 @@ html +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 index 75e3b36..9dde2d6 100644 --- a/tpl/layouts/container.pug +++ b/tpl/layouts/container.pug @@ -1,13 +1,13 @@ 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 + 'l-container': true, + 'l-container--pad-h': attributes.padH, + 'l-container--pad-v': attributes.padV, + 'l-container--narrow': attributes.narrow, + 'l-container--sm-narrow': attributes.smNarrow, + 'l-container--in-page': attributes.inPage, + 'l-container--themed': attributes.themed } if (!!attributes.theme) { classes['t-' + attributes.theme] = true diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug new file mode 100644 index 0000000..546df43 --- /dev/null +++ b/tpl/objects/heading.pug @@ -0,0 +1,34 @@ +mixin h1-heading + - let classes = ['o-heading', 'o-heading--' + attributes.level] + h1(class=classes) + block + +mixin h2-heading + - let classes = ['o-heading', 'o-heading--' + attributes.level] + h2(class=classes) + block + +mixin h3-heading + - let classes = ['o-heading', 'o-heading--' + attributes.level] + h3(class=classes) + block + +mixin h4-heading + - let classes = ['o-heading', 'o-heading--' + attributes.level] + h4(class=classes) + block + +mixin h5-heading + - let classes = ['o-heading', 'o-heading--' + attributes.level] + h5(class=classes) + block + +mixin h6-heading + - let classes = ['o-heading', 'o-heading--' + attributes.level] + h6(class=classes) + block + +mixin div-heading + - let classes = ['o-heading', 'o-heading--' + attributes.level] + div(class=classes) + block diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug new file mode 100644 index 0000000..958ff18 --- /dev/null +++ b/tpl/objects/rule.pug @@ -0,0 +1,12 @@ +mixin rule + - + let classes = { + 'o-rule': true, + 'o-rule--labelled': !!block + } + classes['o-rule--' + attributes.level] = true + + div(class=classes) + if block + .o-rule__label + block -- cgit v1.2.3-70-g09d2