Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / icon_guide.html @ 0ced28b6

History | View | Annotate | Download (13.6 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</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

    
289

    
290

    
291

    
292

    
293
        </section>
294
        </section>
295

    
296
        <div class="clear"></div>
297
        <section class="mtm clearfix">
298
        <header>
299
                <h1>Class Names</h1>
300
        </header>
301
        <span class="box1 general">
302
                <span aria-hidden="true" class=""></span>
303
                &nbsp;snf-font
304
        </span>
305
        
306
        <span class="box1 general">
307
                <span aria-hidden="true" class="snf-custom-checkbox"></span>
308
                &nbsp;snf-custom-checkbox
309
        </span>
310
        <span class="box1">
311
                <span aria-hidden="true" class="snf-checkbox-checked"></span>
312
                &nbsp;snf-checkbox-checked
313
        </span>
314
        <span class="box1">
315
                <span aria-hidden="true" class="snf-checkbox-unchecked"></span>
316
                &nbsp;snf-checkbox-unchecked
317
        </span><span class="box1">
318
                <span aria-hidden="true" class="snf-icon-compute-outline"></span>
319
                &nbsp;snf-icon-compute-outline
320
        </span>
321
        <span class="box1">
322
                <span aria-hidden="true" class="snf-icon-networks-fill"></span>
323
                &nbsp;snf-icon-networks-fill
324
        </span>
325
        <span class="box1">
326
                <span aria-hidden="true" class="snf-twitter-off-black"></span>
327
                &nbsp;snf-twitter-off-black
328
        </span>
329
        <span class="box1">
330
                <span aria-hidden="true" class="snf-cancel-circled"></span>
331
                &nbsp;snf-cancel-circled
332
        </span>
333
        
334
        <span class="box1">
335
                <span aria-hidden="true" class="snf-cancel-circled2"></span>
336
                &nbsp;snf-cancel-circled2
337
        </span>
338
        <span class="box1">
339
                <span aria-hidden="true" class="snf-cancel-circled-outline"></span>
340
                &nbsp;snf-cancel-circled-outline
341
        </span>
342
        <span class="box1">
343
                <span aria-hidden="true" class="snf-cancel-outline"></span>
344
                &nbsp;snf-cancel-outline
345
        </span>
346
        <span class="box1">
347
                <span aria-hidden="true" class="snf-ok"></span>
348
                &nbsp;snf-ok
349
        </span>
350
        <span class="box1">
351
                <span aria-hidden="true" class="snf-remove"></span>
352
                &nbsp;snf-remove
353
        </span>
354
        <span class="box1">
355
                <span aria-hidden="true" class="snf-ban-circle"></span>
356
                &nbsp;snf-ban-circle
357
        </span>
358
        <span class="box1">
359
                <span aria-hidden="true" class="snf-ok-circle"></span>
360
                &nbsp;snf-ok-circle
361
        </span>
362
        <span class="box1">
363
                <span aria-hidden="true" class="snf-ok-sign"></span>
364
                &nbsp;snf-ok-sign
365
        </span>
366
        <span class="box1">
367
                <span aria-hidden="true" class="snf-remove-sign"></span>
368
                &nbsp;snf-remove-sign
369
        </span>
370
        <span class="box1">
371
                <span aria-hidden="true" class="snf-minus-sign"></span>
372
                &nbsp;snf-minus-sign
373
        </span>
374
        <span class="box1">
375
                <span aria-hidden="true" class="snf-pencil"></span>
376
                &nbsp;snf-pencil
377
        </span>
378
        <span class="box1">
379
                <span aria-hidden="true" class="snf-edit"></span>
380
                &nbsp;snf-edit
381
        </span>
382
        <span class="box1">
383
                <span aria-hidden="true" class="snf-edit-1"></span>
384
                &nbsp;snf-edit-1
385
        </span>
386
        <span class="box1">
387
                <span aria-hidden="true" class="snf-pencil-circled"></span>
388
                &nbsp;snf-pencil-circled
389
        </span>
390
        <span class="box1">
391
                <span aria-hidden="true" class="snf-HDD"></span>
392
                &nbsp;snf-HDD
393
        </span>
394
        <span class="box1">
395
                <span aria-hidden="true" class="snf-network"></span>
396
                &nbsp;snf-network
397
        </span>
398
        <span class="box1">
399
                <span aria-hidden="true" class="snf-PC"></span>
400
                &nbsp;snf-PC
401
        </span>
402
        <span class="box1">
403
                <span aria-hidden="true" class="snf-PC_fill"></span>
404
                &nbsp;snf-PC_fill
405
        </span>
406
        <span class="box1">
407
                <span aria-hidden="true" class="snf-Pithos"></span>
408
                &nbsp;snf-Pithos
409
        </span>
410
        <span class="box1">
411
                <span aria-hidden="true" class="snf-DASHboard"></span>
412
                &nbsp;snf-DASHboard
413
        </span>
414
        <span class="box1">
415
                <span aria-hidden="true" class="snf-eye"></span>
416
                &nbsp;snf-eye
417
        </span>
418
        <span class="box1">
419
                <span aria-hidden="true" class="snf-radio-checked"></span>
420
                &nbsp;snf-radio-checked
421
        </span>
422
        <span class="box1">
423
                <span aria-hidden="true" class="snf-radio-unchecked"></span>
424
                &nbsp;snf-radio-unchecked
425
        </span>
426

    
427
        <span class="box1">
428
                <span aria-hidden="true" class="snf-close"></span>
429
                &nbsp;snf-close
430
        </span>
431
        <span class="box1">
432
                <span aria-hidden="true" class="snf-cpu"></span>
433
                &nbsp;snf-cpu
434
        </span>
435
        <span class="box1">
436
                <span aria-hidden="true" class="snf-lock_closed"></span>
437
                &nbsp;snf-lock_closed
438
        </span>
439
        <span class="box1">
440
                <span aria-hidden="true" class="snf-lock_open"></span>
441
                &nbsp;snf-lock_open
442
        </span>
443
        <span class="box1">
444
                <span aria-hidden="true" class="snf-modem"></span>
445
                &nbsp;snf-modem
446
        </span>
447
        <span class="box1">
448
                <span aria-hidden="true" class="snf-www"></span>
449
                &nbsp;snf-www
450
        </span>
451
        <span class="box1">
452
                <span aria-hidden="true" class="snf-ram"></span>
453
                &nbsp;snf-ram
454
        </span>
455
<span class="box1">
456
                <span aria-hidden="true" class="snf-network_full"></span>
457
                &nbsp;snf-network_full
458
        </span>
459

    
460
        </section>
461
        <header>
462
                <h1>Usage Example</h1>
463
        </header>
464
        <section>
465
                <li><code>
466
                        &lt;span class="snf-eye"&gt;&lt;/span&gt; => <span class="snf-eye"></span> (this is now in use)
467
                </code></li>
468
                <li><code>
469
                        &lt;span class="snf-font"&gt;o&lt;/span&gt; => <span class="snf-font">o</span>
470
                </code><br>
471
                        Remember! It is case-sensitive: <code>
472
                        &lt;span class="snf-font"&gt;O&lt;/span&gt; => <span class="snf-font">O</span></code> (this is capital "O" with different style)
473
                </li>
474
        </section>
475
        <header>
476
                <h1> Missing Icons from snf-font (or not final yet)</h1>
477
        </header>
478
        <section>
479
                <ul>
480
                        <li class="box1">pithos icon <span class="note">(final?)</span ></li>
481
                        <li class="box1">disk icon <span class="note">(final?)</span ></li>
482
                        <li class="box1">vm icon outline <span class="note">(final?)</span ></li>
483
                        <li class="box1">network icon outline <span class="note">(final?)</span ></li>
484
                        <li class="box1">keys? icon</li>
485
                        <li class="box1">ips icon</li>
486
                        <li class="box1">folder icon</li>
487
                        <li class="box1">pdf icon</li>
488
                        <li class="box1">txt icon</li>
489
                        <li class="box1">xls icon</li>
490
                        <li class="box1">doc icon</li>
491
                        <li class="box1">audio file icon</li>
492
                        <li class="box1">video file icon</li>
493
                        <li class="box1">image icon</li>
494
                        <li class="box1">trash icon</li>
495
                        <li class="box1">download icon</li>
496
                        <li class="box1">delete icon</li>
497
                        <li class="box1">move? icon</li>
498
                        <li class="box1">get link? icon</li>
499
                        <li class="box1">preview icon <span class="note">(final?)</span ></li>
500
                                                <li  class="box1">edit icon <span class="note">(not final)</span></li>
501
                        <li class="box1">cancel edit icon <span class="note">(not final)</span></li>
502
                </ul>
503
        </section>
504
</div>        
505
</body>
506
</html>