matcha-core 20.14.0 → 20.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/demo.html +0 -572
package/package.json
CHANGED
package/demo.html
DELETED
|
@@ -1,572 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Document</title>
|
|
7
|
-
<link rel="stylesheet" href="./matcha-core.min.css">
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
|
|
11
|
-
<!-- EXEMPLE 2 -->
|
|
12
|
-
<div class="matcha-card mb-24">
|
|
13
|
-
|
|
14
|
-
<div class="d-flex flex-space-between flex-align-center mb-16">
|
|
15
|
-
|
|
16
|
-
<p class="title flex-center-center m-0 matcha-color-label">Row</p>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</div>
|
|
20
|
-
<div class="matcha-card-flat matcha-background-background mb-16">
|
|
21
|
-
|
|
22
|
-
<div class="card-expand-area" *ngIf="exemplo2" [@expandCollapse]>
|
|
23
|
-
<div class="card-expanded-content p-0">
|
|
24
|
-
<div class="mb-16">
|
|
25
|
-
|
|
26
|
-
<fuse-highlight lang="html" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: false}">
|
|
27
|
-
<textarea #source hidden="hidden">
|
|
28
|
-
|
|
29
|
-
<!-- GRID -->
|
|
30
|
-
<div class="row">
|
|
31
|
-
<div>conteúdo</div>
|
|
32
|
-
<div>conteúdo</div>
|
|
33
|
-
<div>conteúdo</div>
|
|
34
|
-
<div>conteúdo</div>
|
|
35
|
-
</div>
|
|
36
|
-
<!-- /GRID -->
|
|
37
|
-
|
|
38
|
-
</textarea>
|
|
39
|
-
</fuse-highlight>
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
</div>
|
|
43
|
-
|
|
44
|
-
<!-- GRID -->
|
|
45
|
-
<div class="matcha-card accent-900">row
|
|
46
|
-
<div class="row">
|
|
47
|
-
<div style="background:#55558888" class="matcha-card">div</div>
|
|
48
|
-
<div style="background:#55558888" class="matcha-card">div</div>
|
|
49
|
-
<div style="background:#55558888" class="matcha-card">div</div>
|
|
50
|
-
<div style="background:#55558888" class="matcha-card">div</div>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
<!-- /GRID -->
|
|
54
|
-
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
<!-- EXEMPLE 2 -->
|
|
58
|
-
|
|
59
|
-
<!-- EXEMPLE 3 -->
|
|
60
|
-
<div class="matcha-card mb-24">
|
|
61
|
-
|
|
62
|
-
<div class="d-flex flex-space-between flex-align-center mb-16">
|
|
63
|
-
|
|
64
|
-
<p class="title flex-center-center m-0 matcha-color-label">Grid Columns 1/12</p>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</div>
|
|
68
|
-
<div class="matcha-card-flat matcha-background-background mb-16">
|
|
69
|
-
|
|
70
|
-
<div class="card-expand-area" *ngIf="exemplo3" [@expandCollapse]>
|
|
71
|
-
<div class="card-expanded-content p-0">
|
|
72
|
-
<div class="mb-16">
|
|
73
|
-
|
|
74
|
-
<fuse-highlight lang="html" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: false}">
|
|
75
|
-
<textarea #source hidden="hidden">
|
|
76
|
-
|
|
77
|
-
<!-- GRID -->
|
|
78
|
-
<div class="row">
|
|
79
|
-
<div class="col-1">col-1</div>
|
|
80
|
-
<div class="col-11">col-11</div>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="row">
|
|
83
|
-
<div class="col-2">col-2</div>
|
|
84
|
-
<div class="col-10">col-10</div>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="row">
|
|
87
|
-
<div class="col-3">col-3</div>
|
|
88
|
-
<div class="col-9">col-9</div>
|
|
89
|
-
</div>
|
|
90
|
-
<div class="row">
|
|
91
|
-
<div class="col-4">col-4</div>
|
|
92
|
-
<div class="col-8">col-8</div>
|
|
93
|
-
</div>
|
|
94
|
-
<div class="row">
|
|
95
|
-
<div class="col-5">col-5</div>
|
|
96
|
-
<div class="col-7">col-7</div>
|
|
97
|
-
</div>
|
|
98
|
-
<div class="row">
|
|
99
|
-
<div class="col-6">col-6</div>
|
|
100
|
-
<div class="col-6">col-6</div>
|
|
101
|
-
</div>
|
|
102
|
-
<!-- /GRID -->
|
|
103
|
-
|
|
104
|
-
</textarea>
|
|
105
|
-
</fuse-highlight>
|
|
106
|
-
</div>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<!-- GRID -->
|
|
111
|
-
<div class="matcha-card accent-900 container">
|
|
112
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
113
|
-
<div class="row">
|
|
114
|
-
<div style="background:#55558888" class="matcha-card col-1">col-1</div>
|
|
115
|
-
<div style="background:#55558888" class="matcha-card col-11">col-11</div>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
119
|
-
<div class="row">
|
|
120
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
121
|
-
<div style="background:#55558888" class="matcha-card col-10">col-10</div>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
125
|
-
<div class="row">
|
|
126
|
-
<div style="background:#55558888" class="matcha-card col-3">col-3</div>
|
|
127
|
-
<div style="background:#55558888" class="matcha-card col-9">col-9</div>
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
131
|
-
<div class="row">
|
|
132
|
-
<div style="background:#55558888" class="matcha-card col-4">col-4</div>
|
|
133
|
-
<div style="background:#55558888" class="matcha-card col-8">col-8</div>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
137
|
-
<div class="row">
|
|
138
|
-
<div style="background:#55558888" class="matcha-card col-5">col-5</div>
|
|
139
|
-
<div style="background:#55558888" class="matcha-card col-7">col-7</div>
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
142
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
143
|
-
<div class="row">
|
|
144
|
-
<div style="background:#55558888" class="matcha-card col-6">col-6</div>
|
|
145
|
-
<div style="background:#55558888" class="matcha-card col-6">col-6</div>
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
<!-- /GRID -->
|
|
150
|
-
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
<!-- EXEMPLE 3 -->
|
|
154
|
-
|
|
155
|
-
<!-- EXEMPLE 4 -->
|
|
156
|
-
<div class="matcha-card mb-24">
|
|
157
|
-
|
|
158
|
-
<div class="d-flex flex-space-between flex-align-center mb-16">
|
|
159
|
-
|
|
160
|
-
<p class="title flex-center-center m-0 matcha-color-label">Grid Offset 1/12</p>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
</div>
|
|
164
|
-
<div class="matcha-card-flat matcha-background-background mb-16">
|
|
165
|
-
|
|
166
|
-
<div class="card-expand-area" *ngIf="exemplo4" [@expandCollapse]>
|
|
167
|
-
<div class="card-expanded-content p-0">
|
|
168
|
-
<div class="mb-16">
|
|
169
|
-
|
|
170
|
-
<fuse-highlight lang="html" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: false}">
|
|
171
|
-
<textarea #source hidden="hidden">
|
|
172
|
-
|
|
173
|
-
<!-- GRID -->
|
|
174
|
-
<div class="row">
|
|
175
|
-
<div class="col-offset-1 col-11">col-offset-1 col-11</div>
|
|
176
|
-
</div>
|
|
177
|
-
<div class="row">
|
|
178
|
-
<div class="col-offset-2 col-10">col-offset-2 col-2</div>
|
|
179
|
-
</div>
|
|
180
|
-
<div class="row">
|
|
181
|
-
<div class="col-offset-3 col-9">col-offset-3 col-3</div>
|
|
182
|
-
</div>
|
|
183
|
-
<div class="row">
|
|
184
|
-
<div class="col-offset-4 col-8">col-offset-4 col-4</div>
|
|
185
|
-
</div>
|
|
186
|
-
<div class="row">
|
|
187
|
-
<div class="col-offset-5 col-7">col-offset-5 col-5</div>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="row">
|
|
190
|
-
<div class="col-offset-6 col-6">col-offset-6 col-6</div>
|
|
191
|
-
</div>
|
|
192
|
-
<div class="row">
|
|
193
|
-
<div class="col-3 col-offset-2"><div class="box">col-3 col-offset-2</div></div>
|
|
194
|
-
<div class="col-3 col-offset-2"><div class="box">col-3 col-offset-2</div></div>
|
|
195
|
-
</div>
|
|
196
|
-
<div class="row">
|
|
197
|
-
<div class="col-md-3 col-offset-md-2"><div class="box">col-md-3 col-offset-md-2</div></div>
|
|
198
|
-
</div>
|
|
199
|
-
<div class="row">
|
|
200
|
-
<div class="col-sm-6 col-offset-sm-2 col-md-3 col-offset-md-3 col-lg-2 col-offset-lg-1"><div class="box">col-sm-6 col-offset-sm-2 col-md-3 col-offset-md-3 col-lg-2 col-offset-lg-1</div></div>
|
|
201
|
-
<div class="col-sm-3 col-offset-sm-1 col-md-3 col-offset-md-3 col-lg-5 col-offset-lg-4"><div class="box">col-sm-3 col-offset-sm-2 col-md-3 col-offset-md-3 col-lg-5 col-offset-lg-4</div></div>
|
|
202
|
-
</div>
|
|
203
|
-
<!-- /GRID -->
|
|
204
|
-
|
|
205
|
-
</textarea>
|
|
206
|
-
</fuse-highlight>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
209
|
-
</div>
|
|
210
|
-
|
|
211
|
-
<!-- GRID -->
|
|
212
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
213
|
-
<div class="row">
|
|
214
|
-
<div style="background:#55558888" class="matcha-card col-offset-1 col-11">col-offset-1 col-11</div>
|
|
215
|
-
</div>
|
|
216
|
-
</div>
|
|
217
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
218
|
-
<div class="row">
|
|
219
|
-
<div style="background:#55558888" class="matcha-card col-offset-2 col-10">col-offset-2 col-2</div>
|
|
220
|
-
</div>
|
|
221
|
-
</div>
|
|
222
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
223
|
-
<div class="row">
|
|
224
|
-
<div style="background:#55558888" class="matcha-card col-offset-3 col-9">col-offset-3 col-3</div>
|
|
225
|
-
</div>
|
|
226
|
-
</div>
|
|
227
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
228
|
-
<div class="row">
|
|
229
|
-
<div style="background:#55558888" class="matcha-card col-offset-4 col-8">col-offset-4 col-4</div>
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
233
|
-
<div class="row">
|
|
234
|
-
<div style="background:#55558888" class="matcha-card col-offset-5 col-7">col-offset-5 col-5</div>
|
|
235
|
-
</div>
|
|
236
|
-
</div>
|
|
237
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
238
|
-
<div class="row">
|
|
239
|
-
<div style="background:#55558888" class="matcha-card col-offset-6 col-6">col-offset-6 col-6</div>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
243
|
-
<div class="row">
|
|
244
|
-
<div style="background:#55558888" class="matcha-card col-3 col-offset-2">col-3 col-offset-2</div>
|
|
245
|
-
<div style="background:#55558888" class="matcha-card col-3 col-offset-2">col-3 col-offset-2</div>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
249
|
-
<div class="row">
|
|
250
|
-
<div style="background:#55558888" class="matcha-card col-md-3 col-offset-md-2">col-md-3 col-offset-md-2</div>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
254
|
-
<div class="row">
|
|
255
|
-
<div style="background:#55558888" class="matcha-card col-sm-6 col-offset-sm-2 col-md-3 col-offset-md-3 col-lg-2 col-offset-lg-1">col-sm-6 col-offset-sm-2 col-md-3 col-offset-md-3 col-lg-2 col-offset-lg-1</div>
|
|
256
|
-
<div style="background:#55558888" class="matcha-card col-sm-3 col-offset-sm-1 col-md-3 col-offset-md-3 col-lg-5 col-offset-lg-4">col-sm-3 col-offset-sm-2 col-md-3 col-offset-md-3 col-lg-5 col-offset-lg-4</div>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
259
|
-
<!-- /GRID -->
|
|
260
|
-
|
|
261
|
-
</div>
|
|
262
|
-
</div>
|
|
263
|
-
<!-- EXEMPLE 4 -->
|
|
264
|
-
|
|
265
|
-
<!-- EXEMPLE 5 -->
|
|
266
|
-
<div class="matcha-card mb-24">
|
|
267
|
-
|
|
268
|
-
<div class="d-flex flex-space-between flex-align-center mb-16">
|
|
269
|
-
|
|
270
|
-
<p class="title flex-center-center m-0 matcha-color-label">Breakpoints</p>
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
</div>
|
|
274
|
-
<div class="matcha-card-flat matcha-background-background mb-16">
|
|
275
|
-
|
|
276
|
-
<div class="card-expand-area" *ngIf="exemplo5" [@expandCollapse]>
|
|
277
|
-
<div class="card-expanded-content p-0">
|
|
278
|
-
<div class="mb-16">
|
|
279
|
-
|
|
280
|
-
<fuse-highlight lang="html" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: false}">
|
|
281
|
-
<textarea #source hidden="hidden">
|
|
282
|
-
|
|
283
|
-
<!-- GRID -->
|
|
284
|
-
<div class="row">
|
|
285
|
-
<div class="col-4">col-4</div>
|
|
286
|
-
<div class="col-4">col-4</div>
|
|
287
|
-
<div class="col-4">col-4</div>
|
|
288
|
-
</div>
|
|
289
|
-
<div class="row">
|
|
290
|
-
<div class="col-xs-4">col-xs-4</div>
|
|
291
|
-
<div class="col-xs-4">col-xs-4</div>
|
|
292
|
-
<div class="col-xs-4">col-xs-4</div>
|
|
293
|
-
</div>
|
|
294
|
-
<div class="row">
|
|
295
|
-
<div class="col-sm-4">col-sm-4</div>
|
|
296
|
-
<div class="col-sm-4">col-sm-4</div>
|
|
297
|
-
<div class="col-sm-4">col-sm-4</div>
|
|
298
|
-
</div>
|
|
299
|
-
<div class="row">
|
|
300
|
-
<div class="col-md-4">col-md-4</div>
|
|
301
|
-
<div class="col-md-4">col-md-4</div>
|
|
302
|
-
<div class="col-md-4">col-md-4</div>
|
|
303
|
-
</div>
|
|
304
|
-
<div class="row">
|
|
305
|
-
<div class="col-lg-4">col-lg-4</div>
|
|
306
|
-
<div class="col-lg-4">col-lg-4</div>
|
|
307
|
-
<div class="col-lg-4">col-lg-4</div>
|
|
308
|
-
</div>
|
|
309
|
-
<div class="row">
|
|
310
|
-
<div class="col-xl-4">col-xl-4</div>
|
|
311
|
-
<div class="col-xl-4">col-xl-4</div>
|
|
312
|
-
<div class="col-xl-4">col-xl-4</div>
|
|
313
|
-
</div>
|
|
314
|
-
<div class="row">
|
|
315
|
-
<div class="col-sm-1 col-lg-4 col-xl-3">col-sm-1 col-lg-4 col-xl-3</div>
|
|
316
|
-
<div class="col-sm-5 col-lg-2 col-xl-3">col-sm-5 col-lg-2 col-xl-3</div>
|
|
317
|
-
<div class="col-sm-5 col-lg-2 col-xl-3">col-sm-5 col-lg-2 col-xl-3</div>
|
|
318
|
-
<div class="col-sm-1 col-lg-4 col-xl-3">col-sm-1 col-lg-4 col-xl-3</div>
|
|
319
|
-
</div>
|
|
320
|
-
<!-- /GRID -->
|
|
321
|
-
|
|
322
|
-
</textarea>
|
|
323
|
-
</fuse-highlight>
|
|
324
|
-
</div>
|
|
325
|
-
</div>
|
|
326
|
-
</div>
|
|
327
|
-
|
|
328
|
-
<!-- GRID -->
|
|
329
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
330
|
-
<div class="row">
|
|
331
|
-
<div style="background:#55558888" class="matcha-card col-4">col-4</div>
|
|
332
|
-
<div style="background:#55558888" class="matcha-card col-4">col-4</div>
|
|
333
|
-
<div style="background:#55558888" class="matcha-card col-4">col-4</div>
|
|
334
|
-
</div>
|
|
335
|
-
</div>
|
|
336
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
337
|
-
<div class="row">
|
|
338
|
-
<div style="background:#55558888" class="matcha-card col-xs-4">col-xs-4</div>
|
|
339
|
-
<div style="background:#55558888" class="matcha-card col-xs-4">col-xs-4</div>
|
|
340
|
-
<div style="background:#55558888" class="matcha-card col-xs-4">col-xs-4</div>
|
|
341
|
-
</div>
|
|
342
|
-
</div>
|
|
343
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
344
|
-
<div class="row">
|
|
345
|
-
<div style="background:#55558888" class="matcha-card col-sm-4">col-sm-4</div>
|
|
346
|
-
<div style="background:#55558888" class="matcha-card col-sm-4">col-sm-4</div>
|
|
347
|
-
<div style="background:#55558888" class="matcha-card col-sm-4">col-sm-4</div>
|
|
348
|
-
</div>
|
|
349
|
-
</div>
|
|
350
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
351
|
-
<div class="row">
|
|
352
|
-
<div style="background:#55558888" class="matcha-card col-md-4">col-md-4</div>
|
|
353
|
-
<div style="background:#55558888" class="matcha-card col-md-4">col-md-4</div>
|
|
354
|
-
<div style="background:#55558888" class="matcha-card col-md-4">col-md-4</div>
|
|
355
|
-
</div>
|
|
356
|
-
</div>
|
|
357
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
358
|
-
<div class="row">
|
|
359
|
-
<div style="background:#55558888" class="matcha-card col-lg-4">col-lg-4</div>
|
|
360
|
-
<div style="background:#55558888" class="matcha-card col-lg-4">col-lg-4</div>
|
|
361
|
-
<div style="background:#55558888" class="matcha-card col-lg-4">col-lg-4</div>
|
|
362
|
-
</div>
|
|
363
|
-
</div>
|
|
364
|
-
<div style="background:#55ff5588" class="matcha-card p-16">row
|
|
365
|
-
<div class="row">
|
|
366
|
-
<div style="background:#55558888" class="matcha-card col-xl-4">col-xl-4</div>
|
|
367
|
-
<div style="background:#55558888" class="matcha-card col-xl-4">col-xl-4</div>
|
|
368
|
-
<div style="background:#55558888" class="matcha-card col-xl-4">col-xl-4</div>
|
|
369
|
-
</div>
|
|
370
|
-
</div>
|
|
371
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
372
|
-
<div class="row">
|
|
373
|
-
<div style="background:#55558888" class="matcha-card col-sm-1 col-lg-4 col-xl-3">col-sm-1 col-lg-4 col-xl-3</div>
|
|
374
|
-
<div style="background:#55558888" class="matcha-card col-sm-5 col-lg-2 col-xl-3">col-sm-5 col-lg-2 col-xl-3</div>
|
|
375
|
-
<div style="background:#55558888" class="matcha-card col-sm-5 col-lg-2 col-xl-3">col-sm-5 col-lg-2 col-xl-3</div>
|
|
376
|
-
</div>
|
|
377
|
-
<div class="matcha-card accent-400 col-sm-1 col-lg-4 col-xl-3">col-sm-1 col-lg-4 col-xl-3</div>
|
|
378
|
-
</div>
|
|
379
|
-
<div class="row matcha-card matcha-color-label mt-16">
|
|
380
|
-
<div class="col-offset-md-3 col-md-6">
|
|
381
|
-
<table class="w-100-p">
|
|
382
|
-
<thead>
|
|
383
|
-
<tr>
|
|
384
|
-
<th>Keyword</th>
|
|
385
|
-
<th>Size</th>
|
|
386
|
-
<th>Class name</th>
|
|
387
|
-
</tr>
|
|
388
|
-
</thead>
|
|
389
|
-
<tbody>
|
|
390
|
-
<tr>
|
|
391
|
-
<td><code>xs</code></td>
|
|
392
|
-
<td>= or > 600px</td>
|
|
393
|
-
<td>.col-xs-*</td>
|
|
394
|
-
</tr>
|
|
395
|
-
<tr>
|
|
396
|
-
<td><code>sm</code></td>
|
|
397
|
-
<td>= or > 1024px</td>
|
|
398
|
-
<td>.col-sm-*</td>
|
|
399
|
-
</tr>
|
|
400
|
-
<tr>
|
|
401
|
-
<td><code>md</code></td>
|
|
402
|
-
<td>= or > 1440px</td>
|
|
403
|
-
<td>.col-md-*</td>
|
|
404
|
-
</tr>
|
|
405
|
-
<tr>
|
|
406
|
-
<td><code>lg</code></td>
|
|
407
|
-
<td>= or > 1920px</td>
|
|
408
|
-
<td>.col-lg-*</td>
|
|
409
|
-
</tr>
|
|
410
|
-
<tr>
|
|
411
|
-
<td><code>xl</code></td>
|
|
412
|
-
<td>= or > 2560px</td>
|
|
413
|
-
<td>.col-xl-*</td>
|
|
414
|
-
</tr>
|
|
415
|
-
</tbody>
|
|
416
|
-
</table>
|
|
417
|
-
</div>
|
|
418
|
-
</div>
|
|
419
|
-
<!-- /GRID -->
|
|
420
|
-
|
|
421
|
-
</div>
|
|
422
|
-
</div>
|
|
423
|
-
<!-- EXEMPLE 5 -->
|
|
424
|
-
|
|
425
|
-
<!-- EXEMPLE 6 -->
|
|
426
|
-
<div class="matcha-card mb-24">
|
|
427
|
-
|
|
428
|
-
<div class="d-flex flex-space-between flex-align-center mb-16">
|
|
429
|
-
|
|
430
|
-
<p class="title flex-center-center m-0 matcha-color-label">Vertical Alignment</p>
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
</div>
|
|
434
|
-
<div class="matcha-card-flat matcha-background-background mb-16">
|
|
435
|
-
|
|
436
|
-
<div class="card-expand-area" *ngIf="exemplo6" [@expandCollapse]>
|
|
437
|
-
<div class="card-expanded-content p-0">
|
|
438
|
-
<div class="mb-16">
|
|
439
|
-
|
|
440
|
-
<fuse-highlight lang="html" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: false}">
|
|
441
|
-
<textarea #source hidden="hidden">
|
|
442
|
-
|
|
443
|
-
<!-- GRID -->
|
|
444
|
-
<div class="row">
|
|
445
|
-
<div class="col-3">col-3</div>
|
|
446
|
-
<div class="col-3 align-start">col-3 align-start</div>
|
|
447
|
-
<div class="col-3 align-center">col-3 align-center</div>
|
|
448
|
-
<div class="col-3 align-end">col-3 align-end</div>
|
|
449
|
-
</div>
|
|
450
|
-
<!-- /GRID -->
|
|
451
|
-
|
|
452
|
-
</textarea>
|
|
453
|
-
</fuse-highlight>
|
|
454
|
-
</div>
|
|
455
|
-
</div>
|
|
456
|
-
</div>
|
|
457
|
-
|
|
458
|
-
<!-- GRID -->
|
|
459
|
-
<div class="matcha-card p-16" style="background:#55ff5588">row
|
|
460
|
-
<div class="row">
|
|
461
|
-
<div style="background:#55558888" class="matcha-card col-3 h-100">col-3 h-100</div>
|
|
462
|
-
<div style="background:#55558888" class="matcha-card col-3 d-flex flex-align-start">col-3 align-start</div>
|
|
463
|
-
<div style="background:#55558888" class="matcha-card col-3 d-flex flex-align-center">col-3 align-center</div>
|
|
464
|
-
<div style="background:#55558888" class="matcha-card col-3 d-flex flex-align-end">col-3 align-end</div>
|
|
465
|
-
</div>
|
|
466
|
-
</div>
|
|
467
|
-
<!-- /GRID -->
|
|
468
|
-
|
|
469
|
-
</div>
|
|
470
|
-
</div>
|
|
471
|
-
<!-- EXEMPLE 6 -->
|
|
472
|
-
|
|
473
|
-
<!-- EXEMPLE 7 -->
|
|
474
|
-
<div class="matcha-card mb-24">
|
|
475
|
-
|
|
476
|
-
<div class="d-flex flex-space-between flex-align-center mb-16">
|
|
477
|
-
|
|
478
|
-
<p class="title flex-center-center m-0 matcha-color-label">Horizontal Alignment</p>
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
</div>
|
|
482
|
-
<div class="matcha-card-flat matcha-background-background mb-16">
|
|
483
|
-
|
|
484
|
-
<div class="card-expand-area" *ngIf="exemplo7" [@expandCollapse]>
|
|
485
|
-
<div class="card-expanded-content p-0">
|
|
486
|
-
<div class="mb-16">
|
|
487
|
-
|
|
488
|
-
<fuse-highlight lang="html" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: false}">
|
|
489
|
-
<textarea #source hidden="hidden">
|
|
490
|
-
|
|
491
|
-
<!-- GRID -->
|
|
492
|
-
<div class="row flex-start">
|
|
493
|
-
<div class="col-2">col-2</div>
|
|
494
|
-
<div class="col-2">col-2</div>
|
|
495
|
-
<div class="col-2">col-2</div>
|
|
496
|
-
</div>
|
|
497
|
-
<div class="row flex-center">
|
|
498
|
-
<div class="col-2">col-2</div>
|
|
499
|
-
<div class="col-2">col-2</div>
|
|
500
|
-
<div class="col-2">col-2</div>
|
|
501
|
-
</div>
|
|
502
|
-
<div class="row flex-end">
|
|
503
|
-
<div class="col-2">col-2</div>
|
|
504
|
-
<div class="col-2">col-2</div>
|
|
505
|
-
<div class="col-2">col-2</div>
|
|
506
|
-
</div>
|
|
507
|
-
<div class="row flex-space-around">
|
|
508
|
-
<div class="col-2">col-2</div>
|
|
509
|
-
<div class="col-2">col-2</div>
|
|
510
|
-
<div class="col-2">col-2</div>
|
|
511
|
-
</div>
|
|
512
|
-
<div class="row flex-space-between">
|
|
513
|
-
<div class="col-2">col-2</div>
|
|
514
|
-
<div class="col-2">col-2</div>
|
|
515
|
-
<div class="col-2">col-2</div>
|
|
516
|
-
</div>
|
|
517
|
-
<!-- /GRID -->
|
|
518
|
-
|
|
519
|
-
</textarea>
|
|
520
|
-
</fuse-highlight>
|
|
521
|
-
</div>
|
|
522
|
-
</div>
|
|
523
|
-
</div>
|
|
524
|
-
|
|
525
|
-
<!-- GRID -->
|
|
526
|
-
<div class="matcha-card p-16" style="background:#55ff5588">
|
|
527
|
-
row align-start
|
|
528
|
-
<div class="row align-start">
|
|
529
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
530
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
531
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
532
|
-
</div>
|
|
533
|
-
</div>
|
|
534
|
-
<div style="background:#55ff5588" class="matcha-card p-16">
|
|
535
|
-
row align-center
|
|
536
|
-
<div class="row align-center">
|
|
537
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
538
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
539
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
540
|
-
</div>
|
|
541
|
-
</div>
|
|
542
|
-
<div class="matcha-card p-16" style="background:#55ff5588">
|
|
543
|
-
row align-end
|
|
544
|
-
<div class="row align-end">
|
|
545
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
546
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
547
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
548
|
-
</div>
|
|
549
|
-
</div>
|
|
550
|
-
<div style="background:#55ff5588" class="matcha-card p-16">
|
|
551
|
-
row space-around
|
|
552
|
-
<div class="row space-around">
|
|
553
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
554
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
555
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
556
|
-
</div>
|
|
557
|
-
</div>
|
|
558
|
-
<div class="matcha-card p-16" style="background:#55ff5588">
|
|
559
|
-
row space-between
|
|
560
|
-
<div class="row space-between">
|
|
561
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
562
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
563
|
-
<div style="background:#55558888" class="matcha-card col-2">col-2</div>
|
|
564
|
-
</div>
|
|
565
|
-
</div>
|
|
566
|
-
<!-- /GRID -->
|
|
567
|
-
|
|
568
|
-
</div>
|
|
569
|
-
</div>
|
|
570
|
-
<!-- EXEMPLE 7 -->
|
|
571
|
-
</body>
|
|
572
|
-
</html>
|