Skip to content

Commit

Permalink
CR feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgbelegu
mgbelegu committed Feb 6, 2024
1 parent 509bbe3 commit cce6c46
Show file tree
Hide file tree
Showing 18 changed files with 282 additions and 301 deletions.
274 changes: 2 additions & 272 deletions assets/scss/pages/auth-page.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.p-login__section,
.c-auth__page {
.p-auth__section {
padding: 1.5rem;
display: flex;
flex-direction: column;
Expand All @@ -11,8 +10,7 @@
}
}

.p-login__title,
.c-auth__title {
.p-auth__title {
color: $color-black;
font-family: $font-semi-bold;
font-size: 2.625rem;
Expand All @@ -21,271 +19,3 @@
line-height: 1.33;
margin: 0;
}

.p-login__form {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;

@include bp(medium) {
width: auto;
}

.c-form__field {
@include bp(medium) {
min-width: 21.37rem;
}

.c-form__label {
display: block;
margin-bottom: 8px;
}

.c-form__input {
width: 100%;
position: relative;
z-index: $z-index-low;
}
}
}

.p-login__submit-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.p-login__submit {
width: 100%;

@include bp(small) {
width: fit-content;
}
}

.p-login__forgot-password {
color: $color-primary-300;
font-family: $font-semi-bold;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5rem;
text-decoration-line: underline;
}

.p-login__customer {
display: flex;
flex-direction: column;
gap: 0.75rem;

.c-button {
width: 100%;

@include bp(small) {
width: fit-content;
}
}
}

.p-login__customer-heading {
color: $color-black;
font-family: $font-semi-bold;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 2.5rem;
margin: 0;
}

.p-login__customer-intro {
strong {
color: $color-neutrals-500;
font-family: $font-semi-bold;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5rem;
}
}

.p-login__customer-facts {
list-style-type: disc;
padding-left: 1rem;
}

.p-login__customer-fact {
color: $color-neutrals-500;
font-family: $font-regular;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}

.p-login__main-container {
display: flex;
justify-content: space-between;
}

.p-login__image {
max-width: 38.5rem;
max-height: 38.5rem;
width: 100%;
height: auto;
border-radius: 50%;
aspect-ratio: 1;
object-fit: cover;
z-index: 1;
position: relative;
}

.p-login__image-wrapper {
display: none;
position: relative;

@include bp(medium) {
display: block;
}

&::before {
display: block;
content: '';
position: absolute;
left: -25%;
top: -25%;
max-width: 38.5rem;
max-height: 38.5rem;
width: 100%;
height: auto;
aspect-ratio: 1;
background-color: rgba(90, 100, 193, 0.08);
z-index: 0;
border-radius: 50%;
}
}

.required {
color: $color-red-300;
}

.c-create-account-form {
display: grid;
gap: 3rem;

br {
display: none;
}

.c-button {
width: 100%;

@include bp(medium) {
width: fit-content;
}
}
}

.sign-up-fields {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;

@include bp(medium) {
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}

@include bp(large) {
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}

.js-form-field {
grid-area: auto;

&:nth-child(1) {
@include bp(large) {
grid-area: 1 / 1;
}
}

&:nth-child(2) {
@include bp(large) {
grid-area: 2 / 1;
}
}

&:nth-child(3) {
@include bp(large) {
grid-area: 2 / 2;
}
}

&:nth-child(4) {
@include bp(large) {
grid-area: 3 / 1;
}
}

&:nth-child(5) {
@include bp(large) {
grid-area: 3 / 2;
}
}

&:nth-child(6) {
@include bp(large) {
grid-area: 4 / 1;
}
}

&:nth-child(7) {
@include bp(large) {
grid-area: 4 / 2;
}
}

&:nth-child(8) {
@include bp(large) {
grid-area: 5 / 1;
}
}

&:nth-child(9) {
@include bp(large) {
grid-area: 5 / 2;
}
}

&:nth-child(10) {
@include bp(large) {
grid-area: 5 / 3;
}
}

&:nth-child(11) {
@include bp(large) {
grid-area: 6 / 1;
}
}

&:nth-child(12) {
@include bp(large) {
grid-area: 6 / 2;
}
}

&:nth-child(13) {
@include bp(large) {
grid-area: 6 / 3;
}
}

input,
textarea,
select {
width: 100%;
}
}
}
107 changes: 107 additions & 0 deletions assets/scss/pages/create-account-page.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
.p-create-account__form {
display: grid;
gap: 3rem;
}

.p-create-account__fields {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;

@include bp(medium) {
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}

@include bp(large) {
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
}

.c-form__field {
grid-area: auto;

&:nth-child(1) {
@include bp(large) {
grid-area: 1 / 1;
}
}

&:nth-child(2) {
@include bp(large) {
grid-area: 2 / 1;
}
}

&:nth-child(3) {
@include bp(large) {
grid-area: 2 / 2;
}
}

&:nth-child(4) {
@include bp(large) {
grid-area: 3 / 1;
}
}

&:nth-child(5) {
@include bp(large) {
grid-area: 3 / 2;
}
}

&:nth-child(6) {
@include bp(large) {
grid-area: 4 / 1;
}
}

&:nth-child(7) {
@include bp(large) {
grid-area: 4 / 2;
}
}

&:nth-child(8) {
@include bp(large) {
grid-area: 5 / 1;
}
}

&:nth-child(9) {
@include bp(large) {
grid-area: 5 / 2;
}
}

&:nth-child(10) {
@include bp(large) {
grid-area: 5 / 3;
}
}

&:nth-child(11) {
@include bp(large) {
grid-area: 6 / 1;
}
}

&:nth-child(12) {
@include bp(large) {
grid-area: 6 / 2;
}
}

&:nth-child(13) {
@include bp(large) {
grid-area: 6 / 3;
}
}

.c-form__input,
.c-form__input--select {
width: 100%;
}
}
}
Loading

0 comments on commit cce6c46

Please sign in to comment.