From 8216f8d4c987f68cfccfdb1306c2443105051759 Mon Sep 17 00:00:00 2001
From: matheus <matheusbrollo201@gmail.com>
Date: Wed, 14 Dec 2022 18:00:44 -0300
Subject: [PATCH] fix(variaveis): added colors

---
 .../sass/checkout/_checkout-autenticacao.scss | 474 +++++++++---------
 .../src/arquivos/sass/checkout/_checkout.scss |   4 +-
 .../src/arquivos/sass/partials/_footer.scss   | 197 ++++++--
 .../src/arquivos/sass/utils/_variaveis.scss   |  14 +-
 4 files changed, 418 insertions(+), 271 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 92f0375..9647f68 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,289 +1,289 @@
 .checkout-container {
-	.client-pre-email {
-		border-color: $color-gray4;
-		font-family: $font-family;
-		padding-top: 8px;
+    .client-pre-email {
+        border-color: $color-gray3;
+        font-family: $font-family;
+        padding-top: 8px;
 
-		.link-cart {
-			a {
-				color: $color-black;
-				font-size: 14px;
+        .link-cart {
+            a {
+                color: $color-black;
+                font-size: 14px;
 
-				&:hover {
-					color: lighen($color-black, 10);
-				}
-			}
-		}
+                &:hover {
+                    color: lighen($color-black, 10);
+                }
+            }
+        }
 
-		.pre-email {
-			flex-direction: column;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+        .pre-email {
+            flex-direction: column;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-			h3 {
-				margin-bottom: 16px;
+            h3 {
+                margin-bottom: 16px;
 
-				span {
-					color: #303030;
-					font-size: 24px;
-				}
+                span {
+                    color: #303030;
+                    font-size: 24px;
+                }
 
-				small {
-					color: $color-gray4;
-				}
-			}
-		}
+                small {
+                    color: $color-gray3;
+                }
+            }
+        }
 
-		.client-email {
-			margin: 0 0 16px;
+        .client-email {
+            margin: 0 0 16px;
 
-			input {
-				box-shadow: none;
-				color: $color-black;
-				font-family: $font-family;
-				padding: 0 16px;
-				border: 2px solid $color-gray3;
-				box-sizing: border-box;
-				border-radius: 5px;
+            input {
+                box-shadow: none;
+                color: $color-black;
+                font-family: $font-family;
+                padding: 0 16px;
+                border: 2px solid $color-gray3;
+                box-sizing: border-box;
+                border-radius: 5px;
 
-				@media (max-width: 490px) {
-					width: auto;
-				}
-			}
+                @media (max-width: 490px) {
+                    width: auto;
+                }
+            }
 
-			button {
-				background-color: $color-black;
-				border-radius: 5px;
-				border: none;
-				font-family: $font-family;
-				height: 54px;
-				right: 0;
-				top: 0;
+            button {
+                background-color: $color-black;
+                border-radius: 5px;
+                border: none;
+                font-family: $font-family;
+                height: 54px;
+                right: 0;
+                top: 0;
 
-				@media (max-width: 490px) {
-					height: 48px;
-					margin: 0;
-					position: absolute;
-				}
-			}
+                @media (max-width: 490px) {
+                    height: 48px;
+                    margin: 0;
+                    position: absolute;
+                }
+            }
 
-			span.help.error {
-				color: red;
-			}
-		}
+            span.help.error {
+                color: red;
+            }
+        }
 
-		.emailInfo {
-			padding: 16px;
-			background-color: $color-white;
-			border: 1px solid $color-gray4;
-			border-radius: 0;
+        .emailInfo {
+            padding: 16px;
+            background-color: $color-white;
+            border: 1px solid $color-gray3;
+            border-radius: 0;
 
-			h3 {
-				color: #303030;
-				margin: 0 0 8px 0;
-			}
+            h3 {
+                color: #303030;
+                margin: 0 0 8px 0;
+            }
 
-			ul {
-				margin: 0;
+            ul {
+                margin: 0;
 
-				li {
-					span {
-						color: $color-black;
-					}
+                li {
+                    span {
+                        color: $color-black;
+                    }
 
-					i::before {
-						color: $color-black;
-						font-size: 1rem;
-						opacity: 1;
-					}
-				}
-			}
+                    i::before {
+                        color: $color-black;
+                        font-size: 1rem;
+                        opacity: 1;
+                    }
+                }
+            }
 
-			i::before {
-				color: $color-black;
-				font-size: 6rem;
-				opacity: 0.5;
-			}
-		}
-	}
+            i::before {
+                color: $color-black;
+                font-size: 6rem;
+                opacity: 0.5;
+            }
+        }
+    }
 
-	.shipping-data,
-	.payment-data,
-	.client-profile-data {
-		.accordion-group {
-			border-radius: 0;
-			border: 1px solid $color-gray4;
-			font-family: $font-family;
-			padding: 16px;
+    .shipping-data,
+    .payment-data,
+    .client-profile-data {
+        .accordion-group {
+            border-radius: 0;
+            border: 1px solid $color-gray3;
+            font-family: $font-family;
+            padding: 16px;
 
-			.accordion-heading {
-				span {
-					color: #303030;
-					margin-bottom: 8px;
-					padding: 0;
+            .accordion-heading {
+                span {
+                    color: #303030;
+                    margin-bottom: 8px;
+                    padding: 0;
 
-					i::before {
-						fill: #303030;
-					}
-				}
+                    i::before {
+                        fill: #303030;
+                    }
+                }
 
-				a {
-					align-items: center;
-					background-color: #303030;
-					border-radius: 8px;
-					border: none;
-					color: $color-white;
-					display: flex;
-					justify-content: center;
-					padding: 6px 5px 6px 8px;
-				}
-			}
+                a {
+                    align-items: center;
+                    background-color: #303030;
+                    border-radius: 8px;
+                    border: none;
+                    color: $color-white;
+                    display: flex;
+                    justify-content: center;
+                    padding: 6px 5px 6px 8px;
+                }
+            }
 
-			.accordion-inner {
-				padding: 0;
+            .accordion-inner {
+                padding: 0;
 
-				/* General configurations */
+                /* General configurations */
 
-				.client-notice {
-					color: $color-black;
-				}
+                .client-notice {
+                    color: $color-black;
+                }
 
-				p {
-					label {
-						color: $color-black;
-						font-weight: 500;
-					}
+                p {
+                    label {
+                        color: $color-black;
+                        font-weight: 500;
+                    }
 
-					select,
-					input {
-						border-radius: 0;
-						border: 1px solid $color-gray4;
-						box-shadow: none;
-					}
+                    select,
+                    input {
+                        border-radius: 0;
+                        border: 1px solid $color-gray3;
+                        box-shadow: none;
+                    }
 
-					.help.error {
-						color: red;
-					}
-				}
+                    .help.error {
+                        color: red;
+                    }
+                }
 
-				.box-client-info-pj {
-					.link a#is-corporate-client,
-					.link a#not-corporate-client {
-						color: $color-black;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                .box-client-info-pj {
+                    .link a#is-corporate-client,
+                    .link a#not-corporate-client {
+                        color: $color-black;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				.state-inscription-box span {
-					font-weight: 500;
-				}
+                .state-inscription-box span {
+                    font-weight: 500;
+                }
 
-				button.submit {
-					border: none;
-					border-radius: 5px;
-					background: $color-black;
-					margin-top: 8px;
-					outline: none;
-					transition: all 0.2s linear;
+                button.submit {
+                    border: none;
+                    border-radius: 5px;
+                    background: $color-black;
+                    margin-top: 8px;
+                    outline: none;
+                    transition: all 0.2s linear;
 
-					&:hover {
-						background: lighten($color-black, 5);
-					}
+                    &:hover {
+                        background: lighten($color-black, 5);
+                    }
 
-					&:active {
-						background: darken($color-black, 5);
-					}
-				}
+                    &:active {
+                        background: darken($color-black, 5);
+                    }
+                }
 
-				/* Shipping configurations */
+                /* Shipping configurations */
 
-				.ship-postalCode small a {
-					color: #303030;
-					font-weight: 500;
-					text-decoration: underline;
-				}
+                .ship-postalCode small a {
+                    color: #303030;
+                    font-weight: 500;
+                    text-decoration: underline;
+                }
 
-				.vtex-omnishipping-1-x-deliveryGroup {
-					p {
-						color: #303030;
-						font-size: 14px;
-						font-weight: 500;
-					}
+                .vtex-omnishipping-1-x-deliveryGroup {
+                    p {
+                        color: #303030;
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
 
-					.shp-lean {
-						border: 1px solid $color-gray4;
-						border-radius: 0;
+                    .shp-lean {
+                        border: 1px solid $color-gray3;
+                        border-radius: 0;
 
-						label {
-							background-color: $color-white;
-							box-shadow: none;
-							color: #303030;
-							padding: 8px 12px;
+                        label {
+                            background-color: $color-white;
+                            box-shadow: none;
+                            color: #303030;
+                            padding: 8px 12px;
 
-							svg path {
-								fill: #d8c8ac;
-							}
-						}
-					}
-				}
+                            svg path {
+                                fill: #d8c8ac;
+                            }
+                        }
+                    }
+                }
 
-				.delivery-address-title {
-					color: #303030;
-					font-size: 14px;
-					font-weight: 500;
-				}
+                .delivery-address-title {
+                    color: #303030;
+                    font-size: 14px;
+                    font-weight: 500;
+                }
 
-				.shp-summary-group-info {
-					border-color: $color-gray4;
-				}
+                .shp-summary-group-info {
+                    border-color: $color-gray3;
+                }
 
-				.address-summary {
-					background: none;
-					border-color: $color-gray4;
-					border-radius: 0;
-					color: #303030;
-					padding: 12px;
+                .address-summary {
+                    background: none;
+                    border-color: $color-gray3;
+                    border-radius: 0;
+                    color: #303030;
+                    padding: 12px;
 
-					@include mq(md, max) {
-						background-position: 8px 9px;
-					}
+                    @include mq(md, max) {
+                        background-position: 8px 9px;
+                    }
 
-					a {
-						color: #303030;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                    a {
+                        color: #303030;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				.shp-summary-group-price,
-				.shp-summary-package {
-					color: $color-gray4;
-				}
+                .shp-summary-group-price,
+                .shp-summary-package {
+                    color: $color-gray3;
+                }
 
-				.shp-summary-group-price {
-					padding-right: 16px;
-				}
+                .shp-summary-group-price {
+                    padding-right: 16px;
+                }
 
-				.shp-summary-package {
-					padding-left: 16px;
-				}
+                .shp-summary-package {
+                    padding-left: 16px;
+                }
 
-				.vtex-omnishipping-1-x-summaryChange {
-					border-color: #303030;
-					color: #303030;
-				}
+                .vtex-omnishipping-1-x-summaryChange {
+                    border-color: #303030;
+                    color: #303030;
+                }
 
-				.vtex-omnishipping-1-x-deliveryChannelsToggle {
-					background-color: #d8c8ac;
-					border: 1px solid #d8c8ac;
-				}
+                .vtex-omnishipping-1-x-deliveryChannelsToggle {
+                    background-color: #d8c8ac;
+                    border: 1px solid #d8c8ac;
+                }
 
-				.vtex-omnishipping-1-x-deliveryOptionActive {
-					text-shadow: 1.3px 1px lighten($color-black, 50);
-				}
-			}
-		}
-	}
+                .vtex-omnishipping-1-x-deliveryOptionActive {
+                    text-shadow: 1.3px 1px lighten($color-black, 50);
+                }
+            }
+        }
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..1d6e4f8 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -68,7 +68,7 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
+    color: $gray-500;
     font-family: $font-family;
     font-weight: 500;
     font-size: 36px;
@@ -96,7 +96,7 @@ body {
         &::before,
         &::after {
             content: "";
-            background: $color-gray2;
+            background: $gray-500;
             display: block;
             float: right;
             height: 2px;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..2a701e2 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -1,47 +1,130 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
-    color: $color-gray2;
+    .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;
+            margin: 0;
+            gap: 4px;
+
+            figure {
+                padding: 6px 0 7px;
+                width: 35.65px;
+                height: 20px;
+                margin: 0;
+                @include mq(tv, min) {
+                    width: 69.63px;
+                }
+
+                @include mq(Gf, max) {
+                    width: 28px;
+                }
+            }
+        }
+
+        .footerCheckout__stamps__divider {
+            border-left: 1px solid $gray-125;
+            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 +134,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 +178,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/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 26d6e40..fc48df4 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -5,13 +5,13 @@ $font-family: "Open Sans", sans-serif;
 $font-family-secundary:"Tenor Sans", sans-serif;
 
 /* Colors */
+$black: #000;
+$white: #fff;
+
 $color-black: #292929;
 
 $color-white: #fff;
 
-$color-gray: #6c6c6c;
-$color-gray3: #f0f0f0;
-
 $gray-50: #e5e5e5;
 $gray-100: #f0f0f0;
 $gray-125: #c4c4c4;
@@ -19,6 +19,12 @@ $gray-150: #989898;
 $gray-200: #8d8d8d;
 $gray-500: #292929;
 
+$color-gray: #6c6c6c;
+$color-gray2: #7d7d7d;
+$color-gray3: #f0f0f0;
+$color-gray4: #8d8d8d;
+$color-gray5: #e5e5e5;
+
 $blue: #00c8ff;
 
 $color-blue: #4267b2;
@@ -27,7 +33,7 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+    xs: 0,
     Gf: 328px,
     cstm: 400,
     sm: 576px,