Revision 28aa17cb snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizards.scss
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizards.scss | ||
|---|---|---|
| 782 | 782 |
.step {
|
| 783 | 783 |
a { color: $wizard-base-font-color;}
|
| 784 | 784 |
.volume_options {
|
| 785 |
position: relative; |
|
| 786 |
padding-bottom: 20px; |
|
| 787 |
.explanatory {
|
|
| 788 |
font-size:emCalc(12px); |
|
| 789 |
margin-top:20px; |
|
| 790 |
margin-bottom:60px; |
|
| 791 |
} |
|
| 792 |
.check, .radio_btn {
|
|
| 793 |
position: absolute; |
|
| 794 |
right: 0; |
|
| 795 |
&:focus {
|
|
| 796 |
right: -3px; |
|
| 797 |
top: -3px; |
|
| 798 |
} |
|
| 799 |
} |
|
| 800 |
.volume-name {
|
|
| 785 |
li{
|
|
| 786 |
display: block; |
|
| 787 |
width: 360px; |
|
| 788 |
&.volume-name { //same with network-name and vm-name
|
|
| 801 | 789 |
margin: 40px 0; |
| 802 | 790 |
h2 {
|
| 803 | 791 |
color:white; |
| 804 | 792 |
font-size: emCalc(16px); |
| 805 | 793 |
} |
| 806 | 794 |
} |
| 807 |
li{
|
|
| 808 |
display: block; |
|
| 809 |
width: 360px; |
|
| 810 |
&.manual{
|
|
| 811 |
position: relative; |
|
| 812 |
.input {
|
|
| 813 |
position: absolute; |
|
| 814 |
right: -170px; |
|
| 815 |
width: 150px; |
|
| 816 |
bottom: 5px; |
|
| 817 |
display: none; |
|
| 818 |
} |
|
| 819 |
} |
|
| 820 |
&.project-selection li {
|
|
| 821 |
width: 100%; |
|
| 822 |
} |
|
| 823 |
} |
|
| 824 |
} |
|
| 825 |
.volume_size {
|
|
| 826 |
list-style: none outside none; |
|
| 827 |
li {
|
|
| 828 |
list-style:none outside none; |
|
| 829 |
margin-bottom:30px; |
|
| 830 |
.title {
|
|
| 831 |
@extend .clearfix; |
|
| 832 |
height:40px; |
|
| 833 |
overflow:hidden; |
|
| 834 |
margin-bottom:emCalc(8px); |
|
| 835 |
color:white; |
|
| 836 |
vertical-align: top; |
|
| 837 |
.icon {
|
|
| 838 |
display: block; |
|
| 839 |
width:60px; |
|
| 840 |
font-size:38px; |
|
| 841 |
float: left; |
|
| 842 |
} |
|
| 843 |
h2 {
|
|
| 844 |
font-size:emCalc(14px); |
|
| 845 |
span {
|
|
| 846 |
font-weight:normal; |
|
| 847 |
} |
|
| 848 |
float:left; |
|
| 849 |
width: 140px; |
|
| 795 |
&.volume-size {
|
|
| 796 |
list-style: none outside none; |
|
| 797 |
li {
|
|
| 798 |
list-style:none outside none; |
|
| 799 |
margin-bottom:30px; |
|
| 800 |
.title {
|
|
| 801 |
@extend .clearfix; |
|
| 802 |
height:40px; |
|
| 803 |
overflow:hidden; |
|
| 804 |
margin-bottom:emCalc(8px); |
|
| 850 | 805 |
color:white; |
| 851 |
margin-right:60px; |
|
| 852 |
padding-left:emCalc(10px); |
|
| 853 |
em {
|
|
| 806 |
vertical-align: top; |
|
| 807 |
.icon {
|
|
| 854 | 808 |
display: block; |
| 855 |
margin-top:4px; |
|
| 809 |
width:60px; |
|
| 810 |
font-size:38px; |
|
| 811 |
float: left; |
|
| 812 |
} |
|
| 813 |
h2 {
|
|
| 814 |
font-size:emCalc(14px); |
|
| 815 |
span {
|
|
| 816 |
font-weight:normal; |
|
| 817 |
} |
|
| 818 |
float:left; |
|
| 819 |
width: 140px; |
|
| 820 |
color:white; |
|
| 821 |
margin-right:60px; |
|
| 822 |
padding-left:emCalc(10px); |
|
| 823 |
em {
|
|
| 824 |
display: block; |
|
| 825 |
margin-top:4px; |
|
| 826 |
font-size:11px; |
|
| 827 |
font-style:normal; |
|
| 828 |
font-weight:normal; |
|
| 829 |
white-space: nowrap; |
|
| 830 |
line-height: 13px; |
|
| 831 |
} |
|
| 832 |
} |
|
| 833 |
p {
|
|
| 834 |
visibility: hidden; |
|
| 835 |
overflow:hidden; |
|
| 836 |
min-height:40px; |
|
| 856 | 837 |
font-size:11px; |
| 857 |
font-style:normal; |
|
| 858 |
font-weight:normal; |
|
| 859 |
white-space: nowrap; |
|
| 860 |
line-height: 13px; |
|
| 838 |
line-height:11px; |
|
| 861 | 839 |
} |
| 862 | 840 |
} |
| 863 |
p {
|
|
| 864 |
visibility: hidden; |
|
| 865 |
overflow:hidden; |
|
| 866 |
min-height:40px; |
|
| 867 |
font-size:11px; |
|
| 868 |
line-height:11px; |
|
| 869 |
} |
|
| 870 |
} |
|
| 871 |
.options-bar {
|
|
| 872 |
@extend .clearfix; |
|
| 873 |
.bar {
|
|
| 874 |
width:200px; |
|
| 875 |
float:left; |
|
| 876 |
margin-right:60px; |
|
| 877 |
height: 20px; |
|
| 878 |
position: relative; |
|
| 879 |
top:10px; |
|
| 880 |
.wrap {
|
|
| 881 |
border:1px solid white; |
|
| 882 |
padding:1px; |
|
| 883 |
height: 100%; |
|
| 884 |
&.disabled-progress-bar {
|
|
| 885 |
border-color: $disabled-resource-color; |
|
| 886 |
.container{
|
|
| 887 |
.total {
|
|
| 888 |
background-color: $disabled-resource-color; |
|
| 841 |
.options-bar {
|
|
| 842 |
@extend .clearfix; |
|
| 843 |
.bar {
|
|
| 844 |
width:200px; |
|
| 845 |
float:left; |
|
| 846 |
margin-right:60px; |
|
| 847 |
height: 20px; |
|
| 848 |
position: relative; |
|
| 849 |
top:10px; |
|
| 850 |
.wrap {
|
|
| 851 |
border:1px solid white; |
|
| 852 |
padding:1px; |
|
| 853 |
height: 100%; |
|
| 854 |
&.disabled-progress-bar {
|
|
| 855 |
border-color: $disabled-resource-color; |
|
| 856 |
.container{
|
|
| 857 |
.total {
|
|
| 858 |
background-color: $disabled-resource-color; |
|
| 859 |
} |
|
| 889 | 860 |
} |
| 890 | 861 |
} |
| 891 |
} |
|
| 892 |
.container {
|
|
| 893 |
height: 100%; |
|
| 894 |
.total {
|
|
| 895 |
background:$primary-color; |
|
| 862 |
.container {
|
|
| 896 | 863 |
height: 100%; |
| 897 |
float:left; |
|
| 898 |
position: relative; |
|
| 899 |
.current {
|
|
| 900 |
background:white; |
|
| 864 |
.total {
|
|
| 865 |
background:$primary-color; |
|
| 901 | 866 |
height: 100%; |
| 902 | 867 |
float:left; |
| 903 |
} |
|
| 904 |
span {
|
|
| 905 |
position:absolute; |
|
| 906 |
right:10px; |
|
| 907 |
font-size: emCalc(9px); |
|
| 908 |
top:2px; |
|
| 909 |
} |
|
| 910 |
&.low {
|
|
| 868 |
position: relative; |
|
| 869 |
.current {
|
|
| 870 |
background:white; |
|
| 871 |
height: 100%; |
|
| 872 |
float:left; |
|
| 873 |
} |
|
| 911 | 874 |
span {
|
| 912 |
right:-30px; |
|
| 913 |
color:white; |
|
| 875 |
position:absolute; |
|
| 876 |
right:10px; |
|
| 877 |
font-size: emCalc(9px); |
|
| 878 |
top:2px; |
|
| 879 |
} |
|
| 880 |
&.low {
|
|
| 881 |
span {
|
|
| 882 |
right:-30px; |
|
| 883 |
color:white; |
|
| 884 |
} |
|
| 914 | 885 |
} |
| 915 | 886 |
} |
| 916 | 887 |
} |
| 917 |
} |
|
| 918 | 888 |
|
| 889 |
} |
|
| 919 | 890 |
} |
| 920 |
} |
|
| 921 |
.options {
|
|
| 922 |
overflow:hidden; |
|
| 923 |
list-style: none outside none; |
|
| 924 |
li {
|
|
| 891 |
.options {
|
|
| 892 |
overflow:hidden; |
|
| 925 | 893 |
list-style: none outside none; |
| 926 |
display: inline-block; |
|
| 927 |
margin-right: 10px; |
|
| 928 |
margin-bottom:0; |
|
| 929 |
a {
|
|
| 930 |
@extend .btn5; |
|
| 931 |
min-width: 60px; |
|
| 932 |
&.current {
|
|
| 933 |
color:$overlay-bg-color; |
|
| 934 |
} |
|
| 935 |
&.disabled {
|
|
| 936 |
border-color: $disabled-resource-color; |
|
| 937 |
color: $disabled-resource-color; |
|
| 938 |
&:hover, &:active {
|
|
| 939 |
cursor: default; |
|
| 940 |
border-width: 1px; |
|
| 941 |
line-height: 28px; |
|
| 894 |
li {
|
|
| 895 |
list-style: none outside none; |
|
| 896 |
display: inline-block; |
|
| 897 |
margin-right: 10px; |
|
| 898 |
margin-bottom:0; |
|
| 899 |
a {
|
|
| 900 |
@extend .btn5; |
|
| 901 |
min-width: 60px; |
|
| 902 |
&.current {
|
|
| 903 |
color:$overlay-bg-color; |
|
| 904 |
} |
|
| 905 |
&.disabled {
|
|
| 906 |
border-color: $disabled-resource-color; |
|
| 907 |
color: $disabled-resource-color; |
|
| 908 |
&:hover, &:active {
|
|
| 909 |
cursor: default; |
|
| 910 |
border-width: 1px; |
|
| 911 |
line-height: 28px; |
|
| 942 | 912 |
|
| 913 |
} |
|
| 943 | 914 |
} |
| 944 | 915 |
} |
| 945 | 916 |
} |
| ... | ... | |
| 947 | 918 |
} |
| 948 | 919 |
} |
| 949 | 920 |
} |
| 921 |
} |
|
| 950 | 922 |
} |
| 951 | 923 |
} |
| 952 | 924 |
} |
Also available in: Unified diff