Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (8.3 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
						span {
208
							margin-right: 6px;
209
							width: 14px;
210
							display: inline-block;
211
							&.snf-folder-move-outline {
212
								font-size: 1.5em;
213
								position: relative;
214
								top: -2px;
215
							}
216
						}
217
					}
218
				}
219
			}
220
			&.more {
221
				li {
222
					a {
223
						span {
224
							font-size: 1.5em;
225
						}
226
					}
227
				}
228
			}
229
		}
230
	}
231
	.items-list {
232
		overflow:hidden;
233
		& >li {
234
			&.selected {
235
				background-color: $light-bg;
236
			}
237
			@extend .clearfix;
238
			height:auto;
239
			width:100%;
240
			padding:15px 15px 15px $lt-bar-width;
241
			background-image: none;
242
			&:hover{
243
				background-color:lighten($primary-color,30%);
244
			}
245
			.check {
246
				width:$check-w;
247
				height: $list-icon-height;
248
				line-height: $list-icon-height;
249
				text-align: center;
250
				float:left;
251
				&:hover {
252
					cursor: pointer;
253
					color:$link-color-hover;
254
				}
255
			}
256
			.img-wrap {
257
				width:$img-wrap-w;
258
				float:left;
259
				text-align: center;
260
				height: $list-icon-height;
261
				top: -6px;
262
				.os {
263
					@include sprite('../images/os-unknown.png', 14px, 14px);
264
					background-size:100%;
265
					position: absolute;
266
					display: block;
267
					text-align: center;
268
					// line-height:18px;
269
					left:50%;
270
					margin-left: -7px;
271
					top: 6px;
272
				}
273
				.snf-font {
274
					font-size: $list-icon-height;
275
					line-height: 120%;
276
				}
277
			}
278
			h4 {
279
				width:$h4-w;
280
				overflow: hidden;
281
				float:left;
282
				text-align: left;
283
				height:18px;
284
				margin: 0;
285
				color: inherit;
286
			}
287
			.tags {
288
				float:left;
289
				width:$tags-w;
290
				height:$list-icon-height;
291
				line-height: $list-icon-height;
292
				a {
293
					vertical-align: text-top;
294
				}
295
			}
296
			.size, .remove {
297
				float:left;
298
				width:$tags-w;
299
				height:$list-icon-height;
300
				line-height: $list-icon-height;
301
				font-size: emCalc(12px);
302
				text-align: left;
303
			}
304
			.status {
305
				position: absolute;
306
				left: $img-wrap-w+$check-w + $lt-bar-width;
307
				text-align: left;
308
				top:30px;
309
				width:$h4-w;
310
				span {
311
					display: inline;
312
				}
313
			}
314
			.info, .progress-col {
315
				float: left;
316
				width: $info-w;
317
				height:$list-icon-height;
318
				line-height: $list-icon-height;
319
				font-size: emCalc(12px);
320
			}
321
			.actions {
322
				float: left;
323
				height:$list-icon-height;
324
				line-height: $list-icon-height;
325
				position: relative;
326
				top:-4px;
327
				margin:0 10px;
328
				a {
329
					&:first-child {
330
						margin-right:5px;
331
					}
332
				}
333
			}
334
			.actions-col, .remove {
335
				visibility: hidden;
336
				height:$list-icon-height;
337
				line-height: $list-icon-height;
338
				text-align: left;
339
				width: $actions-w;
340
				float: left;
341
				a {
342
					margin-right: 10px;
343
				}
344
			}
345
			&.add-new {
346
				&:hover {
347
					background: $link-color;
348
				}
349
				.check {
350
					visibility: hidden;
351
				}
352
				h4 {
353
					// height:auto;
354
					// line-height: $bar-height;
355
					margin:0;
356
				}
357
				.img-wrap {
358
					.symbol {
359
						font-size:24px;
360
					}
361
				}
362
			}
363
			&.building {
364
				.img-wrap {
365
					.incomplete {
366
						width:$list-icon-height;
367
						margin:0 auto;
368
					}
369
					.complete {
370
						top:-$list-icon-height;
371
						margin:0 auto;
372
					}
373
				}
374
			}
375
		}
376
	}
377
}
378

    
379
.lt-bar {
380
	.items-list {
381
		.check, .actions, .info {
382
			display: none;
383
		}
384
		&> li {
385
			background: url(../images/dashed_atom-x.png) repeat-x center bottom;
386
			padding: 40px;
387
			height: auto;
388
			&:hover {
389
				background-color: $light-bg;
390
			}
391
			&.add-new {
392
				background-color: $link-color-hover;
393
				&:hover {
394
					background-color: $link-color;
395
				}
396
			}
397
		}
398
		.container {
399
				height:160px;
400
				position: relative;
401
				line-height:120%;
402
				.tags {
403
					width: 100%;
404
					min-height: 12px;
405
					position: absolute;
406
					bottom: 12px;
407
				}
408
			}
409
	}
410
}
411

    
412

    
413
/* img-wrap div ( colors & styles ) */
414

    
415
.img-wrap {
416
	width: 60px;
417
	position: relative;
418
	// overflow: hidden;
419
	display: inline-block;
420
	line-height: 100%;
421
	span {
422
		&:hover {
423
			cursor: pointer;
424
		}
425
	}
426
	.os {
427
		@include sprite('../images/os-unknown.png', 22px, 22px);
428
		position: absolute;
429
		top: 8px;
430
		left:50%;
431
		margin-left:-11px;
432
		&.windows { background-image:url('../images/os-windows.png'); }
433
		&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
434
		&.fedora { background-image:url('../images/os-fedora.png'); }
435
		&.symbol {
436
			position: relative;
437
			top: -50px;
438
			left: 0;
439
			margin-left: 0;
440
			width: auto;
441
			height: auto;
442
			// top: 10px;
443
		}
444
	}
445
}
446

    
447
.running {
448
	@include stateColor($vm-active-color);
449
}
450
.off {
451
	@include stateColor($vm-off-color);
452
}
453
.error {
454
	@include stateColor($vm-error-color);
455
}
456
.shutting {
457
	@include stateColor($vm-shutting-color);
458
}
459
.starting {
460
	@include stateColor($vm-starting-color);
461
}
462
.rebooting {
463
	@include stateColor($vm-rebooting-color);
464
}
465

    
466
.building {
467
	@include stateColor($vm-active-color);
468
}
469

    
470
.building {
471
	.img-wrap {
472
		.snf-pc-full {
473
			display: block;
474
			// overflow: hidden;
475
		}
476
		.incomplete {
477
			color: $vm-building-color;
478
			width:60px;
479
		}
480
		.complete {
481
			width: 0%;
482
			position: absolute;
483
			top: 0;
484
			overflow: hidden;
485
		}
486
	}
487
}