matcha-core 1.0.1 → 1.1.2
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/core.scss +112 -74
- package/demo.html +572 -0
- package/matcha-core.css +228 -729
- package/matcha-core.min.css +1 -1
- package/package.json +2 -2
package/demo.html
ADDED
|
@@ -0,0 +1,572 @@
|
|
|
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 d-flex-space-between d-flex-align-center mb-16">
|
|
15
|
+
|
|
16
|
+
<p class="title d-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 d-flex-space-between d-flex-align-center mb-16">
|
|
63
|
+
|
|
64
|
+
<p class="title d-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 d-flex-space-between d-flex-align-center mb-16">
|
|
159
|
+
|
|
160
|
+
<p class="title d-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 d-flex-space-between d-flex-align-center mb-16">
|
|
269
|
+
|
|
270
|
+
<p class="title d-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 d-flex-space-between d-flex-align-center mb-16">
|
|
429
|
+
|
|
430
|
+
<p class="title d-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 d-flex-space-between d-flex-align-center mb-16">
|
|
477
|
+
|
|
478
|
+
<p class="title d-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>
|