feat: Estiliza variações da tela do carrinho desktop telas menores que 2500px
This commit is contained in:
parent
dae23fd6af
commit
7ad6680f27
@ -29,10 +29,11 @@ export default class Cart {
|
|||||||
handleMutationObserver(mutations) {
|
handleMutationObserver(mutations) {
|
||||||
mutations.forEach((mutation) => {
|
mutations.forEach((mutation) => {
|
||||||
console.log(mutation);
|
console.log(mutation);
|
||||||
if (mutation.type === "attributes" && mutation.attributeName === "style")
|
if (mutation.type === "attributes" && mutation.attributeName === "style") {
|
||||||
if (this.cart.style.display === "flex")
|
if (this.cart.style.display === "flex")
|
||||||
this.cartTitle.classList.remove("hide-cart-title");
|
this.cartTitle.classList.remove("hide-cart-title");
|
||||||
else if (this.cart.style.display === "none") this.removeCartTitle();
|
else if (this.cart.style.display === "none") this.removeCartTitle();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -8,8 +8,8 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0 !important;
|
||||||
margin: 0;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
.dropdown {
|
||||||
|
|||||||
@ -6,6 +6,13 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
.empty-cart-content {
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
@ -300,6 +307,10 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.srp-data {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.shp-open-options {
|
.shp-open-options {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -308,22 +319,202 @@
|
|||||||
background-color: $gray-200;
|
background-color: $gray-200;
|
||||||
padding: 12px 41px;
|
padding: 12px 41px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.srp-toggle {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ship-country {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vtex-shipping-preview-0-x-pc {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vtex-shipping-preview-0-x-postalCodeForgotten {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span .help .error {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ship-postalCode {
|
||||||
|
flex: 1;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 8px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
width: auto;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-small {
|
||||||
|
width: 100%;
|
||||||
|
color: $black-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help.error {
|
||||||
|
margin: 10px 0 0 5px;
|
||||||
|
left: 12%;
|
||||||
|
top: -12%;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
a {
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "Não sei meu código postal";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
color: $black-500;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.srp-pc-input {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
position: static;
|
||||||
|
background: $blue-500;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
padding: 8px 0 9px;
|
||||||
|
|
||||||
|
@include mq(mobile, min) {
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $blue-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.srp-pickup-empty {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
.srp-pickup-my-location__button {
|
||||||
|
padding: 11px 0 12px;
|
||||||
|
background-color: $blue-500;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
transition: ease-in 0.22s all;
|
||||||
|
|
||||||
|
@include mq(mobile, min) {
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $blue-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-totalizers {
|
.cart-totalizers {
|
||||||
margin: 0 128px 0 0;
|
margin: 0 128px 0 0;
|
||||||
|
|
||||||
.coupon-data {
|
.coupon-fieldset {
|
||||||
margin-bottom: 20px;
|
.coupon-label {
|
||||||
}
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
color: $gray-600;
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
|
||||||
.link-coupon-add span {
|
label {
|
||||||
font-family: $font-family-secundary;
|
text-align: left;
|
||||||
font-weight: 400;
|
margin: 0;
|
||||||
font-size: 12px;
|
}
|
||||||
line-height: 14px;
|
}
|
||||||
color: $black-500;
|
|
||||||
|
.coupon-fields {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.coupon-value {
|
||||||
|
padding: 11px 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
color: $gray-400;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid $gray-300;
|
||||||
|
border-radius: 5px;
|
||||||
|
flex: 1;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
-webkit-animation: none;
|
||||||
|
animation: none;
|
||||||
|
&::before {
|
||||||
|
animation: spin 0.7s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 8px 15px 9px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: $black-500;
|
||||||
|
background: $blue-500;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-left: 30px;
|
||||||
|
width: 133px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-data {
|
||||||
|
display: block !important;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.link-coupon-add {
|
||||||
|
text-decoration: none !important;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-family: $font-family-secundary;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
color: $black-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.totalizers-list {
|
.totalizers-list {
|
||||||
@ -379,6 +570,16 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: $blue-500;
|
background-color: $blue-500;
|
||||||
|
|
||||||
|
@include mq(mobile, min) {
|
||||||
|
&:hover {
|
||||||
|
background-color: $blue-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $blue-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|||||||
@ -11,11 +11,13 @@ $black-500: #000;
|
|||||||
|
|
||||||
$gray-100: #f0f0f0;
|
$gray-100: #f0f0f0;
|
||||||
$gray-200: #ededed;
|
$gray-200: #ededed;
|
||||||
|
$gray-300: #e5e5e5;
|
||||||
$gray-400: #c4c4c4;
|
$gray-400: #c4c4c4;
|
||||||
$gray-500: #989898;
|
$gray-500: #989898;
|
||||||
$gray-600: #7d7d7d;
|
$gray-600: #7d7d7d;
|
||||||
|
|
||||||
$blue-500: #00c8ff;
|
$blue-500: #00c8ff;
|
||||||
|
$blue-600: #20b2db;
|
||||||
|
|
||||||
$white-500: #fff;
|
$white-500: #fff;
|
||||||
|
|
||||||
|
|||||||
@ -1,20 +1,52 @@
|
|||||||
<!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
|
<!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
|
||||||
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
|
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
|
||||||
|
|
||||||
<header class="headerCheckout">
|
<header class="headerCheckout">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="headerCheckout__wrapper">
|
<div class="headerCheckout__wrapper">
|
||||||
<div class="headerCheckout__logo">
|
<div class="headerCheckout__logo">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
|
<img
|
||||||
</a>
|
src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
|
||||||
</div>
|
alt="M3 Academy"
|
||||||
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso
|
/>
|
||||||
</div>
|
</a>
|
||||||
<div class="headerCheckout__safeBuy">
|
</div>
|
||||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
|
<div id="progressBar" class="progress-bar">Aqui entra a barra de progresso</div>
|
||||||
<span>Compra segura</span>
|
<div class="headerCheckout__safeBuy">
|
||||||
</div>
|
<img
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
|
||||||
|
alt="Cadeado"
|
||||||
|
/>
|
||||||
|
<span>Compra segura</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<span data-bind="visible: !isCouponTyped()" style="width: 100%; display: flex">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="cart-coupon"
|
||||||
|
class="coupon-value input-small"
|
||||||
|
data-bind="value: couponCode, valueUpdate:'afterkeydown', disable: loadingCoupon()"
|
||||||
|
placeholder="Código"
|
||||||
|
data-i18n="[placeholder]totalizers.couponCode;"
|
||||||
|
/>
|
||||||
|
<i
|
||||||
|
class="loading-inline icon-spinner icon-spin loading-coupon"
|
||||||
|
data-bind="fadeInlineVisible: loadingCoupon"
|
||||||
|
style="opacity: 0"
|
||||||
|
>
|
||||||
|
<span data-i18n="cart.wait">Por favor, aguarde...</span>
|
||||||
|
</i>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="cart-coupon-add"
|
||||||
|
class="btn"
|
||||||
|
data-bind="disable: loadingCoupon"
|
||||||
|
data-i18n="global.add"
|
||||||
|
>
|
||||||
|
Adicionar
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user