Revision 2aab17d7 snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss | ||
|---|---|---|
| 83 | 83 |
box-shadow: $shadows; |
| 84 | 84 |
} |
| 85 | 85 |
|
| 86 |
// border grey, on hover pink |
|
| 87 |
.btn1 {
|
|
| 88 |
border:1px solid $primary-color; |
|
| 89 |
color:$primary-color; |
|
| 90 |
display:inline-block; |
|
| 91 |
padding:10px 20px; |
|
| 92 |
line-height:1em; |
|
| 93 |
text-align:center; |
|
| 94 |
&:hover, |
|
| 95 |
&.current {
|
|
| 96 |
border-color:$secondary-color; |
|
| 97 |
background:$secondary-color; |
|
| 98 |
color:$white; |
|
| 99 |
} |
|
| 100 |
} |
|
| 101 |
|
|
| 102 |
// white background, on hover transparent |
|
| 103 |
.btn2 {
|
|
| 104 |
@extend .btn1; |
|
| 105 |
color:$secondary-color; |
|
| 106 |
background:$white; |
|
| 107 |
border-color:$secondary-color; |
|
| 108 |
&:hover, |
|
| 109 |
&.current {
|
|
| 110 |
color:$white; |
|
| 111 |
background:transparent; |
|
| 112 |
border-color:$white; |
|
| 113 |
} |
|
| 114 |
} |
|
| 115 |
|
|
| 116 |
// reverse btn2 |
|
| 117 |
.btn3 {
|
|
| 118 |
@extend .btn1; |
|
| 119 |
color:$white; |
|
| 120 |
border-color:$white; |
|
| 121 |
&:hover, |
|
| 122 |
&.current {
|
|
| 123 |
color:$secondary-color; |
|
| 124 |
background:$white; |
|
| 125 |
border-color:$white; |
|
| 126 |
} |
|
| 127 |
} |
|
| 128 |
|
|
| 129 |
|
|
| 86 | 130 |
a:hover {
|
| 87 |
@include transition(background, 300ms, ease-out); |
|
| 131 |
@include transition(background, 300ms, ease-out);
|
|
| 88 | 132 |
} |
| 89 | 133 |
|
| 90 | 134 |
.dummy-navigation {
|
| ... | ... | |
| 140 | 184 |
padding:20px 40px; |
| 141 | 185 |
} |
| 142 | 186 |
|
| 187 |
body.with-overlay {
|
|
| 188 |
background:$secondary-color; |
|
| 189 |
} |
|
| 143 | 190 |
|
| 144 | 191 |
.header {
|
| 145 | 192 |
position:relative; |
| 146 | 193 |
padding:$header-padding-vertical $header-padding-horizontal; |
| 147 | 194 |
border-bottom:1px solid $primary-color; |
| 195 |
background:$white; |
|
| 148 | 196 |
.logo {
|
| 149 | 197 |
text-align: center; |
| 150 | 198 |
} |
| ... | ... | |
| 173 | 221 |
left:$header-padding-horizontal; |
| 174 | 222 |
bottom:$header-padding-vertical; |
| 175 | 223 |
a {
|
| 176 |
display: inline-block; |
|
| 177 |
padding:10px 20px; |
|
| 178 |
border:1px solid $primary-color; |
|
| 224 |
@extend .btn1; |
|
| 179 | 225 |
span {
|
| 180 | 226 |
font-size:emCalc(20px); |
| 181 | 227 |
} |
| 182 |
&:hover, |
|
| 183 |
&.current {
|
|
| 184 |
border-color:$secondary-color; |
|
| 185 |
background:$secondary-color; |
|
| 186 |
color:$white; |
|
| 187 |
} |
|
| 188 | 228 |
} |
| 189 | 229 |
} |
| 190 | 230 |
} |
| ... | ... | |
| 328 | 368 |
margin:0 10px; |
| 329 | 369 |
min-width: 112px; |
| 330 | 370 |
a {
|
| 331 |
display: block; |
|
| 332 |
padding:5px 20px; |
|
| 333 |
text-align:center; |
|
| 334 |
border:1px solid $primary-color; |
|
| 335 |
&:hover {
|
|
| 336 |
border-color:$secondary-color; |
|
| 337 |
background:$secondary-color; |
|
| 338 |
color:$white; |
|
| 339 |
} |
|
| 371 |
@extend .btn1; |
|
| 340 | 372 |
} |
| 341 | 373 |
|
| 342 | 374 |
} |
| ... | ... | |
| 364 | 396 |
|
| 365 | 397 |
.overlay {
|
| 366 | 398 |
background:$secondary-color; |
| 367 |
a {
|
|
| 368 |
color:$white; |
|
| 369 |
&:hover {
|
|
| 370 |
text-decoration: underline; |
|
| 371 |
} |
|
| 372 |
} |
|
| 373 | 399 |
.lt-sidebar {
|
| 374 | 400 |
border-right:1px solid $white; |
| 375 | 401 |
ul {
|
| 376 | 402 |
li {
|
| 377 | 403 |
list-style:none outside none; |
| 378 | 404 |
a {
|
| 405 |
color:$white; |
|
| 379 | 406 |
span { float:right; display:none;}
|
| 380 | 407 |
&:hover, |
| 381 | 408 |
&.current {
|
| ... | ... | |
| 388 | 415 |
} |
| 389 | 416 |
} |
| 390 | 417 |
} |
| 418 |
|
|
| 391 | 419 |
} |
| 392 | 420 |
.lt-sidebar, |
| 393 | 421 |
.main {
|
| 394 | 422 |
padding:100px $header-padding-horizontal; |
| 395 | 423 |
} |
| 424 |
.navigation {
|
|
| 425 |
.rt {
|
|
| 426 |
float:right; |
|
| 427 |
} |
|
| 428 |
} |
|
| 396 | 429 |
} |
| 397 | 430 |
|
| 398 | 431 |
.create-vm {
|
| ... | ... | |
| 403 | 436 |
list-style:none outside none; |
| 404 | 437 |
display: inline-block; |
| 405 | 438 |
float: left; |
| 406 |
height: 220px;
|
|
| 439 |
height: 200px;
|
|
| 407 | 440 |
margin:0 10px 10px 0; |
| 408 | 441 |
&:hover, |
| 409 | 442 |
&.selected {
|
| ... | ... | |
| 412 | 445 |
color:$secondary-color; |
| 413 | 446 |
} |
| 414 | 447 |
} |
| 448 |
a {
|
|
| 449 |
color:$white; |
|
| 450 |
} |
|
| 415 | 451 |
.os {
|
| 416 | 452 |
@include sprite('../images/os-unknown.png', 30px, 30px);
|
| 417 | 453 |
background-size:100%; |
| ... | ... | |
| 431 | 467 |
} |
| 432 | 468 |
} |
| 433 | 469 |
} |
| 434 |
} |
|
| 435 |
|
|
| 436 |
.navigation {
|
|
| 437 |
a {
|
|
| 438 |
display: inline-block; |
|
| 439 |
padding:10px 20px; |
|
| 440 |
background:$white; |
|
| 441 |
text-align: center; |
|
| 442 |
color:$secondary-color; |
|
| 443 |
border:1px solid $secondary-color; |
|
| 444 |
&:hover {
|
|
| 445 |
border-color:$white; |
|
| 446 |
background:transparent; |
|
| 470 |
.select-flavor {
|
|
| 471 |
dl {
|
|
| 447 | 472 |
color:$white; |
| 448 |
text-decoration:none; |
|
| 449 |
} |
|
| 450 |
&.rt {
|
|
| 451 |
float:right; |
|
| 473 |
font-size:emCalc(20px); |
|
| 474 |
margin-bottom:10px; |
|
| 475 |
dd {
|
|
| 476 |
width:23%; |
|
| 477 |
display: inline-block; |
|
| 478 |
} |
|
| 479 |
dt {
|
|
| 480 |
width:70%; |
|
| 481 |
display: inline-block; |
|
| 482 |
font-weight: normal; |
|
| 483 |
span {
|
|
| 484 |
@extend .btn3; |
|
| 485 |
min-width: 90px; |
|
| 486 |
margin:0 10px; |
|
| 487 |
&:first-child {
|
|
| 488 |
margin-left:0; |
|
| 489 |
} |
|
| 490 |
} |
|
| 491 |
} |
|
| 452 | 492 |
} |
| 453 | 493 |
} |
| 454 |
} |
|
| 494 |
} |
|
| 495 |
|
|
| 496 |
|
|
Also available in: Unified diff