diff options
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/badge.pug | 48 | ||||
-rw-r--r-- | tpl/views/button.pug | 33 | ||||
-rw-r--r-- | tpl/views/field-label.pug | 24 |
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 @@ | |||
1 | mixin view-badge | 1 | mixin 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 @@ | |||
1 | mixin view-button | 1 | mixin 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) |