Revision 2c7cc4ac

b/snf-cyclades-app/synnefo/ui/new_ui/ui/fonts/snf-font.dev.svg
139 139 
			c 10.297,0, 16.959,6.215, 18.739,14.2l 0.989,0 l-16.854,193.389L 219.285,234.983z M 235.576,46.93c-0.346-7.283-3.801-10.532-11.211-10.532
140 140 
			c-7.412,0-10.865,3.249-11.213,10.533l-0.020,0.263l 10.426,138.341l 12.057-137.572L 235.576,46.93z" data-tags="DASHboard" />
141 141 
<glyph unicode="&#x41;" d="M 416.192,143.872q-38.080,59.136-95.424,88.256 15.232-25.984 15.232-56.448 0-46.144-32.704-79.296t-79.296-32.704-79.296,32.704-32.704,79.296q0,30.464 15.232,56.448-57.344-29.12-95.424-88.256 33.152-51.072 83.328-81.536t 108.416-30.464 108.416,30.464 83.328,81.536z m-180.096,95.872q0,4.928-3.584,8.512t-8.512,3.584q-31.36,0-53.76-22.4t-22.4-53.76q0-4.928 3.584-8.512t 8.512-3.584 8.512,3.584 3.584,8.512q0,21.504 15.232,36.736t 36.736,15.232q 4.928,0 8.512,3.584t 3.584,8.512z m 211.904-95.872q0-8.512-4.928-17.472-34.944-57.344-94.080-92.288t-124.992-34.496-124.992,34.944-94.080,91.84q-4.928,8.96-4.928,17.472t 4.928,17.472q 34.944,57.344 94.080,91.84t 124.992,34.944 124.992-34.944 94.080-91.84q 4.928-8.96 4.928-17.472z" data-tags="eye" />
142 
<glyph unicode="&#x42;" d="M 224-64C 100.297-64,0,36.297,0,160S 100.297,384, 224,384s 224-100.297, 224-224
143 
	S 347.703-64, 224-64z M 224,328C 131.223,328, 56,252.777, 56,160s 75.223-168, 168-168s 168,75.223, 168,168S 316.777,328, 224,328z M 224,48
144 
	c-61.852,0-112,50.148-112,112s 50.148,112, 112,112s 112-50.148, 112-112S 285.852,48, 224,48z" data-tags="circle-full" />
145 
<glyph unicode="&#x43;" d="M 224,384C 100.288,384,0,283.712,0,160s 100.288-224, 224-224s 224,100.288, 224,224S 347.712,384, 224,384z M 224-8
146 
	c-92.784,0-168,75.216-168,168c0,92.784, 75.216,168, 168,168c 92.784,0, 168-75.216, 168-168C 392,67.216, 316.784-8, 224-8z" data-tags="radio-unchecked, circle" />
142 147 
<glyph unicode="&#x20;" horiz-adv-x="224" />
143 148 
</font></defs></svg>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/fonts/snf-font.svg
139 139 
			c 10.297,0, 16.959,6.215, 18.739,14.2l 0.989,0 l-16.854,193.389L 219.285,234.983z M 235.576,46.93c-0.346-7.283-3.801-10.532-11.211-10.532
140 140 
			c-7.412,0-10.865,3.249-11.213,10.533l-0.020,0.263l 10.426,138.341l 12.057-137.572L 235.576,46.93z"  />
141 141 
<glyph unicode="&#x41;" d="M 416.192,143.872q-38.080,59.136-95.424,88.256 15.232-25.984 15.232-56.448 0-46.144-32.704-79.296t-79.296-32.704-79.296,32.704-32.704,79.296q0,30.464 15.232,56.448-57.344-29.12-95.424-88.256 33.152-51.072 83.328-81.536t 108.416-30.464 108.416,30.464 83.328,81.536z m-180.096,95.872q0,4.928-3.584,8.512t-8.512,3.584q-31.36,0-53.76-22.4t-22.4-53.76q0-4.928 3.584-8.512t 8.512-3.584 8.512,3.584 3.584,8.512q0,21.504 15.232,36.736t 36.736,15.232q 4.928,0 8.512,3.584t 3.584,8.512z m 211.904-95.872q0-8.512-4.928-17.472-34.944-57.344-94.080-92.288t-124.992-34.496-124.992,34.944-94.080,91.84q-4.928,8.96-4.928,17.472t 4.928,17.472q 34.944,57.344 94.080,91.84t 124.992,34.944 124.992-34.944 94.080-91.84q 4.928-8.96 4.928-17.472z"  />
142 
<glyph unicode="&#x42;" d="M 224-64C 100.297-64,0,36.297,0,160S 100.297,384, 224,384s 224-100.297, 224-224
143 
	S 347.703-64, 224-64z M 224,328C 131.223,328, 56,252.777, 56,160s 75.223-168, 168-168s 168,75.223, 168,168S 316.777,328, 224,328z M 224,48
144 
	c-61.852,0-112,50.148-112,112s 50.148,112, 112,112s 112-50.148, 112-112S 285.852,48, 224,48z"  />
145 
<glyph unicode="&#x43;" d="M 224,384C 100.288,384,0,283.712,0,160s 100.288-224, 224-224s 224,100.288, 224,224S 347.712,384, 224,384z M 224-8
146 
	c-92.784,0-168,75.216-168,168c0,92.784, 75.216,168, 168,168c 92.784,0, 168-75.216, 168-168C 392,67.216, 316.784-8, 224-8z"  />
142 147 
<glyph unicode="&#x20;" horiz-adv-x="224" />
143 148 
</font></defs></svg>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/icon_guide.html
148 148 
	</section>
149 149 

  		





  150
  150
  
    
	<section>


  		





  151
  
  
    
		<h2>checkboxes</h2>


  		





  
  151
  
    
		<h2>checkboxes - radiobuttons</h2>


  		





  152
  152
  
    
		<div class="glyph">


  		





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


  		





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


  		





  ......




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


  		





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


  		





  159
  159
  
    
		</div>


  		





  
  160
  
    
		<div class="glyph">


  		





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


  		





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


  		





  
  163
  
    
		</div>


  		





  
  164
  
    
		<div class="glyph">


  		





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


  		





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


  		





  
  167
  
    
		</div>


  		





  160
  168
  
    
	</section>


  		





  161
  169
  
    
	


  		





  162
  170
  
    
	<section>


  		





  ......




  254
  262
  
    
		<h1>Class Names</h1>


  		





  255
  263
  
    
	</header>


  		





  256
  264
  
    
	<span class="box1 general">


  		





  257
  
  
    
		<span aria-hidden="true" class="snf-twitter-off-black"></span>


  		





  
  265
  
    
		<span aria-hidden="true" class=""></span>


  		





  258
  266
  
    
		&nbsp;snf-font


  		





  259
  267
  
    
	</span>


  		





  260
  268
  
    
	


  		





  ......




  370
  378
  
    
		<span aria-hidden="true" class="snf-eye"></span>


  		





  371
  379
  
    
		&nbsp;snf-eye


  		





  372
  380
  
    
	</span>


  		





  
  381
  
    
	<span class="box1">


  		





  
  382
  
    
		<span aria-hidden="true" class="snf-radio-checked"></span>


  		





  
  383
  
    
		&nbsp;snf-radio-checked


  		





  
  384
  
    
	</span>


  		





  
  385
  
    
	<span class="box1">


  		





  
  386
  
    
		<span aria-hidden="true" class="snf-radio-unchecked"></span>


  		





  
  387
  
    
		&nbsp;snf-radio-unchecked


  		





  
  388
  
    
	</span>


  		





  
  389
  
    

  		





  373
  390
  
    
	</section>


  		





  374
  391
  
    
	<header>


  		





  375
  392
  
    
		<h1>Usage Example</h1>


  		





  ......




  390
  407
  
    
	</header>


  		





  391
  408
  
    
	<section>


  		





  392
  409
  
    
		<ul>


  		





  393
  
  
    
			<li class="box1">pithos icon</li>


  		





  394
  
  
    
			<li class="box1">disk icon</li>


  		





  395
  
  
    
			<li class="box1">vm icon <span class="note">(not final)</span ></li>


  		





  396
  
  
    
			<li class="box1">network icon <span class="note">(not final)</span ></li>


  		





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


  		





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


  		





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


  		





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


  		





  
  414
  
    
			<li class="box1">network icon filled <span class="note">(not final)</span ></li>


  		





  397
  415
  
    
			<li class="box1">keys? icon</li>


  		





  398
  416
  
    
			<li class="box1">ips icon</li>


  		





  399
  417
  
    
			<li class="box1">folder icon</li>


  		





  ......




  409
  427
  
    
			<li class="box1">delete icon</li>


  		





  410
  428
  
    
			<li class="box1">move? icon</li>


  		





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


  		





  412
  
  
    
			<li class="box1">preview icon</li>


  		





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


  		





  413
  431
  
    
			<li class="box1">close icon <span class="note">(not final)</span ></li>


  		





  414
  
  
    
			<li class="box1">checkbox icon <span class="note">(not final)</span></li>


  		





  
  432
  
    
			<li class="box1">checkbox icon <span class="note"></span></li>


  		





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


  		





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


  		





  417
  435
  
    
		</ul>


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/lte-ie7.js
    
  






  32
  32
  
    
			'snf-PC_fill' : '&#x78;',


  		





  33
  33
  
    
			'snf-Pithos' : '&#x79;',


  		





  34
  34
  
    
			'snf-DASHboard' : '&#x7a;',


  		





  35
  
  
    
			'snf-eye' : '&#x41;'


  		





  
  35
  
    
			'snf-eye' : '&#x41;',


  		





  
  36
  
    
			'snf-radio-checked' : '&#x42;',


  		





  
  37
  
    
			'snf-radio-unchecked' : '&#x43;'


  		





  36
  38
  
    
		},


  		





  37
  39
  
    
		els = document.getElementsByTagName('*'),


  		





  38
  40
  
    
		i, attr, c, el;


  		












  

    
      b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/font_custom.css
    
  






  28
  28
  
    
you can use the generic selector below, but it"s slower:


  		





  29
  29
  
    
[class*="snf-"] {


  		





  30
  30
  
    
*/


  		





  31
  
  
    
.snf-font, .snf-custom-checkbox, .snf-twitter-off-black, .snf-cancel-circled, .snf-checkbox-checked, .snf-checkbox-unchecked, .snf-cancel-circled2, .snf-cancel-circled-outline, .snf-cancel-outline, .snf-ok, .snf-remove, .snf-ban-circle, .snf-ok-circle, .snf-ok-sign, .snf-remove-sign, .snf-minus-sign, .snf-pencil, .snf-edit, .snf-edit-1, .snf-pencil-circled, .snf-icon-compute-outline, .snf-icon-networks-fill, .snf-HDD, .snf-network, .snf-PC, .snf-PC_fill, .snf-Pithos, .snf-DASHboard, .snf-eye {


  		





  
  31
  
    
.snf-font, .snf-custom-checkbox, .snf-twitter-off-black, .snf-cancel-circled, .snf-checkbox-checked, .snf-checkbox-unchecked, .snf-cancel-circled2, .snf-cancel-circled-outline, .snf-cancel-outline, .snf-ok, .snf-remove, .snf-ban-circle, .snf-ok-circle, .snf-ok-sign, .snf-remove-sign, .snf-minus-sign, .snf-pencil, .snf-edit, .snf-edit-1, .snf-pencil-circled, .snf-icon-compute-outline, .snf-icon-networks-fill, .snf-HDD, .snf-network, .snf-PC, .snf-PC_fill, .snf-Pithos, .snf-DASHboard, .snf-eye, .snf-radio-checked, .snf-radio-unchecked{


  		





  32
  32
  
    
	font-family: "snf-font";


  		





  33
  33
  
    
	speak: none;


  		





  34
  34
  
    
	font-style: normal;


  		





  ......




  118
  118
  
    
}


  		





  119
  119
  
    
.snf-eye:before {


  		





  120
  120
  
    
	content: "\41";


  		





  
  121
  
    
}


  		





  
  122
  
    
.snf-radio-checked:before {


  		





  
  123
  
    
	content: "\42";


  		





  
  124
  
    
}


  		





  
  125
  
    
.snf-radio-unchecked:before {


  		





  
  126
  
    
	content: "\43";


  		





  121
  127
  
    
}


  		












Also available in:
  Unified diff