summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 23:00:16 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 23:00:16 +0200
commit69d753931c098bc18cd23e96af18f736a772f416 (patch)
treea40beef43a215fd76972e41085d3af1b123fed32 /tpl
parentUpdate (diff)
downloadiro-design-69d753931c098bc18cd23e96af18f736a772f416.tar.gz
iro-design-69d753931c098bc18cd23e96af18f736a772f416.tar.bz2
iro-design-69d753931c098bc18cd23e96af18f736a772f416.zip
Update
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/button.pug5
-rw-r--r--tpl/objects/field-label.pug13
-rw-r--r--tpl/objects/text-field.pug6
-rw-r--r--tpl/views/badge.pug48
-rw-r--r--tpl/views/button.pug33
-rw-r--r--tpl/views/field-label.pug24
6 files changed, 85 insertions, 44 deletions
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index e99e5ab..61ba0b6 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -9,11 +9,14 @@ mixin a-button
9 if (attributes.variant) { 9 if (attributes.variant) {
10 classes['o-button--' + attributes.variant] = true 10 classes['o-button--' + attributes.variant] = true
11 } 11 }
12 if (attributes.size) {
13 classes['o-button--' + attributes.size] = true
14 }
12 15
13 let href = attributes.disabled ? null : '#'; 16 let href = attributes.disabled ? null : '#';
14 17
15 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) 18 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
16 if attributes.icon 19 if attributes.icon
17 +icon(attributes.icon)(block=!block) 20 +icon(attributes.icon)
18 = ' ' 21 = ' '
19 block 22 block
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
index 151e084..fb96443 100644
--- a/tpl/objects/field-label.pug
+++ b/tpl/objects/field-label.pug
@@ -1,17 +1,18 @@
1mixin field-label(label, hint=null) 1mixin field-label(label, hint=null)
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-field-label': true, 4 'o-field-label': true,
5 'o-field-label--left': attributes.align === 'left', 5 'is-invalid': attributes.invalid,
6 'o-field-label--right': attributes.align === 'right', 6 'is-disabled': attributes.disabled,
7 'is-invalid': attributes.invalid, 7 }
8 'is-disabled': attributes.disabled, 8 if (attributes.align) {
9 classes['o-field-label--align-' + attributes.align] = true;
9 } 10 }
10 if (attributes.class) { 11 if (attributes.class) {
11 classes[attributes.class] = true; 12 classes[attributes.class] = true;
12 } 13 }
13 14
14 let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right'; 15 let needsLabelWidth = !!attributes.align;
15 16
16 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : ''; 17 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
17 18
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 895770d..f8e5263 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -24,7 +24,11 @@ mixin text-field
24 24
25 const attr = { 25 const attr = {
26 placeholder: attributes.placeholder, 26 placeholder: attributes.placeholder,
27 disabled: attributes.disabled 27 disabled: attributes.disabled,
28 readonly: attributes.readonly,
29 pattern: attributes.pattern,
30 required: attributes.required,
31 value: attributes.value,
28 } 32 }
29 33
30 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 34 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
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)
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 14:59:28 +0000