feat: Estiliza variações da tela do carrinho desktop telas menores que 2500px

checkout/src/arquivos/js/components/Cart.js

@@ -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();
+            }
         });
     }
 

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -8,8 +8,8 @@ img {
 }
 
 body {
-    padding: 0;
+    padding: 0 !important;
-    margin: 0;
+    margin: 0 !important;
 }
 
 .dropdown {

checkout/src/arquivos/sass/partials/_menu.scss

@@ -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,23 +319,203 @@
                             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 {
+                    .coupon-fieldset {
-                        margin-bottom: 20px;
+                        .coupon-label {
+                            font-weight: 400;
+                            font-size: 12px;
+                            line-height: 14px;
+                            color: $gray-600;
+                            font-family: $font-family-secundary;
+
+                            label {
+                                text-align: left;
+                                margin: 0;
+                            }
                         }
 
-                    .link-coupon-add span {
+                        .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 {
                         td {
@@ -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;

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -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;
 

checkout/src/template-checkout/checkout-header.html

@@ -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">
+<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"/>
+                    <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 id="progressBar" class="progress-bar">Aqui entra a barra de progresso</div>
-                </div>
             <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>
             </div>
         </div>
     </div>
-    </header>
+</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>