From 3b7e35551b499a7b8887adb068d3a80e4088b0c2 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 5 Feb 2022 19:23:14 +0100
Subject: Added field-label

---
 tpl/index.pug | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)

(limited to 'tpl/index.pug')

diff --git a/tpl/index.pug b/tpl/index.pug
index 7dab86f..e3918de 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,6 +7,7 @@ include objects/heading.pug
 include objects/rule.pug
 include objects/button.pug
 include objects/text-field.pug
+include objects/field-label.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -121,3 +122,80 @@ html
                 br
                 br
                 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Field label'
+            +rule(level='medium')
+
+            +box
+                +field-label('First name')
+                    +text-field(placeholder='Placeholder')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')
+                    +text-field(placeholder='Placeholder' type='password')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(invalid=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true)
+                br
+                br
+                +field-label('First name')(disabled=true)
+                    +text-field(placeholder='Placeholder' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
+
+            +box
+                +field-label('First name')(align='left' labelWidth='100px')
+                    +text-field(placeholder='Placeholder')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
+                    +text-field(placeholder='Placeholder' type='password')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true)
+                br
+                br
+                +field-label('First name')(align='left' labelWidth='100px' disabled=true)
+                    +text-field(placeholder='Placeholder' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
+                    +text-field(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-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
+
+            +box
+                +field-label('First name')(align='right' labelWidth='100px')
+                    +text-field(placeholder='Placeholder')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
+                    +text-field(placeholder='Placeholder' type='password')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true)
+                br
+                br
+                +field-label('First name')(align='right' labelWidth='100px' disabled=true)
+                    +text-field(placeholder='Placeholder' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
+                    +text-field(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-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
-- 
cgit v1.2.3-70-g09d2