Revision 2aab17d7
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html | ||
|---|---|---|
| 21 | 21 |
<p> |
| 22 | 22 |
<a href="vm_list_v1.html">VMs list page</a> (kpal original design)<br> |
| 23 | 23 |
<a href="vm_details_v1.html">VM details page</a> (kpal original design)<br> |
| 24 |
<a href="vm_create_v1.html">Create new machine</a> (kpal original design)<br> |
|
| 24 |
<a href="vm_create_a_v1.html">Create new machine</a> (kpal original design)<br>
|
|
| 25 | 25 |
<a href="testIconFonts/test.html">Sample page for Icon-Font</a> |
| 26 | 26 |
</p> |
| 27 | 27 |
</div> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js | ||
|---|---|---|
| 33 | 33 |
$(this).addClass('selected');
|
| 34 | 34 |
}) |
| 35 | 35 |
|
| 36 |
$('.select-flavor dl span').click(function(e){
|
|
| 37 |
console.log('test');
|
|
| 38 |
$(this).parents('dl').find('span').removeClass('current');
|
|
| 39 |
$(this).addClass('current');
|
|
| 40 |
}) |
|
| 41 |
|
|
| 42 |
if ($('.overlay').length >0 ){
|
|
| 43 |
$('body').addClass('with-overlay');
|
|
| 44 |
} |
|
| 45 |
|
|
| 36 | 46 |
}) |
| 37 | 47 |
|
| 38 | 48 |
$(window).resize(function(e){
|
| 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 |
|
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
|---|---|---|
| 6802 | 6802 |
clear: both; |
| 6803 | 6803 |
} |
| 6804 | 6804 |
|
| 6805 |
/* line 86, ../sass/app.scss */ |
|
| 6805 |
/* line 87, ../sass/app.scss */ |
|
| 6806 |
.btn1, .btn2, .btn3, .create-vm .select-flavor dl dt span, .header .new-btn a, .details .top .actions ul li a {
|
|
| 6807 |
border: 1px solid #919194; |
|
| 6808 |
color: #919194; |
|
| 6809 |
display: inline-block; |
|
| 6810 |
padding: 10px 20px; |
|
| 6811 |
line-height: 1em; |
|
| 6812 |
text-align: center; |
|
| 6813 |
} |
|
| 6814 |
/* line 95, ../sass/app.scss */ |
|
| 6815 |
.btn1:hover, .btn2:hover, .btn3:hover, .create-vm .select-flavor dl dt span:hover, .header .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .header .new-btn a.current, .details .top .actions ul li a.current {
|
|
| 6816 |
border-color: #ff7bac; |
|
| 6817 |
background: #ff7bac; |
|
| 6818 |
color: white; |
|
| 6819 |
} |
|
| 6820 |
|
|
| 6821 |
/* line 103, ../sass/app.scss */ |
|
| 6822 |
.btn2 {
|
|
| 6823 |
color: #ff7bac; |
|
| 6824 |
background: white; |
|
| 6825 |
border-color: #ff7bac; |
|
| 6826 |
} |
|
| 6827 |
/* line 109, ../sass/app.scss */ |
|
| 6828 |
.btn2:hover, .btn2.current {
|
|
| 6829 |
color: white; |
|
| 6830 |
background: transparent; |
|
| 6831 |
border-color: white; |
|
| 6832 |
} |
|
| 6833 |
|
|
| 6834 |
/* line 117, ../sass/app.scss */ |
|
| 6835 |
.btn3, .create-vm .select-flavor dl dt span {
|
|
| 6836 |
color: white; |
|
| 6837 |
border-color: white; |
|
| 6838 |
} |
|
| 6839 |
/* line 122, ../sass/app.scss */ |
|
| 6840 |
.btn3:hover, .create-vm .select-flavor dl dt span:hover, .btn3.current, .create-vm .select-flavor dl dt span.current {
|
|
| 6841 |
color: #ff7bac; |
|
| 6842 |
background: white; |
|
| 6843 |
border-color: white; |
|
| 6844 |
} |
|
| 6845 |
|
|
| 6846 |
/* line 130, ../sass/app.scss */ |
|
| 6806 | 6847 |
a:hover {
|
| 6807 | 6848 |
-webkit-transition: background 300ms ease-out; |
| 6808 | 6849 |
-moz-transition: background 300ms ease-out; |
| ... | ... | |
| 6811 | 6852 |
transition: background 300ms ease-out; |
| 6812 | 6853 |
} |
| 6813 | 6854 |
|
| 6814 |
/* line 90, ../sass/app.scss */
|
|
| 6855 |
/* line 134, ../sass/app.scss */
|
|
| 6815 | 6856 |
.dummy-navigation {
|
| 6816 | 6857 |
position: fixed; |
| 6817 | 6858 |
right: 0; |
| ... | ... | |
| 6821 | 6862 |
z-index: 100; |
| 6822 | 6863 |
line-height: 160%; |
| 6823 | 6864 |
} |
| 6824 |
/* line 98, ../sass/app.scss */
|
|
| 6865 |
/* line 142, ../sass/app.scss */
|
|
| 6825 | 6866 |
.dummy-navigation a {
|
| 6826 | 6867 |
color: black; |
| 6827 | 6868 |
} |
| 6828 |
/* line 100, ../sass/app.scss */
|
|
| 6869 |
/* line 144, ../sass/app.scss */
|
|
| 6829 | 6870 |
.dummy-navigation a:hover {
|
| 6830 | 6871 |
color: white; |
| 6831 | 6872 |
} |
| 6832 |
/* line 101, ../sass/app.scss */
|
|
| 6873 |
/* line 145, ../sass/app.scss */
|
|
| 6833 | 6874 |
.dummy-navigation a.open {
|
| 6834 | 6875 |
color: white; |
| 6835 | 6876 |
} |
| 6836 |
/* line 102, ../sass/app.scss */
|
|
| 6877 |
/* line 146, ../sass/app.scss */
|
|
| 6837 | 6878 |
.dummy-navigation a.close {
|
| 6838 | 6879 |
float: right; |
| 6839 | 6880 |
font-weight: bold; |
| 6840 | 6881 |
font-size: 20px; |
| 6841 | 6882 |
} |
| 6842 | 6883 |
|
| 6843 |
/* line 110, ../sass/app.scss */
|
|
| 6884 |
/* line 154, ../sass/app.scss */
|
|
| 6844 | 6885 |
.ours {
|
| 6845 | 6886 |
padding: 8px 15px; |
| 6846 | 6887 |
color: white; |
| ... | ... | |
| 6850 | 6891 |
display: none; |
| 6851 | 6892 |
position: absolute; |
| 6852 | 6893 |
} |
| 6853 |
/* line 118, ../sass/app.scss */
|
|
| 6894 |
/* line 162, ../sass/app.scss */
|
|
| 6854 | 6895 |
.ours.questions {
|
| 6855 | 6896 |
background: orange; |
| 6856 | 6897 |
} |
| 6857 |
/* line 119, ../sass/app.scss */
|
|
| 6898 |
/* line 163, ../sass/app.scss */
|
|
| 6858 | 6899 |
.ours.problems {
|
| 6859 | 6900 |
background: red; |
| 6860 | 6901 |
} |
| 6861 |
/* line 120, ../sass/app.scss */
|
|
| 6902 |
/* line 164, ../sass/app.scss */
|
|
| 6862 | 6903 |
.ours.suggestions {
|
| 6863 | 6904 |
background: #3EC9FF; |
| 6864 | 6905 |
} |
| 6865 | 6906 |
|
| 6866 |
/* line 125, ../sass/app.scss */
|
|
| 6907 |
/* line 169, ../sass/app.scss */
|
|
| 6867 | 6908 |
.row-full {
|
| 6868 | 6909 |
width: 100%; |
| 6869 | 6910 |
} |
| 6870 | 6911 |
|
| 6871 |
/* line 129, ../sass/app.scss */
|
|
| 6912 |
/* line 173, ../sass/app.scss */
|
|
| 6872 | 6913 |
.lt-sidebar {
|
| 6873 | 6914 |
width: 250px; |
| 6874 | 6915 |
float: left; |
| 6875 | 6916 |
overflow: scroll; |
| 6876 | 6917 |
height: 300px; |
| 6877 | 6918 |
} |
| 6878 |
/* line 134, ../sass/app.scss */
|
|
| 6919 |
/* line 178, ../sass/app.scss */
|
|
| 6879 | 6920 |
.lt-sidebar + .main {
|
| 6880 | 6921 |
overflow: hidden; |
| 6881 | 6922 |
} |
| 6882 | 6923 |
|
| 6883 |
/* line 139, ../sass/app.scss */
|
|
| 6924 |
/* line 183, ../sass/app.scss */
|
|
| 6884 | 6925 |
.main {
|
| 6885 | 6926 |
padding: 20px 40px; |
| 6886 | 6927 |
} |
| 6887 | 6928 |
|
| 6888 |
/* line 144, ../sass/app.scss */ |
|
| 6929 |
/* line 187, ../sass/app.scss */ |
|
| 6930 |
body.with-overlay {
|
|
| 6931 |
background: #ff7bac; |
|
| 6932 |
} |
|
| 6933 |
|
|
| 6934 |
/* line 191, ../sass/app.scss */ |
|
| 6889 | 6935 |
.header {
|
| 6890 | 6936 |
position: relative; |
| 6891 | 6937 |
padding: 1.25em 2.5em; |
| 6892 | 6938 |
border-bottom: 1px solid #919194; |
| 6939 |
background: white; |
|
| 6893 | 6940 |
} |
| 6894 |
/* line 148, ../sass/app.scss */
|
|
| 6941 |
/* line 196, ../sass/app.scss */
|
|
| 6895 | 6942 |
.header .logo {
|
| 6896 | 6943 |
text-align: center; |
| 6897 | 6944 |
} |
| 6898 |
/* line 151, ../sass/app.scss */
|
|
| 6945 |
/* line 199, ../sass/app.scss */
|
|
| 6899 | 6946 |
.header .actions {
|
| 6900 | 6947 |
text-align: center; |
| 6901 | 6948 |
} |
| 6902 |
/* line 153, ../sass/app.scss */
|
|
| 6949 |
/* line 201, ../sass/app.scss */
|
|
| 6903 | 6950 |
.header .actions ul {
|
| 6904 | 6951 |
margin: 1.25em 0 0; |
| 6905 | 6952 |
} |
| 6906 |
/* line 155, ../sass/app.scss */
|
|
| 6953 |
/* line 203, ../sass/app.scss */
|
|
| 6907 | 6954 |
.header .actions ul li {
|
| 6908 | 6955 |
list-style: none outside none; |
| 6909 | 6956 |
display: inline-block; |
| 6910 | 6957 |
margin: 0 5px; |
| 6911 | 6958 |
} |
| 6912 |
/* line 159, ../sass/app.scss */
|
|
| 6959 |
/* line 207, ../sass/app.scss */
|
|
| 6913 | 6960 |
.header .actions ul li a {
|
| 6914 | 6961 |
display: block; |
| 6915 | 6962 |
width: 100%; |
| 6916 | 6963 |
padding: 8px 20px; |
| 6917 | 6964 |
border: 1px solid transparent; |
| 6918 | 6965 |
} |
| 6919 |
/* line 164, ../sass/app.scss */
|
|
| 6966 |
/* line 212, ../sass/app.scss */
|
|
| 6920 | 6967 |
.header .actions ul li a:hover {
|
| 6921 | 6968 |
border: 1px solid #ff7bac; |
| 6922 | 6969 |
} |
| 6923 |
/* line 171, ../sass/app.scss */
|
|
| 6970 |
/* line 219, ../sass/app.scss */
|
|
| 6924 | 6971 |
.header .new-btn {
|
| 6925 | 6972 |
position: absolute; |
| 6926 | 6973 |
left: 2.5em; |
| 6927 | 6974 |
bottom: 1.25em; |
| 6928 | 6975 |
} |
| 6929 |
/* line 175, ../sass/app.scss */ |
|
| 6930 |
.header .new-btn a {
|
|
| 6931 |
display: inline-block; |
|
| 6932 |
padding: 10px 20px; |
|
| 6933 |
border: 1px solid #919194; |
|
| 6934 |
} |
|
| 6935 |
/* line 179, ../sass/app.scss */ |
|
| 6976 |
/* line 225, ../sass/app.scss */ |
|
| 6936 | 6977 |
.header .new-btn a span {
|
| 6937 | 6978 |
font-size: 1.25em; |
| 6938 | 6979 |
} |
| 6939 |
/* line 183, ../sass/app.scss */ |
|
| 6940 |
.header .new-btn a:hover, .header .new-btn a.current {
|
|
| 6941 |
border-color: #ff7bac; |
|
| 6942 |
background: #ff7bac; |
|
| 6943 |
color: white; |
|
| 6944 |
} |
|
| 6945 | 6980 |
|
| 6946 |
/* line 191, ../sass/app.scss */
|
|
| 6981 |
/* line 231, ../sass/app.scss */
|
|
| 6947 | 6982 |
.login {
|
| 6948 | 6983 |
position: absolute; |
| 6949 | 6984 |
right: 2.5em; |
| 6950 | 6985 |
top: 1.25em; |
| 6951 | 6986 |
} |
| 6952 | 6987 |
|
| 6953 |
/* line 197, ../sass/app.scss */
|
|
| 6988 |
/* line 237, ../sass/app.scss */
|
|
| 6954 | 6989 |
.top-nav {
|
| 6955 | 6990 |
position: absolute; |
| 6956 | 6991 |
left: 2.5em; |
| 6957 | 6992 |
top: 1.25em; |
| 6958 | 6993 |
} |
| 6959 |
/* line 201, ../sass/app.scss */
|
|
| 6994 |
/* line 241, ../sass/app.scss */
|
|
| 6960 | 6995 |
.top-nav ul {
|
| 6961 | 6996 |
margin: 0; |
| 6962 | 6997 |
padding: 0; |
| 6963 | 6998 |
} |
| 6964 |
/* line 203, ../sass/app.scss */
|
|
| 6999 |
/* line 243, ../sass/app.scss */
|
|
| 6965 | 7000 |
.top-nav ul li {
|
| 6966 | 7001 |
display: inline-block; |
| 6967 | 7002 |
margin-right: 15px; |
| 6968 | 7003 |
} |
| 6969 |
/* line 206, ../sass/app.scss */
|
|
| 7004 |
/* line 246, ../sass/app.scss */
|
|
| 6970 | 7005 |
.top-nav ul li a {
|
| 6971 | 7006 |
padding-bottom: 5px; |
| 6972 | 7007 |
} |
| 6973 | 7008 |
|
| 6974 |
/* line 217, ../sass/app.scss */
|
|
| 7009 |
/* line 257, ../sass/app.scss */
|
|
| 6975 | 7010 |
.top-info {
|
| 6976 | 7011 |
padding: 50px 100px; |
| 6977 | 7012 |
position: relative; |
| 6978 | 7013 |
} |
| 6979 |
/* line 220, ../sass/app.scss */
|
|
| 7014 |
/* line 260, ../sass/app.scss */
|
|
| 6980 | 7015 |
.top-info .close {
|
| 6981 | 7016 |
position: absolute; |
| 6982 | 7017 |
right: 2.5em; |
| ... | ... | |
| 6989 | 7024 |
overflow: hidden; |
| 6990 | 7025 |
} |
| 6991 | 7026 |
|
| 6992 |
/* line 227, ../sass/app.scss */
|
|
| 7027 |
/* line 267, ../sass/app.scss */
|
|
| 6993 | 7028 |
.info.alert {
|
| 6994 | 7029 |
background: #ff7bac; |
| 6995 | 7030 |
color: white; |
| 6996 | 7031 |
} |
| 6997 | 7032 |
|
| 6998 |
/* line 232, ../sass/app.scss */
|
|
| 7033 |
/* line 272, ../sass/app.scss */
|
|
| 6999 | 7034 |
.info.warning {
|
| 7000 | 7035 |
background: #49ddc5; |
| 7001 | 7036 |
color: black; |
| 7002 | 7037 |
} |
| 7003 | 7038 |
|
| 7004 |
/* line 237, ../sass/app.scss */
|
|
| 7039 |
/* line 277, ../sass/app.scss */
|
|
| 7005 | 7040 |
.info.success {
|
| 7006 | 7041 |
background: #5da423; |
| 7007 | 7042 |
color: white; |
| 7008 | 7043 |
} |
| 7009 | 7044 |
|
| 7010 |
/* line 242, ../sass/app.scss */
|
|
| 7045 |
/* line 282, ../sass/app.scss */
|
|
| 7011 | 7046 |
.items-list {
|
| 7012 | 7047 |
padding: 50px 0; |
| 7013 | 7048 |
} |
| 7014 |
/* line 244, ../sass/app.scss */
|
|
| 7049 |
/* line 284, ../sass/app.scss */
|
|
| 7015 | 7050 |
.items-list li {
|
| 7016 | 7051 |
text-align: center; |
| 7017 | 7052 |
padding: 20px; |
| 7018 | 7053 |
} |
| 7019 |
/* line 248, ../sass/app.scss */
|
|
| 7054 |
/* line 288, ../sass/app.scss */
|
|
| 7020 | 7055 |
.items-list li .visible-info span {
|
| 7021 | 7056 |
display: block; |
| 7022 | 7057 |
} |
| 7023 | 7058 |
|
| 7024 |
/* line 258, ../sass/app.scss */
|
|
| 7059 |
/* line 298, ../sass/app.scss */
|
|
| 7025 | 7060 |
.vms .items-list li .img {
|
| 7026 | 7061 |
background: url("../images/vm-on.png") no-repeat center center;
|
| 7027 | 7062 |
width: 56px; |
| ... | ... | |
| 7032 | 7067 |
margin-bottom: 20px; |
| 7033 | 7068 |
position: relative; |
| 7034 | 7069 |
} |
| 7035 |
/* line 262, ../sass/app.scss */
|
|
| 7070 |
/* line 302, ../sass/app.scss */
|
|
| 7036 | 7071 |
.vms .items-list li .img.stopped {
|
| 7037 | 7072 |
background-image: url("../images/vm-stopped.png");
|
| 7038 | 7073 |
} |
| 7039 |
/* line 265, ../sass/app.scss */
|
|
| 7074 |
/* line 305, ../sass/app.scss */
|
|
| 7040 | 7075 |
.vms .items-list li .img .os {
|
| 7041 | 7076 |
background: url("../images/os-unknown.png") no-repeat center center;
|
| 7042 | 7077 |
width: 22px; |
| ... | ... | |
| 7048 | 7083 |
top: 8px; |
| 7049 | 7084 |
left: 18px; |
| 7050 | 7085 |
} |
| 7051 |
/* line 270, ../sass/app.scss */
|
|
| 7086 |
/* line 310, ../sass/app.scss */
|
|
| 7052 | 7087 |
.vms .items-list li .img .os.windows {
|
| 7053 | 7088 |
background-image: url("../images/os-windows.png");
|
| 7054 | 7089 |
} |
| 7055 |
/* line 271, ../sass/app.scss */
|
|
| 7090 |
/* line 311, ../sass/app.scss */
|
|
| 7056 | 7091 |
.vms .items-list li .img .os.kubuntu {
|
| 7057 | 7092 |
background-image: url("../images/os-kubuntu.png");
|
| 7058 | 7093 |
} |
| 7059 |
/* line 272, ../sass/app.scss */
|
|
| 7094 |
/* line 312, ../sass/app.scss */
|
|
| 7060 | 7095 |
.vms .items-list li .img .os.fedora {
|
| 7061 | 7096 |
background-image: url("../images/os-fedora.png");
|
| 7062 | 7097 |
} |
| 7063 | 7098 |
|
| 7064 |
/* line 279, ../sass/app.scss */
|
|
| 7099 |
/* line 319, ../sass/app.scss */
|
|
| 7065 | 7100 |
.lt-sidebar.vms {
|
| 7066 | 7101 |
font-size: 0.75em; |
| 7067 | 7102 |
} |
| 7068 |
/* line 282, ../sass/app.scss */
|
|
| 7103 |
/* line 322, ../sass/app.scss */
|
|
| 7069 | 7104 |
.lt-sidebar.vms .items-list li .img, |
| 7070 | 7105 |
.lt-sidebar.vms .items-list li .os {
|
| 7071 | 7106 |
background-size: 80%; |
| 7072 | 7107 |
} |
| 7073 | 7108 |
|
| 7074 |
/* line 288, ../sass/app.scss */
|
|
| 7109 |
/* line 328, ../sass/app.scss */
|
|
| 7075 | 7110 |
.vm .img {
|
| 7076 | 7111 |
background: url("../images/vm-on.png") no-repeat center center;
|
| 7077 | 7112 |
width: 56px; |
| ... | ... | |
| 7082 | 7117 |
margin-bottom: 20px; |
| 7083 | 7118 |
position: relative; |
| 7084 | 7119 |
} |
| 7085 |
/* line 292, ../sass/app.scss */
|
|
| 7120 |
/* line 332, ../sass/app.scss */
|
|
| 7086 | 7121 |
.vm .img.stopped {
|
| 7087 | 7122 |
background-image: url("../images/vm-stopped.png");
|
| 7088 | 7123 |
} |
| 7089 |
/* line 295, ../sass/app.scss */
|
|
| 7124 |
/* line 335, ../sass/app.scss */
|
|
| 7090 | 7125 |
.vm .img .os {
|
| 7091 | 7126 |
background: url("../images/os-unknown.png") no-repeat center center;
|
| 7092 | 7127 |
width: 22px; |
| ... | ... | |
| 7098 | 7133 |
top: 8px; |
| 7099 | 7134 |
left: 18px; |
| 7100 | 7135 |
} |
| 7101 |
/* line 300, ../sass/app.scss */
|
|
| 7136 |
/* line 340, ../sass/app.scss */
|
|
| 7102 | 7137 |
.vm .img .os.windows {
|
| 7103 | 7138 |
background-image: url("../images/os-windows.png");
|
| 7104 | 7139 |
} |
| 7105 |
/* line 301, ../sass/app.scss */
|
|
| 7140 |
/* line 341, ../sass/app.scss */
|
|
| 7106 | 7141 |
.vm .img .os.kubuntu {
|
| 7107 | 7142 |
background-image: url("../images/os-kubuntu.png");
|
| 7108 | 7143 |
} |
| 7109 |
/* line 302, ../sass/app.scss */
|
|
| 7144 |
/* line 342, ../sass/app.scss */
|
|
| 7110 | 7145 |
.vm .img .os.fedora {
|
| 7111 | 7146 |
background-image: url("../images/os-fedora.png");
|
| 7112 | 7147 |
} |
| 7113 | 7148 |
|
| 7114 |
/* line 308, ../sass/app.scss */
|
|
| 7149 |
/* line 348, ../sass/app.scss */
|
|
| 7115 | 7150 |
.details .top {
|
| 7116 | 7151 |
text-align: center; |
| 7117 | 7152 |
} |
| 7118 |
/* line 310, ../sass/app.scss */
|
|
| 7153 |
/* line 350, ../sass/app.scss */
|
|
| 7119 | 7154 |
.details .top .img {
|
| 7120 | 7155 |
background: url("../images/vm-on.png") no-repeat center center;
|
| 7121 | 7156 |
width: 112px; |
| ... | ... | |
| 7125 | 7160 |
overflow: hidden; |
| 7126 | 7161 |
background-size: 100%; |
| 7127 | 7162 |
} |
| 7128 |
/* line 314, ../sass/app.scss */
|
|
| 7163 |
/* line 354, ../sass/app.scss */
|
|
| 7129 | 7164 |
.details .top .os {
|
| 7130 | 7165 |
background-size: 100%; |
| 7131 | 7166 |
width: 44px; |
| ... | ... | |
| 7133 | 7168 |
left: 36px; |
| 7134 | 7169 |
top: 16px; |
| 7135 | 7170 |
} |
| 7136 |
/* line 322, ../sass/app.scss */
|
|
| 7171 |
/* line 362, ../sass/app.scss */
|
|
| 7137 | 7172 |
.details .top .actions ul {
|
| 7138 | 7173 |
padding: 1em; |
| 7139 | 7174 |
text-align: center; |
| 7140 | 7175 |
} |
| 7141 |
/* line 325, ../sass/app.scss */
|
|
| 7176 |
/* line 365, ../sass/app.scss */
|
|
| 7142 | 7177 |
.details .top .actions ul li {
|
| 7143 | 7178 |
list-style: none outside none; |
| 7144 | 7179 |
display: inline-block; |
| 7145 | 7180 |
margin: 0 10px; |
| 7146 | 7181 |
min-width: 112px; |
| 7147 | 7182 |
} |
| 7148 |
/* line 330, ../sass/app.scss */ |
|
| 7149 |
.details .top .actions ul li a {
|
|
| 7150 |
display: block; |
|
| 7151 |
padding: 5px 20px; |
|
| 7152 |
text-align: center; |
|
| 7153 |
border: 1px solid #919194; |
|
| 7154 |
} |
|
| 7155 |
/* line 335, ../sass/app.scss */ |
|
| 7156 |
.details .top .actions ul li a:hover {
|
|
| 7157 |
border-color: #ff7bac; |
|
| 7158 |
background: #ff7bac; |
|
| 7159 |
color: white; |
|
| 7160 |
} |
|
| 7161 |
/* line 348, ../sass/app.scss */ |
|
| 7183 |
/* line 380, ../sass/app.scss */ |
|
| 7162 | 7184 |
.details .info dl {
|
| 7163 | 7185 |
margin: 0; |
| 7164 | 7186 |
} |
| 7165 |
/* line 350, ../sass/app.scss */
|
|
| 7187 |
/* line 382, ../sass/app.scss */
|
|
| 7166 | 7188 |
.details .info dl dt {
|
| 7167 | 7189 |
display: inline-block; |
| 7168 | 7190 |
width: 25%; |
| 7169 | 7191 |
float: left; |
| 7170 | 7192 |
} |
| 7171 | 7193 |
|
| 7172 |
/* line 359, ../sass/app.scss */
|
|
| 7194 |
/* line 391, ../sass/app.scss */
|
|
| 7173 | 7195 |
.border-bottom-style1 {
|
| 7174 | 7196 |
padding-bottom: 20px; |
| 7175 | 7197 |
margin-bottom: 20px; |
| 7176 | 7198 |
border-bottom: 2px dashed #919194; |
| 7177 | 7199 |
} |
| 7178 | 7200 |
|
| 7179 |
/* line 365, ../sass/app.scss */
|
|
| 7201 |
/* line 397, ../sass/app.scss */
|
|
| 7180 | 7202 |
.overlay {
|
| 7181 | 7203 |
background: #ff7bac; |
| 7182 | 7204 |
} |
| 7183 |
/* line 367, ../sass/app.scss */ |
|
| 7184 |
.overlay a {
|
|
| 7185 |
color: white; |
|
| 7186 |
} |
|
| 7187 |
/* line 369, ../sass/app.scss */ |
|
| 7188 |
.overlay a:hover {
|
|
| 7189 |
text-decoration: underline; |
|
| 7190 |
} |
|
| 7191 |
/* line 373, ../sass/app.scss */ |
|
| 7205 |
/* line 399, ../sass/app.scss */ |
|
| 7192 | 7206 |
.overlay .lt-sidebar {
|
| 7193 | 7207 |
border-right: 1px solid white; |
| 7194 | 7208 |
} |
| 7195 |
/* line 376, ../sass/app.scss */
|
|
| 7209 |
/* line 402, ../sass/app.scss */
|
|
| 7196 | 7210 |
.overlay .lt-sidebar ul li {
|
| 7197 | 7211 |
list-style: none outside none; |
| 7198 | 7212 |
} |
| 7199 |
/* line 379, ../sass/app.scss */ |
|
| 7213 |
/* line 404, ../sass/app.scss */ |
|
| 7214 |
.overlay .lt-sidebar ul li a {
|
|
| 7215 |
color: white; |
|
| 7216 |
} |
|
| 7217 |
/* line 406, ../sass/app.scss */ |
|
| 7200 | 7218 |
.overlay .lt-sidebar ul li a span {
|
| 7201 | 7219 |
float: right; |
| 7202 | 7220 |
display: none; |
| 7203 | 7221 |
} |
| 7204 |
/* line 381, ../sass/app.scss */
|
|
| 7222 |
/* line 408, ../sass/app.scss */
|
|
| 7205 | 7223 |
.overlay .lt-sidebar ul li a:hover, .overlay .lt-sidebar ul li a.current {
|
| 7206 | 7224 |
text-decoration: none; |
| 7207 | 7225 |
} |
| 7208 |
/* line 384, ../sass/app.scss */
|
|
| 7226 |
/* line 411, ../sass/app.scss */
|
|
| 7209 | 7227 |
.overlay .lt-sidebar ul li a:hover span, .overlay .lt-sidebar ul li a.current span {
|
| 7210 | 7228 |
display: inline; |
| 7211 | 7229 |
} |
| 7212 |
/* line 393, ../sass/app.scss */
|
|
| 7230 |
/* line 421, ../sass/app.scss */
|
|
| 7213 | 7231 |
.overlay .lt-sidebar, |
| 7214 | 7232 |
.overlay .main {
|
| 7215 | 7233 |
padding: 100px 2.5em; |
| 7216 | 7234 |
} |
| 7235 |
/* line 425, ../sass/app.scss */ |
|
| 7236 |
.overlay .navigation .rt {
|
|
| 7237 |
float: right; |
|
| 7238 |
} |
|
| 7217 | 7239 |
|
| 7218 |
/* line 400, ../sass/app.scss */
|
|
| 7240 |
/* line 433, ../sass/app.scss */
|
|
| 7219 | 7241 |
.create-vm .select-os li {
|
| 7220 | 7242 |
width: 23%; |
| 7221 | 7243 |
padding: 20px; |
| 7222 | 7244 |
list-style: none outside none; |
| 7223 | 7245 |
display: inline-block; |
| 7224 | 7246 |
float: left; |
| 7225 |
height: 220px;
|
|
| 7247 |
height: 200px;
|
|
| 7226 | 7248 |
margin: 0 10px 10px 0; |
| 7227 | 7249 |
} |
| 7228 |
/* line 409, ../sass/app.scss */
|
|
| 7250 |
/* line 442, ../sass/app.scss */
|
|
| 7229 | 7251 |
.create-vm .select-os li:hover, .create-vm .select-os li.selected {
|
| 7230 | 7252 |
background: white; |
| 7231 | 7253 |
} |
| 7232 |
/* line 411, ../sass/app.scss */
|
|
| 7254 |
/* line 444, ../sass/app.scss */
|
|
| 7233 | 7255 |
.create-vm .select-os li:hover h2, .create-vm .select-os li:hover p, .create-vm .select-os li:hover a, .create-vm .select-os li.selected h2, .create-vm .select-os li.selected p, .create-vm .select-os li.selected a {
|
| 7234 | 7256 |
color: #ff7bac; |
| 7235 | 7257 |
} |
| 7236 |
/* line 415, ../sass/app.scss */ |
|
| 7258 |
/* line 448, ../sass/app.scss */ |
|
| 7259 |
.create-vm .select-os li a {
|
|
| 7260 |
color: white; |
|
| 7261 |
} |
|
| 7262 |
/* line 451, ../sass/app.scss */ |
|
| 7237 | 7263 |
.create-vm .select-os li .os {
|
| 7238 | 7264 |
background: url("../images/os-unknown.png") no-repeat center center;
|
| 7239 | 7265 |
width: 30px; |
| ... | ... | |
| 7244 | 7270 |
background-size: 100%; |
| 7245 | 7271 |
margin-bottom: 2em; |
| 7246 | 7272 |
} |
| 7247 |
/* line 419, ../sass/app.scss */
|
|
| 7273 |
/* line 455, ../sass/app.scss */
|
|
| 7248 | 7274 |
.create-vm .select-os li .os.windows {
|
| 7249 | 7275 |
background-image: url("../images/os-windows.png");
|
| 7250 | 7276 |
} |
| 7251 |
/* line 420, ../sass/app.scss */
|
|
| 7277 |
/* line 456, ../sass/app.scss */
|
|
| 7252 | 7278 |
.create-vm .select-os li .os.kubuntu {
|
| 7253 | 7279 |
background-image: url("../images/os-kubuntu.png");
|
| 7254 | 7280 |
} |
| 7255 |
/* line 421, ../sass/app.scss */
|
|
| 7281 |
/* line 457, ../sass/app.scss */
|
|
| 7256 | 7282 |
.create-vm .select-os li .os.fedora {
|
| 7257 | 7283 |
background-image: url("../images/os-fedora.png");
|
| 7258 | 7284 |
} |
| 7259 |
/* line 423, ../sass/app.scss */
|
|
| 7285 |
/* line 459, ../sass/app.scss */
|
|
| 7260 | 7286 |
.create-vm .select-os li h2 {
|
| 7261 | 7287 |
font-size: 1em; |
| 7262 | 7288 |
font-weight: normal; |
| 7263 | 7289 |
color: white; |
| 7264 | 7290 |
} |
| 7265 |
/* line 428, ../sass/app.scss */
|
|
| 7291 |
/* line 464, ../sass/app.scss */
|
|
| 7266 | 7292 |
.create-vm .select-os li .details {
|
| 7267 | 7293 |
font-weight: bold; |
| 7268 | 7294 |
font-size: 0.875em; |
| 7269 | 7295 |
} |
| 7270 |
|
|
| 7271 |
/* line 437, ../sass/app.scss */ |
|
| 7272 |
.navigation a {
|
|
| 7296 |
/* line 471, ../sass/app.scss */ |
|
| 7297 |
.create-vm .select-flavor dl {
|
|
| 7298 |
color: white; |
|
| 7299 |
font-size: 1.25em; |
|
| 7300 |
margin-bottom: 10px; |
|
| 7301 |
} |
|
| 7302 |
/* line 475, ../sass/app.scss */ |
|
| 7303 |
.create-vm .select-flavor dl dd {
|
|
| 7304 |
width: 23%; |
|
| 7273 | 7305 |
display: inline-block; |
| 7274 |
padding: 10px 20px; |
|
| 7275 |
background: white; |
|
| 7276 |
text-align: center; |
|
| 7277 |
color: #ff7bac; |
|
| 7278 |
border: 1px solid #ff7bac; |
|
| 7279 | 7306 |
} |
| 7280 |
/* line 444, ../sass/app.scss */ |
|
| 7281 |
.navigation a:hover {
|
|
| 7282 |
border-color: white; |
|
| 7283 |
background: transparent; |
|
| 7284 |
color: white; |
|
| 7285 |
text-decoration: none; |
|
| 7307 |
/* line 479, ../sass/app.scss */ |
|
| 7308 |
.create-vm .select-flavor dl dt {
|
|
| 7309 |
width: 70%; |
|
| 7310 |
display: inline-block; |
|
| 7311 |
font-weight: normal; |
|
| 7286 | 7312 |
} |
| 7287 |
/* line 450, ../sass/app.scss */ |
|
| 7288 |
.navigation a.rt {
|
|
| 7289 |
float: right; |
|
| 7313 |
/* line 483, ../sass/app.scss */ |
|
| 7314 |
.create-vm .select-flavor dl dt span {
|
|
| 7315 |
min-width: 90px; |
|
| 7316 |
margin: 0 10px; |
|
| 7317 |
} |
|
| 7318 |
/* line 487, ../sass/app.scss */ |
|
| 7319 |
.create-vm .select-flavor dl dt span:first-child {
|
|
| 7320 |
margin-left: 0; |
|
| 7290 | 7321 |
} |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_create_a_v1.html | ||
|---|---|---|
| 1 |
|
|
| 2 |
<!DOCTYPE html> |
|
| 3 |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> |
|
| 4 |
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> |
|
| 5 |
|
|
| 6 |
<head> |
|
| 7 |
<meta charset="utf-8" /> |
|
| 8 |
<meta name="viewport" content="width=device-width" /> |
|
| 9 |
<title>Synnefo | VM list</title> |
|
| 10 |
<link rel="stylesheet" href="stylesheets/normalize.css" /> |
|
| 11 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
|
| 12 |
|
|
| 13 |
<script src="javascripts/vendor/custom.modernizr.js"></script> |
|
| 14 |
|
|
| 15 |
</head> |
|
| 16 |
<body> |
|
| 17 |
<div class="dummy-navigation"> |
|
| 18 |
<a href="" class="close">X</a> |
|
| 19 |
<a href="index.html">Homepage</a><br> |
|
| 20 |
<a href="" class="our" data-our="questions">Show/Hide questions</a><br> |
|
| 21 |
<a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br> |
|
| 22 |
<a href="" class="our" data-our="problems">Show/Hide problems</a><br> |
|
| 23 |
</div> |
|
| 24 |
<div class="row-full"> |
|
| 25 |
<header class="header"> |
|
| 26 |
<!-- logo --> |
|
| 27 |
<div class="logo"> |
|
| 28 |
<img src="http://dummyimage.com/300x100/000/fff" alt="software logo"> |
|
| 29 |
</div> |
|
| 30 |
<div class="new-btn"><a href="" class="current"><span>+</span> NEW MACHINE </a></div> |
|
| 31 |
<!-- icons-nav --> |
|
| 32 |
<nav class="top-nav icons-nav"> |
|
| 33 |
|
|
| 34 |
<ul> |
|
| 35 |
<li><a href="" data-tooltip class="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li> |
|
| 36 |
<li><a href="" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li> |
|
| 37 |
|
|
| 38 |
<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li> |
|
| 39 |
<li><a href="" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li> |
|
| 40 |
</ul> |
|
| 41 |
|
|
| 42 |
</nav> |
|
| 43 |
|
|
| 44 |
<!-- login functionality --> |
|
| 45 |
<div class="login"> |
|
| 46 |
<a href="">test@grnet.gr</a> |
|
| 47 |
</div> |
|
| 48 |
<!-- extra actions --> |
|
| 49 |
<div class="actions"> |
|
| 50 |
|
|
| 51 |
<div class="lt-actions"></div> |
|
| 52 |
<div class="main-actions"> |
|
| 53 |
<ul> |
|
| 54 |
<li><a href="">Reboot</a></li> |
|
| 55 |
<li><a href="">Shutdown</a></li> |
|
| 56 |
<li><a href="">Console</a></li> |
|
| 57 |
<li><a href="">Action1</a></li> |
|
| 58 |
<li><a href="">Action2</a></li> |
|
| 59 |
</ul> |
|
| 60 |
</div> |
|
| 61 |
</div> |
|
| 62 |
</header> |
|
| 63 |
|
|
| 64 |
</div> |
|
| 65 |
<div class="row-full wrapper "> |
|
| 66 |
<div class="overlay create-vm"> |
|
| 67 |
<div class="lt-sidebar"> |
|
| 68 |
<ul> |
|
| 69 |
<li><a href="#">Image type<span>></span></a></li> |
|
| 70 |
<li><a href="#" class="current">System<span>></span></a></li> |
|
| 71 |
<li><a href="#">My images<span>></span></a></li> |
|
| 72 |
<li><a href="#">Shared with me<span>></span></a></li> |
|
| 73 |
</ul> |
|
| 74 |
<ul> |
|
| 75 |
<li><a href="#">Categories<span>></span></a></li> |
|
| 76 |
|
|
| 77 |
</ul> |
|
| 78 |
</div> |
|
| 79 |
<div class="main"> |
|
| 80 |
<div class="select-os"> |
|
| 81 |
<ul class="clearfix"> |
|
| 82 |
<li> |
|
| 83 |
<div class="os kubuntu">kubuntu</div> |
|
| 84 |
<h2>kubuntu sidufsoi foisdu fso</h2> |
|
| 85 |
<p class="details"><a href="">details</a></p> |
|
| 86 |
</li> |
|
| 87 |
<li> |
|
| 88 |
<div class="os fedora">fedora</div> |
|
| 89 |
<h2>fedora </h2> |
|
| 90 |
<p class="details"><a href="">details</a></p> |
|
| 91 |
</li> |
|
| 92 |
<li> |
|
| 93 |
<div class="os windows">windows</div> |
|
| 94 |
<h2>Windows </h2> |
|
| 95 |
<p class="details"><a href="">details</a></p> |
|
| 96 |
</li> |
|
| 97 |
<li> |
|
| 98 |
<div class="os kubuntu">windows</div> |
|
| 99 |
<h2>Windows </h2> |
|
| 100 |
<p class="details"><a href="">details</a></p> |
|
| 101 |
</li> |
|
| 102 |
<li> |
|
| 103 |
<div class="os kubuntu">windows</div> |
|
| 104 |
<h2>Windows </h2> |
|
| 105 |
<p class="details"><a href="">details</a></p> |
|
| 106 |
</li> |
|
| 107 |
<li> |
|
| 108 |
<div class="os fedora">windows</div> |
|
| 109 |
<h2>Windows </h2> |
|
| 110 |
<p class="details"><a href="">details</a></p> |
|
| 111 |
</li> |
|
| 112 |
</ul> |
|
| 113 |
</div> |
|
| 114 |
<div class="navigation clearfix"> |
|
| 115 |
<a class="lt btn2" href="">PREVIOUS</a> |
|
| 116 |
<a class="rt btn2" href="vm_create_b_v1.html" title="next step">NEXT</a> |
|
| 117 |
</div> |
|
| 118 |
</div> |
|
| 119 |
</div> |
|
| 120 |
|
|
| 121 |
</div> |
|
| 122 |
<div class="extras"> |
|
| 123 |
<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span> |
|
| 124 |
<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span> |
|
| 125 |
<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span> |
|
| 126 |
</div> |
|
| 127 |
|
|
| 128 |
<script src="javascripts/vendor/jquery.js"></script> |
|
| 129 |
<script src="javascripts/foundation/foundation.js"></script> |
|
| 130 |
|
|
| 131 |
<script src="javascripts/foundation/foundation.alerts.js"></script> |
|
| 132 |
|
|
| 133 |
<script src="javascripts/foundation/foundation.clearing.js"></script> |
|
| 134 |
|
|
| 135 |
<script src="javascripts/foundation/foundation.cookie.js"></script> |
|
| 136 |
|
|
| 137 |
<script src="javascripts/foundation/foundation.dropdown.js"></script> |
|
| 138 |
|
|
| 139 |
<script src="javascripts/foundation/foundation.forms.js"></script> |
|
| 140 |
|
|
| 141 |
<script src="javascripts/foundation/foundation.joyride.js"></script> |
|
| 142 |
|
|
| 143 |
<script src="javascripts/foundation/foundation.magellan.js"></script> |
|
| 144 |
|
|
| 145 |
<script src="javascripts/foundation/foundation.orbit.js"></script> |
|
| 146 |
|
|
| 147 |
<script src="javascripts/foundation/foundation.placeholder.js"></script> |
|
| 148 |
|
|
| 149 |
<script src="javascripts/foundation/foundation.reveal.js"></script> |
|
| 150 |
|
|
| 151 |
<script src="javascripts/foundation/foundation.section.js"></script> |
|
| 152 |
|
|
| 153 |
<script src="javascripts/foundation/foundation.tooltips.js"></script> |
|
| 154 |
|
|
| 155 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
|
| 156 |
<script src="javascripts/common.js"></script> |
|
| 157 |
|
|
| 158 |
|
|
| 159 |
<script> |
|
| 160 |
$(document).foundation(); |
|
| 161 |
</script> |
|
| 162 |
</body> |
|
| 163 |
</html> |
|
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_create_b_v1.html | ||
|---|---|---|
| 1 |
|
|
| 2 |
<!DOCTYPE html> |
|
| 3 |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> |
|
| 4 |
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> |
|
| 5 |
|
|
| 6 |
<head> |
|
| 7 |
<meta charset="utf-8" /> |
|
| 8 |
<meta name="viewport" content="width=device-width" /> |
|
| 9 |
<title>Synnefo | VM list</title> |
|
| 10 |
<link rel="stylesheet" href="stylesheets/normalize.css" /> |
|
| 11 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
|
| 12 |
|
|
| 13 |
<script src="javascripts/vendor/custom.modernizr.js"></script> |
|
| 14 |
|
|
| 15 |
</head> |
|
| 16 |
<body> |
|
| 17 |
<div class="dummy-navigation"> |
|
| 18 |
<a href="" class="close">X</a> |
|
| 19 |
<a href="index.html">Homepage</a><br> |
|
| 20 |
<a href="" class="our" data-our="questions">Show/Hide questions</a><br> |
|
| 21 |
<a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br> |
|
| 22 |
<a href="" class="our" data-our="problems">Show/Hide problems</a><br> |
|
| 23 |
</div> |
|
| 24 |
<div class="row-full"> |
|
| 25 |
<header class="header"> |
|
| 26 |
<!-- logo --> |
|
| 27 |
<div class="logo"> |
|
| 28 |
<img src="http://dummyimage.com/300x100/000/fff" alt="software logo"> |
|
| 29 |
</div> |
|
| 30 |
<div class="new-btn"><a href="" class="current"><span>+</span> NEW MACHINE </a></div> |
|
| 31 |
<!-- icons-nav --> |
|
| 32 |
<nav class="top-nav icons-nav"> |
|
| 33 |
|
|
| 34 |
<ul> |
|
| 35 |
<li><a href="" data-tooltip class="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li> |
|
| 36 |
<li><a href="" data-tooltip class="has-tip" title="Compute"><img src="images/menu-icon-compute.png" alt="vm"></a></li> |
|
| 37 |
|
|
| 38 |
<li><a href="" data-tooltip class="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li> |
|
| 39 |
<li><a href="" data-tooltip class="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li> |
|
| 40 |
</ul> |
|
| 41 |
|
|
| 42 |
</nav> |
|
| 43 |
|
|
| 44 |
<!-- login functionality --> |
|
| 45 |
<div class="login"> |
|
| 46 |
<a href="">test@grnet.gr</a> |
|
| 47 |
</div> |
|
| 48 |
<!-- extra actions --> |
|
| 49 |
<div class="actions"> |
|
| 50 |
|
|
| 51 |
<div class="lt-actions"></div> |
|
| 52 |
<div class="main-actions"> |
|
| 53 |
<ul> |
|
| 54 |
<li><a href="">Reboot</a></li> |
|
| 55 |
<li><a href="">Shutdown</a></li> |
|
| 56 |
<li><a href="">Console</a></li> |
|
| 57 |
<li><a href="">Action1</a></li> |
|
| 58 |
<li><a href="">Action2</a></li> |
|
| 59 |
</ul> |
|
| 60 |
</div> |
|
| 61 |
</div> |
|
| 62 |
</header> |
|
| 63 |
|
|
| 64 |
</div> |
|
| 65 |
<div class="row-full wrapper "> |
|
| 66 |
<div class="overlay create-vm"> |
|
| 67 |
<div class="lt-sidebar"> |
|
| 68 |
<ul> |
|
| 69 |
<li><a href="#">Predefined<span>></span></a></li> |
|
| 70 |
<li><a href="#" class="current">Small<span>></span></a></li> |
|
| 71 |
<li><a href="#">Medium<span>></span></a></li> |
|
| 72 |
<li><a href="#">Large<span>></span></a></li> |
|
| 73 |
</ul> |
|
| 74 |
|
|
| 75 |
</div> |
|
| 76 |
<div class="main"> |
|
| 77 |
<div class="select-flavor"> |
|
| 78 |
<dl class="clearfix"> |
|
| 79 |
<dd><strong>Cpu</strong> (x cores)</dd> |
|
| 80 |
<dt><span>1</span><span>2</span><span>4</span></dt> |
|
| 81 |
</dl> |
|
| 82 |
<dl class="clearfix"> |
|
| 83 |
<dd><strong>Disk Size</strong> (GB)</dd> |
|
| 84 |
<dt><span>10</span><span>20</span><span>40</span></dt> |
|
| 85 |
</dl> |
|
| 86 |
<dl class="clearfix"> |
|
| 87 |
<dd><strong>Memory Size</strong> (MB)</dd> |
|
| 88 |
<dt><span>1024</span><span>2048</span><span>4096</span></dt> |
|
| 89 |
</dl> |
|
| 90 |
<dl class="clearfix"> |
|
| 91 |
<dd><strong>Storage</strong></dd> |
|
| 92 |
<dt><span>Standard</span><span>Rdb</span><span>Local</span></dt> |
|
| 93 |
</dl> |
|
| 94 |
</div> |
|
| 95 |
<div class="navigation clearfix"> |
|
| 96 |
<a class="lt btn2" href="">PREVIOUS</a> |
|
| 97 |
<a class="rt btn2" href="vm_create_b_v1.html">NEXT</a> |
|
| 98 |
</div> |
|
| 99 |
</div> |
|
| 100 |
</div> |
|
| 101 |
|
|
| 102 |
</div> |
|
| 103 |
<div class="extras"> |
|
| 104 |
<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span> |
|
| 105 |
<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span> |
|
| 106 |
<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span> |
|
| 107 |
</div> |
|
| 108 |
|
|
| 109 |
<script src="javascripts/vendor/jquery.js"></script> |
|
| 110 |
<script src="javascripts/foundation/foundation.js"></script> |
|
| 111 |
|
|
| 112 |
<script src="javascripts/foundation/foundation.alerts.js"></script> |
|
| 113 |
|
|
| 114 |
<script src="javascripts/foundation/foundation.clearing.js"></script> |
|
| 115 |
|
|
| 116 |
<script src="javascripts/foundation/foundation.cookie.js"></script> |
|
| 117 |
|
|
| 118 |
<script src="javascripts/foundation/foundation.dropdown.js"></script> |
|
| 119 |
|
|
| 120 |
<script src="javascripts/foundation/foundation.forms.js"></script> |
|
| 121 |
|
|
| 122 |
<script src="javascripts/foundation/foundation.joyride.js"></script> |
|
| 123 |
|
|
| 124 |
<script src="javascripts/foundation/foundation.magellan.js"></script> |
|
| 125 |
|
|
| 126 |
<script src="javascripts/foundation/foundation.orbit.js"></script> |
|
| 127 |
|
|
| 128 |
<script src="javascripts/foundation/foundation.placeholder.js"></script> |
|
| 129 |
|
|
| 130 |
<script src="javascripts/foundation/foundation.reveal.js"></script> |
|
| 131 |
|
|
| 132 |
<script src="javascripts/foundation/foundation.section.js"></script> |
|
| 133 |
|
|
| 134 |
<script src="javascripts/foundation/foundation.tooltips.js"></script> |
|
| 135 |
|
|
| 136 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
|
| 137 |
<script src="javascripts/common.js"></script> |
|
| 138 |
|
|
| 139 |
|
|
| 140 |
<script> |
|
| 141 |
$(document).foundation(); |
|
| 142 |
</script> |
|
| 143 |
</body> |
|
| 144 |
</html> |
|
Also available in: Unified diff