clipperz/password-manager-mirror
1
0
Fork 0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-29 18:37:35 +01:00
Code Issues Releases Wiki Activity

Improved registration wizard

Browse Source 
The desktop view looks fine, but the mobile one still needs lot of love
This commit is contained in:
Giulio Cesare Solaroli
2015-02-26 16:55:45 +01:00
parent 04a48ea609
commit 29ff09441b
6 changed files with 373 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/delta/scss/style/loginPage.scss
View File

@@ -16,13 +16,12 @@
@include icon-font();
font-size: 48pt;
line-height: 90pt;
color: $main-alternate-text-color;
}
div.form {
@include flex(4);
margin-left: auto;
margin-right: auto;
form {
position: relative;
@@ -31,6 +30,10 @@
// @include border-radius(10px);
padding: 20px;
margin-bottom: 50px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
/*
&:after {
content: "";
@@ -95,7 +98,8 @@
}
div.registrationLink {
// div.registrationLink {
footer {
@include flex(1);
color: $main-alternate-text-color;
@@ -108,6 +112,7 @@
};
a {
line-height: 50pt;
}
}
}
@@ -142,7 +147,8 @@
}
}
div.registrationLink {
// div.registrationLink {
footer {
// @include flex(2);
font-size: 14pt;
}

254
frontend/delta/scss/style/registrationPage.scss
View File

@@ -2,109 +2,191 @@
background-color: $main-alternate-color;
color: $main-alternate-text-color;
label {
display: none;
}
.registrationForm {
@include flexbox;
@include flex-direction(column);
@include align-items(stretch);
input {
display: block;
border: 1px solid $solarize-Background-92;
@include border-radius(6px);
padding: 5px;
margin-top: 5px;
margin-bottom: 10px;
font-size: 100%;
box-shadow:inset 0 0 0;
}
height: 100%;
text-align: center;
background-color: $main-alternate-color;
header {
@include flex(1);
@include icon-font();
.steps {
.step {
display: none;
font-size: 48pt;
line-height: 90pt;
color: $main-color;
// color: $main-alternate-text-color;
}
&.center {
display: block;
}
div.form {
@include flex(4);
h1 {
color: $solarize-Accent-Blue;
font-size: 24pt;
font-weight: 700;
margin: 0px;
}
p {
color: $solarize-Content-50;
font-size: 14pt;
font-weight: 100;
margin: 0px;
}
form {
background: $main-alternate-text-color;
&.TERMS_OF_SERVICE {
.checkboxBlock {
margin-top: 10px;
margin-bottom: 10px;
clear: both;
padding: 20px;
margin-bottom: 50px;
max-width: 400px;
input {
display: block;
float: left;
margin: 5px;
width: 30px;
}
margin-left: auto;
margin-right: auto;
p {
font-size: 12pt;
font-weight: 500;
display: block;
.steps {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 400px;
a {
color: $solarize-Accent-Red;
.step {
display: none;
&.center {
display: block;
}
h1 {
color: $solarize-Accent-Blue;
font-size: 24pt;
font-weight: 700;
margin: 0px;
padding-top: 15px;
}
p {
color: $solarize-Content-50;
font-size: 14pt;
font-weight: 100;
margin: 0px;
padding: 5px 0px;
}
label {
display: none;
}
input {
font-family: "clipperz-font";
display: block;
padding: 5px;
// margin-top: 5px;
margin-bottom: 10px;
font-size: 100%;
font-size: 24pt;
width: 100%;
}
&.TERMS_OF_SERVICE {
.checkboxBlock {
// margin-top: 10px;
// margin-bottom: 10px;
// clear: both;
input {
display: block;
float: left;
// margin: 5px;
margin-top: 10px;
width: 30px;
}
p {
font-size: 12pt;
font-weight: 500;
display: block;
text-align: left;
margin-left: 50px;
line-height: 1.5em;
a {
color: $solarize-Accent-Red;
}
}
}
.stepIndex {
margin-top: 10px;
}
}
.stepBody {
min-height: 130px;
}
.stepIndex {
text-align: center;
.stepIndexItem {
font-weight: 900;
font-size: 28pt;
display: inline;
color: lightgrey;
&.center {
color: gray;
}
}
}
.buttons {
text-align: center;
margin-top: 10px;
.button {
margin: 10px;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 80px;
font-weight: 900;
line-height: 45px;
font-size: 24px;
&.back {
background-color: lightgrey;
&.step_-1 {
visibility: hidden;
}
}
&.disabled {
background-color: #c0c0c0;
cursor: default;
}
&.enabled {
background-color: $main-color;
}
}
}
}
}
}
.stepIndex {
text-align: center;
.stepIndexItem {
font-weight: 900;
font-size: 28pt;
display: inline;
color: lightgrey;
}
&.center {
color: gray;
}
}
}
.buttons {
text-align: center;
margin-top: 10px;
footer {
@include flex(1);
.button {
margin: 10px;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 80px;
// color: $main-alternate-text-color;
color: $main-text-color;
background-color: $main-color;
cursor: pointer;
font-size: 24pt;
font-weight: 900;
line-height: 45px;
font-size: 24px;
&:before {
content: "< ";
};
&.back {
background-color: lightgrey;
// &.step_-1 {
// visibility: hidden;
// }
}
&.disabled {
background-color: #c0c0c0;
cursor: default;
}
}
a {
line-height: 50pt;
}
}
}