components/signup/signup.module.scss
@use 'styles/sizes';
@use 'styles/common';
@use 'styles/loader';
@use 'styles/typography';
@include common.card-styles;
.wrapper {
@include common.wrapper(sizes.$form-width-with-margin);
margin: 60px auto;
box-sizing: border-box;
.header,
.description {
display: grid;
overflow: hidden;
&.loading div {
@include loader.loading;
border-radius: 4px;
}
div {
grid-row: 1;
grid-column: 1;
&:last-child {
transform: translateY(100%);
}
}
}
.header {
margin: 0 0 20px;
.title {
background: var(--background);
}
&.loading div {
height: 125px;
}
}
.description {
@include typography.typography('subtitle1');
color: var(--accents-5);
margin: 0 0 30px;
&.loading div {
height: 85px;
}
}
.card {
position: relative;
margin: 16px 0;
.inputs {
margin: 16px auto;
padding: 0 16px;
.field {
@include common.field;
}
.btn {
margin-top: 8px;
width: 100%;
}
.error {
@include common.error;
}
}
.divider {
@include common.divider;
margin: 8px 0;
}
}
}