Revision d572ccc6
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_list.html | ||
|---|---|---|
| 21 | 21 |
<header class="header"> |
| 22 | 22 |
<nav> |
| 23 | 23 |
<ul class="icons-nav"> |
| 24 |
<li><a href="vm_list.html" data-tooltip class="has-tip" title="Machines"><span class="snf-PC"></span></a></li>
|
|
| 24 |
<li><a href="vm_list.html" data-tooltip class="has-tip current" title="Machines"><span class="snf-PC_fill"></span></a></li>
|
|
| 25 | 25 |
<li><a href="network_list.html" data-tooltip class="has-tip current" title="Networks"><span class="snf-network_full"></span></a></li> |
| 26 | 26 |
<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-HDD"></span></a></li> |
| 27 | 27 |
<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li> |
| 28 |
<li><a href="" data-tooltip class="has-tip" title="Images" ><span class="snf-images"></span></a></li> |
|
| 29 |
<li><a href="" data-tooltip class="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li> |
|
| 30 |
<li><a href="" data-tooltip class="has-tip" title="More" ><span class="snf-plus"></span></a></li> |
|
| 28 | 31 |
</ul> |
| 29 | 32 |
</nav> |
| 30 | 33 |
<div class="login"> |
| ... | ... | |
| 155 | 158 |
</div> |
| 156 | 159 |
<!-- overlays end --> |
| 157 | 160 |
|
| 158 |
<section class="actions-bar clearfix"> |
|
| 159 |
<h2>Networks</h2>
|
|
| 161 |
<section class="actions-bar clearfix">
|
|
| 162 |
<h2>Virtual Machines</h2>
|
|
| 160 | 163 |
<div class="view-type"> |
| 161 |
<a href="" class="list"><span class="snf-list"></span></a> |
|
| 162 |
<a href="" class="grid"><span class="snf-layout current"></span></a>
|
|
| 164 |
<a href="" class="list"><span class="snf-listview "></span></a>
|
|
| 165 |
<a href="" class="grid"><span class="snf-gridview current"></span></a>
|
|
| 163 | 166 |
</div> |
| 164 | 167 |
<div class="filter-menu"> |
| 165 | 168 |
<a class="filter" href="">Filter</a> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss | ||
|---|---|---|
| 427 | 427 |
position:relative; |
| 428 | 428 |
float: right; |
| 429 | 429 |
height: $bar-height; |
| 430 |
margin-right: -6px; |
|
| 430 | 431 |
-webkit-transition: width 0.3s; |
| 431 | 432 |
-moz-transition: width 0.3s; |
| 432 | 433 |
transition: width 0.3s; |
| ... | ... | |
| 467 | 468 |
width: 190px; |
| 468 | 469 |
} |
| 469 | 470 |
} |
| 470 |
|
|
| 471 |
.sb-search {
|
|
| 472 |
$icon-dim :24px; |
|
| 473 |
float: right; |
|
| 474 |
margin-top:3px; |
|
| 475 |
min-width: $icon-dim; |
|
| 476 |
height: $icon-dim; |
|
| 477 |
.sb-icon-search {
|
|
| 478 |
height: $icon-dim; |
|
| 479 |
width: $icon-dim; |
|
| 480 |
color: $primary-color; |
|
| 481 |
} |
|
| 482 |
form {
|
|
| 483 |
display: inline-block; |
|
| 484 |
margin:0; |
|
| 485 |
.input-wrap {
|
|
| 486 |
width:180px; |
|
| 487 |
overflow: hidden; |
|
| 488 |
} |
|
| 489 |
input {
|
|
| 490 |
border: transparent; |
|
| 491 |
background-color: white; |
|
| 492 |
color: $overlay-color; |
|
| 493 |
padding: 0 10px; |
|
| 494 |
width: 160px; |
|
| 495 |
font-size: emCalc(10px); |
|
| 496 |
box-shadow: none; |
|
| 497 |
height:0.7* $bar-height; |
|
| 498 |
line-height: 0.7* $bar-height; |
|
| 499 |
position: relative; |
|
| 500 |
top:-3px; |
|
| 501 |
@include placeholder {
|
|
| 502 |
color:$overlay-color; |
|
| 503 |
} |
|
| 504 |
} |
|
| 505 |
} |
|
| 506 |
&.sb-search-open {
|
|
| 507 |
width:220px; |
|
| 508 |
} |
|
| 509 |
} |
|
| 510 |
|
|
| 511 | 471 |
.view-type {
|
| 512 | 472 |
float: right; |
| 513 | 473 |
margin-right:15px; |
| 514 |
.current, |
|
| 515 |
a:hover {
|
|
| 474 |
.current, a:hover {
|
|
| 516 | 475 |
color: $secondary-color; |
| 517 | 476 |
} |
| 518 |
.snf-list {
|
|
| 519 |
margin-right: 6px; |
|
| 520 |
font-size: 17px; |
|
| 477 |
.snf-listview {
|
|
| 478 |
position: relative; |
|
| 479 |
top: 3px; |
|
| 480 |
margin-right: 3px; |
|
| 481 |
font-size: 22px; |
|
| 521 | 482 |
} |
| 522 |
.snf-layout {
|
|
| 523 |
font-size: 1.1em; |
|
| 483 |
.snf-gridview {
|
|
| 484 |
font-size: 22px; |
|
| 485 |
position: relative; |
|
| 486 |
top: 3px; |
|
| 487 |
margin-right: 3px; |
|
| 524 | 488 |
} |
| 525 | 489 |
|
| 526 | 490 |
} |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
|---|---|---|
| 7209 | 7209 |
position: relative; |
| 7210 | 7210 |
float: right; |
| 7211 | 7211 |
height: 30px; |
| 7212 |
margin-right: -6px; |
|
| 7212 | 7213 |
-webkit-transition: width 0.3s; |
| 7213 | 7214 |
-moz-transition: width 0.3s; |
| 7214 | 7215 |
transition: width 0.3s; |
| 7215 | 7216 |
-webkit-backface-visibility: hidden; |
| 7216 | 7217 |
} |
| 7217 |
/* line 434, ../sass/_common.scss */
|
|
| 7218 |
/* line 435, ../sass/_common.scss */
|
|
| 7218 | 7219 |
.actions-bar .hd-search .hd-icon-search {
|
| 7219 | 7220 |
color: #919194; |
| 7220 | 7221 |
display: block; |
| ... | ... | |
| 7226 | 7227 |
position: relative; |
| 7227 | 7228 |
background: #ebebec; |
| 7228 | 7229 |
} |
| 7229 |
/* line 441, ../sass/_common.scss */
|
|
| 7230 |
/* line 442, ../sass/_common.scss */
|
|
| 7230 | 7231 |
.actions-bar .hd-search .hd-icon-search:hover {
|
| 7231 | 7232 |
cursor: pointer; |
| 7232 | 7233 |
color: #30c79e; |
| 7233 | 7234 |
} |
| 7234 |
/* line 449, ../sass/_common.scss */
|
|
| 7235 |
/* line 450, ../sass/_common.scss */
|
|
| 7235 | 7236 |
.actions-bar .hd-search .hd-search-input {
|
| 7236 | 7237 |
border: transparent; |
| 7237 | 7238 |
background-color: white; |
| ... | ... | |
| 7262 | 7263 |
.actions-bar .hd-search .hd-search-input::-webkit-input-placeholder {
|
| 7263 | 7264 |
color: #485057; |
| 7264 | 7265 |
} |
| 7265 |
/* line 466, ../sass/_common.scss */
|
|
| 7266 |
/* line 467, ../sass/_common.scss */
|
|
| 7266 | 7267 |
.actions-bar .hd-search.hd-open {
|
| 7267 | 7268 |
width: 190px; |
| 7268 | 7269 |
} |
| 7269 | 7270 |
/* line 471, ../sass/_common.scss */ |
| 7270 |
.actions-bar .sb-search {
|
|
| 7271 |
float: right; |
|
| 7272 |
margin-top: 3px; |
|
| 7273 |
min-width: 24px; |
|
| 7274 |
height: 24px; |
|
| 7275 |
} |
|
| 7276 |
/* line 477, ../sass/_common.scss */ |
|
| 7277 |
.actions-bar .sb-search .sb-icon-search {
|
|
| 7278 |
height: 24px; |
|
| 7279 |
width: 24px; |
|
| 7280 |
color: #919194; |
|
| 7281 |
} |
|
| 7282 |
/* line 482, ../sass/_common.scss */ |
|
| 7283 |
.actions-bar .sb-search form {
|
|
| 7284 |
display: inline-block; |
|
| 7285 |
margin: 0; |
|
| 7286 |
} |
|
| 7287 |
/* line 485, ../sass/_common.scss */ |
|
| 7288 |
.actions-bar .sb-search form .input-wrap {
|
|
| 7289 |
width: 180px; |
|
| 7290 |
overflow: hidden; |
|
| 7291 |
} |
|
| 7292 |
/* line 489, ../sass/_common.scss */ |
|
| 7293 |
.actions-bar .sb-search form input {
|
|
| 7294 |
border: transparent; |
|
| 7295 |
background-color: white; |
|
| 7296 |
color: #485057; |
|
| 7297 |
padding: 0 10px; |
|
| 7298 |
width: 160px; |
|
| 7299 |
font-size: 0.625em; |
|
| 7300 |
box-shadow: none; |
|
| 7301 |
height: 21px; |
|
| 7302 |
line-height: 21px; |
|
| 7303 |
position: relative; |
|
| 7304 |
top: -3px; |
|
| 7305 |
} |
|
| 7306 |
/* line 74, ../sass/_common.scss */ |
|
| 7307 |
.actions-bar .sb-search form input.placeholder {
|
|
| 7308 |
color: #485057; |
|
| 7309 |
} |
|
| 7310 |
/* line 75, ../sass/_common.scss */ |
|
| 7311 |
.actions-bar .sb-search form input:-moz-placeholder {
|
|
| 7312 |
color: #485057; |
|
| 7313 |
} |
|
| 7314 |
/* line 76, ../sass/_common.scss */ |
|
| 7315 |
.actions-bar .sb-search form input::-moz-placeholder {
|
|
| 7316 |
color: #485057; |
|
| 7317 |
} |
|
| 7318 |
/* line 77, ../sass/_common.scss */ |
|
| 7319 |
.actions-bar .sb-search form input::-webkit-input-placeholder {
|
|
| 7320 |
color: #485057; |
|
| 7321 |
} |
|
| 7322 |
/* line 506, ../sass/_common.scss */ |
|
| 7323 |
.actions-bar .sb-search.sb-search-open {
|
|
| 7324 |
width: 220px; |
|
| 7325 |
} |
|
| 7326 |
/* line 511, ../sass/_common.scss */ |
|
| 7327 | 7271 |
.actions-bar .view-type {
|
| 7328 | 7272 |
float: right; |
| 7329 | 7273 |
margin-right: 15px; |
| 7330 | 7274 |
} |
| 7331 |
/* line 515, ../sass/_common.scss */ |
|
| 7332 |
.actions-bar .view-type .current, |
|
| 7333 |
.actions-bar .view-type a:hover {
|
|
| 7275 |
/* line 474, ../sass/_common.scss */ |
|
| 7276 |
.actions-bar .view-type .current, .actions-bar .view-type a:hover {
|
|
| 7334 | 7277 |
color: #30c79e; |
| 7335 | 7278 |
} |
| 7336 |
/* line 518, ../sass/_common.scss */ |
|
| 7337 |
.actions-bar .view-type .snf-list {
|
|
| 7338 |
margin-right: 6px; |
|
| 7339 |
font-size: 17px; |
|
| 7279 |
/* line 477, ../sass/_common.scss */ |
|
| 7280 |
.actions-bar .view-type .snf-listview {
|
|
| 7281 |
position: relative; |
|
| 7282 |
top: 3px; |
|
| 7283 |
margin-right: 3px; |
|
| 7284 |
font-size: 22px; |
|
| 7340 | 7285 |
} |
| 7341 |
/* line 522, ../sass/_common.scss */ |
|
| 7342 |
.actions-bar .view-type .snf-layout {
|
|
| 7343 |
font-size: 1.1em; |
|
| 7286 |
/* line 483, ../sass/_common.scss */ |
|
| 7287 |
.actions-bar .view-type .snf-gridview {
|
|
| 7288 |
font-size: 22px; |
|
| 7289 |
position: relative; |
|
| 7290 |
top: 3px; |
|
| 7291 |
margin-right: 3px; |
|
| 7344 | 7292 |
} |
| 7345 | 7293 |
|
| 7346 |
/* line 528, ../sass/_common.scss */
|
|
| 7294 |
/* line 492, ../sass/_common.scss */
|
|
| 7347 | 7295 |
.new-btn {
|
| 7348 | 7296 |
position: absolute; |
| 7349 | 7297 |
left: 15px; |
| 7350 | 7298 |
bottom: 0; |
| 7351 | 7299 |
height: 30px; |
| 7352 | 7300 |
} |
| 7353 |
/* line 535, ../sass/_common.scss */
|
|
| 7301 |
/* line 499, ../sass/_common.scss */
|
|
| 7354 | 7302 |
.new-btn a span {
|
| 7355 | 7303 |
font-size: 1.25em; |
| 7356 | 7304 |
} |
| 7357 | 7305 |
|
| 7358 | 7306 |
/* Icons Navigation ----------------------------------------------- */ |
| 7359 |
/* line 543, ../sass/_common.scss */
|
|
| 7307 |
/* line 507, ../sass/_common.scss */
|
|
| 7360 | 7308 |
.icons-nav {
|
| 7361 | 7309 |
margin: 0; |
| 7362 | 7310 |
padding: 0; |
| 7363 | 7311 |
} |
| 7364 |
/* line 545, ../sass/_common.scss */
|
|
| 7312 |
/* line 509, ../sass/_common.scss */
|
|
| 7365 | 7313 |
.icons-nav li {
|
| 7366 | 7314 |
display: inline-block; |
| 7367 | 7315 |
margin: 0 5px; |
| ... | ... | |
| 7372 | 7320 |
text-align: center; |
| 7373 | 7321 |
overflow: hidden; |
| 7374 | 7322 |
} |
| 7375 |
/* line 554, ../sass/_common.scss */
|
|
| 7323 |
/* line 518, ../sass/_common.scss */
|
|
| 7376 | 7324 |
.icons-nav li a {
|
| 7377 | 7325 |
color: #1a1a1a; |
| 7378 | 7326 |
} |
| 7379 |
/* line 556, ../sass/_common.scss */
|
|
| 7327 |
/* line 520, ../sass/_common.scss */
|
|
| 7380 | 7328 |
.icons-nav li a:hover, .icons-nav li a.current {
|
| 7381 | 7329 |
color: #30c79e; |
| 7382 | 7330 |
} |
| 7383 | 7331 |
|
| 7384 | 7332 |
/* Top info ----------------------------------------------- */ |
| 7385 |
/* line 569, ../sass/_common.scss */
|
|
| 7333 |
/* line 533, ../sass/_common.scss */
|
|
| 7386 | 7334 |
.top-info {
|
| 7387 | 7335 |
padding: 50px 100px; |
| 7388 | 7336 |
position: relative; |
| 7389 | 7337 |
z-index: 10; |
| 7390 | 7338 |
display: none; |
| 7391 | 7339 |
} |
| 7392 |
/* line 574, ../sass/_common.scss */
|
|
| 7340 |
/* line 538, ../sass/_common.scss */
|
|
| 7393 | 7341 |
.top-info .close {
|
| 7394 | 7342 |
position: absolute; |
| 7395 | 7343 |
right: 15px; |
| ... | ... | |
| 7402 | 7350 |
overflow: hidden; |
| 7403 | 7351 |
} |
| 7404 | 7352 |
|
| 7405 |
/* line 583, ../sass/_common.scss */
|
|
| 7353 |
/* line 547, ../sass/_common.scss */
|
|
| 7406 | 7354 |
.info.error {
|
| 7407 | 7355 |
background: #ff5c58; |
| 7408 | 7356 |
color: #fff; |
| 7409 | 7357 |
} |
| 7410 | 7358 |
|
| 7411 |
/* line 589, ../sass/_common.scss */
|
|
| 7359 |
/* line 553, ../sass/_common.scss */
|
|
| 7412 | 7360 |
.info.alert {
|
| 7413 | 7361 |
background: #30c79e; |
| 7414 | 7362 |
color: #fff; |
| 7415 | 7363 |
} |
| 7416 | 7364 |
|
| 7417 |
/* line 594, ../sass/_common.scss */
|
|
| 7365 |
/* line 558, ../sass/_common.scss */
|
|
| 7418 | 7366 |
.info.warning {
|
| 7419 | 7367 |
background: #919194; |
| 7420 | 7368 |
color: #fff; |
| 7421 | 7369 |
} |
| 7422 | 7370 |
|
| 7423 |
/* line 599, ../sass/_common.scss */
|
|
| 7371 |
/* line 563, ../sass/_common.scss */
|
|
| 7424 | 7372 |
.info.success {
|
| 7425 | 7373 |
background: #00a551; |
| 7426 | 7374 |
color: #fff; |
| 7427 | 7375 |
} |
| 7428 | 7376 |
|
| 7429 |
/* line 604, ../sass/_common.scss */
|
|
| 7377 |
/* line 568, ../sass/_common.scss */
|
|
| 7430 | 7378 |
.border-bottom-style1 {
|
| 7431 | 7379 |
padding-bottom: 20px; |
| 7432 | 7380 |
margin-bottom: 20px; |
| ... | ... | |
| 7434 | 7382 |
} |
| 7435 | 7383 |
|
| 7436 | 7384 |
/* Progress Bar ----------------------------------------------- */ |
| 7437 |
/* line 613, ../sass/_common.scss */
|
|
| 7385 |
/* line 577, ../sass/_common.scss */
|
|
| 7438 | 7386 |
.progress-bar {
|
| 7439 | 7387 |
position: fixed; |
| 7440 | 7388 |
bottom: 0; |
| ... | ... | |
| 7445 | 7393 |
padding: 20px 0 20px 310px; |
| 7446 | 7394 |
color: #919194; |
| 7447 | 7395 |
} |
| 7448 |
/* line 622, ../sass/_common.scss */
|
|
| 7396 |
/* line 586, ../sass/_common.scss */
|
|
| 7449 | 7397 |
.progress-bar span.counter {
|
| 7450 | 7398 |
display: inline-block; |
| 7451 | 7399 |
margin-right: 20px; |
| 7452 | 7400 |
float: left; |
| 7453 | 7401 |
} |
| 7454 |
/* line 627, ../sass/_common.scss */
|
|
| 7402 |
/* line 591, ../sass/_common.scss */
|
|
| 7455 | 7403 |
.progress-bar div.progress-wrap {
|
| 7456 | 7404 |
display: inline-block; |
| 7457 | 7405 |
float: left; |
| 7458 | 7406 |
width: 40%; |
| 7459 | 7407 |
margin-right: 60px; |
| 7460 | 7408 |
} |
| 7461 |
/* line 632, ../sass/_common.scss */
|
|
| 7409 |
/* line 596, ../sass/_common.scss */
|
|
| 7462 | 7410 |
.progress-bar div.progress-wrap .progress {
|
| 7463 | 7411 |
position: relative; |
| 7464 | 7412 |
top: 2px; |
| 7465 | 7413 |
} |
| 7466 |
/* line 637, ../sass/_common.scss */
|
|
| 7414 |
/* line 601, ../sass/_common.scss */
|
|
| 7467 | 7415 |
.progress-bar span.more {
|
| 7468 | 7416 |
display: inline-block; |
| 7469 | 7417 |
} |
| 7470 | 7418 |
|
| 7471 | 7419 |
/* Responive ------------------------------------------------ */ |
| 7472 | 7420 |
@media only screen and (max-width: 768px) {
|
| 7473 |
/* line 648, ../sass/_common.scss */
|
|
| 7421 |
/* line 612, ../sass/_common.scss */
|
|
| 7474 | 7422 |
body {
|
| 7475 | 7423 |
padding-top: 0; |
| 7476 | 7424 |
} |
| 7477 | 7425 |
|
| 7478 |
/* line 651, ../sass/_common.scss */
|
|
| 7426 |
/* line 615, ../sass/_common.scss */
|
|
| 7479 | 7427 |
.header, .actions-bar {
|
| 7480 | 7428 |
position: static; |
| 7481 | 7429 |
z-index: auto; |
| 7482 | 7430 |
} |
| 7483 | 7431 |
|
| 7484 |
/* line 655, ../sass/_common.scss */
|
|
| 7432 |
/* line 619, ../sass/_common.scss */
|
|
| 7485 | 7433 |
.actions-bar {
|
| 7486 | 7434 |
top: 160px; |
| 7487 | 7435 |
} |
| 7488 | 7436 |
|
| 7489 |
/* line 658, ../sass/_common.scss */
|
|
| 7437 |
/* line 622, ../sass/_common.scss */
|
|
| 7490 | 7438 |
.header {
|
| 7491 | 7439 |
height: 120px; |
| 7492 | 7440 |
line-height: 50px; |
| 7493 | 7441 |
} |
| 7494 |
/* line 661, ../sass/_common.scss */
|
|
| 7442 |
/* line 625, ../sass/_common.scss */
|
|
| 7495 | 7443 |
.header .icons-nav {
|
| 7496 | 7444 |
position: static; |
| 7497 | 7445 |
} |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html | ||
|---|---|---|
| 26 | 26 |
<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network"></span></a></li> |
| 27 | 27 |
<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-HDD"></span></a></li> |
| 28 | 28 |
<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li> |
| 29 |
<li><a href="" data-tooltip class="has-tip" title="Images" ><span class="snf-images"></span></a></li> |
|
| 30 |
<li><a href="" data-tooltip class="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li> |
|
| 31 |
<li><a href="" data-tooltip class="has-tip" title="More" ><span class="snf-plus"></span></a></li> |
|
| 29 | 32 |
</ul> |
| 30 | 33 |
</nav> |
| 31 | 34 |
<div class="login"> |
| ... | ... | |
| 726 | 729 |
<section class="actions-bar clearfix"> |
| 727 | 730 |
<h2>Virtual Machines</h2> |
| 728 | 731 |
<div class="view-type"> |
| 729 |
<a href="" class="list"><span class="snf-list"></span></a> |
|
| 730 |
<a href="" class="grid"><span class="snf-layout current"></span></a>
|
|
| 732 |
<a href="" class="list"><span class="snf-listview "></span></a>
|
|
| 733 |
<a href="" class="grid"><span class="snf-gridview current"></span></a>
|
|
| 731 | 734 |
</div> |
| 732 | 735 |
<div class="filter-menu"> |
| 733 | 736 |
<a class="filter" href="">Filter</a> |
Also available in: Unified diff