Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _connected.scss @ 73486bc5

History | View | Annotate | Download (4.4 kB)

1
/*
2
* Used for connected elements in details page.
3
* Each icon is unique and therefore, customization
4
* is needed for different entities.
5
*/
6
@mixin position-connected($x: $details-lt-width/2, $y: - $details-top-height/2) {
7
	left: $x;
8
	top: $y;
9
	padding-top: abs($y);
10
}
11

    
12
$rel-top: -10px; // how much icon and box are above green border
13
$data-width: 350px; // grey box witdth
14
$lt-width: $details-lt-width/2 + $details-top-more-padding-lt ;
15
	
16
.connected {
17
	position: relative;
18
	border-left: 2px solid $secondary-color;
19
	@include position-connected;
20
	.item {
21
		padding-top:40px;
22
		position: relative;
23
		.what {
24
			padding:10px 0 20px;
25
			@extend .clearfix;
26
			.img-wrap {
27
				width: $lt-width;
28
				text-align: center;
29
				float:left;
30
				position: relative;
31
				.font-icon {
32
					font-size: 60px;
33
				}
34
			}
35
			h4 {
36
				overflow: hidden;
37
				font-size: emCalc(16px);
38
				.status {
39
					font-weight: normal;
40
					display: block;
41
					font-size: emCalc(14px);
42
				}
43
			}
44
		}
45
		.clearfix {
46
			position: relative;
47
		}
48
		.connections {
49
			list-style: none outside none;
50
			margin: 0;
51
			padding: 0;
52
			float: left;
53
			&> li {
54
				list-style: none outside none;
55
				margin: 0;
56
				padding: 0;
57
				position: relative;
58
				margin-bottom: 10px;
59
				@extend .clearfix;
60
				.icon {
61
					width: $lt-width;
62
					text-align: center;
63
					border-top: 2px solid $secondary-color;
64
					float: left;
65
					span {
66
						position: relative;
67
						top:$rel-top;
68
						background-color: $light-bg;
69
						padding:5px 10px;
70
					}
71
				}
72
				.act {
73
					position: absolute;
74
					left:0;
75
					top:-9px;
76
					display: block;
77
					height: 20px;
78
					width:65px;
79
					background: url(../images/connected.png) no-repeat 25px center;
80
					z-index: 2;
81
					-moz-transition: none;
82
					-webkit-transition: none;
83
					transition: none;
84
					&.open {
85
						background:url(../images/disconnected.png) no-repeat 0 0 #fff;
86
						-moz-transition: none;
87
						-webkit-transition: none;
88
						transition: none;
89
					}
90
				}
91
				.data {
92
					float: left;
93
					position: relative;
94
					top: $rel-top - 5px;
95
					width: $data-width;
96
					ul {
97
						padding: 5px 0 0;
98
						margin: 0;
99
						background-color: $light-bg;
100
						li {
101
							font-size: emCalc(12px);
102
							list-style: none outside none;
103
							padding: 0 10px 10px 10px;
104
							h5 { 
105
								float: left;
106
								margin: 0;
107
								line-height: 1.3em;
108
								&.ip-data {
109
									width: 10%;
110
								}
111
								&.volume-data {
112
									width: 35%;
113
								}
114
							}
115
							p {
116
								overflow: hidden;
117
								padding-left:10px;
118
								margin: 0;
119
								line-height: 1.3em;
120
							}
121
						}
122
					}
123
				}
124
			}
125
		}
126
	}
127
	&.network {
128
		h4 {
129
			position: absolute;
130
			top: 25px;
131
			left: $lt-width;
132
		}
133
	}
134
	&.disk {
135
		h4 {
136
			position: absolute;
137
			top: 20px;
138
			left: $lt-width;
139
		}
140
	}
141
}
142

    
143
.connect-new {
144
	position: absolute;
145
	bottom: -150px;
146
	left:0;
147
	width: $lt-width;
148
	text-align: center;
149
	padding-top: 100px;
150
	background: url(../images/dashed_atom.png) repeat-y left center;
151
	margin-bottom: 50px;
152
	.img-wrap {
153
		position: relative;
154
		display: block;
155
		width:$lt-width/2;
156
		height: 2px;
157
		background: url(../images/dashed_atom-x.png) repeat-x left top;
158
		&>a {
159
			display:  block;
160
			position: absolute;
161
			left:0;
162
			top:0;
163
			width: $lt-width;
164
			text-align: center;
165
			margin: -20px 0 0 ;
166
			.font-icon{
167
				color: $link-color;
168
				font-size: $font-icon-size-medium;
169
			}
170
			.snf-network_full {
171
				position: relative;
172
				top: -9px;
173
			}
174
			&:hover {
175
				span {
176
					color: $link-color-hover;
177
				}
178
			}
179
		}
180
	}
181
	p {
182
		position: absolute;
183
		left: $lt-width;
184
		width: $data-width;
185
		text-align: left;
186
		font-size: emCalc(14px);
187
		top: 90px;
188
	}
189
	&.network p {
190
		top: 90px;
191
	}
192
	&.disk p {
193
		top: 94px;
194
	}
195

    
196
}
197

    
198
.network .connected {
199
	@include position-connected( $details-lt-width/2 - 2px , -$details-top-height/2 );
200
}
201

    
202

    
203

    
204
.firewall {
205
	float: left;
206
	margin-left:20px;
207
	border: 1px solid $primary-color;
208
	padding: 10px 20px;
209
	position: absolute;
210
	left:$data-width + $lt-width;
211
	top: $rel-top - 5px;
212
	font-size: emCalc(12px);
213
	z-index:2;
214
	p {
215
		margin: 0;
216
		em {
217
			color: $secondary-color;
218
		}
219
	}
220
	.more {
221
		margin-top:20px;
222
		display: none;
223
		p {
224
			span {
225
				float: right;
226
				font-size: emCalc(14px);
227
				height: 14px;
228
				line-height: 22px;
229
			}
230
			em {
231
				float: right;
232
				margin:0 5px 0 20px;
233
				width: 15px;
234
				display: inline-block;
235
			}
236
		}
237
	}
238
	&.unprotected >p em,
239
	.unprotected a em  { 
240
		color: $error-color;	
241
	}
242

    
243
}
244
.details .placeholder {
245
	height: 100px;
246

    
247
}