From 8ff887ce85672f2250cbdae71553997392357720 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sun, 29 Jan 2023 00:33:15 -0300 Subject: [PATCH] =?UTF-8?q?feat(slick):aplicando=20estiliza=C3=A7=C3=A3o?= =?UTF-8?q?=20no=20slick?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - react/components/Html/index.tsx | 2 +- react/components/Html/styles.css | 3 + store/blocks/pdp/product.jsonc | 3 +- store/blocks/product-price.jsonc | 4 +- styles/css/agenciamagma.store-theme.css | 16 --- styles/css/vtex.flex-layout.css | 27 +++- styles/css/vtex.product-price.css | 19 ++- styles/css/vtex.product-summary.css | 17 ++- styles/css/vtex.store-components.css | 1 - .../product/agenciamagma.store-theme.scss | 8 -- .../sass/pages/product/vtex.flex-layout.scss | 117 ++++++++++++++++++ .../pages/product/vtex.product-summary.scss | 49 ++++++++ .../pages/product/vtex.store-components.scss | 1 - styles/sass/pages/vtex.product-price.scss | 86 +++++++++++++ 15 files changed, 317 insertions(+), 37 deletions(-) create mode 100644 react/components/Html/styles.css delete mode 100644 styles/css/agenciamagma.store-theme.css delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/vtex.product-price.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..3511a1f 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; - +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..b88f85c --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ +[class*=container--m3-product-breadcrumb]{ + background: blue; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ee05501..dfe5938 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -92,7 +92,8 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": false + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..08068c5 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -20,8 +20,8 @@ "marginTop": 5 }, "children": [ - "product-list-price", - "product-price-savings" + "product-price-savings", + "product-list-price" ] } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css deleted file mode 100644 index 5e37ba5..0000000 --- a/styles/css/agenciamagma.store-theme.css +++ /dev/null @@ -1,16 +0,0 @@ -/* -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 */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..cf9fec8 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +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 */ .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +18,12 @@ padding: 0 1rem; } } - @media screen and (min-width: 80rem) { .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.25rem; } } - .flexRowContent--menu-link { background-color: #03044e; color: #fff; @@ -96,3 +103,19 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +:global(.vtex-shelf-1-x-slide) :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; +} +:global(.vtex-shelf-1-x-slide) :global(.vtex-product-price-1-x-savings) { + display: none; +} +:global(.vtex-shelf-1-x-slide) :global(.vtex-button) { + display: none; +} +:global(.vtex-shelf-1-x-slide) .flexCol--m3-shelf-badges { + display: none; +} +:global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings { + justify-content: center; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..65c01fc 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,6 +1,15 @@ +/* +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 */ .listPrice { color: #727273; - margin-bottom: .25rem; + margin-bottom: 0.25rem; font-size: 1rem; } @@ -35,7 +44,6 @@ border-radius: 1000px; align-items: center; display: flex; - padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; @@ -55,7 +63,7 @@ .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -77,3 +85,8 @@ color: #FFFFFF; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } + +:global(.vtex-shelf-1-x-slide) .listPrice { + text-align: center; + margin-bottom: 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..5caa7a5 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,3 +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 */ .skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { border-radius: 50%; } @@ -16,7 +25,6 @@ display: none; } } - .nameContainer { justify-content: start; padding-top: 1rem; @@ -40,3 +48,10 @@ .image { border-radius: 0.25rem; } + +.nameContainer { + padding-bottom: 0.5rem; +} +.nameContainer .productNameContainer { + text-align: center; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9142026..a2d8670 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -44,6 +44,5 @@ } .carouselGaleryThumbs { - background: pink; flex-direction: row; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..c460e83 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,117 @@ +.flexRowContent--menu-link, +.flexRowContent--main-header { + padding: 0 0.5rem; +} + +@media screen and (min-width: 40em) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 1rem; + } +} + +@media screen and (min-width: 80rem) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 0.25rem; + } +} + +.flexRowContent--menu-link { + background-color: #03044e; + color: #fff; +} + +.flexRowContent--main-header { + background-color: #f0f0f0; +} + +.flexRowContent--main-header-mobile { + align-items: center; + padding: 0.625rem 0.5rem; + background-color: #f0f0f0; +} + +.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { + color: #ffffff; + font-size: 14px; +} + +.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { + color: #727273; + font-size: 14px; +} + +.flexRow--deals { + background-color: #0F3E99; + padding: 14px 0px; +} + +.flexRow--deals .stretchChildrenWidth { + align-items: center; +} + +.flexRow--deals .flexCol { + align-items: center; + margin-bottom: 5px; + padding-top: 5px; +} + +.flexCol--filterCol { + max-width: 500px; + min-width: 230px; +} + +.flexCol--productCountCol { + align-items: flex-start; +} + +.flexCol--orderByCol { + align-items: flex-end; +} + +.flexCol--orderByMobileCol { + width: 42%; +} + +.flexCol--filterMobileCol { + width: 38%; +} + +.flexRow--quickviewMainRow { + display: flex; + max-height: 100%; +} + +.flexColChild--quickviewDetails:first-child { + overflow-y: auto; + height: 66% !important; + overflow-x: hidden; +} + +.flexColChild--quickviewDetails:last-child { + height: 34% !important; +} + +.flexRow--addToCartRow { + padding-bottom: 1rem; +} + +:global(.vtex-shelf-1-x-slide){ + :global(.vtex-store-components-3-x-discountInsideContainer){ + display: none; + } + :global(.vtex-product-price-1-x-savings){ + display: none; + } + :global(.vtex-button){ + display: none; + } + .flexCol--m3-shelf-badges{ + display: none; + } + .flexRowContent--m3-shelf-price-selling-savings{ + justify-content: center; + } +} + diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..5578ada --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,49 @@ +.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { + border-radius: 50%; +} + +.container :global(.vtex-modal-layout-0-x-triggerContainer) { + opacity: 0; + transition: opacity 200ms ease-in-out; +} + +.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { + opacity: 1; +} + +@media screen and (max-width: 40em) { + .container :global(.vtex-modal-layout-0-x-triggerContainer) { + display: none; + } +} + +.nameContainer { + justify-content: start; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.brandName { + font-weight: 600; + font-size: 18px; + color: #2E2E2E; +} + +.container { + text-align: start; +} + +.imageContainer { + text-align: center; +} + +.image { + border-radius: 0.25rem; +} +.nameContainer{ + padding-bottom: 0.5rem; + + .productNameContainer{ + text-align: center; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 50dcab8..4386c44 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -49,6 +49,5 @@ } .carouselGaleryThumbs{ - background: pink; flex-direction: row; } diff --git a/styles/sass/pages/vtex.product-price.scss b/styles/sass/pages/vtex.product-price.scss new file mode 100644 index 0000000..d12de58 --- /dev/null +++ b/styles/sass/pages/vtex.product-price.scss @@ -0,0 +1,86 @@ +.listPrice { + color: #727273; + margin-bottom: .25rem; + font-size: 1rem; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #727273; + margin-bottom: 1rem; +} + +.savings { + font-weight: 500; + color: #79B03A; +} + +.sellingPriceValue--summary { + font-size: 1.25rem; + font-weight: 600; + color: #2E2E2E; +} + +.savings--summary { + background: #8BC34A; + border-radius: 1000px; + align-items: center; + display: flex; + + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #FFFFFF; +} + +.savings-discount--summary { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #FFFFFF; + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.listPrice--summary { + margin-bottom: 0.25rem; + font-size: .875rem; +} + +.installments--summary { + margin-bottom: 2rem; + font-size: 0.875rem; +} + +.savings--summaryPercentage { + background: #0f3e99; + border-radius: 1000px; + align-items: center; + display: flex; +} + +.savingsPercentage--summaryPercentage { + font-size: 0.875rem; + font-weight: 600; + vertical-align: baseline; + color: #FFFFFF; + padding: 0.25rem 0.5rem 0.25rem 0.5rem; +} + +:global(.vtex-shelf-1-x-slide){ + .listPrice{ + text-align: center; + margin-bottom: 16px; + } +}