feat:header responsivo

checkout/src/arquivos/js/checkout.js

@@ -3,10 +3,11 @@ import { Container } from "m3-utils";
 import "slick-carousel";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
+import  app  from "./components/app";
 
 const m3Checkout = new Container({
     appName: "m3-checkout",
-    components: [CheckoutUI, Header, Footer],
+    components: [CheckoutUI, Header, Footer, app],
 });
 
 m3Checkout.start();

checkout/src/arquivos/js/components/app.js

@@ -0,0 +1,20 @@
+import { waitElement } from "m3-utils";
+
+export default class Footer {
+    constructor() {
+        this.init();
+        console.log("app.js funcionando")
+    }
+
+    async init() {
+        await this.selectors();
+        await this.event();
+    }
+
+    async selectors() {
+
+    }
+    async event() {
+
+    }
+}

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

@@ -7,16 +7,23 @@
 		@include mq(md, max) {
 			padding: 0 16px;
 		}
+        p{
+            display: none;
+        }
 	}
 
+
 	&-title {
-		font-size: 20px;
+		font-size: 24px;
+        line-height: 33px;
+        text-align: center;
+        text-transform: uppercase;
 	}
 
 	&-links {
 		.link-choose-products {
-			background: $color-black;
-			border: none;
+			background: transparent;
+			border: 1px solid $color-black;
 			border-radius: 5px;
 			transition: ease-in 0.22s all;
 			outline: none;
@@ -27,11 +34,12 @@
 			line-height: 16px;
 			text-align: center;
 			letter-spacing: 0.05em;
-			color: $color-white;
+			color: $color-black;
 			text-transform: uppercase;
 
 			&:hover {
 				background: lighten($color-black, 5);
+                color: $color-white;
 			}
 		}
 	}

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

@@ -51,6 +51,13 @@ body {
     .container-cart {
         width: 80%;
     }
+    .container-cart{
+        display: flex;
+        align-items: center;
+        align-content: center;
+        flex-wrap: wrap;
+        flex-direction: column-reverse
+    }
 }
 
 .btn-success {

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

@@ -1,9 +1,12 @@
 /* _header.scss */
 .headerCheckout {
     // position: relative;
+    @include mq(desc,max){
+        margin: 0 16px 0 16px;
+        width: 92% !important;
+    }
     &::after{
         content: '';
-        align-self: stretch;
         position: absolute;
         right: 0;
         width: 100%;
@@ -12,6 +15,14 @@
     .container {
         margin: 30px 0 30px 0;
         width: auto !important;
+        @include mq(desc,max){
+            margin: 16px 0 16px 0;
+        }
+        .progress-bar{
+            @include mq(desc,max){
+                display: none;
+            }
+        }
     }
     &__wrapper {
         align-items: center;
@@ -23,6 +34,14 @@
         img {
             height: 52px;
             width: auto;
+            @include mq(xll,max){
+                height: 33px;
+                width: 155px;
+            }
+            @include mq(IVK,min){
+                height: 91px;
+                width: 382px;
+            }
         }
     }
 
@@ -46,5 +65,20 @@
         i {
             margin-right: 8px;
         }
+        @include mq(desc,max){
+            height: 16px;
+            span{
+                font-weight: 400;
+                white-space: nowrap;
+            }
+        }
+        @include mq(IVK,min){
+            height: 42px;
+            width:  236px;
+            span{
+                font-size: 24px;
+                white-space: nowrap;
+            }
+        }
     }
 }

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

@@ -26,7 +26,10 @@ $grid-breakpoints: (
 	sm: 576px,
 	md: 768px,
 	lg: 992px,
-	xl: 1200px
+	xl: 1200px,
+    xll:1224px,
+    desc: 1280px,
+    IVK : 2500px
 ) !default;
 
 $z-index: (