Merge pull request 'feat: adiciona css product main 1024px' (#23) from feature/adiciona-css-product-main-1024px into development

Reviewed-on: #23

store/blocks/pdp/product.jsonc

@@ -99,12 +99,11 @@
   "product-images": {
     "props": {
       "aspectRatio": {
-        "desktop": "auto",
+        "desktop": "auto"
-        "phone": "16:9"
+        // "phone": "16:9"
       },
       "showNavigationArrows": false,
       "showPaginationDots": false,
-      "maxHeight": 664,
       "thumbnailsOrientation": "horizontal",
       "thumbnailMaxHeight": 90
     }
@@ -206,10 +205,18 @@
     "children": [
       "flex-layout.row#product-name",
       "product-identifier.product",
-      "flex-layout.row#availability",
+      "html#availability",
       "sku-selector"
     ]
   },
+
+  "html#availability": {
+    "props": {
+      "blockClass": "availability"
+    },
+    "children": ["flex-layout.row#availability"]
+  },
+
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"

styles/css/vtex.flex-layout.css

@@ -115,5 +115,15 @@
 }
 
 .flexRowContent--product-container {
-  padding: 0 40px;
+  width: 94.973%;
+}
+
+@media (max-width: 1024px) {
+  .flexRowContent--product-container .flexRowContent {
+    flex-direction: column;
+  }
+  .flexRowContent--product-container .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
 }

styles/css/vtex.product-identifier.css

@@ -11,6 +11,7 @@
 .product-identifier--productReference {
   display: flex;
   justify-content: end;
+  margin-bottom: 24px;
 }
 
 .product-identifier__value {
@@ -19,3 +20,9 @@
   font-size: 14px;
   line-height: 19px;
 }
+
+@media (max-width: 1024px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -35,7 +35,7 @@
 }
 
 .sliderTrackContainer--shelf {
-  max-width: 1304px;
+  width: 95.883%;
 }
 
 .sliderLeftArrow--shelf {

styles/css/vtex.store-components.css

@@ -13,6 +13,11 @@
   background: red;
 }
 
+.container {
+  display: flex;
+  justify-content: center;
+}
+
 .productBrand--quickview {
   display: flex;
   justify-content: end;
@@ -28,7 +33,10 @@
 }
 
 .productImageTag--main {
-  max-width: 664px;
+  width: 100%;
+  max-height: max-content !important;
+  max-width: 100%;
+  object-fit: contain;
 }
 
 .carouselThumbBorder {
@@ -85,6 +93,7 @@
 
 .skuSelectorSubcontainer--tamanho {
   order: 1;
+  margin: 0;
 }
 .skuSelectorSubcontainer--tamanho .skuSelectorName {
   font-size: 0;
@@ -332,7 +341,7 @@
 
 .buttonContainer--pageProduct :global(.vtex-button) {
   border: none;
-  border-bottom: 4px solid #ffffff;
+  border-bottom: 4px solid #cccccc;
   border-radius: 0;
   background: transparent;
   font-style: normal;
@@ -345,7 +354,7 @@
 .inputGroup--pageProduct :global(.vtex-input-prefix__group) {
   border: none;
   border-radius: 0;
-  border-bottom: 1px solid #ffffff;
+  border-bottom: 1px solid #cccccc;
 }
 
 .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
@@ -389,8 +398,7 @@
   grid-template-areas: "nm em" "sub sub";
   justify-content: inherit;
   gap: 8px;
-  width: 100%;
+  width: 59.024%;
-  max-width: 399px;
 }
 .form .content .inputName {
   grid-area: nm;
@@ -400,13 +408,13 @@
 .form .content .inputName :global(.vtex-input-prefix__group) {
   border: 1px solid #868686;
   border-radius: 0;
+  padding-bottom: 5px;
 }
 .form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder {
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
-  display: flex;
   color: #989898;
 }
 .form .content .inputEmail {
@@ -417,13 +425,13 @@
 .form .content .inputEmail :global(.vtex-input-prefix__group) {
   border: 1px solid #868686;
   border-radius: 0;
+  padding-bottom: 5px;
 }
 .form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder {
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
-  display: flex;
   color: #989898;
 }
 .form .content .submit {
@@ -437,6 +445,7 @@
   background: #000000;
   border: none;
   border-radius: 0;
+  width: 100%;
 }
 .form .content .submit :global(.vtex-button__label) {
   font-size: 0;
@@ -449,3 +458,18 @@
   line-height: 25px;
   color: #fff;
 }
+
+.productImagesGallerySlide {
+  width: 100% !important;
+}
+
+@media (max-width: 1024px) {
+  .productBrand--quickview {
+    justify-content: flex-start;
+    margin-top: 32px;
+  }
+  .form .content {
+    width: 100%;
+    max-width: 100%;
+  }
+}

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

@@ -107,5 +107,18 @@
 }
 
 .flexRowContent--product-container {
-  padding: 0 40px;
+  width: 94.973%;
+}
+
+@media (max-width: 1024px) {
+  .flexRowContent--product-container {
+    .flexRowContent {
+      flex-direction: column;
+    }
+
+    .stretchChildrenWidth {
+      width: 100% !important;
+      padding: 0;
+    }
+  }
 }

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

@@ -1,6 +1,7 @@
 .product-identifier--productReference {
   display: flex;
   justify-content: end;
+  margin-bottom: 24px;
 }
 
 .product-identifier__value {
@@ -9,3 +10,9 @@
   font-size: 14px;
   line-height: 19px;
 }
+
+@media (max-width: 1024px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+  }
+}

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

@@ -25,7 +25,7 @@
 }
 
 .sliderTrackContainer--shelf {
-  max-width: 1304px;
+  width: 95.883%;
 }
 
 .sliderLeftArrow--shelf {

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

@@ -2,10 +2,10 @@
   background: red;
 }
 
-// .container {
+.container {
-//   display: flex;
+  display: flex;
-//   justify-content: center;
+  justify-content: center;
-// }
+}
 
 .productBrand--quickview {
   display: flex;
@@ -22,7 +22,10 @@
 }
 
 .productImageTag--main {
-  max-width: 664px;
+  width: 100%;
+  max-height: max-content !important;
+  max-width: 100%;
+  object-fit: contain;
 }
 
 .carouselThumbBorder {
@@ -81,6 +84,7 @@
 
 .skuSelectorSubcontainer--tamanho {
   order: 1;
+  margin: 0;
 
   .skuSelectorName {
     font-size: 0;
@@ -332,7 +336,7 @@
 
 .buttonContainer--pageProduct :global(.vtex-button) {
   border: none;
-  border-bottom: 4px solid $color-gray11;
+  border-bottom: 4px solid $color-gray6;
   border-radius: 0;
   background: transparent;
   font-style: normal;
@@ -345,7 +349,7 @@
 .inputGroup--pageProduct :global(.vtex-input-prefix__group) {
   border: none;
   border-radius: 0;
-  border-bottom: 1px solid $color-gray11;
+  border-bottom: 1px solid $color-gray6;
 }
 
 .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) {
@@ -395,8 +399,7 @@
       "sub sub";
     justify-content: inherit;
     gap: 8px;
-    width: 100%;
+    width: 59.024%;
-    max-width: 399px;
 
     .inputName {
       grid-area: nm;
@@ -406,6 +409,7 @@
       & :global(.vtex-input-prefix__group) {
         border: 1px solid $color-gray12;
         border-radius: 0;
+        padding-bottom: 5px;
       }
 
       & :global(.vtex-styleguide-9-x-input)::placeholder {
@@ -413,7 +417,6 @@
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        display: flex;
         color: $color-gray13;
       }
     }
@@ -426,6 +429,7 @@
       & :global(.vtex-input-prefix__group) {
         border: 1px solid $color-gray12;
         border-radius: 0;
+        padding-bottom: 5px;
       }
 
       & :global(.vtex-styleguide-9-x-input)::placeholder {
@@ -433,7 +437,6 @@
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        display: flex;
         color: $color-gray13;
       }
     }
@@ -449,6 +452,7 @@
         background: $color-black;
         border: none;
         border-radius: 0;
+        width: 100%;
       }
 
       & :global(.vtex-button__label) {
@@ -466,3 +470,21 @@
     }
   }
 }
+
+.productImagesGallerySlide {
+  width: 100% !important;
+}
+
+@media (max-width: 1024px) {
+  .productBrand--quickview {
+    justify-content: flex-start;
+    margin-top: 32px;
+  }
+
+  .form {
+    .content {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}