Revision 98714f8a snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss | ||
---|---|---|
56 | 56 |
// Background-position for normal and hover states need to |
57 | 57 |
// be declared separetely |
58 | 58 |
@mixin sprite($image, $width, $height){ |
59 |
background:url($image); |
|
59 |
background:url($image) no-repeat center center;
|
|
60 | 60 |
width: $width; |
61 | 61 |
height:$height; |
62 | 62 |
display: inline-block; |
63 | 63 |
text-indent: -2000px; |
64 | 64 |
overflow: hidden; |
65 |
|
|
65 | 66 |
} |
66 | 67 |
|
67 | 68 |
// Transition for css properties |
... | ... | |
123 | 124 |
width:$row-top-width; |
124 | 125 |
} |
125 | 126 |
|
127 |
.lt-sidebar { |
|
128 |
max-width:200px; |
|
129 |
float:left; |
|
130 |
overflow:scroll; |
|
131 |
height:300px; |
|
132 |
&+.main { |
|
133 |
overflow:hidden; |
|
134 |
} |
|
135 |
} |
|
136 |
|
|
137 |
.main { |
|
138 |
padding:20px 40px; |
|
139 |
} |
|
140 |
|
|
141 |
|
|
126 | 142 |
.header { |
127 | 143 |
position:relative; |
128 | 144 |
padding:$header-padding-vertical $header-padding-horizontal; |
... | ... | |
255 | 271 |
} |
256 | 272 |
} |
257 | 273 |
} |
274 |
} |
|
275 |
|
|
276 |
.lt-sidebar.vms { |
|
277 |
font-size:emCalc(12px); |
|
278 |
.items-list li .img, |
|
279 |
.items-list li .os { |
|
280 |
background-size:80%; |
|
281 |
} |
|
282 |
} |
|
283 |
|
|
284 |
.vm { |
|
285 |
.img { |
|
286 |
@include sprite('../images/vm-on.png', 56px, 58px); |
|
287 |
margin-bottom: 20px; |
|
288 |
position: relative; |
|
289 |
&.stopped { |
|
290 |
background-image:url('../images/vm-stopped.png'); |
|
291 |
} |
|
292 |
.os { |
|
293 |
@include sprite('../images/os-unknown.png', 22px, 22px); |
|
294 |
position: absolute; |
|
295 |
top:8px; |
|
296 |
left:18px; |
|
297 |
&.windows { background-image:url('../images/os-windows.png'); } |
|
298 |
&.kubuntu { background-image:url('../images/os-kubuntu.png'); } |
|
299 |
&.fedora { background-image:url('../images/os-fedora.png'); } |
|
300 |
} |
|
301 |
} |
|
302 |
} |
|
303 |
|
|
304 |
.details { |
|
305 |
.top { |
|
306 |
text-align: center; |
|
307 |
.img { |
|
308 |
@include sprite('../images/vm-on.png', 112px, 116px); |
|
309 |
background-size:100%; |
|
310 |
} |
|
311 |
.os { |
|
312 |
background-size:100%; |
|
313 |
width:44px; |
|
314 |
height:44px; |
|
315 |
left:36px; |
|
316 |
top:16px; |
|
317 |
} |
|
318 |
.actions { |
|
319 |
ul { |
|
320 |
padding:1em; |
|
321 |
text-align:center; |
|
322 |
li { |
|
323 |
list-style: none outside none; |
|
324 |
display: inline-block; |
|
325 |
margin:0 10px; |
|
326 |
min-width: 112px; |
|
327 |
a { |
|
328 |
display: block; |
|
329 |
padding:5px 20px; |
|
330 |
text-align:center; |
|
331 |
border:1px solid $primary-color; |
|
332 |
&:hover { |
|
333 |
border-color:$secondary-color; |
|
334 |
background:$secondary-color; |
|
335 |
color:$white; |
|
336 |
} |
|
337 |
} |
|
338 |
|
|
339 |
} |
|
340 |
} |
|
341 |
} |
|
342 |
|
|
343 |
} |
|
344 |
.info { |
|
345 |
dl { |
|
346 |
margin:0; |
|
347 |
dt { |
|
348 |
display: inline-block; |
|
349 |
width:25%; |
|
350 |
float:left; |
|
351 |
} |
|
352 |
} |
|
353 |
} |
|
354 |
} |
|
355 |
|
|
356 |
.border-bottom-style1 { |
|
357 |
padding-bottom:20px; |
|
358 |
margin-bottom:20px; |
|
359 |
border-bottom:2px dashed $primary-color; |
|
258 | 360 |
} |
Also available in: Unified diff