From abb11283f5d5fe81f226f181e4a6d6ee9600b8ce Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Mon, 19 Dec 2022 16:18:23 -0300
Subject: [PATCH] feat(footer/header): created styles for large devices and
 refactor code, lint-code

---
 .../src/arquivos/sass/partials/_footer.scss   |  87 +++---
 .../src/arquivos/sass/partials/_header.scss   | 259 ++++++++++++------
 2 files changed, 217 insertions(+), 129 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 4aa2eec..9a5717d 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,23 +1,20 @@
+/* prettier-ignore*/
 .footerCheckout {
     color: $clr-gray-400;
 
     &__wrapper {
         border-top: 1px solid $clr-common-black;
         padding: 16px 25px 18.88px 8px;
-
-        @include mq("md", min) {
-            padding: 16px 0;
-        }
     }
 
     &__stamps {
         order: 0;
-        margin: 0 0 16px;
+            margin: 0 0 16px;
     }
 
     &__address {
         order: 1;
-        margin: 0 0 16px;
+            margin: 0 0 16px;
     }
 
     &__developedBy {
@@ -25,11 +22,12 @@
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     .container {
-        width: 100%;
         display: flex;
         flex-direction: column;
+            width: 100%;
 
         &::before,
         &::after {
@@ -39,12 +37,29 @@
 }
 
 .footerCheckout {
-    @include mq("md", min) {
+    &__developedBy a,
+    &__developedBy,
+    &__wrapper,
+    &__stamps {
+        display: flex;
+        align-items: center;
+    }
+
+    &__wrapper {
+        justify-content: space-between;
+    }
+}
+
+/* prettier-ignore*/
+.footerCheckout {
+    @include mq("md") {
         &__stamps {
             width: 34.510595358%;
         }
 
         &__wrapper {
+            padding: 16px 0;
+
             .container {
                 width: 94.9734%;
                 margin: 0 auto;
@@ -52,22 +67,26 @@
         }
     }
 
-    @include mq("lg", min) {
+    @include mq("lg") {
         .container {
             align-items: center;
             justify-content: space-between;
             flex-direction: row;
         }
 
+        &__wrapper {
+            width: 100%;
+        }
+
         &__address {
             order: 0;
-            margin: 0;
+                margin: 0;
         }
 
         &__stamps {
-            width: 33.223684211%;
             order: 1;
-            margin: 0;
+                width: 33.223684211%;
+                margin: 0;
         }
 
         &__developedBy {
@@ -75,10 +94,10 @@
         }
     }
 
-    @include mq("xxl", min) {
+    @include mq("xxl") {
         &__address {
             span {
-                font-size: 200%;
+                font-size: 20px;
             }
         }
 
@@ -94,29 +113,13 @@
     }
 }
 
-.footerCheckout {
-    &__developedBy a,
-    &__developedBy,
-    &__wrapper,
-    &__stamps {
-        display: flex;
-        align-items: center;
-    }
-    &__wrapper {
-        justify-content: space-between;
-
-        @include mq("lg", min) {
-            width: 100%;
-        }
-    }
-}
-
+/* prettier-ignore*/
 .footerCheckout {
     &__creditList {
-        width: 100%;
         display: flex;
         align-items: center;
         gap: 4px;
+            width: 100%;
     }
 
     &__creditItem,
@@ -130,30 +133,32 @@
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     &__address {
         font-style: normal;
         font-weight: normal;
         font-size: 10px;
         line-height: 12px;
-        font-family: $font-family-100;
         text-transform: capitalize;
-        color: $clr-gray-400;
+            color: $clr-gray-400;
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     &__stamps {
         &__divider {
-            background-color: $clr-gray-300;
             display: inline-block;
-            height: 24px;
-            margin: 0 8px;
-            width: 1px;
+                width: 1px;
+                height: 24px;
+                margin: 0 8px;
+                    background-color: $clr-gray-300;
         }
     }
 }
 
+/* prettier-ignore*/
 .footerCheckout {
     &__developedBy {
         margin: 0;
@@ -166,10 +171,10 @@
             font-style: normal;
             font-weight: normal;
             font-size: 10px;
-            font-family: $font-family-100;
             line-height: 12px;
+            font-family: $font-family-100;
             text-decoration: none;
-            color: $clr-gray-400;
+                color: $clr-gray-400;
 
             span {
                 margin-right: 8px;
@@ -182,5 +187,3 @@
         }
     }
 }
-
-
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index a211e21..a8523d5 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -23,6 +23,37 @@ body :where(ul, li, ol) {
     @return unquote($width);
 }
 
+@mixin text-size($size: 100, $fontFamily: 100, $lineHeight: 14px) {
+    font-size: var(--text-size-#{$size});
+    font-family: var(--font-family-#{$fontFamily});
+    line-height: $lineHeight;
+}
+
+@mixin text-uppercase($size: 100, $fontFamily: 100, $lineHeight: 14px) {
+    @include text-size($size, $fontFamily, $lineHeight);
+    text-transform: uppercase;
+}
+
+:root {
+    --text-size-100: 12px;
+    --text-size-200: 14px;
+    --text-size-300: 18px;
+    --text-size-400: 24px;
+
+    --font-family-100: #{$font-family-100};
+    --font-family-200: #{$font-family-200};
+}
+
+@media screen and (min-width: 2500px) {
+    :root {
+        --text-size-100: 24px;
+        --text-size-200: 28px;
+        --text-size-300: 36px;
+        --text-size-400: 48px;
+    }
+}
+
+/* prettier-ignore*/
 .headerCheckout {
     padding: 16px;
     border-bottom: 1px solid $clr-common-black;
@@ -30,6 +61,7 @@ body :where(ul, li, ol) {
     .container {
         width: 100%;
         height: auto;
+        margin: 0;
     }
 
     &__wrapper,
@@ -39,49 +71,53 @@ body :where(ul, li, ol) {
     }
 
     &__wrapper {
-        width: 100%;
         justify-content: space-between;
+            width: 100%;
     }
 
     &__safeBuy {
-        width: fluid(119px, 343px);
-        max-width: 119px;
         gap: 8px;
-
-        span {
-            font: normal normal 12px / 14px $font-family-100;
-            text-transform: uppercase;
-            color: $clr-gray-500;
-        }
-
-        img {
-            width: 12px;
-            height: 13px;
-        }
-    }
-
-    &__logo {
-        width: fluid(155.58px, 343px);
-        max-width: 155.58px;
-        height: auto;
-
-        img {
             width: 100%;
-            height: 100%;
-        }
+            max-width: 119px;
+    }
+}
+
+.headerCheckout__safeBuy {
+    span {
+        @include text-uppercase("100", "100", 14px);
+        font-style: normal;
+        font-weight: normal;
     }
 
+    img {
+        width: 12px;
+        height: 13px;
+    }
+}
+
+.headerCheckout__logo {
+    width: fluid(155.58px, 343px);
+    height: auto;
+    max-width: 155.58px;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.headerCheckout {
     .progress-bar {
         display: none;
     }
 }
 
 .headerCheckout {
-    @media screen and (min-width: 1025px) {
+    @include mq("lg") {
         padding: 29px 0;
 
         &__wrapper {
-            width: fluid(992px, 1024px);
+            width: fluid(1018px, 1280px);
             margin: 0 auto;
         }
 
@@ -90,13 +126,7 @@ body :where(ul, li, ol) {
         }
     }
 
-    @media screen and (min-width: 1025px) {
-        &__wrapper {
-            width: fluid(1018px, 1280px);
-        }
-    }
-
-    @media screen and (min-width: 2500px) {
+    @include mq("xxl") {
         $width-container: 1988.28px;
 
         &__wrapper {
@@ -114,7 +144,7 @@ body :where(ul, li, ol) {
             max-width: none;
 
             span {
-                font: normal normal 24px / 32.68px $font-family-100;
+                @include text-size("100", "100", 32.68px);
             }
 
             img {
@@ -125,92 +155,147 @@ body :where(ul, li, ol) {
     }
 }
 
+/* prettier-ignore*/
 .headerCheckout {
     .progress-bar {
         width: 439px;
+    }
 
-        .progress-list {
+    .progress-list,
+    .progress-item,
+    .progress-container,
+    .progress-content {
+        display: flex;
+        align-items: center;
+    }
+
+    .progress-list {
+        justify-content: space-between;
             width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
             margin: 0;
-        }
+    }
 
-        .progress-item {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            font-size: 12px;
-        }
+    .progress-item,
+    .progress-container,
+    .progress-content {
+        flex-direction: column;
+        justify-content: center;
+    }
 
-        .progress-content,
-        .progress-container {
-            display: flex;
-            align-items: center;
-            flex-direction: column;
-        }
-
-        .progress-container {
-            position: relative;
-            justify-content: center;
+    .progress-container {
+        position: relative;
             width: 100%;
-        }
+    }
 
-        .progress-item {
-            &--left,
-            &--right {
-                width: 40%;
+    .progress-content {
+        gap: 16px;
+    }
 
-                .progress-line {
-                    position: absolute;
-                    bottom: 6px;
+    .progress-item {
+        @include text-size("100", "200", 14.04px);
+
+        &--left,
+        &--right {
+            width: 40%;
+
+            .progress-line {
+                position: absolute;
+                bottom: 6px;
                     width: 100%;
                     height: 1px;
                     border-bottom: 1px solid #000;
+            }
+        }
+
+        &--left {
+            .progress-container {
+                align-items: flex-start;
+            }
+
+            .progress-line {
+                left: 75%;
+                transform: translateX(-50%);
+            }
+        }
+
+        &--center {
+            width: 90px;
+        }
+
+        &--right {
+            .progress-container {
+                align-items: flex-end;
+            }
+
+            .progress-line {
+                right: 72%;
+                transform: translateX(50%);
+            }
+        }
+    }
+
+    .progress-bullet {
+        $square-size: 12px;
+
+        position: relative;
+        z-index: 10;
+            width: $square-size;
+            height: $square-size;
+            border: 1px solid $clr-common-black;
+            border-radius: 100%;
+                background-color: $clr-common-white;
+
+        &.active {
+            background-color: $clr-common-black;
+        }
+    }
+}
+
+.headerCheckout {
+    @include mq("xxl") {
+        .progress-bar {
+            width: 1078.86px;
+        }
+
+        .progress-list {
+            justify-content: initial;
+        }
+
+        .progress-item {
+            @include text-size("100", "200", 14.04px);
+
+            &--left,
+            &--right {
+                width: fluid(444px, 1078.86px);
+
+                .progress-line {
+                    bottom: 12px;
                 }
             }
 
             &--left {
-                .progress-container {
-                    align-items: flex-start;
-                }
-
                 .progress-line {
-                    left: 75%;
-                    transform: translateX(-50%);
+                    left: 67%;
                 }
             }
 
             &--center {
-                width: 90px;
+                width: auto;
+                max-width: none;
             }
 
             &--right {
-                .progress-container {
-                    align-items: flex-end;
-                }
-
                 .progress-line {
-                    right: 72%;
-                    transform: translateX(50%);
+                    right: 67%;
                 }
             }
         }
 
         .progress-bullet {
-            width: 12px;
-            height: 12px;
-            background-color: $clr-common-white;
-            position: relative;
-            border: 1px solid $clr-common-black;
-            z-index: 10;
-            border-radius: 100%;
+            $square-size: 24px;
 
-            &.active {
-                background-color: $clr-common-black;
-            }
+            width: $square-size;
+            height: $square-size;
         }
     }
 }