Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (9.5 kB)

1
<!doctype html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
<title>snf-font-1</title>
7
<link rel="stylesheet" href="stylesheets/font_custom.css" />
8
<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
9
<style>
10
        section, header, footer {display: block; overflow: hidden;}
11
        body {
12
                font-family: sans-serif;
13
                color: #444;
14
                line-height: 1.5;
15
                font-size: 1em;
16
        }
17
        * {
18
                -moz-box-sizing: border-box;
19
                -webkit-box-sizing: border-box;
20
                box-sizing: border-box;
21
                margin: 0;
22
                padding: 0;
23
        }
24
        .glyph {
25
                font-size: 14px;
26
                float: left;
27
                text-align: center;
28
                background: #eee;
29
                padding: .75em;
30
                margin: .75em 1.5em .75em 1px;
31
                width: 16.5em;
32
                border-radius: .25em;
33
                box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
34
        }
35
        .glyph input {
36
                font-family: consolas, monospace;
37
                font-size: 13px;
38
                width: 100%;
39
                text-align: center;
40
                border: 0;
41
                box-shadow: 0 0 0 1px #ccc;
42
                padding: .125em;
43
        }
44
        .w-main {
45
                width: 80%;
46
        }
47
        .centered {
48
                margin-left: auto;
49
                margin-right: auto;
50
        }
51
        .fs1 {
52
                font-size: 2em;
53
                color: rgb(71, 176, 233);
54
        }
55
        header {
56
                margin: 2em 0;
57
                padding-bottom: .5em;
58
                color: #666;
59
                box-shadow: 0 2px #eee;
60
        }
61
        header h1 {
62
                font-size: 2em;
63
                font-weight: normal;
64
        }
65
        .clearfix:before, .clearfix:after { content: ""; display: table; }
66
        .clearfix:after, .clear { clear: both; }
67
        footer {
68
                margin-top: 2em;
69
                padding: .5em 0;
70
                box-shadow: 0 -2px #eee;
71
        }
72
        a, a:visited {
73
                color: #B35047;
74
                text-decoration: none;
75
        }
76
        a:hover, a:focus {color: #000;}
77
        .box1 {
78
                font-size: 14px;
79
                display: inline-block;
80
                width: 15em;
81
                padding: .25em .5em;
82
                background: #eee;
83
                margin: .5em 1em .5em 0;
84
        }
85
        .general {
86
                font-weight: bold;
87
        }
88
        h1, h2 {
89
                color: #666;
90
                font-weight: normal;
91
        }
92

    
93
        .note {
94
                font-style: italic;
95
        }
96

    
97
        section ul {
98
                list-style-type:circle;
99
                margin: 18px;
100
        }
101
        li {
102
                font-size: 14px;
103
        }
104
</style>
105
</head>
106
<body>
107
        <div class="w-main centered">
108
        <section class="mtm clearfix" >
109
        <header>
110
                <h1>Icons included in snf-font-1</h1>
111
                                
112
        </header>
113

    
114
        <section>
115
                <h2>snf icons</h2>
116
                <div class="glyph">
117
                        <div class="fs1" aria-hidden="true" data-icon="v"></div>
118
                        <input type="text" readonly="readonly" value="snf-network [v]" />
119
                </div>
120
                <div class="glyph">
121
                        <div class="fs1" aria-hidden="true" data-icon="K"></div>
122
                        <input type="text" readonly="readonly" value="snf-network_full [K]" />
123
                </div>
124
                <div class="glyph">
125
                        <div class="fs1" aria-hidden="true" data-icon="w"></div>
126
                        <input type="text" readonly="readonly" value="snf-PC [w]" />
127
                </div>
128
                <div class="glyph">
129
                        <div class="fs1" aria-hidden="true" data-icon="x"></div>
130
                        <input type="text" readonly="readonly" value="snf-PC_fill [x]" />
131
                </div>
132
                <div class="glyph">
133
                        <div class="fs1" aria-hidden="true" data-icon="u"></div>
134
                        <input type="text" readonly="readonly" value="snf-HDD [u]" />
135
                </div>
136
                <div class="glyph">
137
                        <div class="fs1" aria-hidden="true" data-icon="y"></div>
138
                        <input type="text" readonly="readonly" value="snf-Pithos [y]" />
139
                </div>
140
                <div class="glyph">
141
                        <div class="fs1" aria-hidden="true" data-icon="z"></div>
142
                        <input type="text" readonly="readonly" value="snf-DASHboard [z]" />
143
                </div>
144
                <div class="glyph">
145
                        <div class="fs1" aria-hidden="true" data-icon="E"></div>
146
                        <input type="text" readonly="readonly" value="snf-cpu [E]" />
147
                </div>
148
                <div class="glyph">
149
                        <div class="fs1" aria-hidden="true" data-icon="F"></div>
150
                        <input type="text" readonly="readonly" value="snf-lock_closed [F]" />
151
                </div>        
152
                <div class="glyph">
153
                        <div class="fs1" aria-hidden="true" data-icon="G"></div>
154
                        <input type="text" readonly="readonly" value="snf-lock_open [G]" />
155
                </div>        
156
                <div class="glyph">
157
                        <div class="fs1" aria-hidden="true" data-icon="H"></div>
158
                        <input type="text" readonly="readonly" value="snf-modem [H]" />
159
                </div>        
160
                <div class="glyph">
161
                        <div class="fs1" aria-hidden="true" data-icon="I"></div>
162
                        <input type="text" readonly="readonly" value="snf-www [I]" />
163
                </div>        
164
                <div class="glyph">
165
                        <div class="fs1" aria-hidden="true" data-icon="J"></div>
166
                        <input type="text" readonly="readonly" value="snf-ram [J]" />
167
                </div>
168
                <div class="glyph">
169
                        <div class="fs1" aria-hidden="true" data-icon="e"></div>
170
                        <input type="text" readonly="readonly" value="snf-snapshot [e]" />
171
                </div>
172
                <div class="glyph">
173
                        <div class="fs1" aria-hidden="true" data-icon="f"></div>
174
                        <input type="text" readonly="readonly" value="snf-images [f]" />
175
                </div>
176
                <div class="glyph">
177
                        <div class="fs1" aria-hidden="true" data-icon="m"></div>
178
                        <input type="text" readonly="readonly" value="snf-plus [m]" />
179
                </div>        
180
        </section>
181

    
182
        <section>
183
                <h2>checkboxes - radiobuttons</h2>
184
                <div class="glyph">
185
                        <div class="fs1" aria-hidden="true" data-icon="a"></div>
186
                        <input type="text" readonly="readonly" value="snf-checkbox-unchecked [a]" />
187
                </div>
188
                <div class="glyph">
189
                        <div class="fs1" aria-hidden="true" data-icon="b"></div>
190
                        <input type="text" readonly="readonly" value="snf-checkbox-checked [b]" />
191
                </div>
192
                <div class="glyph">
193
                        <div class="fs1" aria-hidden="true" data-icon="C"></div>
194
                        <input type="text" readonly="readonly" value="snf-radio-unchecked [C]" />
195
                </div>
196
                <div class="glyph">
197
                        <div class="fs1" aria-hidden="true" data-icon="B"></div>
198
                        <input type="text" readonly="readonly" value="snf-radio-checked [B]" />
199
                </div>
200
        </section>
201
        
202
        <section>
203
                <h2>close - cancel - remove</h2>
204
                <div class="glyph">
205
                        <div class="fs1" aria-hidden="true" data-icon="D"></div>
206
                        <input type="text" readonly="readonly" value="snf-close [D]" />
207
                </div>        
208
                <div class="glyph">
209
                        <div class="fs1" aria-hidden="true" data-icon="c"></div>
210
                        <input type="text" readonly="readonly" value="snf-cancel-circled [c]" />
211
                </div>
212
                <div class="glyph">
213
                        <div class="fs1" aria-hidden="true" data-icon="n"></div>
214
                        <input type="text" readonly="readonly" value="snf-minus-sign [n]" />
215
                </div>
216
                <div class="glyph">
217
                <div class="fs1" aria-hidden="true" data-icon="j"></div>
218
                <input type="text" readonly="readonly" value="snf-ban-circle [j]" />
219
                </div>
220
        </section>
221
        
222
        <section>
223
                <h2>ok - confirm</h2>
224
                <div class="glyph">
225
                        <div class="fs1" aria-hidden="true" data-icon="l"></div>
226
                        <input type="text" readonly="readonly" value="snf-ok-sign [l]" />
227
                </div>
228
                <div class="glyph">
229
                        <div class="fs1" aria-hidden="true" data-icon="h"></div>
230
                        <input type="text" readonly="readonly" value="snf-ok [h]" />
231
                </div>
232
        </section>
233
                
234
        <section>
235
                <h2>show - preview - view type</h2>
236
                <div class="glyph">
237
                        <div class="fs1" aria-hidden="true" data-icon="A"></div>
238
                        <input type="text" readonly="readonly" value="snf-eye [A]" />
239
                </div>
240
                <div class="glyph">
241
                        <div class="fs1" aria-hidden="true" data-icon="t"></div>
242
                        <input type="text" readonly="readonly" value="ssnf-gridview [t]" />
243
                </div>        
244
                <div class="glyph">
245
                        <div class="fs1" aria-hidden="true" data-icon="s"></div>
246
                        <input type="text" readonly="readonly" value="snf-listview [s]" />
247
                </div>        
248
        </section>
249

    
250
        <section>
251
                <h2>arrows</h2>
252
                <div class="glyph">
253
                        <div class="fs1" aria-hidden="true" data-icon="L"></div>
254
                        <input type="text" readonly="readonly" value="snf-arrow-up [L]" />
255
                </div>
256
                <div class="glyph">
257
                        <div class="fs1" aria-hidden="true" data-icon="M"></div>
258
                        <input type="text" readonly="readonly" value="snf-arrow-down [M]" />
259
                </div>
260
        </section>
261

    
262
        <section>
263
                <h2>misc</h2>
264
                <div class="glyph">
265
                        <div class="fs1" aria-hidden="true" data-icon="q"></div>
266
                        <input type="text" readonly="readonly" value="snf-edit-1 [q]" />
267
                </div>
268
                <div class="glyph">
269
                        <div class="fs1" aria-hidden="true" data-icon="d"></div>
270
                        <input type="text" readonly="readonly" value="snf-search [d]" />
271
                </div>
272
                <div class="glyph">
273
                        <div class="fs1" aria-hidden="true" data-icon="g"></div>
274
                        <input type="text" readonly="readonly" value="snf-twitter-off-black [g]" />
275
                </div>        
276
                <div class="glyph">
277
                        <div class="fs1" aria-hidden="true" data-icon="i"></div>
278
                        <input type="text" readonly="readonly" value="snf-switch [i]" />
279
                </div>        
280
                <div class="glyph">
281
                        <div class="fs1" aria-hidden="true" data-icon="k"></div>
282
                        <input type="text" readonly="readonly" value="snf-lightning [k]" />
283
                </div>        
284
                <div class="glyph">
285
                        <div class="fs1" aria-hidden="true" data-icon="o"></div>
286
                        <input type="text" readonly="readonly" value="snf-info_outline [o]" />
287
                </div>        
288
                <div class="glyph">
289
                        <div class="fs1" aria-hidden="true" data-icon="p"></div>
290
                        <input type="text" readonly="readonly" value="snf-info_filled [p]" />
291
                </div>        
292
        </section>
293

    
294
</section>
295
<header>
296
                <h1> Missing Icons from snf-font (or not final yet)</h1>
297
</header>
298
<section>
299
        <ul>
300
                <li class="box1">pithos icon <span class="note">(final?)</span ></li>
301
                <li class="box1">disk icon <span class="note">(final?)</span ></li>
302
                <li class="box1">vm icon outline <span class="note">(final?)</span ></li>
303
                <li class="box1">network icon outline <span class="note">(final?)</span ></li>
304
                <li class="box1">keys? icon</li>
305
                <li class="box1">ips icon</li>
306
                <li class="box1">folder icon</li>
307
                <li class="box1">pdf icon</li>
308
                <li class="box1">txt icon</li>
309
                <li class="box1">xls icon</li>
310
                <li class="box1">doc icon</li>
311
                <li class="box1">audio file icon</li>
312
                <li class="box1">video file icon</li>
313
                <li class="box1">image icon</li>
314
                <li class="box1">trash icon</li>
315
                <li class="box1">download icon</li>
316
                <li class="box1">delete icon</li>
317
                <li class="box1">move? icon</li>
318
                <li class="box1">get link? icon</li>
319
                <li class="box1">preview icon <span class="note">(final?)</span ></li>
320
                                        <li  class="box1">edit icon <span class="note">(not final)</span></li>
321
                <li class="box1">cancel edit icon <span class="note">(not final)</span></li>
322
        </ul>
323
</section>
324
</div>        
325
</body>
326
</html>