From bc1d744b30272cacfd24630deeaf1379331df29b Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 8 Feb 2023 18:28:49 -0300 Subject: [PATCH] =?UTF-8?q?refactor:=20aplica=20mudan=C3=A7as=20no=20c?= =?UTF-8?q?=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 24 +++++++++++++++++ styles/css/vtex.breadcrumb.css | 8 ++++++ styles/css/vtex.store-components.css | 6 +++++ styles/css/vtex.store-footer.css | 23 ++++++++-------- styles/css/vtex.telemarketing.css | 12 +++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 8 ++++++ .../pages/product/vtex.store-components.scss | 27 ++++++++++++------- .../sass/pages/product/vtex.store-footer.scss | 3 +++ .../pages/product/vtex.telemarketing.scss | 3 +++ 9 files changed, 93 insertions(+), 21 deletions(-) create mode 100644 styles/css/vtex.telemarketing.css create mode 100644 styles/sass/pages/product/vtex.store-footer.scss create mode 100644 styles/sass/pages/product/vtex.telemarketing.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 7ddc590..253f204 100644 --- a/react/components/Html/styles.css +++ b/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; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 51d64b7..a563234 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/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; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 56fa195..59ac01a 100644 --- a/styles/css/vtex.store-components.css +++ b/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; diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..582b7af 100644 --- a/styles/css/vtex.store-footer.css +++ b/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; +} \ No newline at end of file diff --git a/styles/css/vtex.telemarketing.css b/styles/css/vtex.telemarketing.css new file mode 100644 index 0000000..a8a6b87 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index d9edce3..ab7aaf2 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -37,5 +37,13 @@ .link, .term { color: #929292; + + &:hover { + color: #808080; + } + + &:active { + color: #929292; + } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4771002..cd66f19 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/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; +} diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss new file mode 100644 index 0000000..9588ced --- /dev/null +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -0,0 +1,3 @@ +.footerLayout { + padding: 0 16px !important; +} diff --git a/styles/sass/pages/product/vtex.telemarketing.scss b/styles/sass/pages/product/vtex.telemarketing.scss new file mode 100644 index 0000000..d043b38 --- /dev/null +++ b/styles/sass/pages/product/vtex.telemarketing.scss @@ -0,0 +1,3 @@ +.telemarketingBar { + padding: 0 16px !important; +}