diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7794ab6..a994556 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -79,7 +79,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -103,16 +103,17 @@ "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass": "product-skus" }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", + "product-identifier.product", + // "product-rating-summary", + // "flex-layout.row#list-price-savings", preço com promoção vindo vtex "flex-layout.row#selling-price", "product-installments", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", @@ -126,7 +127,8 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "product__name" }, "children": ["vtex.store-components:product-name"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 39d43cd..ea8d095 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -111,14 +111,24 @@ } } -.stretchChildrenWidth { - width: 50% !important; +.flexRowContent--product__image .stretchChildrenWidth:first-child { padding-right: 16px; margin-right: 16px; } @media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { - .stretchChildrenWidth { + .flexRowContent--product__image .stretchChildrenWidth { width: 100% !important; padding-right: 0; } +} + +.flexRow--product__name, .flexRowContent--product__name { + height: 34px; +} + +.flexRowContent--product__name .stretchChildrenWidth { + width: 100% !important; + height: 34px; + padding: 0 !important; + margin: 0 0 8px 0 !important; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..e217fcc 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,33 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: end; + margin-bottom: 24px; } +@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .product-identifier--productReference { + justify-content: flex-start; + padding-top: 8px; + } +} +.product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator { + display: none; +} +.product-identifier--productReference .product-identifier__value { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..e9bddff 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,18 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +/* Grid breakpoints */ .sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans", sans-serif; + font-style: normal; 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; -} + font-size: 25px; + line-height: 38px; + color: #000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 31b279f..cafb2ca 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -72,4 +72,24 @@ .carouselGaleryThumbs .productImagesThumb .figure, .carouselGaleryThumbs .productImagesThumb .thumbImg { width: 100%; height: 100%; +} + +.productNameContainer--quickview { + display: flex; + justify-content: end; + align-items: center; + font-family: "Open Sans", sans-serif; + padding: 0; + margin: 0 0 8px 0; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} +@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) { + .productNameContainer--quickview { + justify-content: flex-start; + margin-top: 32px; + } } \ 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 index 12eaff5..8069397 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -103,13 +103,28 @@ } } -.stretchChildrenWidth { - width: 50% !important; - padding-right: 16px; - margin-right: 16px; +.flexRowContent--product__image { + .stretchChildrenWidth { - @media #{$mq-tablet}, #{$mq-mobile}{ - width: 100% !important; - padding-right: 0; + &:first-child { + padding-right: 16px; + margin-right: 16px; + } + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100% !important; + padding-right: 0; + } } } + +.flexRow--product__name, .flexRowContent--product__name { + height: 34px; +} + +.flexRowContent--product__name .stretchChildrenWidth { + width: 100% !important; + height: 34px; + padding: 0 !important; + margin: 0 0 8px 0 !important; +} 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..fea1e30 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,27 @@ +.product-identifier--productReference { + display: flex; + align-items: center; + justify-content: end; + margin-bottom: 24px; + + @media #{$mq-tablet}, #{$mq-mobile} { + justify-content: flex-start; + padding-top: 8px; + } + + .product-identifier { + &__label, &__separator { + display: none; + } + + &__value { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black-tranparent; + } + } +} + 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..aaeffce --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,8 @@ +.sellingPriceValue{ + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black0; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c814f59..e7e4351 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,4 @@ + .container { padding:16px 360px; margin: 0; @@ -59,5 +60,24 @@ } } +.productNameContainer--quickview { + display: flex; + justify-content: end; + align-items: center; + font-family: $font-family; + padding: 0; + margin: 0 0 8px 0; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: $color-gray7; + + @media #{$mq-tablet}, #{$mq-mobile} { + justify-content: flex-start; + margin-top: 32px; + } +} + diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 92de514..dab1a14 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -2,7 +2,9 @@ $font-family: 'Open Sans', sans-serif; +$color-black0: #000; $color-black: #292929; +$color-black-tranparent: rgba(146, 146, 146, 0.48); $color-white: #fff; @@ -12,7 +14,7 @@ $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; $color-gray6: #929292; - +$color-gray7: #575757; $color-blue: #4267b2;