Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (4.4 kB)

1
/* List view for VMs, networks  */
2

    
3
.items-list {
4
	@include block-grid(2, 0, true);
5
	@media #{$small} {
6
		@include block-grid(4, 0, true);
7
	};
8
	background:url(../images/dashed_atom.png) repeat-y left center;
9
	&>li {
10
		text-align:center;
11
		padding:20px;
12
		position: relative;
13
		list-style:none;
14
		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
15
		height: 215px;
16
				.img-wrap {
17
			// height: 78px;
18
			// margin: 0 60px;
19
			text-align: center;
20
		}
21
		.img {
22
			margin-bottom: 16px;
23
			position: relative;
24
			height:58px;
25
			display: inline-block;
26
		}
27
		.container {
28
			&.set-bg {	background:lighten($primary-color,38%); }
29
			&.set-border {	border-color:$secondary-color; }
30
			height:160px;
31
			border:1px solid transparent;
32
			margin: 16px 20px 20px;
33
			position: relative;
34
			line-height:120%;
35
			.tags {
36
				width: 100%;
37
				min-height: 12px;
38
				position: absolute;
39
				bottom: 6px;
40
				// margin-top: 16px;
41
			}
42
			.status {
43
				font-size: 12px;
44
				text-align: center;
45
				a {
46
					color: $secondary-color;
47
					
48
				}
49
				span {
50
					color: $secondary-color;
51
					display: block;
52
				}
53
			}
54
		}
55
		.more {
56
			$col-height: 200px;
57
			display: none;
58
			// height:180px;
59
			background: #fff;
60
			margin: -30px;
61
			height: 100%;
62
			z-index:101;
63
			position: relative;
64
			@include clearfix;
65
			-moz-box-shadow: -5px 5px 5px #ccc;
66
			-webkit-box-shadow: -5px 5px 5px #ccc;
67
			box-shadow: -5px 5px 5px #ccc;
68
			.col {
69
				width: 50%;
70
				float: left;
71
				font-size: emCalc(14px);
72
				height: $col-height;
73
				ul {
74
					margin: 0;
75
					padding: 0;
76
					list-style: none outside none;
77
					li {
78
						padding: 0;
79
						text-align: left;
80
						a {
81
							color: $body-font-color;
82
							display: block;
83
							width:100%;
84
							&:hover {
85
								background-color: $secondary-color;
86
								color:  #fff;
87
							}
88
						}
89
					}
90
				}
91
				&.lt {
92
					ul {
93
						padding-top:10px;
94
						li {
95
							a {
96
								padding: 5px 5px 5px 30px;
97
							}
98
						}
99
					}
100
				}
101
				&.rt {
102
					ul {
103
						li {
104
							height: $col-height/2;
105
							a {
106
								height: 100%;
107
								padding: 5px 5px 5px 30px;
108
								line-height: $col-height/2;
109
							}
110
						}
111
					}
112
				}
113
			}
114
			.vm-name {
115
				background:url(../images/dashed_atom-x.png) repeat-x center top;
116
				padding: 10px;
117
				font-size: emCalc(10px);
118
			}
119
		}
120
		.check {
121
			position:absolute;
122
			right:10px;
123
			top:5px;
124

    
125
			color:lighten($primary-color,35%);
126
			font-weight: bold;
127
			font-size:emCalc(27px);
128
			cursor: pointer;
129
			z-index: 10;
130
			span { position:relative; z-index:10;}
131
			&.active {
132
				color:$secondary-color;
133
			}
134
		}
135
		.visible-info {
136
			text-align: center;
137
			font-size: 12px;
138
			position:relative;
139
			color:$primary-color;
140
			overflow: hidden;
141
			margin-bottom: 4px;
142
			span {
143
				&.title {
144
					height: 3em;
145
					overflow: hidden;
146
				}
147
				display: block;
148
				position: relative;
149
				em {
150
					font-style:normal;
151
					position: relative;
152
				}
153
			}
154
		}
155
		&[data-status="add-new"] {
156
			background-color: $secondary-color;
157
			-webkit-transition: background-color 300ms linear;
158
			-moz-transition: background-color 300ms linear;
159
			-o-transition: background-color 300ms linear;
160
			-ms-transition: background-color 300ms linear;
161
			transition: background-color 300ms linear;
162
			.container {
163
				.img-wrap {
164
					.img {
165
						a {
166
							span:first-child {
167
								color: white;
168

    
169
							}
170
							.symbol {
171
								background-image: none;
172
								color: $secondary-color;
173
								font-size: 30px;
174
								text-indent: 0;
175
							}
176
						}
177
					}
178
				}
179
				.visible-info a{
180
					color: white;
181
				}
182
			}
183
			&:hover {
184
			background-color: white;
185
			-webkit-transition: background-color 300ms linear;
186
			-moz-transition: background-color 300ms linear;
187
			-o-transition: background-color 300ms linear;
188
			-ms-transition: background-color 300ms linear;
189
			transition: background-color 300ms linear;
190
			.container {
191
				.img-wrap {
192
					.img {
193
						a {
194
							span:first-child {
195
								color: $secondary-color;
196
								-webkit-transition: color 300ms linear;
197
								-moz-transition: color 300ms linear;
198
								-o-transition: color 300ms linear;
199
								-ms-transition: color 300ms linear;
200
								transition: color 300ms linear;
201
							}
202
							.symbol {
203
								color: white;
204
							}
205
						}
206
					}
207
				}
208
				.visible-info a{
209
					color: $secondary-color;
210
				}
211
			}
212
			}
213
		}
214
	}
215
	&.list-view {
216
		li {
217
			width:100%;
218
		}
219
	}
220
}
221

    
222
@media #{$entities-large} {
223
	.entities {
224
		.items-list {
225
			&.list-view	{
226
				li {
227
					width:100%;
228
				}
229
			}
230
		}
231
	} 
232
}