Statistics
| Branch: | Tag: | Revision:

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

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

    
397
// disable hover effect for the .containers li
398
.containers {
399
	.storage {
400
		.items-list {
401
			&>li:hover {
402
				background-color: inherit;
403
			}
404
		}
405
	}
406
}
407

    
408
// select-all for pithos view (alignment)
409
.storage {
410
	.lt-bar {
411
		.lt-actions {
412
			.select {
413
				margin-right: 4px;
414
			}
415
		}
416
	}
417
}
418

    
419
.lt-bar {
420
	.items-list {
421
		.check, .actions, .info {
422
			display: none;
423
		}
424
		.container {
425
			padding: 40px 0;
426
		}
427
		.side-actions {
428
			display: none;
429
		}
430
	}
431
}
432

    
433

    
434
/* img-wrap div ( colors & styles ) */
435

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

    
463
.running {
464
	@include stateColor($vm-active-color);
465
}
466
.off {
467
	@include stateColor($vm-off-color);
468
}
469
.error {
470
	@include stateColor($vm-error-color);
471
}
472
.shutting {
473
	@include stateColor($vm-shutting-color);
474
}
475
.starting {
476
	@include stateColor($vm-starting-color);
477
}
478
.rebooting {
479
	@include stateColor($vm-rebooting-color);
480
}
481

    
482
.building {
483
	@include stateColor($vm-active-color);
484
}
485

    
486
.building {
487
	.img-wrap {
488
		.snf-pc-full {
489
			display: block;
490
			// overflow: hidden;
491
		}
492
		.incomplete {
493
			color: $vm-building-color;
494
			width:60px;
495
		}
496
		.complete {
497
			width: 0%;
498
			position: absolute;
499
			top: 0;
500
			overflow: hidden;
501
		}
502
	}
503
}