Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (16.5 kB)

1 199a6ea4 Athina Bekakou
<!doctype html>
2 199a6ea4 Athina Bekakou
<html>
3 199a6ea4 Athina Bekakou
<head>
4 6d8bd0be Athina Bekakou
<meta charset='utf-8' />
5 6d8bd0be Athina Bekakou
  <meta name='viewport' content='width=device-width' />
6 6d8bd0be Athina Bekakou
<title>snf fonts</title>
7 6d8bd0be Athina Bekakou
<link rel='stylesheet' href='stylesheets/font_custom.css' />
8 6d8bd0be Athina Bekakou
<!--[if lte IE 7]><script src='lte-ie7.js'></script><![endif]-->
9 199a6ea4 Athina Bekakou
<style>
10 199a6ea4 Athina Bekakou
        section, header, footer {display: block; overflow: hidden;}
11 199a6ea4 Athina Bekakou
        body {
12 199a6ea4 Athina Bekakou
                font-family: sans-serif;
13 199a6ea4 Athina Bekakou
                color: #444;
14 199a6ea4 Athina Bekakou
                line-height: 1.5;
15 199a6ea4 Athina Bekakou
                font-size: 1em;
16 199a6ea4 Athina Bekakou
        }
17 199a6ea4 Athina Bekakou
        * {
18 199a6ea4 Athina Bekakou
                -moz-box-sizing: border-box;
19 199a6ea4 Athina Bekakou
                -webkit-box-sizing: border-box;
20 199a6ea4 Athina Bekakou
                box-sizing: border-box;
21 199a6ea4 Athina Bekakou
                margin: 0;
22 199a6ea4 Athina Bekakou
                padding: 0;
23 199a6ea4 Athina Bekakou
        }
24 199a6ea4 Athina Bekakou
        .glyph {
25 199a6ea4 Athina Bekakou
                font-size: 14px;
26 199a6ea4 Athina Bekakou
                float: left;
27 199a6ea4 Athina Bekakou
                text-align: center;
28 199a6ea4 Athina Bekakou
                background: #eee;
29 199a6ea4 Athina Bekakou
                padding: .75em;
30 199a6ea4 Athina Bekakou
                margin: .75em 1.5em .75em 1px;
31 1b2adfd1 Athina Bekakou
                width: 20em;
32 199a6ea4 Athina Bekakou
                border-radius: .25em;
33 199a6ea4 Athina Bekakou
                box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
34 199a6ea4 Athina Bekakou
        }
35 6d8bd0be Athina Bekakou
        .glyph.aux {
36 6d8bd0be Athina Bekakou
                background-color: #f8f8e7;
37 6d8bd0be Athina Bekakou
        }
38 199a6ea4 Athina Bekakou
        .glyph input {
39 199a6ea4 Athina Bekakou
                font-family: consolas, monospace;
40 199a6ea4 Athina Bekakou
                font-size: 13px;
41 199a6ea4 Athina Bekakou
                width: 100%;
42 199a6ea4 Athina Bekakou
                text-align: center;
43 199a6ea4 Athina Bekakou
                border: 0;
44 199a6ea4 Athina Bekakou
                box-shadow: 0 0 0 1px #ccc;
45 199a6ea4 Athina Bekakou
                padding: .125em;
46 199a6ea4 Athina Bekakou
        }
47 199a6ea4 Athina Bekakou
        .w-main {
48 199a6ea4 Athina Bekakou
                width: 80%;
49 199a6ea4 Athina Bekakou
        }
50 199a6ea4 Athina Bekakou
        .centered {
51 199a6ea4 Athina Bekakou
                margin-left: auto;
52 199a6ea4 Athina Bekakou
                margin-right: auto;
53 199a6ea4 Athina Bekakou
        }
54 199a6ea4 Athina Bekakou
        .fs1 {
55 199a6ea4 Athina Bekakou
                font-size: 2em;
56 199a6ea4 Athina Bekakou
                color: rgb(71, 176, 233);
57 199a6ea4 Athina Bekakou
        }
58 199a6ea4 Athina Bekakou
        header {
59 199a6ea4 Athina Bekakou
                margin: 2em 0;
60 199a6ea4 Athina Bekakou
                padding-bottom: .5em;
61 199a6ea4 Athina Bekakou
                color: #666;
62 199a6ea4 Athina Bekakou
                box-shadow: 0 2px #eee;
63 199a6ea4 Athina Bekakou
        }
64 199a6ea4 Athina Bekakou
        header h1 {
65 199a6ea4 Athina Bekakou
                font-size: 2em;
66 199a6ea4 Athina Bekakou
                font-weight: normal;
67 199a6ea4 Athina Bekakou
        }
68 6d8bd0be Athina Bekakou
        .clearfix:before, .clearfix:after { content: ''; display: table; }
69 199a6ea4 Athina Bekakou
        .clearfix:after, .clear { clear: both; }
70 199a6ea4 Athina Bekakou
        footer {
71 199a6ea4 Athina Bekakou
                margin-top: 2em;
72 199a6ea4 Athina Bekakou
                padding: .5em 0;
73 199a6ea4 Athina Bekakou
                box-shadow: 0 -2px #eee;
74 199a6ea4 Athina Bekakou
        }
75 199a6ea4 Athina Bekakou
        a, a:visited {
76 199a6ea4 Athina Bekakou
                color: #B35047;
77 199a6ea4 Athina Bekakou
                text-decoration: none;
78 199a6ea4 Athina Bekakou
        }
79 199a6ea4 Athina Bekakou
        a:hover, a:focus {color: #000;}
80 199a6ea4 Athina Bekakou
        .box1 {
81 199a6ea4 Athina Bekakou
                font-size: 14px;
82 199a6ea4 Athina Bekakou
                display: inline-block;
83 199a6ea4 Athina Bekakou
                width: 15em;
84 199a6ea4 Athina Bekakou
                padding: .25em .5em;
85 199a6ea4 Athina Bekakou
                background: #eee;
86 199a6ea4 Athina Bekakou
                margin: .5em 1em .5em 0;
87 199a6ea4 Athina Bekakou
        }
88 199a6ea4 Athina Bekakou
        .general {
89 199a6ea4 Athina Bekakou
                font-weight: bold;
90 199a6ea4 Athina Bekakou
        }
91 199a6ea4 Athina Bekakou
        h1, h2 {
92 199a6ea4 Athina Bekakou
                color: #666;
93 199a6ea4 Athina Bekakou
                font-weight: normal;
94 199a6ea4 Athina Bekakou
        }
95 199a6ea4 Athina Bekakou
96 199a6ea4 Athina Bekakou
        .note {
97 199a6ea4 Athina Bekakou
                font-style: italic;
98 199a6ea4 Athina Bekakou
        }
99 199a6ea4 Athina Bekakou
100 199a6ea4 Athina Bekakou
        section ul {
101 199a6ea4 Athina Bekakou
                list-style-type:circle;
102 199a6ea4 Athina Bekakou
                margin: 18px;
103 199a6ea4 Athina Bekakou
        }
104 8db75456 Athina Bekakou
        li {
105 199a6ea4 Athina Bekakou
                font-size: 14px;
106 199a6ea4 Athina Bekakou
        }
107 199a6ea4 Athina Bekakou
</style>
108 199a6ea4 Athina Bekakou
</head>
109 199a6ea4 Athina Bekakou
<body>
110 6d8bd0be Athina Bekakou
        <div class='w-main centered'>
111 6d8bd0be Athina Bekakou
        <section class='mtm clearfix' >
112 199a6ea4 Athina Bekakou
        <header>
113 199a6ea4 Athina Bekakou
                <h1>Icons included in snf-font-1</h1>
114 199a6ea4 Athina Bekakou
                                
115 199a6ea4 Athina Bekakou
        </header>
116 bf348d7d Athina Bekakou
117 bf348d7d Athina Bekakou
        <section>
118 bf348d7d Athina Bekakou
                <h2>snf icons</h2>
119 6d8bd0be Athina Bekakou
                <div class='glyph'>
120 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='v'></div>
121 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-outline [v]' />
122 ca5bff12 Athina Bekakou
                </div>
123 6d8bd0be Athina Bekakou
                <div class='glyph'>
124 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='K'></div>
125 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-full [K]' />
126 bf348d7d Athina Bekakou
                </div>
127 6d8bd0be Athina Bekakou
                <div class='glyph'>
128 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='T'></div>
129 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-create-outline [T]' />
130 1b2adfd1 Athina Bekakou
                </div>
131 6d8bd0be Athina Bekakou
                <div class='glyph'>
132 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='U'></div>
133 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-create-full [U]' />
134 1b2adfd1 Athina Bekakou
                </div>
135 6d8bd0be Athina Bekakou
                <div class='glyph'>
136 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='7'></div>
137 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-broken-1-outline [7]' />
138 1b2adfd1 Athina Bekakou
                </div>
139 6d8bd0be Athina Bekakou
                <div class='glyph'>
140 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='V'></div>
141 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-broken-1-full [V]' />
142 1b2adfd1 Athina Bekakou
                </div>
143 6d8bd0be Athina Bekakou
                <div class='glyph'>
144 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='8'></div>
145 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-broken-2-outline [8]' />
146 1b2adfd1 Athina Bekakou
                </div>
147 6d8bd0be Athina Bekakou
                <div class='glyph'>
148 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='W'></div>
149 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-network-broken-2-full [W]' />
150 1b2adfd1 Athina Bekakou
                </div>
151 6d8bd0be Athina Bekakou
                <div class='glyph'>
152 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='w'></div>
153 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-outline [w]' />
154 ca5bff12 Athina Bekakou
                </div>
155 6d8bd0be Athina Bekakou
                <div class='glyph'>
156 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='x'></div>
157 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-full [x]' />
158 ca5bff12 Athina Bekakou
                </div>
159 6d8bd0be Athina Bekakou
                <div class='glyph'>
160 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='S'></div>
161 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-create-full [S]' />
162 1b2adfd1 Athina Bekakou
                </div>
163 6d8bd0be Athina Bekakou
                <div class='glyph'>
164 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='9'></div>
165 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-broken-outline [9]' />
166 1b2adfd1 Athina Bekakou
                </div>
167 6d8bd0be Athina Bekakou
                <div class='glyph'>
168 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='X'></div>
169 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-broken-full [X]' />
170 1b2adfd1 Athina Bekakou
                </div>
171 6d8bd0be Athina Bekakou
                <div class='glyph'>
172 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='!'></div>
173 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-reboot-outline [!]' />
174 1b2adfd1 Athina Bekakou
                </div>
175 6d8bd0be Athina Bekakou
                <div class='glyph'>
176 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='Y'></div>
177 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-reboot-full [Y]' />
178 1b2adfd1 Athina Bekakou
                </div>
179 6d8bd0be Athina Bekakou
                <div class='glyph'>
180 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='@'></div>
181 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-switch-outline [@]' />
182 1b2adfd1 Athina Bekakou
                </div>
183 6d8bd0be Athina Bekakou
                <div class='glyph'>
184 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='Z'></div>
185 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pc-switch-full [Z]' />
186 1b2adfd1 Athina Bekakou
                </div>
187 6d8bd0be Athina Bekakou
                <div class='glyph'>
188 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='u'></div>
189 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-volume-outline [u]' />
190 1b2adfd1 Athina Bekakou
                </div>
191 6d8bd0be Athina Bekakou
                <div class='glyph'>
192 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='O'></div>
193 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-volume-full [O]' />
194 1b2adfd1 Athina Bekakou
                </div>
195 6d8bd0be Athina Bekakou
                <div class='glyph'>
196 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='6'></div>
197 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-volume-create-full [6]' />
198 1b2adfd1 Athina Bekakou
                </div>
199 6d8bd0be Athina Bekakou
                <div class='glyph'>
200 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='0'></div>
201 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-volume-broken-outline [0]' />
202 ca5bff12 Athina Bekakou
                </div>
203 6d8bd0be Athina Bekakou
                <div class='glyph'>
204 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='y'></div>
205 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pithos-outline [y]' />
206 ca5bff12 Athina Bekakou
                </div>
207 6d8bd0be Athina Bekakou
                <div class='glyph'>
208 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='5'></div>
209 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-pithos-full [5]' />
210 1b2adfd1 Athina Bekakou
                </div>
211 6d8bd0be Athina Bekakou
                <div class='glyph'>
212 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='z'></div>
213 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-dashboard-outline [z]' />
214 ca5bff12 Athina Bekakou
                </div>
215 6d8bd0be Athina Bekakou
                <div class='glyph'>
216 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='E'></div>
217 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-chip-outline [E]' />
218 b6241d87 Athina Bekakou
                </div>
219 6d8bd0be Athina Bekakou
                <div class='glyph'>
220 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='3'></div>
221 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-chip-full [3]' />
222 1b2adfd1 Athina Bekakou
                </div>
223 6d8bd0be Athina Bekakou
                <div class='glyph'>
224 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='F'></div>
225 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-lock-closed-full [F]' />
226 b6241d87 Athina Bekakou
                </div>        
227 6d8bd0be Athina Bekakou
                <div class='glyph'>
228 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='G'></div>
229 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-lock-open-full [G]' />
230 b6241d87 Athina Bekakou
                </div>        
231 6d8bd0be Athina Bekakou
                <div class='glyph'>
232 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='H'></div>
233 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-router-outline [H]' />
234 1b2adfd1 Athina Bekakou
                </div>
235 6d8bd0be Athina Bekakou
                <div class='glyph'>
236 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='2'></div>
237 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-router-full [2]' />
238 1b2adfd1 Athina Bekakou
                </div>
239 6d8bd0be Athina Bekakou
                <div class='glyph'>
240 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='I'></div>
241 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-www [I]' />
242 b6241d87 Athina Bekakou
                </div>        
243 6d8bd0be Athina Bekakou
                <div class='glyph'>
244 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='J'></div>
245 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-ram-outline [J]' />
246 27a54f35 Athina Bekakou
                </div>
247 6d8bd0be Athina Bekakou
                <div class='glyph'>
248 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='R'></div>
249 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-ram-full [R]' />
250 1b2adfd1 Athina Bekakou
                </div>
251 6d8bd0be Athina Bekakou
                <div class='glyph'>
252 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='e'></div>
253 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-snapshot-outline [e]' />
254 1b2adfd1 Athina Bekakou
                </div>
255 6d8bd0be Athina Bekakou
                <div class='glyph'>
256 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='N'></div>
257 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-snapshot-full [N]' />
258 27a54f35 Athina Bekakou
                </div>
259 6d8bd0be Athina Bekakou
                <div class='glyph'>
260 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='f'></div>
261 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-image-outline [f]' />
262 27a54f35 Athina Bekakou
                </div>
263 6d8bd0be Athina Bekakou
                <div class='glyph'>
264 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='Q'></div>
265 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-image-full [Q]' />
266 1b2adfd1 Athina Bekakou
                </div>
267 6d8bd0be Athina Bekakou
                <div class='glyph'>
268 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='m'></div>
269 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-plus-outline [m]' />
270 1b2adfd1 Athina Bekakou
                </div>
271 6d8bd0be Athina Bekakou
                <div class='glyph'>
272 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='4'></div>
273 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-plus-full [4]' />
274 b6241d87 Athina Bekakou
                </div>        
275 6d8bd0be Athina Bekakou
                <div class='glyph'>
276 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='P'></div>
277 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-nic-outline [P]' />
278 f11bc634 Athina Bekakou
                </div>
279 6d8bd0be Athina Bekakou
                <div class='glyph'>
280 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='r'></div>
281 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-nic-full [r]' />
282 f11bc634 Athina Bekakou
                </div>
283 6d8bd0be Athina Bekakou
                <div class='glyph'>
284 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='#'></div>
285 f46706de Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-key-outline [#]' />
286 f11bc634 Athina Bekakou
                </div>
287 6d8bd0be Athina Bekakou
                <div class='glyph'>
288 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='1'></div>
289 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-key-full [1]' />
290 f11bc634 Athina Bekakou
                </div>
291 bf348d7d Athina Bekakou
        </section>
292 bf348d7d Athina Bekakou
293 199a6ea4 Athina Bekakou
        <section>
294 2c7cc4ac Athina Bekakou
                <h2>checkboxes - radiobuttons</h2>
295 6d8bd0be Athina Bekakou
                <div class='glyph'>
296 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='a'></div>
297 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-checkbox-unchecked [a]' />
298 199a6ea4 Athina Bekakou
                </div>
299 6d8bd0be Athina Bekakou
                <div class='glyph'>
300 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='b'></div>
301 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-checkbox-checked [b]' />
302 199a6ea4 Athina Bekakou
                </div>
303 6d8bd0be Athina Bekakou
                <div class='glyph'>
304 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='C'></div>
305 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-radio-unchecked [C]' />
306 2c7cc4ac Athina Bekakou
                </div>
307 6d8bd0be Athina Bekakou
                <div class='glyph'>
308 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='B'></div>
309 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-radio-checked [B]' />
310 2c7cc4ac Athina Bekakou
                </div>
311 199a6ea4 Athina Bekakou
        </section>
312 199a6ea4 Athina Bekakou
        
313 199a6ea4 Athina Bekakou
        <section>
314 199a6ea4 Athina Bekakou
                <h2>close - cancel - remove</h2>
315 6d8bd0be Athina Bekakou
                <div class='glyph'>
316 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='D'></div>
317 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-close [D]' />
318 b6241d87 Athina Bekakou
                </div>        
319 6d8bd0be Athina Bekakou
                <div class='glyph'>
320 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='c'></div>
321 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-cancel-circled [c]' />
322 6d8bd0be Athina Bekakou
                </div>
323 6d8bd0be Athina Bekakou
                <div class='glyph'>
324 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='n'></div>
325 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-minus-sign [n]' />
326 199a6ea4 Athina Bekakou
                </div>
327 6d8bd0be Athina Bekakou
                <div class='glyph'>
328 6d8bd0be Athina Bekakou
                <div class='fs1' aria-hidden='true' data-icon='j'></div>
329 6d8bd0be Athina Bekakou
                <input type='text' readonly='readonly' value='snf-ban-circle [j]' />
330 199a6ea4 Athina Bekakou
                </div>
331 6d8bd0be Athina Bekakou
                <div class='glyph'>
332 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='$'></div>
333 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-trash-outline [$]' />
334 199a6ea4 Athina Bekakou
                </div>
335 6d8bd0be Athina Bekakou
                <div class='glyph'>
336 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='='></div>
337 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-trash-full [=]' />
338 1b2adfd1 Athina Bekakou
                </div>
339 199a6ea4 Athina Bekakou
        </section>
340 199a6ea4 Athina Bekakou
        
341 199a6ea4 Athina Bekakou
        <section>
342 199a6ea4 Athina Bekakou
                <h2>ok - confirm</h2>
343 6d8bd0be Athina Bekakou
                <div class='glyph'>
344 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='l'></div>
345 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-ok-sign [l]' />
346 199a6ea4 Athina Bekakou
                </div>
347 6d8bd0be Athina Bekakou
                <div class='glyph'>
348 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='h'></div>
349 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-ok [h]' />
350 199a6ea4 Athina Bekakou
                </div>
351 199a6ea4 Athina Bekakou
        </section>
352 199a6ea4 Athina Bekakou
                
353 199a6ea4 Athina Bekakou
        <section>
354 92df6d32 Athina Bekakou
                <h2>show - preview - view type</h2>
355 6d8bd0be Athina Bekakou
                <div class='glyph'>
356 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='A'></div>
357 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-eye [A]' />
358 92df6d32 Athina Bekakou
                </div>
359 6d8bd0be Athina Bekakou
                <div class='glyph'>
360 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='t'></div>
361 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='ssnf-gridview [t]' />
362 92df6d32 Athina Bekakou
                </div>        
363 6d8bd0be Athina Bekakou
                <div class='glyph'>
364 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='s'></div>
365 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-listview [s]' />
366 00ab5afc Athina Bekakou
                </div>        
367 00ab5afc Athina Bekakou
        </section>
368 bb6007e0 Athina Bekakou
369 bb6007e0 Athina Bekakou
        <section>
370 bb6007e0 Athina Bekakou
                <h2>arrows</h2>
371 6d8bd0be Athina Bekakou
                <div class='glyph'>
372 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='L'></div>
373 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-arrow-up [L]' />
374 bb6007e0 Athina Bekakou
                </div>
375 6d8bd0be Athina Bekakou
                <div class='glyph'>
376 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='M'></div>
377 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-arrow-down [M]' />
378 9ac09101 Athina Bekakou
                </div>
379 6d8bd0be Athina Bekakou
                <div class='glyph'>
380 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='_'></div>
381 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-arrow-left-small-full [_]' />
382 fc78f5b5 Athina Bekakou
                </div>
383 6d8bd0be Athina Bekakou
                <div class='glyph'>
384 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='-'></div>
385 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-arrow-right-small-full [-]' />
386 fc78f5b5 Athina Bekakou
                </div>
387 6d8bd0be Athina Bekakou
                <div class='glyph'>
388 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='('></div>
389 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-upload-full [()]' />
390 fc78f5b5 Athina Bekakou
                </div>
391 6d8bd0be Athina Bekakou
                <div class='glyph'>
392 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='%'></div>
393 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-download-full [%]' />
394 fc78f5b5 Athina Bekakou
                </div>
395 6d8bd0be Athina Bekakou
                <div class='glyph'>
396 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon=')'></div>
397 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-refresh-outline [)]' />
398 fc78f5b5 Athina Bekakou
                </div>
399 ca5bff12 Athina Bekakou
        </section>
400 fe1e59a9 Athina Bekakou
401 fe1e59a9 Athina Bekakou
        <section>
402 fe1e59a9 Athina Bekakou
                <h2>misc</h2>
403 6d8bd0be Athina Bekakou
                <div class='glyph'>
404 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='q'></div>
405 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-edit [q]' />
406 fe1e59a9 Athina Bekakou
                </div>
407 6d8bd0be Athina Bekakou
                <div class='glyph'>
408 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='d'></div>
409 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-search [d]' />
410 fe1e59a9 Athina Bekakou
                </div>
411 6d8bd0be Athina Bekakou
                <div class='glyph'>
412 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='g'></div>
413 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-twitter-logo [g]' />
414 fe1e59a9 Athina Bekakou
                </div>        
415 6d8bd0be Athina Bekakou
                <div class='glyph'>
416 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='i'></div>
417 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-switch [i]' />
418 fe1e59a9 Athina Bekakou
                </div>        
419 6d8bd0be Athina Bekakou
                <div class='glyph'>
420 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='k'></div>
421 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-thunder-full [k]' />
422 fe1e59a9 Athina Bekakou
                </div>        
423 6d8bd0be Athina Bekakou
                <div class='glyph'>
424 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='o'></div>
425 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-info-outline [o]' />
426 fc78f5b5 Athina Bekakou
                </div>
427 6d8bd0be Athina Bekakou
                <div class='glyph'>
428 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='p'></div>
429 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-info-full [p]' />
430 fc78f5b5 Athina Bekakou
                </div>
431 6d8bd0be Athina Bekakou
                <div class='glyph'>
432 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='*'></div>
433 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-person-outline [*]' />
434 fc78f5b5 Athina Bekakou
                </div>
435 6d8bd0be Athina Bekakou
                <div class='glyph'>
436 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='?'></div>
437 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-copy-outline [?]' />
438 fc78f5b5 Athina Bekakou
                </div>
439 6d8bd0be Athina Bekakou
                <div class='glyph'>
440 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon= '"'></div>
441 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-copy-full ["]' />
442 fc78f5b5 Athina Bekakou
                </div>
443 6d8bd0be Athina Bekakou
                <div class='glyph'>
444 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon='&'></div>
445 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-link-outline [&]' />
446 92df6d32 Athina Bekakou
                </div>        
447 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
448 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='f'></div>
449 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-folder-outline [f]' />
450 6d8bd0be Athina Bekakou
                </div>
451 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
452 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='F'></div>
453 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-folder-full [F]' />
454 6d8bd0be Athina Bekakou
                </div>
455 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
456 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='a'></div>
457 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-folder-create-outline [a]' />
458 6d8bd0be Athina Bekakou
                </div>
459 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
460 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux= 'A'></div>
461 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-folder-create-full [A]' />
462 6d8bd0be Athina Bekakou
                </div>
463 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
464 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='e'></div>
465 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-folder-move-outline [e]' />
466 6d8bd0be Athina Bekakou
                </div>
467 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
468 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='E'></div>
469 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-folder-move-full [E]' />
470 6d8bd0be Athina Bekakou
                </div>
471 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
472 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='c'></div>
473 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-shared-by-me-outline [c]' />
474 6d8bd0be Athina Bekakou
                </div>
475 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
476 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='C'></div>
477 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-shared-by-me-full [C]' />
478 6d8bd0be Athina Bekakou
                </div>
479 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
480 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='d'></div>
481 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-shared-to-me-outline [d]' />
482 6d8bd0be Athina Bekakou
                </div>
483 6d8bd0be Athina Bekakou
                <div class='glyph aux'>
484 6d8bd0be Athina Bekakou
                        <div class='fs1' aria-hidden='true' data-icon-aux='D'></div>
485 6d8bd0be Athina Bekakou
                        <input type='text' readonly='readonly' value='snf-shared-to-me-full [D]' />
486 6d8bd0be Athina Bekakou
                </div>
487 92df6d32 Athina Bekakou
        </section>
488 199a6ea4 Athina Bekakou
489 bb6007e0 Athina Bekakou
</section>
490 ca5bff12 Athina Bekakou
</div>        
491 199a6ea4 Athina Bekakou
</body>
492 199a6ea4 Athina Bekakou
</html>