mirror of
https://github.com/discourse/discourse.git
synced 2024-12-24 05:16:25 +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>
99 lines
2.1 KiB
SCSS
99 lines
2.1 KiB
SCSS
$progress-bar-line-width: 2px;
|
|
$progress-bar-circle-size: 1.2rem;
|
|
$progress-bar-icon-size: 0.8rem;
|
|
|
|
.signup-progress-bar {
|
|
width: 100%;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
margin-bottom: 1.2em;
|
|
|
|
&__segment {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
color: var(--primary-low-mid);
|
|
|
|
&:first-child .signup-progress-bar__circle {
|
|
transform: translateX(50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
&:last-child {
|
|
width: $progress-bar-circle-size;
|
|
.signup-progress-bar__circle {
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__step {
|
|
display: flex;
|
|
}
|
|
|
|
&__step-text {
|
|
color: var(--primary-high);
|
|
white-space: nowrap;
|
|
width: fit-content;
|
|
transform: translateX(calc(calc($progress-bar-circle-size / 2) - 50%));
|
|
|
|
.signup-progress-bar__segment:first-child & {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
.signup-progress-bar__segment:last-child & {
|
|
transform: translateX(
|
|
calc(calc($progress-bar-circle-size + $progress-bar-line-width) - 100%)
|
|
);
|
|
}
|
|
|
|
.--active & {
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
&__line {
|
|
transform: translateY(
|
|
calc(calc($progress-bar-circle-size + $progress-bar-line-width) / 2)
|
|
);
|
|
height: $progress-bar-line-width;
|
|
width: 100%;
|
|
background-color: var(--primary-low-mid);
|
|
|
|
.--completed & {
|
|
background-color: var(--success);
|
|
}
|
|
}
|
|
|
|
&__circle {
|
|
flex-shrink: 0;
|
|
font-size: $progress-bar-icon-size;
|
|
color: var(--secondary);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: $progress-bar-circle-size;
|
|
width: $progress-bar-circle-size;
|
|
border-radius: 50%;
|
|
border: $progress-bar-line-width solid var(--primary-low-mid);
|
|
background-color: var(--secondary);
|
|
|
|
.--active & {
|
|
border-color: var(--success);
|
|
background: var(--success);
|
|
box-shadow: 0 0 1px 5px var(--success-low);
|
|
}
|
|
.--completed & {
|
|
background-color: var(--success);
|
|
border-color: var(--success);
|
|
}
|
|
}
|
|
|
|
&__line.--completed {
|
|
background-color: var(--success);
|
|
}
|
|
}
|