From 1b3894f66f69e652bdebb0c53fb30e237e91b64f Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Sat, 21 Jan 2023 14:23:05 -0300
Subject: [PATCH] feat(product): adicionando estilo no bradcrumb

product
---
 styles/css/agenciamagma.store-theme.css       |  3 +-
 styles/css/vtex.breadcrumb.css                | 41 +++++++++++++++++++
 styles/css/vtex.rich-text.css                 |  1 +
 styles/css/vtex.store-components.css          |  1 +
 .../product/BreadCrumb/vtex.breadcrumb.scss   | 35 ++++++++++++++++
 .../product/agenciamagma.store-theme.scss     |  4 +-
 styles/sass/utils/_vars.scss                  | 11 +++++
 7 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 styles/css/vtex.breadcrumb.css
 create mode 100644 styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss

diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 5e37ba5..8462e1a 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
new file mode 100644
index 0000000..adaa4ea
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..ec68700 100644
--- a/styles/css/vtex.rich-text.css
+++ b/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 */
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..cdd69e5 100644
--- a/styles/css/vtex.store-components.css
+++ b/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;
diff --git a/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss b/styles/sass/pages/product/BreadCrumb/vtex.breadcrumb.scss
new file mode 100644
index 0000000..d4535b3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index ea7d5b9..463614b 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -3,6 +3,8 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: transparent;
 }
 
+
+
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index daf3adb..92de514 100644
--- a/styles/sass/utils/_vars.scss
+++ b/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)";