From 658c84d02b2342700bf7a0ad546018875c8fa102 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Sat, 17 Dec 2022 01:42:35 -0300
Subject: [PATCH] feat(checkout com produto): Aplica css desktop

---
 .../sass/checkout/_checkout-carrinho.scss     | 352 ++++++++++++++----
 .../src/arquivos/sass/utils/_variaveis.scss   |   5 +
 2 files changed, 285 insertions(+), 72 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 195f487..e867163 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -13,10 +13,15 @@
         display: none;
     }
     .cart {
-        border: 3px solid $color-gray3;
+        border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
+        margin-bottom: 48px;
+
+        @include mq(xg, min) {
+            padding: 16px 31px;
+        }
 
         @include mq(md, max) {
             margin: 0px 0 25px 0;
@@ -111,12 +116,19 @@
         }
 
         th {
+            font-family: $font-family-secundary;
             color: $color-black;
-            padding: 0 0 16px;
+            padding: 0 0 17px;
             font-style: normal;
-            font-weight: bold;
+            font-weight: normal;
             font-size: 14px;
             line-height: 16px;
+            text-align: left;
+
+            @include mq(xg, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
 
             @include mq(md, max) {
                 &.quantity-price,
@@ -124,43 +136,82 @@
                     display: none;
                 }
             }
+            .product-price {
+                font-size: 0;
+            }
+        }
+
+        th.shipping-date {
+            font-size: 0;
+
+            &::after {
+                content: "Frete";
+                font-family: $font-family-secundary;
+                color: $color-black;
+                font-weight: normal;
+                font-style: normal;
+                font-size: 14px;
+                line-height: 16px;
+                padding: 0 0 17px;
+                vertical-align: bottom;
+
+                @include mq(xg, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+            }
         }
 
         .product-image {
-            height: auto;
+            height: 60px;
             padding: 0;
             width: 60px;
 
-            @include mq(sm, max) {
-                width: 72px;
+            @include mq(xg, min) {
+                width: 146px;
+                height: 146px;
             }
 
             img {
                 height: 60px;
-                max-width: 100%;
-                width: auto;
+                max-width: 60px;
+                width: 60px;
+                object-fit: cover;
 
-                @include mq(sm, max) {
-                    height: 72px;
-                    width: auto;
+                @include mq(xg, min) {
+                    width: 146px;
+                    max-width: 146px;
+                    height: 146px;
                 }
             }
         }
 
         .product-name {
-            padding-right: 0;
+            padding: 0;
+
+            @include mq(xg, min) {
+                width: 600px;
+            }
 
             @include mq(lg, max) {
                 width: 250px;
             }
 
             a {
-                color: $color-blue;
+                font-family: $font-family-secundary;
+                color: $color-black2;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
                 transition: ease-in 0.22s all;
+                margin-left: 16px;
+
+                @include mq(xg, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                    margin-left: 31px;
+                }
 
                 &:hover {
                     color: darken($color-blue, 10);
@@ -179,9 +230,17 @@
         }
 
         td.shipping-date {
-            color: $color-gray2;
+            color: $color-gray7;
+            font-family: $font-family-secundary;
+            font-weight: normal;
             font-size: 12px;
             line-height: 14px;
+            text-align: left;
+
+            @include mq(xg, min) {
+                font-size: 24px;
+                line-height: 28px;
+            }
 
             @include mq(md, max) {
                 display: none;
@@ -190,6 +249,8 @@
 
         .product-price {
             min-width: 100px;
+            text-align: left;
+
             @include mq(md, max) {
                 min-width: 78px;
             }
@@ -200,10 +261,19 @@
             }
 
             span.list-price {
-                color: $color-gray2;
+                color: $color-gray7;
+                font-family: $font-family-secundary;
                 font-size: 12px;
                 line-height: 14px;
+                font-weight: normal;
+                font-style: normal;
                 text-decoration-line: line-through;
+
+                @include mq(xg, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
@@ -212,21 +282,52 @@
                 .old-product-price-label {
                     text-transform: lowercase;
                 }
+
+                .muted {
+                    color: $color-gray7;
+                }
+            }
+        }
+
+        th.product-price {
+            font-size: 0;
+
+            &::after {
+                content: "Unidade";
+                font-family: $font-family-secundary;
+                color: $color-black;
+                font-weight: normal;
+                font-style: normal;
+                font-size: 14px;
+                line-height: 16px;
+                padding: 0 0 17px;
+                vertical-align: bottom;
+
+                @include mq(xg, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
         }
 
         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;
-            max-width: 118px;
-            padding: 0;
+            margin: 13px 0;
+            max-height: 34px;
+            max-width: 99px;
+            padding: 9px 11px;
             width: max-content !important;
+            text-align: left;
+
+            @include mq(xg, min) {
+                margin: 48px 0px;
+                padding: 21px 62px;
+            }
 
             @media (max-width: 490px) {
                 margin-left: 84px !important;
@@ -234,16 +335,27 @@
 
             input {
                 background-color: $color-white;
-                border: 1px solid $color-gray3;
+                border: none;
                 border-radius: 0;
                 border-width: 0 1px;
                 display: block;
                 max-height: 38px;
                 margin: 0 !important;
                 padding: 8px 0;
-                width: 38px;
-                color: $color-gray2;
+                width: 40px;
+                color: $color-black2;
                 box-shadow: none;
+                font-family: $font-family-secundary;
+                font-weight: normal;
+                font-size: 14px;
+                line-height: 16px;
+
+                @include mq(xg, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                    max-height: 50px;
+                    width: 52px;
+                }
 
                 @include mq(lg, max) {
                     width: 24px !important;
@@ -253,24 +365,15 @@
             .icon-plus-sign,
             .icon-minus-sign {
                 &::before {
-                    color: $color-black;
                     display: block;
                     font-weight: 500;
-                    padding: 1px 12px;
-                }
-            }
+                    font-size: 17px;
+                    color: $color-blue2;
+                    cursor: pointer;
 
-            .icon-minus-sign {
-                &:before {
-                    content: "-";
-                    font-size: 16px;
-                }
-            }
-
-            .icon-plus-sign {
-                &:before {
-                    content: "+";
-                    font-size: 14px;
+                    @include mq(xg, min) {
+                        font-size: 32px;
+                    }
                 }
             }
 
@@ -292,19 +395,41 @@
 
         .quantity-price,
         .best-price {
+            text-align: left;
+
+            @include mq(xg, min) {
+                width: 200px;
+            }
             .icon-question-sign {
                 display: none;
             }
             span {
+                font-family: $font-family-secundary;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 14px;
                 line-height: 16px;
                 color: $color-black;
+
+                @include mq(xg, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
         }
 
         .quantity-price {
+            .total-selling-price {
+                font-family: $font-family;
+                font-weight: 700;
+                line-height: 19px;
+
+                @include mq(xg, min) {
+                    font-size: 28px;
+                    line-height: 38px;
+                }
+            }
+
             @include mq(md, max) {
                 display: none;
             }
@@ -315,9 +440,13 @@
                 top: 0;
             }
             .icon::before {
-                color: $color-gray4;
+                color: $color-gray6;
                 font-size: 15px;
 
+                @include mq(xg, min) {
+                    font-size: 26px;
+                }
+
                 @include mq(md, max) {
                     font-size: 18px;
                 }
@@ -351,12 +480,18 @@
                 }
 
                 .srp-main-title {
-                    margin: 32px 0 12px;
+                    margin: 0 0 11px 0;
                     font-style: normal;
                     font-weight: normal;
+                    font-family: $font-family;
                     font-size: 24px;
-                    line-height: 28px;
-                    color: $color-gray2;
+                    line-height: 33px;
+                    color: $color-black2;
+
+                    @include mq(xg, min) {
+                        font-size: 48px;
+                        line-height: 65px;
+                    }
 
                     @include mq(md, max) {
                         margin-top: 0;
@@ -365,23 +500,44 @@
 
                 .srp-description {
                     color: $color-gray2;
-                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: normal;
+                    font-family: $font-family;
+                    font-size: 14px;
                     line-height: 18px;
-                    margin: 0 0 12px;
+                    margin: 0 0 10px;
+                    max-width: 18rem;
+
+                    @include mq(xg, min) {
+                        font-size: 28px;
+                        line-height: 36px;
+                        width: 552px;
+                        max-width: none;
+                        margin-bottom: 11px;
+                    }
                 }
 
                 button.shp-open-options {
-                    background-color: $color-gray5;
+                    background-color: $color-gray8;
                     border: none;
-                    border-radius: 5px;
-                    color: $color-gray2;
-                    font-size: 16px;
+                    border-radius: 8px;
+                    color: $color-black2;
+                    font-family: $font-family;
+                    font-size: 14px;
                     letter-spacing: 0.05em;
                     line-height: 19px;
-                    font-weight: 500;
+                    font-weight: normal;
                     outline: none;
-                    padding: 12px 40px;
+                    padding: 12px 41px;
                     transition: all 0.2s linear;
+                    margin: 0;
+                    text-transform: uppercase;
+                    cursor: pointer;
+
+                    @include mq(xg, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
 
                     &:hover {
                         background-color: lighten($color-gray5, 5);
@@ -593,8 +749,15 @@
         &-totalizers {
             padding: 0;
             width: 346px;
+            margin: 0;
+
+            @include mq(xg, min) {
+                width: 688px;
+            }
 
             .coupon-data {
+                margin-bottom: 0 0 10px 0;
+
                 #cart-link-coupon-add {
                     text-decoration: none;
                     &:hover {
@@ -603,13 +766,19 @@
                     }
                 }
                 span {
-                    font-family: $font-family;
+                    font-family: $font-family-secundary;
                     font-style: normal;
                     font-weight: normal;
                     font-size: 12px;
                     line-height: 14px;
-                    color: $color-blue;
+                    color: $color-black2;
                     text-decoration: none;
+                    cursor: pointer;
+
+                    @include mq(xg, min) {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
             }
 
@@ -712,12 +881,18 @@
 
                         &.info,
                         &.monetary {
+                            font-family: $font-family-secundary;
                             font-style: normal;
                             font-weight: normal;
                             font-size: 14px;
                             line-height: 16px;
                             color: $color-black;
-                            padding: 12px 0;
+                            padding: 10px 0;
+
+                            @include mq(xg, min) {
+                                font-size: 28px;
+                                line-height: 33px;
+                            }
                         }
 
                         &.info {
@@ -733,11 +908,19 @@
                 tfoot {
                     td.info,
                     td.monetary {
+                        font-family: $font-family;
                         font-style: normal;
-                        font-weight: normal;
+                        font-weight: 700;
                         font-size: 18px;
-                        line-height: 21px;
+                        line-height: 25px;
                         color: $color-black;
+                        padding: 14px 0 17px 0;
+
+                        @include mq(xg, min) {
+                            font-size: 36px;
+                            line-height: 49px;
+                            width: 250px;
+                        }
                     }
                 }
             }
@@ -747,64 +930,89 @@
     .cart-links-bottom {
         display: flex;
         flex-direction: column;
-        width: 343px;
+        width: 354px;
+        margin-bottom: 43px !important;
+        padding: 0;
+
+        @include mq(xg, min) {
+            margin-bottom: 44px !important;
+            width: 688px;
+        }
 
         @include mq(md, max) {
             padding: 0 16px;
             width: calc(100% - 32px);
             float: none;
-            margin-bottom: 50px;
-        }
-
-        @include mq(md, min) {
-            margin: 0;
-            padding-bottom: 50px;
         }
 
         .link-choose-more-products-wrapper {
             display: block;
             text-align: center;
-            margin-bottom: 16px;
+            margin-bottom: 14px;
+
+            @include mq(xg, min) {
+                margin-bottom: 13px;
+            }
 
             @include mq(md, max) {
                 margin-bottom: 0px;
             }
 
             a {
-                font-family: $font-family;
+                font-family: $font-family-secundary;
                 font-style: normal;
                 font-weight: normal;
                 font-size: 12px;
                 line-height: 14px;
-                color: $color-blue;
+                color: $color-black2;
+
+                @include mq(xg, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
             }
         }
 
+        .link-choose-more-products{
+            margin-right: 0;
+        }
+
         .btn-place-order-wrapper {
             a {
-                background: $color-green;
+                background: $color-blue2;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
                 display: block;
                 font-size: 0;
                 transition: ease-in 0.22s all;
-                padding: 12px 19px;
+                padding: 12px 102px;
+                cursor: pointer;
+
+                @include mq(xg, min) {
+                    padding: 12px 175px;
+                }
 
                 &:hover {
-                    background-color: darken($color-green, 5);
+                    background: $color-blue3;
                 }
 
                 &:after {
                     content: "finalizar compra";
                     font-family: $font-family;
-                    font-weight: 500;
-                    font-size: 13px;
+                    font-weight: 700;
+                    font-size: 14px;
+                    line-height: 19px;
                     letter-spacing: 0.05em;
                     color: $color-white;
                     text-transform: uppercase;
                     vertical-align: middle;
-                    line-height: 19px;
                     text-shadow: none;
+                    color: $color-black2;
+
+                    @include mq(xg, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
             }
         }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index caaa353..2bcb250 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -16,8 +16,13 @@ $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 $color-gray6: #C4C4C4;
+$color-gray7: #989898;
+$color-gray8: #EDEDED;
 
 $color-blue: #4267b2;
+$color-blue2: #00C8FF;
+$color-blue3: #3fd4fd; //hover
+
 
 $color-green: #495e49;