blob: 7dab86f4368e782b59e6300c66f9158f184e78f0 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
-
let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'
include layouts/container.pug
include objects/heading.pug
include objects/rule.pug
include objects/button.pug
include objects/text-field.pug
mixin box
+container(padX=true padY=true inPage=true theme="raised")
block
doctype html
html
head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1')
title iro-design
link(rel="stylesheet" href="style.css")
script(src="script.js")
body
+container(padX=true padY=true narrow=true)
+h1-heading(level='xl')= 'Heading'
+rule(level='medium')
+box
+div-heading(level='xxl')= 'XXL Heading'
+div-heading(level='xl')= 'XL Heading'
+div-heading(level='lg')= 'LG Heading'
+div-heading(level='md')= 'MD Heading'
+div-heading(level='sm')= 'SM Heading'
+div-heading(level='xs')= 'XS Heading'
//-----------------------------------------
+h1-heading(level='xl')= 'Rule'
+rule(level='medium')
+box
+div-heading(level='lg')= 'Heading'
+rule(level='strong')
p= loremIpsum
+box
+div-heading(level='sm')= 'Heading'
+rule(level='medium')
p= loremIpsum
+box
+div-heading(level='xs')= 'Heading'
+rule(level='faint')
p= loremIpsum
+box
+rule(level='strong')= 'Strong'
+rule(level='medium')= 'Medium'
+rule(level='faint')= 'Faint'
//-----------------------------------------
+h1-heading(level='xl')= 'Button'
+rule(level='medium')
+box
+a-button(variant='accent')= 'Button'
= ' '
+a-button(variant='accent' disabled=true)= 'Button'
= ' '
+a-button(variant='accent' outline=true)= 'Button'
= ' '
+a-button(variant='accent' outline=true disabled=true)= 'Button'
br
br
+a-button(variant='primary')= 'Button'
= ' '
+a-button(variant='primary' disabled=true)= 'Button'
= ' '
+a-button(variant='primary' outline=true)= 'Button'
= ' '
+a-button(variant='primary' outline=true disabled=true)= 'Button'
br
br
+a-button(variant='secondary')= 'Button'
= ' '
+a-button(variant='secondary' disabled=true)= 'Button'
= ' '
+a-button(variant='secondary' outline=true)= 'Button'
= ' '
+a-button(variant='secondary' outline=true disabled=true)= 'Button'
//-----------------------------------------
+h1-heading(level='xl')= 'Text field'
+rule(level='medium')
+box
+text-field(placeholder='Placeholder')
br
br
+text-field(value='Just landed in L.A.')
br
br
+text-field(value='Readonly' readonly=true)
br
br
+text-field(value='Incorrect input' pattern='a+' required=true)
br
br
+text-field(placeholder='Placeholder' disabled=true)
br
br
+text-field(value='Just landed in L.A.' disabled=true)
br
br
+text-field(value='Readonly' readonly=true disabled=true)
br
br
+text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
|
