ThiagoDutraSampaioLeite/m3-academy-template-checkout-thiago-dutra
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria checkout

Browse Source
This commit is contained in:
ThiagoDuutra 2022-12-17 14:18:17 -03:00
parent 05b13a5478
commit af5a44e20e
4 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -54,6 +54,9 @@
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
@media (max-width: 1024px) {
width: 100%;
}
input { input {
box-shadow: none; box-shadow: none;
color: $color-black; color: $color-black;
@ -135,7 +138,7 @@
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
@ -168,19 +171,19 @@
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $color-black; display: none;
} }
p { p {
label { label {
color: $color-black; color: $color-gray2;
font-weight: 500; font-weight: 500;
} }
select, select,
input { input {
border-radius: 0; border-radius: 5px;
border: 1px solid $color-gray4; border: 1px solid $color-gray7;
box-shadow: none; box-shadow: none;
} }
@ -188,6 +191,9 @@
color: red; color: red;
} }
} }
.box-client-info-pj {
display: none;
}
.box-client-info-pj { .box-client-info-pj {
.link a#is-corporate-client, .link a#is-corporate-client,
@ -201,21 +207,32 @@
.state-inscription-box span { .state-inscription-box span {
font-weight: 500; font-weight: 500;
} }
.btn-submit-wrapper {
margin-top: 44px;
}
button.submit { button.submit {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background: $color-black; background: $color-blue-100;
margin-top: 8px; margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
text-transform: uppercase;
font-size: 14px;
line-height: 19px;
font-weight: 700;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten($color-blue-100, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken($color-blue-100, 5);
} }
} }

10
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -454,12 +454,12 @@
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $color-black;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $color-blue; color: $color-black-500;
} }
label { label {
@ -495,7 +495,7 @@
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue-100;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
@ -618,7 +618,7 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black-500;
text-decoration: none; text-decoration: none;
} }
} }
@ -789,7 +789,7 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-blue; color: $color-black-500;
} }
} }

8
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -2,6 +2,7 @@
@import "./checkout-carrinho"; @import "./checkout-carrinho";
@import "./checkout-pagamento"; @import "./checkout-pagamento";
@import "./checkout-autenticacao"; @import "./checkout-autenticacao";
@import "./checkout-finalizar";
html { html {
height: 100%; height: 100%;
@ -50,6 +51,13 @@ body {
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 80%; width: 80%;
@media (max-width: 1024px) {
width: 98%;
}
}
.ship-country {
display: none;
} }
} }

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -16,6 +16,7 @@ $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #c4c4c4; $color-gray6: #c4c4c4;
$color-gray7: #e0e0e0;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue-100: #00c8ff; $color-blue-100: #00c8ff;