summaryrefslogtreecommitdiffstats
path: root/tpl/views
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-21 16:03:52 +0200
committerVolpeon <git@volpeon.ink>2025-07-21 16:03:52 +0200
commit943ee062fe2c0344165e28f4d612176878159133 (patch)
treeb4eaead4e789ec1e5d0994576901ef038d65210e /tpl/views
parentfix var names (diff)
downloadiro-design-943ee062fe2c0344165e28f4d612176878159133.tar.gz
iro-design-943ee062fe2c0344165e28f4d612176878159133.tar.bz2
iro-design-943ee062fe2c0344165e28f4d612176878159133.zip
Consolidating button, action-button and badge; change design to have some 3D components
Diffstat (limited to 'tpl/views')
-rw-r--r--tpl/views/action-button.pug68
-rw-r--r--tpl/views/button.pug4
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')
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-22 03:42:05 +0000