Statistics
| Branch: | Tag: | Revision:

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

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

    
386
// disable hover effect for the .containers li
387
.containers {
388
	.storage {
389
		.items-list {
390
			&>li:hover {
391
				background-color: inherit;
392
			}
393
		}
394
	}
395
}
396

    
397
// select-all for pithos view (alignment)
398
.storage {
399
	.lt-bar {
400
		.lt-actions {
401
			.select {
402
				margin-right: 4px;
403
			}
404
		}
405
	}
406
}
407

    
408
.lt-bar {
409
	.items-list {
410
		.check, .actions, .info {
411
			display: none;
412
		}
413
		&> li {
414
			background: url(../images/dashed_atom-x.png) repeat-x center bottom;
415
			padding: 40px;
416
			height: auto;
417
			&:hover {
418
				background-color: $light-bg;
419
			}
420
			&.add-new {
421
				background-color: $link-color-hover;
422
				&:hover {
423
					background-color: $link-color;
424
				}
425
			}
426
		}
427
		.container {
428
				height:160px;
429
				position: relative;
430
				line-height:120%;
431
				.tags {
432
					width: 100%;
433
					min-height: 12px;
434
					position: absolute;
435
					bottom: 12px;
436
				}
437
			}
438
	}
439
}
440

    
441

    
442
/* img-wrap div ( colors & styles ) */
443

    
444
.img-wrap {
445
	width: 60px;
446
	position: relative;
447
	// overflow: hidden;
448
	display: inline-block;
449
	line-height: 100%;
450
	.os {
451
		@include sprite('../images/os-unknown.png', 22px, 22px);
452
		position: absolute;
453
		top: 8px;
454
		left:50%;
455
		margin-left:-11px;
456
		&.windows { background-image:url('../images/os-windows.png'); }
457
		&.kubuntu { background-image:url('../images/os-kubuntu.png'); }
458
		&.fedora { background-image:url('../images/os-fedora.png'); }
459
		&.symbol {
460
			position: relative;
461
			top: -50px;
462
			left: 0;
463
			margin-left: 0;
464
			width: auto;
465
			height: auto;
466
			// top: 10px;
467
		}
468
	}
469
}
470

    
471
.running {
472
	@include stateColor($vm-active-color);
473
}
474
.off {
475
	@include stateColor($vm-off-color);
476
}
477
.error {
478
	@include stateColor($vm-error-color);
479
}
480
.shutting {
481
	@include stateColor($vm-shutting-color);
482
}
483
.starting {
484
	@include stateColor($vm-starting-color);
485
}
486
.rebooting {
487
	@include stateColor($vm-rebooting-color);
488
}
489

    
490
.building {
491
	@include stateColor($vm-active-color);
492
}
493

    
494
.building {
495
	.img-wrap {
496
		.snf-pc-full {
497
			display: block;
498
			// overflow: hidden;
499
		}
500
		.incomplete {
501
			color: $vm-building-color;
502
			width:60px;
503
		}
504
		.complete {
505
			width: 0%;
506
			position: absolute;
507
			top: 0;
508
			overflow: hidden;
509
		}
510
	}
511
}