diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index 51453103b0..a4983796e9 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -33,6 +33,7 @@ @import 'website-redesign'; @import 'group-settings'; @import 'templates-v2'; -@import 'login-register'; @import 'homepage'; +@import 'login-register'; @import 'login'; +@import 'register'; 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 3b023a32cb..94f5025545 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/login-register.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/login-register.scss @@ -1,254 +1,26 @@ -.registration-logo { - width: 130px; - padding: var(--spacing-04) 0; +.login-btn { + display: flex; + align-items: center; + justify-content: center; + padding: var(--spacing-02) 0; } -.website-redesign { - .register-container { - .register-content-container { - padding: 0; // override bootstrap padding - display: flex; - background-color: #f2f4f7; - min-height: 100vh; - } - - .register-form { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - padding-top: var(--spacing-11); - background-color: var(--white); - - @include media-breakpoint-down(lg) { - height: 100%; - } - - .login-register-card { - text-align: center; - max-width: 320px; - padding-bottom: 120px; - - .notification-content p { - text-align: left; - } - - .login-register-header-focus { - padding-top: unset; - - .login-register-header-heading-focus { - font-size: var(--font-size-05); - color: var(--neutral-90); - margin-bottom: 0; - } - } - - .registration-message { - text-align: center; - padding-bottom: var(--spacing-07); - - .registration-message-heading { - color: var(--neutral-70); - font-size: var(--font-size-05); - line-height: var(--line-height-04); - margin-top: var(--spacing-08); - margin-bottom: var(--spacing-05); - } - - .registration-message-details { - font-size: var(--font-size-02); - } - } - - .tos-agreement-notice { - text-align: left; - } - } - } - - .register-illustration-container { - height: 100%; - display: flex; - align-items: center; - position: relative; - - .register-illustration { - position: absolute; - left: 80px; - top: 100px; - - // for wide screen - @media (width >= 1700px) { - position: relative; - left: unset; - top: unset; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - } - - .register-main-image { - max-width: 850px; - - @media (width <= 1350px) { - max-width: 750px; - } - - @media (width <= 1150px) { - max-width: 670px; - } - } - - .sticky-tags { - position: absolute; - height: 210px; - bottom: -135px; - right: 130px; - - // for wide screen - @media (width >= 1700px) { - right: calc(50% - 300px); - } - } - } - } - - .recaptcha-branding { - text-align: left; - padding: var(--spacing-05) 0; - font-size: var(--font-size-01); - } - } - - .registration-block-separator { - margin-bottom: 0; - } - - .login-register-form-focus { - padding: var(--spacing-08) 0 0 0; - border-bottom: solid 1px var(--neutral-20); - - &:last-child { - border-bottom-width: 0; - } - } - - .login-register-alternatives { - .form-group:last-child { - margin-bottom: 0; - } - } - - .login-btn { - display: flex; - align-items: center; - justify-content: center; - padding: var(--spacing-02) 0; - } - - .login-btn-icon { - position: relative; - top: unset; - left: unset; - background: unset; - border-radius: unset; - width: 20px; - height: 20px; - margin-right: var(--spacing-02); - } - - .login-register-hr-text-container { - padding: var(--spacing-08) 0 var(--spacing-05) 0; - - &::before { - top: calc(var(--spacing-08) + var(--spacing-08) / 4); - } - } - - .login-register-error-container { - padding-bottom: var(--spacing-05); - text-align: left; - } - - .form-group { - text-align: left; - - label { - font-size: var(--font-size-02); - } - } - - .form-group-password { - display: flex; - position: relative; - flex-direction: column; - - .form-group-password-input { - input.form-control { - padding-right: 35px; - } - } - - .visibility-toggle { - position: absolute; - right: 0; - top: 0; - width: 35px; // TODO: Should this be calculated ? - height: 35px; // TODO: Should this be calculated ? - display: flex; - align-items: center; - justify-content: center; - border: unset; - background-color: unset; - - #visibility-icon-off { - margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one - } - } - } - - .login-register-text { - padding-bottom: var(--spacing-08); - margin-bottom: 0; - - @include body-sm; - } - - .login-register-other-links { - padding: var(--spacing-08) 0; - text-align: left; - - .login-register-text { - padding-bottom: 0; - } - - a { - color: var(--green-50); - text-decoration: underline; - - // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y') - // this will force underline to not skip the descender - text-decoration-skip-ink: none; - - &:hover { - color: var(--green-60); - } - - // for accessibility with keyboard navigation - &:focus { - outline: 2px solid var(--green-50); - outline-offset: 1px; - } - } - } +.login-btn-icon { + position: relative; + top: unset; + left: unset; + background: unset; + border-radius: unset; + width: 20px; + height: 20px; + margin-right: var(--spacing-02); } -.login-register-hr-text-container { +.login-register-or-text-container { + padding: var(--spacing-08) 0 var(--spacing-05) 0; margin: 0; line-height: 1; position: relative; - padding: var(--spacing-08) 0; font-size: var(--font-size-02); &::before { @@ -256,14 +28,48 @@ position: absolute; height: 1px; background-color: var(--neutral-20); - top: 50%; left: 0; right: 0; + top: calc(var(--spacing-08) + var(--spacing-08) / 4); + } + + .login-register-or-text { + position: relative; + background-color: #fff; + padding: 0 var(--spacing-05); } } -.login-register-hr-text { - position: relative; - background-color: #fff; - padding: 0 var(--spacing-05); +.login-register-error-container { + padding-bottom: var(--spacing-05); + text-align: left; +} + +.form-group-password { + display: flex; + position: relative; + flex-direction: column; + + .form-group-password-input { + input.form-control { + padding-right: 35px; + } + } + + .visibility-toggle { + position: absolute; + right: 0; + top: 0; + width: 35px; // TODO: Should this be calculated ? + height: 35px; // TODO: Should this be calculated ? + display: flex; + align-items: center; + justify-content: center; + border: unset; + background-color: unset; + + #visibility-icon-off { + margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one + } + } } diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/login.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/login.scss index 4bb70601d2..6da10bf0fe 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/login.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/login.scss @@ -37,30 +37,6 @@ @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; } diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/register.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/register.scss new file mode 100644 index 0000000000..85711e1609 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/register.scss @@ -0,0 +1,112 @@ +.register-container { + h1 { + @include heading-sm; + + color: var(--neutral-90); + margin-bottom: 0; + } + + .register-content-container { + padding: 0; // override bootstrap padding + display: flex; + background-color: #f2f4f7; + min-height: 100vh; + } + + .register-form-container { + display: flex; + justify-content: center; + padding-top: var(--spacing-11); + background-color: var(--white); + + @include media-breakpoint-down(lg) { + height: 100%; + } + + .register-form { + text-align: center; + max-width: 320px; + padding-bottom: 120px; + + .notification-content p { + text-align: left; + } + + .registration-message { + text-align: center; + padding-bottom: var(--spacing-07); + + .registration-message-heading { + color: var(--neutral-70); + font-size: var(--font-size-05); + line-height: var(--line-height-04); + margin-top: var(--spacing-08); + margin-bottom: var(--spacing-05); + } + + .registration-message-details { + font-size: var(--font-size-02); + } + } + + .tos-agreement-notice { + text-align: left; + } + } + } + + .register-illustration-container { + height: 100%; + display: flex; + align-items: center; + position: relative; + + .register-illustration { + position: absolute; + left: 80px; + top: 100px; + + // for wide screen + @media (width >= 1700px) { + position: relative; + left: unset; + top: unset; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + } + + .register-main-image { + max-width: 850px; + + @media (width <= 1350px) { + max-width: 750px; + } + + @media (width <= 1150px) { + max-width: 670px; + } + } + + .sticky-tags { + position: absolute; + height: 210px; + bottom: -135px; + right: 130px; + + // for wide screen + @media (width >= 1700px) { + right: calc(50% - 300px); + } + } + } + } + + .recaptcha-branding { + @include body-xs; + + text-align: left; + padding: var(--spacing-05) 0; + } +}