feat:breadcrumb estilizado

.prettierignore

@@ -1 +1,2 @@
 CHANGELOG.md
+Todo.md

store/blocks/pdp/product.jsonc

@@ -5,6 +5,7 @@
       "condition-layout.product#availability",
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
+      "example-component",
       "product-specification-group#table",
       "shelf.relatedProducts",
       "product-questions-and-answers"
@@ -91,7 +92,7 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "displayThumbnailsArrows": false
     }
   },
   "flex-layout.col#right-col": {

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,15 @@
+/*
+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 */
+.container .homeLink::before {
+  content: "HOME";
+}
+.container .homeLink .homeIcon {
+  display: none;
+}

styles/css/vtex.stack-layout.css

@@ -1,10 +1,12 @@
-.stackItem--product {
+/*
-  width: 100%;
+0 - 600PX: Phone
-  min-height: 257px
+600 - 900px: Table portrait
-}
+900 - 1200px: Tablet landscape
-
+[1200 - 1800] is where our nortal styles apply
-.stackItem--quickview {
+1800px + : Big desktop
-  right: 0;
+*/
-  top: 0;
+/* Media Query M3 */
-  left: auto;
+/* Grid breakpoints */
+.stackItem {
+  display: block;
 }

styles/css/vtex.store-components.css

@@ -42,3 +42,8 @@
 .newsletter {
   background: black;
 }
+
+.carouselGaleryThumbs {
+  background: pink;
+  flex-direction: row;
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -0,0 +1,10 @@
+.container{
+  .homeLink{
+    &::before{
+      content: "HOME";
+    }
+    .homeIcon{
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+.stackItem{
+  display: block;
+}

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

@@ -47,3 +47,8 @@
 .newsletter{
     background: black;
 }
+
+.carouselGaleryThumbs{
+  background: pink;
+  flex-direction: row;
+}