-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocumentation.html
199 lines (192 loc) · 8.36 KB
/
documentation.html
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wizzer Documentation</title>
<link rel="stylesheet" href="scss/wizzer.css">
</head>
<body>
<h1>Wizzer Framework</h1>
<p>Framework básico com os componentes suficientes para dar um start em seu projeto.</p>
<h2>Mensagens de erro e avisos:</h2>
<p class="primario">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur modi voluptates?</p>
<p class="secundario">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur modi voluptates?</p>
<p class="sucesso">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur modi voluptates?</p>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur modi voluptates?</p>
<p class="atencao">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur modi voluptates?</p>
<p class="alerta">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur modi voluptates?</p>
<h2>Botões</h2>
<h3>Estado padrão:</h3>
<table style="text-align: center">
<thead>
<tr>
<th>Tipo</th>
<th>Normal</th>
<th>Primário</th>
<th>Secundário</th>
<th>Sucesso</th>
<th>Informação</th>
<th>Atenção</th>
<th>Alerta</th>
</tr>
</thead>
<tbody>
<tr>
<td>Padrão</td>
<td><button class="btn">Botão</button></td>
<td><button class="btn primario">Botão</button></td>
<td><button class="btn secundario">Botão</button></td>
<td><button class="btn sucesso">Botão</button></td>
<td><button class="btn info">Botão</button></td>
<td><button class="btn atencao">Botão</button></td>
<td><button class="btn alerta">Botão</button></td>
</tr>
<tr>
<td>Linha</td>
<td><button class="btn linha">Botão</button></td>
<td><button class="btn primario linha">Botão</button></td>
<td><button class="btn secundario linha">Botão</button></td>
<td><button class="btn sucesso linha">Botão</button></td>
<td><button class="btn info linha">Botão</button></td>
<td><button class="btn atencao linha">Botão</button></td>
<td><button class="btn alerta linha">Botão</button></td>
</tr>
<tr>
<td>Redondo</td>
<td><button class="btn circle">B</button></td>
<td><button class="btn primario circle">B</button></td>
<td><button class="btn secundario circle">B</button></td>
<td><button class="btn sucesso circle">B</button></td>
<td><button class="btn info circle">B</button></td>
<td><button class="btn atencao circle">B</button></td>
<td><button class="btn alerta circle">B</button></td>
</tr>
<tr>
<td>Redondo-Linha</td>
<td><button class="btn circle linha">B</button></td>
<td><button class="btn primario circle linha">B</button></td>
<td><button class="btn secundario circle linha">B</button></td>
<td><button class="btn sucesso circle linha">B</button></td>
<td><button class="btn info circle linha">B</button></td>
<td><button class="btn atencao circle linha">B</button></td>
<td><button class="btn alerta circle linha">B</button></td>
</tr>
</tbody>
</table>
<h3>Estado Desativado:</h3>
<table style="text-align: center">
<thead>
<tr>
<th>Tipo</th>
<th>Normal</th>
<th>Primário</th>
<th>Secundário</th>
<th>Sucesso</th>
<th>Informação</th>
<th>Atenção</th>
<th>Alerta</th>
</tr>
</thead>
<tbody>
<tr>
<td>Padrão</td>
<td><button class="btn desativado">Botão</button></td>
<td><button class="btn primario desativado">Botão</button></td>
<td><button class="btn secundario desativado">Botão</button></td>
<td><button class="btn sucesso desativado">Botão</button></td>
<td><button class="btn info desativado">Botão</button></td>
<td><button class="btn atencao desativado">Botão</button></td>
<td><button class="btn alerta desativado">Botão</button></td>
</tr>
<tr>
<td>Linha</td>
<td><button class="btn linha desativado">Botão</button></td>
<td><button class="btn primario linha desativado">Botão</button></td>
<td><button class="btn secundario linha desativado">Botão</button></td>
<td><button class="btn sucesso linha desativado">Botão</button></td>
<td><button class="btn info linha desativado">Botão</button></td>
<td><button class="btn atencao linha desativado">Botão</button></td>
<td><button class="btn alerta linha desativado">Botão</button></td>
</tr>
<tr>
<td>Redondo</td>
<td><button class="btn circle desativado">B</button></td>
<td><button class="btn primario circle desativado">B</button></td>
<td><button class="btn secundario circle desativado">B</button></td>
<td><button class="btn sucesso circle desativado">B</button></td>
<td><button class="btn info circle desativado">B</button></td>
<td><button class="btn atencao circle desativado">B</button></td>
<td><button class="btn alerta circle desativado">B</button></td>
</tr>
<tr>
<td>Redondo-Linha</td>
<td><button class="btn circle linha desativado">B</button></td>
<td><button class="btn primario circle linha desativado">B</button></td>
<td><button class="btn secundario circle linha desativado">B</button></td>
<td><button class="btn sucesso circle linha desativado">B</button></td>
<td><button class="btn info circle linha desativado">B</button></td>
<td><button class="btn atencao circle linha desativado">B</button></td>
<td><button class="btn alerta circle linha desativado">B</button></td>
</tr>
</tbody>
</table>
<h3>Estado Ativado:</h3>
<table style="text-align: center">
<thead>
<tr>
<th>Tipo</th>
<th>Normal</th>
<th>Primário</th>
<th>Secundário</th>
<th>Sucesso</th>
<th>Informação</th>
<th>Atenção</th>
<th>Alerta</th>
</tr>
</thead>
<tbody>
<tr>
<td>Padrão</td>
<td><button class="btn ativado">Botão</button></td>
<td><button class="btn primario ativado">Botão</button></td>
<td><button class="btn secundario ativado">Botão</button></td>
<td><button class="btn sucesso ativado">Botão</button></td>
<td><button class="btn info ativado">Botão</button></td>
<td><button class="btn atencao ativado">Botão</button></td>
<td><button class="btn alerta ativado">Botão</button></td>
</tr>
<tr>
<td>Linha</td>
<td><button class="btn linha ativado">Botão</button></td>
<td><button class="btn primario linha ativado">Botão</button></td>
<td><button class="btn secundario linha ativado">Botão</button></td>
<td><button class="btn sucesso linha ativado">Botão</button></td>
<td><button class="btn info linha ativado">Botão</button></td>
<td><button class="btn atencao linha ativado">Botão</button></td>
<td><button class="btn alerta linha ativado">Botão</button></td>
</tr>
<tr>
<td>Redondo</td>
<td><button class="btn circle ativado">B</button></td>
<td><button class="btn primario circle ativado">B</button></td>
<td><button class="btn secundario circle ativado">B</button></td>
<td><button class="btn sucesso circle ativado">B</button></td>
<td><button class="btn info circle ativado">B</button></td>
<td><button class="btn atencao circle ativado">B</button></td>
<td><button class="btn alerta circle ativado">B</button></td>
</tr>
<tr>
<td>Redondo-Linha</td>
<td><button class="btn circle linha ativado">B</button></td>
<td><button class="btn primario circle linha ativado">B</button></td>
<td><button class="btn secundario circle linha ativado">B</button></td>
<td><button class="btn sucesso circle linha ativado">B</button></td>
<td><button class="btn info circle linha ativado">B</button></td>
<td><button class="btn atencao circle linha ativado">B</button></td>
<td><button class="btn alerta circle linha ativado">B</button></td>
</tr>
</tbody>
</table>
<p>Lorem ipsum.</p>
</body>
</html>