feat(breadcrumb): estiliza o breadcrumb

gulpfile.js

@@ -23,12 +23,12 @@ const pathsStore = {
 
 // Quick/efficient way to get the unique values from a array.
 function uniqValuesArray(a) {
-  var seen = {};
+  let seen = {};
-  var out = [];
+  let out = [];
-  var len = a.length;
+  let len = a.length;
-  var j = 0;
+  let j = 0;
-  for (var i = 0; i < len; i++) {
+  for (let i = 0; i < len; i++) {
-    var item = a[i];
+    let item = a[i];
     if (seen[item] !== 1) {
       seen[item] = 1;
       out[j++] = item;

store/blocks/pdp/product.jsonc

@@ -18,6 +18,7 @@
     },
     "children": ["breadcrumb"]
   },
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },

styles/configs/font-faces.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Open Sans", sans-serif;
+  src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
+}

styles/configs/style.json

@@ -1,26 +1,28 @@
 {
-    "typeScale": [
+  "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
-        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
-      ],
   "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
   "customMedia": [
     { "s": 20 },
-        { "ns": {
+    {
+      "ns": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "m": {
+    {
+      "m": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "l": {
+    {
+      "l": {
         "value": 64,
         "minWidth": true
       }
     },
-        { "xl": {
+    {
+      "xl": {
         "value": 80,
         "minWidth": true
       }
@@ -253,91 +255,91 @@
     "measure": [30, 34, 20],
     "styles": {
       "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "700",
         "fontSize": "3rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "700",
         "fontSize": "2.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "700",
         "fontSize": "1.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.875rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "500",
         "fontSize": "1rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "500",
         "fontSize": "0.875rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "500",
         "fontSize": "1.25rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "code": {
-            "fontFamily": "Consolas, monaco, monospace",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",

styles/css/agenciamagma.store-theme.css

@@ -7,10 +7,11 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
-  background-color: red;
-}
-
 .html--pdp-breadcrumb {
-  background-color: green;
+  margin: 0 40px;
+}
+@media screen and (min-width: 2500px) {
+  .html--pdp-breadcrumb {
+    margin: 0 360px;
+  }
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,26 @@
+/*
+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 {
+  margin: 0;
+}
+.container .link,
+.container .term {
+  color: #929292;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.container .homeLink::before {
+  content: "Home";
+}
+.container .homeLink .homeIcon {
+  display: none;
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,9 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
-}
+900 - 1200px: Tablet landscape
-
+[1200 - 1800] is where our nortal styles apply
-@media screen and (min-width: 40em) {
+1800px + : Big desktop
-  .flexRowContent--menu-link,
+*/
-  .flexRowContent--main-header {
+/* Media Query M3 */
-    padding: 0 1rem;
+/* Grid breakpoints */
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
-}

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

@@ -1,8 +1,11 @@
-.html {
+// .html {
-  background-color: red;
+//   background-color: red;
-}
+// }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  margin: 0 40px;
-}
 
+  @media screen and (min-width: 2500px) {
+    margin: 0 360px;
+  }
+}

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

@@ -0,0 +1,24 @@
+.container {
+  margin: 0;
+
+  .link,
+  .term {
+    color: $gray-500;
+
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  .homeLink {
+    &::before {
+      content: "Home";
+    }
+
+    .homeIcon {
+      display: none;
+    }
+  }
+}
+ 

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

@@ -0,0 +1,3 @@
+// .flexRowContent {
+//   background-color: red;
+// }

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

@@ -0,0 +1,3 @@
+// .paragraph--teste {
+//   background-color: red;
+// }

styles/sass/utils/_vars.scss

@@ -12,6 +12,8 @@ $color-blue: #4267b2;
 
 $color-green: #4caf50;
 
+$gray-500: #929292;
+
 /* Grid breakpoints */
 $grid-breakpoints: (
 	xs: 0,
@@ -19,7 +21,8 @@ $grid-breakpoints: (
 	sm: 576px,
 	md: 768px,
 	lg: 992px,
-	xl: 1200px
+	xl: 1200px,
+  ultrawide: 2499px
 ) !default;
 
 $z-index: (