From 35c3dac351ea540e84246aa9563bd3279374db1b Mon Sep 17 00:00:00 2001
From: carloswinter <caduwinteer@gmail.com>
Date: Sun, 18 Dec 2022 22:04:06 -0300
Subject: [PATCH] feat(footer): adiciona css em sass ao footer

---
 .../src/arquivos/sass/partials/_footer.scss   | 203 +++++++++++++++---
 1 file changed, 174 insertions(+), 29 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..2ebcd2d 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,47 +1,134 @@
-/* _footer.scss */
 .footerCheckout {
-    border-top: none;
-    color: $color-gray2;
+    margin-top: auto;
+    //border-top: 1px solid #000;
+    .container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding: 7px 0;
+        margin: 0;
+
+        @include mq(dt, min) {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            padding: 15px 0 15px 0;
+        }
+
+        @include mq(tv, min) {
+            padding: 26px 0 26px 0;
+        }
+    }
 
     &__wrapper {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+        border-top: 1px solid $black;
+
+        @media screen and (max-width: 490px) {
+            padding: 7px 0;
+        }
     }
 
     &__address {
-        color: $color-gray2;
+        color: $gray-500;
         font-family: $font-family;
-        font-style: normal;
-        font-weight: normal;
+        font-weight: 400;
+        line-height: 14px;
         font-size: 10px;
-        line-height: 12px;
         text-transform: capitalize;
-        max-width: 40%;
 
-        @include mq(md, max) {
-            margin-bottom: 24px;
-            max-width: 100%;
+        @include mq(dt, max) {
+            display: flex;
+            width: 100%;
+            order: 2;
+            margin-top: 17px;
+
+            span {
+                margin-left: 16px;
+            }
+        }
+
+        @include mq(dt, min) {
+            min-width: 269px;
+            margin-left: 32px;
+        }
+
+        @include mq(tv, min) {
+            font-size: 20px;
+            line-height: 27px;
+            min-width: 537px;
+            margin-left: 0;
         }
     }
 
     &__stamps {
-        align-items: center;
         display: flex;
-        justify-self: center;
+        height: 33px;
+        align-items: center;
         list-style: none;
+        margin: 0 0 0 5px;
 
-        @include mq(md, max) {
-            align-self: center;
-            margin-bottom: 12px;
+        li {
+            height: 33px;
         }
 
-        &__divider {
-            background-color: $color-gray4;
-            display: inline-block;
-            height: 24px;
-            margin: 0 8px;
-            width: 1px;
+        @include mq(dt, min) {
+            justify-content: center;
+            min-width: 404px;
+            margin: 0;
+        }
+
+        @include mq(tv, min) {
+            min-width: 690.52px;
+        }
+
+        .payments-icons-wrapper {
+            display: flex;
+            width: 100%;
+            list-style: none;
+            gap: 13.35px;
+            margin: 0;
+
+            @include mq(dt, max) {
+                gap: 4.35px;
+            }
+            figure {
+                padding: 6px 0 7px;
+                width: 35.65px;
+                height: 20px;
+                margin: 0;
+                @include mq(tv, min) {
+                    width: 69.63px;
+                }
+
+                @include mq(Gf, max) {
+                    width: 24px;
+                }
+            }
+        }
+
+        .footerCheckout__stamps__divider {
+            border-left: 1px solid $gray;
+            margin: 0 10px;
+            height: 33px;
+            padding: 0 0 9px;
+
+            @include mq(dt, min) {
+                margin-left: 11.35px;
+            }
+        }
+
+        .footerCheckout__vtexpci {
+            .vtex-icon {
+                width: 53px;
+                margin: 0;
+            }
+
+            @include mq(tv, min) {
+                .vtex-icon {
+                    width: 103.52px;
+                    height: 64.46px;
+                }
+            }
         }
     }
 
@@ -51,18 +138,43 @@
         list-style-type: none;
         margin: 0;
 
-        li:last-child {
+        @include mq(dt, max) {
+            display: flex;
+            width: 100%;
+            order: 3;
+            margin-top: 17px;
+        }
+
+        @include mq(dt, min) {
+            min-width: 217px;
+            margin-right: 22.5px;
+        }
+
+        li {
             margin-left: 16px;
+
+            figure {
+                margin: 0;
+            }
+        }
+
+        .vtex-icon {
+            width: 44.92px;
+            margin: 0;
+        }
+        .m3-icon {
+            width: 28.66px;
+            margin: 0;
         }
 
         a {
             align-items: center;
-            color: $color-gray2;
+            color: $gray-500;
             display: flex;
             font-family: $font-family;
             font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
+            font-weight: 400;
+            font-size: 9px;
             line-height: 12px;
             text-decoration: none;
 
@@ -70,5 +182,38 @@
                 margin-right: 8px;
             }
         }
+
+        @include mq(tv, min) {
+            min-width: 388.98px;
+            margin-right: 0;
+
+            a {
+                font-size: 18px;
+                line-height: 25px;
+            }
+
+            li {
+                margin-left: 10px;
+            }
+
+            .vtex-icon {
+                width: 87.73px;
+            }
+            .m3-icon {
+                width: 55.98px;
+            }
+        }
+    }
+
+    .footerCheckout::after,
+    ::before {
+        display: none;
+        content: none;
+    }
+
+    .footerCheckout::before,
+    ::after {
+        display: none;
+        content: none;
     }
 }