Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _items-list.scss @ eda4930e

History | View | Annotate | Download (8.9 kB)

1 15948f00 Olga Brani
/* List view for VMs, networks  */
2 261ac841 Olga Brani
3 656c135b Olga Brani
.entities {
4 656c135b Olga Brani
	position:relative;
5 656c135b Olga Brani
}
6 15948f00 Olga Brani
7 656c135b Olga Brani
.items-list {
8 3fdc0d03 Olga Brani
	&>li {
9 673ea014 Olga Brani
		text-align:center;
10 dafb5cab Athina Bekakou
		position: relative;
11 261ac841 Olga Brani
		list-style: none;
12 7f44f777 Olga Brani
		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
13 dafb5cab Athina Bekakou
		height: 215px;
14 656c135b Olga Brani
		.status {
15 656c135b Olga Brani
			font-size: emCalc(12px);
16 77d5883f Olga Brani
			line-height:140%;
17 656c135b Olga Brani
			span {
18 656c135b Olga Brani
				display: block;
19 dafb5cab Athina Bekakou
			}
20 673ea014 Olga Brani
		}
21 3fdc0d03 Olga Brani
		.more {
22 3fdc0d03 Olga Brani
			$col-height: 200px;
23 fdd03619 Athina Bekakou
			display: none;
24 3fdc0d03 Olga Brani
			background: #fff;
25 31d7e532 Olga Brani
			left:-10px;
26 31d7e532 Olga Brani
			top: -10px;
27 3fdc0d03 Olga Brani
			z-index:101;
28 31d7e532 Olga Brani
			position: absolute;
29 3fdc0d03 Olga Brani
			@include clearfix;
30 656c135b Olga Brani
			@include box-shadow(0 0 10px #ccc);
31 3fdc0d03 Olga Brani
			.col {
32 fdd03619 Athina Bekakou
				width: 50%;
33 fdd03619 Athina Bekakou
				float: left;
34 3fdc0d03 Olga Brani
				font-size: emCalc(14px);
35 3fdc0d03 Olga Brani
				height: $col-height;
36 fdd03619 Athina Bekakou
				ul {
37 fdd03619 Athina Bekakou
					margin: 0;
38 3fdc0d03 Olga Brani
					padding: 0;
39 3fdc0d03 Olga Brani
					list-style: none outside none;
40 fdd03619 Athina Bekakou
					li {
41 fdd03619 Athina Bekakou
						padding: 0;
42 fdd03619 Athina Bekakou
						text-align: left;
43 4e7c16f1 Olga Brani
						padding: 5px 5px 5px 30px;
44 fdd03619 Athina Bekakou
						a {
45 3fdc0d03 Olga Brani
							display: block;
46 3fdc0d03 Olga Brani
							width:100%;
47 fdd03619 Athina Bekakou
						}
48 05205849 Athina Bekakou
					}
49 05205849 Athina Bekakou
				}
50 3fdc0d03 Olga Brani
				&.lt {
51 fdd03619 Athina Bekakou
					ul {
52 3fdc0d03 Olga Brani
						padding-top:10px;
53 fdd03619 Athina Bekakou
					}
54 fdd03619 Athina Bekakou
				}
55 3fdc0d03 Olga Brani
				&.rt {
56 fdd03619 Athina Bekakou
					ul {
57 fdd03619 Athina Bekakou
						li {
58 3fdc0d03 Olga Brani
							height: $col-height/2;
59 353b022b Olga Brani
							padding:0 30px 0 0 ;
60 353b022b Olga Brani
							text-align: right;
61 fdd03619 Athina Bekakou
							a {
62 3fdc0d03 Olga Brani
								height: 100%;
63 3fdc0d03 Olga Brani
								line-height: $col-height/2;
64 353b022b Olga Brani
								span {
65 353b022b Olga Brani
									margin-right: 8px;
66 353b022b Olga Brani
									position: relative;
67 353b022b Olga Brani
									top: 1px;
68 353b022b Olga Brani
								}
69 fdd03619 Athina Bekakou
							}
70 fdd03619 Athina Bekakou
						}
71 fdd03619 Athina Bekakou
					}
72 fdd03619 Athina Bekakou
				}
73 3fdc0d03 Olga Brani
			}
74 05e735ec Athina Bekakou
			.name {
75 3fdc0d03 Olga Brani
				background:url(../images/dashed_atom-x.png) repeat-x center top;
76 3fdc0d03 Olga Brani
				padding: 10px;
77 3fdc0d03 Olga Brani
				font-size: emCalc(10px);
78 05205849 Athina Bekakou
			}
79 05205849 Athina Bekakou
		}
80 31d7e532 Olga Brani
		h4 {
81 31d7e532 Olga Brani
			font-size: emCalc(12px);
82 91c8f399 Athina Bekakou
			// overflow: hidden;
83 dafb5cab Athina Bekakou
			margin-bottom: 4px;
84 77d5883f Olga Brani
			height: 32px;
85 31d7e532 Olga Brani
			font-weight: normal;
86 673ea014 Olga Brani
		}
87 656c135b Olga Brani
		&.add-new {
88 ceaaa3be Olga Brani
			background-color: $link-color-hover;
89 31d7e532 Olga Brani
			@include transition(background-color, 300ms, linear);
90 b4c26e76 Athina Bekakou
			.container {
91 fd47d618 Olga Brani
				.img-wrap {
92 f50cc12b Olga Brani
					span.snf-font {
93 f50cc12b Olga Brani
						color: white;
94 fd47d618 Olga Brani
					}
95 fd47d618 Olga Brani
					.symbol {
96 fd47d618 Olga Brani
						background-image: none;
97 ceaaa3be Olga Brani
						color: $link-color-hover;
98 fd47d618 Olga Brani
						font-size: 30px;
99 fd47d618 Olga Brani
						text-indent: 0;
100 fd47d618 Olga Brani
					}
101 b4c26e76 Athina Bekakou
				}
102 7e56ee5b Athina Bekakou
				h4 {
103 b4c26e76 Athina Bekakou
					color: white;
104 b4c26e76 Athina Bekakou
				}
105 b4c26e76 Athina Bekakou
			}
106 b4c26e76 Athina Bekakou
			&:hover {
107 ceaaa3be Olga Brani
				background-color: $link-color;
108 31d7e532 Olga Brani
				@include transition(background-color, 300ms, linear);
109 fd47d618 Olga Brani
				cursor: pointer;
110 31d7e532 Olga Brani
				.container {
111 fd47d618 Olga Brani
					.img-wrap {
112 fd47d618 Olga Brani
						.symbol {
113 ceaaa3be Olga Brani
							color: $link-color;
114 b4c26e76 Athina Bekakou
						}
115 31d7e532 Olga Brani
					}
116 b4c26e76 Athina Bekakou
				}
117 b4c26e76 Athina Bekakou
			}
118 b4c26e76 Athina Bekakou
		}
119 026edcbc Olga Brani
	}
120 656c135b Olga Brani
}
121 656c135b Olga Brani
122 261ac841 Olga Brani
.grid-view {
123 261ac841 Olga Brani
	.lt-bar {
124 261ac841 Olga Brani
		display: none;
125 261ac841 Olga Brani
	}
126 261ac841 Olga Brani
	.items-list {
127 261ac841 Olga Brani
		@include block-grid(2, 0, true);
128 261ac841 Olga Brani
		padding-left:1px;
129 261ac841 Olga Brani
		@media #{$small} {
130 261ac841 Olga Brani
			@include block-grid(4, 0, true);
131 261ac841 Olga Brani
			padding-left:1px;
132 261ac841 Olga Brani
		};
133 261ac841 Olga Brani
		background:url(../images/dashed_atom.png) repeat-y left center;
134 261ac841 Olga Brani
135 261ac841 Olga Brani
		&>li {
136 261ac841 Olga Brani
			height:215px;
137 261ac841 Olga Brani
			.check, .info, .actions {
138 261ac841 Olga Brani
				display: none;
139 261ac841 Olga Brani
			}
140 261ac841 Olga Brani
			.img-wrap {
141 261ac841 Olga Brani
				margin-bottom: 6px;
142 261ac841 Olga Brani
				height:$grid-icon-height;
143 261ac841 Olga Brani
				.snf-font {
144 261ac841 Olga Brani
					font-size: $grid-icon-height;
145 91c8f399 Athina Bekakou
					// line-height: 120%;
146 261ac841 Olga Brani
				}
147 261ac841 Olga Brani
			}
148 261ac841 Olga Brani
			.container {
149 0675f9af Olga Brani
				height:100%;
150 0675f9af Olga Brani
				padding: 40px 10px 20px;
151 261ac841 Olga Brani
				position: relative;
152 261ac841 Olga Brani
				line-height:120%;
153 0675f9af Olga Brani
				overflow: hidden;
154 261ac841 Olga Brani
				.tags {
155 261ac841 Olga Brani
					width: 100%;
156 261ac841 Olga Brani
					min-height: 12px;
157 261ac841 Olga Brani
					position: absolute;
158 261ac841 Olga Brani
					bottom: 12px;
159 261ac841 Olga Brani
				}
160 261ac841 Olga Brani
			}
161 261ac841 Olga Brani
		}
162 261ac841 Olga Brani
	}
163 261ac841 Olga Brani
}
164 292a32ef Olga Brani
.list-view, .storage-progress {
165 656c135b Olga Brani
	.btn5 {
166 656c135b Olga Brani
		display: none;
167 656c135b Olga Brani
	}
168 656c135b Olga Brani
	.lt-bar {
169 9a0058e2 Olga Brani
		@include ltbar;
170 656c135b Olga Brani
		ul {
171 656c135b Olga Brani
			list-style: none outside none;
172 656c135b Olga Brani
			font-size:emCalc(12px);
173 656c135b Olga Brani
			li  {
174 656c135b Olga Brani
				list-style: none outside none;
175 bffd1e41 Olga Brani
				height: $list-icon-height;
176 bffd1e41 Olga Brani
				line-height: $list-icon-height;
177 656c135b Olga Brani
				&.select {
178 86b0e0b9 Athina Bekakou
					text-transform: capitalize;
179 656c135b Olga Brani
					span {
180 656c135b Olga Brani
						font-size: 16px;
181 656c135b Olga Brani
						margin-right: 5px;
182 656c135b Olga Brani
						position: relative;
183 656c135b Olga Brani
						top: 2px;
184 656c135b Olga Brani
					}
185 656c135b Olga Brani
					em {
186 656c135b Olga Brani
						display: none;
187 656c135b Olga Brani
						font-style: normal;
188 656c135b Olga Brani
					}
189 656c135b Olga Brani
					&:hover {
190 ceaaa3be Olga Brani
						color: $link-color-hover;
191 656c135b Olga Brani
						cursor: pointer;
192 656c135b Olga Brani
					}
193 86b0e0b9 Athina Bekakou
					&.selected {
194 86b0e0b9 Athina Bekakou
							text-transform: lowercase;
195 86b0e0b9 Athina Bekakou
						em {
196 86b0e0b9 Athina Bekakou
							text-transform: capitalize;
197 86b0e0b9 Athina Bekakou
						}
198 86b0e0b9 Athina Bekakou
					}
199 656c135b Olga Brani
				}
200 f50cc12b Olga Brani
			}
201 f50cc12b Olga Brani
			&.lt-actions {
202 f50cc12b Olga Brani
				li {
203 f50cc12b Olga Brani
					a {
204 ceaaa3be Olga Brani
						color:$inactive-color;
205 4e7c16f1 Olga Brani
						&:hover {
206 f50cc12b Olga Brani
							color:$inactive-color;
207 f50cc12b Olga Brani
							cursor:default;
208 f50cc12b Olga Brani
						}
209 f50cc12b Olga Brani
						&.active {
210 f50cc12b Olga Brani
							color:$link-color;
211 f50cc12b Olga Brani
							&:hover {
212 f50cc12b Olga Brani
								color:$link-color-hover;
213 f50cc12b Olga Brani
								cursor: pointer;
214 f50cc12b Olga Brani
							}
215 4e7c16f1 Olga Brani
						}
216 f0983986 Athina Bekakou
						span {
217 f0983986 Athina Bekakou
							margin-right: 6px;
218 1fecdb52 Olga Brani
							width: 14px;
219 1fecdb52 Olga Brani
							display: inline-block;
220 f0983986 Athina Bekakou
							&.snf-folder-move-outline {
221 f0983986 Athina Bekakou
								font-size: 1.5em;
222 6bdd3dff Athina Bekakou
								position: relative;
223 4b7e9b6e Athina Bekakou
								// top: -2px;
224 f0983986 Athina Bekakou
							}
225 f0983986 Athina Bekakou
						}
226 4e7c16f1 Olga Brani
					}
227 4e7c16f1 Olga Brani
				}
228 656c135b Olga Brani
			}
229 6bdd3dff Athina Bekakou
			&.more {
230 6bdd3dff Athina Bekakou
				li {
231 6bdd3dff Athina Bekakou
					a {
232 6bdd3dff Athina Bekakou
						span {
233 6bdd3dff Athina Bekakou
							font-size: 1.5em;
234 d6d06450 Athina Bekakou
							margin-right: 2px;
235 6bdd3dff Athina Bekakou
						}
236 6bdd3dff Athina Bekakou
					}
237 6bdd3dff Athina Bekakou
				}
238 6bdd3dff Athina Bekakou
			}
239 656c135b Olga Brani
		}
240 656c135b Olga Brani
	}
241 656c135b Olga Brani
	.items-list {
242 656c135b Olga Brani
		overflow:hidden;
243 656c135b Olga Brani
		& >li {
244 292a32ef Olga Brani
			&.selected {
245 97cd255d Olga Brani
				background-color: $gray-4;
246 292a32ef Olga Brani
			}
247 656c135b Olga Brani
			@extend .clearfix;
248 656c135b Olga Brani
			height:auto;
249 026edcbc Olga Brani
			width:100%;
250 656c135b Olga Brani
			padding:15px 15px 15px $lt-bar-width;
251 656c135b Olga Brani
			background-image: none;
252 656c135b Olga Brani
			&:hover{
253 97cd255d Olga Brani
				background-color: $gray-4;
254 656c135b Olga Brani
			}
255 656c135b Olga Brani
			.check {
256 656c135b Olga Brani
				width:$check-w;
257 049fa0fe Athina Bekakou
				height: $list-icon-height;
258 049fa0fe Athina Bekakou
				line-height: $list-icon-height;
259 656c135b Olga Brani
				text-align: center;
260 656c135b Olga Brani
				float:left;
261 97cd255d Olga Brani
				padding-left: 20px;
262 656c135b Olga Brani
				&:hover {
263 656c135b Olga Brani
					cursor: pointer;
264 ceaaa3be Olga Brani
					color:$link-color-hover;
265 656c135b Olga Brani
				}
266 656c135b Olga Brani
			}
267 656c135b Olga Brani
			.img-wrap {
268 656c135b Olga Brani
				width:$img-wrap-w;
269 656c135b Olga Brani
				float:left;
270 656c135b Olga Brani
				text-align: center;
271 049fa0fe Athina Bekakou
				height: $list-icon-height;
272 656c135b Olga Brani
				.os {
273 91c8f399 Athina Bekakou
					@include sprite('../images/os-unknown.png', 14px, 14px);
274 656c135b Olga Brani
					background-size:100%;
275 656c135b Olga Brani
					position: absolute;
276 656c135b Olga Brani
					display: block;
277 656c135b Olga Brani
					text-align: center;
278 91c8f399 Athina Bekakou
					// line-height:18px;
279 656c135b Olga Brani
					left:50%;
280 91c8f399 Athina Bekakou
					margin-left: -7px;
281 91c8f399 Athina Bekakou
					top: 6px;
282 656c135b Olga Brani
				}
283 049fa0fe Athina Bekakou
				.snf-font {
284 049fa0fe Athina Bekakou
					font-size: $list-icon-height;
285 757d6c0a Athina Bekakou
					line-height: 120%;
286 656c135b Olga Brani
				}
287 656c135b Olga Brani
			}
288 656c135b Olga Brani
			h4 {
289 91c8f399 Athina Bekakou
				width:$h4-w;
290 91c8f399 Athina Bekakou
				overflow: hidden;
291 656c135b Olga Brani
				float:left;
292 656c135b Olga Brani
				text-align: left;
293 97cd255d Olga Brani
				padding-right: 20px;
294 97cd255d Olga Brani
				height: $list-icon-height;
295 97cd255d Olga Brani
				line-height: $list-icon-height;
296 f50cc12b Olga Brani
				margin: 0;
297 0ef95fe4 Olga Brani
				color: inherit;
298 97cd255d Olga Brani
				padding-right: 20px;
299 656c135b Olga Brani
			}
300 656c135b Olga Brani
			.tags {
301 656c135b Olga Brani
				float:left;
302 656c135b Olga Brani
				width:$tags-w;
303 049fa0fe Athina Bekakou
				height:$list-icon-height;
304 049fa0fe Athina Bekakou
				line-height: $list-icon-height;
305 656c135b Olga Brani
				a {
306 97cd255d Olga Brani
					vertical-align: middle;
307 656c135b Olga Brani
				}
308 656c135b Olga Brani
			}
309 0ef95fe4 Olga Brani
			.size, .remove {
310 f50cc12b Olga Brani
				float:left;
311 f50cc12b Olga Brani
				width:$tags-w;
312 f50cc12b Olga Brani
				height:$list-icon-height;
313 f50cc12b Olga Brani
				line-height: $list-icon-height;
314 f50cc12b Olga Brani
				font-size: emCalc(12px);
315 bfdaac22 Athina Bekakou
				text-align: left;
316 97cd255d Olga Brani
				padding-left: 20px;
317 f50cc12b Olga Brani
			}
318 656c135b Olga Brani
			.status {
319 656c135b Olga Brani
				position: absolute;
320 656c135b Olga Brani
				left: $img-wrap-w+$check-w + $lt-bar-width;
321 656c135b Olga Brani
				text-align: left;
322 97cd255d Olga Brani
				top:36px;
323 97cd255d Olga Brani
				font-size: 11px;
324 97cd255d Olga Brani
				line-height: 110%;
325 97cd255d Olga Brani
				width:$vm-h4-w;
326 656c135b Olga Brani
				span {
327 656c135b Olga Brani
					display: inline;
328 656c135b Olga Brani
				}
329 656c135b Olga Brani
			}
330 0ef95fe4 Olga Brani
			.info, .progress-col {
331 656c135b Olga Brani
				float: left;
332 656c135b Olga Brani
				width: $info-w;
333 97cd255d Olga Brani
				padding-right: 20px;
334 f50cc12b Olga Brani
				height:$list-icon-height;
335 f50cc12b Olga Brani
				line-height: $list-icon-height;
336 656c135b Olga Brani
				font-size: emCalc(12px);
337 656c135b Olga Brani
			}
338 4e7c16f1 Olga Brani
			.actions {
339 4e7c16f1 Olga Brani
				float: left;
340 049fa0fe Athina Bekakou
				height:$list-icon-height;
341 049fa0fe Athina Bekakou
				line-height: $list-icon-height;
342 4e7c16f1 Olga Brani
				position: relative;
343 97cd255d Olga Brani
				padding:0 10px;
344 97cd255d Olga Brani
				top: 2px;
345 4e7c16f1 Olga Brani
				a {
346 4e7c16f1 Olga Brani
					&:first-child {
347 4e7c16f1 Olga Brani
						margin-right:5px;
348 4e7c16f1 Olga Brani
					}
349 4e7c16f1 Olga Brani
				}
350 4e7c16f1 Olga Brani
			}
351 0ef95fe4 Olga Brani
			.actions-col, .remove {
352 0b14cfb4 Olga Brani
				visibility: hidden;
353 0b14cfb4 Olga Brani
				height:$list-icon-height;
354 0b14cfb4 Olga Brani
				line-height: $list-icon-height;
355 0b14cfb4 Olga Brani
				text-align: left;
356 0ef95fe4 Olga Brani
				width: $actions-w;
357 0ef95fe4 Olga Brani
				float: left;
358 0b14cfb4 Olga Brani
				a {
359 0b14cfb4 Olga Brani
					margin-right: 10px;
360 0b14cfb4 Olga Brani
				}
361 0b14cfb4 Olga Brani
			}
362 656c135b Olga Brani
			&.add-new {
363 656c135b Olga Brani
				&:hover {
364 353b022b Olga Brani
					background: $link-color;
365 656c135b Olga Brani
				}
366 656c135b Olga Brani
				.check {
367 656c135b Olga Brani
					visibility: hidden;
368 656c135b Olga Brani
				}
369 656c135b Olga Brani
				h4 {
370 656c135b Olga Brani
					margin:0;
371 656c135b Olga Brani
				}
372 4e7c16f1 Olga Brani
				.img-wrap {
373 4e7c16f1 Olga Brani
					.symbol {
374 4e7c16f1 Olga Brani
						font-size:24px;
375 4e7c16f1 Olga Brani
					}
376 4e7c16f1 Olga Brani
				}
377 656c135b Olga Brani
			}
378 ceaaa3be Olga Brani
			&.building {
379 656c135b Olga Brani
				.img-wrap {
380 656c135b Olga Brani
					.incomplete {
381 049fa0fe Athina Bekakou
						width:$list-icon-height;
382 656c135b Olga Brani
						margin:0 auto;
383 656c135b Olga Brani
					}
384 656c135b Olga Brani
					.complete {
385 049fa0fe Athina Bekakou
						top:-$list-icon-height;
386 656c135b Olga Brani
						margin:0 auto;
387 656c135b Olga Brani
					}
388 656c135b Olga Brani
				}
389 656c135b Olga Brani
			}
390 026edcbc Olga Brani
		}
391 673ea014 Olga Brani
	}
392 9a0058e2 Olga Brani
}
393 9a0058e2 Olga Brani
394 d6d06450 Athina Bekakou
// disable hover effect for the .containers li
395 d6d06450 Athina Bekakou
.containers {
396 d6d06450 Athina Bekakou
	.storage {
397 d6d06450 Athina Bekakou
		.items-list {
398 d6d06450 Athina Bekakou
			&>li:hover {
399 d6d06450 Athina Bekakou
				background-color: inherit;
400 d6d06450 Athina Bekakou
			}
401 d6d06450 Athina Bekakou
		}
402 d6d06450 Athina Bekakou
	}
403 d6d06450 Athina Bekakou
}
404 d6d06450 Athina Bekakou
405 d6d06450 Athina Bekakou
// select-all for pithos view (alignment)
406 d6d06450 Athina Bekakou
.storage {
407 d6d06450 Athina Bekakou
	.lt-bar {
408 d6d06450 Athina Bekakou
		.lt-actions {
409 d6d06450 Athina Bekakou
			.select {
410 d6d06450 Athina Bekakou
				margin-right: 4px;
411 d6d06450 Athina Bekakou
			}
412 d6d06450 Athina Bekakou
		}
413 d6d06450 Athina Bekakou
	}
414 d6d06450 Athina Bekakou
}
415 d6d06450 Athina Bekakou
416 9a0058e2 Olga Brani
.lt-bar {
417 9a0058e2 Olga Brani
	.items-list {
418 9a0058e2 Olga Brani
		.check, .actions, .info {
419 9a0058e2 Olga Brani
			display: none;
420 9a0058e2 Olga Brani
		}
421 9a0058e2 Olga Brani
		&> li {
422 9a0058e2 Olga Brani
			background: url(../images/dashed_atom-x.png) repeat-x center bottom;
423 9a0058e2 Olga Brani
			padding: 40px;
424 9a0058e2 Olga Brani
			height: auto;
425 9a0058e2 Olga Brani
			&:hover {
426 9a0058e2 Olga Brani
				background-color: $light-bg;
427 9a0058e2 Olga Brani
			}
428 6cbdc6c2 Olga Brani
			&.add-new {
429 049fa0fe Athina Bekakou
				background-color: $link-color-hover;
430 6cbdc6c2 Olga Brani
				&:hover {
431 6cbdc6c2 Olga Brani
					background-color: $link-color;
432 6cbdc6c2 Olga Brani
				}
433 6cbdc6c2 Olga Brani
			}
434 9a0058e2 Olga Brani
		}
435 9a0058e2 Olga Brani
		.container {
436 9a0058e2 Olga Brani
				height:160px;
437 9a0058e2 Olga Brani
				position: relative;
438 9a0058e2 Olga Brani
				line-height:120%;
439 9a0058e2 Olga Brani
				.tags {
440 9a0058e2 Olga Brani
					width: 100%;
441 9a0058e2 Olga Brani
					min-height: 12px;
442 9a0058e2 Olga Brani
					position: absolute;
443 9a0058e2 Olga Brani
					bottom: 12px;
444 9a0058e2 Olga Brani
				}
445 9a0058e2 Olga Brani
			}
446 9a0058e2 Olga Brani
	}
447 9a0058e2 Olga Brani
}
448 261ac841 Olga Brani
449 261ac841 Olga Brani
450 261ac841 Olga Brani
/* img-wrap div ( colors & styles ) */
451 261ac841 Olga Brani
452 261ac841 Olga Brani
.img-wrap {
453 261ac841 Olga Brani
	width: 60px;
454 261ac841 Olga Brani
	position: relative;
455 91c8f399 Athina Bekakou
	// overflow: hidden;
456 261ac841 Olga Brani
	display: inline-block;
457 261ac841 Olga Brani
	line-height: 100%;
458 261ac841 Olga Brani
	.os {
459 261ac841 Olga Brani
		@include sprite('../images/os-unknown.png', 22px, 22px);
460 261ac841 Olga Brani
		position: absolute;
461 91c8f399 Athina Bekakou
		top: 8px;
462 261ac841 Olga Brani
		left:50%;
463 261ac841 Olga Brani
		margin-left:-11px;
464 261ac841 Olga Brani
		&.windows { background-image:url('../images/os-windows.png'); }
465 261ac841 Olga Brani
		&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
466 261ac841 Olga Brani
		&.fedora { background-image:url('../images/os-fedora.png'); }
467 91c8f399 Athina Bekakou
		&.symbol {
468 91c8f399 Athina Bekakou
			position: relative;
469 91c8f399 Athina Bekakou
			top: -50px;
470 91c8f399 Athina Bekakou
			left: 0;
471 91c8f399 Athina Bekakou
			margin-left: 0;
472 91c8f399 Athina Bekakou
			width: auto;
473 91c8f399 Athina Bekakou
			height: auto;
474 91c8f399 Athina Bekakou
			// top: 10px;
475 91c8f399 Athina Bekakou
		}
476 261ac841 Olga Brani
	}
477 261ac841 Olga Brani
}
478 261ac841 Olga Brani
479 261ac841 Olga Brani
.running {
480 261ac841 Olga Brani
	@include stateColor($vm-active-color);
481 261ac841 Olga Brani
}
482 261ac841 Olga Brani
.off {
483 261ac841 Olga Brani
	@include stateColor($vm-off-color);
484 261ac841 Olga Brani
}
485 261ac841 Olga Brani
.error {
486 261ac841 Olga Brani
	@include stateColor($vm-error-color);
487 261ac841 Olga Brani
}
488 261ac841 Olga Brani
.shutting {
489 261ac841 Olga Brani
	@include stateColor($vm-shutting-color);
490 261ac841 Olga Brani
}
491 261ac841 Olga Brani
.starting {
492 261ac841 Olga Brani
	@include stateColor($vm-starting-color);
493 261ac841 Olga Brani
}
494 261ac841 Olga Brani
.rebooting {
495 261ac841 Olga Brani
	@include stateColor($vm-rebooting-color);
496 261ac841 Olga Brani
}
497 261ac841 Olga Brani
498 261ac841 Olga Brani
.building {
499 261ac841 Olga Brani
	@include stateColor($vm-active-color);
500 261ac841 Olga Brani
}
501 261ac841 Olga Brani
502 261ac841 Olga Brani
.building {
503 261ac841 Olga Brani
	.img-wrap {
504 261ac841 Olga Brani
		.snf-pc-full {
505 261ac841 Olga Brani
			display: block;
506 91c8f399 Athina Bekakou
			// overflow: hidden;
507 261ac841 Olga Brani
		}
508 261ac841 Olga Brani
		.incomplete {
509 261ac841 Olga Brani
			color: $vm-building-color;
510 261ac841 Olga Brani
			width:60px;
511 261ac841 Olga Brani
		}
512 261ac841 Olga Brani
		.complete {
513 261ac841 Olga Brani
			width: 0%;
514 91c8f399 Athina Bekakou
			position: absolute;
515 91c8f399 Athina Bekakou
			top: 0;
516 91c8f399 Athina Bekakou
			overflow: hidden;
517 261ac841 Olga Brani
		}
518 261ac841 Olga Brani
	}
519 261ac841 Olga Brani
}