Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _connected.scss @ 1b2adfd1

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
				.snf-font {
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 - 3px;
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
	margin-left: -1px;
153
	.img-wrap {
154
		position: relative;
155
		display: block;
156
		width:$lt-width/2;
157
		height: 2px;
158
		background: url(../images/dashed_atom-x.png) repeat-x left top;
159
		&>a {
160
			display:  block;
161
			position: absolute;
162
			left:0;
163
			top:0;
164
			width: $lt-width;
165
			text-align: center;
166
			margin: -20px 0 0 ;
167
			.snf-font{
168
				color: $link-color;
169
				font-size: $snf-font-size-medium;
170
			}
171
			.snf-network-full {
172
				position: relative;
173
				top: -9px;
174
			}
175
			&:hover {
176
				span {
177
					color: $link-color-hover;
178
				}
179
			}
180
		}
181
	}
182
	p {
183
		position: absolute;
184
		left: $lt-width;
185
		width: $data-width;
186
		text-align: left;
187
		font-size: emCalc(14px);
188
		top: 90px;
189
	}
190
	&.network p {
191
		top: 90px;
192
	}
193
	&.disk p {
194
		top: 94px;
195
	}
196

    
197
}
198

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

    
203

    
204

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

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

    
248
}