Statistics
| Branch: | Tag: | Revision:

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

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

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

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

    
394
        <section>
395
                <h2>misc</h2>
396
                <div class="glyph">
397
                        <div class="fs1" aria-hidden="true" data-icon="q"></div>
398
                        <input type="text" readonly="readonly" value="snf-edit [q]" />
399
                </div>
400
                <div class="glyph">
401
                        <div class="fs1" aria-hidden="true" data-icon="d"></div>
402
                        <input type="text" readonly="readonly" value="snf-search [d]" />
403
                </div>
404
                <div class="glyph">
405
                        <div class="fs1" aria-hidden="true" data-icon="g"></div>
406
                        <input type="text" readonly="readonly" value="snf-twitter-logo [g]" />
407
                </div>        
408
                <div class="glyph">
409
                        <div class="fs1" aria-hidden="true" data-icon="i"></div>
410
                        <input type="text" readonly="readonly" value="snf-switch [i]" />
411
                </div>        
412
                <div class="glyph">
413
                        <div class="fs1" aria-hidden="true" data-icon="k"></div>
414
                        <input type="text" readonly="readonly" value="snf-thunder-full [k]" />
415
                </div>        
416
                <div class="glyph">
417
                        <div class="fs1" aria-hidden="true" data-icon="o"></div>
418
                        <input type="text" readonly="readonly" value="snf-info-outline [o]" />
419
                </div>
420
                <div class="glyph">
421
                        <div class="fs1" aria-hidden="true" data-icon="p"></div>
422
                        <input type="text" readonly="readonly" value="snf-info-full [p]" />
423
                </div>
424
                <div class="glyph">
425
                        <div class="fs1" aria-hidden="true" data-icon="*"></div>
426
                        <input type="text" readonly="readonly" value="snf-person-outline [*]" />
427
                </div>
428
                <div class="glyph">
429
                        <div class="fs1" aria-hidden="true" data-icon="^"></div>
430
                        <input type="text" readonly="readonly" value="snf-folder-outline [^]" />
431
                </div>
432
                <div class="glyph">
433
                        <div class="fs1" aria-hidden="true" data-icon="="></div>
434
                        <input type="text" readonly="readonly" value="snf-folder-full [=]" />
435
                </div>
436
                <div class="glyph">
437
                        <div class="fs1" aria-hidden="true" data-icon="?"></div>
438
                        <input type="text" readonly="readonly" value="snf-copy-outline [?]" />
439
                </div>
440
                <div class="glyph">
441
                        <div class="fs1" aria-hidden="true" data-icon="&"></div>
442
                        <input type="text" readonly="readonly" value="snf-link-outline [&]" />
443
                </div>        
444
        </section>
445

    
446
</section>
447
</div>        
448
</body>
449
</html>