diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 00bae85..74f0e08 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -45,6 +45,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "product-main-container", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -103,12 +104,12 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..f9e0f4d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,12 @@ -.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 */ +.flexRow--product-main-container :global(.vtex-store-components-3-x-container) { + max-width: 1920px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..a5eceec 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,28 @@ +/* +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 */ .product-identifier--productReference { - margin-bottom: 1rem; + width: 100%; + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + text-align: right; + color: rgba(146, 146, 146, 0.48); } +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b096c3c..1d4640e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -15,4 +15,18 @@ height: auto !important; width: 90px !important; margin-right: 16px !important; +} + +.productNameContainer--quickview { + text-align: end; +} + +.product-identifier--productReference { + text-align: end; +} +.product-identifier--productReference__label { + display: none; +} +.product-identifier--productReference__separator { + display: none; } \ No newline at end of file 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..0ba3f49 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,5 @@ +.flexRow--product-main-container { + :global(.vtex-store-components-3-x-container) { + max-width: 1920px; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..fff3b4c --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,24 @@ +.product-identifier { + &--productReference { + width: 100%; + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* identical to box height */ + + text-align: right; + + color: rgba(146, 146, 146, 0.48); + } + &__label { + display: none; + } + + &__separator { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b2b99e5..27b4c2b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -6,3 +6,18 @@ width: 90px !important; margin-right: 16px !important; } + +.productNameContainer--quickview { + text-align: end; +} +.product-identifier--productReference { + text-align: end; + + &__label { + display: none; + } + + &__separator { + display: none; + } +}