From 015ddc2fcbde6a6d3f42693eab2971437ce35ba3 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Fri, 16 Dec 2022 17:59:46 -0300
Subject: [PATCH] feat(cart-fill): created initial styles for table and small,
 large devices

---
 .../sass/checkout/_checkout-carrinho.scss     | 233 +++++++++++++++++-
 .../src/arquivos/sass/partials/_footer.scss   |  13 +
 2 files changed, 241 insertions(+), 5 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 3461e68..1b9807d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -588,7 +588,6 @@
 
         &-totalizers.totalizers {
             padding: 0;
-            width: 346px;
             float: none;
 
             .coupon-data {
@@ -825,6 +824,62 @@
         display: none;
     }
 
+    .cart-template {
+        .item-quantity-change {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            height: 16px;
+            background: #00c8ff;
+            border-radius: 100%;
+
+            .icon-plus-sign,
+            .icon-minus-sign {
+                position: relative;
+                width: 100%;
+                height: 100%;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    padding: 0;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    background-color: $clr-common-white;
+                }
+            }
+
+            .icon-plus-sign {
+                &::after {
+                    content: "";
+                    position: absolute;
+                    padding: 0;
+                    top: 50%;
+                    left: 50%;
+                    width: 2px;
+                    height: 10px;
+                    transform: translate(-50%, -50%);
+                    background-color: $clr-common-white;
+                }
+
+                &::before {
+                    width: 10px;
+                    height: 2px;
+                }
+            }
+
+            .icon-minus-sign {
+                &::before {
+                    width: 10px;
+                    height: 2px;
+                }
+            }
+        }
+    }
+
     .link-coupon-add,
     .link-choose-more-products {
         color: $clr-common-black;
@@ -834,12 +889,35 @@
         }
     }
 
+    .cart-more-options {
+        padding: 0 16px;
+    }
+
     .srp-container,
     .cart-more-options,
     .cart-more-options .srp-data {
         width: 100%;
     }
 
+    .cart-template {
+        th.shipping-date {
+            font-size: 0px;
+
+            &::before {
+                content: "Frete";
+                font-size: 14px;
+            }
+        }
+
+        th.product-price {
+            font-size: 0px;
+            &::before {
+                content: "Unidade";
+                font-size: 14px;
+            }
+        }
+    }
+
     .srp-postal-code__form {
         width: 100%;
     }
@@ -853,7 +931,6 @@
     }
 
     .ship-postalCode {
-        width: 58%;
         width: 62.682215743%;
         display: flex;
         align-items: flex-start;
@@ -865,7 +942,6 @@
     }
 
     .srp-pc-input {
-        width: 42%;
         width: 34.985422741%;
         margin-top: 5px;
     }
@@ -879,13 +955,160 @@
         width: 100%;
     }
 
-    .srp-container {
-        max-width: none;
+    .cart-more-options {
+        .srp-container {
+            padding: 0;
+            max-width: none;
+        }
     }
 
     .cart-links-bottom {
         width: 100%;
         padding: 0 16px;
         margin-bottom: 43.42px;
+
+        .link-choose-more-products-wrapper {
+            margin: 0 0 14.91px;
+        }
+    }
+
+    .coupon-column .coupon-fields {
+        span {
+            width: 100%;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .cart-template .cart-items td.quantity {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 10px;
+
+        input {
+            border: none;
+            padding: 0 10px;
+            box-sizing: content-box;
+        }
+    }
+
+    @media screen and (min-width: 600px) {
+        .totalizers {
+            padding: 0 16px;
+            margin: 0;
+        }
+
+        .cart-more-options {
+            .srp-container {
+                padding: 0 16px;
+            }
+
+            .srp-data {
+                width: 343px;
+            }
+        }
+
+        .cart-template .cart-items th {
+            vertical-align: top;
+        }
+
+        .cart-template-holder {
+            padding: 0 16px;
+        }
+    }
+
+    @media screen and (min-width: 1280px) {
+        width: fluid(1018px, 1280px);
+
+        .cart-template .cart-items td.quantity {
+            margin: 6px auto 0 0;
+        }
+
+        .cart-template {
+            .shipping-date,
+            .product-price,
+            .quantity-price {
+                text-align: left;
+                padding: 5px 0;
+            }
+        }
+
+        .cart-template-holder {
+            padding: 0;
+        }
+
+        .product-name {
+            width: auto;
+        }
+
+        .cart-template .cart-items th {
+            text-align: left;
+            padding-bottom: 16px;
+        }
+
+        #cart-title {
+            padding: 0;
+        }
+
+        .cart {
+            margin-bottom: 48px;
+        }
+
+        .cart-more-options {
+            padding: 0;
+
+            .srp-container {
+                padding: 0;
+            }
+
+            .srp-data {
+                margin-bottom: 0;
+            }
+        }
+
+        .row-fluid.summary {
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        .cart-more-options {
+            width: fluid(280px, 1018px);
+            float: left;
+
+            .srp-container {
+                .srp-content {
+                    .srp-main-title {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+
+        .cart-links-bottom.cart-links {
+            width: fluid(354px, 1018px);
+            display: flex;
+            align-items: flex-end;
+            float: right;
+            padding: 0;
+            margin: 0 auto;
+        }
+
+        .btn-place-order-wrapper {
+            width: 100%;
+        }
+
+        .link-choose-more-products-wrapper {
+            width: 100%;
+            text-align: center;
+        }
+
+        .cart-totalizers.totalizers {
+            width: fluid(354px, 1018px);
+            float: right;
+            padding: 0;
+            margin-left: 0;
+            margin-right: 0;
+            margin-bottom: 0;
+        }
     }
 }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 9ad8a36..7daec6d 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -182,3 +182,16 @@
         }
     }
 }
+
+.footerCheckout__prateleira {
+    div {
+        h2 {
+            width: 100%;
+            font-size: 14px;
+            text-align: center;
+            font-weight: 400;
+            font-family: $font-family-200;
+            color: $clr-common-black;
+        }
+    }
+}