From 76d90e06f1d238a283ddd088ca79c2bf2a8cfdc1 Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Sun, 5 Feb 2023 19:00:24 -0300
Subject: [PATCH] feat: estiliza bloco de prateleira de produtos relacionados

---
 styles/css/vtex.product-summary.css           | 113 ++++++++++----
 styles/css/vtex.rich-text.css                 |  27 +++-
 styles/css/vtex.slider-layout.css             | 141 +++++++++++++++---
 .../pages/product/vtex.product-summary.scss   |  96 ++++++++++++
 styles/sass/pages/product/vtex.rich-text.scss |  30 ++++
 .../pages/product/vtex.slider-layout.scss     | 126 ++++++++++++++++
 6 files changed, 483 insertions(+), 50 deletions(-)
 create mode 100644 styles/sass/pages/product/vtex.product-summary.scss
 create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss

diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 0a6e420..5c04d42 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -1,42 +1,97 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
-  border-radius: 50%;
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+:global(.vtex-product-summary-2-x-containerNormal) {
+  max-width: unset !important;
 }
 
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
+:global(.vtex-product-summary-2-x-imageNormal) {
+  max-height: unset !important;
 }
 
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 1;
+:global(.vtex-product-summary-2-x-imageStackContainer) {
+  display: flex;
 }
 
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
+:global(.vtex-product-summary-2-x-nameContainer) {
+  background-color: white;
+  width: 100%;
+  padding: 0;
+  padding-top: 16px;
+  margin: 0 auto;
+}
+@media (max-width: 1024px) {
+  :global(.vtex-product-summary-2-x-nameContainer) {
+    margin-bottom: 8px;
+    margin-top: 16px;
+    max-width: 87.1794871795%;
+  }
+}
+@media (max-width: 1024px) and (min-width: 1023px) and (max-width: 1025px) {
+  :global(.vtex-product-summary-2-x-nameContainer) {
+    max-width: none;
+  }
+}
+:global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-brandName) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #000000;
+}
+@media (max-width: 767px) {
+  :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-brandName) {
+    font-size: 14px;
+    line-height: 19px;
   }
 }
 
-.nameContainer {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+:global(.vtex-product-summary-2-x-priceContainer) {
+  padding: 0;
+  padding-top: 8px;
 }
-
-.brandName {
-  font-weight: 600;
-  font-size: 18px;
-  color: #2E2E2E;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
+:global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
   text-align: center;
+  text-decoration-line: line-through;
+  color: #BABABA;
 }
-
-.image {
-  border-radius: 0.25rem;
+@media (max-width: 767px) {
+  :global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer {
+    font-size: 12px;
+    line-height: 16px;
+  }
 }
+:global(.vtex-product-summary-2-x-priceContainer) .price_sellingPriceLabel,
+:global(.vtex-product-summary-2-x-priceContainer) .price_installmentContainer {
+  display: none;
+}
+:global(.vtex-product-summary-2-x-priceContainer) .price_sellingPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+}
+@media (max-width: 767px) {
+  :global(.vtex-product-summary-2-x-priceContainer) .price_sellingPrice {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..cd13c69 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -6,4 +6,29 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.container--m3-shipping-simulator-title .paragraph {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.paragraph--m3-shelf-related-title {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #575757;
+}
+@media (max-width: 768px) {
+  .paragraph--m3-shelf-related-title {
+    font-size: 20px;
+  }
+}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 55f431f..2603758 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -1,31 +1,132 @@
-.sliderLayoutContainer {
-  justify-content: center;
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+@media (min-width: 2000px) {
+  .sliderLayoutContainer--m3-carousel-products {
+    max-width: 1920px;
+    margin: 0 auto;
+  }
 }
 
-.sliderLayoutContainer--carousel {
-  background-color: #F0F0F0;
-  min-height: 450px;
+.sliderTrackContainer--m3-carousel-products {
+  max-width: 94.712%;
+  margin: 0 auto;
+}
+@media (max-width: 590px) {
+  .sliderTrackContainer--m3-carousel-products {
+    max-width: 78.9333333333%;
+  }
 }
 
-.sliderTrackContainer {
-  max-width: 100%;
+.slide--m3-carousel-products {
+  margin: 0 8px;
+}
+@media (min-width: 1920px) {
+  .slide--m3-carousel-products {
+    max-width: 434.4px !important;
+  }
+}
+@media (max-width: 1440px) {
+  .slide--m3-carousel-products {
+    max-width: 314.4px !important;
+  }
+}
+@media (max-width: 1024px) {
+  .slide--m3-carousel-products {
+    max-width: 291.2px !important;
+  }
+}
+@media (max-width: 375px) {
+  .slide--m3-carousel-products {
+    width: 124.8px !important;
+  }
 }
 
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+:global(.vtex-product-summary-2-x-containerNormal) {
+  max-width: unset !important;
 }
 
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
+:global(.vtex-product-summary-2-x-imageNormal) {
+  max-height: unset !important;
+  border-radius: 0;
 }
 
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
+:global(.vtex-product-summary-2-x-imageStackContainer) {
+  display: flex;
 }
+
+.sliderLeftArrow--m3-carousel-products {
+  visibility: hidden;
+}
+.sliderLeftArrow--m3-carousel-products::after {
+  position: relative !important;
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg");
+  width: 12px;
+  left: 16px;
+}
+@media (min-width: 2000px) {
+  .sliderLeftArrow--m3-carousel-products::after {
+    left: -8px !important;
+  }
+}
+@media (min-width: 1025px) {
+  .sliderLeftArrow--m3-carousel-products::after {
+    left: 0 !important;
+  }
+}
+@media (max-width: 1024px) {
+  .sliderLeftArrow--m3-carousel-products::after {
+    left: -8px !important;
+    bottom: 3px;
+  }
+}
+
+.sliderRightArrow--m3-carousel-products {
+  visibility: hidden;
+}
+.sliderRightArrow--m3-carousel-products::before {
+  position: relative !important;
+  visibility: visible;
+  content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-right.svg");
+  width: 12px;
+  right: 16px !important;
+}
+@media (min-width: 2000px) {
+  .sliderRightArrow--m3-carousel-products::before {
+    left: 8px !important;
+  }
+}
+@media (min-width: 1025px) {
+  .sliderRightArrow--m3-carousel-products::before {
+    left: 0 !important;
+  }
+}
+@media (max-width: 1024px) {
+  .sliderRightArrow--m3-carousel-products::before {
+    left: 8px !important;
+    bottom: 3px;
+  }
+}
+
+.paginationDotsContainer--m3-carousel-products {
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+  bottom: -16px;
+}
+.paginationDotsContainer--m3-carousel-products .paginationDot--m3-carousel-products {
+  background-color: #000;
+}
+.paginationDotsContainer--m3-carousel-products .paginationDot--isActive {
+  height: 1.063rem !important;
+  width: 1.0635rem !important;
+  background: transparent;
+  border: 1px solid;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
new file mode 100644
index 0000000..fbf91a0
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -0,0 +1,96 @@
+:global(.vtex-product-summary-2-x-containerNormal) {
+  max-width: unset !important;
+
+  // @media (min-width:374px) and (max-width:376px) {
+  //   max-width: 124.8px !important;
+  // }
+}
+
+:global(.vtex-product-summary-2-x-imageNormal) {
+  max-height: unset !important;
+}
+
+:global(.vtex-product-summary-2-x-imageStackContainer) {
+  display: flex;
+
+}
+
+:global(.vtex-product-summary-2-x-nameContainer) {
+  background-color: white;
+  width: 100%;
+  padding: 0;
+  padding-top: 16px;
+  margin: 0 auto;
+
+  @media (max-width:1024px) {
+    margin-bottom: 8px;
+    margin-top: 16px;
+    max-width: 87.179487179487179487179487179487%;
+
+    @media (min-width:1023px) and (max-width:1025px) {
+      max-width: none;
+
+    }
+  }
+
+  :global(.vtex-product-summary-2-x-brandName) {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    color: #000000;
+
+    @media (max-width:767px) {
+      font-size: 14px;
+      line-height: 19px;
+
+    }
+  }
+}
+
+:global(.vtex-product-summary-2-x-priceContainer) {
+  padding: 0;
+  padding-top: 8px;
+
+  .price_listPriceContainer {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    text-decoration-line: line-through;
+    color: #BABABA;
+
+    @media (max-width:767px) {
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+
+  .price_sellingPriceLabel,
+  .price_installmentContainer {
+    display: none;
+  }
+
+  .price_sellingPrice {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    text-align: center;
+    color: #000000;
+
+    @media (max-width:767px) {
+      font-size: 18px;
+      line-height: 25px;
+
+    }
+  }
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e69de29..fb5da86 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -0,0 +1,30 @@
+.container--m3-shipping-simulator-title {
+  .paragraph {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+
+    color: #929292;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+}
+
+.paragraph--m3-shelf-related-title {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+
+  text-align: center;
+
+  color: #575757;
+
+  @media (max-width:768px) {
+    font-size: 20px;
+  }
+
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
new file mode 100644
index 0000000..71c1d31
--- /dev/null
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -0,0 +1,126 @@
+.sliderLayoutContainer--m3-carousel-products {
+  @media (min-width:2000px) {
+    max-width: 1920px;
+    margin: 0 auto;
+  }
+}
+
+.sliderTrackContainer--m3-carousel-products {
+
+  max-width: 94.712%;
+  margin: 0 auto;
+
+  @media (max-width:590px) {
+    max-width: 78.933333333333333333333333333333%;
+  }
+}
+
+// card
+.slide--m3-carousel-products {
+  margin: 0 8px;
+
+  @media (min-width:1920px) {
+    max-width: 434.4px !important;
+
+  }
+
+  @media(max-width:1440px) {
+    max-width: 314.4px !important;
+
+  }
+
+  @media (max-width:1024px) {
+    max-width: 291.2px !important;
+
+  }
+
+  @media (max-width:375px) {
+    width: 124.8px !important;
+
+  }
+
+}
+
+// IMAGENS
+:global(.vtex-product-summary-2-x-containerNormal) {
+  max-width: unset !important;
+}
+
+:global(.vtex-product-summary-2-x-imageNormal) {
+  max-height: unset !important;
+  border-radius: 0;
+}
+
+:global(.vtex-product-summary-2-x-imageStackContainer) {
+  display: flex;
+}
+
+// ARROW
+.sliderLeftArrow--m3-carousel-products {
+  visibility: hidden;
+
+  &::after {
+    position: relative !important;
+    visibility: visible;
+    content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg");
+    width: 12px;
+    left: 16px;
+
+    @media (min-width:2000px) {
+      left: -8px !important;
+    }
+
+    @media (min-width:1025px) {
+      left: 0 !important;
+    }
+
+    @media (max-width:1024px) {
+      left: -8px !important;
+      bottom: 3px;
+    }
+  }
+}
+
+.sliderRightArrow--m3-carousel-products {
+  visibility: hidden;
+
+  &::before {
+    position: relative !important;
+    visibility: visible;
+    content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-right.svg");
+    width: 12px;
+    right: 16px !important;
+
+    @media (min-width:2000px) {
+      left: 8px !important;
+    }
+
+    @media (min-width:1025px) {
+      left: 0 !important;
+    }
+
+    @media (max-width:1024px) {
+      left: 8px !important;
+      bottom: 3px;
+    }
+  }
+}
+
+// DOTS
+.paginationDotsContainer--m3-carousel-products {
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+  bottom: -16px;
+
+  .paginationDot--m3-carousel-products {
+    background-color: #000;
+  }
+
+  .paginationDot--isActive {
+    height: 1.063rem !important;
+    width: 1.0635rem !important;
+    background: transparent;
+    border: 1px solid;
+  }
+}
\ No newline at end of file