root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _connected.scss @ 97cd255d
History | View | Annotate | Download (4.4 kB)
1 | 79584f69 | Olga Brani | /* |
---|---|---|---|
2 | 79584f69 | Olga Brani | * Used for connected elements in details page. |
3 | 79584f69 | Olga Brani | * Each icon is unique and therefore, customization |
4 | 79584f69 | Olga Brani | * is needed for different entities. |
5 | 79584f69 | Olga Brani | */ |
6 | 9a0058e2 | Olga Brani | @mixin position-connected($x: $details-lt-width/2, $y: - $details-top-height/2) { |
7 | 79584f69 | Olga Brani | left: $x; |
8 | 79584f69 | Olga Brani | top: $y; |
9 | 79584f69 | Olga Brani | padding-top: abs($y); |
10 | 79584f69 | Olga Brani | } |
11 | 79584f69 | Olga Brani | |
12 | 9a0058e2 | Olga Brani | $rel-top: -10px; // how much icon and box are above green border |
13 | 9a0058e2 | Olga Brani | $data-width: 350px; // grey box witdth |
14 | 79584f69 | Olga Brani | $lt-width: $details-lt-width/2 + $details-top-more-padding-lt ; |
15 | 79584f69 | Olga Brani | |
16 | 79584f69 | Olga Brani | .connected { |
17 | 79584f69 | Olga Brani | position: relative; |
18 | 79584f69 | Olga Brani | border-left: 2px solid $secondary-color; |
19 | 9a0058e2 | Olga Brani | @include position-connected; |
20 | 79584f69 | Olga Brani | .item { |
21 | 79584f69 | Olga Brani | padding-top:40px; |
22 | 79584f69 | Olga Brani | position: relative; |
23 | 79584f69 | Olga Brani | .what { |
24 | 79584f69 | Olga Brani | padding:10px 0 20px; |
25 | 79584f69 | Olga Brani | @extend .clearfix; |
26 | 79584f69 | Olga Brani | .img-wrap { |
27 | 79584f69 | Olga Brani | width: $lt-width; |
28 | 79584f69 | Olga Brani | text-align: center; |
29 | 79584f69 | Olga Brani | position: relative; |
30 | c6a0dcb2 | Olga Brani | display: block; |
31 | de9b2b51 | Athina Bekakou | .snf-font { |
32 | f0498685 | Athina Bekakou | font-size: 60px; |
33 | f0498685 | Athina Bekakou | } |
34 | 79584f69 | Olga Brani | } |
35 | 79584f69 | Olga Brani | h4 { |
36 | 4081ed61 | Olga Brani | position: absolute; |
37 | 4081ed61 | Olga Brani | top: 20px; |
38 | 4081ed61 | Olga Brani | left: $lt-width; |
39 | 79584f69 | Olga Brani | font-size: emCalc(16px); |
40 | 79584f69 | Olga Brani | .status { |
41 | 79584f69 | Olga Brani | font-weight: normal; |
42 | 79584f69 | Olga Brani | display: block; |
43 | 79584f69 | Olga Brani | font-size: emCalc(14px); |
44 | 79584f69 | Olga Brani | } |
45 | 79584f69 | Olga Brani | } |
46 | 79584f69 | Olga Brani | } |
47 | 79584f69 | Olga Brani | .clearfix { |
48 | 79584f69 | Olga Brani | position: relative; |
49 | 79584f69 | Olga Brani | } |
50 | 79584f69 | Olga Brani | .connections { |
51 | 79584f69 | Olga Brani | list-style: none outside none; |
52 | 79584f69 | Olga Brani | margin: 0; |
53 | 79584f69 | Olga Brani | padding: 0; |
54 | 79584f69 | Olga Brani | float: left; |
55 | 79584f69 | Olga Brani | &> li { |
56 | 79584f69 | Olga Brani | list-style: none outside none; |
57 | 79584f69 | Olga Brani | margin: 0; |
58 | 79584f69 | Olga Brani | padding: 0; |
59 | 79584f69 | Olga Brani | position: relative; |
60 | 79584f69 | Olga Brani | margin-bottom: 10px; |
61 | 79584f69 | Olga Brani | @extend .clearfix; |
62 | 79584f69 | Olga Brani | .icon { |
63 | 79584f69 | Olga Brani | width: $lt-width; |
64 | 79584f69 | Olga Brani | text-align: center; |
65 | 79584f69 | Olga Brani | border-top: 2px solid $secondary-color; |
66 | 79584f69 | Olga Brani | float: left; |
67 | 79584f69 | Olga Brani | span { |
68 | 79584f69 | Olga Brani | position: relative; |
69 | c264bfaa | Athina Bekakou | top:$rel-top - 10px; |
70 | 79584f69 | Olga Brani | background-color: $light-bg; |
71 | c264bfaa | Athina Bekakou | padding:0px 10px; |
72 | c264bfaa | Athina Bekakou | font-size: 30px; |
73 | c264bfaa | Athina Bekakou | line-height: 120%; |
74 | 79584f69 | Olga Brani | } |
75 | 79584f69 | Olga Brani | } |
76 | 79584f69 | Olga Brani | .act { |
77 | 79584f69 | Olga Brani | position: absolute; |
78 | 79584f69 | Olga Brani | left:0; |
79 | 9a0058e2 | Olga Brani | top:-9px; |
80 | 9a0058e2 | Olga Brani | display: block; |
81 | 9a0058e2 | Olga Brani | height: 20px; |
82 | 84e9a07d | Olga Brani | width:65px; |
83 | 84e9a07d | Olga Brani | background: url(../images/connected.png) no-repeat 25px center; |
84 | 9a0058e2 | Olga Brani | z-index: 2; |
85 | 84e9a07d | Olga Brani | -moz-transition: none; |
86 | 84e9a07d | Olga Brani | -webkit-transition: none; |
87 | 84e9a07d | Olga Brani | transition: none; |
88 | 84e9a07d | Olga Brani | &.open { |
89 | 84e9a07d | Olga Brani | background:url(../images/disconnected.png) no-repeat 0 0 #fff; |
90 | 84e9a07d | Olga Brani | -moz-transition: none; |
91 | 84e9a07d | Olga Brani | -webkit-transition: none; |
92 | 84e9a07d | Olga Brani | transition: none; |
93 | 84e9a07d | Olga Brani | } |
94 | 79584f69 | Olga Brani | } |
95 | 79584f69 | Olga Brani | .data { |
96 | 79584f69 | Olga Brani | float: left; |
97 | 79584f69 | Olga Brani | position: relative; |
98 | 79584f69 | Olga Brani | top: $rel-top - 5px; |
99 | 79584f69 | Olga Brani | width: $data-width; |
100 | 79584f69 | Olga Brani | ul { |
101 | 79584f69 | Olga Brani | padding: 5px 0 0; |
102 | 79584f69 | Olga Brani | margin: 0; |
103 | 79584f69 | Olga Brani | background-color: $light-bg; |
104 | 79584f69 | Olga Brani | li { |
105 | 79584f69 | Olga Brani | font-size: emCalc(12px); |
106 | 79584f69 | Olga Brani | list-style: none outside none; |
107 | 79584f69 | Olga Brani | padding: 0 10px 10px 10px; |
108 | 79584f69 | Olga Brani | h5 { |
109 | 79584f69 | Olga Brani | float: left; |
110 | 79584f69 | Olga Brani | margin: 0; |
111 | 79584f69 | Olga Brani | line-height: 1.3em; |
112 | f0498685 | Athina Bekakou | &.ip-data { |
113 | f0498685 | Athina Bekakou | width: 10%; |
114 | f0498685 | Athina Bekakou | } |
115 | f0498685 | Athina Bekakou | &.volume-data { |
116 | f0498685 | Athina Bekakou | width: 35%; |
117 | f0498685 | Athina Bekakou | } |
118 | 79584f69 | Olga Brani | } |
119 | 79584f69 | Olga Brani | p { |
120 | 79584f69 | Olga Brani | overflow: hidden; |
121 | 79584f69 | Olga Brani | padding-left:10px; |
122 | 79584f69 | Olga Brani | margin: 0; |
123 | 79584f69 | Olga Brani | line-height: 1.3em; |
124 | 79584f69 | Olga Brani | } |
125 | 79584f69 | Olga Brani | } |
126 | 79584f69 | Olga Brani | } |
127 | 79584f69 | Olga Brani | } |
128 | 79584f69 | Olga Brani | } |
129 | 79584f69 | Olga Brani | } |
130 | 79584f69 | Olga Brani | } |
131 | 79584f69 | Olga Brani | } |
132 | 79584f69 | Olga Brani | |
133 | 79584f69 | Olga Brani | .connect-new { |
134 | 79584f69 | Olga Brani | position: absolute; |
135 | 79584f69 | Olga Brani | bottom: -150px; |
136 | 79584f69 | Olga Brani | left:0; |
137 | 79584f69 | Olga Brani | width: $lt-width; |
138 | 79584f69 | Olga Brani | text-align: center; |
139 | 79584f69 | Olga Brani | padding-top: 100px; |
140 | 79584f69 | Olga Brani | background: url(../images/dashed_atom.png) repeat-y left center; |
141 | 79584f69 | Olga Brani | margin-bottom: 50px; |
142 | a716e840 | Athina Bekakou | margin-left: -1px; |
143 | 79584f69 | Olga Brani | .img-wrap { |
144 | 79584f69 | Olga Brani | position: relative; |
145 | 9a0058e2 | Olga Brani | display: block; |
146 | 79584f69 | Olga Brani | width:$lt-width/2; |
147 | 79584f69 | Olga Brani | height: 2px; |
148 | 79584f69 | Olga Brani | background: url(../images/dashed_atom-x.png) repeat-x left top; |
149 | 7581f1ee | Olga Brani | overflow: inherit; |
150 | 79584f69 | Olga Brani | &>a { |
151 | 79584f69 | Olga Brani | display: block; |
152 | 79584f69 | Olga Brani | position: absolute; |
153 | 79584f69 | Olga Brani | left:0; |
154 | 79584f69 | Olga Brani | top:0; |
155 | 79584f69 | Olga Brani | width: $lt-width; |
156 | 79584f69 | Olga Brani | text-align: center; |
157 | 79584f69 | Olga Brani | margin: -20px 0 0 ; |
158 | de9b2b51 | Athina Bekakou | .snf-font{ |
159 | 79584f69 | Olga Brani | color: $link-color; |
160 | de9b2b51 | Athina Bekakou | font-size: $snf-font-size-medium; |
161 | 79584f69 | Olga Brani | } |
162 | de9b2b51 | Athina Bekakou | .snf-network-full { |
163 | 9a0058e2 | Olga Brani | position: relative; |
164 | 9a0058e2 | Olga Brani | top: -9px; |
165 | 79584f69 | Olga Brani | } |
166 | 79584f69 | Olga Brani | } |
167 | 79584f69 | Olga Brani | } |
168 | 79584f69 | Olga Brani | p { |
169 | 79584f69 | Olga Brani | position: absolute; |
170 | 79584f69 | Olga Brani | left: $lt-width; |
171 | 79584f69 | Olga Brani | width: $data-width; |
172 | 79584f69 | Olga Brani | text-align: left; |
173 | 79584f69 | Olga Brani | font-size: emCalc(14px); |
174 | 79584f69 | Olga Brani | top: 90px; |
175 | 79584f69 | Olga Brani | } |
176 | 73486bc5 | Athina Bekakou | &.network p { |
177 | 73486bc5 | Athina Bekakou | top: 90px; |
178 | 73486bc5 | Athina Bekakou | } |
179 | 73486bc5 | Athina Bekakou | &.disk p { |
180 | 73486bc5 | Athina Bekakou | top: 94px; |
181 | 73486bc5 | Athina Bekakou | } |
182 | 97cd255d | Olga Brani | &:hover { |
183 | 97cd255d | Olga Brani | .img-wrap>a .snf-font ,span, a { |
184 | 97cd255d | Olga Brani | color: $link-color-hover; |
185 | 97cd255d | Olga Brani | } |
186 | 97cd255d | Olga Brani | } |
187 | 73486bc5 | Athina Bekakou | |
188 | 79584f69 | Olga Brani | } |
189 | 9a0058e2 | Olga Brani | |
190 | 79584f69 | Olga Brani | .network .connected { |
191 | 9a0058e2 | Olga Brani | @include position-connected( $details-lt-width/2 - 2px , -$details-top-height/2 ); |
192 | 79584f69 | Olga Brani | } |
193 | 79584f69 | Olga Brani | |
194 | 79584f69 | Olga Brani | .firewall { |
195 | 79584f69 | Olga Brani | float: left; |
196 | 79584f69 | Olga Brani | margin-left:20px; |
197 | 79584f69 | Olga Brani | border: 1px solid $primary-color; |
198 | 112e5dd2 | Athina Bekakou | padding: 5px 20px; |
199 | 79584f69 | Olga Brani | position: absolute; |
200 | 79584f69 | Olga Brani | left:$data-width + $lt-width; |
201 | 79584f69 | Olga Brani | top: $rel-top - 5px; |
202 | 79584f69 | Olga Brani | font-size: emCalc(12px); |
203 | 54f6789d | Olga Brani | white-space: nowrap; |
204 | 54f6789d | Olga Brani | background-color: #fff; |
205 | 79584f69 | Olga Brani | p { |
206 | 79584f69 | Olga Brani | margin: 0; |
207 | 79584f69 | Olga Brani | em { |
208 | 79584f69 | Olga Brani | color: $secondary-color; |
209 | 79584f69 | Olga Brani | } |
210 | 79584f69 | Olga Brani | } |
211 | 79584f69 | Olga Brani | .more { |
212 | 112e5dd2 | Athina Bekakou | margin-top: 10px; |
213 | 79584f69 | Olga Brani | display: none; |
214 | 79584f69 | Olga Brani | p { |
215 | 54f6789d | Olga Brani | min-width: 200px; |
216 | 79584f69 | Olga Brani | span { |
217 | 79584f69 | Olga Brani | float: right; |
218 | 79584f69 | Olga Brani | font-size: emCalc(14px); |
219 | 79584f69 | Olga Brani | height: 14px; |
220 | 79584f69 | Olga Brani | line-height: 22px; |
221 | 79584f69 | Olga Brani | } |
222 | 79584f69 | Olga Brani | em { |
223 | 79584f69 | Olga Brani | float: right; |
224 | 79584f69 | Olga Brani | margin:0 5px 0 20px; |
225 | 79584f69 | Olga Brani | width: 15px; |
226 | 79584f69 | Olga Brani | display: inline-block; |
227 | 79584f69 | Olga Brani | } |
228 | 79584f69 | Olga Brani | } |
229 | 79584f69 | Olga Brani | } |
230 | 79584f69 | Olga Brani | &.unprotected >p em, |
231 | 79584f69 | Olga Brani | .unprotected a em { |
232 | 79584f69 | Olga Brani | color: $error-color; |
233 | 79584f69 | Olga Brani | } |
234 | 79584f69 | Olga Brani | |
235 | 79584f69 | Olga Brani | } |
236 | 79584f69 | Olga Brani | .details .placeholder { |
237 | 79584f69 | Olga Brani | height: 100px; |
238 | 79584f69 | Olga Brani | |
239 | 79584f69 | Olga Brani | } |