forked from M3-Academy/m3-academy-template-checkout
feat: css 2 parte
This commit is contained in:
parent
03993e0462
commit
c6e87680ef
@ -9,6 +9,7 @@ export default class Footer {
|
||||
await this.selectors();
|
||||
this.onUpdate();
|
||||
// this.apiFetch();
|
||||
// this.calculoFrete();
|
||||
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
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.divPrateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.divCalculoFrete = await waitElement(".srp-data");
|
||||
this.divFooter = await waitElement(".footerCheckout__wrapper");
|
||||
}
|
||||
onUpdate() {
|
||||
@ -34,6 +36,19 @@ export default class Footer {
|
||||
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() {
|
||||
// let pratileira = this.divPrateleira;
|
||||
// pratileira.innerHTML = `
|
||||
|
||||
@ -53,7 +53,8 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-black;
|
||||
background-color: $color-blue-figma;
|
||||
color: $color-black;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
@ -93,7 +94,7 @@
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $color-black;
|
||||
color: $color-blue-figma;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -130,7 +131,7 @@
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
background-color: $color-blue-figma;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
@ -183,7 +184,8 @@
|
||||
button.submit {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $color-black;
|
||||
background: $color-blue-figma;
|
||||
color: $color-black;
|
||||
margin-top: 8px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: $color-black;
|
||||
background: $color-green;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $color-white;
|
||||
@ -253,10 +253,14 @@
|
||||
.icon-plus-sign,
|
||||
.icon-minus-sign {
|
||||
&::before {
|
||||
color: $color-black;
|
||||
background-color: $color-blue-figma;
|
||||
color: $color-white;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
padding: 1px 12px;
|
||||
margin: 1px 12px;
|
||||
border-radius: 50%;
|
||||
border: 50%;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -485,10 +489,10 @@
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: $color-black;
|
||||
background-color: $color-blue-figma;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
color: $color-black;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
@ -664,7 +668,7 @@
|
||||
font-size: 12px;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
max-width: 160px;
|
||||
width: 204px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
max-width: 100%;
|
||||
@ -673,10 +677,10 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background: $color-black;
|
||||
background: $color-blue-figma;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
color: $color-black;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
@ -780,9 +784,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-place-order-wrapper {
|
||||
a {
|
||||
background: $color-green;
|
||||
background: $color-blue-figma;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
@ -800,7 +805,7 @@
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
color: $color-black;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
|
||||
@ -15,6 +15,7 @@ $color-gray3: #f0f0f0;
|
||||
$color-gray4: #8d8d8d;
|
||||
$color-gray5: #e5e5e5;
|
||||
|
||||
$color-blue-figma:#00C8FF;
|
||||
$color-blue: #4267b2;
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
@ -14,6 +14,10 @@
|
||||
<div class="headerCheckout__safeBuy">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
|
||||
<span>Compra segura</span>
|
||||
<button type="submit"></button>
|
||||
<button disabled="disabled"></button>
|
||||
<button type="reset"></button>
|
||||
<button onclick="voltarFrete()">Calcular</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user