Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (6.3 kB)

1
/* List view for VMs, networks  */
2
.entities {
3
	position:relative;
4
}
5

    
6
.grid-view {
7
	.lt-bar {
8
		display: none;
9
	}
10
	.items-list {
11
		@include block-grid(2, 0, true);
12
		padding-left:1px;
13
		@media #{$small} {
14
			@include block-grid(4, 0, true);
15
			padding-left:1px;
16
		};
17
		background:url(../images/dashed_atom.png) repeat-y left center;
18

    
19
		&>li {
20
			height:215px;
21
			.check, .info, .actions {
22
				display: none;
23
			}
24
			.img-wrap {
25
				margin-bottom: 6px;
26
				height:60px;
27
			}
28
			.container {
29
				height:160px;
30
				margin: 40px 20px 20px;
31
				position: relative;
32
				line-height:120%;
33
				.tags {
34
					width: 100%;
35
					min-height: 12px;
36
					position: absolute;
37
					bottom: 12px;
38
				}
39
			}
40
		}
41
	}
42
}
43
.items-list {
44
	&>li {
45
		text-align:center;
46
		padding:20px;
47
		position: relative;
48
		list-style:none;
49
		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
50
		height: 215px;
51
		.img-wrap {
52
			position: relative;
53
			display: inline-block;
54
			overflow: hidden;
55
		}
56
		.status {
57
			font-size: emCalc(12px);
58
			line-height:140%;
59
			a {
60
				color: $secondary-color;
61
			}
62
			span {
63
				color: $secondary-color;
64
				display: block;
65
			}
66
		}
67
		.more {
68
			$col-height: 200px;
69
			display: none;
70
			background: #fff;
71
			left:-10px;
72
			top: -10px;
73
			z-index:101;
74
			position: absolute;
75
			@include clearfix;
76
			@include box-shadow(0 0 10px #ccc);
77
			.col {
78
				width: 50%;
79
				float: left;
80
				font-size: emCalc(14px);
81
				height: $col-height;
82
				ul {
83
					margin: 0;
84
					padding: 0;
85
					list-style: none outside none;
86
					li {
87
						padding: 0;
88
						text-align: left;
89
						padding: 5px 5px 5px 30px;
90
						a {
91
							color: $body-font-color;
92
							display: block;
93
							width:100%;
94
							&:hover {
95
								color:  $secondary-color;
96
							}
97
						}
98
					}
99
				}
100
				&.lt {
101
					ul {
102
						padding-top:10px;
103
					}
104
				}
105
				&.rt {
106
					ul {
107
						li {
108
							height: $col-height/2;
109
							padding:0 0 0 30px;
110
							a {
111
								height: 100%;
112
								line-height: $col-height/2;
113
							}
114
						}
115
					}
116
				}
117
			}
118
			.name {
119
				background:url(../images/dashed_atom-x.png) repeat-x center top;
120
				padding: 10px;
121
				font-size: emCalc(10px);
122
			}
123
		}
124
		h4 {
125
			font-size: emCalc(12px);
126
			color:$body-font-color;
127
			overflow: hidden;
128
			margin-bottom: 4px;
129
			height: 32px;
130
			font-weight: normal;
131
		}
132
		&.add-new {
133
			background-color: $secondary-color;
134
			@include transition(background-color, 300ms, linear);
135
			.container {
136
				.img-wrap {
137
					span:first-child {
138
					color: white;
139
					}
140
					.symbol {
141
						background-image: none;
142
						color: $secondary-color;
143
						font-size: 30px;
144
						text-indent: 0;
145
					}
146
				}
147
				h4 {
148
					color: white;
149
				}
150
			}
151
			&:hover {
152
				background-color: $overlay-color;
153
				@include transition(background-color, 300ms, linear);
154
				cursor: pointer;
155
				.container {
156
					.img-wrap {
157
						.symbol {
158
							color: $overlay-color;
159
						}
160
					}
161
				}
162
			}
163
		}
164
	}
165
}
166

    
167
.list-view {
168
	.btn5 {
169
		display: none;
170
	}
171
	.lt-bar {
172
		position: fixed;
173
		width: $lt-bar-width;
174
		left:50%;
175
		top:$header-height + $bar-height;
176
		padding:8px 10px;
177
		margin-left:-($row-width - 2*$main-padding-horizontal)/2;
178
		@include box-shadow(3px -2px 8px #ccc);
179
		background:#fff;
180
		a {
181
			color:$overlay-color;
182
			&:hover{
183
				color:$secondary-color;
184
			}
185
		}
186
		ul {
187
			list-style: none outside none;
188
			font-size:emCalc(12px);
189
			li  {
190
				list-style: none outside none;
191
				padding:12px 0 ;
192
				&.select {
193
					span {
194
						font-size: 16px;
195
						margin-right: 5px;
196
						position: relative;
197
						top: 2px;
198
						&.snf-checkbox-checked {
199
							color:$secondary-color;
200
						}
201
					}
202
					em {
203
						display: none;
204
						font-style: normal;
205
					}
206
					&:hover {
207
						cursor: pointer;
208
					}
209
				}
210
				a {
211
					color:$primary-color;
212
					&:hover {
213
						color:$primary-color;
214
						cursor:default;
215
					}
216
					&.active {
217
						color:$body-font-color;
218
						&:hover {
219
							color:$secondary-color;
220
							cursor: pointer;
221
						}
222
					}
223
				}
224
			}
225
		}
226
	}
227
	.items-list {
228
		$check-w : 60px;
229
		$img-wrap-w : 70px;
230
		$h4-w :40%;
231
		$tags-w :8%;
232
		$info-w: 25%;
233
		overflow:hidden;
234
		& >li {
235
			@extend .clearfix;
236
			height:auto;
237
			width:100%;
238
			padding:15px 15px 15px $lt-bar-width;
239
			background-image: none;
240
			&:hover{
241
				background-color:lighten($primary-color,30%);
242
			}
243
			.check {
244
				width:$check-w;
245
				height: $list-vm-height;
246
				line-height: $list-vm-height;
247
				text-align: center;
248
				float:left;
249
				&:hover {
250
					cursor: pointer;
251
					color:$secondary-color;
252
				}
253
			}
254
			.img-wrap {
255
				width:$img-wrap-w;
256
				float:left;
257
				text-align: center;
258
				height: $list-vm-height;
259
				.os {
260
					@include sprite('../images/os-unknown.png', 16px, 16px);
261
					background-size:100%;
262
					position: absolute;
263
					display: block;
264
					text-align: center;
265
					line-height:18px;
266
					left:50%;
267
					margin-left:-8px;
268
					top:3px;
269
				}
270
				.snf-PC_fill {
271
					font-size: $list-vm-height;
272
				}
273
			}
274
			h4 {
275
				width:$h4-w
276
				;
277
				float:left;
278
				text-align: left;
279
				height:20px;
280
			}
281
			.tags {
282
				float:left;
283
				width:$tags-w;
284
				height:$list-vm-height;
285
				line-height: $list-vm-height;
286
				a {
287
					vertical-align: text-top;
288
				}
289
			}
290
			.status {
291
				position: absolute;
292
				left: $img-wrap-w+$check-w + $lt-bar-width;
293
				text-align: left;
294
				top:30px;
295
				width:$h4-w;
296
				span {
297
					display: inline;
298
				}
299
			}
300
			.info {
301
				float: left;
302
				width: $info-w;
303
				font-size: emCalc(12px);
304
				color:$overlay-color;
305
				a {
306
					color: $overlay-color;
307
					&:hover {
308
						color:$secondary-color;
309
					}
310
				}
311
			}
312
			.actions {
313
				float: left;
314
				height:$list-vm-height;
315
				line-height: $list-vm-height;
316
				position: relative;
317
				top:-4px;
318
				margin:0 10px;
319
				a {
320
					color:$secondary-color;
321
					&:hover {
322
						color:$overlay-color;
323
					}
324
					&:first-child {
325
						margin-right:5px;
326
					}
327
				}
328
			}
329
			&.add-new {
330
				&:hover {
331
					background: $overlay-color;
332
				}
333
				.check {
334
					visibility: hidden;
335
				}
336
				h4 {
337
					height:auto;
338
					line-height: $bar-height;
339
					margin:0;
340
				}
341
				.img-wrap {
342
					.symbol {
343
						font-size:24px;
344
					}
345
				}
346
			}
347
			&[data-status="building"] {
348
				.img-wrap {
349
					.incomplete {
350
						width:$list-vm-height;
351
						margin:0 auto;
352
					}
353
					.complete {
354
						top:-$list-vm-height;
355
						margin:0 auto;
356
					}
357
				}
358
			}
359
		}
360
	}
361
}
362

    
363
#temp {
364
	background:url(../images/temp.png) no-repeat left top;
365
}