feat(breadcrumb): created initial styles

store/blocks/pdp/product.jsonc

@@ -16,7 +16,7 @@
       "testId": "breadcrumbs",
       "blockClass": "pdp-breadcrumb"
     },
-    "children": ["breadcrumb"]
+    "children": ["breadcrumb#pdp-breadcrumb"]
   },
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
@@ -181,5 +181,12 @@
         "Pinterest": true
       }
     }
+  },
+
+  "breadcrumb#pdp-breadcrumb": {
+    "props": {
+      "homeIconSize": 0,
+      "showOnMobile": true
+    }
   }
 }

styles/css/agenciamagma.store-theme.css

@@ -7,10 +7,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
-  background-color: red;
-}
-
 .html--pdp-breadcrumb {
-  background-color: green;
+  width: 271.25px;
+  padding: 0 40px;
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,33 @@
+/*
+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 {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.homeLink::before {
+  content: "Home";
+}
+
+.arrow {
+  display: block;
+}
+
+.termArrow {
+  padding: 0;
+}
+.termArrow .caretIcon {
+  display: none;
+}
+
+.term {
+  font-size: 0;
+}

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +1,6 @@
-.html {
-  background-color: red;
-}
+$containers: ();
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  width: 271.25px;
+  padding: 0 40px;
 }
-

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

@@ -0,0 +1,30 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.homeLink {
+  &::before {
+    content: "Home";
+  }
+}
+
+.arrow-1 {
+}
+
+.arrow {
+  display: block;
+}
+
+.termArrow {
+  padding: 0;
+
+  .caretIcon {
+    display: none;
+  }
+}
+
+.term {
+  font-size: 0;
+}