Merge pull request 'feat: estiliza bloco de prateleira de produtos relacionados' (#4) from feature/scssProdutosRelacionados into development

Reviewed-on: #4

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) {
+:global(.vtex-product-summary-2-x-imageNormal) {
-  opacity: 0;
+  max-height: unset !important;
-  transition: opacity 200ms ease-in-out;
 }
 
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+:global(.vtex-product-summary-2-x-imageStackContainer) {
-  opacity: 1;
+  display: flex;
 }
 
-@media screen and (max-width: 40em) {
+:global(.vtex-product-summary-2-x-nameContainer) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
+  background-color: white;
-    display: none;
+  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 {
+:global(.vtex-product-summary-2-x-priceContainer) {
-  justify-content: start;
+  padding: 0;
-  padding-top: 1rem;
+  padding-top: 8px;
-  padding-bottom: 1rem;
 }
-
+:global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer {
-.brandName {
+  padding-top: 0 !important;
-  font-weight: 600;
+  padding-bottom: 0 !important;
-  font-size: 18px;
+  font-family: "Open Sans";
-  color: #2E2E2E;
+  font-style: normal;
-}
+  font-weight: 400;
-
+  font-size: 14px;
-.container {
+  line-height: 19px;
-  text-align: start;
-}
-
-.imageContainer {
   text-align: center;
+  text-decoration-line: line-through;
+  color: #BABABA;
 }
-
+@media (max-width: 767px) {
-.image {
+  :global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer {
-  border-radius: 0.25rem;
+    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;
+  }
 }

styles/css/vtex.rich-text.css

@@ -7,3 +7,28 @@
 */
 /* Media Query M3 */
 /* 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;
+  }
+}

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 {
+.sliderTrackContainer--m3-carousel-products {
-  background-color: #F0F0F0;
+  max-width: 94.712%;
-  min-height: 450px;
+  margin: 0 auto;
+}
+@media (max-width: 590px) {
+  .sliderTrackContainer--m3-carousel-products {
+    max-width: 78.9333333333%;
+  }
 }
 
-.sliderTrackContainer {
+.slide--m3-carousel-products {
-  max-width: 100%;
+  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 {
+:global(.vtex-product-summary-2-x-containerNormal) {
-  margin-top: .5rem;
+  max-width: unset !important;
-  margin-bottom: .5rem;
 }
 
-.layoutContainer--shelf {
+:global(.vtex-product-summary-2-x-imageNormal) {
-  margin-top: 20px;
+  max-height: unset !important;
-  margin-bottom: 20px;
+  border-radius: 0;
-  max-width: 96rem;
-  min-height: 550px;
 }
 
-.slide--shelf {
+:global(.vtex-product-summary-2-x-imageStackContainer) {
-  margin-bottom: 25px;
+  display: flex;
-  padding-left: .5rem;
+}
-  padding-right: .5rem;
+
-  min-height: 550px;
+.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;
 }

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;
+
+    }
+  }
+}

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;
+  }
+
+}

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;
+  }
+}