Revision 2d47196d
b/snf-cyclades-app/synnefo/ui/new_ui/ui/images/close-outline-01.svg | ||
---|---|---|
1 |
<?xml version="1.0" encoding="utf-8"?> |
|
2 |
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> |
|
3 |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
|
4 |
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
|
5 |
width="960px" height="560px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve"> |
|
6 |
<style type="text/css"> |
|
7 |
<![CDATA[ |
|
8 |
.st0{fill:none;stroke:#FFFFFF;} |
|
9 |
.st1{font-family:'OpenSans-Light';} |
|
10 |
.st2{fill:#FFFFED;} |
|
11 |
.st3{font-size:14;} |
|
12 |
]]> |
|
13 |
</style> |
|
14 |
<g> |
|
15 |
<circle class="st0" cx="480.335" cy="280.04" r="14.232"/> |
|
16 |
<g> |
|
17 |
<text transform="matrix(1.0253 0 0 1 476.6167 284.7578)" class="st2 st1 st3">X</text> |
|
18 |
</g> |
|
19 |
</g> |
|
20 |
</svg> |
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 | 25 |
<a href="testIconFonts/test.html">Sample page for Icon-Font</a> |
25 | 26 |
</p> |
26 | 27 |
</div> |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js | ||
---|---|---|
28 | 28 |
}); |
29 | 29 |
|
30 | 30 |
ui.setSidebarHeight(); |
31 |
|
|
31 |
$('.select-os li').click(function(e){ |
|
32 |
$('.select-os li').removeClass('selected'); |
|
33 |
$(this).addClass('selected'); |
|
34 |
}) |
|
32 | 35 |
|
33 | 36 |
}) |
34 | 37 |
|
35 | 38 |
$(window).resize(function(e){ |
36 | 39 |
ui.setSidebarHeight(); |
37 |
|
|
40 |
|
|
38 | 41 |
}) |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss | ||
---|---|---|
45 | 45 |
$header-padding-vertical:emCalc(20px); |
46 | 46 |
$header-padding-horizontal:emCalc(40px); |
47 | 47 |
|
48 |
|
|
48 | 49 |
// We use these to control inset shadow shiny edges and depressions. |
49 | 50 |
// $shiny-edge-size: 0 1px 0; |
50 | 51 |
// $shiny-edge-color: rgba(#fff, .5); |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss | ||
---|---|---|
44 | 44 |
// @import "foundation/components/tooltips"; |
45 | 45 |
// @import "foundation/components/dropdown"; |
46 | 46 |
|
47 |
|
|
47 |
.clearfix:before, |
|
48 |
.clearfix:after { content:" "; display:block; height:0; visibility:hidden; } /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */ |
|
49 |
.clearfix:after { clear:both; } |
|
48 | 50 |
// Set margin and padding to zero |
49 | 51 |
@mixin marginPaddingZero() { |
50 | 52 |
margin: 0; |
... | ... | |
125 | 127 |
} |
126 | 128 |
|
127 | 129 |
.lt-sidebar { |
128 |
max-width:200px;
|
|
130 |
width:250px;
|
|
129 | 131 |
float:left; |
130 | 132 |
overflow:scroll; |
131 | 133 |
height:300px; |
... | ... | |
177 | 179 |
span { |
178 | 180 |
font-size:emCalc(20px); |
179 | 181 |
} |
180 |
&:hover { |
|
182 |
&:hover, |
|
183 |
&.current { |
|
181 | 184 |
border-color:$secondary-color; |
182 | 185 |
background:$secondary-color; |
183 | 186 |
color:$white; |
... | ... | |
357 | 360 |
padding-bottom:20px; |
358 | 361 |
margin-bottom:20px; |
359 | 362 |
border-bottom:2px dashed $primary-color; |
363 |
} |
|
364 |
|
|
365 |
.overlay { |
|
366 |
background:$secondary-color; |
|
367 |
a { |
|
368 |
color:$white; |
|
369 |
&:hover { |
|
370 |
text-decoration: underline; |
|
371 |
} |
|
372 |
} |
|
373 |
.lt-sidebar { |
|
374 |
border-right:1px solid $white; |
|
375 |
ul { |
|
376 |
li { |
|
377 |
list-style:none outside none; |
|
378 |
a { |
|
379 |
span { float:right; display:none;} |
|
380 |
&:hover, |
|
381 |
&.current { |
|
382 |
|
|
383 |
text-decoration: none; |
|
384 |
span { |
|
385 |
display:inline; |
|
386 |
} |
|
387 |
} |
|
388 |
} |
|
389 |
} |
|
390 |
} |
|
391 |
} |
|
392 |
.lt-sidebar, |
|
393 |
.main { |
|
394 |
padding:100px $header-padding-horizontal; |
|
395 |
} |
|
396 |
} |
|
397 |
|
|
398 |
.create-vm { |
|
399 |
.select-os { |
|
400 |
li { |
|
401 |
width:23%; |
|
402 |
padding:20px; |
|
403 |
list-style:none outside none; |
|
404 |
display: inline-block; |
|
405 |
float: left; |
|
406 |
height: 220px; |
|
407 |
margin:0 10px 10px 0; |
|
408 |
&:hover, |
|
409 |
&.selected { |
|
410 |
background:$white; |
|
411 |
h2, p, a { |
|
412 |
color:$secondary-color; |
|
413 |
} |
|
414 |
} |
|
415 |
.os { |
|
416 |
@include sprite('../images/os-unknown.png', 30px, 30px); |
|
417 |
background-size:100%; |
|
418 |
margin-bottom:2em; |
|
419 |
&.windows { background-image:url('../images/os-windows.png'); } |
|
420 |
&.kubuntu { background-image:url('../images/os-kubuntu.png'); } |
|
421 |
&.fedora { background-image:url('../images/os-fedora.png'); } |
|
422 |
} |
|
423 |
h2 { |
|
424 |
font-size:emCalc(16px); |
|
425 |
font-weight:normal; |
|
426 |
color:$white; |
|
427 |
} |
|
428 |
.details { |
|
429 |
font-weight:bold; |
|
430 |
font-size:emCalc(14px); |
|
431 |
} |
|
432 |
} |
|
433 |
} |
|
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; |
|
447 |
color:$white; |
|
448 |
text-decoration:none; |
|
449 |
} |
|
450 |
&.rt { |
|
451 |
float:right; |
|
452 |
} |
|
453 |
} |
|
360 | 454 |
} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
---|---|---|
6787 | 6787 |
max-width: 800px; |
6788 | 6788 |
} |
6789 | 6789 |
|
6790 |
/* line 84, ../sass/app.scss */ |
|
6790 |
/* line 48, ../sass/app.scss */ |
|
6791 |
.clearfix:before, |
|
6792 |
.clearfix:after { |
|
6793 |
content: " "; |
|
6794 |
display: block; |
|
6795 |
height: 0; |
|
6796 |
visibility: hidden; |
|
6797 |
} |
|
6798 |
|
|
6799 |
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */ |
|
6800 |
/* line 49, ../sass/app.scss */ |
|
6801 |
.clearfix:after { |
|
6802 |
clear: both; |
|
6803 |
} |
|
6804 |
|
|
6805 |
/* line 86, ../sass/app.scss */ |
|
6791 | 6806 |
a:hover { |
6792 | 6807 |
-webkit-transition: background 300ms ease-out; |
6793 | 6808 |
-moz-transition: background 300ms ease-out; |
... | ... | |
6796 | 6811 |
transition: background 300ms ease-out; |
6797 | 6812 |
} |
6798 | 6813 |
|
6799 |
/* line 88, ../sass/app.scss */
|
|
6814 |
/* line 90, ../sass/app.scss */
|
|
6800 | 6815 |
.dummy-navigation { |
6801 | 6816 |
position: fixed; |
6802 | 6817 |
right: 0; |
... | ... | |
6806 | 6821 |
z-index: 100; |
6807 | 6822 |
line-height: 160%; |
6808 | 6823 |
} |
6809 |
/* line 96, ../sass/app.scss */
|
|
6824 |
/* line 98, ../sass/app.scss */
|
|
6810 | 6825 |
.dummy-navigation a { |
6811 | 6826 |
color: black; |
6812 | 6827 |
} |
6813 |
/* line 98, ../sass/app.scss */
|
|
6828 |
/* line 100, ../sass/app.scss */
|
|
6814 | 6829 |
.dummy-navigation a:hover { |
6815 | 6830 |
color: white; |
6816 | 6831 |
} |
6817 |
/* line 99, ../sass/app.scss */
|
|
6832 |
/* line 101, ../sass/app.scss */
|
|
6818 | 6833 |
.dummy-navigation a.open { |
6819 | 6834 |
color: white; |
6820 | 6835 |
} |
6821 |
/* line 100, ../sass/app.scss */
|
|
6836 |
/* line 102, ../sass/app.scss */
|
|
6822 | 6837 |
.dummy-navigation a.close { |
6823 | 6838 |
float: right; |
6824 | 6839 |
font-weight: bold; |
6825 | 6840 |
font-size: 20px; |
6826 | 6841 |
} |
6827 | 6842 |
|
6828 |
/* line 108, ../sass/app.scss */
|
|
6843 |
/* line 110, ../sass/app.scss */
|
|
6829 | 6844 |
.ours { |
6830 | 6845 |
padding: 8px 15px; |
6831 | 6846 |
color: white; |
... | ... | |
6835 | 6850 |
display: none; |
6836 | 6851 |
position: absolute; |
6837 | 6852 |
} |
6838 |
/* line 116, ../sass/app.scss */
|
|
6853 |
/* line 118, ../sass/app.scss */
|
|
6839 | 6854 |
.ours.questions { |
6840 | 6855 |
background: orange; |
6841 | 6856 |
} |
6842 |
/* line 117, ../sass/app.scss */
|
|
6857 |
/* line 119, ../sass/app.scss */
|
|
6843 | 6858 |
.ours.problems { |
6844 | 6859 |
background: red; |
6845 | 6860 |
} |
6846 |
/* line 118, ../sass/app.scss */
|
|
6861 |
/* line 120, ../sass/app.scss */
|
|
6847 | 6862 |
.ours.suggestions { |
6848 | 6863 |
background: #3EC9FF; |
6849 | 6864 |
} |
6850 | 6865 |
|
6851 |
/* line 123, ../sass/app.scss */
|
|
6866 |
/* line 125, ../sass/app.scss */
|
|
6852 | 6867 |
.row-full { |
6853 | 6868 |
width: 100%; |
6854 | 6869 |
} |
6855 | 6870 |
|
6856 |
/* line 127, ../sass/app.scss */
|
|
6871 |
/* line 129, ../sass/app.scss */
|
|
6857 | 6872 |
.lt-sidebar { |
6858 |
max-width: 200px;
|
|
6873 |
width: 250px;
|
|
6859 | 6874 |
float: left; |
6860 | 6875 |
overflow: scroll; |
6861 | 6876 |
height: 300px; |
6862 | 6877 |
} |
6863 |
/* line 132, ../sass/app.scss */
|
|
6878 |
/* line 134, ../sass/app.scss */
|
|
6864 | 6879 |
.lt-sidebar + .main { |
6865 | 6880 |
overflow: hidden; |
6866 | 6881 |
} |
6867 | 6882 |
|
6868 |
/* line 137, ../sass/app.scss */
|
|
6883 |
/* line 139, ../sass/app.scss */
|
|
6869 | 6884 |
.main { |
6870 | 6885 |
padding: 20px 40px; |
6871 | 6886 |
} |
6872 | 6887 |
|
6873 |
/* line 142, ../sass/app.scss */
|
|
6888 |
/* line 144, ../sass/app.scss */
|
|
6874 | 6889 |
.header { |
6875 | 6890 |
position: relative; |
6876 | 6891 |
padding: 1.25em 2.5em; |
6877 | 6892 |
border-bottom: 1px solid #919194; |
6878 | 6893 |
} |
6879 |
/* line 146, ../sass/app.scss */
|
|
6894 |
/* line 148, ../sass/app.scss */
|
|
6880 | 6895 |
.header .logo { |
6881 | 6896 |
text-align: center; |
6882 | 6897 |
} |
6883 |
/* line 149, ../sass/app.scss */
|
|
6898 |
/* line 151, ../sass/app.scss */
|
|
6884 | 6899 |
.header .actions { |
6885 | 6900 |
text-align: center; |
6886 | 6901 |
} |
6887 |
/* line 151, ../sass/app.scss */
|
|
6902 |
/* line 153, ../sass/app.scss */
|
|
6888 | 6903 |
.header .actions ul { |
6889 | 6904 |
margin: 1.25em 0 0; |
6890 | 6905 |
} |
6891 |
/* line 153, ../sass/app.scss */
|
|
6906 |
/* line 155, ../sass/app.scss */
|
|
6892 | 6907 |
.header .actions ul li { |
6893 | 6908 |
list-style: none outside none; |
6894 | 6909 |
display: inline-block; |
6895 | 6910 |
margin: 0 5px; |
6896 | 6911 |
} |
6897 |
/* line 157, ../sass/app.scss */
|
|
6912 |
/* line 159, ../sass/app.scss */
|
|
6898 | 6913 |
.header .actions ul li a { |
6899 | 6914 |
display: block; |
6900 | 6915 |
width: 100%; |
6901 | 6916 |
padding: 8px 20px; |
6902 | 6917 |
border: 1px solid transparent; |
6903 | 6918 |
} |
6904 |
/* line 162, ../sass/app.scss */
|
|
6919 |
/* line 164, ../sass/app.scss */
|
|
6905 | 6920 |
.header .actions ul li a:hover { |
6906 | 6921 |
border: 1px solid #ff7bac; |
6907 | 6922 |
} |
6908 |
/* line 169, ../sass/app.scss */
|
|
6923 |
/* line 171, ../sass/app.scss */
|
|
6909 | 6924 |
.header .new-btn { |
6910 | 6925 |
position: absolute; |
6911 | 6926 |
left: 2.5em; |
6912 | 6927 |
bottom: 1.25em; |
6913 | 6928 |
} |
6914 |
/* line 173, ../sass/app.scss */
|
|
6929 |
/* line 175, ../sass/app.scss */
|
|
6915 | 6930 |
.header .new-btn a { |
6916 | 6931 |
display: inline-block; |
6917 | 6932 |
padding: 10px 20px; |
6918 | 6933 |
border: 1px solid #919194; |
6919 | 6934 |
} |
6920 |
/* line 177, ../sass/app.scss */
|
|
6935 |
/* line 179, ../sass/app.scss */
|
|
6921 | 6936 |
.header .new-btn a span { |
6922 | 6937 |
font-size: 1.25em; |
6923 | 6938 |
} |
6924 |
/* line 180, ../sass/app.scss */
|
|
6925 |
.header .new-btn a:hover { |
|
6939 |
/* line 183, ../sass/app.scss */
|
|
6940 |
.header .new-btn a:hover, .header .new-btn a.current {
|
|
6926 | 6941 |
border-color: #ff7bac; |
6927 | 6942 |
background: #ff7bac; |
6928 | 6943 |
color: white; |
6929 | 6944 |
} |
6930 | 6945 |
|
6931 |
/* line 188, ../sass/app.scss */
|
|
6946 |
/* line 191, ../sass/app.scss */
|
|
6932 | 6947 |
.login { |
6933 | 6948 |
position: absolute; |
6934 | 6949 |
right: 2.5em; |
6935 | 6950 |
top: 1.25em; |
6936 | 6951 |
} |
6937 | 6952 |
|
6938 |
/* line 194, ../sass/app.scss */
|
|
6953 |
/* line 197, ../sass/app.scss */
|
|
6939 | 6954 |
.top-nav { |
6940 | 6955 |
position: absolute; |
6941 | 6956 |
left: 2.5em; |
6942 | 6957 |
top: 1.25em; |
6943 | 6958 |
} |
6944 |
/* line 198, ../sass/app.scss */
|
|
6959 |
/* line 201, ../sass/app.scss */
|
|
6945 | 6960 |
.top-nav ul { |
6946 | 6961 |
margin: 0; |
6947 | 6962 |
padding: 0; |
6948 | 6963 |
} |
6949 |
/* line 200, ../sass/app.scss */
|
|
6964 |
/* line 203, ../sass/app.scss */
|
|
6950 | 6965 |
.top-nav ul li { |
6951 | 6966 |
display: inline-block; |
6952 | 6967 |
margin-right: 15px; |
6953 | 6968 |
} |
6954 |
/* line 203, ../sass/app.scss */
|
|
6969 |
/* line 206, ../sass/app.scss */
|
|
6955 | 6970 |
.top-nav ul li a { |
6956 | 6971 |
padding-bottom: 5px; |
6957 | 6972 |
} |
6958 | 6973 |
|
6959 |
/* line 214, ../sass/app.scss */
|
|
6974 |
/* line 217, ../sass/app.scss */
|
|
6960 | 6975 |
.top-info { |
6961 | 6976 |
padding: 50px 100px; |
6962 | 6977 |
position: relative; |
6963 | 6978 |
} |
6964 |
/* line 217, ../sass/app.scss */
|
|
6979 |
/* line 220, ../sass/app.scss */
|
|
6965 | 6980 |
.top-info .close { |
6966 | 6981 |
position: absolute; |
6967 | 6982 |
right: 2.5em; |
... | ... | |
6974 | 6989 |
overflow: hidden; |
6975 | 6990 |
} |
6976 | 6991 |
|
6977 |
/* line 224, ../sass/app.scss */
|
|
6992 |
/* line 227, ../sass/app.scss */
|
|
6978 | 6993 |
.info.alert { |
6979 | 6994 |
background: #ff7bac; |
6980 | 6995 |
color: white; |
6981 | 6996 |
} |
6982 | 6997 |
|
6983 |
/* line 229, ../sass/app.scss */
|
|
6998 |
/* line 232, ../sass/app.scss */
|
|
6984 | 6999 |
.info.warning { |
6985 | 7000 |
background: #49ddc5; |
6986 | 7001 |
color: black; |
6987 | 7002 |
} |
6988 | 7003 |
|
6989 |
/* line 234, ../sass/app.scss */
|
|
7004 |
/* line 237, ../sass/app.scss */
|
|
6990 | 7005 |
.info.success { |
6991 | 7006 |
background: #5da423; |
6992 | 7007 |
color: white; |
6993 | 7008 |
} |
6994 | 7009 |
|
6995 |
/* line 239, ../sass/app.scss */
|
|
7010 |
/* line 242, ../sass/app.scss */
|
|
6996 | 7011 |
.items-list { |
6997 | 7012 |
padding: 50px 0; |
6998 | 7013 |
} |
6999 |
/* line 241, ../sass/app.scss */
|
|
7014 |
/* line 244, ../sass/app.scss */
|
|
7000 | 7015 |
.items-list li { |
7001 | 7016 |
text-align: center; |
7002 | 7017 |
padding: 20px; |
7003 | 7018 |
} |
7004 |
/* line 245, ../sass/app.scss */
|
|
7019 |
/* line 248, ../sass/app.scss */
|
|
7005 | 7020 |
.items-list li .visible-info span { |
7006 | 7021 |
display: block; |
7007 | 7022 |
} |
7008 | 7023 |
|
7009 |
/* line 255, ../sass/app.scss */
|
|
7024 |
/* line 258, ../sass/app.scss */
|
|
7010 | 7025 |
.vms .items-list li .img { |
7011 | 7026 |
background: url("../images/vm-on.png") no-repeat center center; |
7012 | 7027 |
width: 56px; |
... | ... | |
7017 | 7032 |
margin-bottom: 20px; |
7018 | 7033 |
position: relative; |
7019 | 7034 |
} |
7020 |
/* line 259, ../sass/app.scss */
|
|
7035 |
/* line 262, ../sass/app.scss */
|
|
7021 | 7036 |
.vms .items-list li .img.stopped { |
7022 | 7037 |
background-image: url("../images/vm-stopped.png"); |
7023 | 7038 |
} |
7024 |
/* line 262, ../sass/app.scss */
|
|
7039 |
/* line 265, ../sass/app.scss */
|
|
7025 | 7040 |
.vms .items-list li .img .os { |
7026 | 7041 |
background: url("../images/os-unknown.png") no-repeat center center; |
7027 | 7042 |
width: 22px; |
... | ... | |
7033 | 7048 |
top: 8px; |
7034 | 7049 |
left: 18px; |
7035 | 7050 |
} |
7036 |
/* line 267, ../sass/app.scss */
|
|
7051 |
/* line 270, ../sass/app.scss */
|
|
7037 | 7052 |
.vms .items-list li .img .os.windows { |
7038 | 7053 |
background-image: url("../images/os-windows.png"); |
7039 | 7054 |
} |
7040 |
/* line 268, ../sass/app.scss */
|
|
7055 |
/* line 271, ../sass/app.scss */
|
|
7041 | 7056 |
.vms .items-list li .img .os.kubuntu { |
7042 | 7057 |
background-image: url("../images/os-kubuntu.png"); |
7043 | 7058 |
} |
7044 |
/* line 269, ../sass/app.scss */
|
|
7059 |
/* line 272, ../sass/app.scss */
|
|
7045 | 7060 |
.vms .items-list li .img .os.fedora { |
7046 | 7061 |
background-image: url("../images/os-fedora.png"); |
7047 | 7062 |
} |
7048 | 7063 |
|
7049 |
/* line 276, ../sass/app.scss */
|
|
7064 |
/* line 279, ../sass/app.scss */
|
|
7050 | 7065 |
.lt-sidebar.vms { |
7051 | 7066 |
font-size: 0.75em; |
7052 | 7067 |
} |
7053 |
/* line 279, ../sass/app.scss */
|
|
7068 |
/* line 282, ../sass/app.scss */
|
|
7054 | 7069 |
.lt-sidebar.vms .items-list li .img, |
7055 | 7070 |
.lt-sidebar.vms .items-list li .os { |
7056 | 7071 |
background-size: 80%; |
7057 | 7072 |
} |
7058 | 7073 |
|
7059 |
/* line 285, ../sass/app.scss */
|
|
7074 |
/* line 288, ../sass/app.scss */
|
|
7060 | 7075 |
.vm .img { |
7061 | 7076 |
background: url("../images/vm-on.png") no-repeat center center; |
7062 | 7077 |
width: 56px; |
... | ... | |
7067 | 7082 |
margin-bottom: 20px; |
7068 | 7083 |
position: relative; |
7069 | 7084 |
} |
7070 |
/* line 289, ../sass/app.scss */
|
|
7085 |
/* line 292, ../sass/app.scss */
|
|
7071 | 7086 |
.vm .img.stopped { |
7072 | 7087 |
background-image: url("../images/vm-stopped.png"); |
7073 | 7088 |
} |
7074 |
/* line 292, ../sass/app.scss */
|
|
7089 |
/* line 295, ../sass/app.scss */
|
|
7075 | 7090 |
.vm .img .os { |
7076 | 7091 |
background: url("../images/os-unknown.png") no-repeat center center; |
7077 | 7092 |
width: 22px; |
... | ... | |
7083 | 7098 |
top: 8px; |
7084 | 7099 |
left: 18px; |
7085 | 7100 |
} |
7086 |
/* line 297, ../sass/app.scss */
|
|
7101 |
/* line 300, ../sass/app.scss */
|
|
7087 | 7102 |
.vm .img .os.windows { |
7088 | 7103 |
background-image: url("../images/os-windows.png"); |
7089 | 7104 |
} |
7090 |
/* line 298, ../sass/app.scss */
|
|
7105 |
/* line 301, ../sass/app.scss */
|
|
7091 | 7106 |
.vm .img .os.kubuntu { |
7092 | 7107 |
background-image: url("../images/os-kubuntu.png"); |
7093 | 7108 |
} |
7094 |
/* line 299, ../sass/app.scss */
|
|
7109 |
/* line 302, ../sass/app.scss */
|
|
7095 | 7110 |
.vm .img .os.fedora { |
7096 | 7111 |
background-image: url("../images/os-fedora.png"); |
7097 | 7112 |
} |
7098 | 7113 |
|
7099 |
/* line 305, ../sass/app.scss */
|
|
7114 |
/* line 308, ../sass/app.scss */
|
|
7100 | 7115 |
.details .top { |
7101 | 7116 |
text-align: center; |
7102 | 7117 |
} |
7103 |
/* line 307, ../sass/app.scss */
|
|
7118 |
/* line 310, ../sass/app.scss */
|
|
7104 | 7119 |
.details .top .img { |
7105 | 7120 |
background: url("../images/vm-on.png") no-repeat center center; |
7106 | 7121 |
width: 112px; |
... | ... | |
7110 | 7125 |
overflow: hidden; |
7111 | 7126 |
background-size: 100%; |
7112 | 7127 |
} |
7113 |
/* line 311, ../sass/app.scss */
|
|
7128 |
/* line 314, ../sass/app.scss */
|
|
7114 | 7129 |
.details .top .os { |
7115 | 7130 |
background-size: 100%; |
7116 | 7131 |
width: 44px; |
... | ... | |
7118 | 7133 |
left: 36px; |
7119 | 7134 |
top: 16px; |
7120 | 7135 |
} |
7121 |
/* line 319, ../sass/app.scss */
|
|
7136 |
/* line 322, ../sass/app.scss */
|
|
7122 | 7137 |
.details .top .actions ul { |
7123 | 7138 |
padding: 1em; |
7124 | 7139 |
text-align: center; |
7125 | 7140 |
} |
7126 |
/* line 322, ../sass/app.scss */
|
|
7141 |
/* line 325, ../sass/app.scss */
|
|
7127 | 7142 |
.details .top .actions ul li { |
7128 | 7143 |
list-style: none outside none; |
7129 | 7144 |
display: inline-block; |
7130 | 7145 |
margin: 0 10px; |
7131 | 7146 |
min-width: 112px; |
7132 | 7147 |
} |
7133 |
/* line 327, ../sass/app.scss */
|
|
7148 |
/* line 330, ../sass/app.scss */
|
|
7134 | 7149 |
.details .top .actions ul li a { |
7135 | 7150 |
display: block; |
7136 | 7151 |
padding: 5px 20px; |
7137 | 7152 |
text-align: center; |
7138 | 7153 |
border: 1px solid #919194; |
7139 | 7154 |
} |
7140 |
/* line 332, ../sass/app.scss */
|
|
7155 |
/* line 335, ../sass/app.scss */
|
|
7141 | 7156 |
.details .top .actions ul li a:hover { |
7142 | 7157 |
border-color: #ff7bac; |
7143 | 7158 |
background: #ff7bac; |
7144 | 7159 |
color: white; |
7145 | 7160 |
} |
7146 |
/* line 345, ../sass/app.scss */
|
|
7161 |
/* line 348, ../sass/app.scss */
|
|
7147 | 7162 |
.details .info dl { |
7148 | 7163 |
margin: 0; |
7149 | 7164 |
} |
7150 |
/* line 347, ../sass/app.scss */
|
|
7165 |
/* line 350, ../sass/app.scss */
|
|
7151 | 7166 |
.details .info dl dt { |
7152 | 7167 |
display: inline-block; |
7153 | 7168 |
width: 25%; |
7154 | 7169 |
float: left; |
7155 | 7170 |
} |
7156 | 7171 |
|
7157 |
/* line 356, ../sass/app.scss */
|
|
7172 |
/* line 359, ../sass/app.scss */
|
|
7158 | 7173 |
.border-bottom-style1 { |
7159 | 7174 |
padding-bottom: 20px; |
7160 | 7175 |
margin-bottom: 20px; |
7161 | 7176 |
border-bottom: 2px dashed #919194; |
7162 | 7177 |
} |
7178 |
|
|
7179 |
/* line 365, ../sass/app.scss */ |
|
7180 |
.overlay { |
|
7181 |
background: #ff7bac; |
|
7182 |
} |
|
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 */ |
|
7192 |
.overlay .lt-sidebar { |
|
7193 |
border-right: 1px solid white; |
|
7194 |
} |
|
7195 |
/* line 376, ../sass/app.scss */ |
|
7196 |
.overlay .lt-sidebar ul li { |
|
7197 |
list-style: none outside none; |
|
7198 |
} |
|
7199 |
/* line 379, ../sass/app.scss */ |
|
7200 |
.overlay .lt-sidebar ul li a span { |
|
7201 |
float: right; |
|
7202 |
display: none; |
|
7203 |
} |
|
7204 |
/* line 381, ../sass/app.scss */ |
|
7205 |
.overlay .lt-sidebar ul li a:hover, .overlay .lt-sidebar ul li a.current { |
|
7206 |
text-decoration: none; |
|
7207 |
} |
|
7208 |
/* line 384, ../sass/app.scss */ |
|
7209 |
.overlay .lt-sidebar ul li a:hover span, .overlay .lt-sidebar ul li a.current span { |
|
7210 |
display: inline; |
|
7211 |
} |
|
7212 |
/* line 393, ../sass/app.scss */ |
|
7213 |
.overlay .lt-sidebar, |
|
7214 |
.overlay .main { |
|
7215 |
padding: 100px 2.5em; |
|
7216 |
} |
|
7217 |
|
|
7218 |
/* line 400, ../sass/app.scss */ |
|
7219 |
.create-vm .select-os li { |
|
7220 |
width: 23%; |
|
7221 |
padding: 20px; |
|
7222 |
list-style: none outside none; |
|
7223 |
display: inline-block; |
|
7224 |
float: left; |
|
7225 |
height: 220px; |
|
7226 |
margin: 0 10px 10px 0; |
|
7227 |
} |
|
7228 |
/* line 409, ../sass/app.scss */ |
|
7229 |
.create-vm .select-os li:hover, .create-vm .select-os li.selected { |
|
7230 |
background: white; |
|
7231 |
} |
|
7232 |
/* line 411, ../sass/app.scss */ |
|
7233 |
.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 |
color: #ff7bac; |
|
7235 |
} |
|
7236 |
/* line 415, ../sass/app.scss */ |
|
7237 |
.create-vm .select-os li .os { |
|
7238 |
background: url("../images/os-unknown.png") no-repeat center center; |
|
7239 |
width: 30px; |
|
7240 |
height: 30px; |
|
7241 |
display: inline-block; |
|
7242 |
text-indent: -2000px; |
|
7243 |
overflow: hidden; |
|
7244 |
background-size: 100%; |
|
7245 |
margin-bottom: 2em; |
|
7246 |
} |
|
7247 |
/* line 419, ../sass/app.scss */ |
|
7248 |
.create-vm .select-os li .os.windows { |
|
7249 |
background-image: url("../images/os-windows.png"); |
|
7250 |
} |
|
7251 |
/* line 420, ../sass/app.scss */ |
|
7252 |
.create-vm .select-os li .os.kubuntu { |
|
7253 |
background-image: url("../images/os-kubuntu.png"); |
|
7254 |
} |
|
7255 |
/* line 421, ../sass/app.scss */ |
|
7256 |
.create-vm .select-os li .os.fedora { |
|
7257 |
background-image: url("../images/os-fedora.png"); |
|
7258 |
} |
|
7259 |
/* line 423, ../sass/app.scss */ |
|
7260 |
.create-vm .select-os li h2 { |
|
7261 |
font-size: 1em; |
|
7262 |
font-weight: normal; |
|
7263 |
color: white; |
|
7264 |
} |
|
7265 |
/* line 428, ../sass/app.scss */ |
|
7266 |
.create-vm .select-os li .details { |
|
7267 |
font-weight: bold; |
|
7268 |
font-size: 0.875em; |
|
7269 |
} |
|
7270 |
|
|
7271 |
/* line 437, ../sass/app.scss */ |
|
7272 |
.navigation a { |
|
7273 |
display: inline-block; |
|
7274 |
padding: 10px 20px; |
|
7275 |
background: white; |
|
7276 |
text-align: center; |
|
7277 |
color: #ff7bac; |
|
7278 |
border: 1px solid #ff7bac; |
|
7279 |
} |
|
7280 |
/* line 444, ../sass/app.scss */ |
|
7281 |
.navigation a:hover { |
|
7282 |
border-color: white; |
|
7283 |
background: transparent; |
|
7284 |
color: white; |
|
7285 |
text-decoration: none; |
|
7286 |
} |
|
7287 |
/* line 450, ../sass/app.scss */ |
|
7288 |
.navigation a.rt { |
|
7289 |
float: right; |
|
7290 |
} |
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_create_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" href="">PREVIOUS</a> |
|
116 |
<a class="rt" href="">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> |
Also available in: Unified diff