password-manager/frontend/delta/scss/style/loginPage.scss
2014-11-02 08:33:29 +01:00

151 lines
2.4 KiB
SCSS

#loginPage {
@include overflow-scroll;
div.loginForm {
@include flexbox;
@include flex-direction(column);
@include align-items(stretch);
height: 100%;
text-align: center;
background-color: $main-color;
header {
@include flex(1);
@include icon-font();
font-size: 48pt;
color: $main-alternate-text-color;
}
div.form {
@include flex(4);
margin-left: auto;
margin-right: auto;
form {
position: relative;
background: $main-alternate-text-color;
// @include border-radius(10px);
padding: 20px;
margin-bottom: 50px;
/*
&:after {
content: "";
position: absolute;
top: -15px;
margin-left: 50%;
left: -15px;
border-style: solid;
border-width: 0 15px 15px;
border-color: $main-alternate-text-color transparent;
display: block;
width: 0;
z-index: 1;
}
*/
label {
display: none;
}
input {
font-family: "clipperz-font";
display: block;
// @include border-radius(4px);
padding: 5px;
margin-top: 5px;
margin-bottom: 10px;
font-size: 100%;
// box-shadow:inset 0 0 0;
font-size: 24pt;
width: 100%;
}
button {
font-family: "clipperz-font";
min-height: 48px;
min-width: 48px;
color: white;
font-size: 24pt;
font-weight: 500;
border: 0px;
padding: 10px 25px;
border: 1px solid white;
background-color: $main-color;
@include transition(background-color font-weight, 0.2s, linear);
&:hover {
};
&:disabled {
font-weight: 100;
background-color: #c0c0c0;
cursor: default;
&:hover {
};
}
}
}
}
div.registrationLink {
@include flex(1);
color: $main-alternate-text-color;
background-color: $main-alternate-color;
cursor: pointer;
font-size: 24pt;
&:before {
content: "> ";
};
a {
}
}
}
div.loginForm.extra-short {
header {
// @include flex(1);
font-size: 18pt;
}
div.form {
// @include flex(6);
form {
padding: 10px;
margin-bottom: 20px;
input {
padding: 3px;
margin-top: 3px;
margin-bottom: 5px;
font-size: 16pt;
}
button {
min-height: 20px;
font-size: 12pt;
padding: 3px 10px;
border: 1px solid white;
}
}
}
div.registrationLink {
// @include flex(2);
font-size: 14pt;
}
}
}