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) {
|
||||
mutations.forEach((mutation) => {
|
||||
console.log(mutation);
|
||||
if (mutation.type === "attributes" && mutation.attributeName === "style")
|
||||
if (mutation.type === "attributes" && mutation.attributeName === "style") {
|
||||
if (this.cart.style.display === "flex")
|
||||
this.cartTitle.classList.remove("hide-cart-title");
|
||||
else if (this.cart.style.display === "none") this.removeCartTitle();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@ img {
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
|
||||
@ -6,6 +6,13 @@
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.empty-cart-content {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
all: unset;
|
||||
}
|
||||
@ -300,6 +307,10 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.srp-data {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shp-open-options {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -308,22 +319,202 @@
|
||||
background-color: $gray-200;
|
||||
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 {
|
||||
margin: 0 128px 0 0;
|
||||
|
||||
.coupon-data {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.coupon-fieldset {
|
||||
.coupon-label {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $gray-600;
|
||||
font-family: $font-family-secundary;
|
||||
|
||||
.link-coupon-add span {
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $black-500;
|
||||
label {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -379,6 +570,16 @@
|
||||
border-radius: 8px;
|
||||
background-color: $blue-500;
|
||||
|
||||
@include mq(mobile, min) {
|
||||
&:hover {
|
||||
background-color: $blue-600;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
|
||||
@ -11,11 +11,13 @@ $black-500: #000;
|
||||
|
||||
$gray-100: #f0f0f0;
|
||||
$gray-200: #ededed;
|
||||
$gray-300: #e5e5e5;
|
||||
$gray-400: #c4c4c4;
|
||||
$gray-500: #989898;
|
||||
$gray-600: #7d7d7d;
|
||||
|
||||
$blue-500: #00c8ff;
|
||||
$blue-600: #20b2db;
|
||||
|
||||
$white-500: #fff;
|
||||
|
||||
|
||||
@ -1,20 +1,52 @@
|
||||
<!-- 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. -->
|
||||
|
||||
<header class="headerCheckout">
|
||||
<div class="container">
|
||||
<div class="headerCheckout__wrapper">
|
||||
<div class="headerCheckout__logo">
|
||||
<a href="/">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso
|
||||
</div>
|
||||
<div class="headerCheckout__safeBuy">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
|
||||
<span>Compra segura</span>
|
||||
</div>
|
||||
<header class="headerCheckout">
|
||||
<div class="container">
|
||||
<div class="headerCheckout__wrapper">
|
||||
<div class="headerCheckout__logo">
|
||||
<a href="/">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
|
||||
alt="M3 Academy"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="progressBar" class="progress-bar">Aqui entra a barra de progresso</div>
|
||||
<div class="headerCheckout__safeBuy">
|
||||
<img
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
|
||||
alt="Cadeado"
|
||||
/>
|
||||
<span>Compra segura</span>
|
||||
</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