From 6a9204c926fae73557e9e6efabd81664f0e01e88 Mon Sep 17 00:00:00 2001
From: Saulo Klein Nery <saulokn@outlook.com>
Date: Sun, 18 Dec 2022 03:32:34 -0300
Subject: [PATCH] feat: cria telas mobile

---
 .../sass/checkout/_checkout-carrinho.scss     |  18 +--
 .../sass/checkout/_checkout-pagamento.scss    |  88 ++++++++++---
 .../arquivos/sass/partials/_autenticacao.scss |  85 +++++++++++++
 .../src/arquivos/sass/partials/_menu.scss     | 119 +++++++++++++++++-
 .../src/arquivos/sass/utils/_variaveis.scss   |   1 +
 5 files changed, 279 insertions(+), 32 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 016af08..2ed2122 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -124,32 +124,22 @@
         }
 
         .product-image {
-            height: auto;
+            height: 60px;
+            object-fit: cover;
             padding: 0;
+            max-width: 100%;
             width: 60px;
 
-            @include mq(sm, max) {
-                width: 72px;
-            }
-
             img {
                 height: 60px;
                 max-width: 100%;
                 width: auto;
-
-                @include mq(sm, max) {
-                    height: 72px;
-                    width: auto;
-                }
             }
         }
 
         .product-name {
             padding-right: 0;
-
-            @include mq(lg, max) {
-                width: 250px;
-            }
+            width: 250px;
 
             a {
                 color: #4267b2;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 72afa18..e4f804b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -1,15 +1,31 @@
 .checkout-container {
     .orderform-template {
-        .orderform-template-holder {
-            width: 66%;
+        @include mq(mobile, max) {
+            flex-direction: column;
+        }
 
+        .orderform-template-holder {
             .row-fluid {
                 position: relative;
 
+                @include mq(mobile, max) {
+                    display: flex;
+                    flex-direction: column;
+                }
+
                 .client-profile-data {
+                    @include mq(mobile, max) {
+                        width: 100%;
+                        margin-bottom: 10px;
+                    }
+
                     .client-profile-data.filled {
                         max-width: 331px;
 
+                        @include mq(mobile, max) {
+                            max-width: -webkit-fill-available;
+                        }
+
                         .accordion-heading {
                             .accordion-toggle {
                                 margin-bottom: 25px;
@@ -81,6 +97,11 @@
                 .payment-data {
                     position: static;
 
+                    @include mq(mobile, max) {
+                        width: 100%;
+                        margin: 0;
+                    }
+
                     .accordion-group {
                         &.active {
                             padding: 24px 17px 36px;
@@ -132,6 +153,10 @@
                                     margin: 0;
                                     position: static;
 
+                                    @include mq(mobile, max) {
+                                        width: 100%;
+                                    }
+
                                     .payment-group-list-btn {
                                         width: 100%;
 
@@ -232,6 +257,12 @@
                                 .steps-view {
                                     flex: 1;
                                     margin-left: 40px;
+
+                                    @include mq(mobile, max) {
+                                        margin: 0;
+                                        width: 100%;
+                                        max-width: -webkit-fill-available;
+                                    }
                                 }
                             }
                         }
@@ -247,6 +278,10 @@
                 }
 
                 .shipping-data {
+                    @include mq(mobile, max) {
+                        width: 100%;
+                    }
+
                     .shipping-data.active {
                         .accordion-heading {
                             span {
@@ -350,27 +385,17 @@
                                         padding: 14px 12px 12px;
 
                                         .vtex-omnishipping-1-x-leanShippingIcon {
+                                            display: flex;
+                                            align-items: center;
+                                            justify-content: center;
                                             margin-right: 8px;
                                             width: 18px;
                                             height: 18px;
                                             border: 1px solid #c4c4c4;
                                             border-radius: 3px;
 
-                                            svg {
-                                                opacity: 0;
-                                            }
-
-                                            &.active {
-                                                display: flex;
-                                                align-items: center;
-                                                justify-content: center;
-
-                                                &::before {
-                                                    background: #00c8ff;
-                                                    border-radius: 3px;
-                                                    width: 12px;
-                                                    height: 12px;
-                                                }
+                                            .vtex-omnishipping-1-x-svg {
+                                                display: none;
                                             }
                                         }
 
@@ -393,6 +418,16 @@
                                             color: #7d7d7d;
                                         }
                                     }
+
+                                    .vtex-omnishipping-1-x-leanShippingOptionActive {
+                                        .vtex-omnishipping-1-x-leanShippingIcon::before {
+                                            content: "";
+                                            width: 12px;
+                                            height: 12px;
+                                            background-color: #00c8ff;
+                                            border-radius: 3px;
+                                        }
+                                    }
                                 }
                             }
 
@@ -407,16 +442,35 @@
                                 }
 
                                 .vtex-omnishipping-1-x-addressSummary {
+                                    position: relative;
+
                                     .address-summary {
+                                        padding-left: 47px;
                                         border: 1px solid #e0e0e0;
                                         border-radius: 8px;
                                         font-weight: 400;
                                         font-size: 12px;
                                         line-height: 16px;
                                         color: #7d7d7d;
+                                        position: relative;
                                         margin-bottom: 15px;
 
+                                        &::before {
+                                            content: "";
+                                            width: 21px;
+                                            position: absolute;
+                                            left: 16px;
+                                            top: 50%;
+                                            transform: translateY(-50%);
+                                            height: 20px;
+                                            background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
+                                            background-repeat: no-repeat;
+                                            background-size: contain;
+                                        }
+
                                         .vtex-omnishipping-1-x-linkEdit {
+                                            position: absolute;
+                                            right: 15px;
                                             font-weight: 400;
                                             font-size: 12px;
                                             line-height: 16px;
diff --git a/checkout/src/arquivos/sass/partials/_autenticacao.scss b/checkout/src/arquivos/sass/partials/_autenticacao.scss
index af69fe1..396b7e1 100644
--- a/checkout/src/arquivos/sass/partials/_autenticacao.scss
+++ b/checkout/src/arquivos/sass/partials/_autenticacao.scss
@@ -32,6 +32,8 @@
 
     .orderform-template-holder {
         margin-bottom: 14px;
+        width: 100%;
+        max-width: -webkit-fill-available;
     }
 
     #orderform-title {
@@ -45,6 +47,11 @@
         font-size: 24px;
         line-height: 33px;
 
+        @include mq(mobile, max) {
+            margin: 0;
+            padding-left: 16px;
+        }
+
         &.border {
             border-bottom: 1px solid $black-500;
         }
@@ -56,11 +63,19 @@
             padding: 0 121px;
             margin-bottom: 125px;
 
+            @include mq(mobile, max) {
+                padding: 0 16px;
+            }
+
             .form-page.client-pre-email.anim-death.anim-current {
                 position: absolute;
                 width: 100%;
                 left: 0;
                 padding-bottom: 100px;
+
+                @include mq(mobile, max) {
+                    padding-bottom: 345px;
+                }
             }
 
             &.dados-pessoais {
@@ -81,6 +96,11 @@
                         line-height: 16px;
                         text-transform: uppercase;
                         color: $black-500;
+
+                        @include mq(mobile, max) {
+                            font-size: 10px;
+                            line-height: 12px;
+                        }
                     }
                 }
 
@@ -99,6 +119,16 @@
                                 font-size: 20px;
                                 line-height: 23px;
                                 text-transform: uppercase;
+
+                                @include mq(tablet, max) {
+                                    font-size: 12px;
+                                    line-height: 14px;
+                                }
+
+                                @include mq(mobile, max) {
+                                    font-size: 14px;
+                                    line-height: 16px;
+                                }
                             }
 
                             small {
@@ -107,6 +137,16 @@
                                 line-height: 23px;
                                 text-transform: uppercase;
                                 color: $black-500;
+
+                                @include mq(tablet, max) {
+                                    font-size: 12px;
+                                    line-height: 14px;
+                                }
+
+                                @include mq(mobile, max) {
+                                    font-size: 14px;
+                                    line-height: 16px;
+                                }
                             }
                         }
                     }
@@ -116,6 +156,10 @@
                         margin-bottom: 24px;
                         margin-left: 0;
 
+                        @include mq(mobile, max) {
+                            width: 100%;
+                        }
+
                         .input-block-level {
                             font-weight: 400;
                             font-size: 12px;
@@ -163,6 +207,7 @@
                     border: 1px solid $black-500;
                     border-radius: 5px;
                     padding: 16px 16px 26px;
+                    max-width: -webkit-fill-available;
 
                     h3 {
                         font-weight: 700;
@@ -189,6 +234,7 @@
 
             .step.accordion-group.client-profile-data.active {
                 border: 1px solid $gray-300;
+                max-width: -webkit-fill-available;
                 padding: 24px 17px 44px;
                 border-radius: 8px;
                 margin-bottom: 0;
@@ -217,9 +263,19 @@
 
                 .accordion-body {
                     p {
+                        @include mq(mobile, max) {
+                            width: 100%;
+                            max-width: -webkit-fill-available;
+                        }
+
                         &.client-email {
                             width: 100%;
                             margin-bottom: 16px;
+
+                            @include mq(mobile, max) {
+                                position: absolute;
+                                bottom: 100%;
+                            }
                         }
 
                         &.client-document {
@@ -234,6 +290,12 @@
                             }
                         }
 
+                        &.client-last-name {
+                            @include mq(mobile, max) {
+                                margin-right: 15px;
+                            }
+                        }
+
                         &.client-first-name,
                         &.client-last-name {
                             display: flex;
@@ -277,12 +339,26 @@
                         flex-wrap: wrap;
                         gap: 15px;
 
+                        @include mq(mobile, max) {
+                            margin: 64px 0 0px;
+                            display: grid;
+                            grid-template-columns: repeat(2, 50%);
+                            width: 100%;
+                            position: relative;
+                        }
+
                         .client-notice {
                             display: none;
                         }
 
                         div {
                             width: 46%;
+
+                            @include mq(mobile, max) {
+                                width: 100%;
+                                max-width: -webkit-fill-available;
+                                margin-right: 15px;
+                            }
                         }
                     }
 
@@ -447,6 +523,11 @@
                 border-radius: 8px;
                 height: 427px;
 
+                @include mq(mobile, max) {
+                    margin: 0;
+                    width: 100%;
+                }
+
                 @include mq(1100, min) {
                     min-width: 331px;
                 }
@@ -456,6 +537,10 @@
                     height: auto !important;
                     padding: 24px 0px 22px;
 
+                    .summary-cart-template-holder {
+                        height: auto !important;
+                    }
+
                     h2 {
                         font-weight: 400;
                         display: block;
diff --git a/checkout/src/arquivos/sass/partials/_menu.scss b/checkout/src/arquivos/sass/partials/_menu.scss
index 711b8a4..8aa0c8e 100644
--- a/checkout/src/arquivos/sass/partials/_menu.scss
+++ b/checkout/src/arquivos/sass/partials/_menu.scss
@@ -33,6 +33,11 @@
         text-transform: uppercase;
         letter-spacing: 0.05em;
         color: $black-400;
+
+        @include mq(mobile, max) {
+            margin: 17px 0;
+            padding-left: 16px;
+        }
     }
 
     .hide-cart-title {
@@ -123,12 +128,20 @@
         }
 
         .cart-template-holder {
+            @include mq(mobile, max) {
+                margin: 0;
+            }
+
             .cart {
                 margin: 0;
                 border: 1px solid $gray-100;
                 border-radius: 5px;
                 padding: 16px 29px 16px 16px;
 
+                @include mq(mobile, max) {
+                    padding: 16px 16px 15px;
+                }
+
                 .cart-items {
                     thead {
                         font-weight: 400;
@@ -137,6 +150,10 @@
                         font-family: $font-family-secundary;
                         color: $black-400;
 
+                        @include mq(mobile, max) {
+                            display: none;
+                        }
+
                         th {
                             padding-bottom: 17px;
                             text-align: left;
@@ -172,6 +189,45 @@
                             text-align: left;
                         }
 
+                        .product-item {
+                            @include mq(mobile, max) {
+                                margin: 0;
+                                position: relative;
+                                display: block;
+                            }
+                        }
+
+                        .product-image {
+                            @include mq(mobile, max) {
+                                left: 0;
+                                position: absolute;
+                            }
+                        }
+
+                        .product-price {
+                            @include mq(mobile, max) {
+                                margin: 0;
+                                display: flex;
+                                flex-direction: column;
+                                align-items: flex-end;
+                                gap: 4px;
+                                float: right;
+                                position: static;
+                            }
+
+                            br {
+                                @include mq(mobile, max) {
+                                    display: none;
+                                }
+                            }
+                        }
+
+                        .shipping-date {
+                            @include mq(mobile, max) {
+                                display: none;
+                            }
+                        }
+
                         .product-name a,
                         .shipping-estimate-date,
                         .list-price {
@@ -185,6 +241,23 @@
                             color: $gray-500;
                         }
 
+                        .product-name {
+                            @include mq(mobile, max) {
+                                position: static;
+                                width: 250px;
+                                padding: 0 0 11px !important;
+                                margin-left: 76px;
+                                display: block;
+                            }
+
+                            a {
+                                @include mq(mobile, max) {
+                                    margin: 0;
+                                    display: block;
+                                }
+                            }
+                        }
+
                         .product-name a,
                         input {
                             color: $black-500;
@@ -206,6 +279,21 @@
                             display: flex;
                         }
 
+                        .quantity-price {
+                            @include mq(mobile, max) {
+                                display: none;
+                            }
+                        }
+
+                        .item-remove .item-link-remove .item-remove-ico {
+                            @include mq(mobile, max) {
+                                position: absolute;
+                                top: 0;
+                                right: 0;
+                                transform: translateY(calc(100% - 5px));
+                            }
+                        }
+
                         .quantity {
                             padding: 0 11px;
                             margin: 0;
@@ -213,6 +301,14 @@
                             border: 1px solid $gray-300;
                             border-radius: 8px;
 
+                            @include mq(mobile, max) {
+                                margin-left: 76px !important;
+                                max-width: 99px;
+                                justify-content: space-between;
+                                transform: none;
+                                width: 35% !important;
+                            }
+
                             .item-quantity-change {
                                 background-color: $blue-500;
                                 width: 16px;
@@ -276,6 +372,10 @@
                 display: flex;
                 justify-content: space-between;
 
+                @include mq(mobile, max) {
+                    flex-direction: column;
+                }
+
                 &::before,
                 &::after {
                     display: none;
@@ -284,6 +384,10 @@
                 .cart-more-options {
                     margin: 0 0 0 128px;
 
+                    @include mq(mobile, max) {
+                        margin: 0 0 48px;
+                    }
+
                     .srp-content {
                         display: flex;
                         flex-direction: column;
@@ -438,6 +542,11 @@
                 .cart-totalizers {
                     margin: 0 128px 0 0;
 
+                    @include mq(mobile, max) {
+                        width: 100%;
+                        padding: 0 16px 0 17px;
+                    }
+
                     .coupon-fieldset {
                         .coupon-label {
                             font-weight: 400;
@@ -523,7 +632,7 @@
 
                     .totalizers-list {
                         td {
-                            padding: 0 0 10px 0;
+                            padding: 10px 0 10px 0;
                             font-weight: 400;
                             font-size: 14px;
                             line-height: 16px;
@@ -557,6 +666,14 @@
             padding: 0;
             align-self: flex-end;
 
+            @include mq(mobile, max) {
+                display: flex;
+                width: 100%;
+                margin: 0;
+                max-width: -webkit-fill-available;
+                padding: 0 15px 0 16px;
+            }
+
             .link-choose-more-products-wrapper {
                 margin: 17px 0 15px;
 
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 70d775d..d8e675e 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -33,6 +33,7 @@ $grid-breakpoints: (
     cstm: 400,
     sm: 375px,
     md: 478px,
+    tablet: 768px,
     lg: 992px,
     mobile: 1025px,
     xl: 1200px,