From 99e819ca378021a0b6ff4d7233f26e2a884f9508 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Fri, 10 Feb 2023 07:29:07 -0300 Subject: [PATCH 1/2] feat: alterado a adicionado o breadcrumb. --- styles/css/vtex-breadcrumb.css | 20 +++++++++++++ styles/css/vtex.breadcrumb.css | 54 ++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 styles/css/vtex-breadcrumb.css create mode 100644 styles/css/vtex.breadcrumb.css diff --git a/styles/css/vtex-breadcrumb.css b/styles/css/vtex-breadcrumb.css new file mode 100644 index 0000000..48182e0 --- /dev/null +++ b/styles/css/vtex-breadcrumb.css @@ -0,0 +1,20 @@ +/* +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 */ +:global(.vtex-breadcrumb-1-x-container) { + background-color: black; +} + +:global(.vtex-breadcrumb-1-x-container--m3-product-breadcrumb) { + color: red; +} + +.product-breadcrumb, .homeLink { + background-color: blue; +} \ 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..af2f42e --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,54 @@ +/* +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 */ +.container { + display: flex; +} + +.homeLink::after { + content: "Home"; +} + +.homeLink, +.link--1, +.link--2 { + text-transform: capitalize; + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #929292; +} +.homeLink::after, +.link--1::after, +.link--2::after { + text-transform: capitalize; + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #929292; + color: #929292; +} + +.homeIcon, +.term { + display: none; +} + +.link--1 { + font-size: 0; +} +.link--1::after { + content: "Sapatos"; +} + +.caretIcon:last-child { + display: none; +} \ No newline at end of file -- 2.34.1 From 3dcd589a1a4b677ddedcd51c82078d58abdab56a Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Fri, 10 Feb 2023 07:31:16 -0300 Subject: [PATCH 2/2] feat: componente alterado e adicionado o do figma. --- .vscode/schemas/html.json | 0 store/blocks/header/header.jsonc | 2 +- store/blocks/home/deals.json | 2 +- store/blocks/home/home.jsonc | 6 +- store/blocks/pdp/product.jsonc | 20 ++++ ...a.store-theme.css => vtex-flex-layout.css} | 8 +- styles/css/vtex.flex-layout.css | 107 ++---------------- styles/css/vtex.product-price.css | 101 +++++------------ styles/css/vtex.store-components.css | 11 ++ styles/css/vtex.store-header.css | 47 +++----- .../product/agenciamagma.store-theme.scss | 8 -- .../sass/pages/product/vtex.breadcrumb.scss | 49 ++++++++ .../sass/pages/product/vtex.flex-layout.scss | 5 + .../pages/product/vtex.product-price.scss | 35 ++++++ .../pages/product/vtex.store-components.scss | 18 ++- 15 files changed, 200 insertions(+), 219 deletions(-) delete mode 100644 .vscode/schemas/html.json rename styles/css/{agenciamagma.store-theme.css => vtex-flex-layout.css} (59%) delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/.vscode/schemas/html.json b/.vscode/schemas/html.json deleted file mode 100644 index e69de29..0000000 diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc index ab2c0c0..bc780c2 100644 --- a/store/blocks/header/header.jsonc +++ b/store/blocks/header/header.jsonc @@ -19,7 +19,7 @@ "fullWidth": true } }, - + "flex-layout.row#3-desktop": { "props": { "blockClass": "menu-link", diff --git a/store/blocks/home/deals.json b/store/blocks/home/deals.json index 2473f98..e49a955 100644 --- a/store/blocks/home/deals.json +++ b/store/blocks/home/deals.json @@ -1,7 +1,7 @@ { "flex-layout.row#deals": { "children": [ - "flex-layout.col#deals1", + "flex-layout.col#deals2", "flex-layout.col#deals3", "flex-layout.col#deals4" diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ebacd49 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", + "example-component", + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..bbdbf24 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,7 @@ "product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -18,20 +19,24 @@ }, "children": ["breadcrumb"] }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, + "rich-text#specifications": { "props": { "text": "##### Product Specifications" } }, + "flex-layout.row#description": { "props": { "marginBottom": 7 }, "children": ["product-description"] }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -43,6 +48,7 @@ "Else": "flex-layout.row#product-availability" } }, + "flex-layout.row#product-main": { "props": { "colGap": 7, @@ -82,9 +88,11 @@ "rowGap": 0 } }, + "flex-layout.row#product-image": { "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { @@ -94,11 +102,23 @@ "displayThumbnailsArrows": true } }, + + + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, "rowGap": 0 }, + + "product-installments": { + "props": { + "markers": ["discount"], + "message": "ou: {sellingPriceValue}x de {installmentValue}", + "blockClass": "teste" + } + }, + "children": [ "flex-layout.row#product-name", "product-rating-summary", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex-flex-layout.css similarity index 59% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex-flex-layout.css index 5e37ba5..7ce594b 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex-flex-layout.css @@ -7,10 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; +:global(.vtex-breadcrumb-1-x-link--m3-product-breadcrumb) { + background-color: black; } -.html--pdp-breadcrumb { - background-color: green; +.product-breadcrumb { + background-color: blue; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..34c4328 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,9 @@ -.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; -} +/* +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 */ \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..c429118 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,38 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; +/* +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 */ +.sellingPrice--m3-custom-selling-price { + font-size: 0; } - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; +.sellingPrice--m3-custom-selling-price .currencyContainer--m3-custom-selling-price { + font-family: Open Sans; + font-size: 25px; font-weight: 700; + line-height: 38px; + color: #000000; + margin-left: 0; } -.installments { - color: #727273; - margin-bottom: 1rem; +.installments--m3-custom-installments { + font-family: Open Sans; + font-size: 16px; + font-weight: 400; + line-height: 22px; } - -.savings { - font-weight: 500; - color: #79B03A; +.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36 { + font-size: 0; } - -.sellingPriceValue--summary { - font-size: 1.25rem; +.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::after { + content: "4 "; + font-size: 16px; 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; } +.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::before { + font-size: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..894f086 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,15 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.productBrand--quickview { + font-family: Open Sans; + font-size: 20px; + font-weight: 300; + line-height: 34px; + text-align: right; + color: #575757; + display: flex; + justify-content: end; } \ No newline at end of file diff --git a/styles/css/vtex.store-header.css b/styles/css/vtex.store-header.css index c240fd1..cdcb8f0 100644 --- a/styles/css/vtex.store-header.css +++ b/styles/css/vtex.store-header.css @@ -1,10 +1,7 @@ /* add transitions */ -:global(.vtex-sticky-layout-0-x-container) - :global(.vtex-store-components-3-x-logoLink), -:global(.vtex-sticky-layout-0-x-container) - :global(.vtex-minicart-2-x-openIconContainer), -:global(.vtex-sticky-layout-0-x-container) - :global(.vtex-store-components-3-x-searchBarContainer) { +:global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-logoLink), +:global(.vtex-sticky-layout-0-x-container) :global(.vtex-minicart-2-x-openIconContainer), +:global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-searchBarContainer) { transition: all 0.3s ease; display: block; } @@ -23,10 +20,8 @@ } /* add a box-shadow to desktop/mobile header when stuck */ -:global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header), -:global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { +:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header), +:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); } @@ -34,8 +29,7 @@ * remove the extra padding when stuck from the desktop header * we add a transition only when "stuck" for the "unstick" step seem faster */ -:global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header) { +:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header) { transition: padding 0.3s ease, background 0.3s ease; padding-top: 0; padding-bottom: 0; @@ -43,18 +37,15 @@ /* if supported add some translucency to the desktop/mobile header background */ @supports (backdrop-filter: blur(5px)) { - :global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header), - :global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { + + :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header), + :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { backdrop-filter: blur(8px); } /* header background when stuck and not hovered */ - :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header), - :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { + :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) :global(.vtex-flex-layout-0-x-flexRowContent--main-header), + :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { background: rgba(240, 240, 240, 0.8); } } @@ -65,20 +56,16 @@ } /* resize the logo for neat effect */ -:global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-store-components-3-x-logoLink) { +:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-store-components-3-x-logoLink) { transform: scale(0.85); } @media (prefers-reduced-motion: reduce) { - :global(.vtex-sticky-layout-0-x-container) - :global(.vtex-store-components-3-x-logoLink), - :global(.vtex-sticky-layout-0-x-container) - :global(.vtex-minicart-2-x-openIconContainer), - :global(.vtex-sticky-layout-0-x-container) - :global(.vtex-store-components-3-x-searchBarContainer), - :global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header) { + + :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-logoLink), + :global(.vtex-sticky-layout-0-x-container) :global(.vtex-minicart-2-x-openIconContainer), + :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-searchBarContainer), + :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header) { transition: none; } } 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.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..2996f2c --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,49 @@ +.container { + display: flex; +} + +.homeLink { + &::after { + content: "Home"; + } +} + +.homeLink, +.link--1, +.link--2 { + text-transform: capitalize; + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #929292; + + &::after { + text-transform: capitalize; + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + line-height: 19px; + color: #929292; + color: #929292; + } +} + +.homeIcon, +.term { + display: none; +} + +.link--1 { + font-size: 0; + + &::after { + content: "Sapatos"; + } +} + +.caretIcon { + &:last-child { + display: none; + } +} 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..154df8c --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,5 @@ + + +.flexRowContent--m3-product-details { + //background-color: blue; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..e2300b9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,35 @@ +.sellingPrice--m3-custom-selling-price { + font-size: 0; + + .currencyContainer--m3-custom-selling-price { + font-family: Open Sans; + font-size: 25px; + font-weight: 700; + line-height: 38px; + color: #000000; + margin-left: 0; + } +} + +.installments--m3-custom-installments { + font-family: Open Sans; + font-size: 16px; + font-weight: 400; + line-height: 22px; + + .installmentsNumber--m3-custom-installments--36 { + font-size: 0; + + &::after { + content: "4 "; + font-size: 16px; + font-weight: 600; + } + + &::before { + font-size: 0; + } + } +} + + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..c60ed72 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,15 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.productBrand--quickview { + font-family: Open Sans; + font-size: 20px; + font-weight: 300; + line-height: 34px; + text-align: right; + color: #575757; + display: flex; + justify-content: end; +} + -- 2.34.1