Revision d0fe8c12 snf-cyclades-app/synnefo/ui/new_ui/ui/icon_guide.html

/dev/null
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>

Also available in: Unified diff