feat(product): adicionando estilo no bradcrumb

product

styles/css/agenciamagma.store-theme.css

@@ -6,11 +6,12 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
 /* Grid breakpoints */
 .html {
   background-color: red;
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: transparent;
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,41 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+/* Grid breakpoints */
+.container {
+  padding: 16px 360px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+  .container {
+    padding: 16px 40px;
+  }
+}
+.container .link:hover {
+  color: #929292;
+}
+.container .homeLink {
+  vertical-align: baseline;
+  text-decoration: none;
+}
+.container .homeLink::after {
+  content: "Home";
+  display: block;
+}
+.container .homeLink .homeIcon {
+  display: none;
+}
+.container .term {
+  color: #929292;
+}

styles/css/vtex.rich-text.css

@@ -6,4 +6,5 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
 /* Grid breakpoints */

styles/css/vtex.store-components.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
 /* Grid breakpoints */
 .newsletter {
   background: red;

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

@@ -0,0 +1,35 @@
+.container {
+  padding:16px 360px;
+  font-family: $font-family;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $color-gray6;
+
+
+  @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+    padding: 16px 40px;
+  }
+
+  .link:hover {
+    color: $color-gray6;
+  }
+  .homeLink {
+    vertical-align: baseline;
+    text-decoration: none;
+
+
+    &::after {
+      content: 'Home';
+      display: block;
+    }
+
+    .homeIcon {
+      display: none;
+    }
+  }
+  .term {
+    color: $color-gray6;
+  }
+}

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

@@ -3,6 +3,8 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: transparent;
 }
 
+
+

styles/sass/utils/_vars.scss

@@ -1,3 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
+
+$font-family: 'Open Sans', sans-serif;
+
 $color-black: #292929;
 
 $color-white: #fff;
@@ -7,6 +11,8 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
+$color-gray6: #929292;
+
 
 $color-blue: #4267b2;
 
@@ -29,3 +35,8 @@ $z-index: (
 	level4: 20,
 	level5: 25
 ) !default;
+
+//media-queries
+$mq-desktop: "(min-width: 1025px) and (max-width: 2499px)";
+$mq-tablet: "(min-width: 491px) and (max-width: 1024px)";
+$mq-mobile: "(min-width: 280px) and (max-width: 490px)";