summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json2
-rw-r--r--src/layouts/_container.scss6
-rw-r--r--src_demo/_base.scss5
-rw-r--r--src_demo/components/_box.scss16
-rw-r--r--src_demo/components/_content.scss7
-rw-r--r--src_demo/components/_sidebar.scss29
-rw-r--r--src_demo/components/_view.scss12
-rw-r--r--src_demo/index.scss17
-rw-r--r--tpl/index.pug736
-rw-r--r--tpl/layouts/container.pug5
-rw-r--r--tpl/objects/dialog.pug2
-rw-r--r--tpl/objects/menu.pug2
-rw-r--r--tpl/views/action-button.pug55
-rw-r--r--tpl/views/action-menu.pug19
-rw-r--r--tpl/views/alert.pug12
-rw-r--r--tpl/views/avatar.pug53
-rw-r--r--tpl/views/backdrop.pug4
-rw-r--r--tpl/views/badge.pug6
-rw-r--r--tpl/views/button.pug20
-rw-r--r--tpl/views/checkbox.pug18
-rw-r--r--tpl/views/colored-links.pug9
-rw-r--r--tpl/views/dialog.pug29
-rw-r--r--tpl/views/field-label.pug58
-rw-r--r--tpl/views/form.pug29
-rw-r--r--tpl/views/heading.pug9
-rw-r--r--tpl/views/lightbox.pug14
-rw-r--r--tpl/views/list-group.pug15
-rw-r--r--tpl/views/menu.pug42
-rw-r--r--tpl/views/radio.pug18
-rw-r--r--tpl/views/rule.pug21
-rw-r--r--tpl/views/status-indicator.pug10
-rw-r--r--tpl/views/switch.pug18
-rw-r--r--tpl/views/table.pug101
-rw-r--r--tpl/views/text-field.pug22
34 files changed, 737 insertions, 684 deletions
diff --git a/package.json b/package.json
index 13c1056..6047b47 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
12 "build:assets": "cp -r static/* public/", 12 "build:assets": "cp -r static/* public/",
13 "build:app": "pug tpl/index.pug -p tpl --out public/", 13 "build:app": "pug tpl/index.pug -p tpl --out public/",
14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-left chevron-right hash x send smile public/icons.svg",
15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
16 "lint:style": "stylelint \"src/**/*.scss\"", 16 "lint:style": "stylelint \"src/**/*.scss\"",
17 "fix:style": "stylelint \"src/**/*.scss\" --fix", 17 "fix:style": "stylelint \"src/**/*.scss\" --fix",
18 "serve": "python -m http.server --bind 127.0.0.1 --directory public 8000" 18 "serve": "python -m http.server --bind 127.0.0.1 --directory public 8000"
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 26ba16f..3f81758 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -9,7 +9,6 @@
9 --sm-content-width: iro.fn-px-to-rem(360px), 9 --sm-content-width: iro.fn-px-to-rem(360px),
10 --pad-x: fn.global-dim(--size --700), 10 --pad-x: fn.global-dim(--size --700),
11 --pad-y: fn.global-dim(--size --700), 11 --pad-y: fn.global-dim(--size --700),
12 --in-page-spacing-y: fn.global-dim(--size --700),
13 ) 12 )
14 ), 'dims'); 13 ), 'dims');
15 14
@@ -78,10 +77,5 @@
78 } 77 }
79 } 78 }
80 } 79 }
81
82 @include iro.bem-modifier('in-page') {
83 margin-top: fn.dim(--in-page-spacing-y);
84 margin-bottom: fn.dim(--in-page-spacing-y);
85 }
86 } 80 }
87} 81}
diff --git a/src_demo/_base.scss b/src_demo/_base.scss
new file mode 100644
index 0000000..8dcd789
--- /dev/null
+++ b/src_demo/_base.scss
@@ -0,0 +1,5 @@
1body {
2 display: grid;
3 grid-template-columns: auto 1fr;
4 grid-template-areas: 'sidebar content';
5}
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
new file mode 100644
index 0000000..e983f2c
--- /dev/null
+++ b/src_demo/components/_box.scss
@@ -0,0 +1,16 @@
1@use 'iro-sass/src/index' as iro;
2@use '../../src/functions' as fn;
3
4@include iro.props-namespace('box') {
5 @include iro.props-store((
6 --colors: (
7 --border: fn.global-color(--obj),
8 ),
9 ), 'colors');
10
11 @include iro.bem-component(iro.props-namespace()) {
12 margin: 2em 0;
13 padding: 2em;
14 border: 1px solid fn.color(--border);
15 }
16}
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
new file mode 100644
index 0000000..6045e4b
--- /dev/null
+++ b/src_demo/components/_content.scss
@@ -0,0 +1,7 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('content') {
4 @include iro.bem-component(iro.props-namespace()) {
5 grid-area: content;
6 }
7}
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
new file mode 100644
index 0000000..9cff3c8
--- /dev/null
+++ b/src_demo/components/_sidebar.scss
@@ -0,0 +1,29 @@
1@use 'iro-sass/src/index' as iro;
2@use '../../src/functions' as fn;
3
4@include iro.props-namespace('sidebar') {
5 @include iro.props-store((
6 --colors: (
7 --bg: fn.global-color(--bg),
8 --border: fn.global-color(--obj),
9 --icon: fn.global-color(--fg-hi),
10 --group-header-fg: fn.global-color(--fg-hi),
11 ),
12 ), 'colors');
13
14 @include iro.props-store((
15 --colors: (
16 --bg: fn.global-color(--bg-hi),
17 --border: fn.global-color(--bg-hi),
18 ),
19 ), 'colors-dark');
20
21 @include iro.bem-component(iro.props-namespace()) {
22 grid-area: sidebar;
23 min-width: 10em;
24 padding: .6em;
25 overflow: auto;
26 border-right: 1px solid fn.color(--border);
27 background-color: fn.color(--bg);
28 }
29}
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
new file mode 100644
index 0000000..8086280
--- /dev/null
+++ b/src_demo/components/_view.scss
@@ -0,0 +1,12 @@
1@use 'iro-sass/src/index' as iro;
2@use '../../src/functions' as fn;
3
4@include iro.props-namespace('view') {
5 @include iro.bem-component(iro.props-namespace()) {
6 display: none;
7
8 &:target {
9 display: block;
10 }
11 }
12}
diff --git a/src_demo/index.scss b/src_demo/index.scss
new file mode 100644
index 0000000..2a442bd
--- /dev/null
+++ b/src_demo/index.scss
@@ -0,0 +1,17 @@
1@use '../src/declare-vars';
2
3@use '../src/base';
4@use 'base' as demo-base;
5
6@use 'components/sidebar';
7@use 'components/content';
8@use 'components/box';
9@use 'components/view';
10
11@use '../src/layouts';
12@use '../src/objects';
13@use '../src/scopes';
14@use '../src/utils';
15
16@use '../src/apply-vars';
17
diff --git a/tpl/index.pug b/tpl/index.pug
index 7c0c3ff..400ec64 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -1,5 +1,8 @@
1- 1-
2 let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'; 2 const loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
3
4 const views = [];
5
3 6
4include layouts/container.pug 7include layouts/container.pug
5 8
@@ -25,8 +28,13 @@ include objects/list-group.pug
25include objects/table.pug 28include objects/table.pug
26include objects/alert.pug 29include objects/alert.pug
27 30
28mixin box 31mixin view(id, title)
29 +container(padX=true padY=true inPage=true) 32 -
33 views.push({ id, title });
34
35 +container(padX=true padY=true narrow=true)(class='c-view' id=id)
36 +h1-heading('xl')= title
37 +rule('medium')
30 block 38 block
31 39
32mixin user-card(name, hue) 40mixin user-card(name, hue)
@@ -38,6 +46,29 @@ mixin user-card(name, hue)
38 = avaName 46 = avaName
39 = name 47 = name
40 48
49include views/heading.pug
50include views/rule.pug
51include views/colored-links.pug
52include views/badge.pug
53include views/button.pug
54include views/text-field.pug
55include views/field-label.pug
56include views/radio.pug
57include views/checkbox.pug
58include views/switch.pug
59include views/form.pug
60include views/action-button.pug
61include views/status-indicator.pug
62include views/avatar.pug
63include views/action-menu.pug
64include views/menu.pug
65include views/backdrop.pug
66include views/dialog.pug
67include views/lightbox.pug
68include views/list-group.pug
69include views/table.pug
70include views/alert.pug
71
41 72
42doctype html 73doctype html
43html 74html
@@ -49,674 +80,31 @@ html
49 script(src="script.js") 80 script(src="script.js")
50 81
51 body 82 body
52 +container(padX=true padY=true narrow=true) 83 .c-content
53 84 +view-heading
54 +h1-heading('xl')= 'Heading' 85 +view-rule
55 +rule('medium') 86 +view-colored-links
56 87 +view-badge
57 +box 88 +view-button
58 +div-heading('xxl')= 'XXL Heading' 89 +view-text-field
59 +div-heading('xl')= 'XL Heading' 90 +view-field-label
60 +div-heading('lg')= 'LG Heading' 91 +view-radio
61 +div-heading('md')= 'MD Heading' 92 +view-checkbox
62 +div-heading('sm')= 'SM Heading' 93 +view-switch
63 +div-heading('xs')= 'XS Heading' 94 +view-form
64 95 +view-action-button
65 //----------------------------------------- 96 +view-status-indicator
66 97 +view-avatar
67 +h1-heading('xl')= 'Rule' 98 +view-action-menu
68 +rule('medium') 99 +view-menu
69 100 +view-backdrop
70 +box 101 +view-dialog
71 +div-heading('lg')= 'Heading' 102 +view-lightbox
72 +rule('strong') 103 +view-list-group
73 p= loremIpsum 104 +view-table
74 105 +view-alert
75 +box 106
76 +div-heading('sm')= 'Heading' 107 .c-sidebar
77 +rule('medium') 108 +menu
78 p= loremIpsum 109 each view in views
79 110 +menu-item(tag='a' href='#' + view.id)= view.title
80 +box
81 +div-heading('xs')= 'Heading'
82 +rule('faint')
83 p= loremIpsum
84
85 +box
86 +rule('strong')= 'Strong'
87 +rule('medium')= 'Medium'
88 +rule('faint')= 'Faint'
89
90 //-----------------------------------------
91
92 +h1-heading('xl')= 'Colored links'
93 +rule('medium')
94
95 +box
96 .s-colored-links
97 = 'Lorem ipsum dolor '
98 a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
99 = ' sit amet, consetetur '
100 a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
101 = ' sadipscing elitr, sed diam nonumy eirmod tempor'
102
103 //-----------------------------------------
104
105 +h1-heading('xl')= 'Badge'
106 +rule('medium')
107
108 +box
109 +badge= '100'
110 = ' '
111 +badge('accent')= 'new'
112
113 //-----------------------------------------
114
115 +h1-heading('xl')= 'Button'
116 +rule('medium')
117
118 +box
119 .l-button-group
120 +a-button(variant='accent')= 'Button'
121 +a-button(variant='accent' disabled=true)= 'Button'
122 +a-button(variant='accent' outline=true)= 'Button'
123 +a-button(variant='accent' outline=true disabled=true)= 'Button'
124 br
125 .l-button-group
126 +a-button(variant='primary')= 'Button'
127 +a-button(variant='primary' disabled=true)= 'Button'
128 +a-button(variant='primary' outline=true)= 'Button'
129 +a-button(variant='primary' outline=true disabled=true)= 'Button'
130 br
131 .l-button-group
132 +a-button(variant='secondary')= 'Button'
133 +a-button(variant='secondary' disabled=true)= 'Button'
134 +a-button(variant='secondary' outline=true)= 'Button'
135 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
136
137 //-----------------------------------------
138
139 +h1-heading('xl')= 'Text field'
140 +rule('medium')
141
142 +box
143 div(style={ display: 'flex', gap: '1rem' })
144 +text-field(placeholder='Placeholder')
145 +text-field(value='Just landed in L.A.')
146 +text-field(value='Readonly' readonly=true)
147 +text-field(value='Incorrect input' pattern='a+' required=true)
148 br
149 div(style={ display: 'flex', gap: '1rem' })
150 +text-field(placeholder='Placeholder' disabled=true)
151 +text-field(value='Just landed in L.A.' disabled=true)
152 +text-field(value='Readonly' readonly=true disabled=true)
153 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
154 br
155 div
156 +text-field(placeholder='Just landed in L.A.')
157 +slot('pre')
158 +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
159 +slot('post')
160 +action-button(quiet=true icon='smile' class='l-card__block')
161 +action-button(quiet=true icon='send' class='l-card__block')
162
163 //-----------------------------------------
164
165 +h1-heading('xl')= 'Field label'
166 +rule('medium')
167
168 +box
169 +field-label('First name')
170 +text-field(placeholder='Placeholder')
171 br
172 +field-label('Password', 'At least 6 characters required')
173 +text-field(placeholder='Placeholder' type='password')
174 br
175 +field-label('Password', 'At least 6 characters required')(invalid=true)
176 +text-field(placeholder='Placeholder' type='password' invalid=true)
177 br
178 +field-label('First name')(disabled=true)
179 +text-field(placeholder='Placeholder' disabled=true)
180 br
181 +field-label('Password', 'At least 6 characters required')(disabled=true)
182 +text-field(placeholder='Placeholder' type='password' disabled=true)
183 br
184 +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
185 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
186
187 +box
188 +field-label('First name')(align='left' labelWidth='100px')
189 +text-field(placeholder='Placeholder')
190 br
191 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
192 +text-field(placeholder='Placeholder' type='password')
193 br
194 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
195 +text-field(placeholder='Placeholder' type='password' invalid=true)
196 br
197 +field-label('First name')(align='left' labelWidth='100px' disabled=true)
198 +text-field(placeholder='Placeholder' disabled=true)
199 br
200 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
201 +text-field(placeholder='Placeholder' type='password' disabled=true)
202 br
203 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
204 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
205
206 +box
207 +field-label('First name')(align='right' labelWidth='100px')
208 +text-field(placeholder='Placeholder')
209 br
210 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
211 +text-field(placeholder='Placeholder' type='password')
212 br
213 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
214 +text-field(placeholder='Placeholder' type='password' invalid=true)
215 br
216 +field-label('First name')(align='right' labelWidth='100px' disabled=true)
217 +text-field(placeholder='Placeholder' disabled=true)
218 br
219 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
220 +text-field(placeholder='Placeholder' type='password' disabled=true)
221 br
222 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
223 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
224
225 //-----------------------------------------
226
227 +h1-heading('xl')= 'Radio'
228 +rule('medium')
229
230 +box
231 +radio(name="radio-demo-1")= 'Cats'
232 +radio(name="radio-demo-1")= 'Dogs'
233 +radio(name="radio-demo-1" checked=true)= 'Foxes'
234 br
235 +radio(name="radio-demo-2" disabled=true)= 'Cats'
236 +radio(name="radio-demo-2" disabled=true)= 'Dogs'
237 +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
238 br
239 +radio(accent=true name="radio-demo-3")= 'Cats'
240 +radio(accent=true name="radio-demo-3")= 'Dogs'
241 +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
242 br
243 +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
244 +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
245 +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'
246
247 //-----------------------------------------
248
249 +h1-heading('xl')= 'Checkbox'
250 +rule('medium')
251
252 +box
253 +checkbox(indeterminate=true)= 'Cats'
254 +checkbox= 'Dogs'
255 +checkbox(checked=true)= 'Foxes'
256 br
257 +checkbox(indeterminate=true disabled=true)= 'Cats'
258 +checkbox(disabled=true)= 'Dogs'
259 +checkbox(checked=true disabled=true)= 'Foxes'
260 br
261 +checkbox(accent=true indeterminate=true)= 'Cats'
262 +checkbox(accent=true)= 'Dogs'
263 +checkbox(accent=true checked=true)= 'Foxes'
264 br
265 +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
266 +checkbox(accent=true disabled=true)= 'Dogs'
267 +checkbox(accent=true checked=true disabled=true)= 'Foxes'
268
269 //-----------------------------------------
270
271 +h1-heading('xl')= 'Switch'
272 +rule('medium')
273
274 +box
275 +switch= 'Cats'
276 +switch= 'Dogs'
277 +switch(checked=true)= 'Foxes'
278 br
279 +switch(disabled=true)= 'Cats'
280 +switch(disabled=true)= 'Dogs'
281 +switch(checked=true disabled=true)= 'Foxes'
282 br
283 +switch(accent=true)= 'Cats'
284 +switch(accent=true)= 'Dogs'
285 +switch(accent=true checked=true)= 'Foxes'
286 br
287 +switch(accent=true disabled=true)= 'Cats'
288 +switch(accent=true disabled=true)= 'Dogs'
289 +switch(accent=true checked=true disabled=true)= 'Foxes'
290
291 //-----------------------------------------
292
293 +h1-heading('xl')= 'Form'
294 +rule('medium')
295
296 +box
297 +form(labelsAlign="left")
298 +form-item('Username')
299 +text-field(placeholder='Example: Volpeon')
300
301 +form-item('Password', 'At least 6 characters, all characters allowed')
302 +text-field(placeholder='Example: hunter2' type='password')
303
304 +form-item('Bio')
305 +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
306
307 +form-item('Favorite animal')
308 +radio(name="form-demo-1" checked=true)= 'Foxes'
309 +radio(name="form-demo-1")= 'Other'
310
311 +form-item('Notification settings')
312 +switch= 'In-app notifications'
313 br
314 +switch= 'Desktop notifications'
315 br
316 +switch= 'Email notifications'
317
318 +form-item('')
319 +checkbox= 'I\'ve read and accept the terms and conditions'
320
321 +form-item('')
322 +a-button(variant='primary')= 'Register'
323
324 //-----------------------------------------
325
326 +h1-heading('xl')= 'Action button'
327 +rule('medium')
328
329 +box
330 +action-button= 'Idle'
331 = ' '
332 +action-button(selected=true)= 'Selected'
333 = ' '
334 +action-button(disabled=true)= 'Disabled'
335 = ' '
336 +action-button(selected=true disabled=true)= 'Selected + disabled'
337 br
338 br
339 +action-button(icon='trash')= 'Idle'
340 = ' '
341 +action-button(icon='trash' selected=true)= 'Selected'
342 = ' '
343 +action-button(icon='trash' disabled=true)= 'Disabled'
344 = ' '
345 +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
346 br
347 br
348 +action-button(icon='trash')
349 = ' '
350 +action-button(icon='trash' selected=true)
351 = ' '
352 +action-button(icon='trash' disabled=true)
353 = ' '
354 +action-button(icon='trash' selected=true disabled=true)
355
356 +box
357 +action-button(quiet=true )= 'Idle'
358 = ' '
359 +action-button(quiet=true selected=true)= 'Selected'
360 = ' '
361 +action-button(quiet=true disabled=true)= 'Disabled'
362 = ' '
363 +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
364 br
365 br
366 +action-button(quiet=true icon='trash')= 'Idle'
367 = ' '
368 +action-button(quiet=true icon='trash' selected=true)= 'Selected'
369 = ' '
370 +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
371 = ' '
372 +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
373 br
374 br
375 +action-button(quiet=true icon='trash')
376 = ' '
377 +action-button(quiet=true icon='trash' selected=true)
378 = ' '
379 +action-button(quiet=true icon='trash' disabled=true)
380 = ' '
381 +action-button(quiet=true icon='trash' selected=true disabled=true)
382
383 //-----------------------------------------
384
385 +h1-heading('xl')= 'Status indicator'
386 +rule('medium')
387
388 +box
389 +status-indicator
390 = ' '
391 +status-indicator('green')
392 = ' '
393 +status-indicator('yellow')
394 = ' '
395 +status-indicator('red')
396
397 //-----------------------------------------
398
399 +h1-heading('xl')= 'Avatar'
400 +rule('medium')
401
402 +box
403 div(style={ display: 'flex', gap: '.3em' })
404 +avatar
405 = 'Vo'
406 +avatar(status='green' hue=45)
407 = 'lp'
408 +avatar(src='avatar.png')
409 +avatar(src='avatar.png' status='red')
410 br
411 br
412 div(style={ display: 'flex', gap: '.3em' })
413 +avatar(size='75' hue=90)
414 = 'eo'
415 +avatar(size='75' status='green' hue=135)
416 = 'n'
417 +avatar(size='75' src='avatar.png')
418 +avatar(size='75' src='avatar.png' status='red')
419 br
420 br
421 div(style={ display: 'flex', gap: '.3em' })
422 +avatar(size='50' hue=180)
423 = 'V'
424 +avatar(size='50' hue=225)
425 = 'o'
426 +avatar(size='50' src='avatar.png')
427
428 +box
429 div(style={ display: 'flex', gap: '.3em' })
430 +avatar(circle=true)
431 = 'Vo'
432 +avatar(circle=true status='green' hue=45)
433 = 'lp'
434 +avatar(circle=true src='avatar.png')
435 +avatar(circle=true src='avatar.png' status='red')
436 br
437 br
438 div(style={ display: 'flex', gap: '.3em' })
439 +avatar(circle=true size='75' hue=90)
440 = 'eo'
441 +avatar(circle=true size='75' status='green' hue=135)
442 = 'n'
443 +avatar(circle=true size='75' src='avatar.png')
444 +avatar(circle=true size='75' src='avatar.png' status='red')
445 br
446 br
447 div(style={ display: 'flex', gap: '.3em' })
448 +avatar(circle=true size='50' hue=180)
449 = 'V'
450 +avatar(circle=true size='50' hue=225)
451 = 'o'
452 +avatar(circle=true size='50' src='avatar.png')
453
454 //-----------------------------------------
455
456 +h1-heading('xl')= 'Action menu'
457 +rule('medium')
458
459 +box
460 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
461 +action-button(quiet=true selected=true)= 'Menu'
462 +action-menu
463 +action-menu-slot(class='l-card l-card--flush')
464 +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block')
465 .l-card__block.l-card__block--main
466 strong.u-d-block= 'Volpeon'
467 small.u-d-block= '@volpeon@mk.vulpes.one'
468 +action-menu-separator
469 +action-menu-item(icon='user')= 'View profile'
470 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
471 +action-menu-separator
472 +action-menu-item(icon='trash' disabled=true)= 'Delete'
473 +action-menu-item(icon='bookmark')= 'Bookmark'
474 +action-menu-item(icon='tags')= 'Tags'
475 +action-menu-item(postIcon='chevron-right')= 'More'
476
477 //-----------------------------------------
478
479 +h1-heading('xl')= 'Menu'
480 +rule('medium')
481
482 +box
483 div(style={ display: 'flex', gap: '3rem' })
484 +menu
485 +menu-header= 'Category 1'
486 +menu-item= 'Mark as away'
487 +menu-item= 'Delete'
488 +menu-separator
489 +menu-header= 'Category 2'
490 +menu-item(icon='bookmark')= 'Bookmark'
491 +menu-item(icon='tags')= 'Tags'
492
493 +menu
494 +menu-item
495 strong= 'Bouncer'
496 +menu-separator
497 +menu-item
498 strong= 'Libera'
499 +menu-item(icon='hash')= 'achannel'
500 +menu-item(icon='hash')= 'kitsuneirc'
501 +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
502 +menu-item(icon='red' iconIsStatus=true)= 'someone'
503 +menu-separator
504 +menu-item
505 strong= 'Ergo Testnet'
506 +menu-separator
507 +menu-item
508 strong= 'NixNet'
509
510 +menu
511 +menu-header= 'Operators'
512 +menu-item
513 +user-card('volpeon', 0)
514 +menu-item
515 +user-card('curiousfox', 90)
516 +menu-separator
517 +menu-header= 'Moderators'
518 +menu-item
519 +user-card('user3567', 135)
520 +menu-item
521 +user-card('johndoe', 270)
522
523 //-----------------------------------------
524
525 +h1-heading('xl')= 'Backdrop'
526 +rule('medium')
527
528 +box
529 +backdrop
530
531 //-----------------------------------------
532
533 +h1-heading('xl')= 'Dialog'
534 +rule('medium')
535
536 +box
537 +backdrop
538 +dialog('Lorem ipsum')
539 +slot('body')
540 = loremIpsum
541
542 +box
543 +backdrop
544 +dialog('Lorem ipsum')(bodyClass='l-overflow')
545 +slot('body')
546 p.u-mt-0= loremIpsum
547 p= loremIpsum
548 p= loremIpsum
549 p= loremIpsum
550 p= loremIpsum
551
552 +box
553 +backdrop
554 +dialog('Lorem ipsum')(noRule=true)
555 +slot('sidebar')
556 +menu(style={ 'min-width': '10em' })
557 +menu-header= '#channel'
558 +menu-item(icon='bookmark')= 'Bookmark'
559 +menu-item(icon='tags', selected=true)= 'Tags'
560 +menu-item(icon='hash')= 'achannel'
561 +slot('body')
562 p.u-mt-0= loremIpsum
563
564 //-----------------------------------------
565
566 +h1-heading('xl')= 'Lightbox'
567 +rule('medium')
568
569 +box
570 +backdrop(class='t-dark')
571 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
572 = "Let's try multiple links! "
573 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
574 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
575 = ' '
576 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
577 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
578 = ' '
579 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
580 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
581
582 //-----------------------------------------
583
584 +h1-heading('xl')= 'List group'
585 +rule('medium')
586
587 +box
588 +list-group
589 +list-group-item= 'First item'
590 +list-group-item= 'Second item'
591 +list-group-item= 'Third item'
592 +list-group-item= 'Fourth item'
593
594 +box
595 +list-group
596 +list-group-item(action=true)= 'First item'
597 +list-group-item(action=true)= 'Second item'
598 +list-group-item(action=true)= 'Third item'
599 +list-group-item(action=true)= 'Fourth item'
600
601 //-----------------------------------------
602
603 +h1-heading('xl')= 'Table'
604 +rule('medium')
605
606 +box
607 +table(interactive=true)
608 +table-head
609 +table-row
610 +table-head-cell= 'Title'
611 +table-head-cell= 'Title'
612 +table-head-cell= 'Title'
613 +table-body
614 +table-row
615 +table-cell= 'Row 1,1'
616 +table-cell= 'Row 1,2'
617 +table-cell= 'Row 1,3'
618 +table-row
619 +table-cell= 'Row 2,1'
620 +table-cell= 'Row 2,2'
621 +table-cell= 'Row 2,3'
622 +table-row
623 +table-cell= 'Row 3,1'
624 +table-cell= 'Row 3,2'
625 +table-cell= 'Row 3,3'
626 +table-row
627 +table-cell= 'Row 4,1'
628 +table-cell= 'Row 4,2'
629 +table-cell= 'Row 4,3'
630
631 +box
632 +table(flush=true)
633 +table-head
634 +table-row
635 +table-head-cell= 'Title'
636 +table-head-cell= 'Title'
637 +table-head-cell= 'Title'
638 +table-body
639 +table-row
640 +table-cell= 'Row 1,1'
641 +table-cell= 'Row 1,2'
642 +table-cell= 'Row 1,3'
643 +table-row
644 +table-cell= 'Row 2,1'
645 +table-cell= 'Row 2,2'
646 +table-cell= 'Row 2,3'
647 +table-row
648 +table-cell= 'Row 3,1'
649 +table-cell= 'Row 3,2'
650 +table-cell= 'Row 3,3'
651 +table-row
652 +table-cell= 'Row 4,1'
653 +table-cell= 'Row 4,2'
654 +table-cell= 'Row 4,3'
655
656 +box
657 +table(box=true)
658 +table-head
659 +table-row
660 +table-head-cell= 'Title'
661 +table-head-cell= 'Title'
662 +table-head-cell= 'Title'
663 +table-body
664 +table-row
665 +table-cell(divider=true)= 'Row 1,1'
666 +table-cell= 'Row 1,2'
667 +table-cell= 'Row 1,3'
668 +table-row
669 +table-cell(divider=true)= 'Row 2,1'
670 +table-cell= 'Row 2,2'
671 +table-cell= 'Row 2,3'
672 +table-row
673 +table-cell(divider=true)= 'Row 3,1'
674 +table-cell= 'Row 3,2'
675 +table-cell= 'Row 3,3'
676 +table-row
677 +table-cell(divider=true)= 'Row 4,1'
678 +table-cell= 'Row 4,2'
679 +table-cell= 'Row 4,3'
680
681 +box
682 +table(box=true, size50=true)
683 +table-head
684 +table-row
685 +table-head-cell= 'Title'
686 +table-head-cell= 'Title'
687 +table-head-cell= 'Title'
688 +table-body
689 +table-row
690 +table-cell= 'Row 1,1'
691 +table-cell= 'Row 1,2'
692 +table-cell= 'Row 1,3'
693 +table-row
694 +table-cell= 'Row 2,1'
695 +table-cell= 'Row 2,2'
696 +table-cell= 'Row 2,3'
697 +table-row
698 +table-cell= 'Row 3,1'
699 +table-cell= 'Row 3,2'
700 +table-cell= 'Row 3,3'
701 +table-row
702 +table-cell= 'Row 4,1'
703 +table-cell= 'Row 4,2'
704 +table-cell= 'Row 4,3'
705
706 //-----------------------------------------
707
708 +h1-heading('xl')= 'Alert'
709 +rule('medium')
710
711 +box
712 +alert= loremIpsum
713 br
714 +alert('primary')= loremIpsum
715 br
716 +alert('error')= loremIpsum
717 br
718 +alert('success')= loremIpsum
719 br
720 +alert('warning')= loremIpsum
721
722
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 0c9b6ec..c1affc4 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -12,7 +12,10 @@ mixin container
12 if (!!attributes.theme) { 12 if (!!attributes.theme) {
13 classes['t-' + attributes.theme] = true 13 classes['t-' + attributes.theme] = true
14 } 14 }
15 if (attributes.class) {
16 classes[attributes.class] = true
17 }
15 18
16 div(class=classes) 19 div(class=classes)&attributes(attributes)
17 .l-container__inner 20 .l-container__inner
18 block 21 block
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 12726a3..2823e41 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -30,7 +30,7 @@ mixin dialog(title)
30 .o-dialog__sidebar 30 .o-dialog__sidebar
31 - slots.sidebar() 31 - slots.sidebar()
32 header.o-dialog__header 32 header.o-dialog__header
33 +div-heading('lg')(class='o-dialog__title') 33 +div-heading('md')(class='o-dialog__title')
34 = title 34 = title
35 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') 35 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
36 section(class=bodyClass) 36 section(class=bodyClass)
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 84321d7..c6e8223 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -18,7 +18,7 @@ mixin menu-item
18 'is-selected': attributes.selected, 18 'is-selected': attributes.selected,
19 } 19 }
20 20
21 button(class=classes, disabled=attributes.disabled) 21 #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
22 .l-card.l-card--flush.l-card--75 22 .l-card.l-card--flush.l-card--75
23 if attributes.icon 23 if attributes.icon
24 .l-card__block.o-menu__icon-slot 24 .l-card__block.o-menu__icon-slot
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
new file mode 100644
index 0000000..7bffe72
--- /dev/null
+++ b/tpl/views/action-button.pug
@@ -0,0 +1,55 @@
1mixin view-action-button
2 +view('action-button', 'Action button')
3 .c-box
4 +action-button= 'Idle'
5 = ' '
6 +action-button(selected=true)= 'Selected'
7 = ' '
8 +action-button(disabled=true)= 'Disabled'
9 = ' '
10 +action-button(selected=true disabled=true)= 'Selected + disabled'
11 br
12 br
13 +action-button(icon='trash')= 'Idle'
14 = ' '
15 +action-button(icon='trash' selected=true)= 'Selected'
16 = ' '
17 +action-button(icon='trash' disabled=true)= 'Disabled'
18 = ' '
19 +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
20 br
21 br
22 +action-button(icon='trash')
23 = ' '
24 +action-button(icon='trash' selected=true)
25 = ' '
26 +action-button(icon='trash' disabled=true)
27 = ' '
28 +action-button(icon='trash' selected=true disabled=true)
29
30 .c-box
31 +action-button(quiet=true )= 'Idle'
32 = ' '
33 +action-button(quiet=true selected=true)= 'Selected'
34 = ' '
35 +action-button(quiet=true disabled=true)= 'Disabled'
36 = ' '
37 +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
38 br
39 br
40 +action-button(quiet=true icon='trash')= 'Idle'
41 = ' '
42 +action-button(quiet=true icon='trash' selected=true)= 'Selected'
43 = ' '
44 +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
45 = ' '
46 +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
47 br
48 br
49 +action-button(quiet=true icon='trash')
50 = ' '
51 +action-button(quiet=true icon='trash' selected=true)
52 = ' '
53 +action-button(quiet=true icon='trash' disabled=true)
54 = ' '
55 +action-button(quiet=true icon='trash' selected=true disabled=true)
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug
new file mode 100644
index 0000000..4f96934
--- /dev/null
+++ b/tpl/views/action-menu.pug
@@ -0,0 +1,19 @@
1mixin view-action-menu
2 +view('action-menu', 'Action menu')
3 .c-box
4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
5 +action-button(quiet=true selected=true)= 'Menu'
6 +action-menu
7 +action-menu-slot(class='l-card l-card--flush')
8 +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block')
9 .l-card__block.l-card__block--main
10 strong.u-d-block= 'Volpeon'
11 small.u-d-block= '@volpeon@mk.vulpes.one'
12 +action-menu-separator
13 +action-menu-item(icon='user')= 'View profile'
14 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
15 +action-menu-separator
16 +action-menu-item(icon='trash' disabled=true)= 'Delete'
17 +action-menu-item(icon='bookmark')= 'Bookmark'
18 +action-menu-item(icon='tags')= 'Tags'
19 +action-menu-item(postIcon='chevron-right')= 'More'
diff --git a/tpl/views/alert.pug b/tpl/views/alert.pug
new file mode 100644
index 0000000..c176279
--- /dev/null
+++ b/tpl/views/alert.pug
@@ -0,0 +1,12 @@
1mixin view-alert
2 +view('alert', 'Alert')
3 .c-box
4 +alert= loremIpsum
5 br
6 +alert('primary')= loremIpsum
7 br
8 +alert('error')= loremIpsum
9 br
10 +alert('success')= loremIpsum
11 br
12 +alert('warning')= loremIpsum
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
new file mode 100644
index 0000000..01aaf93
--- /dev/null
+++ b/tpl/views/avatar.pug
@@ -0,0 +1,53 @@
1mixin view-avatar
2 +view('avatar', 'Avatar')
3 .c-box
4 div(style={ display: 'flex', gap: '.3em' })
5 +avatar
6 = 'Vo'
7 +avatar(status='green' hue=45)
8 = 'lp'
9 +avatar(src='avatar.png')
10 +avatar(src='avatar.png' status='red')
11 br
12 br
13 div(style={ display: 'flex', gap: '.3em' })
14 +avatar(size='75' hue=90)
15 = 'eo'
16 +avatar(size='75' status='green' hue=135)
17 = 'n'
18 +avatar(size='75' src='avatar.png')
19 +avatar(size='75' src='avatar.png' status='red')
20 br
21 br
22 div(style={ display: 'flex', gap: '.3em' })
23 +avatar(size='50' hue=180)
24 = 'V'
25 +avatar(size='50' hue=225)
26 = 'o'
27 +avatar(size='50' src='avatar.png')
28
29 .c-box
30 div(style={ display: 'flex', gap: '.3em' })
31 +avatar(circle=true)
32 = 'Vo'
33 +avatar(circle=true status='green' hue=45)
34 = 'lp'
35 +avatar(circle=true src='avatar.png')
36 +avatar(circle=true src='avatar.png' status='red')
37 br
38 br
39 div(style={ display: 'flex', gap: '.3em' })
40 +avatar(circle=true size='75' hue=90)
41 = 'eo'
42 +avatar(circle=true size='75' status='green' hue=135)
43 = 'n'
44 +avatar(circle=true size='75' src='avatar.png')
45 +avatar(circle=true size='75' src='avatar.png' status='red')
46 br
47 br
48 div(style={ display: 'flex', gap: '.3em' })
49 +avatar(circle=true size='50' hue=180)
50 = 'V'
51 +avatar(circle=true size='50' hue=225)
52 = 'o'
53 +avatar(circle=true size='50' src='avatar.png')
diff --git a/tpl/views/backdrop.pug b/tpl/views/backdrop.pug
new file mode 100644
index 0000000..d4fadce
--- /dev/null
+++ b/tpl/views/backdrop.pug
@@ -0,0 +1,4 @@
1mixin view-backdrop
2 +view('backdrop', 'Backdrop')
3 .c-box
4 +backdrop
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
new file mode 100644
index 0000000..9b2c3e6
--- /dev/null
+++ b/tpl/views/badge.pug
@@ -0,0 +1,6 @@
1mixin view-badge
2 +view('badge', 'Badge')
3 .c-box
4 +badge= '100'
5 = ' '
6 +badge('accent')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
new file mode 100644
index 0000000..9deba01
--- /dev/null
+++ b/tpl/views/button.pug
@@ -0,0 +1,20 @@
1mixin view-button
2 +view('button', 'Button')
3 .c-box
4 .l-button-group
5 +a-button(variant='accent')= 'Button'
6 +a-button(variant='accent' disabled=true)= 'Button'
7 +a-button(variant='accent' outline=true)= 'Button'
8 +a-button(variant='accent' outline=true disabled=true)= 'Button'
9 br
10 .l-button-group
11 +a-button(variant='primary')= 'Button'
12 +a-button(variant='primary' disabled=true)= 'Button'
13 +a-button(variant='primary' outline=true)= 'Button'
14 +a-button(variant='primary' outline=true disabled=true)= 'Button'
15 br
16 .l-button-group
17 +a-button(variant='secondary')= 'Button'
18 +a-button(variant='secondary' disabled=true)= 'Button'
19 +a-button(variant='secondary' outline=true)= 'Button'
20 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
diff --git a/tpl/views/checkbox.pug b/tpl/views/checkbox.pug
new file mode 100644
index 0000000..8f925af
--- /dev/null
+++ b/tpl/views/checkbox.pug
@@ -0,0 +1,18 @@
1mixin view-checkbox
2 +view('checkbox', 'Checkbox')
3 .c-box
4 +checkbox(indeterminate=true)= 'Cats'
5 +checkbox= 'Dogs'
6 +checkbox(checked=true)= 'Foxes'
7 br
8 +checkbox(indeterminate=true disabled=true)= 'Cats'
9 +checkbox(disabled=true)= 'Dogs'
10 +checkbox(checked=true disabled=true)= 'Foxes'
11 br
12 +checkbox(accent=true indeterminate=true)= 'Cats'
13 +checkbox(accent=true)= 'Dogs'
14 +checkbox(accent=true checked=true)= 'Foxes'
15 br
16 +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
17 +checkbox(accent=true disabled=true)= 'Dogs'
18 +checkbox(accent=true checked=true disabled=true)= 'Foxes'
diff --git a/tpl/views/colored-links.pug b/tpl/views/colored-links.pug
new file mode 100644
index 0000000..8951154
--- /dev/null
+++ b/tpl/views/colored-links.pug
@@ -0,0 +1,9 @@
1mixin view-colored-links
2 +view('colored-links', 'Colored links')
3 .c-box
4 .s-colored-links
5 = 'Lorem ipsum dolor '
6 a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
7 = ' sit amet, consetetur '
8 a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
9 = ' sadipscing elitr, sed diam nonumy eirmod tempor'
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
new file mode 100644
index 0000000..6aaead5
--- /dev/null
+++ b/tpl/views/dialog.pug
@@ -0,0 +1,29 @@
1mixin view-dialog
2 +view('dialog', 'Dialog')
3 .c-box
4 +backdrop
5 +dialog('Lorem ipsum')
6 +slot('body')
7 = loremIpsum
8
9 .c-box
10 +backdrop
11 +dialog('Lorem ipsum')(bodyClass='l-overflow')
12 +slot('body')
13 p.u-mt-0= loremIpsum
14 p= loremIpsum
15 p= loremIpsum
16 p= loremIpsum
17 p= loremIpsum
18
19 .c-box
20 +backdrop
21 +dialog('Lorem ipsum')(noRule=true)
22 +slot('sidebar')
23 +menu(style={ 'min-width': '10em' })
24 +menu-header= '#channel'
25 +menu-item(icon='bookmark')= 'Bookmark'
26 +menu-item(icon='tags', selected=true)= 'Tags'
27 +menu-item(icon='hash')= 'achannel'
28 +slot('body')
29 p.u-mt-0= loremIpsum
diff --git a/tpl/views/field-label.pug b/tpl/views/field-label.pug
new file mode 100644
index 0000000..37ffb1a
--- /dev/null
+++ b/tpl/views/field-label.pug
@@ -0,0 +1,58 @@
1mixin view-field-label
2 +view('field-label', 'Field label')
3 .c-box
4 +field-label('First name')
5 +text-field(placeholder='Placeholder')
6 br
7 +field-label('Password', 'At least 6 characters required')
8 +text-field(placeholder='Placeholder' type='password')
9 br
10 +field-label('Password', 'At least 6 characters required')(invalid=true)
11 +text-field(placeholder='Placeholder' type='password' invalid=true)
12 br
13 +field-label('First name')(disabled=true)
14 +text-field(placeholder='Placeholder' disabled=true)
15 br
16 +field-label('Password', 'At least 6 characters required')(disabled=true)
17 +text-field(placeholder='Placeholder' type='password' disabled=true)
18 br
19 +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
20 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
21
22 .c-box
23 +field-label('First name')(align='left' labelWidth='100px')
24 +text-field(placeholder='Placeholder')
25 br
26 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
27 +text-field(placeholder='Placeholder' type='password')
28 br
29 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
30 +text-field(placeholder='Placeholder' type='password' invalid=true)
31 br
32 +field-label('First name')(align='left' labelWidth='100px' disabled=true)
33 +text-field(placeholder='Placeholder' disabled=true)
34 br
35 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
36 +text-field(placeholder='Placeholder' type='password' disabled=true)
37 br
38 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
39 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
40
41 .c-box
42 +field-label('First name')(align='right' labelWidth='100px')
43 +text-field(placeholder='Placeholder')
44 br
45 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
46 +text-field(placeholder='Placeholder' type='password')
47 br
48 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
49 +text-field(placeholder='Placeholder' type='password' invalid=true)
50 br
51 +field-label('First name')(align='right' labelWidth='100px' disabled=true)
52 +text-field(placeholder='Placeholder' disabled=true)
53 br
54 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
55 +text-field(placeholder='Placeholder' type='password' disabled=true)
56 br
57 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
58 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
diff --git a/tpl/views/form.pug b/tpl/views/form.pug
new file mode 100644
index 0000000..859e9a6
--- /dev/null
+++ b/tpl/views/form.pug
@@ -0,0 +1,29 @@
1mixin view-form
2 +view('form', 'Form')
3 .c-box
4 +form(labelsAlign="left")
5 +form-item('Username')
6 +text-field(placeholder='Example: Volpeon')
7
8 +form-item('Password', 'At least 6 characters, all characters allowed')
9 +text-field(placeholder='Example: hunter2' type='password')
10
11 +form-item('Bio')
12 +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
13
14 +form-item('Favorite animal')
15 +radio(name="form-demo-1" checked=true)= 'Foxes'
16 +radio(name="form-demo-1")= 'Other'
17
18 +form-item('Notification settings')
19 +switch= 'In-app notifications'
20 br
21 +switch= 'Desktop notifications'
22 br
23 +switch= 'Email notifications'
24
25 +form-item('')
26 +checkbox= 'I\'ve read and accept the terms and conditions'
27
28 +form-item('')
29 +a-button(variant='primary')= 'Register'
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
new file mode 100644
index 0000000..a49c93d
--- /dev/null
+++ b/tpl/views/heading.pug
@@ -0,0 +1,9 @@
1mixin view-heading
2 +view('heading', 'Heading')
3 .c-box
4 +div-heading('xxl')= 'XXL Heading'
5 +div-heading('xl')= 'XL Heading'
6 +div-heading('lg')= 'LG Heading'
7 +div-heading('md')= 'MD Heading'
8 +div-heading('sm')= 'SM Heading'
9 +div-heading('xs')= 'XS Heading'
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
new file mode 100644
index 0000000..174e904
--- /dev/null
+++ b/tpl/views/lightbox.pug
@@ -0,0 +1,14 @@
1mixin view-lightbox
2 +view('lightbox', 'Lightbox')
3 .c-box
4 +backdrop(class='t-dark')
5 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
6 = "Let's try multiple links! "
7 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
8 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
9 = ' '
10 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
11 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
12 = ' '
13 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
14 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
new file mode 100644
index 0000000..970f0fb
--- /dev/null
+++ b/tpl/views/list-group.pug
@@ -0,0 +1,15 @@
1mixin view-list-group
2 +view('list-group', 'List group')
3 .c-box
4 +list-group
5 +list-group-item= 'First item'
6 +list-group-item= 'Second item'
7 +list-group-item= 'Third item'
8 +list-group-item= 'Fourth item'
9
10 .c-box
11 +list-group
12 +list-group-item(action=true)= 'First item'
13 +list-group-item(action=true)= 'Second item'
14 +list-group-item(action=true)= 'Third item'
15 +list-group-item(action=true)= 'Fourth item'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
new file mode 100644
index 0000000..a255999
--- /dev/null
+++ b/tpl/views/menu.pug
@@ -0,0 +1,42 @@
1mixin view-menu
2 +view('menu', 'Menu')
3 .c-box
4 div(style={ display: 'flex', gap: '3rem' })
5 +menu
6 +menu-header= 'Category 1'
7 +menu-item= 'Mark as away'
8 +menu-item= 'Delete'
9 +menu-separator
10 +menu-header= 'Category 2'
11 +menu-item(icon='bookmark')= 'Bookmark'
12 +menu-item(icon='tags')= 'Tags'
13
14 +menu
15 +menu-item
16 strong= 'Bouncer'
17 +menu-separator
18 +menu-item
19 strong= 'Libera'
20 +menu-item(icon='hash')= 'achannel'
21 +menu-item(icon='hash')= 'kitsuneirc'
22 +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
23 +menu-item(icon='red' iconIsStatus=true)= 'someone'
24 +menu-separator
25 +menu-item
26 strong= 'Ergo Testnet'
27 +menu-separator
28 +menu-item
29 strong= 'NixNet'
30
31 +menu
32 +menu-header= 'Operators'
33 +menu-item
34 +user-card('volpeon', 0)
35 +menu-item
36 +user-card('curiousfox', 90)
37 +menu-separator
38 +menu-header= 'Moderators'
39 +menu-item
40 +user-card('user3567', 135)
41 +menu-item
42 +user-card('johndoe', 270)
diff --git a/tpl/views/radio.pug b/tpl/views/radio.pug
new file mode 100644
index 0000000..283bb4e
--- /dev/null
+++ b/tpl/views/radio.pug
@@ -0,0 +1,18 @@
1mixin view-radio
2 +view('radio', 'Radio')
3 .c-box
4 +radio(name="radio-demo-1")= 'Cats'
5 +radio(name="radio-demo-1")= 'Dogs'
6 +radio(name="radio-demo-1" checked=true)= 'Foxes'
7 br
8 +radio(name="radio-demo-2" disabled=true)= 'Cats'
9 +radio(name="radio-demo-2" disabled=true)= 'Dogs'
10 +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
11 br
12 +radio(accent=true name="radio-demo-3")= 'Cats'
13 +radio(accent=true name="radio-demo-3")= 'Dogs'
14 +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
15 br
16 +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
17 +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
18 +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'
diff --git a/tpl/views/rule.pug b/tpl/views/rule.pug
new file mode 100644
index 0000000..495c804
--- /dev/null
+++ b/tpl/views/rule.pug
@@ -0,0 +1,21 @@
1mixin view-rule
2 +view('rule', 'Rule')
3 .c-box
4 +div-heading('lg')= 'Heading'
5 +rule('strong')
6 p= loremIpsum
7
8 .c-box
9 +div-heading('sm')= 'Heading'
10 +rule('medium')
11 p= loremIpsum
12
13 .c-box
14 +div-heading('xs')= 'Heading'
15 +rule('faint')
16 p= loremIpsum
17
18 .c-box
19 +rule('strong')= 'Strong'
20 +rule('medium')= 'Medium'
21 +rule('faint')= 'Faint'
diff --git a/tpl/views/status-indicator.pug b/tpl/views/status-indicator.pug
new file mode 100644
index 0000000..6d7ad30
--- /dev/null
+++ b/tpl/views/status-indicator.pug
@@ -0,0 +1,10 @@
1mixin view-status-indicator
2 +view('status-indicator', 'Status indicator')
3 .c-box
4 +status-indicator
5 = ' '
6 +status-indicator('green')
7 = ' '
8 +status-indicator('yellow')
9 = ' '
10 +status-indicator('red')
diff --git a/tpl/views/switch.pug b/tpl/views/switch.pug
new file mode 100644
index 0000000..f51077d
--- /dev/null
+++ b/tpl/views/switch.pug
@@ -0,0 +1,18 @@
1mixin view-switch
2 +view('switch', 'Switch')
3 .c-box
4 +switch= 'Cats'
5 +switch= 'Dogs'
6 +switch(checked=true)= 'Foxes'
7 br
8 +switch(disabled=true)= 'Cats'
9 +switch(disabled=true)= 'Dogs'
10 +switch(checked=true disabled=true)= 'Foxes'
11 br
12 +switch(accent=true)= 'Cats'
13 +switch(accent=true)= 'Dogs'
14 +switch(accent=true checked=true)= 'Foxes'
15 br
16 +switch(accent=true disabled=true)= 'Cats'
17 +switch(accent=true disabled=true)= 'Dogs'
18 +switch(accent=true checked=true disabled=true)= 'Foxes'
diff --git a/tpl/views/table.pug b/tpl/views/table.pug
new file mode 100644
index 0000000..a5f62a7
--- /dev/null
+++ b/tpl/views/table.pug
@@ -0,0 +1,101 @@
1mixin view-table
2 +view('table', 'Table')
3 .c-box
4 +table(interactive=true)
5 +table-head
6 +table-row
7 +table-head-cell= 'Title'
8 +table-head-cell= 'Title'
9 +table-head-cell= 'Title'
10 +table-body
11 +table-row
12 +table-cell= 'Row 1,1'
13 +table-cell= 'Row 1,2'
14 +table-cell= 'Row 1,3'
15 +table-row
16 +table-cell= 'Row 2,1'
17 +table-cell= 'Row 2,2'
18 +table-cell= 'Row 2,3'
19 +table-row
20 +table-cell= 'Row 3,1'
21 +table-cell= 'Row 3,2'
22 +table-cell= 'Row 3,3'
23 +table-row
24 +table-cell= 'Row 4,1'
25 +table-cell= 'Row 4,2'
26 +table-cell= 'Row 4,3'
27
28 .c-box
29 +table(flush=true)
30 +table-head
31 +table-row
32 +table-head-cell= 'Title'
33 +table-head-cell= 'Title'
34 +table-head-cell= 'Title'
35 +table-body
36 +table-row
37 +table-cell= 'Row 1,1'
38 +table-cell= 'Row 1,2'
39 +table-cell= 'Row 1,3'
40 +table-row
41 +table-cell= 'Row 2,1'
42 +table-cell= 'Row 2,2'
43 +table-cell= 'Row 2,3'
44 +table-row
45 +table-cell= 'Row 3,1'
46 +table-cell= 'Row 3,2'
47 +table-cell= 'Row 3,3'
48 +table-row
49 +table-cell= 'Row 4,1'
50 +table-cell= 'Row 4,2'
51 +table-cell= 'Row 4,3'
52
53 .c-box
54 +table(box=true)
55 +table-head
56 +table-row
57 +table-head-cell= 'Title'
58 +table-head-cell= 'Title'
59 +table-head-cell= 'Title'
60 +table-body
61 +table-row
62 +table-cell(divider=true)= 'Row 1,1'
63 +table-cell= 'Row 1,2'
64 +table-cell= 'Row 1,3'
65 +table-row
66 +table-cell(divider=true)= 'Row 2,1'
67 +table-cell= 'Row 2,2'
68 +table-cell= 'Row 2,3'
69 +table-row
70 +table-cell(divider=true)= 'Row 3,1'
71 +table-cell= 'Row 3,2'
72 +table-cell= 'Row 3,3'
73 +table-row
74 +table-cell(divider=true)= 'Row 4,1'
75 +table-cell= 'Row 4,2'
76 +table-cell= 'Row 4,3'
77
78 .c-box
79 +table(box=true, size50=true)
80 +table-head
81 +table-row
82 +table-head-cell= 'Title'
83 +table-head-cell= 'Title'
84 +table-head-cell= 'Title'
85 +table-body
86 +table-row
87 +table-cell= 'Row 1,1'
88 +table-cell= 'Row 1,2'
89 +table-cell= 'Row 1,3'
90 +table-row
91 +table-cell= 'Row 2,1'
92 +table-cell= 'Row 2,2'
93 +table-cell= 'Row 2,3'
94 +table-row
95 +table-cell= 'Row 3,1'
96 +table-cell= 'Row 3,2'
97 +table-cell= 'Row 3,3'
98 +table-row
99 +table-cell= 'Row 4,1'
100 +table-cell= 'Row 4,2'
101 +table-cell= 'Row 4,3'
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
new file mode 100644
index 0000000..0ba84be
--- /dev/null
+++ b/tpl/views/text-field.pug
@@ -0,0 +1,22 @@
1mixin view-text-field
2 +view('text-field', 'Text field')
3 .c-box
4 div(style={ display: 'flex', gap: '1rem' })
5 +text-field(placeholder='Placeholder')
6 +text-field(value='Just landed in L.A.')
7 +text-field(value='Readonly' readonly=true)
8 +text-field(value='Incorrect input' pattern='a+' required=true)
9 br
10 div(style={ display: 'flex', gap: '1rem' })
11 +text-field(placeholder='Placeholder' disabled=true)
12 +text-field(value='Just landed in L.A.' disabled=true)
13 +text-field(value='Readonly' readonly=true disabled=true)
14 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
15 br
16 div
17 +text-field(placeholder='Just landed in L.A.')
18 +slot('pre')
19 +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
20 +slot('post')
21 +action-button(quiet=true icon='smile' class='l-card__block')
22 +action-button(quiet=true icon='send' class='l-card__block')
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 06:35:53 +0000