Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (8.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
        </section>
169

    
170
        <section>
171
                <h2>checkboxes - radiobuttons</h2>
172
                <div class="glyph">
173
                        <div class="fs1" aria-hidden="true" data-icon="a"></div>
174
                        <input type="text" readonly="readonly" value="snf-checkbox-unchecked [a]" />
175
                </div>
176
                <div class="glyph">
177
                        <div class="fs1" aria-hidden="true" data-icon="b"></div>
178
                        <input type="text" readonly="readonly" value="snf-checkbox-checked [b]" />
179
                </div>
180
                <div class="glyph">
181
                        <div class="fs1" aria-hidden="true" data-icon="C"></div>
182
                        <input type="text" readonly="readonly" value="snf-radio-unchecked [C]" />
183
                </div>
184
                <div class="glyph">
185
                        <div class="fs1" aria-hidden="true" data-icon="B"></div>
186
                        <input type="text" readonly="readonly" value="snf-radio-checked [B]" />
187
                </div>
188
        </section>
189
        
190
        <section>
191
                <h2>close - cancel - remove</h2>
192
                <div class="glyph">
193
                        <div class="fs1" aria-hidden="true" data-icon="D"></div>
194
                        <input type="text" readonly="readonly" value="snf-close [D]" />
195
                </div>        
196
                <div class="glyph">
197
                        <div class="fs1" aria-hidden="true" data-icon="c"></div>
198
                        <input type="text" readonly="readonly" value="snf-cancel-circled [c]" />
199
                </div>
200
                <div class="glyph">
201
                        <div class="fs1" aria-hidden="true" data-icon="n"></div>
202
                        <input type="text" readonly="readonly" value="snf-minus-sign [n]" />
203
                </div>
204
                <div class="glyph">
205
                <div class="fs1" aria-hidden="true" data-icon="j"></div>
206
                <input type="text" readonly="readonly" value="snf-ban-circle [j]" />
207
                </div>
208
        </section>
209
        
210
        <section>
211
                <h2>ok - confirm</h2>
212
                <div class="glyph">
213
                        <div class="fs1" aria-hidden="true" data-icon="l"></div>
214
                        <input type="text" readonly="readonly" value="snf-ok-sign [l]" />
215
                </div>
216
                <div class="glyph">
217
                        <div class="fs1" aria-hidden="true" data-icon="h"></div>
218
                        <input type="text" readonly="readonly" value="snf-ok [h]" />
219
                </div>
220
        </section>
221
        
222
        <section>
223
                <h2>edit</h2>
224
                <div class="glyph">
225
                        <div class="fs1" aria-hidden="true" data-icon="q"></div>
226
                        <input type="text" readonly="readonly" value="snf-edit-1 [q]" />
227
                </div>
228
        </section>
229
                
230
        <section>
231
                <h2>twitter</h2>
232
                <div class="glyph">
233
                        <div class="fs1" aria-hidden="true" data-icon="g"></div>
234
                        <input type="text" readonly="readonly" value="snf-twitter-off-black [g]" />
235
                </div>        
236
        </section>
237

    
238
        <section>
239
                <h2>show - preview - view type</h2>
240
                <div class="glyph">
241
                        <div class="fs1" aria-hidden="true" data-icon="A"></div>
242
                        <input type="text" readonly="readonly" value="snf-eye [A]" />
243
                </div>
244
                <div class="glyph">
245
                        <div class="fs1" aria-hidden="true" data-icon="Q"></div>
246
                        <input type="text" readonly="readonly" value="snf-layout [Q]" />
247
                </div>        
248
                <div class="glyph">
249
                        <div class="fs1" aria-hidden="true" data-icon="R"></div>
250
                        <input type="text" readonly="readonly" value="snf-list [R]" />
251
                </div>        
252
        </section>
253

    
254
        <section>
255
                <h2>arrows</h2>
256
                <div class="glyph">
257
                        <div class="fs1" aria-hidden="true" data-icon="L"></div>
258
                        <input type="text" readonly="readonly" value="snf-arrow-up [L]" />
259
                </div>
260
                <div class="glyph">
261
                        <div class="fs1" aria-hidden="true" data-icon="M"></div>
262
                        <input type="text" readonly="readonly" value="snf-arrow-down [M]" />
263
                </div>
264
        </section>
265
                <section>
266
                <h2>search</h2>
267
                <div class="glyph">
268
                        <div class="fs1" aria-hidden="true" data-icon="P"></div>
269
                        <input type="text" readonly="readonly" value="snf-search [P]" />
270
                </div>        
271
        </section>
272

    
273
</section>
274
<header>
275
                <h1> Missing Icons from snf-font (or not final yet)</h1>
276
</header>
277
<section>
278
        <ul>
279
                <li class="box1">pithos icon <span class="note">(final?)</span ></li>
280
                <li class="box1">disk icon <span class="note">(final?)</span ></li>
281
                <li class="box1">vm icon outline <span class="note">(final?)</span ></li>
282
                <li class="box1">network icon outline <span class="note">(final?)</span ></li>
283
                <li class="box1">keys? icon</li>
284
                <li class="box1">ips icon</li>
285
                <li class="box1">folder icon</li>
286
                <li class="box1">pdf icon</li>
287
                <li class="box1">txt icon</li>
288
                <li class="box1">xls icon</li>
289
                <li class="box1">doc icon</li>
290
                <li class="box1">audio file icon</li>
291
                <li class="box1">video file icon</li>
292
                <li class="box1">image icon</li>
293
                <li class="box1">trash icon</li>
294
                <li class="box1">download icon</li>
295
                <li class="box1">delete icon</li>
296
                <li class="box1">move? icon</li>
297
                <li class="box1">get link? icon</li>
298
                <li class="box1">preview icon <span class="note">(final?)</span ></li>
299
                                        <li  class="box1">edit icon <span class="note">(not final)</span></li>
300
                <li class="box1">cancel edit icon <span class="note">(not final)</span></li>
301
        </ul>
302
</section>
303
</div>        
304
</body>
305
</html>