summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug281
-rw-r--r--tpl/layouts/container.pug14
-rw-r--r--tpl/objects/heading.pug34
-rw-r--r--tpl/objects/rule.pug12
4 files changed, 58 insertions, 283 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 2fb865d..c63e9f1 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -4,19 +4,11 @@
4include layouts/container.pug 4include layouts/container.pug
5include objects/heading.pug 5include objects/heading.pug
6include objects/rule.pug 6include objects/rule.pug
7include objects/button.pug
8include objects/icon.pug
9include objects/text-input.pug
10include objects/field-label.pug
11include objects/radio.pug
12include objects/checkbox.pug
13include objects/switch.pug
14include objects/form.pug
15include objects/action-button.pug
16 7
17mixin box 8mixin box
18 +container(padH=true padV=true theme='box' inPage=true) 9 .t-raised
19 block 10 +container(padH=true padV=true inPage=true themed=true)
11 block
20 12
21 13
22doctype html 14doctype html
@@ -25,6 +17,8 @@ html
25 meta(charset='utf-8') 17 meta(charset='utf-8')
26 meta(name='viewport' content='width=device-width, initial-scale=1') 18 meta(name='viewport' content='width=device-width, initial-scale=1')
27 title iro-design 19 title iro-design
20 link(rel="stylesheet", href="style.css")
21 script(src="script.js")
28 22
29 body(class='t-lighter') 23 body(class='t-lighter')
30 +container(padH=true padV=true narrow=true) 24 +container(padH=true padV=true narrow=true)
@@ -64,268 +58,3 @@ html
64 +rule(level='strong')= 'Strong' 58 +rule(level='strong')= 'Strong'
65 +rule(level='medium')= 'Medium' 59 +rule(level='medium')= 'Medium'
66 +rule(level='faint')= 'Faint' 60 +rule(level='faint')= 'Faint'
67
68 //-----------------------------------------
69
70 +h1-heading(level='xl')= 'Button'
71 +rule(level='medium')
72
73 +box
74 +a-button(variant='primary')= 'Button'
75 = ' '
76 +a-button(variant='primary' disabled=true)= 'Button'
77 br
78 br
79 +a-button(variant='secondary')= 'Button'
80 = ' '
81 +a-button(variant='secondary' disabled=true)= 'Button'
82
83 +box
84 +a-button(variant='primary' quiet=true)= 'Button'
85 = ' '
86 +a-button(variant='primary' quiet=true disabled=true)= 'Button'
87 br
88 br
89 +a-button(variant='secondary' quiet=true)= 'Button'
90 = ' '
91 +a-button(variant='secondary' quiet=true disabled=true)= 'Button'
92
93 //-----------------------------------------
94
95 +h1-heading(level='xl')= 'Text input'
96 +rule(level='medium')
97
98 +box
99 +text-input(placeholder='Placeholder')
100 br
101 br
102 +text-input(value='Just landed in L.A.')
103 br
104 br
105 +text-input(value='Readonly' readonly=true)
106 br
107 br
108 +text-input(value='Incorrect input' pattern='a+' required=true)
109 br
110 br
111 +text-input(placeholder='Placeholder' disabled=true)
112 br
113 br
114 +text-input(value='Just landed in L.A.' disabled=true)
115 br
116 br
117 +text-input(value='Readonly' readonly=true disabled=true)
118 br
119 br
120 +text-input(value='Incorrect input' pattern='a+' required=true disabled=true)
121
122 //-----------------------------------------
123
124 +h1-heading(level='xl')= 'Field label'
125 +rule(level='medium')
126
127 +box
128 +field-label('First name')
129 +text-input(placeholder='Placeholder')
130 br
131 br
132 +field-label('Password', 'At least 6 characters required')
133 +text-input(placeholder='Placeholder' type='password')
134 br
135 br
136 +field-label('Password', 'At least 6 characters required')(invalid=true)
137 +text-input(placeholder='Placeholder' type='password' invalid=true)
138 br
139 br
140 +field-label('First name')(disabled=true)
141 +text-input(placeholder='Placeholder' disabled=true)
142 br
143 br
144 +field-label('Password', 'At least 6 characters required')(disabled=true)
145 +text-input(placeholder='Placeholder' type='password' disabled=true)
146 br
147 br
148 +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
149 +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
150
151 +box
152 +field-label('First name')(align='left' labelWidth='100px')
153 +text-input(placeholder='Placeholder')
154 br
155 br
156 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
157 +text-input(placeholder='Placeholder' type='password')
158 br
159 br
160 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
161 +text-input(placeholder='Placeholder' type='password' invalid=true)
162 br
163 br
164 +field-label('First name')(align='left' labelWidth='100px' disabled=true)
165 +text-input(placeholder='Placeholder' disabled=true)
166 br
167 br
168 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
169 +text-input(placeholder='Placeholder' type='password' disabled=true)
170 br
171 br
172 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
173 +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
174
175 +box
176 +field-label('First name')(align='right' labelWidth='100px')
177 +text-input(placeholder='Placeholder')
178 br
179 br
180 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
181 +text-input(placeholder='Placeholder' type='password')
182 br
183 br
184 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
185 +text-input(placeholder='Placeholder' type='password' invalid=true)
186 br
187 br
188 +field-label('First name')(align='right' labelWidth='100px' disabled=true)
189 +text-input(placeholder='Placeholder' disabled=true)
190 br
191 br
192 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
193 +text-input(placeholder='Placeholder' type='password' disabled=true)
194 br
195 br
196 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
197 +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
198
199 //-----------------------------------------
200
201 +h1-heading(level='xl')= 'Radio'
202 +rule(level='medium')
203
204 +box
205 +radio(name="radio-demo-1")= 'Cats'
206 +radio(name="radio-demo-1")= 'Dogs'
207 +radio(name="radio-demo-1" checked=true)= 'Foxes'
208 br
209 +radio(name="radio-demo-2" disabled=true)= 'Cats'
210 +radio(name="radio-demo-2" disabled=true)= 'Dogs'
211 +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
212
213 //-----------------------------------------
214
215 +h1-heading(level='xl')= 'Checkbox'
216 +rule(level='medium')
217
218 +box
219 +checkbox(indeterminate=true)= 'Cats'
220 +checkbox= 'Dogs'
221 +checkbox(checked=true)= 'Foxes'
222 br
223 +checkbox(indeterminate=true disabled=true)= 'Cats'
224 +checkbox(disabled=true)= 'Dogs'
225 +checkbox(checked=true disabled=true)= 'Foxes'
226
227 //-----------------------------------------
228
229 +h1-heading(level='xl')= 'Switch'
230 +rule(level='medium')
231
232 +box
233 +switch= 'Cats'
234 +switch= 'Dogs'
235 +switch(checked=true)= 'Foxes'
236 br
237 +switch(disabled=true)= 'Cats'
238 +switch(disabled=true)= 'Dogs'
239 +switch(checked=true disabled=true)= 'Foxes'
240
241 //-----------------------------------------
242
243 +h1-heading(level='xl')= 'Form'
244 +rule(level='medium')
245
246 +box
247 +form
248 +form-item('Username')
249 +text-input(placeholder='Example: Feuerfuchs')
250
251 +form-item('Password', 'At least 6 characters, all characters allowed')
252 +text-input(placeholder='Example: hunter2' type='password')
253
254 +form-item('Bio')
255 +text-input(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
256
257 +form-item('Favorite animal')
258 +radio(name="form-demo-1" checked=true)= 'Foxes'
259 +radio(name="form-demo-1")= 'Other'
260
261 +form-item('Notification settings')
262 +switch= 'In-app notifications'
263 br
264 +switch= 'Desktop notifications'
265 br
266 +switch= 'Email notifications'
267
268 +form-item('')
269 +checkbox= 'I\'ve read and accept the terms and conditions'
270
271 +form-item('')
272 +a-button(variant='primary')= 'Register'
273
274 //-----------------------------------------
275
276 +h1-heading(level='xl')= 'Action button'
277 +rule(level='medium')
278
279 +box
280 +a-action-button= 'Idle'
281 = ' '
282 +a-action-button(selected=true)= 'Selected'
283 = ' '
284 +a-action-button(disabled=true)= 'Disabled'
285 = ' '
286 +a-action-button(selected=true disabled=true)= 'Selected + disabled'
287 br
288 br
289 +a-action-button(icon='trash')= 'Idle'
290 = ' '
291 +a-action-button(icon='trash' selected=true)= 'Selected'
292 = ' '
293 +a-action-button(icon='trash' disabled=true)= 'Disabled'
294 = ' '
295 +a-action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
296 br
297 br
298 +a-action-button(icon='trash')
299 = ' '
300 +a-action-button(icon='trash' selected=true)
301 = ' '
302 +a-action-button(icon='trash' disabled=true)
303 = ' '
304 +a-action-button(icon='trash' selected=true disabled=true)
305
306 +box
307 +a-action-button(quiet=true )= 'Idle'
308 = ' '
309 +a-action-button(quiet=true selected=true)= 'Selected'
310 = ' '
311 +a-action-button(quiet=true disabled=true)= 'Disabled'
312 = ' '
313 +a-action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
314 br
315 br
316 +a-action-button(quiet=true icon='trash')= 'Idle'
317 = ' '
318 +a-action-button(quiet=true icon='trash' selected=true)= 'Selected'
319 = ' '
320 +a-action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
321 = ' '
322 +a-action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
323 br
324 br
325 +a-action-button(quiet=true icon='trash')
326 = ' '
327 +a-action-button(quiet=true icon='trash' selected=true)
328 = ' '
329 +a-action-button(quiet=true icon='trash' disabled=true)
330 = ' '
331 +a-action-button(quiet=true icon='trash' selected=true disabled=true)
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 75e3b36..9dde2d6 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -1,13 +1,13 @@
1mixin container 1mixin container
2 - 2 -
3 let classes = { 3 let classes = {
4 'l-container': true, 4 'l-container': true,
5 'l-container--padH': attributes.padH, 5 'l-container--pad-h': attributes.padH,
6 'l-container--padV': attributes.padV, 6 'l-container--pad-v': attributes.padV,
7 'l-container--narrow': attributes.narrow, 7 'l-container--narrow': attributes.narrow,
8 'l-container--smNarrow': attributes.smNarrow, 8 'l-container--sm-narrow': attributes.smNarrow,
9 'l-container--inPage': attributes.inPage, 9 'l-container--in-page': attributes.inPage,
10 'l-container--themed': !!attributes.theme 10 'l-container--themed': attributes.themed
11 } 11 }
12 if (!!attributes.theme) { 12 if (!!attributes.theme) {
13 classes['t-' + attributes.theme] = true 13 classes['t-' + attributes.theme] = true
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
new file mode 100644
index 0000000..546df43
--- /dev/null
+++ b/tpl/objects/heading.pug
@@ -0,0 +1,34 @@
1mixin h1-heading
2 - let classes = ['o-heading', 'o-heading--' + attributes.level]
3 h1(class=classes)
4 block
5
6mixin h2-heading
7 - let classes = ['o-heading', 'o-heading--' + attributes.level]
8 h2(class=classes)
9 block
10
11mixin h3-heading
12 - let classes = ['o-heading', 'o-heading--' + attributes.level]
13 h3(class=classes)
14 block
15
16mixin h4-heading
17 - let classes = ['o-heading', 'o-heading--' + attributes.level]
18 h4(class=classes)
19 block
20
21mixin h5-heading
22 - let classes = ['o-heading', 'o-heading--' + attributes.level]
23 h5(class=classes)
24 block
25
26mixin h6-heading
27 - let classes = ['o-heading', 'o-heading--' + attributes.level]
28 h6(class=classes)
29 block
30
31mixin div-heading
32 - let classes = ['o-heading', 'o-heading--' + attributes.level]
33 div(class=classes)
34 block
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
new file mode 100644
index 0000000..958ff18
--- /dev/null
+++ b/tpl/objects/rule.pug
@@ -0,0 +1,12 @@
1mixin rule
2 -
3 let classes = {
4 'o-rule': true,
5 'o-rule--labelled': !!block
6 }
7 classes['o-rule--' + attributes.level] = true
8
9 div(class=classes)
10 if block
11 .o-rule__label
12 block
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-30 22:14:28 +0000