From 4ec2e597c9a412d6cd3b5f1dae23070e0752b681 Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Fri, 16 Dec 2022 18:33:25 -0300
Subject: [PATCH] feat: Cria checkout style

---
 checkout/src/arquivos/sass/checkout.scss      |   1 +
 .../sass/checkout/_checkout-autenticacao.scss | 496 +++++++++---------
 .../sass/checkout/_checkout-carrinho.scss     |  40 +-
 .../src/arquivos/sass/checkout/_checkout.scss |   8 +-
 .../src/arquivos/sass/partials/_header.scss   |  31 --
 5 files changed, 292 insertions(+), 284 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 80f2c5f..21d3ccf 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -4,4 +4,5 @@
 @import "./partials/footer";
 @import "./checkout/checkout.scss";
 @import "./partials/prateleira.scss";
+@import "./partials/body.scss";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Tenor+Sans&display=swap");
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 92f0375..dee3f31 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,289 +1,311 @@
 .checkout-container {
-	.client-pre-email {
-		border-color: $color-gray4;
-		font-family: $font-family;
-		padding-top: 8px;
+    .client-pre-email {
+        border-color: $color-black-500;
+        font-family: $font-family;
+        padding-top: 8px;
+        input {
+            // color: $color-black-500;
+            font-size: 12px;
+        }
 
-		.link-cart {
-			a {
-				color: $color-black;
-				font-size: 14px;
+        #client-pre-email::placeholder {
+            color: $color-black-500;
+        }
 
-				&:hover {
-					color: lighen($color-black, 10);
-				}
-			}
-		}
+        .link-cart {
+            a {
+                color: $color-black-500;
+                font-size: 14px;
+                font-family: $font-family-secundary;
+                line-height: 16px;
+                text-transform: uppercase;
 
-		.pre-email {
-			flex-direction: column;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+                &:hover {
+                    color: lighen($color-black, 10);
+                }
+            }
+        }
 
-			h3 {
-				margin-bottom: 16px;
+        .pre-email {
+            flex-direction: column;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-				span {
-					color: #303030;
-					font-size: 24px;
-				}
+            h3 {
+                margin-bottom: 16px;
 
-				small {
-					color: $color-gray4;
-				}
-			}
-		}
+                span {
+                    color: $color-black-500;
+                    font-size: 20px;
+                    font-family: $font-family-secundary;
+                    text-transform: uppercase;
+                }
 
-		.client-email {
-			margin: 0 0 16px;
+                small {
+                    color: $color-black-500;
+                    font-weight: 20px;
+                    font-family: $font-family-secundary;
+                    text-transform: uppercase;
+                }
+            }
+        }
 
-			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;
+        .client-email {
+            margin: 0 0 16px;
 
-				@media (max-width: 490px) {
-					width: auto;
-				}
-			}
+            input {
+                box-shadow: none;
+                color: $color-black;
+                font-family: $font-family;
+                padding: 0 16px;
+                border: 1px solid $color-black-500;
+                box-sizing: border-box;
+                border-radius: 5px;
 
-			button {
-				background-color: $color-black;
-				border-radius: 5px;
-				border: none;
-				font-family: $font-family;
-				height: 54px;
-				right: 0;
-				top: 0;
+                @media (max-width: 490px) {
+                    width: auto;
+                }
+            }
 
-				@media (max-width: 490px) {
-					height: 48px;
-					margin: 0;
-					position: absolute;
-				}
-			}
+            button {
+                background-color: $color-blue-100;
+                border-radius: 0 5px 5px 0;
+                border: none;
+                font-family: $font-family;
+                height: 54px;
+                right: 0;
+                top: 0;
+                color: $color-black-500;
+                font-weight: bold;
 
-			span.help.error {
-				color: red;
-			}
-		}
+                @media (max-width: 490px) {
+                    height: 48px;
+                    margin: 0;
+                    position: absolute;
+                }
+            }
 
-		.emailInfo {
-			padding: 16px;
-			background-color: $color-white;
-			border: 1px solid $color-gray4;
-			border-radius: 0;
+            span.help.error {
+                color: red;
+                font-weight: 700;
+                font-size: 12px;
+            }
+        }
 
-			h3 {
-				color: #303030;
-				margin: 0 0 8px 0;
-			}
+        .emailInfo {
+            padding: 16px;
+            background-color: $color-white;
+            border: 1px solid $color-black-500;
+            border-radius: 5px;
 
-			ul {
-				margin: 0;
+            h3 {
+                color: #303030;
+                margin: 0 0 8px 0;
+            }
 
-				li {
-					span {
-						color: $color-black;
-					}
+            ul {
+                margin: 0;
 
-					i::before {
-						color: $color-black;
-						font-size: 1rem;
-						opacity: 1;
-					}
-				}
-			}
+                li {
+                    span {
+                        color: $color-black;
+                        font-weight: 700;
+                        font-size: 12px;
+                    }
 
-			i::before {
-				color: $color-black;
-				font-size: 6rem;
-				opacity: 0.5;
-			}
-		}
-	}
+                    i::before {
+                        color: $color-blue-100;
+                        font-size: 1rem;
+                        opacity: 1;
+                    }
+                }
+            }
 
-	.shipping-data,
-	.payment-data,
-	.client-profile-data {
-		.accordion-group {
-			border-radius: 0;
-			border: 1px solid $color-gray4;
-			font-family: $font-family;
-			padding: 16px;
+            i::before {
+                color: $color-black;
+                font-size: 6rem;
+                opacity: 0.5;
+            }
+        }
+    }
 
-			.accordion-heading {
-				span {
-					color: #303030;
-					margin-bottom: 8px;
-					padding: 0;
+    .shipping-data,
+    .payment-data,
+    .client-profile-data {
+        .accordion-group {
+            border-radius: 0;
+            border: 1px solid $color-gray4;
+            font-family: $font-family;
+            padding: 16px;
 
-					i::before {
-						fill: #303030;
-					}
-				}
+            .accordion-heading {
+                span {
+                    color: #303030;
+                    margin-bottom: 8px;
+                    padding: 0;
 
-				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;
-				}
-			}
+                    i::before {
+                        fill: #303030;
+                    }
+                }
 
-			.accordion-inner {
-				padding: 0;
+                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;
+                }
+            }
 
-				/* General configurations */
+            .accordion-inner {
+                padding: 0;
 
-				.client-notice {
-					color: $color-black;
-				}
+                /* General configurations */
 
-				p {
-					label {
-						color: $color-black;
-						font-weight: 500;
-					}
+                .client-notice {
+                    color: $color-black;
+                }
 
-					select,
-					input {
-						border-radius: 0;
-						border: 1px solid $color-gray4;
-						box-shadow: none;
-					}
+                p {
+                    label {
+                        color: $color-black;
+                        font-weight: 500;
+                    }
 
-					.help.error {
-						color: red;
-					}
-				}
+                    select,
+                    input {
+                        border-radius: 0;
+                        border: 1px solid $color-gray4;
+                        box-shadow: none;
+                    }
 
-				.box-client-info-pj {
-					.link a#is-corporate-client,
-					.link a#not-corporate-client {
-						color: $color-black;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                    .help.error {
+                        color: red;
+                    }
+                }
 
-				.state-inscription-box span {
-					font-weight: 500;
-				}
+                .box-client-info-pj {
+                    .link a#is-corporate-client,
+                    .link a#not-corporate-client {
+                        color: $color-black;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				button.submit {
-					border: none;
-					border-radius: 5px;
-					background: $color-black;
-					margin-top: 8px;
-					outline: none;
-					transition: all 0.2s linear;
+                .state-inscription-box span {
+                    font-weight: 500;
+                }
 
-					&:hover {
-						background: lighten($color-black, 5);
-					}
+                button.submit {
+                    border: none;
+                    border-radius: 5px;
+                    background: $color-black;
+                    margin-top: 8px;
+                    outline: none;
+                    transition: all 0.2s linear;
 
-					&:active {
-						background: darken($color-black, 5);
-					}
-				}
+                    &:hover {
+                        background: lighten($color-black, 5);
+                    }
 
-				/* Shipping configurations */
+                    &:active {
+                        background: darken($color-black, 5);
+                    }
+                }
 
-				.ship-postalCode small a {
-					color: #303030;
-					font-weight: 500;
-					text-decoration: underline;
-				}
+                /* Shipping configurations */
 
-				.vtex-omnishipping-1-x-deliveryGroup {
-					p {
-						color: #303030;
-						font-size: 14px;
-						font-weight: 500;
-					}
+                .ship-postalCode small a {
+                    color: #303030;
+                    font-weight: 500;
+                    text-decoration: underline;
+                }
 
-					.shp-lean {
-						border: 1px solid $color-gray4;
-						border-radius: 0;
+                .vtex-omnishipping-1-x-deliveryGroup {
+                    p {
+                        color: #303030;
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
 
-						label {
-							background-color: $color-white;
-							box-shadow: none;
-							color: #303030;
-							padding: 8px 12px;
+                    .shp-lean {
+                        border: 1px solid $color-gray4;
+                        border-radius: 0;
 
-							svg path {
-								fill: #d8c8ac;
-							}
-						}
-					}
-				}
+                        label {
+                            background-color: $color-white;
+                            box-shadow: none;
+                            color: #303030;
+                            padding: 8px 12px;
 
-				.delivery-address-title {
-					color: #303030;
-					font-size: 14px;
-					font-weight: 500;
-				}
+                            svg path {
+                                fill: #d8c8ac;
+                            }
+                        }
+                    }
+                }
 
-				.shp-summary-group-info {
-					border-color: $color-gray4;
-				}
+                .delivery-address-title {
+                    color: #303030;
+                    font-size: 14px;
+                    font-weight: 500;
+                }
 
-				.address-summary {
-					background: none;
-					border-color: $color-gray4;
-					border-radius: 0;
-					color: #303030;
-					padding: 12px;
+                .shp-summary-group-info {
+                    border-color: $color-gray4;
+                }
 
-					@include mq(md, max) {
-						background-position: 8px 9px;
-					}
+                .address-summary {
+                    background: none;
+                    border-color: $color-gray4;
+                    border-radius: 0;
+                    color: #303030;
+                    padding: 12px;
 
-					a {
-						color: #303030;
-						font-weight: 500;
-						text-decoration: underline;
-					}
-				}
+                    @include mq(md, max) {
+                        background-position: 8px 9px;
+                    }
 
-				.shp-summary-group-price,
-				.shp-summary-package {
-					color: $color-gray4;
-				}
+                    a {
+                        color: #303030;
+                        font-weight: 500;
+                        text-decoration: underline;
+                    }
+                }
 
-				.shp-summary-group-price {
-					padding-right: 16px;
-				}
+                .shp-summary-group-price,
+                .shp-summary-package {
+                    color: $color-gray4;
+                }
 
-				.shp-summary-package {
-					padding-left: 16px;
-				}
+                .shp-summary-group-price {
+                    padding-right: 16px;
+                }
 
-				.vtex-omnishipping-1-x-summaryChange {
-					border-color: #303030;
-					color: #303030;
-				}
+                .shp-summary-package {
+                    padding-left: 16px;
+                }
 
-				.vtex-omnishipping-1-x-deliveryChannelsToggle {
-					background-color: #d8c8ac;
-					border: 1px solid #d8c8ac;
-				}
+                .vtex-omnishipping-1-x-summaryChange {
+                    border-color: #303030;
+                    color: #303030;
+                }
 
-				.vtex-omnishipping-1-x-deliveryOptionActive {
-					text-shadow: 1.3px 1px lighten($color-black, 50);
-				}
-			}
-		}
-	}
+                .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);
+                }
+            }
+        }
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..cd9d528 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -2,6 +2,12 @@
     @include mq(md, max) {
         width: 100%;
     }
+
+    #cart-title {
+        font-size: 24px;
+        color: $color-black;
+        letter-spacing: 5%;
+    }
 }
 
 .cart-template {
@@ -13,7 +19,7 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
@@ -114,7 +120,7 @@
             color: $color-black;
             padding: 0 0 16px;
             font-style: normal;
-            font-weight: bold;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
 
@@ -227,6 +233,7 @@
             max-width: 118px;
             padding: 0;
             width: max-content !important;
+            border-radius: 8px;
 
             @media (max-width: 490px) {
                 margin-left: 84px !important;
@@ -262,15 +269,15 @@
 
             .icon-minus-sign {
                 &:before {
-                    content: "-";
                     font-size: 16px;
+                    color: $color-blue-100;
                 }
             }
 
             .icon-plus-sign {
                 &:before {
-                    content: "+";
-                    font-size: 14px;
+                    color: $color-blue-100;
+                    font-size: 16px;
                 }
             }
 
@@ -295,12 +302,15 @@
             .icon-question-sign {
                 display: none;
             }
+            .total-selling-price {
+                font-weight: bold;
+            }
             span {
                 font-style: normal;
                 font-weight: normal;
                 font-size: 14px;
                 line-height: 16px;
-                color: $color-black;
+                color: $color-black-500;
             }
         }
 
@@ -315,7 +325,7 @@
                 top: 0;
             }
             .icon::before {
-                color: $color-gray4;
+                color: $color-gray6;
                 font-size: 15px;
 
                 @include mq(md, max) {
@@ -630,6 +640,7 @@
                 }
 
                 .coupon-label label {
+                    display: flex;
                     margin-bottom: 12px;
                     font-family: $font-family;
                     font-style: normal;
@@ -641,6 +652,7 @@
                 }
 
                 .coupon-fields {
+                    display: flex;
                     margin-bottom: 32px;
 
                     @include mq(sm, max) {
@@ -673,14 +685,14 @@
                     }
 
                     button {
-                        background: $color-black;
+                        background: $color-blue-100;
                         border: none;
                         border-radius: 5px;
-                        color: $color-white;
+                        color: $color-black-500;
                         font-size: 12px;
                         height: 36px;
                         letter-spacing: 1px;
-                        margin-left: 6px;
+                        margin-left: 15px;
                         outline: none;
                         transition: all 0.2s linear;
                         width: 94px;
@@ -738,6 +750,7 @@
                         font-size: 18px;
                         line-height: 21px;
                         color: $color-black;
+                        font-weight: bold;
                     }
                 }
             }
@@ -782,7 +795,7 @@
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $color-blue-100;
                 border: none;
                 border-radius: 5px;
                 display: block;
@@ -791,7 +804,7 @@
                 padding: 12px 19px;
 
                 &:hover {
-                    background-color: darken($color-green, 5);
+                    background-color: darken($color-blue-100, 5);
                 }
 
                 &:after {
@@ -805,6 +818,9 @@
                     vertical-align: middle;
                     line-height: 19px;
                     text-shadow: none;
+                    font-weight: bold;
+                    color: $color-black-500;
+                    letter-spacing: 5%;
                 }
             }
         }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..1bc037e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -68,13 +68,13 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
+    color: $color-black-500;
     font-family: $font-family;
-    font-weight: 500;
-    font-size: 36px;
+    font-weight: bold;
+    font-size: 24px;
     line-height: 42px;
     margin: 40px 0 30px;
-    letter-spacing: 0.1em;
+    letter-spacing: 0%;
     text-transform: uppercase;
 
     @include mq(md, max) {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 3ee4977..87add02 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -146,34 +146,3 @@
         }
     }
 }
-
-.container-main {
-    // background-color: burlywood;
-    #cart-title {
-        // display: none !important;
-    }
-
-    .empty-cart-content {
-        .empty-cart-title {
-            font-size: 24px;
-            font-family: $font-family;
-        }
-        .empty-cart-message {
-            display: none;
-        }
-        .empty-cart-links {
-            .btn {
-                width: 327px;
-                background-color: transparent;
-                border: 1px solid $color-black;
-                border-radius: 0;
-                color: $color-black;
-            }
-
-            // .btn::after {
-            //     content: "continuar comprando";
-            //     color: $color-black;
-            // }
-        }
-    }
-}
-- 
2.34.1