Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _connected.scss @ 97cd255d

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
				position: relative;
30
				display: block;
31
				.snf-font {
32
					font-size: 60px;
33
				}
34
			}
35
			h4 {
36
				position: absolute;
37
				top: 20px;
38
				left: $lt-width;
39
				font-size: emCalc(16px);
40
				.status {
41
					font-weight: normal;
42
					display: block;
43
					font-size: emCalc(14px);
44
				}
45
			}
46
		}
47
		.clearfix {
48
			position: relative;
49
		}
50
		.connections {
51
			list-style: none outside none;
52
			margin: 0;
53
			padding: 0;
54
			float: left;
55
			&> li {
56
				list-style: none outside none;
57
				margin: 0;
58
				padding: 0;
59
				position: relative;
60
				margin-bottom: 10px;
61
				@extend .clearfix;
62
				.icon {
63
					width: $lt-width;
64
					text-align: center;
65
					border-top: 2px solid $secondary-color;
66
					float: left;
67
					span {
68
						position: relative;
69
						top:$rel-top - 10px;
70
						background-color: $light-bg;
71
						padding:0px 10px;
72
						font-size: 30px;
73
						line-height: 120%;
74
					}
75
				}
76
				.act {
77
					position: absolute;
78
					left:0;
79
					top:-9px;
80
					display: block;
81
					height: 20px;
82
					width:65px;
83
					background: url(../images/connected.png) no-repeat 25px center;
84
					z-index: 2;
85
					-moz-transition: none;
86
					-webkit-transition: none;
87
					transition: none;
88
					&.open {
89
						background:url(../images/disconnected.png) no-repeat 0 0 #fff;
90
						-moz-transition: none;
91
						-webkit-transition: none;
92
						transition: none;
93
					}
94
				}
95
				.data {
96
					float: left;
97
					position: relative;
98
					top: $rel-top - 5px;
99
					width: $data-width;
100
					ul {
101
						padding: 5px 0 0;
102
						margin: 0;
103
						background-color: $light-bg;
104
						li {
105
							font-size: emCalc(12px);
106
							list-style: none outside none;
107
							padding: 0 10px 10px 10px;
108
							h5 { 
109
								float: left;
110
								margin: 0;
111
								line-height: 1.3em;
112
								&.ip-data {
113
									width: 10%;
114
								}
115
								&.volume-data {
116
									width: 35%;
117
								}
118
							}
119
							p {
120
								overflow: hidden;
121
								padding-left:10px;
122
								margin: 0;
123
								line-height: 1.3em;
124
							}
125
						}
126
					}
127
				}
128
			}
129
		}
130
	}
131
}
132

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

    
188
}
189

    
190
.network .connected {
191
	@include position-connected( $details-lt-width/2 - 2px , -$details-top-height/2 );
192
}
193

    
194
.firewall {
195
	float: left;
196
	margin-left:20px;
197
	border: 1px solid $primary-color;
198
	padding: 5px 20px;
199
	position: absolute;
200
	left:$data-width + $lt-width;
201
	top: $rel-top - 5px;
202
	font-size: emCalc(12px);
203
	white-space: nowrap;
204
	background-color: #fff;
205
	p {
206
		margin: 0;
207
		em {
208
			color: $secondary-color;
209
		}
210
	}
211
	.more {
212
		margin-top: 10px;
213
		display: none;
214
		p {
215
			min-width: 200px;
216
			span {
217
				float: right;
218
				font-size: emCalc(14px);
219
				height: 14px;
220
				line-height: 22px;
221
			}
222
			em {
223
				float: right;
224
				margin:0 5px 0 20px;
225
				width: 15px;
226
				display: inline-block;
227
			}
228
		}
229
	}
230
	&.unprotected >p em,
231
	.unprotected a em  { 
232
		color: $error-color;	
233
	}
234

    
235
}
236
.details .placeholder {
237
	height: 100px;
238

    
239
}