feat(product/responsividade): Adiciona uma parte do css de produto e responsividade

This commit is contained in:
amanda almeida 2023-01-27 22:59:59 -03:00
parent 78fd45f39b
commit faeb5ed817
22 changed files with 729 additions and 76 deletions

3
react/Placeholder.tsx Normal file
View File

@ -0,0 +1,3 @@
import { Placeholder } from "./components/placeholder";
export default Placeholder;

View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {

View File

@ -0,0 +1,50 @@
[class*="html--product-main"] {
display: flex;
gap: 32px;
padding: 16px 40px 0;
}
[class*="html--stack-layout"],
[class*="html--right-col"] {
width: 48.824%;
}
[class*="html--right-col"] {
display: flex;
flex-direction: column;
}
[class*="html--container-quantity-button"] {
display: flex;
gap: 10px;
}
[class*="html--cart-button"] {
width: 78.94%;
height: 49px;
}
@media screen and (max-width: 1024px) {
[class*="html--product-main"] {
flex-direction: column;
}
[class*="html--stack-layout"],
[class*="html--right-col"] {
width: 100%;
}
[class*="html--cart-button"] {
width: 85.39%;
}
}
@media screen and (max-width: 375px) {
[class*="html--container-quantity-button"] {
flex-direction: column;
}
[class*="html--cart-button"] {
width: 100%;
height: 74px;
}
}

View File

@ -0,0 +1,8 @@
const Placeholder = () => {
const placeholderCep = ((document.getElementsByClassName(
"vtex-address-form-4-x-input"
)[0] as HTMLInputElement).placeholder = "Digite seu CEP");
return placeholderCep;
};
export { Placeholder };

View File

@ -7,5 +7,10 @@
"moduleResolution": "node",
"target": "es2017"
},
"include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
"include": [
"./typings/*.d.ts",
"./**/*.tsx",
"./**/*.ts",
"components/placeholder/index.jsx"
]
}

View File

@ -3,7 +3,7 @@
"props": {
"position": "bottom"
},
"children": ["flex-layout.row#buy-button"]
"children": ["html#buy-button"]
},
"product-assembly-options": {
"children": [
@ -32,17 +32,13 @@
"props": {
"verticalAlign": "middle"
},
"children": [
"assembly-option-item-quantity-selector"
]
"children": ["assembly-option-item-quantity-selector"]
},
"flex-layout.col#product-assembly-image": {
"props": {
"marginRight": 4
},
"children": [
"assembly-option-item-image"
]
"children": ["assembly-option-item-image"]
},
"flex-layout.col#product-assembly-middle": {
"props": {
@ -96,9 +92,7 @@
"horizontalAlign": "right",
"verticalAlign": "middle"
},
"children": [
"assembly-option-item-quantity-selector"
]
"children": ["assembly-option-item-quantity-selector"]
},
"assembly-option-item-customize#sec-level": {
"props": {

View File

@ -20,8 +20,22 @@
"props": {
"marginBottom": 7
},
"children": ["product-description"]
"children": ["html#product-image", "product-description"]
},
"html#product-image": {
"children": ["product-images#description"]
},
"product-images#description": {
"props": {
"blockClass": "product-images-description",
"thumbnailVisibility": "hidden",
"showNavigationArrows": false,
"showPaginationDots": false
}
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -29,20 +43,15 @@
"subject": "isProductAvailable"
}
],
"Then": "flex-layout.row#product-main",
"Else": "flex-layout.row#product-availability"
"Then": "html#product-main",
"Else": "html#product-availability"
}
},
"flex-layout.row#product-main": {
"html#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
"blockClass": "product-main"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
"children": ["html#stack", "html#right-col"]
},
"stack-layout": {
@ -65,14 +74,20 @@
}
},
"flex-layout.col#stack": {
"children": ["stack-layout"],
"html#stack": {
"props": {
"width": "49%",
"rowGap": 0
}
"blockClass": "stack-layout"
},
"children": ["stack-layout"]
},
"flex-layout.row#product-image": {
"children": ["html#product-images"]
},
"html#product-images": {
"props": {
"blockClass": "product-images",
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
@ -80,18 +95,15 @@
"thumbnailsOrientation": "horizontal",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"showNavigationArrows": false,
"showPaginationDots": false,
"displayThumbnailsArrows": true
"showPaginationDots": false
}
},
"flex-layout.col#right-col": {
"html#right-col": {
"props": {
"width": "49%",
"preventVerticalStretch": true,
"rowGap": 0
"blockClass": "right-col"
},
"children": [
"flex-layout.row#product-name",
@ -99,10 +111,9 @@
"product-rating-summary",
"product-selling-price",
"product-installments",
"sku-selector",
"product-assembly-options",
"html#sku-selector",
"product-gifts",
"flex-layout.row#buy-button",
"html#buy-button",
"availability-subscriber",
"shipping-simulator"
]
@ -115,6 +126,22 @@
"children": ["vtex.store-components:product-name"]
},
"product-installments": {
"props": {
"markers": ["discount"],
"blockClass": "custom-installments",
"message": "{installmentsNumber} x <discount>de</discount> {installmentValue} <discount>sem juros</discount>"
}
},
"html#sku-selector": {
"props": {
"blockClass": "sku-selector",
"testId": "sku-selector"
},
"children": ["sku-selector"]
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
@ -122,12 +149,28 @@
}
},
"flex-layout.row#buy-button": {
"html#buy-button": {
"props": {
"blockClass": "container-quantity-button"
},
"children": ["product-quantity", "add-to-cart-button"]
"children": ["html#product-quantity", "html#add-to-cart-button"]
},
"html#product-quantity": {
"props": {
"blockClass": "product-quantity",
"testId": "product-quantity"
},
"children": ["product-quantity"]
},
"html#add-to-cart-button": {
"props": {
"blockClass": "cart-button",
"testId": "add-to-cart-button"
},
"children": ["add-to-cart-button"]
},
"product-quantity": {
"props": {
"width": 128
@ -135,23 +178,21 @@
},
"add-to-cart-button": {
"props": {
"blockClass": "cardButton",
"blockClass": "add-to-cart-button",
"text": "ADICIONAR À SACOLA"
}
},
"flex-layout.row#product-availability": {
"html#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
},
"children": [
"flex-layout.col#stack",
"flex-layout.col#right-col-availability"
]
"children": ["html#stack", "html#right-col-availability"]
},
"flex-layout.col#right-col-availability": {
"html#right-col-availability": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0,

View File

@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
},
"placeholder": {
"component": "Placeholder"
}
}

View File

@ -0,0 +1,4 @@
@font-face {
font-family: "Open Sans", sans-serif;
src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
}

View File

@ -23,29 +23,29 @@
],
"customMedia": [
{
"s": 20
"s": "375px"
},
{
"ns": {
"value": 40,
"value": "1024px",
"minWidth": true
}
},
{
"m": {
"value": 40,
"value": "1024px",
"minWidth": true
}
},
{
"l": {
"value": 64,
"value": "1024px",
"minWidth": true
}
},
{
"xl": {
"value": 80,
"value": "2501px",
"minWidth": true
}
}
@ -80,7 +80,7 @@
"background": {
"base": "#ffffff",
"base--inverted": "#03044e",
"action-primary": "#0F3E99",
"action-primary": "#000000",
"action-secondary": "#eef3f7",
"emphasis": "#f71963",
"disabled": "#f2f4f5",
@ -97,7 +97,7 @@
"muted-5": "#f2f4f5"
},
"hover-background": {
"action-primary": "#072c75",
"action-primary": "#1f1f1f",
"action-secondary": "#dbe9fd",
"emphasis": "#dd1659",
"success": "#8bc34a",
@ -172,7 +172,7 @@
"warning--faded": "#fff6e0"
},
"border": {
"action-primary": "#0F3E99",
"action-primary": "#000000",
"action-secondary": "#eef3f7",
"emphasis": "#f71963",
"disabled": "#e3e4e6",
@ -189,7 +189,7 @@
"muted-5": "#f2f4f5"
},
"hover-border": {
"action-primary": "#072c75",
"action-primary": "#1f1f1f",
"action-secondary": "#dbe9fd",
"emphasis": "#dd1659",
"success": "#8bc34a",

View File

@ -0,0 +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 */
:global(.vtex-button) {
height: 100%;
border-radius: 0;
}
.buttonText--add-to-cart-button {
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
@media screen and (max-width: 375px) {
.buttonText--add-to-cart-button {
width: 168px;
}
}

View File

@ -1,5 +1,12 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/*
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;
align-items: center;
@ -10,6 +17,7 @@
content: "Home";
font-size: 14px;
}
.homeIcon,
.termArrow,
.term {

View File

@ -1,7 +1,12 @@
.product-identifier--productReference {
margin-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 */
.product-identifier {
display: flex;
align-items: center;
@ -9,10 +14,16 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
margin-bottom: 24px;
margin-bottom: 8px;
}
.product-identifier__label,
.product-identifier__separator {
font-size: 0;
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference {
justify-content: flex-start;
}
}

View File

@ -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 */
.sellingPriceValue .currencyContainer {
font-weight: 700;
font-size: 25px;
@ -16,12 +25,16 @@
font-weight: 700;
}
.installments {
font-weight: 400;
.installments--custom-installments {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
margin-bottom: 1rem;
margin-bottom: 8px;
}
.installments-discount--custom-installments {
font-weight: 300;
}
.interestRate {
@ -44,7 +57,6 @@
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;

View File

@ -1,3 +1,16 @@
/*
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 */
.quantitySelectorContainer {
margin: 0;
}
.quantitySelectorTitle {
font-size: 0;
margin: 0;
@ -19,6 +32,7 @@
text-align: center;
color: #929292;
height: 100%;
width: 76px;
}
:global(.vtex-numeric-stepper__minus-button),
@ -31,12 +45,15 @@
align-items: center;
color: #000000;
height: 100%;
width: 26px !important;
}
:global(.vtex-numeric-stepper__minus-button) {
border-width: 1px 0 1px 1px;
justify-content: flex-end;
}
:global(.vtex-numeric-stepper__plus-button) {
border-width: 1px 1px 1px 0;
justify-content: flex-start;
}

View File

@ -16,7 +16,7 @@
}
.container {
padding: 0 40px;
padding: 0;
}
.productNameContainer {
@ -38,8 +38,8 @@
margin-top: 16px;
}
.productImageTag {
max-height: 664px;
.productImageTag--main {
max-height: 664px !important;
}
.productImagesThumb {
@ -47,6 +47,23 @@
margin-right: 16px;
width: 90px !important;
height: 90px !important;
border-radius: 8px;
}
.figure--video {
width: 90px !important;
height: 90px !important;
border-radius: 8px;
}
.thumbImg--video {
height: 100%;
border-radius: 8px;
}
.productImagesThumbActive .carouselThumbBorder {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
border-radius: 8px;
}
.skuSelectorContainer {
@ -139,3 +156,98 @@
top: 1px;
transform: rotate(45deg);
}
.productDescriptionText .container {
padding: 0;
}
.shippingContainer {
display: flex;
margin-top: 16px;
position: relative;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
gap: 32px;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-input__suffix) {
display: none;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
padding-top: 24.5px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
width: 0;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
background-color: #000000;
border: 0;
position: absolute;
bottom: 32px;
left: 230px;
}
.shippingContainer :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #FFFFFF;
}
@media screen and (max-width: 1024px) {
.productImageTag--main {
max-height: 994px !important;
}
.productNameContainer {
text-align: start;
}
}
@media screen and (max-width: 375px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
flex-direction: column;
align-items: flex-end;
gap: 8px;
width: 100%;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 100%;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
}
.shippingContainer :global(.vtex-button) {
bottom: 56px;
left: 245px;
}
}

View File

@ -0,0 +1,21 @@
:global(.vtex-button) {
height: 100%;
border-radius: 0;
}
.buttonText--add-to-cart-button {
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
@media screen and (max-width: 375px) {
.buttonText--add-to-cart-button {
width: 168px;
}
}

View File

@ -0,0 +1,34 @@
.container {
display: flex;
align-items: center;
padding: 0 40px;
}
.homeLink::after {
content: "Home";
font-size: 14px;
}
.homeIcon,
.termArrow,
.term {
display: none;
}
.link--1 {
font-size: 0;
height: 23px;
}
.link--1::after {
content: "Sapatos";
font-size: 14px;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
:global(.vtex-breadcrumb-1-x-container) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
}

View File

@ -0,0 +1,21 @@
.product-identifier {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
margin-bottom: 8px;
}
.product-identifier__label,
.product-identifier__separator {
font-size: 0;
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference {
justify-content: flex-start;
}
}

View File

@ -0,0 +1,92 @@
.sellingPriceValue .currencyContainer {
font-weight: 700;
font-size: 25px;
line-height: 38px;
text-decoration: none;
color: #000000;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700;
}
.installments--custom-installments {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
margin-bottom: 8px;
}
.installments-discount--custom-installments {
font-weight: 300;
}
.interestRate {
font-weight: 400;
}
.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: 0.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;
}

View File

@ -0,0 +1,50 @@
.quantitySelectorContainer {
margin: 0;
}
.quantitySelectorTitle {
font-size: 0;
margin: 0;
}
.quantitySelectorStepper {
height: 49px;
}
:global(.vtex-numeric-stepper-container) {
height: 49px;
}
:global(.vtex-numeric-stepper__input) {
border: 1px solid #cccccc;
border-width: 1px 0;
font-size: 16px;
line-height: 22px;
text-align: center;
color: #929292;
height: 100%;
width: 76px;
}
:global(.vtex-numeric-stepper__minus-button),
:global(.vtex-numeric-stepper__plus-button) {
border: 1px solid #cccccc;
border-radius: 0;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
color: #000000;
height: 100%;
width: 26px !important;
}
:global(.vtex-numeric-stepper__minus-button) {
border-width: 1px 0 1px 1px;
justify-content: flex-end;
}
:global(.vtex-numeric-stepper__plus-button) {
border-width: 1px 1px 1px 0;
justify-content: flex-start;
}

View File

@ -7,7 +7,7 @@
}
.container {
padding: 0 40px;
padding: 0;
}
.productNameContainer {
@ -29,8 +29,8 @@
margin-top: 16px;
}
.productImageTag {
max-height: 664px;
.productImageTag--main {
max-height: 664px !important;
}
.productImagesThumb {
@ -38,6 +38,25 @@
margin-right: 16px;
width: 90px !important;
height: 90px !important;
border-radius: 8px;
}
.figure--video {
width: 90px !important;
height: 90px !important;
border-radius: 8px;
}
.thumbImg--video {
height: 100%;
border-radius: 8px;
}
.productImagesThumbActive {
.carouselThumbBorder {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33));
border-radius: 8px;
}
}
.skuSelectorContainer {
@ -142,3 +161,122 @@
top: 1px;
transform: rotate(45deg);
}
.productDescriptionText {
.container {
padding: 0;
}
}
.shippingContainer {
display: flex;
margin-top: 16px;
position: relative;
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
gap: 32px;
}
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
:global(.vtex-input__suffix) {
display: none;
}
:global(.vtex-input-prefix__group) {
width: 280px;
height: 49px;
border-radius: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
padding-top: 24.5px;
:last-child {
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000;
}
:global(.vtex__icon-external-link) {
width: 0;
}
}
:global(.vtex-button) {
width: 49px;
height: 49px;
background-color: #000000;
border: 0;
position: absolute;
bottom: 32px;
left: 230px;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "Ok";
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #FFFFFF;
}
}
}
@media screen and (max-width: 1024px) {
.productImageTag--main {
max-height: 994px !important;
}
.productNameContainer {
text-align: start;
}
}
@media screen and (max-width: 375px) {
.shippingContainer {
:global(.vtex-address-form__postalCode) {
flex-direction: column;
align-items: flex-end;
gap: 8px;
width: 100%;
}
:global(.vtex-input-prefix__group) {
width: 100%;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
}
:global(.vtex-button) {
bottom: 56px;
left: 245px;
}
}
}