Merge pull request 'feature/shelf' (#23) from feature/shelf into development

Reviewed-on: #23

store/blocks/pdp/product.jsonc

@@ -316,7 +316,7 @@
         "phone": 1
       },
       "infinite": true,
-      "showNavigationArrows": "desktopOnly",
+      "showNavigationArrows": "always",
       "blockClass": "carousel"
     },
     "children": []

styles/css/vtex.flex-layout.css

@@ -48,4 +48,8 @@
     display: flex;
     flex-direction: column;
   }
+  .flexRowContent .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
 }

styles/css/vtex.product-identifier.css

@@ -30,3 +30,9 @@
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
 }
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -15,8 +15,21 @@
   }
 }*/
 .sliderLayoutContainer {
-  width: 95%;
+  width: 100%;
   padding: 0 16px 0 16px;
   display: flex;
   justify-content: center;
 }
+.sliderLayoutContainer .paginationDot {
+  background: black;
+}
+.sliderLayoutContainer .paginationDot--isActive {
+  width: 17px !important;
+  height: 17px !important;
+  background: white;
+  border: 0.5px solid black;
+}
+.sliderLayoutContainer .paginationDotsContainer {
+  display: flex;
+  align-items: center;
+}

styles/css/vtex.store-components.css

@@ -10,24 +10,23 @@
 /* Grid breakpoints */
 .container {
   max-width: 100%;
-  margin: 0 40px 0 40px !important;
+  padding: 0 40px 0 40px;
 }
 
 .productImageTag {
   max-height: none !important;
 }
 
-/*
-.productImagesGallerySlide {
-  .productImageTag {
-    width: 800px;
-  }
-}
-*/
 .productImagesThumb {
+  width: 100%;
+  max-width: 90px;
   margin-right: 16px;
 }
 
+.thumbImg {
+  height: 90px;
+}
+
 .productBrand {
   display: flex;
   justify-content: flex-end;
@@ -270,6 +269,10 @@
   line-height: 22px;
   color: #929292;
 }
+.productDescriptionContainer .productDescriptionText .container {
+  margin: 0 0 0 0 !important;
+  padding: 0 0 0 0 !important;
+}
 
 .newsletter {
   background: black;
@@ -376,4 +379,10 @@
     display: flex;
     flex-direction: column;
   }
+  .productBrand {
+    justify-content: flex-start;
+  }
+  .product-identifier--productReference {
+    justify-content: none;
+  }
 }

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

@@ -41,5 +41,9 @@
   .flexRowContent {
     display: flex;
     flex-direction: column;
+    .stretchChildrenWidth {
+      width: 100% !important;
+      padding: 0;
+    }
   }
 }

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

@@ -17,3 +17,8 @@
   line-height: 19px;
   color: rgba(146, 146, 146, 0.48);
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .product-identifier--productReference {
+    justify-content: flex-start;
+  }
+}

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

@@ -5,10 +5,23 @@
   }
 }*/
 .sliderLayoutContainer {
-  width: 95%;
+  width: 100%;
   padding: 0 16px 0 16px;
   display: flex;
   justify-content: center;
+  .paginationDot {
+    background: black;
+  }
+  .paginationDot--isActive {
+    width: 17px !important;
+    height: 17px !important;
+    background: white;
+    border: 0.5px solid black;
+  }
+  .paginationDotsContainer {
+    display: flex;
+    align-items: center;
+  }
 }
 @media screen and (max-width: 1024px) and (min-width: 768px) {
 }

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

@@ -1,21 +1,19 @@
 .container {
   max-width: 100%;
-  margin: 0 40px 0 40px !important;
+  padding: 0 40px 0 40px;
 }
 .productImageTag {
   max-height: none !important;
 }
-/*
-.productImagesGallerySlide {
-  .productImageTag {
-    width: 800px;
-  }
-}
-*/
 
 .productImagesThumb {
+  width: 100%;
+  max-width: 90px;
   margin-right: 16px;
 }
+.thumbImg {
+  height: 90px;
+}
 
 .productBrand {
   display: flex;
@@ -257,6 +255,10 @@
     color: #575757;
   }
   .productDescriptionText {
+    .container {
+      margin: 0 0 0 0 !important;
+      padding: 0 0 0 0 !important;
+    }
     font-family: "Open Sans";
     font-style: normal;
     font-weight: 400;
@@ -369,4 +371,10 @@
     display: flex;
     flex-direction: column;
   }
+  .productBrand {
+    justify-content: flex-start;
+  }
+  .product-identifier--productReference {
+    justify-content: none;
+  }
 }