Statistics
| Branch: | Tag: | Revision:

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

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

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

    
353
#temp {
354
	background:url(../images/temp.png) no-repeat left top;
355
}