From e99352df3e5b56fd74e970ea2a60ef1c86da9377 Mon Sep 17 00:00:00 2001 From: M Fahru Date: Wed, 11 Dec 2024 08:37:13 -0700 Subject: [PATCH] Merge pull request #22415 from overleaf/mf-bs5-login-migration [web] Login page bootstrap 5 migration GitOrigin-RevId: 5a69588e7978456e16a0aaad80d77478121c9481 --- .../stylesheets/bootstrap-5/pages/all.scss | 1 + .../bootstrap-5/pages/login-register.scss | 11 +-- .../stylesheets/bootstrap-5/pages/login.scss | 67 +++++++++++++++++++ 3 files changed, 74 insertions(+), 5 deletions(-) create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/login.scss diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index 32b556511b..51453103b0 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -35,3 +35,4 @@ @import 'templates-v2'; @import 'login-register'; @import 'homepage'; +@import 'login'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/login-register.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/login-register.scss index fe2922f669..3b023a32cb 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/login-register.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/login-register.scss @@ -113,12 +113,12 @@ } } } - } - .recaptcha-branding { - text-align: left; - padding: var(--spacing-05) 0; - font-size: var(--font-size-01); + .recaptcha-branding { + text-align: left; + padding: var(--spacing-05) 0; + font-size: var(--font-size-01); + } } .registration-block-separator { @@ -168,6 +168,7 @@ .login-register-error-container { padding-bottom: var(--spacing-05); + text-align: left; } .form-group { diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/login.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/login.scss new file mode 100644 index 0000000000..4bb70601d2 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/login.scss @@ -0,0 +1,67 @@ +.login-container { + max-width: 320px; + margin: 0 auto; + padding-top: var(--spacing-11); + text-align: center; + + h1 { + margin-bottom: 0; + + @include heading-sm; + } + + form { + padding-top: var(--spacing-08); + + input { + height: 35px; + } + } + + .login-other-link { + padding: var(--spacing-08) 0; + + p { + margin-bottom: 0; + } + + .login-text { + padding-bottom: 0; + } + } + + .login-text { + padding-bottom: var(--spacing-08); + margin-bottom: 0; + + @include body-sm; + } + + .login-or-text-container { + margin: 0; + line-height: 1; + position: relative; + font-size: var(--font-size-02); + padding: var(--spacing-08) 0 var(--spacing-05) 0; + + &::before { + content: ''; + position: absolute; + height: 1px; + background-color: var(--neutral-20); + left: 0; + right: 0; + top: calc(var(--spacing-08) + var(--spacing-08) / 4); + } + } + + .login-or-text { + position: relative; + background-color: #fff; + padding: 0 var(--spacing-05); + } + + .recaptcha-branding { + @include body-xs; + } +}