Statistics
| Branch: | Tag: | Revision:

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

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

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