diff options
| author | Andrej Mihajlov <and@mullvad.net> | 2017-11-17 10:49:26 +0100 |
|---|---|---|
| committer | Andrej Mihajlov <and@mullvad.net> | 2017-11-21 16:13:09 +0100 |
| commit | aeaf89a7cefa03bf94300c48ea4371dd15d9d0bb (patch) | |
| tree | 7795cc1cd637f784698cd823b1cdc356ecf7dd93 /app/components | |
| parent | 489a47a2f68194daee05e24cced6ca670c3978a0 (diff) | |
| download | mullvadvpn-aeaf89a7cefa03bf94300c48ea4371dd15d9d0bb.tar.xz mullvadvpn-aeaf89a7cefa03bf94300c48ea4371dd15d9d0bb.zip | |
Animate footer view in login
Diffstat (limited to 'app/components')
| -rw-r--r-- | app/components/Login.css | 9 |
1 files changed, 7 insertions, 2 deletions
diff --git a/app/components/Login.css b/app/components/Login.css index 8793337f0c..0b1842c9f4 100644 --- a/app/components/Login.css +++ b/app/components/Login.css @@ -8,15 +8,20 @@ background-color: #192E45; padding: 18px 24px 24px; flex: 0 0 auto; + transition: transform 0.25s ease-in-out; } .login-footer--invisible { - visibility: hidden; + transform: translateY(100%); } .login-form__status-icon { + flex: 0 0 auto; /* never collapse or grow */ text-align: center; margin-bottom: 44px; + + /* use fixed size to make space and avoid jitter when changing <img> visibility */ + height: 60px; } .login-footer__prompt { @@ -32,7 +37,7 @@ display: flex; flex-direction: column; padding: 0 24px; - margin: auto 0 70px; + margin: 83px 0 auto; } .login-form__title { |