mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-06-04 06:39:02 +02:00
Merge pull request #22467 from overleaf/mf-clean-up-register-styling-bs5
[web] Clean up register and login bs5 code GitOrigin-RevId: fcdb32d1e1ad7d0fb2862bb2726688780e42fa7c
This commit is contained in:
M Fahru
@@ -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';
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user