Statistics
| Branch: | Tag: | Revision:

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

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

    
165
.list-view {
166
	.btn5 {
167
		display: none;
168
	}
169
	.lt-bar {
170
		position: fixed;
171
		width: $lt-bar-width;
172
		left:50%;
173
		top:$header-height + $bar-height;
174
		padding:8px 10px;
175
		margin-left:-($row-width - 2*$main-padding-horizontal)/2;
176
		@include box-shadow(3px -2px 8px #ccc);
177
		background:#fff;
178
		ul {
179
			list-style: none outside none;
180
			font-size:emCalc(12px);
181
			li  {
182
				list-style: none outside none;
183
				padding:12px 0 ;
184
				&.select {
185
					span {
186
						font-size: 16px;
187
						margin-right: 5px;
188
						position: relative;
189
						top: 2px;
190
					}
191
					em {
192
						display: none;
193
						font-style: normal;
194
					}
195
					&:hover {
196
						color: $link-color-hover;
197
						cursor: pointer;
198
					}
199
				}
200
				a {
201
					color:$inactive-color;
202
					&:hover {
203
						color:$inactive-color;
204
						cursor:default;
205
					}
206
					&.active {
207
						color:$link-color;
208
						&:hover {
209
							color:$link-color-hover;
210
							cursor: pointer;
211
						}
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: 25%;
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:$link-color-hover;
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
				height:$list-vm-height;
275
				line-height: $list-vm-height;
276
				a {
277
					vertical-align: text-top;
278
				}
279
			}
280
			.status {
281
				position: absolute;
282
				left: $img-wrap-w+$check-w + $lt-bar-width;
283
				text-align: left;
284
				top:30px;
285
				width:$h4-w;
286
				span {
287
					display: inline;
288
				}
289
			}
290
			.info {
291
				float: left;
292
				width: $info-w;
293
				font-size: emCalc(12px);
294
			}
295
			.actions {
296
				float: left;
297
				height:$list-vm-height;
298
				line-height: $list-vm-height;
299
				position: relative;
300
				top:-4px;
301
				margin:0 10px;
302
				a {
303
					&:first-child {
304
						margin-right:5px;
305
					}
306
				}
307
			}
308
			&.add-new {
309
				&:hover {
310
					background: $link-color;
311
				}
312
				.check {
313
					visibility: hidden;
314
				}
315
				h4 {
316
					height:auto;
317
					line-height: $bar-height;
318
					margin:0;
319
				}
320
				.img-wrap {
321
					.symbol {
322
						font-size:24px;
323
					}
324
				}
325
			}
326
			&.building {
327
				.img-wrap {
328
					.incomplete {
329
						width:$list-vm-height;
330
						margin:0 auto;
331
					}
332
					.complete {
333
						top:-$list-vm-height;
334
						margin:0 auto;
335
					}
336
				}
337
			}
338
		}
339
	}
340
}