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

Merge pull request 'feat(Autenticacao): conserta observation' (#2) from Feature/Autenticacao into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
William Simão Cavalcante 2022-12-19 14:48:21 +00:00
commit bd06af76fe
4 changed files with 202 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
checkout/src/arquivos/js/components/Footer.js
View File

@ -8,14 +8,15 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.verificaPag(); this.verificaPag();
await this.onUpdate(); // await this.onUpdate();
await this.addCarrossel();
this.addProdutos(); this.addProdutos();
this.entregaCarrinho(); this.entregaCarrinho();
this.unidadeCarrinho(); this.unidadeCarrinho();
this.creatPaymentsIcons(); this.creatPaymentsIcons();
this.creatVtexIconPci(); this.creatVtexIconPci();
this.creatDevIconsM3(); this.creatDevIconsM3();
await this.addCarrossel();
await this.verificaOnload();
} }
async selectors() { async selectors() {
@ -31,6 +32,11 @@ export default class Footer {
} }
async verificaOnload () {
window.addEventListener('load', this.onUpdat())
};
async onUpdate() { async onUpdate() {
let target = this.checkoutVazio; let target = this.checkoutVazio;
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };

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

@ -158,21 +158,58 @@
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.client-profile-data {
max-width: 331px;
height: 459px;
width: 100%;
.collapsed {
display: none;
span {
font-size: 0;
}
.icon-user {
display: none;
}
}
}
label {
margin-bottom: 0;
}
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 8px;
border: 1px solid $color-gray4; border: 1px solid $color-gray3;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 24px 16px 0;
.accordion-heading { .accordion-heading {
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
i::before { .accordion-toggle-active {
fill: #303030; i::after {
} content: '';
}
}
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
font-family: $font-family-secundary;
i::before {
content: '';
}
i::after {
background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png%22');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 20px;
height: 20px;
display: block;
content: '';
float: right;
}
} }
a { a {
@ -184,7 +221,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
opacity: 0;
} }
} }
.accordion-inner { .accordion-inner {
@ -192,21 +233,57 @@
/* General configurations */ /* General configurations */
.hipping-summar-info,
.notification {
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
.client-notice { .client-notice {
color: $color-black; color: $color-black;
margin-bottom: 26px;
font-size: 0px !important;
&::before {
content: 'Identificação';
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
} }
p { p {
margin-top: 12px;
margin-bottom: 0;
label { label {
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
margin-bottom: 0;
} }
span {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray10;
margin-left: 8px;
}
select, select,
input { input {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; border: 1px solid $color-gray4;
box-shadow: none; box-shadow: none;
width: 18px;
height: 18px;
} }
.help.error { .help.error {
@ -214,10 +291,102 @@
} }
} }
.box-client-info-pf {
.client-notice {
margin-top: 0;
}
label {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray2;
}
#client-email {
width: 297px;
height: 42px;
padding: 0 6px;
border-radius: 5px;
border: 1px solid $color-gray9;
}
#client-last-name,
#client-first-name {
padding: 0 6px;
width: 141px;
height: 42px;
border: 1px solid $color-gray9;
border-radius: 5px;
}
#client-document {
padding: 0 6px;
width: 142.06px;
height: 44px;
border: 1px solid $color-gray9;
border-radius: 5px;
}
#client-phone {
padding: 0 6px;
width: 142.06px;
height: 44px;
border: 1px solid $color-gray9;
border-radius: 5px;
}
}
.newsletter {
#opt-in-newsletter {
width: 18px;
height: 18px;
border: 1px solid #828282;
border-radius: 3px;
padding: 0;
}
.newsletter-text {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $color-gray10;
}
label {
padding: 0 0 0 20px;
}
}
.btn-submit-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin: 44px 0;
#go-to-shipping {
width: 100%;
height: 42px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
background-color: $color-blue-200;
color: $color-white;
margin: 0;
}
}
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
} }
@ -333,4 +502,10 @@
} }
} }
} }
.Items {
border-bottom: 1px solid $color-gray4;
}
.info {
border-bottom: 1px solid $color-gray4;
}
} }

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

@ -13,11 +13,8 @@
display: none; display: none;
} }
.cart { .cart {
border: 1px solid $color-gray3; border-bottom: 1px solid $color-gray9;
box-sizing: border-box; border-radius: 0;
border-radius: 5px;
padding: 16px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
border-left: none; border-left: none;
@ -31,6 +28,10 @@
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
border: 1px solid #E5E5E5;
border-radius: 8px;
max-width: 331px;
width: 100%;
h2 { h2 {
background: $color-white; background: $color-white;
border: none; border: none;
@ -48,8 +49,6 @@
} }
.cart { .cart {
border: 1px solid $color-gray4;
ul li { ul li {
border-top: none; border-top: none;
margin-top: 0; margin-top: 0;

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

@ -18,6 +18,8 @@ $color-gray5: #e5e5e5;
$color-gray6: #989898; $color-gray6: #989898;
$color-gray7: #c4c4c4; $color-gray7: #c4c4c4;
$color-gray8: #2e2d2d; $color-gray8: #2e2d2d;
$color-gray9: #E0E0E0;
$color-gray10: #808080;
$color-blue-100: #6fd5f2; $color-blue-100: #6fd5f2;
$color-blue-200: #00C8FF; $color-blue-200: #00C8FF;