diff --git a/react/components/PaymentPix/styles.css b/react/components/PaymentPix/styles.css index 23a2810..20ec1da 100644 --- a/react/components/PaymentPix/styles.css +++ b/react/components/PaymentPix/styles.css @@ -16,7 +16,6 @@ .paymentPixText { display: flex; flex-direction: column; - align-items: center; } .paymentPixValue { margin: 0; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f73fc24..b41d781 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,9 +2,7 @@ "store.product": { "children": [ "html#breadcrumb", - "condition-layout.product#availability", - "flex-layout.row#description", "flex-layout.row#specifications-title", "tab-layout#product", @@ -123,17 +121,22 @@ "flex-layout.row#selling-price", "product-installments", "product-paymentPix-component", - "product-separator", "sku-selector", - "product-quantity", + + "flex-layout.row#cart", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "availability-subscriber", "shipping-simulator" ] }, - + "flex-layout.row#cart": { + "props": { + "blockClass": "cart" + }, + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -150,9 +153,10 @@ "flex-layout.row#buy-button": { "props": { - "marginTop": 4, - "marginBottom": 7 + "width": "80%", + "blockClass": "buyButton" }, + "children": ["add-to-cart-button"] }, diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..f5ba8ae --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,10 @@ +/* +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;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..5eb3ef6 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,13 @@ +/* +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;500;600;700&display=swap"); +/* Grid breakpoints */ +.input::placeholder { + content: "Digite seu CEP"; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f5ba8ae..c807690 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,4 +8,25 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) { + background-color: black; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) { + font-size: 0; +} +.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after { + content: "adicionar à sacola"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..128134d 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,32 @@ +/* +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;500;600;700&display=swap"); +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: flex-end; + margin-top: 8px; } + +.product-identifier__label { + display: none; +} + +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + font-family: "Open Sans"; + 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-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..b5b35cc --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,30 @@ +/* +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;500;600;700&display=swap"); +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0d9af06..17fb098 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -24,4 +24,137 @@ .productImagesThumb { height: auto !important; +} + +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 21px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "Ok"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; +} + +.shippingContainer :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; +} +.shippingContainer :global(.vtex-button) { + position: relative; + right: 127px; + top: 27px; + width: 49px; + height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss new file mode 100644 index 0000000..026dcd8 --- /dev/null +++ b/styles/sass/pages/product/vtex.address-form.scss @@ -0,0 +1,5 @@ +.input { + &::placeholder { + content: "Digite seu CEP"; + } +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e69de29..4108e84 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,23 @@ +.flexRowContent--cart { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 25px; + .flexRow--buyButton { + :global(.vtex-button) { + background-color: black; + } + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "adicionar à sacola"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } + } + } +} 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..fec8794 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier--productReference { + display: flex; + justify-content: flex-end; + margin-top: 8px; +} +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; +} +.product-identifier__value { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..3b9d284 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,20 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper { + background-color: white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: white; +} + +.quantitySelectorStepper { + border: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5d9d0aa..cd73e7c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -15,3 +15,147 @@ .productImagesThumb { height: auto !important; } +.productBrand { + display: flex; + justify-content: flex-end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; + } + + .skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTRAS CORES"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + border-radius: 30px; + } + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + border-radius: 21px; + } + .skuSelectorSelectorImageValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0; + &::after { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + .frameAround { + width: 40px; + height: 40px; + top: 0; + left: 0; + right: 0; + border-radius: 30px; + } + + .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 30px; + padding: 0; + margin: auto; + } + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + } + } +} + +.shippingContainer { + :global(.vtex-button) { + width: 49px; + height: 49px; + background-color: black; + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "Ok"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; + } + } + } +} + +.shippingContainer { + :global(.vtex-input) { + :global(.vtex-input__label) { + font-size: 0; + &::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } +} +.shippingContainer { + display: flex; + :global(.vtex-input-prefix__group) { + height: 49px; + } + + :global(.vtex-button) { + position: relative; + right: 127px; + top: 27px; + width: 49px; + height: 49px; + } + :global(.vtex-address-form__postalCode) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + :global(.vtex-address-form__postalCode-forgottenURL) { + position: relative; + left: 70px; + top: 8px; + } +}