summaryrefslogtreecommitdiffstats
path: root/tpl/views
diff options
context:
space:
mode:
Diffstat (limited to 'tpl/views')
-rw-r--r--tpl/views/badge.pug48
-rw-r--r--tpl/views/button.pug33
-rw-r--r--tpl/views/field-label.pug24
3 files changed, 69 insertions, 36 deletions
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index 1e1b88f..a55baca 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -1,75 +1,75 @@
1mixin view-badge 1mixin view-badge
2 +view('badge', 'Badge') 2 +view('badge', 'Badge')
3 .c-box 3 .c-box
4 +badge(size=50 href='#')= '50' 4 +badge(size='sm' href='#')= '50'
5 = ' ' 5 = ' '
6 +badge= '100' 6 +badge= '100'
7 = ' ' 7 = ' '
8 +badge(size=200 href='#')= '200' 8 +badge(size='lg' href='#')= '200'
9 = ' ' 9 = ' '
10 +badge(size=300 href='#')= '300' 10 +badge(size='xl' href='#')= '300'
11 11
12 .c-box 12 .c-box
13 +badge(size=50 href='#' quiet=true)= '50' 13 +badge(size='sm' href='#' quiet=true)= '50'
14 = ' ' 14 = ' '
15 +badge(quiet=true)= '100' 15 +badge(quiet=true)= '100'
16 = ' ' 16 = ' '
17 +badge(size=200 href='#' quiet=true)= '200' 17 +badge(size='lg' href='#' quiet=true)= '200'
18 = ' ' 18 = ' '
19 +badge(size=300 href='#' quiet=true)= '300' 19 +badge(size='xl' href='#' quiet=true)= '300'
20 20
21 each theme in ['accent', 'positive', 'negative', 'warning'] 21 each theme in ['accent', 'positive', 'negative', 'warning']
22 .c-box 22 .c-box
23 +badge(theme)(size=50 href='#')= 'new' 23 +badge(theme)(size='sm' href='#')= 'new'
24 = ' ' 24 = ' '
25 +badge(theme)= 'new' 25 +badge(theme)= 'new'
26 = ' ' 26 = ' '
27 +badge(theme)(size=200 href='#')= 'new' 27 +badge(theme)(size='lg' href='#')= 'new'
28 = ' ' 28 = ' '
29 +badge(theme)(size=300 href='#')= 'new' 29 +badge(theme)(size='xl' href='#')= 'new'
30 30
31 .c-box 31 .c-box
32 +badge(theme)(size=50 href='#' quiet=true)= 'new' 32 +badge(theme)(size='sm' href='#' quiet=true)= 'new'
33 = ' ' 33 = ' '
34 +badge(theme)(quiet=true)= 'new' 34 +badge(theme)(quiet=true)= 'new'
35 = ' ' 35 = ' '
36 +badge(theme)(size=200 href='#' quiet=true)= 'new' 36 +badge(theme)(size='lg' href='#' quiet=true)= 'new'
37 = ' ' 37 = ' '
38 +badge(theme)(size=300 href='#' quiet=true)= 'new' 38 +badge(theme)(size='xl' href='#' quiet=true)= 'new'
39 39
40 .c-box 40 .c-box
41 +badge(size=50, pill=true)= '50' 41 +badge(size='sm', pill=true)= '50'
42 = ' ' 42 = ' '
43 +badge(pill=true)= '100' 43 +badge(pill=true)= '100'
44 = ' ' 44 = ' '
45 +badge(size=200 pill=true)= '200' 45 +badge(size='lg' pill=true)= '200'
46 = ' ' 46 = ' '
47 +badge(size=300 pill=true)= '300' 47 +badge(size='xl' pill=true)= '300'
48 48
49 .c-box 49 .c-box
50 +badge(size=50 pill=true quiet=true)= 'new' 50 +badge(size='sm' pill=true quiet=true)= 'new'
51 = ' ' 51 = ' '
52 +badge(pill=true quiet=true)= 'new' 52 +badge(pill=true quiet=true)= 'new'
53 = ' ' 53 = ' '
54 +badge(size=200 pill=true quiet=true)= 'new' 54 +badge(size='lg' pill=true quiet=true)= 'new'
55 = ' ' 55 = ' '
56 +badge(size=300 pill=true quiet=true)= 'new' 56 +badge(size='xl' pill=true quiet=true)= 'new'
57 57
58 each theme in ['accent', 'positive', 'negative', 'warning'] 58 each theme in ['accent', 'positive', 'negative', 'warning']
59 .c-box 59 .c-box
60 +badge(theme)(size=50 pill=true href='#')= 'new' 60 +badge(theme)(size='sm' pill=true href='#')= 'new'
61 = ' ' 61 = ' '
62 +badge(theme)(pill=true)= 'new' 62 +badge(theme)(pill=true)= 'new'
63 = ' ' 63 = ' '
64 +badge(theme)(size=200 pill=true href='#')= 'new' 64 +badge(theme)(size='lg' pill=true href='#')= 'new'
65 = ' ' 65 = ' '
66 +badge(theme)(size=300 pill=true href='#')= 'new' 66 +badge(theme)(size='xl' pill=true href='#')= 'new'
67 67
68 .c-box 68 .c-box
69 +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new' 69 +badge(theme)(size='sm' pill=true href='#' quiet=true)= 'new'
70 = ' ' 70 = ' '
71 +badge(theme)(pill=true quiet=true)= 'new' 71 +badge(theme)(pill=true quiet=true)= 'new'
72 = ' ' 72 = ' '
73 +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new' 73 +badge(theme)(size='lg' pill=true href='#' quiet=true)= 'new'
74 = ' ' 74 = ' '
75 +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new' 75 +badge(theme)(size='xl' pill=true href='#' quiet=true)= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 7c96419..4b2281e 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,6 +1,39 @@
1mixin view-button 1mixin view-button
2 +view('button', 'Button') 2 +view('button', 'Button')
3 .c-box 3 .c-box
4 +a-button(size='sm')= 'Button'
5 = ' '
6 +a-button= 'Button'
7 = ' '
8 +a-button(size='lg')= 'Button'
9 = ' '
10 +a-button(size='xl')= 'Button'
11 br
12 +a-button(size='sm' disabled=true)= 'Button'
13 = ' '
14 +a-button(disabled=true)= 'Button'
15 = ' '
16 +a-button(size='lg' disabled=true)= 'Button'
17 = ' '
18 +a-button(size='xl' disabled=true)= 'Button'
19 br
20 +a-button(size='sm' outline=true)= 'Button'
21 = ' '
22 +a-button(outline=true)= 'Button'
23 = ' '
24 +a-button(size='lg' outline=true)= 'Button'
25 = ' '
26 +a-button(size='xl' outline=true)= 'Button'
27 br
28 +a-button(size='sm' outline=true disabled=true)= 'Button'
29 = ' '
30 +a-button(outline=true disabled=true)= 'Button'
31 = ' '
32 +a-button(size='lg' outline=true disabled=true)= 'Button'
33 = ' '
34 +a-button(size='xl' outline=true disabled=true)= 'Button'
35
36 .c-box
4 .l-button-group 37 .l-button-group
5 +a-button= 'Button' 38 +a-button= 'Button'
6 +a-button(disabled=true)= 'Button' 39 +a-button(disabled=true)= 'Button'
diff --git a/tpl/views/field-label.pug b/tpl/views/field-label.pug
index 37ffb1a..448370a 100644
--- a/tpl/views/field-label.pug
+++ b/tpl/views/field-label.pug
@@ -20,39 +20,39 @@ mixin view-field-label
20 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) 20 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
21 21
22 .c-box 22 .c-box
23 +field-label('First name')(align='left' labelWidth='100px') 23 +field-label('First name')(align='start' labelWidth='100px')
24 +text-field(placeholder='Placeholder') 24 +text-field(placeholder='Placeholder')
25 br 25 br
26 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') 26 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px')
27 +text-field(placeholder='Placeholder' type='password') 27 +text-field(placeholder='Placeholder' type='password')
28 br 28 br
29 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) 29 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true)
30 +text-field(placeholder='Placeholder' type='password' invalid=true) 30 +text-field(placeholder='Placeholder' type='password' invalid=true)
31 br 31 br
32 +field-label('First name')(align='left' labelWidth='100px' disabled=true) 32 +field-label('First name')(align='start' labelWidth='100px' disabled=true)
33 +text-field(placeholder='Placeholder' disabled=true) 33 +text-field(placeholder='Placeholder' disabled=true)
34 br 34 br
35 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) 35 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' disabled=true)
36 +text-field(placeholder='Placeholder' type='password' disabled=true) 36 +text-field(placeholder='Placeholder' type='password' disabled=true)
37 br 37 br
38 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) 38 +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true disabled=true)
39 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) 39 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
40 40
41 .c-box 41 .c-box
42 +field-label('First name')(align='right' labelWidth='100px') 42 +field-label('First name')(align='end' labelWidth='100px')
43 +text-field(placeholder='Placeholder') 43 +text-field(placeholder='Placeholder')
44 br 44 br
45 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') 45 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px')
46 +text-field(placeholder='Placeholder' type='password') 46 +text-field(placeholder='Placeholder' type='password')
47 br 47 br
48 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) 48 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true)
49 +text-field(placeholder='Placeholder' type='password' invalid=true) 49 +text-field(placeholder='Placeholder' type='password' invalid=true)
50 br 50 br
51 +field-label('First name')(align='right' labelWidth='100px' disabled=true) 51 +field-label('First name')(align='end' labelWidth='100px' disabled=true)
52 +text-field(placeholder='Placeholder' disabled=true) 52 +text-field(placeholder='Placeholder' disabled=true)
53 br 53 br
54 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) 54 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' disabled=true)
55 +text-field(placeholder='Placeholder' type='password' disabled=true) 55 +text-field(placeholder='Placeholder' type='password' disabled=true)
56 br 56 br
57 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) 57 +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true disabled=true)
58 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) 58 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)