From 5afc2e1518e93c3e2415d5e072bb2765a78ebbe5 Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Tue, 7 Feb 2023 06:38:15 -0300
Subject: [PATCH] refactor: ajusta css breadcrumb 1440px e 1024px

---
 react/components/Html/styles.css                    |  5 ++++-
 styles/css/vtex.add-to-cart-button.css              | 13 +++++++++++++
 styles/css/vtex.breadcrumb.css                      |  9 +++++++--
 styles/css/vtex.rich-text.css                       |  5 +++++
 styles/css/vtex.store-components.css                |  4 ++++
 .../sass/pages/product/vtex.add-to-cart-button.scss |  3 +++
 styles/sass/pages/product/vtex.breadcrumb.scss      | 10 ++++++++--
 styles/sass/pages/product/vtex.rich-text.scss       |  6 ++++++
 .../sass/pages/product/vtex.store-components.scss   |  4 ++++
 9 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 styles/css/vtex.add-to-cart-button.css
 create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 7c209b0..5058598 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,7 +1,6 @@
 [class*="html--pdp-breadcrumb"] {
   display: flex;
   justify-content: center;
-  padding: 0 40px;
 }
 
 [class*="html--selling-price"] {
@@ -63,6 +62,10 @@
 }
 
 @media (max-width: 1024px) {
+  [class*="html--pdp-breadcrumb"] {
+    padding: 0 40px;
+  }
+
   [class*="html--product-quantity"] {
     width: 149.91px;
   }
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
new file mode 100644
index 0000000..76c6d86
--- /dev/null
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -0,0 +1,13 @@
+/*
+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;500;600;700&display=swap%27");
+/* Grid breakpoints */
+.buttonText--addToCart {
+  font-size: 18px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 4494087..47e2ac2 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -10,8 +10,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
 /* Grid breakpoints */
 .container {
-  width: 100%;
-  max-width: 1920px;
+  width: 94.445%;
 }
 
 .termArrow,
@@ -32,6 +31,7 @@
   font-size: 16px;
   position: absolute;
   top: 17%;
+  left: 0;
 }
 
 .link--1 {
@@ -58,4 +58,9 @@
   .container {
     max-width: 1840px;
   }
+}
+@media (max-width: 1024px) {
+  .container {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 59cea53..d1471d8 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -19,4 +19,9 @@
   .heading-level-1 {
     margin-top: 16px;
   }
+}
+@media (max-width: 767px) {
+  .heading-level-1 {
+    font-size: 20px;
+  }
 }
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index d540bc9..f54d46b 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -161,6 +161,10 @@
   height: 49px;
 }
 
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  padding-bottom: 7px;
+}
+
 .shippingContainer :global(.vtex-button) {
   width: 49px;
   height: 49px;
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
new file mode 100644
index 0000000..2ef776a
--- /dev/null
+++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss
@@ -0,0 +1,3 @@
+.buttonText--addToCart {
+  font-size: 18px;
+}
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 98f2ef1..d3646c5 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,6 +1,5 @@
 .container {
-  width: 100%;
-  max-width: 1920px;
+  width: 94.445%;
 }
 
 .termArrow,
@@ -21,6 +20,7 @@
   font-size: 16px;
   position: absolute;
   top: 17%;
+  left: 0;
 }
 
 .link--1 {
@@ -48,3 +48,9 @@
     max-width: 1840px;
   }
 }
+
+@media (max-width: 1024px) {
+  .container {
+    width: 100%;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e4dff0f..57b4ab1 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -10,3 +10,9 @@
     margin-top: 16px;
   }
 }
+
+@media (max-width: 767px) {
+  .heading-level-1 {
+    font-size: 20px;
+  }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 2d07908..46ab6ce 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -160,6 +160,10 @@
   height: 49px;
 }
 
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+  padding-bottom: 7px;
+}
+
 .shippingContainer :global(.vtex-button) {
   width: 49px;
   height: 49px;