refactor: aplica mudanças no código

react/components/Html/styles.css

@@ -61,6 +61,12 @@
   padding-bottom: 12px;
   display: block !important;
 }
+[class*="html--add-to-cart-button"] button:hover {
+  filter: opacity(88%);
+}
+[class*="html--add-to-cart-button"] button:active {
+  filter: opacity(100%);
+}
 
 @media screen and (max-width: 768px) {
   [class*="html--add-to-cart-button"] button {
@@ -106,6 +112,12 @@
 
   display: block !important;
 }
+[class*="html--product-quantity-cart-button"] button:hover {
+  color: #929292;
+}
+[class*="html--product-quantity-cart-button"] button:active {
+  color: #000000;
+}
 
 @media screen and (max-width: 768px) {
   [class*="html--shipping-simulator"] {
@@ -123,6 +135,12 @@
   position: absolute;
   display: block !important;
 }
+[class*="html--shipping-simulator"] button:hover {
+  filter: opacity(88%);
+}
+[class*="html--shipping-simulator"] button:active {
+  filter: opacity(100%);
+}
 
 @media screen and (min-width: 769px) {
   [class*="html--shipping-simulator"] button {
@@ -139,6 +157,12 @@
 [class*="html--shipping-simulator"] a {
   color: #000000;
 }
+[class*="html--shipping-simulator"] a:hover {
+  color: #929292;
+}
+[class*="html--shipping-simulator"] a:active {
+  color: #000000;
+}
 
 [class*="html--shipping-simulator"] svg {
   display: none;

styles/css/vtex.breadcrumb.css

@@ -46,4 +46,12 @@
 .container .link,
 .container .term {
   color: #929292;
+}
+.container .link:hover,
+.container .term:hover {
+  color: #808080;
+}
+.container .link:active,
+.container .term:active {
+  color: #929292;
 }

styles/css/vtex.store-components.css

@@ -97,6 +97,9 @@
   border: 1px solid #989898;
   position: relative;
 }
+.skuSelectorInternalBox:hover {
+  border: 1.5px solid #949494;
+}
 
 .skuSelectorItemImage :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
   width: 100%;
@@ -123,6 +126,9 @@
   color: rgba(185, 185, 185, 0.6);
   width: 20px;
 }
+.skuSelectorItemTextValue:hover {
+  color: #949494;
+}
 
 .skuSelectorItemImage {
   display: flex;

styles/css/vtex.store-footer.css

@@ -1,11 +1,12 @@
-.row--menu-row {
-  padding-right: 24px;
-}
-
-.row--menu-row .rowContainer {
-  align-items: flex-start;
-}
-
-.row--payment-methods {
-  padding-top: 16px;
-}
+/*
+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 */
+.footerLayout {
+  padding: 0 16px !important;
+}

styles/css/vtex.telemarketing.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.telemarketingBar {
+  padding: 0 16px !important;
+}

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

@@ -37,5 +37,13 @@
   .link,
   .term {
     color: #929292;
+
+    &:hover {
+      color: #808080;
+    }
+
+    &:active {
+      color: #929292;
+    }
   }
 }

styles/sass/pages/product/vtex.store-components.scss

@@ -85,6 +85,10 @@
   border-radius: 50%;
   border: 1px solid #989898;
   position: relative;
+
+  &:hover {
+    border: 1.5px solid #949494;
+  }
 }
 
 .skuSelectorItemImage {
@@ -113,6 +117,10 @@
   align-items: center;
   color: rgba(185, 185, 185, 0.6);
   width: 20px;
+
+  &:hover {
+    color: #949494;
+  }
 }
 
 .skuSelectorItemImage {
@@ -498,14 +506,13 @@
   }
 }
 
+.listContainer--list-product {
+  display: flex;
+  justify-content: space-between;
+}
 
-  .listContainer--list-product {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .productImageTag--image-description--main {
-    width: 100% !important;
-    margin: 0;
-    display: inline-block;
-  }
+.productImageTag--image-description--main {
+  width: 100% !important;
+   margin: 0;
+  display: inline-block;
+}

styles/sass/pages/product/vtex.store-footer.scss

@@ -0,0 +1,3 @@
+.footerLayout {
+  padding: 0 16px !important;
+}

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

@@ -0,0 +1,3 @@
+.telemarketingBar {
+  padding: 0 16px !important;
+}