AdilsonFernandoNevesOrnellas/m3-academy-template-checkout-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: css 2 parte

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2022-12-18 21:29:09 -03:00
parent 03993e0462
commit c6e87680ef
5 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ export default class Footer {
await this.selectors(); await this.selectors();
this.onUpdate(); this.onUpdate();
// this.apiFetch(); // this.apiFetch();
// this.calculoFrete();
this.footer(); this.footer();
} }
@ -17,6 +18,7 @@ export default class Footer {
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.divPrateleira = await waitElement(".footerCheckout__prateleira"); this.divPrateleira = await waitElement(".footerCheckout__prateleira");
this.divCalculoFrete = await waitElement(".srp-data");
this.divFooter = await waitElement(".footerCheckout__wrapper"); this.divFooter = await waitElement(".footerCheckout__wrapper");
} }
onUpdate() { onUpdate() {
@ -34,6 +36,19 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
// calculoFrete() {
// this.divCalculoFrete.innerHTML = `
// <p class = "textCalcular">Veja as opções de entrega para seus itens,
// com todos os prazos e valores.</p>
// <button onclick="voltarFrete()">Calcular</button>
// `;
// }
// voltarFrete() {
// this.divCalculoFrete.innerHTML = `
// <div class="srp-data mt4"><div class="srp-toggle mb6 pb2 ml1 mr3"><div class="srp-toggle__wrapper flex br-pill shadow-4 relative"><div class="vtex-shipping-preview-0-x-frame srp-toggle__current w-50 ba b--blue shadow-4 br-pill absolute vtex-shipping-preview-0-x-frameDelivery"></div><label class="srp-toggle__delivery flex-none bg-transparent pointer w-50 tc ttu pv3 gray blue"><input class="dn" type="radio" checked="">Receber</label><label class="srp-toggle__pickup flex-none bg-transparent pointer w-50 tc ttu pv3 gray"><input class="dn" type="radio">Retirar</label></div></div><div class="srp-result lh-copy"><div class="srp-delivery-header mb3"><span class="srp-items f5 black-70"><strong>Receber</strong> 1 item em </span><span id="deliver-at-text" class="mt0 mt0"><a class="srp-address-title link pointer blue f5">***00</a></span></div><div class="srp-delivery-info mb6"><label data-testid="cheapest" class="srp-shipping-current-single mt3 db pv2 ph4 br2 bw1 ba b--light-gray pointer tl f6"><div class="srp-shipping-current-single__wrapper flex items-center mv3 relative pointer"><div class="srp-shipping-current-single__bullet flex-none mr3"><svg class="srp-icon-radio-selected db" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 4C5.792 4 4 5.792 4 8s1.792 4 4 4 4-1.792 4-4-1.792-4-4-4zm0-4C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 14.4A6.398 6.398 0 0 1 1.6 8c0-3.536 2.864-6.4 6.4-6.4 3.536 0 6.4 2.864 6.4 6.4 0 3.536-2.864 6.4-6.4 6.4z" fill="#3386E8"></path></svg></div><div class="srp-shipping-current-single__description flex items-center flex-auto tl"><div class="srp-shipping-current-single__text flex-auto br b--light-silver truncate"><div class="srp-shipping-current-single__sla gray">Em até 3 dias úteis</div></div><div class="srp-shipping-current-single__price flex-none gray pl4">R$ 10,50</div></div></div></label></div></div></div>
// `;
// }
// apiFetch() { // apiFetch() {
// let pratileira = this.divPrateleira; // let pratileira = this.divPrateleira;
// pratileira.innerHTML = ` // pratileira.innerHTML = `

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

@ -53,7 +53,8 @@
} }
button { button {
background-color: $color-black; background-color: $color-blue-figma;
color: $color-black;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
@ -93,7 +94,7 @@
} }
i::before { i::before {
color: $color-black; color: $color-blue-figma;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -130,7 +131,7 @@
a { a {
align-items: center; align-items: center;
background-color: #303030; background-color: $color-blue-figma;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-white;
@ -183,7 +184,8 @@
button.submit { button.submit {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background: $color-black; background: $color-blue-figma;
color: $color-black;
margin-top: 8px; margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;

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

@ -85,7 +85,7 @@
} }
#payment-data-submit { #payment-data-submit {
background: $color-black; background: $color-green;
border: none; border: none;
border-radius: 0; border-radius: 0;
color: $color-white; color: $color-white;
@ -253,10 +253,14 @@
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
color: $color-black; background-color: $color-blue-figma;
color: $color-white;
display: block; display: block;
font-weight: 500; font-weight: 500;
padding: 1px 12px; margin: 1px 12px;
border-radius: 50%;
border: 50%;
width: 18px;
} }
} }
@ -485,10 +489,10 @@
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue-figma;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-black;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
@ -664,7 +668,7 @@
font-size: 12px; font-size: 12px;
height: 34px; height: 34px;
padding: 0 12px; padding: 0 12px;
max-width: 160px; width: 204px;
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -673,10 +677,10 @@
} }
button { button {
background: $color-black; background: $color-blue-figma;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-black;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
@ -780,9 +784,10 @@
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-green; background: $color-blue-figma;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
@ -800,7 +805,7 @@
font-weight: 500; font-weight: 500;
font-size: 13px; font-size: 13px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;

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

@ -15,6 +15,7 @@ $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-blue-figma:#00C8FF;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-green: #4caf50; $color-green: #4caf50;

4
checkout/src/template-checkout/checkout-header.html
View File

@ -14,6 +14,10 @@
<div class="headerCheckout__safeBuy"> <div class="headerCheckout__safeBuy">
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/> <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
<span>Compra segura</span> <span>Compra segura</span>
<button type="submit"></button>
<button disabled="disabled"></button>
<button type="reset"></button>
<button onclick="voltarFrete()">Calcular</button>
</div> </div>
</div> </div>
</div> </div>