From 179cddc1902a1e624e76ca950278ebe98aac143c Mon Sep 17 00:00:00 2001
From: DaviHKlein <davihgklein@gmail.com>
Date: Sun, 18 Dec 2022 22:20:53 -0300
Subject: [PATCH] feat(sassPartials):Adiciona todo o sass do partials

---
 .../src/arquivos/sass/partials/_footer.scss   | 203 +++++++++++++++---
 .../src/arquivos/sass/partials/_header.scss   | 158 +++++++++++++-
 .../arquivos/sass/partials/_prateleira.scss   | 142 ++++++++++++
 3 files changed, 463 insertions(+), 40 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;
     }
 }
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8b44777..29f8467 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,36 +1,172 @@
-/* _header.scss */
 .headerCheckout {
     .container {
         width: auto !important;
     }
     &__wrapper {
-        align-items: center;
         display: flex;
-        justify-content: space-between;
+        align-items: center;
+        justify-content: space-around;
+        padding: 16px;
+        border-bottom: 1px solid $black;
+
+        @media (min-width: 1025px) {
+            padding: 33.5px 0;
+        }
+
+        @media (min-width: 2500px) {
+            padding: 33.5px 0;
+        }
+    }
+    .progress-bar {
+        display: flex;
+        flex-direction: column;
+        right: 31.5%;
+        top: 33%;
+        @media (max-width: 1024px) {
+            display: none;
+        }
+        @media (min-width: 2500px) {
+            right: 41%;
+        }
+
+        .containerLi {
+            display: flex;
+            position: relative;
+            align-items: center;
+        }
+        ul {
+            display: flex;
+            margin: 0;
+            gap: 100px;
+            list-style: none;
+        }
+
+        p {
+            margin-bottom: 0;
+        }
+
+        &-text {
+            font-family: $font-family-secundary;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+        }
+
+        &-line-1,
+        &-line-2 {
+            position: absolute;
+            width: 171px;
+            top: 82%;
+            left: 55%;
+            border: 1px solid $black;
+            z-index: 0;
+
+            @media (min-width: 2500px) {
+                width: 240px;
+                top: 79%;
+                left: 55%;
+            }
+        }
+
+        &-line-2 {
+            width: 166px;
+            left: -223%;
+
+            @media (min-width: 2500px) {
+                width: 230px;
+                left: -143%;
+            }
+        }
+
+        &-circle-1,
+        &-circle-2,
+        &-circle-3 {
+            display: flex;
+            height: 10px;
+            width: 10px;
+            align-self: center;
+            background: $white;
+            border: 1px solid $black;
+            border-radius: 50%;
+            margin-left: 40%;
+            margin-top: 9px;
+            padding: 0;
+
+            @media (min-width: 2500px) {
+                height: 22px;
+                width: 22px;
+            }
+        }
+
+        .active {
+            background: $black;
+        }
     }
 
     &__logo {
-        img {
-            height: 52px;
-            width: auto;
+        width: 45.35%;
+
+        @media (min-width: 1025px) {
+            width: 17.059%;
+        }
+
+        @media (min-width: 1025px) {
+            width: 15.28%;
+
+            img {
+                width: 100%;
+            }
+        }
+        @media (min-width: 2500px) {
+            width: 19.22%;
         }
     }
 
     &__safeBuy {
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+
+        @media (min-width: 1025px) {
+            width: 15.5%;
+        }
+
+        @media (min-width: 2500px) {
+            width: 20%;
+        }
+
         span {
-            align-items: center;
-            display: flex;
+            min-width: fit-content;
+            height: 50%;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
             color: $color-gray;
+            margin-left: 8px;
+
+            @media (min-width: 2500px) {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
-        i {
-            margin-right: 8px;
+        img {
+            width: 4.5%;
+            min-width: 12px;
+
+            @media (min-width: 2500px) {
+                width: 6.1%;
+            }
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..e048f93 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,143 @@
 /* _prateleira.scss */
+.footerCheckout__prateleira {
+    //width: 96.88% !important;
+    margin: 0 132px;
+    //width: 100% !important;
+    @media (max-width: 1024px) {
+        width: auto !important;
+        margin: 0 16px;
+    }
+}
+.footerTitle {
+    text-align: center;
+    font-family: "Tenor Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    color: $black;
+    margin-bottom: 20px;
+
+    @include mq(tv, min) {
+        font-size: 48px;
+        line-height: 76px;
+    }
+}
+.slick-test {
+    width: 100%;
+    gap: 16px;
+    margin: 0 !important;
+    & li {
+        max-width: 97.98%;
+        @media (max-width: 375px) {
+            width: 164px !important;
+        }
+        @media (max-width: 1024px) {
+            width: 97.86% !important;
+            max-width: 100%;
+        }
+        @include mq(tv, min) {
+            min-width: 485.07px;
+        }
+    }
+}
+.itemList {
+    @media (max-width: 375px) {
+        width: 164px;
+    }
+}
+.itemSku {
+    display: flex;
+    gap: 5px;
+    justify-content: center;
+    flex-wrap: wrap;
+    height: 26px;
+    & p {
+        background: #00c8ff;
+        border-radius: 8px;
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 13px;
+        line-height: 18px;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        height: 18px;
+        margin: 0;
+
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+
+        color: $white;
+        @include mq(tv, min) {
+            font-size: 26px;
+            line-height: 35px;
+            height: auto;
+        }
+    }
+    @media (max-width: 375px) {
+        height: 61px;
+        justify-content: center;
+        align-items: center;
+    }
+    @media (max-width: 1183px) {
+        height: 61px;
+        justify-content: center;
+        align-items: center;
+    }
+    @include mq(tv, min) {
+        min-height: 45px;
+    }
+}
+.productName {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 18px;
+    margin: 20px 0px;
+    text-align: center;
+    height: 18px;
+
+    color: $black;
+    @media (max-width: 375px) {
+        height: 36px;
+    }
+    @include mq(tv, min) {
+        height: 35px;
+        font-size: 26px;
+        line-height: 35px;
+    }
+}
+.productImg {
+    background: #eeeeee;
+    width: 100%;
+}
+.productLink {
+    background: #00c8ff;
+    border-radius: 8px;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 18px;
+    padding: 12px 0;
+    //padding: 12px 71px 12px 72px;
+    display: flex;
+    justify-content: center;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    margin: 20px 0px 0px;
+
+    color: $white;
+    &:hover {
+        color: white;
+        text-decoration: None;
+    }
+    @include mq(tv, min) {
+        font-size: 26px;
+        line-height: 35px;
+    }
+}
-- 
2.34.1