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 ++-------------------------------------------------------- 1 file changed, 5 insertions(+), 276 deletions(-) (limited to 'tpl/index.pug') 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) -- cgit v1.2.3-70-g09d2