diff options
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/action-button.pug | 68 | ||||
-rw-r--r-- | tpl/views/button.pug | 4 |
2 files changed, 60 insertions, 12 deletions
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug index 8fbf9ea..025bd78 100644 --- a/tpl/views/action-button.pug +++ b/tpl/views/action-button.pug | |||
@@ -8,8 +8,8 @@ mixin view-action-button | |||
8 | +action-button(size='lg')= 'Idle' | 8 | +action-button(size='lg')= 'Idle' |
9 | = ' ' | 9 | = ' ' |
10 | +action-button(size='xl')= 'Idle' | 10 | +action-button(size='xl')= 'Idle' |
11 | 11 | br | |
12 | .c-box | 12 | br |
13 | +action-button(icon='trash' size='sm') | 13 | +action-button(icon='trash' size='sm') |
14 | = ' ' | 14 | = ' ' |
15 | +action-button(icon='trash') | 15 | +action-button(icon='trash') |
@@ -17,6 +17,15 @@ mixin view-action-button | |||
17 | +action-button(icon='trash' size='lg') | 17 | +action-button(icon='trash' size='lg') |
18 | = ' ' | 18 | = ' ' |
19 | +action-button(icon='trash' size='xl') | 19 | +action-button(icon='trash' size='xl') |
20 | br | ||
21 | br | ||
22 | +action-button(icon='user' size='sm')= 'Idle' | ||
23 | = ' ' | ||
24 | +action-button(icon='user')= 'Idle' | ||
25 | = ' ' | ||
26 | +action-button(icon='user' size='lg')= 'Idle' | ||
27 | = ' ' | ||
28 | +action-button(icon='user' size='xl')= 'Idle' | ||
20 | 29 | ||
21 | .c-box | 30 | .c-box |
22 | +action-button(pill=true size='sm')= 'Idle' | 31 | +action-button(pill=true size='sm')= 'Idle' |
@@ -26,8 +35,8 @@ mixin view-action-button | |||
26 | +action-button(pill=true size='lg')= 'Idle' | 35 | +action-button(pill=true size='lg')= 'Idle' |
27 | = ' ' | 36 | = ' ' |
28 | +action-button(pill=true size='xl')= 'Idle' | 37 | +action-button(pill=true size='xl')= 'Idle' |
29 | 38 | br | |
30 | .c-box | 39 | br |
31 | +action-button(pill=true icon='trash' size='sm') | 40 | +action-button(pill=true icon='trash' size='sm') |
32 | = ' ' | 41 | = ' ' |
33 | +action-button(pill=true icon='trash') | 42 | +action-button(pill=true icon='trash') |
@@ -35,6 +44,15 @@ mixin view-action-button | |||
35 | +action-button(pill=true icon='trash' size='lg') | 44 | +action-button(pill=true icon='trash' size='lg') |
36 | = ' ' | 45 | = ' ' |
37 | +action-button(pill=true icon='trash' size='xl') | 46 | +action-button(pill=true icon='trash' size='xl') |
47 | br | ||
48 | br | ||
49 | +action-button(pill=true icon='user' size='sm')= 'Idle' | ||
50 | = ' ' | ||
51 | +action-button(pill=true icon='user')= 'Idle' | ||
52 | = ' ' | ||
53 | +action-button(pill=true icon='user' size='lg')= 'Idle' | ||
54 | = ' ' | ||
55 | +action-button(pill=true icon='user' size='xl')= 'Idle' | ||
38 | 56 | ||
39 | .c-box | 57 | .c-box |
40 | +action-button= 'Label' | 58 | +action-button= 'Label' |
@@ -42,8 +60,15 @@ mixin view-action-button | |||
42 | +action-button(icon='trash')= 'Label' | 60 | +action-button(icon='trash')= 'Label' |
43 | = ' ' | 61 | = ' ' |
44 | +action-button(icon='trash') | 62 | +action-button(icon='trash') |
45 | 63 | br | |
46 | .c-box | 64 | br |
65 | +action-button(secondary=true)= 'Label' | ||
66 | = ' ' | ||
67 | +action-button(secondary=true icon='trash')= 'Label' | ||
68 | = ' ' | ||
69 | +action-button(secondary=true icon='trash') | ||
70 | br | ||
71 | br | ||
47 | +action-button(quiet=true)= 'Label' | 72 | +action-button(quiet=true)= 'Label' |
48 | = ' ' | 73 | = ' ' |
49 | +action-button(quiet=true icon='trash')= 'Label' | 74 | +action-button(quiet=true icon='trash')= 'Label' |
@@ -58,8 +83,8 @@ mixin view-action-button | |||
58 | +action-button(disabled=true)= 'Disabled' | 83 | +action-button(disabled=true)= 'Disabled' |
59 | = ' ' | 84 | = ' ' |
60 | +action-button(selected=true disabled=true)= 'Selected + disabled' | 85 | +action-button(selected=true disabled=true)= 'Selected + disabled' |
61 | 86 | br | |
62 | .c-box | 87 | br |
63 | +action-button(quiet=true )= 'Idle' | 88 | +action-button(quiet=true )= 'Idle' |
64 | = ' ' | 89 | = ' ' |
65 | +action-button(quiet=true selected=true)= 'Selected' | 90 | +action-button(quiet=true selected=true)= 'Selected' |
@@ -76,8 +101,8 @@ mixin view-action-button | |||
76 | +action-button(pill=true disabled=true)= 'Disabled' | 101 | +action-button(pill=true disabled=true)= 'Disabled' |
77 | = ' ' | 102 | = ' ' |
78 | +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' | 103 | +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' |
79 | 104 | br | |
80 | .c-box | 105 | br |
81 | +action-button(pill=true quiet=true)= 'Idle' | 106 | +action-button(pill=true quiet=true)= 'Idle' |
82 | = ' ' | 107 | = ' ' |
83 | +action-button(pill=true quiet=true selected=true)= 'Selected' | 108 | +action-button(pill=true quiet=true selected=true)= 'Selected' |
@@ -86,6 +111,25 @@ mixin view-action-button | |||
86 | = ' ' | 111 | = ' ' |
87 | +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' | 112 | +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' |
88 | 113 | ||
114 | each theme, i in ['accent', 'positive', 'negative', 'warning'] | ||
115 | .c-box | ||
116 | +action-button(theme=theme)= 'Idle' | ||
117 | = ' ' | ||
118 | +action-button(theme=theme selected=true)= 'Selected' | ||
119 | = ' ' | ||
120 | +action-button(theme=theme disabled=true)= 'Disabled' | ||
121 | = ' ' | ||
122 | +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' | ||
123 | br | ||
124 | br | ||
125 | +action-button(theme=theme quiet=true)= 'Idle' | ||
126 | = ' ' | ||
127 | +action-button(theme=theme quiet=true selected=true)= 'Selected' | ||
128 | = ' ' | ||
129 | +action-button(theme=theme quiet=true disabled=true)= 'Disabled' | ||
130 | = ' ' | ||
131 | +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' | ||
132 | |||
89 | each theme in ['static-black', 'static-white'] | 133 | each theme in ['static-black', 'static-white'] |
90 | - | 134 | - |
91 | const bg = theme.startsWith('static-black') ? 500 : 1000; | 135 | const bg = theme.startsWith('static-black') ? 500 : 1000; |
@@ -98,8 +142,8 @@ mixin view-action-button | |||
98 | +action-button(theme=theme disabled=true)= 'Disabled' | 142 | +action-button(theme=theme disabled=true)= 'Disabled' |
99 | = ' ' | 143 | = ' ' |
100 | +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' | 144 | +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' |
101 | 145 | br | |
102 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) | 146 | br |
103 | +action-button(theme=theme quiet=true)= 'Idle' | 147 | +action-button(theme=theme quiet=true)= 'Idle' |
104 | = ' ' | 148 | = ' ' |
105 | +action-button(theme=theme quiet=true selected=true)= 'Selected' | 149 | +action-button(theme=theme quiet=true selected=true)= 'Selected' |
diff --git a/tpl/views/button.pug b/tpl/views/button.pug index edd8ef6..da7531b 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug | |||
@@ -34,6 +34,7 @@ mixin view-button | |||
34 | +a-button(outline=true)= 'Button' | 34 | +a-button(outline=true)= 'Button' |
35 | +a-button(outline=true disabled=true)= 'Button' | 35 | +a-button(outline=true disabled=true)= 'Button' |
36 | br | 36 | br |
37 | br | ||
37 | .l-button-group | 38 | .l-button-group |
38 | +a-button(icon='trash') | 39 | +a-button(icon='trash') |
39 | +a-button(disabled=true icon='trash') | 40 | +a-button(disabled=true icon='trash') |
@@ -48,6 +49,7 @@ mixin view-button | |||
48 | +a-button(variant=theme outline=true)= 'Button' | 49 | +a-button(variant=theme outline=true)= 'Button' |
49 | +a-button(variant=theme outline=true disabled=true)= 'Button' | 50 | +a-button(variant=theme outline=true disabled=true)= 'Button' |
50 | br | 51 | br |
52 | br | ||
51 | .l-button-group | 53 | .l-button-group |
52 | +a-button(variant=theme icon='trash') | 54 | +a-button(variant=theme icon='trash') |
53 | +a-button(variant=theme disabled=true icon='trash') | 55 | +a-button(variant=theme disabled=true icon='trash') |
@@ -65,6 +67,7 @@ mixin view-button | |||
65 | +a-button(variant=theme outline=true)= 'Button' | 67 | +a-button(variant=theme outline=true)= 'Button' |
66 | +a-button(variant=theme outline=true disabled=true)= 'Button' | 68 | +a-button(variant=theme outline=true disabled=true)= 'Button' |
67 | br | 69 | br |
70 | br | ||
68 | .l-button-group | 71 | .l-button-group |
69 | +a-button(variant=theme icon='trash') | 72 | +a-button(variant=theme icon='trash') |
70 | +a-button(variant=theme disabled=true icon='trash') | 73 | +a-button(variant=theme disabled=true icon='trash') |
@@ -78,6 +81,7 @@ mixin view-button | |||
78 | +a-button(variant=theme primary=true outline=true)= 'Button' | 81 | +a-button(variant=theme primary=true outline=true)= 'Button' |
79 | +a-button(variant=theme primary=true outline=true disabled=true)= 'Button' | 82 | +a-button(variant=theme primary=true outline=true disabled=true)= 'Button' |
80 | br | 83 | br |
84 | br | ||
81 | .l-button-group | 85 | .l-button-group |
82 | +a-button(variant=theme primary=true icon='trash') | 86 | +a-button(variant=theme primary=true icon='trash') |
83 | +a-button(variant=theme primary=true disabled=true icon='trash') | 87 | +a-button(variant=theme primary=true disabled=true icon='trash') |