From 2c5a29d4f74f07d13d01a79f8c339d1fa2c1f0b2 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Thu, 26 Jan 2023 17:59:48 -0300
Subject: [PATCH] feat(product): adicionando e estilizando table de frete

product
---
 styles/css/vtex.store-components.css          | 85 +++++++++++++++++
 .../pages/product/vtex.store-components.scss  | 91 +++++++++++++++++++
 2 files changed, 176 insertions(+)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 6b929b7..be3ad06 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -339,4 +339,89 @@
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
   display: none;
+}
+
+.shippingTable {
+  border: none;
+  padding: 0;
+  margin: 16px 0 0;
+  width: 326px;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+  .shippingTable {
+    width: 100%;
+  }
+}
+.shippingTable .shippingTableHead {
+  display: block;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  display: grid;
+  grid-template-columns: repeat(3, 33.3%);
+  grid-template-areas: "entrega frete prazo";
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+  text-align: left;
+  grid-area: entrega;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  text-align: center;
+  grid-area: frete;
+  font-size: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
+  content: "FRETE";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  text-align: right;
+  grid-area: prazo;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: grid;
+  grid-template-columns: repeat(3, 33.3%);
+  grid-template-areas: "entrega valor prazo";
+  column-gap: 32px;
+  margin-top: 15px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+  grid-area: entrega;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  white-space: nowrap;
+  grid-area: prazo;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+  grid-area: valor;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #AFAFAF;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel .shippingTableRadioBtn {
+  display: none;
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 395e4b5..db2187b 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -374,3 +374,94 @@
     }
   }
 }
+
+.shippingTable {
+  border: none;
+  padding: 0;
+  margin: 16px 0 0;
+  width: 326px;
+
+  @media #{$mq-mobile}{
+    width: 100%;
+  }
+
+  .shippingTableHead {
+    display: block;
+    .shippingTableRow {
+      display: grid;
+      grid-template-columns: repeat(3, 33.3%);
+      grid-template-areas: "entrega frete prazo";
+
+      .shippingTableHeadDeliveryName,
+      .shippingTableHeadDeliveryEstimate,
+      .shippingTableHeadDeliveryPrice {
+        padding: 0;
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #202020;
+        text-transform: uppercase;
+      }
+      .shippingTableHeadDeliveryName {
+        text-align: left;
+        grid-area: entrega;
+      }
+      .shippingTableHeadDeliveryPrice{
+        text-align: center;
+        grid-area: frete;
+        font-size: 0;
+        &::after {
+          content: ("FRETE");
+          font-family: $font-family;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: #202020;
+        }
+      }
+      .shippingTableHeadDeliveryEstimate{
+        text-align: right;
+        grid-area: prazo;
+      }
+    }
+  }
+
+  .shippingTableBody {
+    .shippingTableRow{
+      display: grid;
+      grid-template-columns: repeat(3, 33.3%);
+      grid-template-areas: "entrega valor prazo";
+      column-gap: 32px;
+      margin-top: 15px;
+      .shippingTableCellDeliveryName {
+        grid-area: entrega;
+      }
+      .shippingTableCellDeliveryEstimate {
+        white-space: nowrap;
+        grid-area: prazo;
+      }
+      .shippingTableCellDeliveryPrice {
+        grid-area: valor;
+      }
+      .shippingTableCell {
+        padding: 0;
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        display: flex;
+        align-items: center;
+        color: #AFAFAF;
+      }
+      .shippingTableLabel {
+        .shippingTableRadioBtn {
+          display: none;
+        }
+      }
+    }
+  }
+}