Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / icon_guide.html @ 5ffce177

History | View | Annotate | Download (15.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-font-1</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: 7.5em;
32
                border-radius: .25em;
33
                box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
34
        }
35
        .glyph input {
36
                font-family: consolas, monospace;
37
                font-size: 13px;
38
                width: 100%;
39
                text-align: center;
40
                border: 0;
41
                box-shadow: 0 0 0 1px #ccc;
42
                padding: .125em;
43
        }
44
        .w-main {
45
                width: 80%;
46
        }
47
        .centered {
48
                margin-left: auto;
49
                margin-right: auto;
50
        }
51
        .fs1 {
52
                font-size: 2em;
53
                color: rgb(71, 176, 233);
54
        }
55
        header {
56
                margin: 2em 0;
57
                padding-bottom: .5em;
58
                color: #666;
59
                box-shadow: 0 2px #eee;
60
        }
61
        header h1 {
62
                font-size: 2em;
63
                font-weight: normal;
64
        }
65
        .clearfix:before, .clearfix:after { content: ""; display: table; }
66
        .clearfix:after, .clear { clear: both; }
67
        footer {
68
                margin-top: 2em;
69
                padding: .5em 0;
70
                box-shadow: 0 -2px #eee;
71
        }
72
        a, a:visited {
73
                color: #B35047;
74
                text-decoration: none;
75
        }
76
        a:hover, a:focus {color: #000;}
77
        .box1 {
78
                font-size: 14px;
79
                display: inline-block;
80
                width: 15em;
81
                padding: .25em .5em;
82
                background: #eee;
83
                margin: .5em 1em .5em 0;
84
        }
85
        .general {
86
                font-weight: bold;
87
        }
88
        h1, h2 {
89
                color: #666;
90
                font-weight: normal;
91
        }
92

    
93
        .note {
94
                font-style: italic;
95
        }
96

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

    
114
        <section>
115
                <h2>snf icons</h2>
116
                <div class="glyph">
117
                        <div class="fs1" aria-hidden="true" data-icon="K"></div>
118
                        <input type="text" readonly="readonly" value="K" />
119
                </div>        
120
                <div class="glyph">
121
                        <div class="fs1" aria-hidden="true" data-icon="t"></div>
122
                        <input type="text" readonly="readonly" value="t (no use)" />
123
                </div>
124
                <div class="glyph">
125
                        <div class="fs1" aria-hidden="true" data-icon="v"></div>
126
                        <input type="text" readonly="readonly" value="v" />
127
                </div>
128
                <div class="glyph">
129
                        <div class="fs1" aria-hidden="true" data-icon="s"></div>
130
                        <input type="text" readonly="readonly" value="s (no use)" />
131
                </div>
132
                <div class="glyph">
133
                        <div class="fs1" aria-hidden="true" data-icon="w"></div>
134
                        <input type="text" readonly="readonly" value="w" />
135
                </div>
136
                <div class="glyph">
137
                        <div class="fs1" aria-hidden="true" data-icon="x"></div>
138
                        <input type="text" readonly="readonly" value="x" />
139
                </div>
140
                <div class="glyph">
141
                        <div class="fs1" aria-hidden="true" data-icon="u"></div>
142
                        <input type="text" readonly="readonly" value="u" />
143
                </div>
144
                <div class="glyph">
145
                        <div class="fs1" aria-hidden="true" data-icon="y"></div>
146
                        <input type="text" readonly="readonly" value="y" />
147
                </div>
148
                <div class="glyph">
149
                        <div class="fs1" aria-hidden="true" data-icon="z"></div>
150
                        <input type="text" readonly="readonly" value="z" />
151
                </div>
152
                <div class="glyph">
153
                        <div class="fs1" aria-hidden="true" data-icon="E"></div>
154
                        <input type="text" readonly="readonly" value="E" />
155
                </div>
156
                <div class="glyph">
157
                        <div class="fs1" aria-hidden="true" data-icon="F"></div>
158
                        <input type="text" readonly="readonly" value="F" />
159
                </div>        
160
                <div class="glyph">
161
                        <div class="fs1" aria-hidden="true" data-icon="G"></div>
162
                        <input type="text" readonly="readonly" value="G" />
163
                </div>        
164
                <div class="glyph">
165
                        <div class="fs1" aria-hidden="true" data-icon="H"></div>
166
                        <input type="text" readonly="readonly" value="H" />
167
                </div>        
168
                <div class="glyph">
169
                        <div class="fs1" aria-hidden="true" data-icon="I"></div>
170
                        <input type="text" readonly="readonly" value="I" />
171
                </div>        
172
                <div class="glyph">
173
                        <div class="fs1" aria-hidden="true" data-icon="J"></div>
174
                        <input type="text" readonly="readonly" value="J" />
175
                </div>        
176
        </section>
177

    
178
        <section>
179
                <h2>checkboxes - radiobuttons</h2>
180
                <div class="glyph">
181
                        <div class="fs1" aria-hidden="true" data-icon="a"></div>
182
                        <input type="text" readonly="readonly" value="a" />
183
                </div>
184
                <div class="glyph">
185
                        <div class="fs1" aria-hidden="true" data-icon="b"></div>
186
                        <input type="text" readonly="readonly" value="b" />
187
                </div>
188
                <div class="glyph">
189
                        <div class="fs1" aria-hidden="true" data-icon="B"></div>
190
                        <input type="text" readonly="readonly" value="B" />
191
                </div>
192
                <div class="glyph">
193
                        <div class="fs1" aria-hidden="true" data-icon="C"></div>
194
                        <input type="text" readonly="readonly" value="C" />
195
                </div>
196
        </section>
197
        
198
        <section>
199
                <h2>close - cancel - remove</h2>
200
                <div class="glyph">
201
                        <div class="fs1" aria-hidden="true" data-icon="D"></div>
202
                        <input type="text" readonly="readonly" value="D" />
203
                </div>        
204
                <div class="glyph">
205
                        <div class="fs1" aria-hidden="true" data-icon="c"></div>
206
                        <input type="text" readonly="readonly" value="c" />
207
                </div>
208
                <div class="glyph">
209
                        <div class="fs1" aria-hidden="true" data-icon="m"></div>
210
                        <input type="text" readonly="readonly" value="m" />
211
                </div>
212
                <div class="glyph">
213
                        <div class="fs1" aria-hidden="true" data-icon="n"></div>
214
                        <input type="text" readonly="readonly" value="n" />
215
                </div>
216
                <div class="glyph">
217
                        <div class="fs1" aria-hidden="true" data-icon="d"></div>
218
                        <input type="text" readonly="readonly" value="d" />
219
                </div>
220
                <div class="glyph">
221
                        <div class="fs1" aria-hidden="true" data-icon="e"></div>
222
                        <input type="text" readonly="readonly" value="e" />
223
                </div>
224
                <div class="glyph">
225
                        <div class="fs1" aria-hidden="true" data-icon="f"></div>
226
                        <input type="text" readonly="readonly" value="f" />
227
                </div>
228
                <div class="glyph">
229
                        <div class="fs1" aria-hidden="true" data-icon="i"></div>
230
                        <input type="text" readonly="readonly" value="i" />
231
                </div>
232
                <div class="glyph">
233
                <div class="fs1" aria-hidden="true" data-icon="j"></div>
234
                <input type="text" readonly="readonly" value="j" />
235
                </div>
236
        </section>
237
        
238
        <section>
239
                <h2>ok - confirm</h2>
240
                <div class="glyph">
241
                        <div class="fs1" aria-hidden="true" data-icon="l"></div>
242
                        <input type="text" readonly="readonly" value="l" />
243
                </div>
244
                <div class="glyph">
245
                        <div class="fs1" aria-hidden="true" data-icon="k"></div>
246
                        <input type="text" readonly="readonly" value="k" />
247
                </div>
248
                <div class="glyph">
249
                        <div class="fs1" aria-hidden="true" data-icon="h"></div>
250
                        <input type="text" readonly="readonly" value="h" />
251
                </div>
252
        </section>
253
        
254
        <section>
255
                <h2>edit</h2>
256
                <div class="glyph">
257
                        <div class="fs1" aria-hidden="true" data-icon="o"></div>
258
                        <input type="text" readonly="readonly" value="o" />
259
                </div>
260
                <div class="glyph">
261
                        <div class="fs1" aria-hidden="true" data-icon="p"></div>
262
                        <input type="text" readonly="readonly" value="p" />
263
                </div>
264
                <div class="glyph">
265
                        <div class="fs1" aria-hidden="true" data-icon="q"></div>
266
                        <input type="text" readonly="readonly" value="q" />
267
                </div>
268
                <div class="glyph">
269
                        <div class="fs1" aria-hidden="true" data-icon="r"></div>
270
                        <input type="text" readonly="readonly" value="r" />
271
                </div>
272
        </section>
273
                
274
        <section>
275
                <h2>twitter</h2>
276
                <div class="glyph">
277
                        <div class="fs1" aria-hidden="true" data-icon="g"></div>
278
                        <input type="text" readonly="readonly" value="g" />
279
                </div>        
280
        </section>
281

    
282
        <section>
283
                <h2>show - preview - view type</h2>
284
                <div class="glyph">
285
                        <div class="fs1" aria-hidden="true" data-icon="A"></div>
286
                        <input type="text" readonly="readonly" value="A" />
287
                </div>
288
                <div class="glyph">
289
                        <div class="fs1" aria-hidden="true" data-icon="Q"></div>
290
                        <input type="text" readonly="readonly" value="Q" />
291
                </div>        
292
                <div class="glyph">
293
                        <div class="fs1" aria-hidden="true" data-icon="R"></div>
294
                        <input type="text" readonly="readonly" value="R" />
295
                </div>        
296
        </section>
297

    
298
        <section>
299
                <h2>arrows</h2>
300
                <div class="glyph">
301
                        <div class="fs1" aria-hidden="true" data-icon="L"></div>
302
                        <input type="text" readonly="readonly" value="L" />
303
                </div>
304
                <div class="glyph">
305
                        <div class="fs1" aria-hidden="true" data-icon="M"></div>
306
                        <input type="text" readonly="readonly" value="M" />
307
                </div>
308
                <div class="glyph">
309
                        <div class="fs1" aria-hidden="true" data-icon="N"></div>
310
                        <input type="text" readonly="readonly" value="N" />
311
                </div>
312
                <div class="glyph">
313
                        <div class="fs1" aria-hidden="true" data-icon="O"></div>
314
                        <input type="text" readonly="readonly" value="O" />
315
                </div>
316
        </section>
317
                <section>
318
                <h2>search</h2>
319
                <div class="glyph">
320
                        <div class="fs1" aria-hidden="true" data-icon="P"></div>
321
                        <input type="text" readonly="readonly" value="P" />
322
                </div>        
323
        </section>
324

    
325
</section>
326

    
327
        <div class="clear"></div>
328
        <section class="mtm clearfix">
329
        <header>
330
                <h1>Class Names</h1>
331
        </header>
332
        <span class="box1 general">
333
                <span aria-hidden="true" class=""></span>
334
                &nbsp;snf-font
335
        </span>
336
        
337
        <span class="box1 general">
338
                <span aria-hidden="true" class="snf-custom-checkbox"></span>
339
                &nbsp;snf-custom-checkbox
340
        </span>
341
        <span class="box1">
342
                <span aria-hidden="true" class="snf-checkbox-checked"></span>
343
                &nbsp;snf-checkbox-checked
344
        </span>
345
        <span class="box1">
346
                <span aria-hidden="true" class="snf-checkbox-unchecked"></span>
347
                &nbsp;snf-checkbox-unchecked
348
        </span><span class="box1">
349
                <span aria-hidden="true" class="snf-icon-compute-outline"></span>
350
                &nbsp;snf-icon-compute-outline
351
        </span>
352
        <span class="box1">
353
                <span aria-hidden="true" class="snf-icon-networks-fill"></span>
354
                &nbsp;snf-icon-networks-fill
355
        </span>
356
        <span class="box1">
357
                <span aria-hidden="true" class="snf-twitter-off-black"></span>
358
                &nbsp;snf-twitter-off-black
359
        </span>
360
        <span class="box1">
361
                <span aria-hidden="true" class="snf-cancel-circled"></span>
362
                &nbsp;snf-cancel-circled
363
        </span>
364
        
365
        <span class="box1">
366
                <span aria-hidden="true" class="snf-cancel-circled2"></span>
367
                &nbsp;snf-cancel-circled2
368
        </span>
369
        <span class="box1">
370
                <span aria-hidden="true" class="snf-cancel-circled-outline"></span>
371
                &nbsp;snf-cancel-circled-outline
372
        </span>
373
        <span class="box1">
374
                <span aria-hidden="true" class="snf-cancel-outline"></span>
375
                &nbsp;snf-cancel-outline
376
        </span>
377
        <span class="box1">
378
                <span aria-hidden="true" class="snf-ok"></span>
379
                &nbsp;snf-ok
380
        </span>
381
        <span class="box1">
382
                <span aria-hidden="true" class="snf-remove"></span>
383
                &nbsp;snf-remove
384
        </span>
385
        <span class="box1">
386
                <span aria-hidden="true" class="snf-ban-circle"></span>
387
                &nbsp;snf-ban-circle
388
        </span>
389
        <span class="box1">
390
                <span aria-hidden="true" class="snf-ok-circle"></span>
391
                &nbsp;snf-ok-circle
392
        </span>
393
        <span class="box1">
394
                <span aria-hidden="true" class="snf-ok-sign"></span>
395
                &nbsp;snf-ok-sign
396
        </span>
397
        <span class="box1">
398
                <span aria-hidden="true" class="snf-remove-sign"></span>
399
                &nbsp;snf-remove-sign
400
        </span>
401
        <span class="box1">
402
                <span aria-hidden="true" class="snf-minus-sign"></span>
403
                &nbsp;snf-minus-sign
404
        </span>
405
        <span class="box1">
406
                <span aria-hidden="true" class="snf-pencil"></span>
407
                &nbsp;snf-pencil
408
        </span>
409
        <span class="box1">
410
                <span aria-hidden="true" class="snf-edit"></span>
411
                &nbsp;snf-edit
412
        </span>
413
        <span class="box1">
414
                <span aria-hidden="true" class="snf-edit-1"></span>
415
                &nbsp;snf-edit-1
416
        </span>
417
        <span class="box1">
418
                <span aria-hidden="true" class="snf-pencil-circled"></span>
419
                &nbsp;snf-pencil-circled
420
        </span>
421
        <span class="box1">
422
                <span aria-hidden="true" class="snf-HDD"></span>
423
                &nbsp;snf-HDD
424
        </span>
425
        <span class="box1">
426
                <span aria-hidden="true" class="snf-network"></span>
427
                &nbsp;snf-network
428
        </span>
429
        <span class="box1">
430
                <span aria-hidden="true" class="snf-PC"></span>
431
                &nbsp;snf-PC
432
        </span>
433
        <span class="box1">
434
                <span aria-hidden="true" class="snf-PC_fill"></span>
435
                &nbsp;snf-PC_fill
436
        </span>
437
        <span class="box1">
438
                <span aria-hidden="true" class="snf-Pithos"></span>
439
                &nbsp;snf-Pithos
440
        </span>
441
        <span class="box1">
442
                <span aria-hidden="true" class="snf-DASHboard"></span>
443
                &nbsp;snf-DASHboard
444
        </span>
445
        <span class="box1">
446
                <span aria-hidden="true" class="snf-eye"></span>
447
                &nbsp;snf-eye
448
        </span>
449
        <span class="box1">
450
                <span aria-hidden="true" class="snf-radio-checked"></span>
451
                &nbsp;snf-radio-checked
452
        </span>
453
        <span class="box1">
454
                <span aria-hidden="true" class="snf-radio-unchecked"></span>
455
                &nbsp;snf-radio-unchecked
456
        </span>
457

    
458
        <span class="box1">
459
                <span aria-hidden="true" class="snf-close"></span>
460
                &nbsp;snf-close
461
        </span>
462
        <span class="box1">
463
                <span aria-hidden="true" class="snf-cpu"></span>
464
                &nbsp;snf-cpu
465
        </span>
466
        <span class="box1">
467
                <span aria-hidden="true" class="snf-lock_closed"></span>
468
                &nbsp;snf-lock_closed
469
        </span>
470
        <span class="box1">
471
                <span aria-hidden="true" class="snf-lock_open"></span>
472
                &nbsp;snf-lock_open
473
        </span>
474
        <span class="box1">
475
                <span aria-hidden="true" class="snf-modem"></span>
476
                &nbsp;snf-modem
477
        </span>
478
        <span class="box1">
479
                <span aria-hidden="true" class="snf-www"></span>
480
                &nbsp;snf-www
481
        </span>
482
        <span class="box1">
483
                <span aria-hidden="true" class="snf-ram"></span>
484
                &nbsp;snf-ram
485
        </span>
486
        <span class="box1">
487
                <span aria-hidden="true" class="snf-network_full"></span>
488
                &nbsp;snf-network_full
489
        </span>
490
        <span class="box1">
491
                <span aria-hidden="true" class="snf-arrow-up"></span>
492
                &nbsp;snf-arrow-up
493
        </span>
494
        <span class="box1">
495
                <span aria-hidden="true" class="snf-arrow-down"></span>
496
                &nbsp;snf-arrow-down
497
        </span>
498
        <span class="box1">
499
                <span aria-hidden="true" class="snf-arrow-up-2"></span>
500
                &nbsp;snf-arrow-up-2
501
        </span>
502
        <span class="box1">
503
                <span aria-hidden="true" class="snf-arrow-down-2"></span>
504
                &nbsp;snf-arrow-down-2
505
        </span>        
506
        <span class="box1">
507
                <span aria-hidden="true" class="snf-search"></span>
508
                &nbsp;snf-search
509
        </span>        
510
        <span class="box1">
511
                <span aria-hidden="true" class="snf-list"></span>
512
                &nbsp;snf-list
513
        </span>        
514
        <span class="box1">
515
                <span aria-hidden="true" class="snf-layout"></span>
516
                &nbsp;snf-layout
517
        </span>        
518
        </section>
519
        <header>
520
                <h1>Usage Example</h1>
521
        </header>
522
        <section>
523
                <li><code>
524
                        &lt;span class="snf-eye"&gt;&lt;/span&gt; => <span class="snf-eye"></span> (this is now in use)
525
                </code></li>
526
                <li><code>
527
                        &lt;span class="snf-font"&gt;o&lt;/span&gt; => <span class="snf-font">o</span>
528
                </code><br>
529
                        Remember! It is case-sensitive: <code>
530
                        &lt;span class="snf-font"&gt;O&lt;/span&gt; => <span class="snf-font">O</span></code> (this is capital "O" with different style)
531
                </li>
532
        </section>
533
        <header>
534
                <h1> Missing Icons from snf-font (or not final yet)</h1>
535
        </header>
536
        <section>
537
                <ul>
538
                        <li class="box1">pithos icon <span class="note">(final?)</span ></li>
539
                        <li class="box1">disk icon <span class="note">(final?)</span ></li>
540
                        <li class="box1">vm icon outline <span class="note">(final?)</span ></li>
541
                        <li class="box1">network icon outline <span class="note">(final?)</span ></li>
542
                        <li class="box1">keys? icon</li>
543
                        <li class="box1">ips icon</li>
544
                        <li class="box1">folder icon</li>
545
                        <li class="box1">pdf icon</li>
546
                        <li class="box1">txt icon</li>
547
                        <li class="box1">xls icon</li>
548
                        <li class="box1">doc icon</li>
549
                        <li class="box1">audio file icon</li>
550
                        <li class="box1">video file icon</li>
551
                        <li class="box1">image icon</li>
552
                        <li class="box1">trash icon</li>
553
                        <li class="box1">download icon</li>
554
                        <li class="box1">delete icon</li>
555
                        <li class="box1">move? icon</li>
556
                        <li class="box1">get link? icon</li>
557
                        <li class="box1">preview icon <span class="note">(final?)</span ></li>
558
                                                <li  class="box1">edit icon <span class="note">(not final)</span></li>
559
                        <li class="box1">cancel edit icon <span class="note">(not final)</span></li>
560
                </ul>
561
        </section>
562
</div>        
563
</body>
564
</html>