From f525bd7d94e5eb62af66f58345538a1746abde19 Mon Sep 17 00:00:00 2001
From: DaviHKlein <davihgklein@gmail.com>
Date: Fri, 10 Feb 2023 14:44:04 -0300
Subject: [PATCH 1/2] feat(product-slider): Adiciona o componente e estilizacao
 do slider

---
 .../sass/pages/product/vtex.flex-layout.scss  | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss

diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
new file mode 100644
index 0000000..e28ea8f
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,122 @@
+// .flexRow {
+//   width: auto;
+//   padding: 0 40px;
+// }
+:global(.vtex-breadcrumb-1-x-container) {
+  padding: 0 40px;
+
+  :nth-child(n) {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+
+  :global(.vtex-breadcrumb-1-x-term) {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+}
+
+:global(.vtex-telemarketing-2-x-wrapper) {
+  :global(.vtex-store-components-3-x-container) {
+    margin: auto;
+  }
+}
+
+:global(.vtex-store-components-3-x-container) {
+  padding-left: 0px;
+  padding-right: 0px;
+  @media (min-width: 2560px) {
+    max-width: 100%;
+    margin: 0 320px;
+  }
+  :global(.vtex-flex-layout-0-x-flexRowContent) {
+    :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+      padding-right: 0 !important;
+      overflow: hidden;
+    }
+  }
+
+  :global(.vtex-flex-layout-0-x-flexRowContent) {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0px 40px;
+    gap: 32px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+    }
+    :global(.vtex-flex-layout-0-x-flexRow) {
+      :global(.vtex-flex-layout-0-x-flexRowContent) {
+        display: block;
+        padding: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.addButton {
+  width: 100%;
+}
+
+.flexRow--buyButton {
+  width: 100%;
+  .flexRowContent--buyButton {
+    margin: 0;
+    :global(.vtex-button) {
+      background-color: black;
+      height: 49px;
+      border: none;
+      border-radius: unset;
+    }
+    :global(.vtex-add-to-cart-button-0-x-buttonText) {
+      font-size: 0;
+      &::after {
+        content: "ADICIONAR À SACOLA";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  :global(.vtex-flex-layout-0-x-flexRowContent) {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .flexColChild {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 376px) {
+  :global(.vtex-add-to-cart-button-0-x-buttonText) {
+    max-width: 168px;
+  }
+
+  .flexRow--buyButton {
+    .flexRowContent--buyButton {
+      :global(.vtex-button) {
+        height: 74px !important;
+      }
+    }
+  }
+}
-- 
2.34.1


From dc54581ab33b24cefe41c4dc1525c0464b670a9a Mon Sep 17 00:00:00 2001
From: DaviHKlein <davihgklein@gmail.com>
Date: Fri, 10 Feb 2023 14:44:38 -0300
Subject: [PATCH 2/2] feat(product-slider): finaliza a estilizacao do slider

---
 .../pages/product/vtex.slider-layout.scss     | 262 ++++++++++++++++++
 1 file changed, 262 insertions(+)
 create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss

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..3495eca
--- /dev/null
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -0,0 +1,262 @@
+.sliderLayoutContainer {
+  padding: 16px 40px 113px;
+  margin-bottom: -49px;
+
+  .sliderTrackContainer {
+    padding: 0 24px 36px;
+
+    .sliderTrack {
+      gap: 16px;
+
+      .slide {
+        .slideChildrenContainer {
+          :global(.vtex-product-summary-2-x-container) {
+            margin: 0;
+            width: 100%;
+            @media (min-width: 2560px) {
+              align-items: center;
+              max-width: 434.4px !important;
+              min-height: 543.4px !important;
+            }
+
+            :global(.vtex-product-summary-2-x-element) {
+              :global(.vtex-product-summary-2-x-imageContainer) {
+                display: flex;
+                width: 100%;
+
+                :global(.vtex-product-summary-2-x-imageNormal) {
+                  height: 314px;
+                  background-color: #ededed;
+
+                  @media (min-width: 2560px) {
+                    min-width: 434.4px;
+                    min-height: 434.4px;
+                  }
+                }
+              }
+              :global(.vtex-product-summary-2-x-nameContainer) {
+                display: flex;
+                padding: 0;
+                justify-content: center;
+
+                :global(.vtex-product-summary-2-x-productBrand) {
+                  display: flex;
+                  max-width: 282.4px;
+                  height: auto;
+                  align-items: center;
+
+                  font-family: "Open Sans", sans-serif;
+                  font-style: normal;
+                  font-weight: 400;
+                  font-size: 18px;
+                  line-height: 25px;
+                  text-align: center;
+                  color: #000;
+                }
+              }
+              :global(.vtex-product-summary-2-x-priceContainer) {
+                display: flex;
+                order: 3;
+                padding: 0;
+
+                :global(.vtex-store-components-3-x-listPrice) {
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  text-decoration-line: line-through;
+                  gap: 1px;
+
+                  :global(.vtex-store-components-3-x-listPriceLabel) {
+                    font-family: "Open Sans", sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 19px;
+                    text-align: center;
+                    color: #bababa;
+                    text-transform: lowercase;
+                    text-decoration: none;
+                    padding: 0;
+                  }
+                  :global(.vtex-store-components-3-x-listPriceValue) {
+                    font-family: "Open Sans", sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 19px;
+                    text-align: center;
+                    color: #bababa;
+                    text-decoration: none;
+                    padding: 0;
+                  }
+                }
+                :global(.vtex-store-components-3-x-listPrice)::after {
+                  content: "por";
+                  font-family: "Open Sans", sans-serif;
+                  font-style: normal;
+                  font-weight: 400;
+                  font-size: 14px;
+                  line-height: 19px;
+                  text-align: center;
+                  color: #bababa;
+                }
+
+                :global(.vtex-store-components-3-x-sellingPrice) {
+                  padding: 0;
+
+                  :global(.vtex-product-summary-2-x-currencyContainer) {
+                    font-family: "Open Sans", sans-serif;
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 24px;
+                    line-height: 33px;
+                    text-align: center;
+                    color: #000;
+                    :nth-child(n) {
+                      font-family: "Open Sans", sans-serif;
+                      font-style: normal;
+                      font-weight: 700;
+                      font-size: 24px;
+                      line-height: 33px;
+                      text-align: center;
+                      color: #000;
+                    }
+                  }
+
+                  :global(.vtex-store-components-3-x-sellingPriceLabel) {
+                    display: none;
+                  }
+                }
+
+                :global(.vtex-store-components-3-x-installmentsPrice) {
+                  display: none;
+                }
+              }
+
+              :global(.vtex-product-summary-2-x-buyButtonContainer) {
+                display: none;
+              }
+              :global(.vtex-product-summary-2-x-description) {
+                display: none;
+              }
+              :global(.vtex-product-summary-2-x-SKUSelectorContainer) {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .paginationDotsContainer {
+    bottom: 113px;
+    align-items: center;
+
+    .paginationDot {
+      width: 10px;
+      height: 10px;
+      background-color: #000;
+      border: 0.5px solid #000;
+    }
+
+    .paginationDot--isActive {
+      background-color: #fff;
+      height: 17px !important;
+      width: 17px !important;
+    }
+  }
+}
+
+.slide {
+  .slideChildrenContainer {
+    :global(.vtex-product-summary-2-x-clearLink) {
+      :global(.vtex-product-summary-2-x-container) {
+        :global(.vtex-product-summary-2-x-element) {
+          .html--prateleira-flexcol {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  :global(.vtex-product-summary-2-x-productBrand) {
+    font-size: 14px !important;
+    line-height: 19px !important;
+    height: auto !important;
+  }
+  :global(.vtex-product-summary-2-x-imageContainer) {
+    margin-bottom: 4px;
+  }
+  .sliderTrackContainer {
+    padding: 0 24px 24px !important;
+  }
+  .sliderTrack {
+    gap: 12px !important;
+  }
+  .sliderLayoutContainer {
+    margin-bottom: -49px;
+  }
+}
+
+@media screen and (max-width: 376px) {
+  .sliderLayoutContainer {
+    margin-bottom: -81px;
+  }
+  .sliderTrack {
+    gap: 8px !important;
+  }
+  :global(.vtex-product-summary-2-x-imageContainer) {
+    :global(.vtex-product-summary-2-x-imageNormal) {
+      height: 124.8px !important;
+    }
+  }
+  .sliderTrackContainer {
+    padding-bottom: 16px !important;
+  }
+}
+
+:global(.vtex-product-price-1-x-interestRate) {
+  &::after {
+    content: "sem juros";
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+}
+
+:global(.vtex-product-price-1-x-installments) {
+  font-size: 0;
+}
+
+:global(.vtex-product-price-1-x-installmentValue) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  &::before {
+    content: " de ";
+  }
+  &::after {
+    content: " ";
+  }
+}
+
+:global(.vtex-product-price-1-x-installmentsNumber) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+  &::after {
+    content: " x ";
+  }
+}
-- 
2.34.1