UX: Increase fade on long sign-up form content for more evident scroll

This commit is contained in:
Kris 2019-11-21 14:43:20 -05:00
parent 94e8fd68bf
commit bbfafc31a7
1 changed files with 16 additions and 5 deletions

View File

@ -143,21 +143,25 @@
&:before { &:before {
content: ""; content: "";
display: block; display: block;
height: 25px;
position: absolute; position: absolute;
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
} }
&:after { &:after {
bottom: 0; bottom: 0;
height: 35px;
@media screen and (max-height: 650px) {
height: 45px;
}
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
rgba($secondary, 0) 0%, rgba($secondary, 0) 0%,
rgba($secondary, 1) 100% rgba($secondary, 0.9) 100%
); );
} }
&:before { &:before {
top: 0; top: 0;
height: 25px;
background-image: linear-gradient( background-image: linear-gradient(
to top, to top,
rgba($secondary, 0) 0%, rgba($secondary, 0) 0%,
@ -167,10 +171,13 @@
form { form {
box-sizing: border-box; box-sizing: border-box;
padding: s(4 6); padding: s(4 6);
margin-bottom: 5px; margin-bottom: 0;
max-height: 475px; max-height: 475px;
@media screen and (max-height: 768px) { @media screen and (max-height: 650px) {
max-height: calc(60vh - 100px); max-height: calc(65vh - 100px);
> *:last-child {
margin-bottom: 40px;
}
} }
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -203,6 +210,10 @@
} }
} }
.user-fields {
margin-bottom: 20px;
}
.user-field { .user-field {
display: flex; display: flex;
flex-direction: column; flex-direction: column;