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

b/snf-cyclades-app/synnefo/ui/new_ui/ui/icon_guide.html
28 28 
		background: #eee;
29 29 
		padding: .75em;
30 30 
		margin: .75em 1.5em .75em 1px;
31 
		width: 7.5em;
31 
		width: 16.5em;
32 32 
		border-radius: .25em;
33 33 
		box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
34 34 
	}
......
114 114 
	<section>
115 115 
		<h2>snf icons</h2>
116 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 117 
			<div class="fs1" aria-hidden="true" data-icon="v"></div>
126 
			<input type="text" readonly="readonly" value="v" />
118 
			<input type="text" readonly="readonly" value="snf-network [v]" />
127 119 
		</div>
128 120 
		<div class="glyph">
129 
			<div class="fs1" aria-hidden="true" data-icon="s"></div>
130 
			<input type="text" readonly="readonly" value="s (no use)" />
121 
			<div class="fs1" aria-hidden="true" data-icon="K"></div>
122 
			<input type="text" readonly="readonly" value="snf-network_full [K]" />
131 123 
		</div>
132 124 
		<div class="glyph">
133 125 
			<div class="fs1" aria-hidden="true" data-icon="w"></div>
134 
			<input type="text" readonly="readonly" value="w" />
126 
			<input type="text" readonly="readonly" value="snf-PC [w]" />
135 127 
		</div>
136 128 
		<div class="glyph">
137 129 
			<div class="fs1" aria-hidden="true" data-icon="x"></div>
138 
			<input type="text" readonly="readonly" value="x" />
130 
			<input type="text" readonly="readonly" value="snf-PC_fill [x]" />
139 131 
		</div>
140 132 
		<div class="glyph">
141 133 
			<div class="fs1" aria-hidden="true" data-icon="u"></div>
142 
			<input type="text" readonly="readonly" value="u" />
134 
			<input type="text" readonly="readonly" value="snf-HDD [u]" />
143 135 
		</div>
144 136 
		<div class="glyph">
145 137 
			<div class="fs1" aria-hidden="true" data-icon="y"></div>
146 
			<input type="text" readonly="readonly" value="y" />
138 
			<input type="text" readonly="readonly" value="snf-Pithos [y]" />
147 139 
		</div>
148 140 
		<div class="glyph">
149 141 
			<div class="fs1" aria-hidden="true" data-icon="z"></div>
150 
			<input type="text" readonly="readonly" value="z" />
142 
			<input type="text" readonly="readonly" value="snf-DASHboard [z]" />
151 143 
		</div>
152 144 
		<div class="glyph">
153 145 
			<div class="fs1" aria-hidden="true" data-icon="E"></div>
154 
			<input type="text" readonly="readonly" value="E" />
146 
			<input type="text" readonly="readonly" value="snf-cpu [E]" />
155 147 
		</div>
156 148 
		<div class="glyph">
157 149 
			<div class="fs1" aria-hidden="true" data-icon="F"></div>
158 
			<input type="text" readonly="readonly" value="F" />
150 
			<input type="text" readonly="readonly" value="snf-lock_closed [F]" />
159 151 
		</div>
160 152 
		<div class="glyph">
161 153 
			<div class="fs1" aria-hidden="true" data-icon="G"></div>
162 
			<input type="text" readonly="readonly" value="G" />
154 
			<input type="text" readonly="readonly" value="snf-lock_open [G]" />
163 155 
		</div>
164 156 
		<div class="glyph">
165 157 
			<div class="fs1" aria-hidden="true" data-icon="H"></div>
166 
			<input type="text" readonly="readonly" value="H" />
158 
			<input type="text" readonly="readonly" value="snf-modem [H]" />
167 159 
		</div>
168 160 
		<div class="glyph">
169 161 
			<div class="fs1" aria-hidden="true" data-icon="I"></div>
170 
			<input type="text" readonly="readonly" value="I" />
162 
			<input type="text" readonly="readonly" value="snf-www [I]" />
171 163 
		</div>
172 164 
		<div class="glyph">
173 165 
			<div class="fs1" aria-hidden="true" data-icon="J"></div>
174 
			<input type="text" readonly="readonly" value="J" />
166 
			<input type="text" readonly="readonly" value="snf-ram [J]" />
175 167 
		</div>
176 168 
	</section>
177 169 

  		





  ......




  179
  171
  
    
		<h2>checkboxes - radiobuttons</h2>


  		





  180
  172
  
    
		<div class="glyph">


  		





  181
  173
  
    
			<div class="fs1" aria-hidden="true" data-icon="a"></div>


  		





  182
  
  
    
			<input type="text" readonly="readonly" value="a" />


  		





  
  174
  
    
			<input type="text" readonly="readonly" value="snf-checkbox-unchecked [a]" />


  		





  183
  175
  
    
		</div>


  		





  184
  176
  
    
		<div class="glyph">


  		





  185
  177
  
    
			<div class="fs1" aria-hidden="true" data-icon="b"></div>


  		





  186
  
  
    
			<input type="text" readonly="readonly" value="b" />


  		





  
  178
  
    
			<input type="text" readonly="readonly" value="snf-checkbox-checked [b]" />


  		





  187
  179
  
    
		</div>


  		





  188
  180
  
    
		<div class="glyph">


  		





  189
  
  
    
			<div class="fs1" aria-hidden="true" data-icon="B"></div>


  		





  190
  
  
    
			<input type="text" readonly="readonly" value="B" />


  		





  
  181
  
    
			<div class="fs1" aria-hidden="true" data-icon="C"></div>


  		





  
  182
  
    
			<input type="text" readonly="readonly" value="snf-radio-unchecked [C]" />


  		





  191
  183
  
    
		</div>


  		





  192
  184
  
    
		<div class="glyph">


  		





  193
  
  
    
			<div class="fs1" aria-hidden="true" data-icon="C"></div>


  		





  194
  
  
    
			<input type="text" readonly="readonly" value="C" />


  		





  
  185
  
    
			<div class="fs1" aria-hidden="true" data-icon="B"></div>


  		





  
  186
  
    
			<input type="text" readonly="readonly" value="snf-radio-checked [B]" />


  		





  195
  187
  
    
		</div>


  		





  196
  188
  
    
	</section>


  		





  197
  189
  
    
	


  		





  ......




  199
  191
  
    
		<h2>close - cancel - remove</h2>


  		





  200
  192
  
    
		<div class="glyph">


  		





  201
  193
  
    
			<div class="fs1" aria-hidden="true" data-icon="D"></div>


  		





  202
  
  
    
			<input type="text" readonly="readonly" value="D" />


  		





  
  194
  
    
			<input type="text" readonly="readonly" value="snf-close [D]" />


  		





  203
  195
  
    
		</div>	


  		





  204
  196
  
    
		<div class="glyph">


  		





  205
  197
  
    
			<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" />


  		





  
  198
  
    
			<input type="text" readonly="readonly" value="snf-cancel-circled [c]" />


  		





  211
  199
  
    
		</div>


  		





  212
  200
  
    
		<div class="glyph">


  		





  213
  201
  
    
			<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" />


  		





  
  202
  
    
			<input type="text" readonly="readonly" value="snf-minus-sign [n]" />


  		





  231
  203
  
    
		</div>


  		





  232
  204
  
    
		<div class="glyph">


  		





  233
  205
  
    
		<div class="fs1" aria-hidden="true" data-icon="j"></div>


  		





  234
  
  
    
		<input type="text" readonly="readonly" value="j" />


  		





  
  206
  
    
		<input type="text" readonly="readonly" value="snf-ban-circle [j]" />


  		





  235
  207
  
    
		</div>


  		





  236
  208
  
    
	</section>


  		





  237
  209
  
    
	


  		





  ......




  239
  211
  
    
		<h2>ok - confirm</h2>


  		





  240
  212
  
    
		<div class="glyph">


  		





  241
  213
  
    
			<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" />


  		





  
  214
  
    
			<input type="text" readonly="readonly" value="snf-ok-sign [l]" />


  		





  247
  215
  
    
		</div>


  		





  248
  216
  
    
		<div class="glyph">


  		





  249
  217
  
    
			<div class="fs1" aria-hidden="true" data-icon="h"></div>


  		





  250
  
  
    
			<input type="text" readonly="readonly" value="h" />


  		





  
  218
  
    
			<input type="text" readonly="readonly" value="snf-ok [h]" />


  		





  251
  219
  
    
		</div>


  		





  252
  220
  
    
	</section>


  		





  253
  221
  
    
	


  		





  254
  222
  
    
	<section>


  		





  255
  223
  
    
		<h2>edit</h2>


  		





  256
  224
  
    
		<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
  225
  
    
			<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" />


  		





  
  226
  
    
			<input type="text" readonly="readonly" value="snf-edit-1 [q]" />


  		





  271
  227
  
    
		</div>


  		





  272
  228
  
    
	</section>


  		





  273
  229
  
    
		


  		





  ......




  275
  231
  
    
		<h2>twitter</h2>


  		





  276
  232
  
    
		<div class="glyph">


  		





  277
  233
  
    
			<div class="fs1" aria-hidden="true" data-icon="g"></div>


  		





  278
  
  
    
			<input type="text" readonly="readonly" value="g" />


  		





  
  234
  
    
			<input type="text" readonly="readonly" value="snf-twitter-off-black [g]" />


  		





  279
  235
  
    
		</div>	


  		





  280
  236
  
    
	</section>


  		





  281
  237
  
    

  		





  ......




  283
  239
  
    
		<h2>show - preview - view type</h2>


  		





  284
  240
  
    
		<div class="glyph">


  		





  285
  241
  
    
			<div class="fs1" aria-hidden="true" data-icon="A"></div>


  		





  286
  
  
    
			<input type="text" readonly="readonly" value="A" />


  		





  
  242
  
    
			<input type="text" readonly="readonly" value="snf-eye [A]" />


  		





  287
  243
  
    
		</div>


  		





  288
  244
  
    
		<div class="glyph">


  		





  289
  245
  
    
			<div class="fs1" aria-hidden="true" data-icon="Q"></div>


  		





  290
  
  
    
			<input type="text" readonly="readonly" value="Q" />


  		





  
  246
  
    
			<input type="text" readonly="readonly" value="snf-layout [Q]" />


  		





  291
  247
  
    
		</div>	


  		





  292
  248
  
    
		<div class="glyph">


  		





  293
  249
  
    
			<div class="fs1" aria-hidden="true" data-icon="R"></div>


  		





  294
  
  
    
			<input type="text" readonly="readonly" value="R" />


  		





  
  250
  
    
			<input type="text" readonly="readonly" value="snf-list [R]" />


  		





  295
  251
  
    
		</div>	


  		





  296
  252
  
    
	</section>


  		





  297
  253
  
    

  		





  ......




  299
  255
  
    
		<h2>arrows</h2>


  		





  300
  256
  
    
		<div class="glyph">


  		





  301
  257
  
    
			<div class="fs1" aria-hidden="true" data-icon="L"></div>


  		





  302
  
  
    
			<input type="text" readonly="readonly" value="L" />


  		





  
  258
  
    
			<input type="text" readonly="readonly" value="snf-arrow-up [L]" />


  		





  303
  259
  
    
		</div>


  		





  304
  260
  
    
		<div class="glyph">


  		





  305
  261
  
    
			<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" />


  		





  
  262
  
    
			<input type="text" readonly="readonly" value="snf-arrow-down [M]" />


  		





  315
  263
  
    
		</div>


  		





  316
  264
  
    
	</section>


  		





  317
  265
  
    
		<section>


  		





  318
  266
  
    
		<h2>search</h2>


  		





  319
  267
  
    
		<div class="glyph">


  		





  320
  268
  
    
			<div class="fs1" aria-hidden="true" data-icon="P"></div>


  		





  321
  
  
    
			<input type="text" readonly="readonly" value="P" />


  		





  
  269
  
    
			<input type="text" readonly="readonly" value="snf-search [P]" />


  		





  322
  270
  
    
		</div>	


  		





  323
  271
  
    
	</section>


  		





  324
  272
  
    

  		





  325
  273
  
    
</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>


  		





  
  274
  
    
<header>


  		





  534
  275
  
    
		<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>


  		





  
  276
  
    
</header>


  		





  
  277
  
    
<section>


  		





  
  278
  
    
	<ul>


  		





  
  279
  
    
		<li class="box1">pithos icon <span class="note">(final?)</span ></li>


  		





  
  280
  
    
		<li class="box1">disk icon <span class="note">(final?)</span ></li>


  		





  
  281
  
    
		<li class="box1">vm icon outline <span class="note">(final?)</span ></li>


  		





  
  282
  
    
		<li class="box1">network icon outline <span class="note">(final?)</span ></li>


  		





  
  283
  
    
		<li class="box1">keys? icon</li>


  		





  
  284
  
    
		<li class="box1">ips icon</li>


  		





  
  285
  
    
		<li class="box1">folder icon</li>


  		





  
  286
  
    
		<li class="box1">pdf icon</li>


  		





  
  287
  
    
		<li class="box1">txt icon</li>


  		





  
  288
  
    
		<li class="box1">xls icon</li>


  		





  
  289
  
    
		<li class="box1">doc icon</li>


  		





  
  290
  
    
		<li class="box1">audio file icon</li>


  		





  
  291
  
    
		<li class="box1">video file icon</li>


  		





  
  292
  
    
		<li class="box1">image icon</li>


  		





  
  293
  
    
		<li class="box1">trash icon</li>


  		





  
  294
  
    
		<li class="box1">download icon</li>


  		





  
  295
  
    
		<li class="box1">delete icon</li>


  		





  
  296
  
    
		<li class="box1">move? icon</li>


  		





  
  297
  
    
		<li class="box1">get link? icon</li>


  		





  
  298
  
    
		<li class="box1">preview icon <span class="note">(final?)</span ></li>


  		





  
  299
  
    
					<li  class="box1">edit icon <span class="note">(not final)</span></li>


  		





  
  300
  
    
		<li class="box1">cancel edit icon <span class="note">(not final)</span></li>


  		





  
  301
  
    
	</ul>


  		





  
  302
  
    
</section>


  		





  562
  303
  
    
</div>	


  		





  563
  304
  
    
</body>


  		





  564
  305
  
    
</html>


  		












Also available in:
  Unified diff