feat(responsividade): Adiciona responsividade tamanho ultrawite a pagina

react/components/Html/styles.css

@@ -22,18 +22,17 @@
 }
 
 [class*="html--cart-button"] {
-  width: 78.94%;
+  width: 80%;
   height: 49px;
 }
 
 [class*="html--prateleira"] {
-  padding: 16px 40px 64px;
+  padding: 16px 40px 113px;
 }
 
 [class*="html--price"] {
   display: flex;
   flex-direction: column;
-  margin-bottom: 32px;
 }
 
 [class*="html--sku-selector"] {
@@ -48,8 +47,16 @@
   [class*="html--product-main"] {
     padding: 16px 360px 0;
   }
+  [class*="html--cart-button"] {
+    width: 90%;
+    height: 49px;
+  }
   [class*="html--prateleira"] {
-    padding: 16px 360px 64px;
+    padding: 16px 360px 113px;
+  }
+  [class*="html--stack-layout"],
+  [class*="html--right-col"] {
+    width: 50%;
   }
 }
 
@@ -66,6 +73,10 @@
   [class*="html--cart-button"] {
     width: 85.39%;
   }
+
+  [class*="html--prateleira"] {
+    padding-bottom: 105px;
+  }
 }
 
 @media screen and (max-width: 768px) {
@@ -83,4 +94,7 @@
   [class*="html--shipping-simulator"]::-webkit-scrollbar {
     background-color: transparent;
   }
+  [class*="html--prateleira"] {
+    padding-bottom: 65px;
+  }
 }

styles/css/vtex.add-to-cart-button.css

@@ -13,15 +13,13 @@
 }
 
 .buttonText--add-to-cart-button {
+  font-weight: 400;
   font-size: 18px;
   line-height: 25px;
-  display: flex;
-  align-items: center;
-  text-align: center;
   color: #FFFFFF;
 }
 
-@media screen and (max-width: 375px) {
+@media screen and (max-width: 768px) {
   .buttonText--add-to-cart-button {
     width: 168px;
   }

styles/css/vtex.product-identifier.css

@@ -14,7 +14,7 @@
   font-size: 14px;
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
-  margin-bottom: 8px;
+  margin-bottom: 24px;
 }
 
 .product-identifier__label,

styles/css/vtex.product-quantity.css

@@ -41,8 +41,6 @@
   border-radius: 0;
   font-size: 16px;
   line-height: 22px;
-  display: flex;
-  align-items: center;
   color: #000000;
   height: 100%;
   width: 26px !important;

styles/css/vtex.product-summary.css

@@ -9,6 +9,7 @@
 /* Grid breakpoints */
 .container--produto-prateleira {
   max-width: initial !important;
+  border-radius: 0;
   margin: 0;
 }
 .container--produto-prateleira :global(.vtex-store-components-3-x-discountContainer) {
@@ -20,11 +21,10 @@
 .container--produto-prateleira .imageContainer {
   display: flex;
   align-items: center;
-  justify-content: center;
+  max-width: 314.4px;
-  width: 100%;
+  height: 314.4px;
-  max-width: 334.4px;
-  height: 334.4px;
   background: #EDEDED;
+  margin: 0;
 }
 .container--produto-prateleira .nameContainer {
   padding: 16px 0 8px;
@@ -41,13 +41,18 @@
 }
 .container--produto-prateleira .imageNormal {
   width: 100%;
-  max-height: 334.4px;
+  max-height: 314.4px;
   max-width: 100%;
 }
 .container--produto-prateleira .priceContainer {
   padding: 0 0 32px;
 }
 
+.element--produto-prateleira {
+  padding: 0;
+  height: auto;
+}
+
 @media screen and (min-width: 1920px) {
   .container--produto-prateleira .imageContainer {
     max-width: 434.4px;
@@ -61,12 +66,12 @@
 }
 @media screen and (max-width: 1024px) {
   .container--produto-prateleira .imageContainer {
-    max-width: 317.87px;
+    max-width: 291.2px;
-    height: 317.87px;
+    height: 291.2px;
   }
   .container--produto-prateleira .imageNormal {
     width: 100%;
-    max-height: 317.87px;
+    max-height: 291.2px;
     max-width: 100%;
   }
   .container--produto-prateleira .nameContainer .productNameContainer {

styles/css/vtex.rich-text.css

@@ -69,6 +69,11 @@
   color: #575757;
 }
 
+@media screen and (max-width: 1024px) {
+  .container--title-prateleira .paragraph--title-prateleira {
+    margin: 0 0 24px;
+  }
+}
 @media screen and (max-width: 768px) {
   .container--title-prateleira .paragraph--title-prateleira {
     font-size: 20px;

styles/css/vtex.slider-layout.css

@@ -15,7 +15,7 @@
   gap: 16px;
 }
 .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
-  width: 95.96%;
+  width: 97%;
 }
 .sliderLayoutContainer--prateleira .slide--prateleira {
   margin: 0;
@@ -33,7 +33,7 @@
   content: "";
   position: absolute;
   padding: 10px;
-  left: 1px;
+  left: 8px;
   box-shadow: 2px -2px 0 0px #000 inset;
   border: solid transparent;
   border-width: 0 0 1px 1px;
@@ -51,7 +51,7 @@
   content: "";
   position: absolute;
   padding: 10px;
-  right: 1px;
+  right: 8px;
   box-shadow: 2px -2px 0 0px #000 inset;
   border: solid transparent;
   border-width: 0 0 1px 1px;
@@ -59,6 +59,7 @@
 }
 .sliderLayoutContainer--prateleira .paginationDotsContainer {
   align-items: center;
+  bottom: -32px;
 }
 .sliderLayoutContainer--prateleira .paginationDot--prateleira {
   width: 10px;
@@ -73,6 +74,11 @@
   border: 0.5px solid #000000;
 }
 
+@media screen and (min-width: 1920px) {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
+    width: 98%;
+  }
+}
 @media screen and (max-width: 1024px) {
   .sliderLayoutContainer--prateleira .sliderTrack--prateleira {
     gap: 12px;
@@ -80,9 +86,24 @@
   .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
     width: 100%;
   }
+  .paginationDotsContainer {
+    bottom: -24px;
+  }
 }
 @media screen and (max-width: 768px) {
+  .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
+    width: 90%;
+  }
   .sliderLayoutContainer--prateleira .sliderTrack--prateleira {
     gap: 8px;
   }
+  .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira {
+    left: -8px;
+  }
+  .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira {
+    right: -8px;
+  }
+  .sliderLayoutContainer--prateleira .paginationDotsContainer {
+    bottom: -16px;
+  }
 }

styles/css/vtex.store-components.css

@@ -8,102 +8,6 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.notificationBarContainer {
-  background-color: black;
-  height: 34px;
-}
-.notificationBarContainer .notificationBarInner {
-  min-height: 34px;
-}
-.notificationBarContainer .notificationContent {
-  display: flex;
-  align-items: center;
-  gap: 54px;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  color: #FFFFFF;
-}
-.notificationBarContainer .notificationContent::before {
-  content: "";
-  display: flex;
-  width: 6px;
-  height: 6px;
-  padding: 1px;
-  box-shadow: 1px -1px 0 0px #fff inset;
-  border: solid transparent;
-  border-width: 0 0 1px 1px;
-  transform: rotate(45deg);
-}
-.notificationBarContainer .notificationContent::after {
-  content: "";
-  display: flex;
-  width: 6px;
-  height: 6px;
-  padding: 1px;
-  box-shadow: 1px -1px 0 0px #fff inset;
-  border: solid transparent;
-  border-width: 0 0 1px 1px;
-  transform: rotate(-135deg);
-}
-
-.logoContainer {
-  padding: 0;
-}
-
-.searchBarContainer {
-  padding: 0;
-}
-.searchBarContainer :global(.vtex-input-prefix__group) {
-  width: 243px;
-  border: 1px solid #AEAEAE;
-  border-width: 0 0 1px;
-  border-radius: 0;
-  flex-direction: row-reverse;
-}
-.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
-  background: transparent;
-}
-.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
-  padding-left: 12px;
-  font-weight: 300;
-  font-size: 12px;
-  line-height: 16px;
-  background: transparent;
-  color: #AEAEAE;
-}
-.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
-  padding: 0;
-}
-.searchBarContainer .searchBarIcon {
-  padding: 0;
-}
-.searchBarContainer .searchBarIcon .searchIcon,
-.searchBarContainer .searchBarIcon .closeIcon {
-  width: 10px;
-  height: 10px;
-  color: #AEAEAE;
-}
-
-@media screen and (max-width: 1024px) {
-  .searchBarContainer {
-    max-width: 100%;
-    position: absolute;
-    bottom: 32px;
-  }
-  .searchBarContainer .autoCompleteOuterContainer {
-    max-width: 100%;
-    padding: 8px 40px 0;
-  }
-  .searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) {
-    width: 100%;
-  }
-}
-@media screen and (max-width: 300px) {
-  .notificationBarContainer .notificationContent {
-    gap: 34px;
-  }
-}
 .newsletter {
   background: red;
 }
@@ -122,6 +26,7 @@
   line-height: 34px;
   color: #575757;
   text-align: right;
+  margin-bottom: 8px;
 }
 
 .carouselGaleryCursor {
@@ -172,7 +77,10 @@
 }
 .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
   content: "OUTROS TAMANHOS:";
+  font-weight: 400;
   font-size: 14px;
+  line-height: 19px;
+  color: #929292;
 }
 
 .skuSelectorSubcontainer--cor {
@@ -180,20 +88,16 @@
 }
 .skuSelectorSubcontainer--cor .skuSelectorName::after {
   content: "OUTRAS CORES";
-  font-size: 14px;
-}
-
-.skuSelectorNameContainer {
-  margin: 0;
-}
-
-.skuSelectorTextContainer {
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #929292;
 }
 
+.skuSelectorNameContainer {
+  margin: 0;
+}
+
 .skuSelectorName,
 .skuSelectorSelectorImageValue {
   font-size: 0;
@@ -244,8 +148,8 @@
 .diagonalCross {
   background: #d5d5d5;
   width: 1px;
-  height: 38.18px;
+  height: 39.18px;
-  left: 19px;
+  left: 20px;
   top: 1px;
   transform: rotate(45deg);
 }
@@ -281,6 +185,7 @@
   width: 280px;
   height: 49px;
   border-radius: 0;
+  border: 1px solid #CCCCCC;
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
   padding: 0;
@@ -289,8 +194,6 @@
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   font-size: 12px;
   line-height: 16px;
-  display: flex;
-  align-items: center;
   text-decoration-line: underline;
   color: #000000;
 }
@@ -301,11 +204,9 @@
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
+  color: #AFAFAF;
 }
 .shippingContainer :global(.vtex-address-form-4-x-input)::placeholder {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
   color: #AFAFAF;
 }
 .shippingContainer :global(.vtex-button) {
@@ -399,6 +300,7 @@
 
 .productImagesContainer--description {
   width: 50%;
+  max-width: 632px;
   max-height: 632px;
 }
 
@@ -560,7 +462,7 @@
 }
 
 @media screen and (min-width: 1920px) {
-  .productImagesGallerySwiperContainer .productImageTag--main {
+  .productImagesContainer--carousel .productImagesGallerySwiperContainer .productImageTag--main {
     max-height: 904px !important;
   }
   .productImagesContainer--description {
@@ -578,6 +480,11 @@
     font-size: 18px;
     line-height: 25px;
   }
+  .productImagesContainer--description {
+    width: 100%;
+    max-width: 872px;
+    max-height: 872px;
+  }
 }
 @media screen and (max-width: 1024px) {
   .productImageTag--main {
@@ -588,6 +495,7 @@
   }
   .productImagesContainer--description {
     width: 100%;
+    max-width: 100%;
     max-height: 944px;
   }
   .productDescriptionContainer {
@@ -648,3 +556,99 @@
     left: calc(100% - 48px);
   }
 }
+.notificationBarContainer {
+  background-color: black;
+  height: 34px;
+}
+.notificationBarContainer .notificationBarInner {
+  min-height: 34px;
+}
+.notificationBarContainer .notificationContent {
+  display: flex;
+  align-items: center;
+  gap: 54px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #FFFFFF;
+}
+.notificationBarContainer .notificationContent::before {
+  content: "";
+  display: flex;
+  width: 6px;
+  height: 6px;
+  padding: 1px;
+  box-shadow: 1px -1px 0 0px #fff inset;
+  border: solid transparent;
+  border-width: 0 0 1px 1px;
+  transform: rotate(45deg);
+}
+.notificationBarContainer .notificationContent::after {
+  content: "";
+  display: flex;
+  width: 6px;
+  height: 6px;
+  padding: 1px;
+  box-shadow: 1px -1px 0 0px #fff inset;
+  border: solid transparent;
+  border-width: 0 0 1px 1px;
+  transform: rotate(-135deg);
+}
+
+.logoContainer {
+  padding: 0;
+}
+
+.searchBarContainer {
+  padding: 0;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) {
+  width: 243px;
+  border: 1px solid #AEAEAE;
+  border-width: 0 0 1px;
+  border-radius: 0;
+  flex-direction: row-reverse;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+  background: transparent;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  padding-left: 12px;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 16px;
+  background: transparent;
+  color: #AEAEAE;
+}
+.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+  padding: 0;
+}
+.searchBarContainer .searchBarIcon {
+  padding: 0;
+}
+.searchBarContainer .searchBarIcon .searchIcon,
+.searchBarContainer .searchBarIcon .closeIcon {
+  width: 10px;
+  height: 10px;
+  color: #AEAEAE;
+}
+
+@media screen and (max-width: 1024px) {
+  .searchBarContainer {
+    max-width: 100%;
+    position: absolute;
+    bottom: 32px;
+  }
+  .searchBarContainer .autoCompleteOuterContainer {
+    max-width: 100%;
+    padding: 8px 40px 0;
+  }
+  .searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 300px) {
+  .notificationBarContainer .notificationContent {
+    gap: 34px;
+  }
+}

styles/css/vtex.tab-layout.css

@@ -29,9 +29,6 @@
   font-size: 18px;
   line-height: 38px;
   text-transform: capitalize;
-  display: flex;
-  align-items: center;
-  text-align: center;
   padding: 0 !important;
   color: #BFBFBF;
 }

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -4,17 +4,14 @@
 }
 
 .buttonText--add-to-cart-button {
+  font-weight: 400;
   font-size: 18px;
   line-height: 25px;
 
-  display: flex;
-  align-items: center;
-  text-align: center;
-
   color: #FFFFFF;
 }
 
-@media screen and (max-width: 375px) {
+@media screen and (max-width: 768px) {
   .buttonText--add-to-cart-button {
     width: 168px;
   }

styles/sass/pages/product/vtex.product-identifier.scss

@@ -5,7 +5,7 @@
   font-size: 14px;
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
-  margin-bottom: 8px;
+  margin-bottom: 24px;
 }
 
 .product-identifier__label,

styles/sass/pages/product/vtex.product-quantity.scss

@@ -32,8 +32,6 @@
   border-radius: 0;
   font-size: 16px;
   line-height: 22px;
-  display: flex;
-  align-items: center;
   color: #000000;
   height: 100%;
   width: 26px !important;

styles/sass/pages/product/vtex.product-summary.scss

@@ -1,5 +1,6 @@
 .container--produto-prateleira {
   max-width: initial !important;
+  border-radius: 0;
   margin: 0;
 
   :global(.vtex-store-components-3-x-discountContainer) {
@@ -13,11 +14,10 @@
   .imageContainer {
     display: flex;
     align-items: center;
-    justify-content: center;
+    max-width: 314.4px;
-    width: 100%;
+    height: 314.4px;
-    max-width: 334.4px;
-    height: 334.4px;
     background: #EDEDED;
+    margin: 0;
   }
 
   .nameContainer {
@@ -40,7 +40,7 @@
 
   .imageNormal {
     width: 100%;
-    max-height: 334.4px;
+    max-height: 314.4px;
     max-width: 100%;
   }
 
@@ -49,6 +49,11 @@
   }
 }
 
+.element--produto-prateleira {
+  padding: 0;
+  height: auto;
+}
+
 @media screen and (min-width: 1920px) {
   .container--produto-prateleira {
     .imageContainer {
@@ -68,13 +73,13 @@
 @media screen and (max-width: 1024px) {
   .container--produto-prateleira {
     .imageContainer {
-      max-width: 317.87px;
+      max-width: 291.2px;
-      height: 317.87px;
+      height: 291.2px;
     }
 
     .imageNormal {
       width: 100%;
-      max-height: 317.87px;
+      max-height: 291.2px;
       max-width: 100%;
     }
 

styles/sass/pages/product/vtex.rich-text.scss

@@ -10,6 +10,14 @@
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .container--title-prateleira {
+    .paragraph--title-prateleira {
+      margin: 0 0 24px;
+    }
+  }
+}
+
 @media screen and (max-width: 768px) {
   .container--title-prateleira {
     .paragraph--title-prateleira {

styles/sass/pages/product/vtex.slider-layout.scss

@@ -7,7 +7,7 @@
   }
 
   .sliderTrackContainer--prateleira {
-    width: 95.96%;
+    width: 97%;
   }
 
   .slide--prateleira {
@@ -28,7 +28,7 @@
       content: "";
       position: absolute;
       padding: 10px;
-      left: 1px;
+      left: 8px;
       box-shadow: 2px -2px 0 0px #000 inset;
       border: solid transparent;
       border-width: 0 0 1px 1px;
@@ -49,7 +49,7 @@
       content: "";
       position: absolute;
       padding: 10px;
-      right: 1px;
+      right: 8px;
       box-shadow: 2px -2px 0 0px #000 inset;
       border: solid transparent;
       border-width: 0 0 1px 1px;
@@ -59,6 +59,7 @@
 
   .paginationDotsContainer {
     align-items: center;
+    bottom: -32px;
   }
 
   .paginationDot--prateleira {
@@ -76,6 +77,14 @@
   }
 }
 
+@media screen and (min-width: 1920px) {
+  .sliderLayoutContainer--prateleira {
+    .sliderTrackContainer--prateleira {
+      width: 98%;
+    }
+  }
+}
+
 @media screen and (max-width: 1024px) {
   .sliderLayoutContainer--prateleira {
     .sliderTrack--prateleira {
@@ -87,12 +96,34 @@
     }
 
   }
+
+  .paginationDotsContainer {
+    bottom: -24px;
+  }
 }
 
 @media screen and (max-width: 768px) {
+
   .sliderLayoutContainer--prateleira {
+
+    .sliderTrackContainer--prateleira {
+      width: 90%;
+    }
+
     .sliderTrack--prateleira {
       gap: 8px;
     }
+
+    .sliderLeftArrow--prateleira {
+      left: -8px;
+    }
+
+    .sliderRightArrow--prateleira {
+      right: -8px;
+    }
+
+    .paginationDotsContainer {
+      bottom: -16px;
+    }
   }
 }

styles/sass/pages/product/vtex.store-components.scss

@@ -16,6 +16,7 @@
   line-height: 34px;
   color: #575757;
   text-align: right;
+  margin-bottom: 8px;
 }
 
 .carouselGaleryCursor {
@@ -69,7 +70,10 @@
   .skuSelectorName {
     &::after {
       content: "OUTROS TAMANHOS:";
+      font-weight: 400;
       font-size: 14px;
+      line-height: 19px;
+      color: #929292;
     }
   }
 }
@@ -80,7 +84,10 @@
   .skuSelectorName {
     &::after {
       content: "OUTRAS CORES";
+      font-weight: 400;
       font-size: 14px;
+      line-height: 19px;
+      color: #929292;
     }
   }
 }
@@ -89,13 +96,6 @@
   margin: 0;
 }
 
-.skuSelectorTextContainer {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: #929292;
-}
-
 .skuSelectorName,
 .skuSelectorSelectorImageValue {
   font-size: 0;
@@ -150,8 +150,8 @@
 .diagonalCross {
   background: #d5d5d5;
   width: 1px;
-  height: 38.18px;
+  height: 39.18px;
-  left: 19px;
+  left: 20px;
   top: 1px;
   transform: rotate(45deg);
 }
@@ -193,6 +193,7 @@
     width: 280px;
     height: 49px;
     border-radius: 0;
+    border: 1px solid #CCCCCC;
   }
 
   :global(.vtex-address-form__postalCode-forgottenURL) {
@@ -202,8 +203,6 @@
     :last-child {
       font-size: 12px;
       line-height: 16px;
-      display: flex;
-      align-items: center;
       text-decoration-line: underline;
       color: #000000;
     }
@@ -218,12 +217,9 @@
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
+    color: #AFAFAF;
 
     &::placeholder {
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 16px;
-
       color: #AFAFAF;
     }
   }
@@ -341,6 +337,7 @@
 
 .productImagesContainer--description {
   width: 50%;
+  max-width: 632px;
   max-height: 632px;
 }
 
@@ -544,11 +541,14 @@
 
 
 @media screen and (min-width: 1920px) {
+
+  .productImagesContainer--carousel {
     .productImagesGallerySwiperContainer {
       .productImageTag--main {
         max-height: 904px !important;
       }
     }
+  }
 
   .productImagesContainer--description {
     max-height: 872px;
@@ -568,6 +568,12 @@
     font-size: 18px;
     line-height: 25px;
   }
+
+  .productImagesContainer--description {
+    width: 100%;
+    max-width: 872px;
+    max-height: 872px;
+  }
 }
 
 
@@ -583,6 +589,7 @@
 
   .productImagesContainer--description {
     width: 100%;
+    max-width: 100%;
     max-height: 944px;
   }
 

styles/sass/pages/product/vtex.tab-layout.scss

@@ -22,9 +22,6 @@
         font-size: 18px;
         line-height: 38px;
         text-transform: capitalize;
-        display: flex;
-        align-items: center;
-        text-align: center;
         padding: 0 !important;
         color: #BFBFBF;
       }