root / snf-cyclades-app / synnefo / ui / new_ui / ui / icon_guide.html @ 5ffce177
History | View | Annotate | Download (15.5 kB)
1 | 199a6ea4 | Athina Bekakou | <!doctype html> |
---|---|---|---|
2 | 199a6ea4 | Athina Bekakou | <html>
|
3 | 199a6ea4 | Athina Bekakou | <head>
|
4 | ca5bff12 | Athina Bekakou | <meta charset="utf-8" /> |
5 | ca5bff12 | Athina Bekakou | <meta name="viewport" content="width=device-width" /> |
6 | 199a6ea4 | Athina Bekakou | <title>snf-font-1</title> |
7 | 199a6ea4 | Athina Bekakou | <link rel="stylesheet" href="stylesheets/font_custom.css" /> |
8 | 199a6ea4 | 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 | 199a6ea4 | Athina Bekakou | width: 7.5em; |
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 | 199a6ea4 | Athina Bekakou | .glyph input { |
36 | 199a6ea4 | Athina Bekakou | font-family: consolas, monospace; |
37 | 199a6ea4 | Athina Bekakou | font-size: 13px; |
38 | 199a6ea4 | Athina Bekakou | width: 100%; |
39 | 199a6ea4 | Athina Bekakou | text-align: center; |
40 | 199a6ea4 | Athina Bekakou | border: 0; |
41 | 199a6ea4 | Athina Bekakou | box-shadow: 0 0 0 1px #ccc; |
42 | 199a6ea4 | Athina Bekakou | padding: .125em; |
43 | 199a6ea4 | Athina Bekakou | } |
44 | 199a6ea4 | Athina Bekakou | .w-main { |
45 | 199a6ea4 | Athina Bekakou | width: 80%; |
46 | 199a6ea4 | Athina Bekakou | } |
47 | 199a6ea4 | Athina Bekakou | .centered { |
48 | 199a6ea4 | Athina Bekakou | margin-left: auto; |
49 | 199a6ea4 | Athina Bekakou | margin-right: auto; |
50 | 199a6ea4 | Athina Bekakou | } |
51 | 199a6ea4 | Athina Bekakou | .fs1 { |
52 | 199a6ea4 | Athina Bekakou | font-size: 2em; |
53 | 199a6ea4 | Athina Bekakou | color: rgb(71, 176, 233); |
54 | 199a6ea4 | Athina Bekakou | } |
55 | 199a6ea4 | Athina Bekakou | header { |
56 | 199a6ea4 | Athina Bekakou | margin: 2em 0; |
57 | 199a6ea4 | Athina Bekakou | padding-bottom: .5em; |
58 | 199a6ea4 | Athina Bekakou | color: #666; |
59 | 199a6ea4 | Athina Bekakou | box-shadow: 0 2px #eee; |
60 | 199a6ea4 | Athina Bekakou | } |
61 | 199a6ea4 | Athina Bekakou | header h1 { |
62 | 199a6ea4 | Athina Bekakou | font-size: 2em; |
63 | 199a6ea4 | Athina Bekakou | font-weight: normal; |
64 | 199a6ea4 | Athina Bekakou | } |
65 | 199a6ea4 | Athina Bekakou | .clearfix:before, .clearfix:after { content: ""; display: table; } |
66 | 199a6ea4 | Athina Bekakou | .clearfix:after, .clear { clear: both; } |
67 | 199a6ea4 | Athina Bekakou | footer { |
68 | 199a6ea4 | Athina Bekakou | margin-top: 2em; |
69 | 199a6ea4 | Athina Bekakou | padding: .5em 0; |
70 | 199a6ea4 | Athina Bekakou | box-shadow: 0 -2px #eee; |
71 | 199a6ea4 | Athina Bekakou | } |
72 | 199a6ea4 | Athina Bekakou | a, a:visited { |
73 | 199a6ea4 | Athina Bekakou | color: #B35047; |
74 | 199a6ea4 | Athina Bekakou | text-decoration: none; |
75 | 199a6ea4 | Athina Bekakou | } |
76 | 199a6ea4 | Athina Bekakou | a:hover, a:focus {color: #000;} |
77 | 199a6ea4 | Athina Bekakou | .box1 { |
78 | 199a6ea4 | Athina Bekakou | font-size: 14px; |
79 | 199a6ea4 | Athina Bekakou | display: inline-block; |
80 | 199a6ea4 | Athina Bekakou | width: 15em; |
81 | 199a6ea4 | Athina Bekakou | padding: .25em .5em; |
82 | 199a6ea4 | Athina Bekakou | background: #eee; |
83 | 199a6ea4 | Athina Bekakou | margin: .5em 1em .5em 0; |
84 | 199a6ea4 | Athina Bekakou | } |
85 | 199a6ea4 | Athina Bekakou | .general { |
86 | 199a6ea4 | Athina Bekakou | font-weight: bold; |
87 | 199a6ea4 | Athina Bekakou | } |
88 | 199a6ea4 | Athina Bekakou | h1, h2 { |
89 | 199a6ea4 | Athina Bekakou | color: #666; |
90 | 199a6ea4 | Athina Bekakou | font-weight: normal; |
91 | 199a6ea4 | Athina Bekakou | } |
92 | 199a6ea4 | Athina Bekakou | |
93 | 199a6ea4 | Athina Bekakou | .note { |
94 | 199a6ea4 | Athina Bekakou | font-style: italic; |
95 | 199a6ea4 | Athina Bekakou | } |
96 | 199a6ea4 | Athina Bekakou | |
97 | 199a6ea4 | Athina Bekakou | section ul { |
98 | 199a6ea4 | Athina Bekakou | list-style-type:circle; |
99 | 199a6ea4 | Athina Bekakou | margin: 18px; |
100 | 199a6ea4 | Athina Bekakou | } |
101 | 8db75456 | Athina Bekakou | li { |
102 | 199a6ea4 | Athina Bekakou | font-size: 14px; |
103 | 199a6ea4 | Athina Bekakou | } |
104 | 199a6ea4 | Athina Bekakou | </style>
|
105 | 199a6ea4 | Athina Bekakou | </head>
|
106 | 199a6ea4 | Athina Bekakou | <body>
|
107 | 199a6ea4 | Athina Bekakou | <div class="w-main centered"> |
108 | ca5bff12 | Athina Bekakou | <section class="mtm clearfix" > |
109 | 199a6ea4 | Athina Bekakou | <header>
|
110 | 199a6ea4 | Athina Bekakou | <h1>Icons included in snf-font-1</h1> |
111 | 199a6ea4 | Athina Bekakou | |
112 | 199a6ea4 | Athina Bekakou | </header>
|
113 | bf348d7d | Athina Bekakou | |
114 | bf348d7d | Athina Bekakou | <section>
|
115 | bf348d7d | Athina Bekakou | <h2>snf icons</h2> |
116 | bf348d7d | Athina Bekakou | <div class="glyph"> |
117 | 0ced28b6 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="K"></div> |
118 | 0ced28b6 | Athina Bekakou | <input type="text" readonly="readonly" value="K" /> |
119 | 0ced28b6 | Athina Bekakou | </div>
|
120 | 0ced28b6 | Athina Bekakou | <div class="glyph"> |
121 | bf348d7d | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="t"></div> |
122 | 0ced28b6 | Athina Bekakou | <input type="text" readonly="readonly" value="t (no use)" /> |
123 | bf348d7d | Athina Bekakou | </div>
|
124 | bf348d7d | Athina Bekakou | <div class="glyph"> |
125 | ca5bff12 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="v"></div> |
126 | ca5bff12 | Athina Bekakou | <input type="text" readonly="readonly" value="v" /> |
127 | ca5bff12 | Athina Bekakou | </div>
|
128 | ca5bff12 | Athina Bekakou | <div class="glyph"> |
129 | bf348d7d | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="s"></div> |
130 | 0ced28b6 | Athina Bekakou | <input type="text" readonly="readonly" value="s (no use)" /> |
131 | bf348d7d | Athina Bekakou | </div>
|
132 | ca5bff12 | Athina Bekakou | <div class="glyph"> |
133 | ca5bff12 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="w"></div> |
134 | ca5bff12 | Athina Bekakou | <input type="text" readonly="readonly" value="w" /> |
135 | ca5bff12 | Athina Bekakou | </div>
|
136 | ca5bff12 | Athina Bekakou | <div class="glyph"> |
137 | ca5bff12 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="x"></div> |
138 | ca5bff12 | Athina Bekakou | <input type="text" readonly="readonly" value="x" /> |
139 | ca5bff12 | Athina Bekakou | </div>
|
140 | ca5bff12 | Athina Bekakou | <div class="glyph"> |
141 | ca5bff12 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="u"></div> |
142 | ca5bff12 | Athina Bekakou | <input type="text" readonly="readonly" value="u" /> |
143 | ca5bff12 | Athina Bekakou | </div>
|
144 | ca5bff12 | Athina Bekakou | <div class="glyph"> |
145 | ca5bff12 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="y"></div> |
146 | ca5bff12 | Athina Bekakou | <input type="text" readonly="readonly" value="y" /> |
147 | ca5bff12 | Athina Bekakou | </div>
|
148 | ca5bff12 | Athina Bekakou | <div class="glyph"> |
149 | ca5bff12 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="z"></div> |
150 | d442d17f | Athina Bekakou | <input type="text" readonly="readonly" value="z" /> |
151 | ca5bff12 | Athina Bekakou | </div>
|
152 | b6241d87 | Athina Bekakou | <div class="glyph"> |
153 | b6241d87 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="E"></div> |
154 | b6241d87 | Athina Bekakou | <input type="text" readonly="readonly" value="E" /> |
155 | b6241d87 | Athina Bekakou | </div>
|
156 | b6241d87 | Athina Bekakou | <div class="glyph"> |
157 | b6241d87 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="F"></div> |
158 | b6241d87 | Athina Bekakou | <input type="text" readonly="readonly" value="F" /> |
159 | b6241d87 | Athina Bekakou | </div>
|
160 | b6241d87 | Athina Bekakou | <div class="glyph"> |
161 | b6241d87 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="G"></div> |
162 | b6241d87 | Athina Bekakou | <input type="text" readonly="readonly" value="G" /> |
163 | b6241d87 | Athina Bekakou | </div>
|
164 | b6241d87 | Athina Bekakou | <div class="glyph"> |
165 | b6241d87 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="H"></div> |
166 | b6241d87 | Athina Bekakou | <input type="text" readonly="readonly" value="H" /> |
167 | b6241d87 | Athina Bekakou | </div>
|
168 | b6241d87 | Athina Bekakou | <div class="glyph"> |
169 | b6241d87 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="I"></div> |
170 | b6241d87 | Athina Bekakou | <input type="text" readonly="readonly" value="I" /> |
171 | b6241d87 | Athina Bekakou | </div>
|
172 | b6241d87 | Athina Bekakou | <div class="glyph"> |
173 | b6241d87 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="J"></div> |
174 | b6241d87 | Athina Bekakou | <input type="text" readonly="readonly" value="J" /> |
175 | b6241d87 | Athina Bekakou | </div>
|
176 | bf348d7d | Athina Bekakou | </section>
|
177 | bf348d7d | Athina Bekakou | |
178 | 199a6ea4 | Athina Bekakou | <section>
|
179 | 2c7cc4ac | Athina Bekakou | <h2>checkboxes - radiobuttons</h2> |
180 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
181 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="a"></div> |
182 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="a" /> |
183 | 199a6ea4 | Athina Bekakou | </div>
|
184 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
185 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="b"></div> |
186 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="b" /> |
187 | 199a6ea4 | Athina Bekakou | </div>
|
188 | 2c7cc4ac | Athina Bekakou | <div class="glyph"> |
189 | 2c7cc4ac | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="B"></div> |
190 | 2c7cc4ac | Athina Bekakou | <input type="text" readonly="readonly" value="B" /> |
191 | 2c7cc4ac | Athina Bekakou | </div>
|
192 | 2c7cc4ac | Athina Bekakou | <div class="glyph"> |
193 | 2c7cc4ac | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="C"></div> |
194 | 2c7cc4ac | Athina Bekakou | <input type="text" readonly="readonly" value="C" /> |
195 | 2c7cc4ac | Athina Bekakou | </div>
|
196 | 199a6ea4 | Athina Bekakou | </section>
|
197 | 199a6ea4 | Athina Bekakou | |
198 | 199a6ea4 | Athina Bekakou | <section>
|
199 | 199a6ea4 | Athina Bekakou | <h2>close - cancel - remove</h2> |
200 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
201 | b6241d87 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="D"></div> |
202 | b6241d87 | Athina Bekakou | <input type="text" readonly="readonly" value="D" /> |
203 | b6241d87 | Athina Bekakou | </div>
|
204 | b6241d87 | Athina Bekakou | <div class="glyph"> |
205 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="c"></div> |
206 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="c" /> |
207 | 199a6ea4 | Athina Bekakou | </div>
|
208 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
209 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="m"></div> |
210 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="m" /> |
211 | 199a6ea4 | Athina Bekakou | </div>
|
212 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
213 | bf348d7d | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="n"></div> |
214 | bf348d7d | Athina Bekakou | <input type="text" readonly="readonly" value="n" /> |
215 | bf348d7d | Athina Bekakou | </div>
|
216 | bf348d7d | Athina Bekakou | <div class="glyph"> |
217 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="d"></div> |
218 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="d" /> |
219 | 199a6ea4 | Athina Bekakou | </div>
|
220 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
221 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="e"></div> |
222 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="e" /> |
223 | 199a6ea4 | Athina Bekakou | </div>
|
224 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
225 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="f"></div> |
226 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="f" /> |
227 | 199a6ea4 | Athina Bekakou | </div>
|
228 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
229 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="i"></div> |
230 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="i" /> |
231 | 199a6ea4 | Athina Bekakou | </div>
|
232 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
233 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="j"></div> |
234 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="j" /> |
235 | 199a6ea4 | Athina Bekakou | </div>
|
236 | 199a6ea4 | Athina Bekakou | </section>
|
237 | 199a6ea4 | Athina Bekakou | |
238 | 199a6ea4 | Athina Bekakou | <section>
|
239 | 199a6ea4 | Athina Bekakou | <h2>ok - confirm</h2> |
240 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
241 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="l"></div> |
242 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="l" /> |
243 | 199a6ea4 | Athina Bekakou | </div>
|
244 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
245 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="k"></div> |
246 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="k" /> |
247 | 199a6ea4 | Athina Bekakou | </div>
|
248 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
249 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="h"></div> |
250 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="h" /> |
251 | 199a6ea4 | Athina Bekakou | </div>
|
252 | 199a6ea4 | Athina Bekakou | </section>
|
253 | 199a6ea4 | Athina Bekakou | |
254 | 199a6ea4 | Athina Bekakou | <section>
|
255 | 199a6ea4 | Athina Bekakou | <h2>edit</h2> |
256 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
257 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="o"></div> |
258 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="o" /> |
259 | 199a6ea4 | Athina Bekakou | </div>
|
260 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
261 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="p"></div> |
262 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="p" /> |
263 | 199a6ea4 | Athina Bekakou | </div>
|
264 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
265 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="q"></div> |
266 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="q" /> |
267 | 199a6ea4 | Athina Bekakou | </div>
|
268 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
269 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="r"></div> |
270 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="r" /> |
271 | 199a6ea4 | Athina Bekakou | </div>
|
272 | 199a6ea4 | Athina Bekakou | </section>
|
273 | 199a6ea4 | Athina Bekakou | |
274 | 199a6ea4 | Athina Bekakou | <section>
|
275 | 199a6ea4 | Athina Bekakou | <h2>twitter</h2> |
276 | 199a6ea4 | Athina Bekakou | <div class="glyph"> |
277 | 199a6ea4 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="g"></div> |
278 | 199a6ea4 | Athina Bekakou | <input type="text" readonly="readonly" value="g" /> |
279 | 199a6ea4 | Athina Bekakou | </div>
|
280 | 199a6ea4 | Athina Bekakou | </section>
|
281 | 00ab5afc | Athina Bekakou | |
282 | 00ab5afc | Athina Bekakou | <section>
|
283 | 92df6d32 | Athina Bekakou | <h2>show - preview - view type</h2> |
284 | 00ab5afc | Athina Bekakou | <div class="glyph"> |
285 | 00ab5afc | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="A"></div> |
286 | 00ab5afc | Athina Bekakou | <input type="text" readonly="readonly" value="A" /> |
287 | 92df6d32 | Athina Bekakou | </div>
|
288 | 92df6d32 | Athina Bekakou | <div class="glyph"> |
289 | 92df6d32 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="Q"></div> |
290 | 92df6d32 | Athina Bekakou | <input type="text" readonly="readonly" value="Q" /> |
291 | 92df6d32 | Athina Bekakou | </div>
|
292 | 92df6d32 | Athina Bekakou | <div class="glyph"> |
293 | 92df6d32 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="R"></div> |
294 | 92df6d32 | Athina Bekakou | <input type="text" readonly="readonly" value="R" /> |
295 | 00ab5afc | Athina Bekakou | </div>
|
296 | 00ab5afc | Athina Bekakou | </section>
|
297 | bb6007e0 | Athina Bekakou | |
298 | bb6007e0 | Athina Bekakou | <section>
|
299 | bb6007e0 | Athina Bekakou | <h2>arrows</h2> |
300 | bb6007e0 | Athina Bekakou | <div class="glyph"> |
301 | bb6007e0 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="L"></div> |
302 | bb6007e0 | Athina Bekakou | <input type="text" readonly="readonly" value="L" /> |
303 | bb6007e0 | Athina Bekakou | </div>
|
304 | bb6007e0 | Athina Bekakou | <div class="glyph"> |
305 | bb6007e0 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="M"></div> |
306 | bb6007e0 | Athina Bekakou | <input type="text" readonly="readonly" value="M" /> |
307 | bb6007e0 | Athina Bekakou | </div>
|
308 | 9ac09101 | Athina Bekakou | <div class="glyph"> |
309 | bb6007e0 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="N"></div> |
310 | bb6007e0 | Athina Bekakou | <input type="text" readonly="readonly" value="N" /> |
311 | bb6007e0 | Athina Bekakou | </div>
|
312 | bb6007e0 | Athina Bekakou | <div class="glyph"> |
313 | bb6007e0 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="O"></div> |
314 | bb6007e0 | Athina Bekakou | <input type="text" readonly="readonly" value="O" /> |
315 | 9ac09101 | Athina Bekakou | </div>
|
316 | ca5bff12 | Athina Bekakou | </section>
|
317 | 92df6d32 | Athina Bekakou | <section>
|
318 | 92df6d32 | Athina Bekakou | <h2>search</h2> |
319 | 92df6d32 | Athina Bekakou | <div class="glyph"> |
320 | 92df6d32 | Athina Bekakou | <div class="fs1" aria-hidden="true" data-icon="P"></div> |
321 | 92df6d32 | Athina Bekakou | <input type="text" readonly="readonly" value="P" /> |
322 | 92df6d32 | Athina Bekakou | </div>
|
323 | 92df6d32 | Athina Bekakou | </section>
|
324 | 199a6ea4 | Athina Bekakou | |
325 | bb6007e0 | Athina Bekakou | </section>
|
326 | bb6007e0 | Athina Bekakou | |
327 | 199a6ea4 | Athina Bekakou | <div class="clear"></div> |
328 | ca5bff12 | Athina Bekakou | <section class="mtm clearfix"> |
329 | 199a6ea4 | Athina Bekakou | <header>
|
330 | 199a6ea4 | Athina Bekakou | <h1>Class Names</h1> |
331 | 199a6ea4 | Athina Bekakou | </header>
|
332 | 199a6ea4 | Athina Bekakou | <span class="box1 general"> |
333 | 2c7cc4ac | Athina Bekakou | <span aria-hidden="true" class=""></span> |
334 | 199a6ea4 | Athina Bekakou | snf-font
|
335 | 199a6ea4 | Athina Bekakou | </span>
|
336 | 199a6ea4 | Athina Bekakou | |
337 | 199a6ea4 | Athina Bekakou | <span class="box1 general"> |
338 | bf348d7d | Athina Bekakou | <span aria-hidden="true" class="snf-custom-checkbox"></span> |
339 | 199a6ea4 | Athina Bekakou | snf-custom-checkbox
|
340 | 199a6ea4 | Athina Bekakou | </span>
|
341 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
342 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-checkbox-checked"></span> |
343 | 199a6ea4 | Athina Bekakou | snf-checkbox-checked
|
344 | 199a6ea4 | Athina Bekakou | </span>
|
345 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
346 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-checkbox-unchecked"></span> |
347 | 199a6ea4 | Athina Bekakou | snf-checkbox-unchecked
|
348 | bf348d7d | Athina Bekakou | </span><span class="box1"> |
349 | bf348d7d | Athina Bekakou | <span aria-hidden="true" class="snf-icon-compute-outline"></span> |
350 | bf348d7d | Athina Bekakou | snf-icon-compute-outline
|
351 | bf348d7d | Athina Bekakou | </span>
|
352 | bf348d7d | Athina Bekakou | <span class="box1"> |
353 | bf348d7d | Athina Bekakou | <span aria-hidden="true" class="snf-icon-networks-fill"></span> |
354 | bf348d7d | Athina Bekakou | snf-icon-networks-fill
|
355 | 199a6ea4 | Athina Bekakou | </span>
|
356 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
357 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-twitter-off-black"></span> |
358 | 199a6ea4 | Athina Bekakou | snf-twitter-off-black
|
359 | 199a6ea4 | Athina Bekakou | </span>
|
360 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
361 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-cancel-circled"></span> |
362 | 199a6ea4 | Athina Bekakou | snf-cancel-circled
|
363 | 199a6ea4 | Athina Bekakou | </span>
|
364 | 199a6ea4 | Athina Bekakou | |
365 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
366 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-cancel-circled2"></span> |
367 | 199a6ea4 | Athina Bekakou | snf-cancel-circled2
|
368 | 199a6ea4 | Athina Bekakou | </span>
|
369 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
370 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-cancel-circled-outline"></span> |
371 | 199a6ea4 | Athina Bekakou | snf-cancel-circled-outline
|
372 | 199a6ea4 | Athina Bekakou | </span>
|
373 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
374 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-cancel-outline"></span> |
375 | 199a6ea4 | Athina Bekakou | snf-cancel-outline
|
376 | 199a6ea4 | Athina Bekakou | </span>
|
377 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
378 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-ok"></span> |
379 | 199a6ea4 | Athina Bekakou | snf-ok
|
380 | 199a6ea4 | Athina Bekakou | </span>
|
381 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
382 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-remove"></span> |
383 | 199a6ea4 | Athina Bekakou | snf-remove
|
384 | 199a6ea4 | Athina Bekakou | </span>
|
385 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
386 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-ban-circle"></span> |
387 | 199a6ea4 | Athina Bekakou | snf-ban-circle
|
388 | 199a6ea4 | Athina Bekakou | </span>
|
389 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
390 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-ok-circle"></span> |
391 | 199a6ea4 | Athina Bekakou | snf-ok-circle
|
392 | 199a6ea4 | Athina Bekakou | </span>
|
393 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
394 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-ok-sign"></span> |
395 | 199a6ea4 | Athina Bekakou | snf-ok-sign
|
396 | 199a6ea4 | Athina Bekakou | </span>
|
397 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
398 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-remove-sign"></span> |
399 | 199a6ea4 | Athina Bekakou | snf-remove-sign
|
400 | 199a6ea4 | Athina Bekakou | </span>
|
401 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
402 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-minus-sign"></span> |
403 | 199a6ea4 | Athina Bekakou | snf-minus-sign
|
404 | 199a6ea4 | Athina Bekakou | </span>
|
405 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
406 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-pencil"></span> |
407 | 199a6ea4 | Athina Bekakou | snf-pencil
|
408 | 199a6ea4 | Athina Bekakou | </span>
|
409 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
410 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-edit"></span> |
411 | 199a6ea4 | Athina Bekakou | snf-edit
|
412 | 199a6ea4 | Athina Bekakou | </span>
|
413 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
414 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-edit-1"></span> |
415 | 199a6ea4 | Athina Bekakou | snf-edit-1
|
416 | 199a6ea4 | Athina Bekakou | </span>
|
417 | 199a6ea4 | Athina Bekakou | <span class="box1"> |
418 | 199a6ea4 | Athina Bekakou | <span aria-hidden="true" class="snf-pencil-circled"></span> |
419 | 199a6ea4 | Athina Bekakou | snf-pencil-circled
|
420 | 199a6ea4 | Athina Bekakou | </span>
|
421 | ca5bff12 | Athina Bekakou | <span class="box1"> |
422 | ca5bff12 | Athina Bekakou | <span aria-hidden="true" class="snf-HDD"></span> |
423 | ca5bff12 | Athina Bekakou | snf-HDD
|
424 | ca5bff12 | Athina Bekakou | </span>
|
425 | ca5bff12 | Athina Bekakou | <span class="box1"> |
426 | ca5bff12 | Athina Bekakou | <span aria-hidden="true" class="snf-network"></span> |
427 | ca5bff12 | Athina Bekakou | snf-network
|
428 | ca5bff12 | Athina Bekakou | </span>
|
429 | ca5bff12 | Athina Bekakou | <span class="box1"> |
430 | ca5bff12 | Athina Bekakou | <span aria-hidden="true" class="snf-PC"></span> |
431 | ca5bff12 | Athina Bekakou | snf-PC
|
432 | ca5bff12 | Athina Bekakou | </span>
|
433 | ca5bff12 | Athina Bekakou | <span class="box1"> |
434 | ca5bff12 | Athina Bekakou | <span aria-hidden="true" class="snf-PC_fill"></span> |
435 | ca5bff12 | Athina Bekakou | snf-PC_fill
|
436 | ca5bff12 | Athina Bekakou | </span>
|
437 | ca5bff12 | Athina Bekakou | <span class="box1"> |
438 | ca5bff12 | Athina Bekakou | <span aria-hidden="true" class="snf-Pithos"></span> |
439 | ca5bff12 | Athina Bekakou | snf-Pithos
|
440 | ca5bff12 | Athina Bekakou | </span>
|
441 | ca5bff12 | Athina Bekakou | <span class="box1"> |
442 | ca5bff12 | Athina Bekakou | <span aria-hidden="true" class="snf-DASHboard"></span> |
443 | ca5bff12 | Athina Bekakou | snf-DASHboard
|
444 | ca5bff12 | Athina Bekakou | </span>
|
445 | 00ab5afc | Athina Bekakou | <span class="box1"> |
446 | 00ab5afc | Athina Bekakou | <span aria-hidden="true" class="snf-eye"></span> |
447 | 00ab5afc | Athina Bekakou | snf-eye
|
448 | 00ab5afc | Athina Bekakou | </span>
|
449 | 2c7cc4ac | Athina Bekakou | <span class="box1"> |
450 | 2c7cc4ac | Athina Bekakou | <span aria-hidden="true" class="snf-radio-checked"></span> |
451 | 2c7cc4ac | Athina Bekakou | snf-radio-checked
|
452 | 2c7cc4ac | Athina Bekakou | </span>
|
453 | 2c7cc4ac | Athina Bekakou | <span class="box1"> |
454 | 2c7cc4ac | Athina Bekakou | <span aria-hidden="true" class="snf-radio-unchecked"></span> |
455 | 2c7cc4ac | Athina Bekakou | snf-radio-unchecked
|
456 | 2c7cc4ac | Athina Bekakou | </span>
|
457 | 2c7cc4ac | Athina Bekakou | |
458 | b6241d87 | Athina Bekakou | <span class="box1"> |
459 | b6241d87 | Athina Bekakou | <span aria-hidden="true" class="snf-close"></span> |
460 | b6241d87 | Athina Bekakou | snf-close
|
461 | b6241d87 | Athina Bekakou | </span>
|
462 | b6241d87 | Athina Bekakou | <span class="box1"> |
463 | b6241d87 | Athina Bekakou | <span aria-hidden="true" class="snf-cpu"></span> |
464 | b6241d87 | Athina Bekakou | snf-cpu
|
465 | b6241d87 | Athina Bekakou | </span>
|
466 | b6241d87 | Athina Bekakou | <span class="box1"> |
467 | b6241d87 | Athina Bekakou | <span aria-hidden="true" class="snf-lock_closed"></span> |
468 | b6241d87 | Athina Bekakou | snf-lock_closed
|
469 | b6241d87 | Athina Bekakou | </span>
|
470 | b6241d87 | Athina Bekakou | <span class="box1"> |
471 | b6241d87 | Athina Bekakou | <span aria-hidden="true" class="snf-lock_open"></span> |
472 | b6241d87 | Athina Bekakou | snf-lock_open
|
473 | b6241d87 | Athina Bekakou | </span>
|
474 | b6241d87 | Athina Bekakou | <span class="box1"> |
475 | b6241d87 | Athina Bekakou | <span aria-hidden="true" class="snf-modem"></span> |
476 | b6241d87 | Athina Bekakou | snf-modem
|
477 | b6241d87 | Athina Bekakou | </span>
|
478 | b6241d87 | Athina Bekakou | <span class="box1"> |
479 | b6241d87 | Athina Bekakou | <span aria-hidden="true" class="snf-www"></span> |
480 | b6241d87 | Athina Bekakou | snf-www
|
481 | b6241d87 | Athina Bekakou | </span>
|
482 | b6241d87 | Athina Bekakou | <span class="box1"> |
483 | b6241d87 | Athina Bekakou | <span aria-hidden="true" class="snf-ram"></span> |
484 | b6241d87 | Athina Bekakou | snf-ram
|
485 | b6241d87 | Athina Bekakou | </span>
|
486 | bb6007e0 | Athina Bekakou | <span class="box1"> |
487 | 0ced28b6 | Athina Bekakou | <span aria-hidden="true" class="snf-network_full"></span> |
488 | 0ced28b6 | Athina Bekakou | snf-network_full
|
489 | 0ced28b6 | Athina Bekakou | </span>
|
490 | bb6007e0 | Athina Bekakou | <span class="box1"> |
491 | bb6007e0 | Athina Bekakou | <span aria-hidden="true" class="snf-arrow-up"></span> |
492 | bb6007e0 | Athina Bekakou | snf-arrow-up
|
493 | bb6007e0 | Athina Bekakou | </span>
|
494 | bb6007e0 | Athina Bekakou | <span class="box1"> |
495 | bb6007e0 | Athina Bekakou | <span aria-hidden="true" class="snf-arrow-down"></span> |
496 | bb6007e0 | Athina Bekakou | snf-arrow-down
|
497 | bb6007e0 | Athina Bekakou | </span>
|
498 | bb6007e0 | Athina Bekakou | <span class="box1"> |
499 | bb6007e0 | Athina Bekakou | <span aria-hidden="true" class="snf-arrow-up-2"></span> |
500 | bb6007e0 | Athina Bekakou | snf-arrow-up-2
|
501 | bb6007e0 | Athina Bekakou | </span>
|
502 | bb6007e0 | Athina Bekakou | <span class="box1"> |
503 | bb6007e0 | Athina Bekakou | <span aria-hidden="true" class="snf-arrow-down-2"></span> |
504 | bb6007e0 | Athina Bekakou | snf-arrow-down-2
|
505 | 9ac09101 | Athina Bekakou | </span>
|
506 | 92df6d32 | Athina Bekakou | <span class="box1"> |
507 | 92df6d32 | Athina Bekakou | <span aria-hidden="true" class="snf-search"></span> |
508 | 92df6d32 | Athina Bekakou | snf-search
|
509 | 92df6d32 | Athina Bekakou | </span>
|
510 | 92df6d32 | Athina Bekakou | <span class="box1"> |
511 | 92df6d32 | Athina Bekakou | <span aria-hidden="true" class="snf-list"></span> |
512 | 92df6d32 | Athina Bekakou | snf-list
|
513 | 92df6d32 | Athina Bekakou | </span>
|
514 | 92df6d32 | Athina Bekakou | <span class="box1"> |
515 | 92df6d32 | Athina Bekakou | <span aria-hidden="true" class="snf-layout"></span> |
516 | 92df6d32 | Athina Bekakou | snf-layout
|
517 | 92df6d32 | Athina Bekakou | </span>
|
518 | 199a6ea4 | Athina Bekakou | </section>
|
519 | 199a6ea4 | Athina Bekakou | <header>
|
520 | 199a6ea4 | Athina Bekakou | <h1>Usage Example</h1> |
521 | 199a6ea4 | Athina Bekakou | </header>
|
522 | 199a6ea4 | Athina Bekakou | <section>
|
523 | 8db75456 | Athina Bekakou | <li><code> |
524 | 8db75456 | Athina Bekakou | <span class="snf-eye"></span> => <span class="snf-eye"></span> (this is now in use) |
525 | 8db75456 | Athina Bekakou | </code></li> |
526 | 8db75456 | Athina Bekakou | <li><code> |
527 | 199a6ea4 | Athina Bekakou | <span class="snf-font">o</span> => <span class="snf-font">o</span> |
528 | 8db75456 | Athina Bekakou | </code><br> |
529 | 8db75456 | Athina Bekakou | Remember! It is case-sensitive: <code>
|
530 | 199a6ea4 | Athina Bekakou | <span class="snf-font">O</span> => <span class="snf-font">O</span></code> (this is capital "O" with different style) |
531 | 8db75456 | Athina Bekakou | </li>
|
532 | 199a6ea4 | Athina Bekakou | </section>
|
533 | 199a6ea4 | Athina Bekakou | <header>
|
534 | 199a6ea4 | Athina Bekakou | <h1> Missing Icons from snf-font (or not final yet)</h1> |
535 | 199a6ea4 | Athina Bekakou | </header>
|
536 | 199a6ea4 | Athina Bekakou | <section>
|
537 | 199a6ea4 | Athina Bekakou | <ul>
|
538 | 2c7cc4ac | Athina Bekakou | <li class="box1">pithos icon <span class="note">(final?)</span ></li> |
539 | 2c7cc4ac | Athina Bekakou | <li class="box1">disk icon <span class="note">(final?)</span ></li> |
540 | 2c7cc4ac | Athina Bekakou | <li class="box1">vm icon outline <span class="note">(final?)</span ></li> |
541 | 2c7cc4ac | Athina Bekakou | <li class="box1">network icon outline <span class="note">(final?)</span ></li> |
542 | 199a6ea4 | Athina Bekakou | <li class="box1">keys? icon</li> |
543 | 199a6ea4 | Athina Bekakou | <li class="box1">ips icon</li> |
544 | 199a6ea4 | Athina Bekakou | <li class="box1">folder icon</li> |
545 | 199a6ea4 | Athina Bekakou | <li class="box1">pdf icon</li> |
546 | 199a6ea4 | Athina Bekakou | <li class="box1">txt icon</li> |
547 | 199a6ea4 | Athina Bekakou | <li class="box1">xls icon</li> |
548 | 199a6ea4 | Athina Bekakou | <li class="box1">doc icon</li> |
549 | 199a6ea4 | Athina Bekakou | <li class="box1">audio file icon</li> |
550 | 199a6ea4 | Athina Bekakou | <li class="box1">video file icon</li> |
551 | 199a6ea4 | Athina Bekakou | <li class="box1">image icon</li> |
552 | 199a6ea4 | Athina Bekakou | <li class="box1">trash icon</li> |
553 | 199a6ea4 | Athina Bekakou | <li class="box1">download icon</li> |
554 | 199a6ea4 | Athina Bekakou | <li class="box1">delete icon</li> |
555 | 199a6ea4 | Athina Bekakou | <li class="box1">move? icon</li> |
556 | 199a6ea4 | Athina Bekakou | <li class="box1">get link? icon</li> |
557 | 2c7cc4ac | Athina Bekakou | <li class="box1">preview icon <span class="note">(final?)</span ></li> |
558 | b6241d87 | Athina Bekakou | <li class="box1">edit icon <span class="note">(not final)</span></li> |
559 | 199a6ea4 | Athina Bekakou | <li class="box1">cancel edit icon <span class="note">(not final)</span></li> |
560 | 199a6ea4 | Athina Bekakou | </ul>
|
561 | 199a6ea4 | Athina Bekakou | </section>
|
562 | ca5bff12 | Athina Bekakou | </div>
|
563 | 199a6ea4 | Athina Bekakou | </body>
|
564 | 199a6ea4 | Athina Bekakou | </html> |