mirror of
https://github.com/discourse/discourse.git
synced 2024-12-14 18:33:42 +08:00
8ac1f6ad9a
This adds several improvements to the signup/login forms. Some of them include: - Added a minimal signup progress bar design for mobile. - Made the signup/login modals full height on mobile. - Improved the activation, account creation, and login-required pages on mobile. - Removed the subheader and emoji from the welcome component. - Removed most input instructions. - Used consistent font size for text below the inputs. - Displayed input instructions only when the field is focused. - Improved the vertical alignment of input labels. - Increased the spacing between inputs. - Fixed label positioning for custom fields. - Moved the "(optional)" text for the name input outside the instructions. - Disabled buttons during login to prevent layout shifts. - Reused the CTA component for modals as well. - Matched the invite CTA styles with the signup form. --------- Co-authored-by: Jan Cernik <jancernik12@gmail.com> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
31 lines
511 B
SCSS
31 lines
511 B
SCSS
$progress-bar-circle-size: 0.5rem;
|
|
|
|
.signup-progress-bar {
|
|
width: auto;
|
|
margin: 1.5rem 1.2rem;
|
|
gap: 1rem;
|
|
|
|
.account-created &,
|
|
.activate-account & {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
&__segment {
|
|
width: auto;
|
|
}
|
|
&__circle {
|
|
height: $progress-bar-circle-size;
|
|
width: $progress-bar-circle-size;
|
|
transform: none !important;
|
|
.--active & {
|
|
background: var(--success);
|
|
box-shadow: 0 0 1px 5px var(--success-low);
|
|
}
|
|
}
|
|
|
|
&__step-text,
|
|
&__line {
|
|
display: none;
|
|
}
|
|
}
|