Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (8 kB)

1
/* List view for VMs, networks  */
2

    
3
.entities {
4
	position:relative;
5
}
6

    
7
.items-list {
8
	&>li {
9
		text-align:center;
10
		position: relative;
11
		list-style: none;
12
		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
13
		height: 215px;
14
		.status {
15
			font-size: emCalc(12px);
16
			line-height:140%;
17
			span {
18
				display: block;
19
			}
20
		}
21
		.more {
22
			$col-height: 200px;
23
			display: none;
24
			background: #fff;
25
			left:-10px;
26
			top: -10px;
27
			z-index:101;
28
			position: absolute;
29
			@include clearfix;
30
			@include box-shadow(0 0 10px #ccc);
31
			.col {
32
				width: 50%;
33
				float: left;
34
				font-size: emCalc(14px);
35
				height: $col-height;
36
				ul {
37
					margin: 0;
38
					padding: 0;
39
					list-style: none outside none;
40
					li {
41
						padding: 0;
42
						text-align: left;
43
						padding: 5px 5px 5px 30px;
44
						a {
45
							display: block;
46
							width:100%;
47
						}
48
					}
49
				}
50
				&.lt {
51
					ul {
52
						padding-top:10px;
53
					}
54
				}
55
				&.rt {
56
					ul {
57
						li {
58
							height: $col-height/2;
59
							padding:0 30px 0 0 ;
60
							text-align: right;
61
							a {
62
								height: 100%;
63
								line-height: $col-height/2;
64
								span {
65
									margin-right: 8px;
66
									position: relative;
67
									top: 1px;
68
								}
69
							}
70
						}
71
					}
72
				}
73
			}
74
			.name {
75
				background:url(../images/dashed_atom-x.png) repeat-x center top;
76
				padding: 10px;
77
				font-size: emCalc(10px);
78
			}
79
		}
80
		h4 {
81
			font-size: emCalc(12px);
82
			// overflow: hidden;
83
			margin-bottom: 4px;
84
			height: 32px;
85
			font-weight: normal;
86
		}
87
		&.add-new {
88
			background-color: $link-color-hover;
89
			@include transition(background-color, 300ms, linear);
90
			.container {
91
				.img-wrap {
92
					span.snf-font {
93
						color: white;
94
					}
95
					.symbol {
96
						background-image: none;
97
						color: $link-color-hover;
98
						font-size: 30px;
99
						text-indent: 0;
100
					}
101
				}
102
				h4 {
103
					color: white;
104
				}
105
			}
106
			&:hover {
107
				background-color: $link-color;
108
				@include transition(background-color, 300ms, linear);
109
				cursor: pointer;
110
				.container {
111
					.img-wrap {
112
						.symbol {
113
							color: $link-color;
114
						}
115
					}
116
				}
117
			}
118
		}
119
	}
120
}
121

    
122
.grid-view {
123
	.lt-bar {
124
		display: none;
125
	}
126
	.items-list {
127
		@include block-grid(2, 0, true);
128
		padding-left:1px;
129
		@media #{$small} {
130
			@include block-grid(4, 0, true);
131
			padding-left:1px;
132
		};
133
		background:url(../images/dashed_atom.png) repeat-y left center;
134

    
135
		&>li {
136
			height:215px;
137
			.check, .info, .actions {
138
				display: none;
139
			}
140
			.img-wrap {
141
				margin-bottom: 6px;
142
				height:$grid-icon-height;
143
				.snf-font {
144
					font-size: $grid-icon-height;
145
					// line-height: 120%;
146
				}
147
			}
148
			.container {
149
				height:160px;
150
				margin: 40px 20px 20px;
151
				position: relative;
152
				line-height:120%;
153
				.tags {
154
					width: 100%;
155
					min-height: 12px;
156
					position: absolute;
157
					bottom: 12px;
158
				}
159
			}
160
		}
161
	}
162
}
163
.list-view, .storage-progress {
164
	.btn5 {
165
		display: none;
166
	}
167
	.lt-bar {
168
		@include ltbar;
169
		ul {
170
			list-style: none outside none;
171
			font-size:emCalc(12px);
172
			li  {
173
				list-style: none outside none;
174
				padding:12px 0 ;
175
				&.select {
176
					span {
177
						font-size: 16px;
178
						margin-right: 5px;
179
						position: relative;
180
						top: 2px;
181
					}
182
					em {
183
						display: none;
184
						font-style: normal;
185
					}
186
					&:hover {
187
						color: $link-color-hover;
188
						cursor: pointer;
189
					}
190
				}
191
			}
192
			&.lt-actions {
193
				li {
194
					a {
195
						color:$inactive-color;
196
						&:hover {
197
							color:$inactive-color;
198
							cursor:default;
199
						}
200
						&.active {
201
							color:$link-color;
202
							&:hover {
203
								color:$link-color-hover;
204
								cursor: pointer;
205
							}
206
						}
207
					}
208
				}
209
			}
210
		}
211
	}
212
	.items-list {
213
		overflow:hidden;
214
		& >li {
215
			&.selected {
216
				background-color: $light-bg;
217
			}
218
			@extend .clearfix;
219
			height:auto;
220
			width:100%;
221
			padding:15px 15px 15px $lt-bar-width;
222
			background-image: none;
223
			&:hover{
224
				background-color:lighten($primary-color,30%);
225
			}
226
			.check {
227
				width:$check-w;
228
				height: $list-icon-height;
229
				line-height: $list-icon-height;
230
				text-align: center;
231
				float:left;
232
				&:hover {
233
					cursor: pointer;
234
					color:$link-color-hover;
235
				}
236
			}
237
			.img-wrap {
238
				width:$img-wrap-w;
239
				float:left;
240
				text-align: center;
241
				height: $list-icon-height;
242
				top: -6px;
243
				.os {
244
					@include sprite('../images/os-unknown.png', 14px, 14px);
245
					background-size:100%;
246
					position: absolute;
247
					display: block;
248
					text-align: center;
249
					// line-height:18px;
250
					left:50%;
251
					margin-left: -7px;
252
					top: 6px;
253
				}
254
				.snf-font {
255
					font-size: $list-icon-height;
256
					line-height: 120%;
257
				}
258
			}
259
			h4 {
260
				width:$h4-w;
261
				overflow: hidden;
262
				float:left;
263
				text-align: left;
264
				height:18px;
265
				margin: 0;
266
				color: inherit;
267
			}
268
			.tags {
269
				float:left;
270
				width:$tags-w;
271
				height:$list-icon-height;
272
				line-height: $list-icon-height;
273
				a {
274
					vertical-align: text-top;
275
				}
276
			}
277
			.size, .remove {
278
				float:left;
279
				width:$tags-w;
280
				height:$list-icon-height;
281
				line-height: $list-icon-height;
282
				font-size: emCalc(12px);
283
			}
284
			.status {
285
				position: absolute;
286
				left: $img-wrap-w+$check-w + $lt-bar-width;
287
				text-align: left;
288
				top:30px;
289
				width:$h4-w;
290
				span {
291
					display: inline;
292
				}
293
			}
294
			.info, .progress-col {
295
				float: left;
296
				width: $info-w;
297
				height:$list-icon-height;
298
				line-height: $list-icon-height;
299
				font-size: emCalc(12px);
300
			}
301
			.actions {
302
				float: left;
303
				height:$list-icon-height;
304
				line-height: $list-icon-height;
305
				position: relative;
306
				top:-4px;
307
				margin:0 10px;
308
				a {
309
					&:first-child {
310
						margin-right:5px;
311
					}
312
				}
313
			}
314
			.actions-col, .remove {
315
				visibility: hidden;
316
				height:$list-icon-height;
317
				line-height: $list-icon-height;
318
				text-align: left;
319
				width: $actions-w;
320
				float: left;
321
				a {
322
					margin-right: 10px;
323
				}
324
			}
325
			&.add-new {
326
				&:hover {
327
					background: $link-color;
328
				}
329
				.check {
330
					visibility: hidden;
331
				}
332
				h4 {
333
					// height:auto;
334
					// line-height: $bar-height;
335
					margin:0;
336
				}
337
				.img-wrap {
338
					.symbol {
339
						font-size:24px;
340
					}
341
				}
342
			}
343
			&.building {
344
				.img-wrap {
345
					.incomplete {
346
						width:$list-icon-height;
347
						margin:0 auto;
348
					}
349
					.complete {
350
						top:-$list-icon-height;
351
						margin:0 auto;
352
					}
353
				}
354
			}
355
		}
356
	}
357
}
358

    
359
.lt-bar {
360
	.items-list {
361
		.check, .actions, .info {
362
			display: none;
363
		}
364
		&> li {
365
			background: url(../images/dashed_atom-x.png) repeat-x center bottom;
366
			padding: 40px;
367
			height: auto;
368
			&:hover {
369
				background-color: $light-bg;
370
			}
371
			&.add-new {
372
				background-color: $link-color-hover;
373
				&:hover {
374
					background-color: $link-color;
375
				}
376
			}
377
		}
378
		.container {
379
				height:160px;
380
				position: relative;
381
				line-height:120%;
382
				.tags {
383
					width: 100%;
384
					min-height: 12px;
385
					position: absolute;
386
					bottom: 12px;
387
				}
388
			}
389
	}
390
}
391

    
392

    
393
/* img-wrap div ( colors & styles ) */
394

    
395
.img-wrap {
396
	width: 60px;
397
	position: relative;
398
	// overflow: hidden;
399
	display: inline-block;
400
	line-height: 100%;
401
	span {
402
		&:hover {
403
			cursor: pointer;
404
		}
405
	}
406
	.os {
407
		@include sprite('../images/os-unknown.png', 22px, 22px);
408
		position: absolute;
409
		top: 8px;
410
		left:50%;
411
		margin-left:-11px;
412
		&.windows { background-image:url('../images/os-windows.png'); }
413
		&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
414
		&.fedora { background-image:url('../images/os-fedora.png'); }
415
		&.symbol {
416
			position: relative;
417
			top: -50px;
418
			left: 0;
419
			margin-left: 0;
420
			width: auto;
421
			height: auto;
422
			// top: 10px;
423
		}
424
	}
425
}
426

    
427
.running {
428
	@include stateColor($vm-active-color);
429
}
430
.off {
431
	@include stateColor($vm-off-color);
432
}
433
.error {
434
	@include stateColor($vm-error-color);
435
}
436
.shutting {
437
	@include stateColor($vm-shutting-color);
438
}
439
.starting {
440
	@include stateColor($vm-starting-color);
441
}
442
.rebooting {
443
	@include stateColor($vm-rebooting-color);
444
}
445

    
446
.building {
447
	@include stateColor($vm-active-color);
448
}
449

    
450
.building {
451
	.img-wrap {
452
		.snf-pc-full {
453
			display: block;
454
			// overflow: hidden;
455
		}
456
		.incomplete {
457
			color: $vm-building-color;
458
			width:60px;
459
		}
460
		.complete {
461
			width: 0%;
462
			position: absolute;
463
			top: 0;
464
			overflow: hidden;
465
		}
466
	}
467
}