Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / icon_guide.html @ 1eb800de

History | View | Annotate | Download (16.5 kB)

1
<!doctype html>
2
<html>
3
<head>
4
<meta charset='utf-8' />
5
  <meta name='viewport' content='width=device-width' />
6
<title>snf fonts</title>
7
<link rel='stylesheet' href='stylesheets/font_custom.css' />
8
<!--[if lte IE 7]><script src='lte-ie7.js'></script><![endif]-->
9
<style>
10
        section, header, footer {display: block; overflow: hidden;}
11
        body {
12
                font-family: sans-serif;
13
                color: #444;
14
                line-height: 1.5;
15
                font-size: 1em;
16
        }
17
        * {
18
                -moz-box-sizing: border-box;
19
                -webkit-box-sizing: border-box;
20
                box-sizing: border-box;
21
                margin: 0;
22
                padding: 0;
23
        }
24
        .glyph {
25
                font-size: 14px;
26
                float: left;
27
                text-align: center;
28
                background: #eee;
29
                padding: .75em;
30
                margin: .75em 1.5em .75em 1px;
31
                width: 20em;
32
                border-radius: .25em;
33
                box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
34
        }
35
        .glyph.aux {
36
                background-color: #f8f8e7;
37
        }
38
        .glyph input {
39
                font-family: consolas, monospace;
40
                font-size: 13px;
41
                width: 100%;
42
                text-align: center;
43
                border: 0;
44
                box-shadow: 0 0 0 1px #ccc;
45
                padding: .125em;
46
        }
47
        .w-main {
48
                width: 80%;
49
        }
50
        .centered {
51
                margin-left: auto;
52
                margin-right: auto;
53
        }
54
        .fs1 {
55
                font-size: 2em;
56
                color: rgb(71, 176, 233);
57
        }
58
        header {
59
                margin: 2em 0;
60
                padding-bottom: .5em;
61
                color: #666;
62
                box-shadow: 0 2px #eee;
63
        }
64
        header h1 {
65
                font-size: 2em;
66
                font-weight: normal;
67
        }
68
        .clearfix:before, .clearfix:after { content: ''; display: table; }
69
        .clearfix:after, .clear { clear: both; }
70
        footer {
71
                margin-top: 2em;
72
                padding: .5em 0;
73
                box-shadow: 0 -2px #eee;
74
        }
75
        a, a:visited {
76
                color: #B35047;
77
                text-decoration: none;
78
        }
79
        a:hover, a:focus {color: #000;}
80
        .box1 {
81
                font-size: 14px;
82
                display: inline-block;
83
                width: 15em;
84
                padding: .25em .5em;
85
                background: #eee;
86
                margin: .5em 1em .5em 0;
87
        }
88
        .general {
89
                font-weight: bold;
90
        }
91
        h1, h2 {
92
                color: #666;
93
                font-weight: normal;
94
        }
95

    
96
        .note {
97
                font-style: italic;
98
        }
99

    
100
        section ul {
101
                list-style-type:circle;
102
                margin: 18px;
103
        }
104
        li {
105
                font-size: 14px;
106
        }
107
</style>
108
</head>
109
<body>
110
        <div class='w-main centered'>
111
        <section class='mtm clearfix' >
112
        <header>
113
                <h1>Icons included in snf-font-1</h1>
114
                                
115
        </header>
116

    
117
        <section>
118
                <h2>snf icons</h2>
119
                <div class='glyph'>
120
                        <div class='fs1' aria-hidden='true' data-icon='v'></div>
121
                        <input type='text' readonly='readonly' value='snf-network-outline [v]' />
122
                </div>
123
                <div class='glyph'>
124
                        <div class='fs1' aria-hidden='true' data-icon='K'></div>
125
                        <input type='text' readonly='readonly' value='snf-network-full [K]' />
126
                </div>
127
                <div class='glyph'>
128
                        <div class='fs1' aria-hidden='true' data-icon='T'></div>
129
                        <input type='text' readonly='readonly' value='snf-network-create-outline [T]' />
130
                </div>
131
                <div class='glyph'>
132
                        <div class='fs1' aria-hidden='true' data-icon='U'></div>
133
                        <input type='text' readonly='readonly' value='snf-network-create-full [U]' />
134
                </div>
135
                <div class='glyph'>
136
                        <div class='fs1' aria-hidden='true' data-icon='7'></div>
137
                        <input type='text' readonly='readonly' value='snf-network-broken-1-outline [7]' />
138
                </div>
139
                <div class='glyph'>
140
                        <div class='fs1' aria-hidden='true' data-icon='V'></div>
141
                        <input type='text' readonly='readonly' value='snf-network-broken-1-full [V]' />
142
                </div>
143
                <div class='glyph'>
144
                        <div class='fs1' aria-hidden='true' data-icon='8'></div>
145
                        <input type='text' readonly='readonly' value='snf-network-broken-2-outline [8]' />
146
                </div>
147
                <div class='glyph'>
148
                        <div class='fs1' aria-hidden='true' data-icon='W'></div>
149
                        <input type='text' readonly='readonly' value='snf-network-broken-2-full [W]' />
150
                </div>
151
                <div class='glyph'>
152
                        <div class='fs1' aria-hidden='true' data-icon='w'></div>
153
                        <input type='text' readonly='readonly' value='snf-pc-outline [w]' />
154
                </div>
155
                <div class='glyph'>
156
                        <div class='fs1' aria-hidden='true' data-icon='x'></div>
157
                        <input type='text' readonly='readonly' value='snf-pc-full [x]' />
158
                </div>
159
                <div class='glyph'>
160
                        <div class='fs1' aria-hidden='true' data-icon='S'></div>
161
                        <input type='text' readonly='readonly' value='snf-pc-create-full [S]' />
162
                </div>
163
                <div class='glyph'>
164
                        <div class='fs1' aria-hidden='true' data-icon='9'></div>
165
                        <input type='text' readonly='readonly' value='snf-pc-broken-outline [9]' />
166
                </div>
167
                <div class='glyph'>
168
                        <div class='fs1' aria-hidden='true' data-icon='X'></div>
169
                        <input type='text' readonly='readonly' value='snf-pc-broken-full [X]' />
170
                </div>
171
                <div class='glyph'>
172
                        <div class='fs1' aria-hidden='true' data-icon='!'></div>
173
                        <input type='text' readonly='readonly' value='snf-pc-reboot-outline [!]' />
174
                </div>
175
                <div class='glyph'>
176
                        <div class='fs1' aria-hidden='true' data-icon='Y'></div>
177
                        <input type='text' readonly='readonly' value='snf-pc-reboot-full [Y]' />
178
                </div>
179
                <div class='glyph'>
180
                        <div class='fs1' aria-hidden='true' data-icon='@'></div>
181
                        <input type='text' readonly='readonly' value='snf-pc-switch-outline [@]' />
182
                </div>
183
                <div class='glyph'>
184
                        <div class='fs1' aria-hidden='true' data-icon='Z'></div>
185
                        <input type='text' readonly='readonly' value='snf-pc-switch-full [Z]' />
186
                </div>
187
                <div class='glyph'>
188
                        <div class='fs1' aria-hidden='true' data-icon='u'></div>
189
                        <input type='text' readonly='readonly' value='snf-volume-outline [u]' />
190
                </div>
191
                <div class='glyph'>
192
                        <div class='fs1' aria-hidden='true' data-icon='O'></div>
193
                        <input type='text' readonly='readonly' value='snf-volume-full [O]' />
194
                </div>
195
                <div class='glyph'>
196
                        <div class='fs1' aria-hidden='true' data-icon='6'></div>
197
                        <input type='text' readonly='readonly' value='snf-volume-create-full [6]' />
198
                </div>
199
                <div class='glyph'>
200
                        <div class='fs1' aria-hidden='true' data-icon='0'></div>
201
                        <input type='text' readonly='readonly' value='snf-volume-broken-outline [0]' />
202
                </div>
203
                <div class='glyph'>
204
                        <div class='fs1' aria-hidden='true' data-icon='y'></div>
205
                        <input type='text' readonly='readonly' value='snf-pithos-outline [y]' />
206
                </div>
207
                <div class='glyph'>
208
                        <div class='fs1' aria-hidden='true' data-icon='5'></div>
209
                        <input type='text' readonly='readonly' value='snf-pithos-full [5]' />
210
                </div>
211
                <div class='glyph'>
212
                        <div class='fs1' aria-hidden='true' data-icon='z'></div>
213
                        <input type='text' readonly='readonly' value='snf-dashboard-outline [z]' />
214
                </div>
215
                <div class='glyph'>
216
                        <div class='fs1' aria-hidden='true' data-icon='E'></div>
217
                        <input type='text' readonly='readonly' value='snf-chip-outline [E]' />
218
                </div>
219
                <div class='glyph'>
220
                        <div class='fs1' aria-hidden='true' data-icon='3'></div>
221
                        <input type='text' readonly='readonly' value='snf-chip-full [3]' />
222
                </div>
223
                <div class='glyph'>
224
                        <div class='fs1' aria-hidden='true' data-icon='F'></div>
225
                        <input type='text' readonly='readonly' value='snf-lock-closed-full [F]' />
226
                </div>        
227
                <div class='glyph'>
228
                        <div class='fs1' aria-hidden='true' data-icon='G'></div>
229
                        <input type='text' readonly='readonly' value='snf-lock-open-full [G]' />
230
                </div>        
231
                <div class='glyph'>
232
                        <div class='fs1' aria-hidden='true' data-icon='H'></div>
233
                        <input type='text' readonly='readonly' value='snf-router-outline [H]' />
234
                </div>
235
                <div class='glyph'>
236
                        <div class='fs1' aria-hidden='true' data-icon='2'></div>
237
                        <input type='text' readonly='readonly' value='snf-router-full [2]' />
238
                </div>
239
                <div class='glyph'>
240
                        <div class='fs1' aria-hidden='true' data-icon='I'></div>
241
                        <input type='text' readonly='readonly' value='snf-www [I]' />
242
                </div>        
243
                <div class='glyph'>
244
                        <div class='fs1' aria-hidden='true' data-icon='J'></div>
245
                        <input type='text' readonly='readonly' value='snf-ram-outline [J]' />
246
                </div>
247
                <div class='glyph'>
248
                        <div class='fs1' aria-hidden='true' data-icon='R'></div>
249
                        <input type='text' readonly='readonly' value='snf-ram-full [R]' />
250
                </div>
251
                <div class='glyph'>
252
                        <div class='fs1' aria-hidden='true' data-icon='e'></div>
253
                        <input type='text' readonly='readonly' value='snf-snapshot-outline [e]' />
254
                </div>
255
                <div class='glyph'>
256
                        <div class='fs1' aria-hidden='true' data-icon='N'></div>
257
                        <input type='text' readonly='readonly' value='snf-snapshot-full [N]' />
258
                </div>
259
                <div class='glyph'>
260
                        <div class='fs1' aria-hidden='true' data-icon='f'></div>
261
                        <input type='text' readonly='readonly' value='snf-image-outline [f]' />
262
                </div>
263
                <div class='glyph'>
264
                        <div class='fs1' aria-hidden='true' data-icon='Q'></div>
265
                        <input type='text' readonly='readonly' value='snf-image-full [Q]' />
266
                </div>
267
                <div class='glyph'>
268
                        <div class='fs1' aria-hidden='true' data-icon='m'></div>
269
                        <input type='text' readonly='readonly' value='snf-plus-outline [m]' />
270
                </div>
271
                <div class='glyph'>
272
                        <div class='fs1' aria-hidden='true' data-icon='4'></div>
273
                        <input type='text' readonly='readonly' value='snf-plus-full [4]' />
274
                </div>        
275
                <div class='glyph'>
276
                        <div class='fs1' aria-hidden='true' data-icon='P'></div>
277
                        <input type='text' readonly='readonly' value='snf-nic-outline [P]' />
278
                </div>
279
                <div class='glyph'>
280
                        <div class='fs1' aria-hidden='true' data-icon='r'></div>
281
                        <input type='text' readonly='readonly' value='snf-nic-full [r]' />
282
                </div>
283
                <div class='glyph'>
284
                        <div class='fs1' aria-hidden='true' data-icon='#'></div>
285
                        <input type='text' readonly='readonly' value='snf-key-outline [#]' />
286
                </div>
287
                <div class='glyph'>
288
                        <div class='fs1' aria-hidden='true' data-icon='1'></div>
289
                        <input type='text' readonly='readonly' value='snf-key-full [1]' />
290
                </div>
291
        </section>
292

    
293
        <section>
294
                <h2>checkboxes - radiobuttons</h2>
295
                <div class='glyph'>
296
                        <div class='fs1' aria-hidden='true' data-icon='a'></div>
297
                        <input type='text' readonly='readonly' value='snf-checkbox-unchecked [a]' />
298
                </div>
299
                <div class='glyph'>
300
                        <div class='fs1' aria-hidden='true' data-icon='b'></div>
301
                        <input type='text' readonly='readonly' value='snf-checkbox-checked [b]' />
302
                </div>
303
                <div class='glyph'>
304
                        <div class='fs1' aria-hidden='true' data-icon='C'></div>
305
                        <input type='text' readonly='readonly' value='snf-radio-unchecked [C]' />
306
                </div>
307
                <div class='glyph'>
308
                        <div class='fs1' aria-hidden='true' data-icon='B'></div>
309
                        <input type='text' readonly='readonly' value='snf-radio-checked [B]' />
310
                </div>
311
        </section>
312
        
313
        <section>
314
                <h2>close - cancel - remove</h2>
315
                <div class='glyph'>
316
                        <div class='fs1' aria-hidden='true' data-icon='D'></div>
317
                        <input type='text' readonly='readonly' value='snf-close [D]' />
318
                </div>        
319
                <div class='glyph'>
320
                        <div class='fs1' aria-hidden='true' data-icon='c'></div>
321
                        <input type='text' readonly='readonly' value='snf-cancel-circled [c]' />
322
                </div>
323
                <div class='glyph'>
324
                        <div class='fs1' aria-hidden='true' data-icon='n'></div>
325
                        <input type='text' readonly='readonly' value='snf-minus-sign [n]' />
326
                </div>
327
                <div class='glyph'>
328
                <div class='fs1' aria-hidden='true' data-icon='j'></div>
329
                <input type='text' readonly='readonly' value='snf-ban-circle [j]' />
330
                </div>
331
                <div class='glyph'>
332
                        <div class='fs1' aria-hidden='true' data-icon='$'></div>
333
                        <input type='text' readonly='readonly' value='snf-trash-outline [$]' />
334
                </div>
335
                <div class='glyph'>
336
                        <div class='fs1' aria-hidden='true' data-icon='='></div>
337
                        <input type='text' readonly='readonly' value='snf-trash-full [=]' />
338
                </div>
339
        </section>
340
        
341
        <section>
342
                <h2>ok - confirm</h2>
343
                <div class='glyph'>
344
                        <div class='fs1' aria-hidden='true' data-icon='l'></div>
345
                        <input type='text' readonly='readonly' value='snf-ok-sign [l]' />
346
                </div>
347
                <div class='glyph'>
348
                        <div class='fs1' aria-hidden='true' data-icon='h'></div>
349
                        <input type='text' readonly='readonly' value='snf-ok [h]' />
350
                </div>
351
        </section>
352
                
353
        <section>
354
                <h2>show - preview - view type</h2>
355
                <div class='glyph'>
356
                        <div class='fs1' aria-hidden='true' data-icon='A'></div>
357
                        <input type='text' readonly='readonly' value='snf-eye [A]' />
358
                </div>
359
                <div class='glyph'>
360
                        <div class='fs1' aria-hidden='true' data-icon='t'></div>
361
                        <input type='text' readonly='readonly' value='ssnf-gridview [t]' />
362
                </div>        
363
                <div class='glyph'>
364
                        <div class='fs1' aria-hidden='true' data-icon='s'></div>
365
                        <input type='text' readonly='readonly' value='snf-listview [s]' />
366
                </div>        
367
        </section>
368

    
369
        <section>
370
                <h2>arrows</h2>
371
                <div class='glyph'>
372
                        <div class='fs1' aria-hidden='true' data-icon='L'></div>
373
                        <input type='text' readonly='readonly' value='snf-arrow-up [L]' />
374
                </div>
375
                <div class='glyph'>
376
                        <div class='fs1' aria-hidden='true' data-icon='M'></div>
377
                        <input type='text' readonly='readonly' value='snf-arrow-down [M]' />
378
                </div>
379
                <div class='glyph'>
380
                        <div class='fs1' aria-hidden='true' data-icon='_'></div>
381
                        <input type='text' readonly='readonly' value='snf-arrow-left-small-full [_]' />
382
                </div>
383
                <div class='glyph'>
384
                        <div class='fs1' aria-hidden='true' data-icon='-'></div>
385
                        <input type='text' readonly='readonly' value='snf-arrow-right-small-full [-]' />
386
                </div>
387
                <div class='glyph'>
388
                        <div class='fs1' aria-hidden='true' data-icon='('></div>
389
                        <input type='text' readonly='readonly' value='snf-upload-full [()]' />
390
                </div>
391
                <div class='glyph'>
392
                        <div class='fs1' aria-hidden='true' data-icon='%'></div>
393
                        <input type='text' readonly='readonly' value='snf-download-full [%]' />
394
                </div>
395
                <div class='glyph'>
396
                        <div class='fs1' aria-hidden='true' data-icon=')'></div>
397
                        <input type='text' readonly='readonly' value='snf-refresh-outline [)]' />
398
                </div>
399
        </section>
400

    
401
        <section>
402
                <h2>misc</h2>
403
                <div class='glyph'>
404
                        <div class='fs1' aria-hidden='true' data-icon='q'></div>
405
                        <input type='text' readonly='readonly' value='snf-edit [q]' />
406
                </div>
407
                <div class='glyph'>
408
                        <div class='fs1' aria-hidden='true' data-icon='d'></div>
409
                        <input type='text' readonly='readonly' value='snf-search [d]' />
410
                </div>
411
                <div class='glyph'>
412
                        <div class='fs1' aria-hidden='true' data-icon='g'></div>
413
                        <input type='text' readonly='readonly' value='snf-twitter-logo [g]' />
414
                </div>        
415
                <div class='glyph'>
416
                        <div class='fs1' aria-hidden='true' data-icon='i'></div>
417
                        <input type='text' readonly='readonly' value='snf-switch [i]' />
418
                </div>        
419
                <div class='glyph'>
420
                        <div class='fs1' aria-hidden='true' data-icon='k'></div>
421
                        <input type='text' readonly='readonly' value='snf-thunder-full [k]' />
422
                </div>        
423
                <div class='glyph'>
424
                        <div class='fs1' aria-hidden='true' data-icon='o'></div>
425
                        <input type='text' readonly='readonly' value='snf-info-outline [o]' />
426
                </div>
427
                <div class='glyph'>
428
                        <div class='fs1' aria-hidden='true' data-icon='p'></div>
429
                        <input type='text' readonly='readonly' value='snf-info-full [p]' />
430
                </div>
431
                <div class='glyph'>
432
                        <div class='fs1' aria-hidden='true' data-icon='*'></div>
433
                        <input type='text' readonly='readonly' value='snf-person-outline [*]' />
434
                </div>
435
                <div class='glyph'>
436
                        <div class='fs1' aria-hidden='true' data-icon='?'></div>
437
                        <input type='text' readonly='readonly' value='snf-copy-outline [?]' />
438
                </div>
439
                <div class='glyph'>
440
                        <div class='fs1' aria-hidden='true' data-icon= '"'></div>
441
                        <input type='text' readonly='readonly' value='snf-copy-full ["]' />
442
                </div>
443
                <div class='glyph'>
444
                        <div class='fs1' aria-hidden='true' data-icon='&'></div>
445
                        <input type='text' readonly='readonly' value='snf-link-outline [&]' />
446
                </div>        
447
                <div class='glyph aux'>
448
                        <div class='fs1' aria-hidden='true' data-icon-aux='f'></div>
449
                        <input type='text' readonly='readonly' value='snf-folder-outline [f]' />
450
                </div>
451
                <div class='glyph aux'>
452
                        <div class='fs1' aria-hidden='true' data-icon-aux='F'></div>
453
                        <input type='text' readonly='readonly' value='snf-folder-full [F]' />
454
                </div>
455
                <div class='glyph aux'>
456
                        <div class='fs1' aria-hidden='true' data-icon-aux='a'></div>
457
                        <input type='text' readonly='readonly' value='snf-folder-create-outline [a]' />
458
                </div>
459
                <div class='glyph aux'>
460
                        <div class='fs1' aria-hidden='true' data-icon-aux= 'A'></div>
461
                        <input type='text' readonly='readonly' value='snf-folder-create-full [A]' />
462
                </div>
463
                <div class='glyph aux'>
464
                        <div class='fs1' aria-hidden='true' data-icon-aux='e'></div>
465
                        <input type='text' readonly='readonly' value='snf-folder-move-outline [e]' />
466
                </div>
467
                <div class='glyph aux'>
468
                        <div class='fs1' aria-hidden='true' data-icon-aux='E'></div>
469
                        <input type='text' readonly='readonly' value='snf-folder-move-full [E]' />
470
                </div>
471
                <div class='glyph aux'>
472
                        <div class='fs1' aria-hidden='true' data-icon-aux='c'></div>
473
                        <input type='text' readonly='readonly' value='snf-shared-by-me-outline [c]' />
474
                </div>
475
                <div class='glyph aux'>
476
                        <div class='fs1' aria-hidden='true' data-icon-aux='C'></div>
477
                        <input type='text' readonly='readonly' value='snf-shared-by-me-full [C]' />
478
                </div>
479
                <div class='glyph aux'>
480
                        <div class='fs1' aria-hidden='true' data-icon-aux='d'></div>
481
                        <input type='text' readonly='readonly' value='snf-shared-to-me-outline [d]' />
482
                </div>
483
                <div class='glyph aux'>
484
                        <div class='fs1' aria-hidden='true' data-icon-aux='D'></div>
485
                        <input type='text' readonly='readonly' value='snf-shared-to-me-full [D]' />
486
                </div>
487
        </section>
488

    
489
</section>
490
</div>        
491
</body>
492
</html>