From 7476d452b22f842d1ca3e6edde1aa3dc39d2c41e Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Thu, 15 Dec 2022 08:34:12 -0300
Subject: [PATCH] feat: adiciona css checkout com produto 1280px

---
 .../sass/checkout/_checkout-carrinho.scss     | 262 +++++++++++++-----
 .../src/arquivos/sass/checkout/_checkout.scss |  11 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |   4 +
 3 files changed, 199 insertions(+), 78 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index f7a4b77..cd4cbcf 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -17,10 +17,10 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
-        padding: 16px;
+        padding: 16px 16px;
 
         @include mq(md, max) {
             margin: 0px 0 25px 0;
@@ -28,6 +28,10 @@
             border-right: none;
             border-radius: 0;
         }
+
+        .product {
+            padding-left: 0;
+        }
     }
     .cart-fixed.affix {
         position: relative !important;
@@ -109,16 +113,44 @@
         background-color: $color-white;
     }
 
+    .table {
+        th,
+        td {
+            padding: 0;
+            padding-bottom: 15px;
+        }
+    }
+
     .cart-items {
+        .shipping-date {
+            font-size: 0;
+
+            &::before {
+                content: "Frete";
+                font-size: 14px;
+                position: absolute;
+                left: 2.5%;
+            }
+        }
+
         .product-item {
             padding: 16px 0;
+
+            .shipping-estimate-date {
+                color: $color-gray6;
+
+                @media (min-width: 1025px) and (max-width: 1105px) {
+                    font-size: 10px;
+                }
+            }
         }
 
         th {
-            color: $color-black;
-            padding: 0 0 16px;
+            position: relative;
+            color: $color-gray2;
+            font-family: "Tenor Sans";
             font-style: normal;
-            font-weight: bold;
+            font-weight: 400;
             font-size: 14px;
             line-height: 16px;
 
@@ -138,11 +170,15 @@
             @include mq(sm, max) {
                 width: 72px;
             }
+        }
+
+        td.product-image {
+            width: 6.062%;
+            height: 60px;
 
             img {
-                height: 60px;
-                max-width: 100%;
-                width: auto;
+                min-width: 100%;
+                min-height: 100%;
 
                 @include mq(sm, max) {
                     height: 72px;
@@ -159,12 +195,13 @@
             }
 
             a {
-                color: $color-blue;
+                color: $color-black !important;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
                 transition: ease-in 0.22s all;
+                margin-left: 11px;
 
                 &:hover {
                     color: darken($color-blue, 10);
@@ -182,17 +219,51 @@
             }
         }
 
+        td.product-name {
+            @media (min-width: 1025px) and (max-width: 1120px) {
+                width: 35%;
+            }
+        }
+
         td.shipping-date {
             color: $color-gray2;
             font-size: 12px;
             line-height: 14px;
+            text-align: left;
+
+            @media (min-width: 1025px) and (max-width: 1105px) {
+                width: 7%;
+            }
+
+            &::before {
+                content: "";
+            }
 
             @include mq(md, max) {
                 display: none;
             }
         }
 
+        th.product-price {
+            margin-bottom: 14px;
+        }
+
+        td.product-price {
+            &::before {
+                content: "";
+            }
+        }
+
         .product-price {
+            font-size: 0;
+
+            &::before {
+                content: "Unidade";
+                font-size: 14px;
+                position: absolute;
+                left: 2.5%;
+                margin-left: 35px;
+            }
             min-width: 100px;
             @include mq(md, max) {
                 min-width: 78px;
@@ -204,10 +275,13 @@
             }
 
             span.list-price {
-                color: $color-gray2;
+                color: $color-gray7;
                 font-size: 12px;
                 line-height: 14px;
                 text-decoration-line: line-through;
+                position: absolute;
+                margin-left: 35px;
+                left: 2.5%;
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
@@ -219,18 +293,23 @@
             }
         }
 
+        th.quantity {
+            text-align: left;
+        }
+
         td.quantity {
             align-items: center;
             border: 1px solid $color-gray3;
-            border-radius: 0;
+            border-radius: 8px;
             box-sizing: border-box;
             display: flex;
             justify-content: center;
-            margin: 6px auto 0;
-            max-height: 38px;
+            margin-top: 10px;
+            height: 34px;
             max-width: 118px;
             padding: 0;
-            width: max-content !important;
+            width: 64.91% !important;
+            position: relative;
 
             @media (max-width: 490px) {
                 margin-left: 84px !important;
@@ -238,11 +317,9 @@
 
             input {
                 background-color: $color-white;
-                border: 1px solid $color-gray3;
-                border-radius: 0;
-                border-width: 0 1px;
+                border: none;
                 display: block;
-                max-height: 38px;
+                height: 16px;
                 margin: 0 !important;
                 padding: 8px 0;
                 width: 38px;
@@ -254,27 +331,29 @@
                 }
             }
 
-            .icon-plus-sign,
+            .icon-plus-sign {
+                &::before {
+                    color: $color-blue;
+                    font-weight: 500;
+                    background: $color-white;
+                    border-radius: 100px;
+                    font-size: 14px;
+                    font-size: 20px;
+                    position: absolute;
+                    top: 20%;
+                    right: 10%;
+                }
+            }
             .icon-minus-sign {
                 &::before {
-                    color: $color-black;
-                    display: block;
+                    color: $color-blue;
                     font-weight: 500;
-                    padding: 1px 12px;
-                }
-            }
-
-            .icon-minus-sign {
-                &:before {
-                    content: "-";
-                    font-size: 16px;
-                }
-            }
-
-            .icon-plus-sign {
-                &:before {
-                    content: "+";
-                    font-size: 14px;
+                    background: $color-white;
+                    border-radius: 100px;
+                    font-size: 20px;
+                    position: absolute;
+                    top: 20%;
+                    left: 10%;
                 }
             }
 
@@ -294,8 +373,9 @@
             }
         }
 
-        .quantity-price,
-        .best-price {
+        .quantity-price {
+            text-align: left;
+
             .icon-question-sign {
                 display: none;
             }
@@ -306,6 +386,42 @@
                 line-height: 16px;
                 color: $color-black;
             }
+
+            .total-selling-price {
+                font-family: "Open Sans";
+                font-style: normal;
+                font-weight: 700;
+                font-size: 14px;
+                line-height: 19px;
+                color: $color-gray2;
+            }
+        }
+
+        .best-price {
+            .icon-question-sign {
+                display: none;
+            }
+            .new-product-price-label {
+                font-style: normal;
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 16px;
+                color: $color-black;
+                position: absolute;
+                left: 2.5%;
+                margin-left: 35px;
+            }
+
+            .new-product-price {
+                font-style: normal;
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 16px;
+                color: $color-black;
+                position: absolute;
+                left: 2.5%;
+                margin-left: 65px;
+            }
         }
 
         .quantity-price {
@@ -319,7 +435,7 @@
                 top: 0;
             }
             .icon::before {
-                color: $color-gray4;
+                color: $color-gray8;
                 font-size: 15px;
 
                 @include mq(md, max) {
@@ -368,32 +484,33 @@
                 }
 
                 .srp-description {
-                    color: $color-gray2;
-                    font-size: 12px;
+                    color: $color-gray9;
+                    font-size: 14px;
                     line-height: 18px;
                     margin: 0 0 12px;
                 }
 
                 button.shp-open-options {
-                    background-color: $color-gray5;
+                    background-color: $color-gray10;
                     border: none;
-                    border-radius: 5px;
-                    color: $color-gray2;
-                    font-size: 16px;
+                    border-radius: 8px;
+                    color: $color-black;
+                    font-size: 14px;
                     letter-spacing: 0.05em;
                     line-height: 19px;
                     font-weight: 500;
                     outline: none;
-                    padding: 12px 40px;
+                    height: 44px;
+                    width: 56.077%;
                     transition: all 0.2s linear;
 
-                    &:hover {
-                        background-color: lighten($color-gray5, 5);
-                    }
+                    // &:hover {
+                    //     background-color: lighten($color-gray5, 5);
+                    // }
 
-                    &:active {
-                        background-color: darken($color-gray5, 5);
-                    }
+                    // &:active {
+                    //     background-color: darken($color-gray5, 5);
+                    // }
                 }
             }
 
@@ -602,17 +719,16 @@
                 #cart-link-coupon-add {
                     text-decoration: none;
                     &:hover {
-                        text-decoration: underline;
                         cursor: pointer;
                     }
                 }
                 span {
-                    font-family: $font-family;
+                    font-family: "Tenor Sans";
                     font-style: normal;
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-blue;
+                    color: $color-black;
                     text-decoration: none;
                 }
             }
@@ -738,10 +854,10 @@
                     td.info,
                     td.monetary {
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 700;
                         font-size: 18px;
-                        line-height: 21px;
-                        color: $color-black;
+                        line-height: 25px;
+                        color: $color-gray2;
                     }
                 }
             }
@@ -751,7 +867,7 @@
     .cart-links-bottom {
         display: flex;
         flex-direction: column;
-        width: 343px;
+        width: 354px;
 
         @include mq(md, max) {
             padding: 0 16px;
@@ -762,7 +878,6 @@
 
         @include mq(md, min) {
             margin: 0;
-            padding-bottom: 50px;
         }
 
         .link-choose-more-products-wrapper {
@@ -775,36 +890,37 @@
             }
 
             a {
-                font-family: $font-family;
+                font-family: "Tenor Sans";
                 font-style: normal;
-                font-weight: normal;
+                font-weight: 400;
                 font-size: 12px;
                 line-height: 14px;
-                color: $color-blue;
+                color: $color-black;
             }
         }
 
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $color-blue;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 display: block;
                 font-size: 0;
                 transition: ease-in 0.22s all;
-                padding: 12px 19px;
+                padding: 11px 0;
+                width: 100%;
 
-                &:hover {
-                    background-color: darken($color-green, 5);
-                }
+                // &:hover {
+                //     background-color: darken($color-green, 5);
+                // }
 
                 &:after {
                     content: "finalizar compra";
-                    font-family: $font-family;
-                    font-weight: 500;
-                    font-size: 13px;
+                    font-family: "Open Sans";
+                    font-weight: 700;
+                    font-size: 14px;
                     letter-spacing: 0.05em;
-                    color: $color-white;
+                    color: $color-black;
                     text-transform: uppercase;
                     vertical-align: middle;
                     line-height: 19px;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 80e9780..b73fd3b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -70,12 +70,13 @@ body {
 #cart-title,
 #orderform-title {
     color: $color-gray2;
-    font-family: $font-family;
-    font-weight: 500;
-    font-size: 36px;
-    line-height: 42px;
     margin: 40px 0 30px;
-    letter-spacing: 0.1em;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
 
     @include mq(md, max) {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 3ce2a5c..85cadb8 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -15,6 +15,10 @@ $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 $color-gray6: #858585;
+$color-gray7: #989898;
+$color-gray8: #c4c4c4;
+$color-gray9: #7d7d7d;
+$color-gray10: #ededed;
 
 $color-blue: #00c8ff;
 
-- 
2.34.1