@nyaruka/temba-components 0.31.6 → 0.31.7

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.
Files changed (26) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/{fa23691e.js → 56002f06.js} +85 -7
  3. package/dist/index.js +85 -7
  4. package/dist/static/icons/symbol-defs.svg +7 -3
  5. package/dist/sw.js +1 -1
  6. package/dist/sw.js.map +1 -1
  7. package/dist/templates/components-body.html +1 -1
  8. package/dist/templates/components-head.html +1 -1
  9. package/out-tsc/src/list/TembaMenu.js +102 -17
  10. package/out-tsc/src/list/TembaMenu.js.map +1 -1
  11. package/out-tsc/src/tabpane/TabPane.js +6 -0
  12. package/out-tsc/src/tabpane/TabPane.js.map +1 -1
  13. package/out-tsc/src/vectoricon/VectorIcon.js +2 -3
  14. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/list/TembaMenu.ts +106 -17
  17. package/src/tabpane/TabPane.ts +6 -0
  18. package/src/vectoricon/VectorIcon.ts +2 -3
  19. package/static/icons/Read Me.txt +1 -1
  20. package/static/icons/SVG/menu-collapse.svg +5 -0
  21. package/static/icons/SVG/zapier.svg +2 -1
  22. package/static/icons/demo-external-svg.html +144 -139
  23. package/static/icons/demo-files/demo.css +4 -4
  24. package/static/icons/demo.html +151 -142
  25. package/static/icons/selection.json +250 -200
  26. package/static/icons/symbol-defs.svg +7 -3
package/static/icons/demo-external-svg.html CHANGED
@@ -14,618 +14,631 @@
14
14
  </div>
15
15
  </header>
16
16
  <div class="clearfix mhl ptl">
17
- <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
17
+ <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
18
18
  <div class="glyph fs1">
19
+ <div class="clearfix pbs">
20
+ <svg class="icon icon-zapier"><use xlink:href="symbol-defs.svg#icon-zapier"></use></svg><span class="name"> icon-zapier</span>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ <div class="clearfix mhl ptl">
25
+ <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
26
+ <div class="glyph fs2">
19
27
  <div class="clearfix pbs">
20
28
  <svg class="icon icon-hourglass"><use xlink:href="symbol-defs.svg#icon-hourglass"></use></svg><span class="name"> icon-hourglass</span>
21
29
  </div>
22
30
  </div>
23
- <div class="glyph fs1">
31
+ <div class="glyph fs2">
32
+ <div class="clearfix pbs">
33
+ <svg class="icon icon-menu-collapse"><use xlink:href="symbol-defs.svg#icon-menu-collapse"></use></svg><span class="name"> icon-menu-collapse</span>
34
+ </div>
35
+ </div>
36
+ <div class="glyph fs2">
24
37
  <div class="clearfix pbs">
25
38
  <svg class="icon icon-bar-chart"><use xlink:href="symbol-defs.svg#icon-bar-chart"></use></svg><span class="name"> icon-bar-chart</span>
26
39
  </div>
27
40
  </div>
28
- <div class="glyph fs1">
41
+ <div class="glyph fs2">
29
42
  <div class="clearfix pbs">
30
43
  <svg class="icon icon-pie-chart"><use xlink:href="symbol-defs.svg#icon-pie-chart"></use></svg><span class="name"> icon-pie-chart</span>
31
44
  </div>
32
45
  </div>
33
- <div class="glyph fs1">
46
+ <div class="glyph fs2">
34
47
  <div class="clearfix pbs">
35
48
  <svg class="icon icon-bookmark-filled"><use xlink:href="symbol-defs.svg#icon-bookmark-filled"></use></svg><span class="name"> icon-bookmark-filled</span>
36
49
  </div>
37
50
  </div>
38
- <div class="glyph fs1">
51
+ <div class="glyph fs2">
39
52
  <div class="clearfix pbs">
40
53
  <svg class="icon icon-bookmark"><use xlink:href="symbol-defs.svg#icon-bookmark"></use></svg><span class="name"> icon-bookmark</span>
41
54
  </div>
42
55
  </div>
43
- <div class="glyph fs1">
56
+ <div class="glyph fs2">
44
57
  <div class="clearfix pbs">
45
58
  <svg class="icon icon-calendar"><use xlink:href="symbol-defs.svg#icon-calendar"></use></svg><span class="name"> icon-calendar</span>
46
59
  </div>
47
60
  </div>
48
- <div class="glyph fs1">
61
+ <div class="glyph fs2">
49
62
  <div class="clearfix pbs">
50
63
  <svg class="icon icon-corner-down-left"><use xlink:href="symbol-defs.svg#icon-corner-down-left"></use></svg><span class="name"> icon-corner-down-left</span>
51
64
  </div>
52
65
  </div>
53
- <div class="glyph fs1">
66
+ <div class="glyph fs2">
54
67
  <div class="clearfix pbs">
55
68
  <svg class="icon icon-external-link"><use xlink:href="symbol-defs.svg#icon-external-link"></use></svg><span class="name"> icon-external-link</span>
56
69
  </div>
57
70
  </div>
58
- <div class="glyph fs1">
71
+ <div class="glyph fs2">
59
72
  <div class="clearfix pbs">
60
73
  <svg class="icon icon-globe"><use xlink:href="symbol-defs.svg#icon-globe"></use></svg><span class="name"> icon-globe</span>
61
74
  </div>
62
75
  </div>
63
- <div class="glyph fs1">
76
+ <div class="glyph fs2">
64
77
  <div class="clearfix pbs">
65
78
  <svg class="icon icon-more-horizontal"><use xlink:href="symbol-defs.svg#icon-more-horizontal"></use></svg><span class="name"> icon-more-horizontal</span>
66
79
  </div>
67
80
  </div>
68
- <div class="glyph fs1">
81
+ <div class="glyph fs2">
69
82
  <div class="clearfix pbs">
70
83
  <svg class="icon icon-refresh-cw"><use xlink:href="symbol-defs.svg#icon-refresh-cw"></use></svg><span class="name"> icon-refresh-cw</span>
71
84
  </div>
72
85
  </div>
73
- <div class="glyph fs1">
86
+ <div class="glyph fs2">
74
87
  <div class="clearfix pbs">
75
88
  <svg class="icon icon-search"><use xlink:href="symbol-defs.svg#icon-search"></use></svg><span class="name"> icon-search</span>
76
89
  </div>
77
90
  </div>
78
- <div class="glyph fs1">
91
+ <div class="glyph fs2">
79
92
  <div class="clearfix pbs">
80
93
  <svg class="icon icon-pause"><use xlink:href="symbol-defs.svg#icon-pause"></use></svg><span class="name"> icon-pause</span>
81
94
  </div>
82
95
  </div>
83
- <div class="glyph fs1">
96
+ <div class="glyph fs2">
84
97
  <div class="clearfix pbs">
85
98
  <svg class="icon icon-play"><use xlink:href="symbol-defs.svg#icon-play"></use></svg><span class="name"> icon-play</span>
86
99
  </div>
87
100
  </div>
88
- <div class="glyph fs1">
101
+ <div class="glyph fs2">
89
102
  <div class="clearfix pbs">
90
103
  <svg class="icon icon-user-x"><use xlink:href="symbol-defs.svg#icon-user-x"></use></svg><span class="name"> icon-user-x</span>
91
104
  </div>
92
105
  </div>
93
- <div class="glyph fs1">
106
+ <div class="glyph fs2">
94
107
  <div class="clearfix pbs">
95
108
  <svg class="icon icon-cloud"><use xlink:href="symbol-defs.svg#icon-cloud"></use></svg><span class="name"> icon-cloud</span>
96
109
  </div>
97
110
  </div>
98
- <div class="glyph fs1">
111
+ <div class="glyph fs2">
99
112
  <div class="clearfix pbs">
100
113
  <svg class="icon icon-codepen"><use xlink:href="symbol-defs.svg#icon-codepen"></use></svg><span class="name"> icon-codepen</span>
101
114
  </div>
102
115
  </div>
103
- <div class="glyph fs1">
116
+ <div class="glyph fs2">
104
117
  <div class="clearfix pbs">
105
118
  <svg class="icon icon-codesandbox"><use xlink:href="symbol-defs.svg#icon-codesandbox"></use></svg><span class="name"> icon-codesandbox</span>
106
119
  </div>
107
120
  </div>
108
- <div class="glyph fs1">
121
+ <div class="glyph fs2">
109
122
  <div class="clearfix pbs">
110
123
  <svg class="icon icon-git-pull-request"><use xlink:href="symbol-defs.svg#icon-git-pull-request"></use></svg><span class="name"> icon-git-pull-request</span>
111
124
  </div>
112
125
  </div>
113
- <div class="glyph fs1">
126
+ <div class="glyph fs2">
114
127
  <div class="clearfix pbs">
115
128
  <svg class="icon icon-grid"><use xlink:href="symbol-defs.svg#icon-grid"></use></svg><span class="name"> icon-grid</span>
116
129
  </div>
117
130
  </div>
118
- <div class="glyph fs1">
131
+ <div class="glyph fs2">
119
132
  <div class="clearfix pbs">
120
133
  <svg class="icon icon-hard-drive"><use xlink:href="symbol-defs.svg#icon-hard-drive"></use></svg><span class="name"> icon-hard-drive</span>
121
134
  </div>
122
135
  </div>
123
- <div class="glyph fs1">
136
+ <div class="glyph fs2">
124
137
  <div class="clearfix pbs">
125
138
  <svg class="icon icon-layout"><use xlink:href="symbol-defs.svg#icon-layout"></use></svg><span class="name"> icon-layout</span>
126
139
  </div>
127
140
  </div>
128
- <div class="glyph fs1">
141
+ <div class="glyph fs2">
129
142
  <div class="clearfix pbs">
130
143
  <svg class="icon icon-list"><use xlink:href="symbol-defs.svg#icon-list"></use></svg><span class="name"> icon-list</span>
131
144
  </div>
132
145
  </div>
133
- <div class="glyph fs1">
146
+ <div class="glyph fs2">
134
147
  <div class="clearfix pbs">
135
148
  <svg class="icon icon-map-pin"><use xlink:href="symbol-defs.svg#icon-map-pin"></use></svg><span class="name"> icon-map-pin</span>
136
149
  </div>
137
150
  </div>
138
- <div class="glyph fs1">
151
+ <div class="glyph fs2">
139
152
  <div class="clearfix pbs">
140
153
  <svg class="icon icon-package"><use xlink:href="symbol-defs.svg#icon-package"></use></svg><span class="name"> icon-package</span>
141
154
  </div>
142
155
  </div>
143
- <div class="glyph fs1">
156
+ <div class="glyph fs2">
144
157
  <div class="clearfix pbs">
145
158
  <svg class="icon icon-bell"><use xlink:href="symbol-defs.svg#icon-bell"></use></svg><span class="name"> icon-bell</span>
146
159
  </div>
147
160
  </div>
148
- <div class="glyph fs1">
161
+ <div class="glyph fs2">
149
162
  <div class="clearfix pbs">
150
163
  <svg class="icon icon-book-open"><use xlink:href="symbol-defs.svg#icon-book-open"></use></svg><span class="name"> icon-book-open</span>
151
164
  </div>
152
165
  </div>
153
- <div class="glyph fs1">
166
+ <div class="glyph fs2">
154
167
  <div class="clearfix pbs">
155
168
  <svg class="icon icon-box"><use xlink:href="symbol-defs.svg#icon-box"></use></svg><span class="name"> icon-box</span>
156
169
  </div>
157
170
  </div>
158
- <div class="glyph fs1">
171
+ <div class="glyph fs2">
159
172
  <div class="clearfix pbs">
160
173
  <svg class="icon icon-menu"><use xlink:href="symbol-defs.svg#icon-menu"></use></svg><span class="name"> icon-menu</span>
161
174
  </div>
162
175
  </div>
163
- <div class="glyph fs1">
176
+ <div class="glyph fs2">
164
177
  <div class="clearfix pbs">
165
178
  <svg class="icon icon-plus"><use xlink:href="symbol-defs.svg#icon-plus"></use></svg><span class="name"> icon-plus</span>
166
179
  </div>
167
180
  </div>
168
- <div class="glyph fs1">
181
+ <div class="glyph fs2">
169
182
  <div class="clearfix pbs">
170
183
  <svg class="icon icon-agent"><use xlink:href="symbol-defs.svg#icon-agent"></use></svg><span class="name"> icon-agent</span>
171
184
  </div>
172
185
  </div>
173
- <div class="glyph fs1">
186
+ <div class="glyph fs2">
174
187
  <div class="clearfix pbs">
175
188
  <svg class="icon icon-arrow-down-circle"><use xlink:href="symbol-defs.svg#icon-arrow-down-circle"></use></svg><span class="name"> icon-arrow-down-circle</span>
176
189
  </div>
177
190
  </div>
178
- <div class="glyph fs1">
191
+ <div class="glyph fs2">
179
192
  <div class="clearfix pbs">
180
193
  <svg class="icon icon-arrow-up-circle"><use xlink:href="symbol-defs.svg#icon-arrow-up-circle"></use></svg><span class="name"> icon-arrow-up-circle</span>
181
194
  </div>
182
195
  </div>
183
- <div class="glyph fs1">
196
+ <div class="glyph fs2">
184
197
  <div class="clearfix pbs">
185
198
  <svg class="icon icon-database"><use xlink:href="symbol-defs.svg#icon-database"></use></svg><span class="name"> icon-database</span>
186
199
  </div>
187
200
  </div>
188
- <div class="glyph fs1">
201
+ <div class="glyph fs2">
189
202
  <div class="clearfix pbs">
190
203
  <svg class="icon icon-download"><use xlink:href="symbol-defs.svg#icon-download"></use></svg><span class="name"> icon-download</span>
191
204
  </div>
192
205
  </div>
193
- <div class="glyph fs1">
206
+ <div class="glyph fs2">
194
207
  <div class="clearfix pbs">
195
208
  <svg class="icon icon-help-circle"><use xlink:href="symbol-defs.svg#icon-help-circle"></use></svg><span class="name"> icon-help-circle</span>
196
209
  </div>
197
210
  </div>
198
- <div class="glyph fs1">
211
+ <div class="glyph fs2">
199
212
  <div class="clearfix pbs">
200
213
  <svg class="icon icon-life-buoy"><use xlink:href="symbol-defs.svg#icon-life-buoy"></use></svg><span class="name"> icon-life-buoy</span>
201
214
  </div>
202
215
  </div>
203
- <div class="glyph fs1">
216
+ <div class="glyph fs2">
204
217
  <div class="clearfix pbs">
205
218
  <svg class="icon icon-log-out"><use xlink:href="symbol-defs.svg#icon-log-out"></use></svg><span class="name"> icon-log-out</span>
206
219
  </div>
207
220
  </div>
208
- <div class="glyph fs1">
221
+ <div class="glyph fs2">
209
222
  <div class="clearfix pbs">
210
223
  <svg class="icon icon-more-vertical"><use xlink:href="symbol-defs.svg#icon-more-vertical"></use></svg><span class="name"> icon-more-vertical</span>
211
224
  </div>
212
225
  </div>
213
- <div class="glyph fs1">
226
+ <div class="glyph fs2">
214
227
  <div class="clearfix pbs">
215
228
  <svg class="icon icon-star"><use xlink:href="symbol-defs.svg#icon-star"></use></svg><span class="name"> icon-star</span>
216
229
  </div>
217
230
  </div>
218
- <div class="glyph fs1">
231
+ <div class="glyph fs2">
219
232
  <div class="clearfix pbs">
220
233
  <svg class="icon icon-upload"><use xlink:href="symbol-defs.svg#icon-upload"></use></svg><span class="name"> icon-upload</span>
221
234
  </div>
222
235
  </div>
223
- <div class="glyph fs1">
236
+ <div class="glyph fs2">
224
237
  <div class="clearfix pbs">
225
238
  <svg class="icon icon-publish"><use xlink:href="symbol-defs.svg#icon-publish"></use></svg><span class="name"> icon-publish</span>
226
239
  </div>
227
240
  </div>
228
- <div class="glyph fs1">
241
+ <div class="glyph fs2">
229
242
  <div class="clearfix pbs">
230
243
  <svg class="icon icon-coffee"><use xlink:href="symbol-defs.svg#icon-coffee"></use></svg><span class="name"> icon-coffee</span>
231
244
  </div>
232
245
  </div>
233
- <div class="glyph fs1">
246
+ <div class="glyph fs2">
234
247
  <div class="clearfix pbs">
235
248
  <svg class="icon icon-frown"><use xlink:href="symbol-defs.svg#icon-frown"></use></svg><span class="name"> icon-frown</span>
236
249
  </div>
237
250
  </div>
238
- <div class="glyph fs1">
251
+ <div class="glyph fs2">
239
252
  <div class="clearfix pbs">
240
253
  <svg class="icon icon-mail"><use xlink:href="symbol-defs.svg#icon-mail"></use></svg><span class="name"> icon-mail</span>
241
254
  </div>
242
255
  </div>
243
- <div class="glyph fs1">
256
+ <div class="glyph fs2">
244
257
  <div class="clearfix pbs">
245
258
  <svg class="icon icon-meh"><use xlink:href="symbol-defs.svg#icon-meh"></use></svg><span class="name"> icon-meh</span>
246
259
  </div>
247
260
  </div>
248
- <div class="glyph fs1">
261
+ <div class="glyph fs2">
249
262
  <div class="clearfix pbs">
250
263
  <svg class="icon icon-dollar-sign"><use xlink:href="symbol-defs.svg#icon-dollar-sign"></use></svg><span class="name"> icon-dollar-sign</span>
251
264
  </div>
252
265
  </div>
253
- <div class="glyph fs1">
266
+ <div class="glyph fs2">
254
267
  <div class="clearfix pbs">
255
268
  <svg class="icon icon-log"><use xlink:href="symbol-defs.svg#icon-log"></use></svg><span class="name"> icon-log</span>
256
269
  </div>
257
270
  </div>
258
- <div class="glyph fs1">
271
+ <div class="glyph fs2">
259
272
  <div class="clearfix pbs">
260
273
  <svg class="icon icon-campaign"><use xlink:href="symbol-defs.svg#icon-campaign"></use></svg><span class="name"> icon-campaign</span>
261
274
  </div>
262
275
  </div>
263
- <div class="glyph fs1">
276
+ <div class="glyph fs2">
264
277
  <div class="clearfix pbs">
265
278
  <svg class="icon icon-contact"><use xlink:href="symbol-defs.svg#icon-contact"></use></svg><span class="name"> icon-contact</span>
266
279
  </div>
267
280
  </div>
268
- <div class="glyph fs1">
281
+ <div class="glyph fs2">
269
282
  <div class="clearfix pbs">
270
283
  <svg class="icon icon-flow"><use xlink:href="symbol-defs.svg#icon-flow"></use></svg><span class="name"> icon-flow</span>
271
284
  </div>
272
285
  </div>
273
- <div class="glyph fs1">
286
+ <div class="glyph fs2">
274
287
  <div class="clearfix pbs">
275
288
  <svg class="icon icon-activity"><use xlink:href="symbol-defs.svg#icon-activity"></use></svg><span class="name"> icon-activity</span>
276
289
  </div>
277
290
  </div>
278
- <div class="glyph fs1">
291
+ <div class="glyph fs2">
279
292
  <div class="clearfix pbs">
280
293
  <svg class="icon icon-alert-circle"><use xlink:href="symbol-defs.svg#icon-alert-circle"></use></svg><span class="name"> icon-alert-circle</span>
281
294
  </div>
282
295
  </div>
283
- <div class="glyph fs1">
296
+ <div class="glyph fs2">
284
297
  <div class="clearfix pbs">
285
298
  <svg class="icon icon-alert-octagon"><use xlink:href="symbol-defs.svg#icon-alert-octagon"></use></svg><span class="name"> icon-alert-octagon</span>
286
299
  </div>
287
300
  </div>
288
- <div class="glyph fs1">
301
+ <div class="glyph fs2">
289
302
  <div class="clearfix pbs">
290
303
  <svg class="icon icon-alert-triangle"><use xlink:href="symbol-defs.svg#icon-alert-triangle"></use></svg><span class="name"> icon-alert-triangle</span>
291
304
  </div>
292
305
  </div>
293
- <div class="glyph fs1">
306
+ <div class="glyph fs2">
294
307
  <div class="clearfix pbs">
295
308
  <svg class="icon icon-archive"><use xlink:href="symbol-defs.svg#icon-archive"></use></svg><span class="name"> icon-archive</span>
296
309
  </div>
297
310
  </div>
298
- <div class="glyph fs1">
311
+ <div class="glyph fs2">
299
312
  <div class="clearfix pbs">
300
313
  <svg class="icon icon-battery"><use xlink:href="symbol-defs.svg#icon-battery"></use></svg><span class="name"> icon-battery</span>
301
314
  </div>
302
315
  </div>
303
- <div class="glyph fs1">
316
+ <div class="glyph fs2">
304
317
  <div class="clearfix pbs">
305
318
  <svg class="icon icon-battery-charging"><use xlink:href="symbol-defs.svg#icon-battery-charging"></use></svg><span class="name"> icon-battery-charging</span>
306
319
  </div>
307
320
  </div>
308
- <div class="glyph fs1">
321
+ <div class="glyph fs2">
309
322
  <div class="clearfix pbs">
310
323
  <svg class="icon icon-book"><use xlink:href="symbol-defs.svg#icon-book"></use></svg><span class="name"> icon-book</span>
311
324
  </div>
312
325
  </div>
313
- <div class="glyph fs1">
326
+ <div class="glyph fs2">
314
327
  <div class="clearfix pbs">
315
328
  <svg class="icon icon-briefcase"><use xlink:href="symbol-defs.svg#icon-briefcase"></use></svg><span class="name"> icon-briefcase</span>
316
329
  </div>
317
330
  </div>
318
- <div class="glyph fs1">
331
+ <div class="glyph fs2">
319
332
  <div class="clearfix pbs">
320
333
  <svg class="icon icon-calendar1"><use xlink:href="symbol-defs.svg#icon-calendar1"></use></svg><span class="name"> icon-calendar1</span>
321
334
  </div>
322
335
  </div>
323
- <div class="glyph fs1">
336
+ <div class="glyph fs2">
324
337
  <div class="clearfix pbs">
325
338
  <svg class="icon icon-camera"><use xlink:href="symbol-defs.svg#icon-camera"></use></svg><span class="name"> icon-camera</span>
326
339
  </div>
327
340
  </div>
328
- <div class="glyph fs1">
341
+ <div class="glyph fs2">
329
342
  <div class="clearfix pbs">
330
343
  <svg class="icon icon-check"><use xlink:href="symbol-defs.svg#icon-check"></use></svg><span class="name"> icon-check</span>
331
344
  </div>
332
345
  </div>
333
- <div class="glyph fs1">
346
+ <div class="glyph fs2">
334
347
  <div class="clearfix pbs">
335
348
  <svg class="icon icon-check-square"><use xlink:href="symbol-defs.svg#icon-check-square"></use></svg><span class="name"> icon-check-square</span>
336
349
  </div>
337
350
  </div>
338
- <div class="glyph fs1">
351
+ <div class="glyph fs2">
339
352
  <div class="clearfix pbs">
340
353
  <svg class="icon icon-chevron-down"><use xlink:href="symbol-defs.svg#icon-chevron-down"></use></svg><span class="name"> icon-chevron-down</span>
341
354
  </div>
342
355
  </div>
343
- <div class="glyph fs1">
356
+ <div class="glyph fs2">
344
357
  <div class="clearfix pbs">
345
358
  <svg class="icon icon-chevron-left"><use xlink:href="symbol-defs.svg#icon-chevron-left"></use></svg><span class="name"> icon-chevron-left</span>
346
359
  </div>
347
360
  </div>
348
- <div class="glyph fs1">
361
+ <div class="glyph fs2">
349
362
  <div class="clearfix pbs">
350
363
  <svg class="icon icon-chevron-right"><use xlink:href="symbol-defs.svg#icon-chevron-right"></use></svg><span class="name"> icon-chevron-right</span>
351
364
  </div>
352
365
  </div>
353
- <div class="glyph fs1">
366
+ <div class="glyph fs2">
354
367
  <div class="clearfix pbs">
355
368
  <svg class="icon icon-chevron-up"><use xlink:href="symbol-defs.svg#icon-chevron-up"></use></svg><span class="name"> icon-chevron-up</span>
356
369
  </div>
357
370
  </div>
358
- <div class="glyph fs1">
371
+ <div class="glyph fs2">
359
372
  <div class="clearfix pbs">
360
373
  <svg class="icon icon-chevrons-down"><use xlink:href="symbol-defs.svg#icon-chevrons-down"></use></svg><span class="name"> icon-chevrons-down</span>
361
374
  </div>
362
375
  </div>
363
- <div class="glyph fs1">
376
+ <div class="glyph fs2">
364
377
  <div class="clearfix pbs">
365
378
  <svg class="icon icon-chevrons-left"><use xlink:href="symbol-defs.svg#icon-chevrons-left"></use></svg><span class="name"> icon-chevrons-left</span>
366
379
  </div>
367
380
  </div>
368
- <div class="glyph fs1">
381
+ <div class="glyph fs2">
369
382
  <div class="clearfix pbs">
370
383
  <svg class="icon icon-chevrons-right"><use xlink:href="symbol-defs.svg#icon-chevrons-right"></use></svg><span class="name"> icon-chevrons-right</span>
371
384
  </div>
372
385
  </div>
373
- <div class="glyph fs1">
386
+ <div class="glyph fs2">
374
387
  <div class="clearfix pbs">
375
388
  <svg class="icon icon-chevrons-up"><use xlink:href="symbol-defs.svg#icon-chevrons-up"></use></svg><span class="name"> icon-chevrons-up</span>
376
389
  </div>
377
390
  </div>
378
- <div class="glyph fs1">
391
+ <div class="glyph fs2">
379
392
  <div class="clearfix pbs">
380
393
  <svg class="icon icon-circle"><use xlink:href="symbol-defs.svg#icon-circle"></use></svg><span class="name"> icon-circle</span>
381
394
  </div>
382
395
  </div>
383
- <div class="glyph fs1">
396
+ <div class="glyph fs2">
384
397
  <div class="clearfix pbs">
385
398
  <svg class="icon icon-clipboard"><use xlink:href="symbol-defs.svg#icon-clipboard"></use></svg><span class="name"> icon-clipboard</span>
386
399
  </div>
387
400
  </div>
388
- <div class="glyph fs1">
401
+ <div class="glyph fs2">
389
402
  <div class="clearfix pbs">
390
403
  <svg class="icon icon-clock"><use xlink:href="symbol-defs.svg#icon-clock"></use></svg><span class="name"> icon-clock</span>
391
404
  </div>
392
405
  </div>
393
- <div class="glyph fs1">
406
+ <div class="glyph fs2">
394
407
  <div class="clearfix pbs">
395
408
  <svg class="icon icon-cloud1"><use xlink:href="symbol-defs.svg#icon-cloud1"></use></svg><span class="name"> icon-cloud1</span>
396
409
  </div>
397
410
  </div>
398
- <div class="glyph fs1">
411
+ <div class="glyph fs2">
399
412
  <div class="clearfix pbs">
400
413
  <svg class="icon icon-code"><use xlink:href="symbol-defs.svg#icon-code"></use></svg><span class="name"> icon-code</span>
401
414
  </div>
402
415
  </div>
403
- <div class="glyph fs1">
416
+ <div class="glyph fs2">
404
417
  <div class="clearfix pbs">
405
418
  <svg class="icon icon-copy"><use xlink:href="symbol-defs.svg#icon-copy"></use></svg><span class="name"> icon-copy</span>
406
419
  </div>
407
420
  </div>
408
- <div class="glyph fs1">
421
+ <div class="glyph fs2">
409
422
  <div class="clearfix pbs">
410
423
  <svg class="icon icon-credit-card"><use xlink:href="symbol-defs.svg#icon-credit-card"></use></svg><span class="name"> icon-credit-card</span>
411
424
  </div>
412
425
  </div>
413
- <div class="glyph fs1">
426
+ <div class="glyph fs2">
414
427
  <div class="clearfix pbs">
415
428
  <svg class="icon icon-disc"><use xlink:href="symbol-defs.svg#icon-disc"></use></svg><span class="name"> icon-disc</span>
416
429
  </div>
417
430
  </div>
418
- <div class="glyph fs1">
431
+ <div class="glyph fs2">
419
432
  <div class="clearfix pbs">
420
433
  <svg class="icon icon-edit"><use xlink:href="symbol-defs.svg#icon-edit"></use></svg><span class="name"> icon-edit</span>
421
434
  </div>
422
435
  </div>
423
- <div class="glyph fs1">
436
+ <div class="glyph fs2">
424
437
  <div class="clearfix pbs">
425
438
  <svg class="icon icon-edit-3"><use xlink:href="symbol-defs.svg#icon-edit-3"></use></svg><span class="name"> icon-edit-3</span>
426
439
  </div>
427
440
  </div>
428
- <div class="glyph fs1">
441
+ <div class="glyph fs2">
429
442
  <div class="clearfix pbs">
430
443
  <svg class="icon icon-external-link1"><use xlink:href="symbol-defs.svg#icon-external-link1"></use></svg><span class="name"> icon-external-link1</span>
431
444
  </div>
432
445
  </div>
433
- <div class="glyph fs1">
446
+ <div class="glyph fs2">
434
447
  <div class="clearfix pbs">
435
448
  <svg class="icon icon-flag"><use xlink:href="symbol-defs.svg#icon-flag"></use></svg><span class="name"> icon-flag</span>
436
449
  </div>
437
450
  </div>
438
- <div class="glyph fs1">
451
+ <div class="glyph fs2">
439
452
  <div class="clearfix pbs">
440
453
  <svg class="icon icon-home"><use xlink:href="symbol-defs.svg#icon-home"></use></svg><span class="name"> icon-home</span>
441
454
  </div>
442
455
  </div>
443
- <div class="glyph fs1">
456
+ <div class="glyph fs2">
444
457
  <div class="clearfix pbs">
445
458
  <svg class="icon icon-image"><use xlink:href="symbol-defs.svg#icon-image"></use></svg><span class="name"> icon-image</span>
446
459
  </div>
447
460
  </div>
448
- <div class="glyph fs1">
461
+ <div class="glyph fs2">
449
462
  <div class="clearfix pbs">
450
463
  <svg class="icon icon-inbox"><use xlink:href="symbol-defs.svg#icon-inbox"></use></svg><span class="name"> icon-inbox</span>
451
464
  </div>
452
465
  </div>
453
- <div class="glyph fs1">
466
+ <div class="glyph fs2">
454
467
  <div class="clearfix pbs">
455
468
  <svg class="icon icon-info"><use xlink:href="symbol-defs.svg#icon-info"></use></svg><span class="name"> icon-info</span>
456
469
  </div>
457
470
  </div>
458
- <div class="glyph fs1">
471
+ <div class="glyph fs2">
459
472
  <div class="clearfix pbs">
460
473
  <svg class="icon icon-layers"><use xlink:href="symbol-defs.svg#icon-layers"></use></svg><span class="name"> icon-layers</span>
461
474
  </div>
462
475
  </div>
463
- <div class="glyph fs1">
476
+ <div class="glyph fs2">
464
477
  <div class="clearfix pbs">
465
478
  <svg class="icon icon-loader"><use xlink:href="symbol-defs.svg#icon-loader"></use></svg><span class="name"> icon-loader</span>
466
479
  </div>
467
480
  </div>
468
- <div class="glyph fs1">
481
+ <div class="glyph fs2">
469
482
  <div class="clearfix pbs">
470
483
  <svg class="icon icon-lock"><use xlink:href="symbol-defs.svg#icon-lock"></use></svg><span class="name"> icon-lock</span>
471
484
  </div>
472
485
  </div>
473
- <div class="glyph fs1">
486
+ <div class="glyph fs2">
474
487
  <div class="clearfix pbs">
475
488
  <svg class="icon icon-mail1"><use xlink:href="symbol-defs.svg#icon-mail1"></use></svg><span class="name"> icon-mail1</span>
476
489
  </div>
477
490
  </div>
478
- <div class="glyph fs1">
491
+ <div class="glyph fs2">
479
492
  <div class="clearfix pbs">
480
493
  <svg class="icon icon-message-square"><use xlink:href="symbol-defs.svg#icon-message-square"></use></svg><span class="name"> icon-message-square</span>
481
494
  </div>
482
495
  </div>
483
- <div class="glyph fs1">
496
+ <div class="glyph fs2">
484
497
  <div class="clearfix pbs">
485
498
  <svg class="icon icon-mic"><use xlink:href="symbol-defs.svg#icon-mic"></use></svg><span class="name"> icon-mic</span>
486
499
  </div>
487
500
  </div>
488
- <div class="glyph fs1">
501
+ <div class="glyph fs2">
489
502
  <div class="clearfix pbs">
490
503
  <svg class="icon icon-paperclip"><use xlink:href="symbol-defs.svg#icon-paperclip"></use></svg><span class="name"> icon-paperclip</span>
491
504
  </div>
492
505
  </div>
493
- <div class="glyph fs1">
506
+ <div class="glyph fs2">
494
507
  <div class="clearfix pbs">
495
508
  <svg class="icon icon-phone"><use xlink:href="symbol-defs.svg#icon-phone"></use></svg><span class="name"> icon-phone</span>
496
509
  </div>
497
510
  </div>
498
- <div class="glyph fs1">
511
+ <div class="glyph fs2">
499
512
  <div class="clearfix pbs">
500
513
  <svg class="icon icon-phone-forwarded"><use xlink:href="symbol-defs.svg#icon-phone-forwarded"></use></svg><span class="name"> icon-phone-forwarded</span>
501
514
  </div>
502
515
  </div>
503
- <div class="glyph fs1">
516
+ <div class="glyph fs2">
504
517
  <div class="clearfix pbs">
505
518
  <svg class="icon icon-phone-incoming"><use xlink:href="symbol-defs.svg#icon-phone-incoming"></use></svg><span class="name"> icon-phone-incoming</span>
506
519
  </div>
507
520
  </div>
508
- <div class="glyph fs1">
521
+ <div class="glyph fs2">
509
522
  <div class="clearfix pbs">
510
523
  <svg class="icon icon-phone-missed"><use xlink:href="symbol-defs.svg#icon-phone-missed"></use></svg><span class="name"> icon-phone-missed</span>
511
524
  </div>
512
525
  </div>
513
- <div class="glyph fs1">
526
+ <div class="glyph fs2">
514
527
  <div class="clearfix pbs">
515
528
  <svg class="icon icon-phone-outgoing"><use xlink:href="symbol-defs.svg#icon-phone-outgoing"></use></svg><span class="name"> icon-phone-outgoing</span>
516
529
  </div>
517
530
  </div>
518
- <div class="glyph fs1">
531
+ <div class="glyph fs2">
519
532
  <div class="clearfix pbs">
520
533
  <svg class="icon icon-radio"><use xlink:href="symbol-defs.svg#icon-radio"></use></svg><span class="name"> icon-radio</span>
521
534
  </div>
522
535
  </div>
523
- <div class="glyph fs1">
536
+ <div class="glyph fs2">
524
537
  <div class="clearfix pbs">
525
538
  <svg class="icon icon-repeat"><use xlink:href="symbol-defs.svg#icon-repeat"></use></svg><span class="name"> icon-repeat</span>
526
539
  </div>
527
540
  </div>
528
- <div class="glyph fs1">
541
+ <div class="glyph fs2">
529
542
  <div class="clearfix pbs">
530
543
  <svg class="icon icon-send"><use xlink:href="symbol-defs.svg#icon-send"></use></svg><span class="name"> icon-send</span>
531
544
  </div>
532
545
  </div>
533
- <div class="glyph fs1">
546
+ <div class="glyph fs2">
534
547
  <div class="clearfix pbs">
535
548
  <svg class="icon icon-settings"><use xlink:href="symbol-defs.svg#icon-settings"></use></svg><span class="name"> icon-settings</span>
536
549
  </div>
537
550
  </div>
538
- <div class="glyph fs1">
551
+ <div class="glyph fs2">
539
552
  <div class="clearfix pbs">
540
553
  <svg class="icon icon-shield"><use xlink:href="symbol-defs.svg#icon-shield"></use></svg><span class="name"> icon-shield</span>
541
554
  </div>
542
555
  </div>
543
- <div class="glyph fs1">
556
+ <div class="glyph fs2">
544
557
  <div class="clearfix pbs">
545
558
  <svg class="icon icon-shield-off"><use xlink:href="symbol-defs.svg#icon-shield-off"></use></svg><span class="name"> icon-shield-off</span>
546
559
  </div>
547
560
  </div>
548
- <div class="glyph fs1">
561
+ <div class="glyph fs2">
549
562
  <div class="clearfix pbs">
550
563
  <svg class="icon icon-sidebar"><use xlink:href="symbol-defs.svg#icon-sidebar"></use></svg><span class="name"> icon-sidebar</span>
551
564
  </div>
552
565
  </div>
553
- <div class="glyph fs1">
566
+ <div class="glyph fs2">
554
567
  <div class="clearfix pbs">
555
568
  <svg class="icon icon-slash"><use xlink:href="symbol-defs.svg#icon-slash"></use></svg><span class="name"> icon-slash</span>
556
569
  </div>
557
570
  </div>
558
- <div class="glyph fs1">
571
+ <div class="glyph fs2">
559
572
  <div class="clearfix pbs">
560
573
  <svg class="icon icon-sliders"><use xlink:href="symbol-defs.svg#icon-sliders"></use></svg><span class="name"> icon-sliders</span>
561
574
  </div>
562
575
  </div>
563
- <div class="glyph fs1">
576
+ <div class="glyph fs2">
564
577
  <div class="clearfix pbs">
565
578
  <svg class="icon icon-smartphone"><use xlink:href="symbol-defs.svg#icon-smartphone"></use></svg><span class="name"> icon-smartphone</span>
566
579
  </div>
567
580
  </div>
568
- <div class="glyph fs1">
581
+ <div class="glyph fs2">
569
582
  <div class="clearfix pbs">
570
583
  <svg class="icon icon-square"><use xlink:href="symbol-defs.svg#icon-square"></use></svg><span class="name"> icon-square</span>
571
584
  </div>
572
585
  </div>
573
- <div class="glyph fs1">
586
+ <div class="glyph fs2">
574
587
  <div class="clearfix pbs">
575
588
  <svg class="icon icon-tag"><use xlink:href="symbol-defs.svg#icon-tag"></use></svg><span class="name"> icon-tag</span>
576
589
  </div>
577
590
  </div>
578
- <div class="glyph fs1">
591
+ <div class="glyph fs2">
579
592
  <div class="clearfix pbs">
580
593
  <svg class="icon icon-tool"><use xlink:href="symbol-defs.svg#icon-tool"></use></svg><span class="name"> icon-tool</span>
581
594
  </div>
582
595
  </div>
583
- <div class="glyph fs1">
596
+ <div class="glyph fs2">
584
597
  <div class="clearfix pbs">
585
598
  <svg class="icon icon-trash"><use xlink:href="symbol-defs.svg#icon-trash"></use></svg><span class="name"> icon-trash</span>
586
599
  </div>
587
600
  </div>
588
- <div class="glyph fs1">
601
+ <div class="glyph fs2">
589
602
  <div class="clearfix pbs">
590
603
  <svg class="icon icon-trash-2"><use xlink:href="symbol-defs.svg#icon-trash-2"></use></svg><span class="name"> icon-trash-2</span>
591
604
  </div>
592
605
  </div>
593
- <div class="glyph fs1">
606
+ <div class="glyph fs2">
594
607
  <div class="clearfix pbs">
595
608
  <svg class="icon icon-user"><use xlink:href="symbol-defs.svg#icon-user"></use></svg><span class="name"> icon-user</span>
596
609
  </div>
597
610
  </div>
598
- <div class="glyph fs1">
611
+ <div class="glyph fs2">
599
612
  <div class="clearfix pbs">
600
613
  <svg class="icon icon-users"><use xlink:href="symbol-defs.svg#icon-users"></use></svg><span class="name"> icon-users</span>
601
614
  </div>
602
615
  </div>
603
- <div class="glyph fs1">
616
+ <div class="glyph fs2">
604
617
  <div class="clearfix pbs">
605
618
  <svg class="icon icon-speaker"><use xlink:href="symbol-defs.svg#icon-speaker"></use></svg><span class="name"> icon-speaker</span>
606
619
  </div>
607
620
  </div>
608
- <div class="glyph fs1">
621
+ <div class="glyph fs2">
609
622
  <div class="clearfix pbs">
610
623
  <svg class="icon icon-x"><use xlink:href="symbol-defs.svg#icon-x"></use></svg><span class="name"> icon-x</span>
611
624
  </div>
612
625
  </div>
613
- <div class="glyph fs1">
626
+ <div class="glyph fs2">
614
627
  <div class="clearfix pbs">
615
628
  <svg class="icon icon-x-octagon"><use xlink:href="symbol-defs.svg#icon-x-octagon"></use></svg><span class="name"> icon-x-octagon</span>
616
629
  </div>
617
630
  </div>
618
- <div class="glyph fs1">
631
+ <div class="glyph fs2">
619
632
  <div class="clearfix pbs">
620
633
  <svg class="icon icon-zap"><use xlink:href="symbol-defs.svg#icon-zap"></use></svg><span class="name"> icon-zap</span>
621
634
  </div>
622
635
  </div>
623
- <div class="glyph fs1">
636
+ <div class="glyph fs2">
624
637
  <div class="clearfix pbs">
625
638
  <svg class="icon icon-contact-cal"><use xlink:href="symbol-defs.svg#icon-contact-cal"></use></svg><span class="name"> icon-contact-cal</span>
626
639
  </div>
627
640
  </div>
628
- <div class="glyph fs1">
641
+ <div class="glyph fs2">
629
642
  <div class="clearfix pbs">
630
643
  <svg class="icon icon-send-mobile"><use xlink:href="symbol-defs.svg#icon-send-mobile"></use></svg><span class="name"> icon-send-mobile</span>
631
644
  </div>
@@ -633,37 +646,37 @@
633
646
  </div>
634
647
  <div class="clearfix mhl ptl">
635
648
  <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
636
- <div class="glyph fs2">
649
+ <div class="glyph fs3">
637
650
  <div class="clearfix pbs">
638
651
  <svg class="icon icon-credits"><use xlink:href="symbol-defs.svg#icon-credits"></use></svg><span class="name"> icon-credits</span>
639
652
  </div>
640
653
  </div>
641
- <div class="glyph fs2">
654
+ <div class="glyph fs3">
642
655
  <div class="clearfix pbs">
643
656
  <svg class="icon icon-channel"><use xlink:href="symbol-defs.svg#icon-channel"></use></svg><span class="name"> icon-channel</span>
644
657
  </div>
645
658
  </div>
646
- <div class="glyph fs2">
659
+ <div class="glyph fs3">
647
660
  <div class="clearfix pbs">
648
661
  <svg class="icon icon-users1"><use xlink:href="symbol-defs.svg#icon-users1"></use></svg><span class="name"> icon-users1</span>
649
662
  </div>
650
663
  </div>
651
- <div class="glyph fs2">
664
+ <div class="glyph fs3">
652
665
  <div class="clearfix pbs">
653
666
  <svg class="icon icon-lock2"><use xlink:href="symbol-defs.svg#icon-lock2"></use></svg><span class="name"> icon-lock2</span>
654
667
  </div>
655
668
  </div>
656
- <div class="glyph fs2">
669
+ <div class="glyph fs3">
657
670
  <div class="clearfix pbs">
658
671
  <svg class="icon icon-atom"><use xlink:href="symbol-defs.svg#icon-atom"></use></svg><span class="name"> icon-atom</span>
659
672
  </div>
660
673
  </div>
661
- <div class="glyph fs2">
674
+ <div class="glyph fs3">
662
675
  <div class="clearfix pbs">
663
676
  <svg class="icon icon-paperplane"><use xlink:href="symbol-defs.svg#icon-paperplane"></use></svg><span class="name"> icon-paperplane</span>
664
677
  </div>
665
678
  </div>
666
- <div class="glyph fs2">
679
+ <div class="glyph fs3">
667
680
  <div class="clearfix pbs">
668
681
  <svg class="icon icon-cancel"><use xlink:href="symbol-defs.svg#icon-cancel"></use></svg><span class="name"> icon-cancel</span>
669
682
  </div>
@@ -671,17 +684,9 @@
671
684
  </div>
672
685
  <div class="clearfix mhl ptl">
673
686
  <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
674
- <div class="glyph fs3">
675
- <div class="clearfix pbs">
676
- <svg class="icon icon-language"><use xlink:href="symbol-defs.svg#icon-language"></use></svg><span class="name"> icon-language</span>
677
- </div>
678
- </div>
679
- </div>
680
- <div class="clearfix mhl ptl">
681
- <h1 class="mvm mtn fgc1">Grid Size: 0</h1>
682
687
  <div class="glyph fs4">
683
688
  <div class="clearfix pbs">
684
- <svg class="icon icon-zapier"><use xlink:href="symbol-defs.svg#icon-zapier"></use></svg><span class="name"> icon-zapier</span>
689
+ <svg class="icon icon-language"><use xlink:href="symbol-defs.svg#icon-language"></use></svg><span class="name"> icon-language</span>
685
690
  </div>
686
691
  </div>
687
692
  </div>