diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index c5c13ca..a19bc6a 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -8,3 +8,13 @@ display: block; } } + +[class*="html--image-description"] { + margin-right: 16px; + width: 100%; +} + +[class*="html--container-description"] { + margin: 32px 32px 16px 32px; +} + diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 2caab25..fe68660 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,26 +3,14 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "list-context.product-list#prateleira", - //"shelf.relatedProducts", - "product-questions-and-answers" + "tab-layout#description", + "list-context.product-list#prateleira" ] }, - "product-summary.shelf#prateleira": { - "children": [ - "stack-layout#prodsum", - "product-summary-name", - "product-installments", - "product-selling-price" - ] - }, - "list-context.product-list#prateleira": { - "blocks": ["product-summary.shelf#prateleira"], - "children": ["slider-layout#demo-products"] - }, - +/* + BREADCRUMB +*/ "html#breadcrumb": { "props": { "tag": "section", @@ -32,12 +20,150 @@ "children": ["breadcrumb"] }, - "flex-layout.row#description": { +/* + DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#description) +*/ +"html#container-description": { + "props": { + "tag": "div", + "blockClass": "container-description" + }, + "children": ["flex-layout.row#product-description"] +}, + + "flex-layout.row#product-description": { + "children": ["html#image-description", "flex-layout.row#description"] + }, + + "html#image-description":{ "props": { - "marginBottom": 7 + "tag": "div", + "testId": "product-images", + "blockClass": "image-description" }, + "children": ["image#product"] + }, + + "image#product": { + "props": { + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + } + }, + + "flex-layout.row#description": { "children": ["product-description"] }, + + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "descricao1" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#descricao1", + "tab-list.item#descricao2", + "tab-list.item#descricao3", + "tab-list.item#descricao4", + "tab-list.item#descricao5" + ] + }, + + "tab-list.item#descricao1": { + "props": { + "tabId": "descricao1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#descricao2": { + "props": { + "tabId": "descricao2", + "label": "Descrição" + } + }, + + "tab-list.item#descricao3": { + "props": { + "tabId": "descricao3", + "label": "Descrição" + } + }, + + "tab-list.item#descricao4": { + "props": { + "tabId": "descricao4", + "label": "Descrição" + } + }, + + "tab-list.item#descricao5": { + "props": { + "tabId": "descricao5", + "label": "Descrição" + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#descricao1", + "tab-content.item#descricao2", + "tab-content.item#descricao3", + "tab-content.item#descricao4", + "tab-content.item#descricao5" + ] + }, + + "tab-content.item#descricao1": { + "children": ["html#container-description"], + "props": { "tabId": "descricao1" } + }, + + "tab-content.item#descricao2": { + "children": ["html#container-description"], + "props": { "tabId": "descricao2" } + }, + + "tab-content.item#descricao3": { + "children": ["html#container-description"], + "props": { "tabId": "descricao3" } + }, + + "tab-content.item#descricao4": { + "children": ["html#container-description"], + "props": { "tabId": "descricao4" } + }, + + "tab-content.item#descricao5": { + "children": ["html#container-description"], + "props": { "tabId": "descricao5" } + }, + +/* + PRATELEIRA DE PRODUTOS QUE QUE O CLIENTE PODE GOSTAR +*/ + "list-context.product-list#prateleira": { + "blocks": ["product-summary.shelf#prateleira"], + "children": ["slider-layout#demo-products"] +}, + +"product-summary.shelf#prateleira": { + "children": [ + "stack-layout#prodsum", + "product-summary-name", + "product-list-price", + "product-selling-price" + ] +}, + +/* + IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO +*/ "condition-layout.product#availability": { "props": { "blockClass": "availability", @@ -52,6 +178,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass":"main", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -85,6 +212,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { + "blockClass": "stack", "width": "50%", "rowGap": 0 } @@ -104,6 +232,10 @@ "displayThumbnailsArrows": true } }, + + /* + INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..) + */ "flex-layout.col#right-col": { "props": { "blockClass": "right-col", @@ -113,13 +245,10 @@ "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-installments#parcelaProduct", "availability-subscriber", "sku-selector", - "product-gifts", "html#buy-button", "shipping-simulator" ] @@ -132,11 +261,19 @@ "children": ["vtex.store-components:product-name"] }, + "product-installments#parcelaProduct": { + "props": { + "markers": ["discount", "x"], + "blockClass": "divider", + "message": "{installmentsNumber} x de {installmentValue} sem juros" + } + }, + "sku-selector": { "props": { "blockClass": "sku-selector", - "imageHeight": 48, - "imageWidth": 48, + "imageHeight": 40, + "imageWidth": 40, "variationsSpacing": 3, "showValueNameForImageVariation": true } @@ -146,9 +283,7 @@ "props": { "tag": "div", "testId": "buy-button", - "blockClass": "buy-button", - "marginTop": 4, - "marginBottom": 7 + "blockClass": "buy-button" }, "children": ["product-quantity","add-to-cart-button"] }, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 47a79e9..9927dfc 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -10,20 +10,5 @@ "children": [ "product-selling-price" ] - }, - - "flex-layout.row#list-price-savings": { - "props": { - "blockClass": "list-price-savings", - "colGap": 2, - "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 2, - "marginTop": 5 - } - // "children": [ - // "product-list-price", - // "product-price-savings" - // ] } } diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..31b414c 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -7,8 +7,7 @@ "product-summary-space", "product-list-price#summary", "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "product-installments#summary" ] }, "flex-layout.col#productRating": { diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..ae9aa5d 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -36,7 +36,7 @@ }, "flex-layout.col#quickviewPrice": { "children": [ - "flex-layout.row#list-price-savings", + "flex-layout.row#selling-price", "product-installments" ] diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5a011b9..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,7 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.b--action-primary { - border-color: black; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 39d6339..5c4d12b 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,17 +8,34 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.flexRowContent { - padding: 0; - margin: 0; - width: 100%; +/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ +@media only screen and (max-width: 1023px) { + .flexRowContent--main { + display: block; + } } -.flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings { - display: none; +.flexRowContent--main .flexCol--stack { + padding-left: 40px; +} +@media only screen and (max-width: 1023px) { + .flexRowContent--main .flexCol--stack { + padding: 0 40px; + width: 100%; + } +} +.flexRowContent--main .flexCol--right-col { + padding-right: 40px; + margin-left: 16px; +} +@media only screen and (max-width: 1023px) { + .flexRowContent--main .flexCol--right-col { + padding: 0 40px; + margin-left: 0; + } } +/* ASSINANTE DE PRODUTO INDISPONIVEL */ .flexRowContent--message-availability { - margin-top: 24px; width: 375px; } @media only screen and (max-width: 1023px) { @@ -27,20 +44,19 @@ } } -.sellingPriceValue { - font-size: 50px; -} - +/* BOTAO DE ADICIONAR A SACOLA */ .flexRowContent { padding: 0; - margin-top: 0; + margin: 0; } .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { padding: 0; display: flex; } -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth):nth-child(even) { - width: 100% !important; +@media only screen and (max-width: 1023px) { + .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + } } .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { background-color: black; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index f6f1f04..d074a22 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +/* REFERENCIA DO PRODUTO */ .product-identifier--productReference { display: flex; justify-content: end; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 5369bca..5dc687b 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +/* VALOR PRINCIPAL DO PRODUTO */ .sellingPrice--hasListPrice { font-weight: 700; font-size: 25px; @@ -14,35 +16,48 @@ color: #000000; } -.installments { - display: flex; - font-size: 0; - color: #929292; +/* VALORES DE PARCELAMENTOS E JUROS */ +.installments--divider { margin-bottom: 8px; } -.installments .installmentsNumber { +.installments--divider .installmentsNumber { font-weight: 700; font-size: 16px; line-height: 22px; + color: #929292; } -.installments .installmentsNumber::after { - content: "x "; -} -.installments .installmentValue { +.installments--divider .installments-x--divider { font-weight: 700; font-size: 16px; line-height: 22px; + color: #929292; } -.installments .installmentValue::before { +.installments--divider .installmentValue--divider { + margin-bottom: 8px; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments--divider .installments-discount--divider { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */ +.listPrice { + font-family: "Opens Sans", sans-serif; + line-height: 19px; + color: #bababa; + font-size: 14px; +} +.listPrice .listPriceValue::before { content: "de "; - margin-left: 5px; - font-weight: 400; - font-size: 16px; - line-height: 22px; + font-size: 14px; } -.installments .installmentValue::after { - content: " sem juros"; - font-weight: 400; - font-size: 16px; - line-height: 22px; +.listPrice .listPriceValue::after { + content: " por"; + font-size: 14px; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 4d473d3..00b2514 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +/* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; margin-top: 8px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 258140a..066c8fa 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,17 +9,40 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - margin: 0; - padding: 0 40px; + padding: 0; max-width: 100%; - /* TITULO (NOME DO PRODUTO PRINCIPAL)*/ - /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ - /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ - /*PRODUTO INDISPONIVEL, TEXTOS */ - /* BUSCA DE CEP */ - /* TRANSPORTADORAS */ } -.container .productNameContainer--quickview { + +/*IMAGEM PRINCIPAL DO PRODUTO */ +.productImage { + margin-right: 16px; +} +.productImage .productImageTag { + width: 100%; + max-height: 100% !important; + object-fit: contain; +} + +/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ +.carouselGaleryThumbs { + margin: 16px 0; +} +.carouselGaleryThumbs .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; +} +.carouselGaleryThumbs .productImagesThumb { + margin: 0 16px 0 0; + height: 100% !important; + width: 90px !important; +} +.carouselGaleryThumbs .productImagesThumbCaret { + display: none; +} + +/* TITULO (NOME DO PRODUTO PRINCIPAL)*/ +.productNameContainer--quickview { text-align: end; font-weight: 300; font-size: 20px; @@ -27,21 +50,23 @@ color: #575757; } @media only screen and (max-width: 1023px) { - .container .productNameContainer--quickview { + .productNameContainer--quickview { text-align: start; } } -.container .skuSelectorContainer { + +/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ +.skuSelectorContainer { display: flex; flex-direction: column-reverse; } -.container .skuSelectorContainer .skuSelectorName { +.skuSelectorContainer .skuSelectorName { font-size: 0; } -.container .skuSelectorContainer .skuSelectorNameSeparator { +.skuSelectorContainer .skuSelectorNameSeparator { font-size: 0; } -.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before { +.skuSelectorContainer .skuSelectorSubcontainer--cor::before { content: "OUTRAS CORES:"; font-family: "Open Sans", sans-serif; font-weight: 400; @@ -49,7 +74,7 @@ font-size: 14px; color: #929292; } -.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { +.skuSelectorContainer .skuSelectorSubcontainer--tamanho::before { content: "OUTROS TAMANHOS:"; font-family: "Open Sans", sans-serif; font-weight: 400; @@ -57,119 +82,107 @@ font-size: 14px; color: #929292; } -.container .skuSelectorContainer .skuSelectorTextContainer { +.skuSelectorContainer .skuSelectorTextContainer { display: none; } -.container .skuSelectorContainer .skuSelectorOptionsList { +.skuSelectorContainer .skuSelectorOptionsList { margin-top: 8px; margin-left: 0; } -.container .skuSelectorContainer .skuSelectorSelectorImageValue { +.skuSelectorContainer .skuSelectorSelectorImageValue { font-size: 0; } -.container .skuSelectorOptionsList .skuSelectorItem { + +/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ +.skuSelectorOptionsList .skuSelectorItem { width: 40px; height: 40px; } -.container .skuSelectorOptionsList .skuSelectorItem:first-child { +.skuSelectorOptionsList .skuSelectorItem:first-child { margin-left: 0; } -.container .skuSelectorOptionsList .skuSelectorItem .frameAround { +.skuSelectorOptionsList .skuSelectorItem .frameAround { border-radius: 50%; border-color: #000000; color: #000000; } -.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue { +.skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue { max-width: 100%; display: flex; justify-content: center; color: #000000; } -.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { +.skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { border-radius: 50%; } -.container .skuSelectorOptionsList .diagonalCross { +.skuSelectorOptionsList .diagonalCross { margin: 5px; background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%); transform: rotate(90deg); } -.container .carouselGaleryThumbs { - margin: 16px 0; -} -.container .carouselGaleryThumbs .thumbImg { - width: 90px; - height: 90px; - border-radius: 8px; -} -.container .carouselGaleryThumbs .productImagesThumb { - margin-right: 16px; - height: 100% !important; - width: 90px !important; -} -.container .carouselGaleryThumbs .productImagesThumbCaret { - display: none; -} -.container .subscriberContainer { + +/*PRODUTO INDISPONIVEL && +FORMULARIO DE PRODUTO INDISPONIVEL */ +.subscriberContainer { width: 100%; margin-top: 24px; - /* FORMULARIO DE PRODUTO INDISPONIVEL */ } -.container .subscriberContainer .title { +.subscriberContainer .title { font-size: 0; margin-bottom: 0; } -.container .subscriberContainer .title::before { +.subscriberContainer .title::before { content: "Produto indisponível"; font-weight: 700; font-size: 14px; line-height: 19px; color: #868686; } -.container .subscriberContainer .subscribeLabel { +.subscriberContainer .subscribeLabel { font-size: 0; } -.container .subscriberContainer .subscribeLabel::before { +.subscriberContainer .subscribeLabel::before { content: "Deseja saber quando estiver disponível?"; font-weight: 400; font-size: 14px; line-height: 19px; color: #868686; } -.container .subscriberContainer .form { +.subscriberContainer .form { position: relative; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) { - width: 374.65px; +.subscriberContainer .form :global(.vtex-store-components-3-x-content) { display: block; + width: 374.65px; margin-top: 16px; } @media only screen and (max-width: 1023px) { - .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) { + .subscriberContainer .form :global(.vtex-store-components-3-x-content) { width: 100%; max-width: 100%; } } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { width: 182.46px; margin-right: 10.08px; margin-bottom: 15px; } @media only screen and (max-width: 1023px) { - .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { + .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { width: 49%; } } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) { border: 0.6px solid #929292; border-radius: 0; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) { padding: 0 14px; font-size: 12px; line-height: 28px; color: #929292; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { position: absolute; left: 51%; top: 0%; @@ -179,27 +192,27 @@ margin-bottom: 15px; } @media only screen and (max-width: 1023px) { - .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { + .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { width: -webkit-fill-available; margin: 0 0 0 8px; left: 49%; } } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) { border: 0.6px solid #929292; border-radius: 0; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { padding: 0 14px; font-size: 12px; line-height: 28px; color: #929292; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit { width: 100%; margin-bottom: 16px; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) { width: 100%; height: 49px; background-color: #000000; @@ -210,7 +223,7 @@ align-items: center; justify-content: center; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before { content: "AVISE-ME"; color: #fff; font-weight: 600; @@ -218,49 +231,51 @@ line-height: 25px; font-family: "Open sans", sans-serif; } -.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) { padding: 0; } -.container .shippingContainer { + +/* BUSCA DE CEP */ +.shippingContainer { display: flex; } @media only screen and (max-width: 767px) { - .container .shippingContainer { + .shippingContainer { display: block; position: relative; } } -.container .shippingContainer :global(.vtex-address-form__postalCode) { +.shippingContainer :global(.vtex-address-form__postalCode) { display: flex; align-items: center; padding: 0; } @media only screen and (max-width: 767px) { - .container .shippingContainer :global(.vtex-address-form__postalCode) { + .shippingContainer :global(.vtex-address-form__postalCode) { display: block; } } -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) { font-size: 0; } -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before { content: "CALCULAR FRETE"; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { width: 280px; height: 49px; border-radius: 0; } @media only screen and (max-width: 767px) { - .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { width: 100%; } } -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; margin-top: 25px; position: relative; @@ -271,22 +286,22 @@ text-decoration: underline; } @media only screen and (max-width: 767px) { - .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { left: 0; margin-top: 8px; text-align: end; } } -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000000; } -.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; } -.container .shippingContainer :global(.vtex-button) { +.shippingContainer :global(.vtex-button) { height: 49px; width: 49px; - margin-top: 27px; + margin-top: auto !important; position: relative; right: 148px; font-size: 0; @@ -294,37 +309,41 @@ cursor: pointer; } @media only screen and (max-width: 767px) { - .container .shippingContainer :global(.vtex-button) { + .shippingContainer :global(.vtex-button) { + height: 49px !important; + margin: 0 !important; position: absolute; right: 0px; - top: 0px; + top: 26px; } } -.container .shippingContainer :global(.vtex-button)::before { +.shippingContainer :global(.vtex-button)::before { content: "OK"; font-weight: 600; font-size: 14px; line-height: 19px; color: #fff; } -.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { height: fit-content; } -.container .shippingTable { + +/* TRANSPORTADORAS */ +.shippingTable { border: none; padding: 0; margin: 15px 0; } -.container .shippingTable .shippingTableHead { +.shippingTable .shippingTableHead { display: block; text-transform: uppercase; margin-bottom: 15px; } -.container .shippingTable .shippingTableHead .shippingTableRow { +.shippingTable .shippingTableHead .shippingTableRow { display: flex; flex-direction: row; } -.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { margin-right: 39px; font-weight: 400; font-size: 14px; @@ -332,11 +351,11 @@ color: #202020; } @media only screen and (max-width: 767px) { - .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { margin-right: 32px; } } -.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { display: flex; order: 1; font-weight: 400; @@ -344,27 +363,27 @@ line-height: 19px; color: #202020; } -.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { font-size: 0; margin-right: 30px; } @media only screen and (max-width: 767px) { - .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { margin-right: 32px; } } -.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { content: "Frete"; font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; } -.container .shippingTable .shippingTableBody .shippingTableRow { +.shippingTable .shippingTableBody .shippingTableRow { display: flex; flex-direction: row; } -.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { width: 82px; margin-right: 28px; font-weight: 400; @@ -373,11 +392,11 @@ color: #afafaf; } @media only screen and (max-width: 767px) { - .container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { margin-right: 22px; } } -.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { display: flex; order: 1; font-weight: 400; @@ -385,7 +404,7 @@ line-height: 16px; color: #afafaf; } -.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { width: 50px; margin-right: 28px; font-weight: 400; @@ -393,16 +412,33 @@ line-height: 16px; color: #afafaf; } -.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { padding: 0 0 15px; } -.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { display: none; } -.productImage { - width: max-content; +/* IMAGEM DA DESCRIÇÃO DO PRODUTO */ +.imageElement { + width: 100%; } -.productImage .productImageTag--main { - max-height: 664px !important; + +/* DESCRIÇÃO DO PRODUTO */ +.productDescriptionContainer { + margin-left: 16px; +} +.productDescriptionContainer .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + height: 40px; + margin-bottom: 8px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..4732012 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,42 @@ +/* +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--description { + padding: 0 40px; +} +.container--description .listContainer { + display: flex; + padding: 0 80px; + border-bottom: 1px solid #b9b9b9; + justify-content: space-between; +} +.container--description .listContainer .listItem { + margin: 0; + padding: 0; + height: 38px; + width: 114px; +} +.container--description .listContainer .listItem :global(.vtex-button) { + background-color: transparent; + border: none; + color: #bfbfbf; + width: 100%; +} +.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 !important; + height: 38px; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; +} +.container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { + color: black; + border-bottom: 2px solid #000000; +} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index 94f6b35..e69de29 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,11 +0,0 @@ -// .html { -// background-color: red; -// } - -// .html--pdp-breadcrumb { -// background-color: green; -// } - -.b--action-primary { - border-color: black; -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8d9a06b..0c0916a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,35 +1,41 @@ -.flexRowContent { - padding: 0; - margin: 0; - width: 100%; - +/* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ +.flexRowContent--main { + @include mq(md, max) { + display: block; + } + .flexCol--stack { + padding-left: 40px; + @include mq(md, max) { + padding: 0 40px; + width: 100%; + } + } .flexCol--right-col { - .flexColChild--right-col { - .list-price-savings { - display: none; - } + padding-right: 40px; + margin-left: 16px; + @include mq(md, max) { + padding: 0 40px; + margin-left: 0; } } } + +/* ASSINANTE DE PRODUTO INDISPONIVEL */ .flexRowContent--message-availability { - margin-top: 24px; width: 375px; @include mq(md, max) { width: 100%; } } -.sellingPriceValue { - font-size: 50px; -} - +/* BOTAO DE ADICIONAR A SACOLA */ .flexRowContent { padding: 0; - margin-top: 0; + margin: 0; :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { padding: 0; display: flex; - &:nth-child(even) { + @include mq(md, max) { width: 100% !important; } :global(.vtex-button) { diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 5e433e6..f71a396 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,3 +1,4 @@ +/* REFERENCIA DO PRODUTO */ .product-identifier--productReference { display: flex; justify-content: end; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 6d12f64..8fc8d8b 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -1,3 +1,4 @@ +/* VALOR PRINCIPAL DO PRODUTO */ .sellingPrice--hasListPrice { font-weight: 700; font-size: 25px; @@ -5,36 +6,54 @@ color: $color-black-padrao; } -.installments { - display: flex; - font-size: 0; - color: $color-gray-6; +/* VALORES DE PARCELAMENTOS E JUROS */ +.installments--divider { margin-bottom: 8px; .installmentsNumber { font-weight: 700; font-size: 16px; line-height: 22px; - - &::after { - content: "x "; - } + color: $color-gray14; } - .installmentValue { + + .installments-x--divider { font-weight: 700; font-size: 16px; line-height: 22px; + color: $color-gray14; + } + + .installmentValue--divider { + margin-bottom: 8px; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: $color-gray14; + } + + .installments-discount--divider { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $color-gray14; + } +} + +/* PROMOÇÃO DA PRATELEIRA VOCÊ TAMBÉM PODE GOSTAR */ +.listPrice { + font-family: "Opens Sans", sans-serif; + line-height: 19px; + color: #bababa; + + font-size: 14px; + .listPriceValue { &::before { content: "de "; - margin-left: 5px; - font-weight: 400; - font-size: 16px; - line-height: 22px; + font-size: 14px; } &::after { - content: " sem juros"; - font-weight: 400; - font-size: 16px; - line-height: 22px; + content: " por"; + font-size: 14px; } } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index ccc39fb..d151f90 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,3 +1,4 @@ +/* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; margin-top: 8px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index d870b2f..7555852 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,176 +1,212 @@ .container { - margin: 0; - padding: 0 40px; + padding: 0; max-width: 100%; +} - /* TITULO (NOME DO PRODUTO PRINCIPAL)*/ - .productNameContainer--quickview { - text-align: end; - font-weight: 300; - font-size: 20px; - line-height: 34px; - color: $color-gray-7; - @include mq(md, max) { - text-align: start; +/*IMAGEM PRINCIPAL DO PRODUTO */ +.productImage { + margin-right: 16px; + .productImageTag { + width: 100%; + max-height: 100% !important; + object-fit: contain; + } +} + +/*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ +.carouselGaleryThumbs { + margin: 16px 0; + + .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; + } + .productImagesThumb { + margin: 0 16px 0 0; + height: 100% !important; + width: 90px !important; + } + + .productImagesThumbCaret { + display: none; + } +} + +/* TITULO (NOME DO PRODUTO PRINCIPAL)*/ +.productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: $color-gray-7; + @include mq(md, max) { + text-align: start; + } +} + +/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .skuSelectorName { + font-size: 0; + } + + .skuSelectorNameSeparator { + font-size: 0; + } + + .skuSelectorSubcontainer--cor { + &::before { + content: "OUTRAS CORES:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: $color-gray-6; } } - /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ - .skuSelectorContainer { - display: flex; - flex-direction: column-reverse; - - .skuSelectorName { - font-size: 0; + .skuSelectorSubcontainer--tamanho { + &::before { + content: "OUTROS TAMANHOS:"; + font-family: "Open Sans", sans-serif; + font-weight: 400; + line-height: 19px; + font-size: 14px; + color: $color-gray-6; } + } - .skuSelectorNameSeparator { - font-size: 0; - } + .skuSelectorTextContainer { + display: none; + } - .skuSelectorSubcontainer--cor { - &::before { - content: "OUTRAS CORES:"; - font-family: "Open Sans", sans-serif; - font-weight: 400; - line-height: 19px; - font-size: 14px; - color: $color-gray-6; - } - } + .skuSelectorOptionsList { + margin-top: 8px; + margin-left: 0; + } - .skuSelectorSubcontainer--tamanho { - &::before { - content: "OUTROS TAMANHOS:"; - font-family: "Open Sans", sans-serif; - font-weight: 400; - line-height: 19px; - font-size: 14px; - color: $color-gray-6; - } - } - - .skuSelectorTextContainer { - display: none; - } - - .skuSelectorOptionsList { - margin-top: 8px; + .skuSelectorSelectorImageValue { + font-size: 0; + } +} +/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ +.skuSelectorOptionsList { + .skuSelectorItem { + width: 40px; + height: 40px; + &:first-child { margin-left: 0; } + .frameAround { + border-radius: 50%; + border-color: $color-black-padrao; + color: $color-black-padrao; + } - .skuSelectorSelectorImageValue { - font-size: 0; + .skuSelectorItemTextValue { + max-width: 100%; + display: flex; + justify-content: center; + color: $color-black-padrao; + } + .skuSelectorInternalBox { + border-radius: 50%; } } - /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */ - .skuSelectorOptionsList { - .skuSelectorItem { - width: 40px; - height: 40px; - &:first-child { - margin-left: 0; - } - .frameAround { - border-radius: 50%; - border-color: $color-black-padrao; - color: $color-black-padrao; - } - .skuSelectorItemTextValue { + .diagonalCross { + margin: 5px; + background-image: linear-gradient( + to top right, + transparent 44%, + rgba(0, 0, 0, 0.3) 48%, + currentColor 48%, + currentColor 0, + transparent 0% + ); + transform: rotate(90deg); + } +} + +/*PRODUTO INDISPONIVEL && +FORMULARIO DE PRODUTO INDISPONIVEL */ +.subscriberContainer { + width: 100%; + margin-top: 24px; + .title { + font-size: 0; + margin-bottom: 0; + + &::before { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray-9; + } + } + + .subscribeLabel { + font-size: 0; + &::before { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-9; + } + } + + .form { + position: relative; + :global(.vtex-store-components-3-x-content) { + display: block; + width: 374.65px; + margin-top: 16px; + @include mq(md, max) { + width: 100%; max-width: 100%; - display: flex; - justify-content: center; - color: $color-black-padrao; } - .skuSelectorInternalBox { - border-radius: 50%; - } - } - - .diagonalCross { - margin: 5px; - background-image: linear-gradient( - to top right, - transparent 44%, - rgba(0, 0, 0, 0.3) 48%, - currentColor 48%, - currentColor 0, - transparent 0% - ); - transform: rotate(90deg); - } - } - - .carouselGaleryThumbs { - margin: 16px 0; - - .thumbImg { - width: 90px; - height: 90px; - border-radius: 8px; - } - .productImagesThumb { - margin-right: 16px; - height: 100% !important; - width: 90px !important; - } - - .productImagesThumbCaret { - display: none; - } - } - - /*PRODUTO INDISPONIVEL, TEXTOS */ - .subscriberContainer { - width: 100%; - margin-top: 24px; - .title { - font-size: 0; - margin-bottom: 0; - - &::before { - content: "Produto indisponível"; - font-weight: 700; - font-size: 14px; - line-height: 19px; - color: $color-gray-9; - } - } - - .subscribeLabel { - font-size: 0; - &::before { - content: "Deseja saber quando estiver disponível?"; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-gray-9; - } - } - /* FORMULARIO DE PRODUTO INDISPONIVEL */ - .form { - position: relative; - :global(.vtex-store-components-3-x-content) { - width: 374.65px; - display: block; - margin-top: 16px; + .inputName { + width: 182.46px; + margin-right: 10.08px; + margin-bottom: 15px; @include mq(md, max) { - width: 100%; - max-width: 100%; + width: 49%; } - .inputName { - width: 182.46px; - margin-right: 10.08px; - margin-bottom: 15px; - @include mq(md, max) { - width: 49%; - } - :global(.vtex-input-prefix__group) { - border: 0.6px solid $color-gray-6; - border-radius: 0; - } + :global(.vtex-input-prefix__group) { + border: 0.6px solid $color-gray-6; + border-radius: 0; + } + :global(.vtex-styleguide-9-x-input) { + padding: 0 14px; + font-size: 12px; + line-height: 28px; + color: $color-gray-6; + } + } + .inputEmail { + position: absolute; + left: 51%; + top: 0%; + border-radius: 0; + width: 182.46px; + font-weight: 400; + margin-bottom: 15px; + @include mq(md, max) { + width: -webkit-fill-available; + margin: 0 0 0 8px; + left: 49%; + } + + :global(.vtex-input-prefix__group) { + border: 0.6px solid $color-gray-6; + border-radius: 0; :global(.vtex-styleguide-9-x-input) { padding: 0 14px; font-size: 12px; @@ -178,232 +214,207 @@ color: $color-gray-6; } } - .inputEmail { - position: absolute; - left: 51%; - top: 0%; - border-radius: 0; - width: 182.46px; - font-weight: 400; - margin-bottom: 15px; - @include mq(md, max) { - width: -webkit-fill-available; - margin: 0 0 0 8px; - left: 49%; - } - - :global(.vtex-input-prefix__group) { - border: 0.6px solid $color-gray-6; - border-radius: 0; - :global(.vtex-styleguide-9-x-input) { - padding: 0 14px; - font-size: 12px; - line-height: 28px; - color: $color-gray-6; - } - } - } - .submit { + } + .submit { + width: 100%; + margin-bottom: 16px; + :global(.vtex-button) { width: 100%; - margin-bottom: 16px; - :global(.vtex-button) { - width: 100%; - height: 49px; - background-color: $color-black-padrao; - border: none; - border-radius: 0; - font-size: 0; - display: flex; - align-items: center; - justify-content: center; - &::before { - content: "AVISE-ME"; - color: $color-white; - font-weight: 600; - font-size: 18px; - line-height: 25px; - font-family: "Open sans", sans-serif; - } - - :global(.vtex-button__label) { - padding: 0; - } + height: 49px; + background-color: $color-black-padrao; + border: none; + border-radius: 0; + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + &::before { + content: "AVISE-ME"; + color: $color-white; + font-weight: 600; + font-size: 18px; + line-height: 25px; + font-family: "Open sans", sans-serif; + } + :global(.vtex-button__label) { + padding: 0; } } } } } +} - /* BUSCA DE CEP */ - .shippingContainer { +/* BUSCA DE CEP */ +.shippingContainer { + display: flex; + @include mq(sm, max) { + display: block; + position: relative; + } + :global(.vtex-address-form__postalCode) { display: flex; + align-items: center; + padding: 0; @include mq(sm, max) { display: block; - position: relative; } - :global(.vtex-address-form__postalCode) { - display: flex; - align-items: center; - padding: 0; - @include mq(sm, max) { - display: block; + :global(.vtex-input__label) { + font-size: 0; + &::before { + content: "CALCULAR FRETE"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray-6; } - :global(.vtex-input__label) { + } + :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border-radius: 0; + @include mq(sm, max) { + width: 100%; + } + } + :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0; + margin-top: 25px; + position: relative; + left: 32px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration: underline; + @include mq(sm, max) { + left: 0; + margin-top: 8px; + text-align: end; + } + :last-child { + color: $color-black-padrao; + } + :global(.vtex__icon-external-link) { + display: none; + } + } + } + :global(.vtex-button) { + height: 49px; + width: 49px; + margin-top: auto !important; + position: relative; + right: 148px; + font-size: 0; + border-radius: 0; + cursor: pointer; + + @include mq(sm, max) { + height: 49px !important; + margin: 0 !important; + position: absolute; + right: 0px; + top: 26px; + } + &::before { + content: "OK"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: $color-white; + } + :global(.vtex-button__label) { + height: fit-content; + } + } +} + +/* TRANSPORTADORAS */ +.shippingTable { + border: none; + padding: 0; + margin: 15px 0; + .shippingTableHead { + display: block; + text-transform: uppercase; + margin-bottom: 15px; + .shippingTableRow { + display: flex; + flex-direction: row; + .shippingTableHeadDeliveryName { + margin-right: 39px; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black2; + @include mq(sm, max) { + margin-right: 32px; + } + } + .shippingTableHeadDeliveryEstimate { + display: flex; + order: 1; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black2; + } + + .shippingTableHeadDeliveryPrice { font-size: 0; + margin-right: 30px; + @include mq(sm, max) { + margin-right: 32px; + } &::before { - content: "CALCULAR FRETE"; + content: "Frete"; font-weight: 400; font-size: 14px; line-height: 19px; - color: $color-gray-6; + color: $color-black2; } } - :global(.vtex-input-prefix__group) { - width: 280px; - height: 49px; - border-radius: 0; - @include mq(sm, max) { - width: 100%; - } - } - :global(.vtex-address-form__postalCode-forgottenURL) { - padding: 0; - margin-top: 25px; - position: relative; - left: 32px; + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + flex-direction: row; + .shippingTableCellDeliveryName { + width: 82px; + margin-right: 28px; font-weight: 400; font-size: 12px; line-height: 16px; - text-decoration: underline; + color: $color-gray-10; @include mq(sm, max) { - left: 0; - margin-top: 8px; - text-align: end; - } - :last-child { - color: $color-black-padrao; - } - :global(.vtex__icon-external-link) { - display: none; + margin-right: 22px; } } - } - :global(.vtex-button) { - height: 49px; - width: 49px; - margin-top: 27px; - position: relative; - right: 148px; - font-size: 0; - border-radius: 0; - cursor: pointer; - @include mq(sm, max) { - position: absolute; - right: 0px; - top: 0px; - } - &::before { - content: "OK"; - font-weight: 600; - font-size: 14px; - line-height: 19px; - color: $color-white; - } - :global(.vtex-button__label) { - height: fit-content; - } - } - } - - /* TRANSPORTADORAS */ - .shippingTable { - border: none; - padding: 0; - margin: 15px 0; - .shippingTableHead { - display: block; - text-transform: uppercase; - margin-bottom: 15px; - .shippingTableRow { + .shippingTableCellDeliveryEstimate { display: flex; - flex-direction: row; - .shippingTableHeadDeliveryName { - margin-right: 39px; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-black2; - @include mq(sm, max) { - margin-right: 32px; - } - } - - .shippingTableHeadDeliveryEstimate { - display: flex; - order: 1; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-black2; - } - - .shippingTableHeadDeliveryPrice { - font-size: 0; - margin-right: 30px; - @include mq(sm, max) { - margin-right: 32px; - } - &::before { - content: "Frete"; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-black2; - } - } + order: 1; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray-10; } - } - .shippingTableBody { - .shippingTableRow { - display: flex; - flex-direction: row; - .shippingTableCellDeliveryName { - width: 82px; - margin-right: 28px; - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: $color-gray-10; - @include mq(sm, max) { - margin-right: 22px; - } - } - - .shippingTableCellDeliveryEstimate { - display: flex; - order: 1; - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: $color-gray-10; - } - - .shippingTableCellDeliveryPrice { - width: 50px; - margin-right: 28px; - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: $color-gray-10; - } - .shippingTableCell { - padding: 0 0 15px; - .shippingTableLabel { - .shippingTableRadioBtn { - display: none; - } + .shippingTableCellDeliveryPrice { + width: 50px; + margin-right: 28px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray-10; + } + .shippingTableCell { + padding: 0 0 15px; + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; } } } @@ -411,9 +422,26 @@ } } -.productImage { - width: max-content; - .productImageTag--main { - max-height: 664px !important; +/* IMAGEM DA DESCRIÇÃO DO PRODUTO */ +.imageElement { + width: 100%; +} + +/* DESCRIÇÃO DO PRODUTO */ +.productDescriptionContainer { + margin-left: 16px; + .productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + height: 40px; + margin-bottom: 8px; + color: $color-gray13; + } + .productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: $color-gray14; } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..2ae2070 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,35 @@ +.container--description { + padding: 0 40px; + .listContainer { + display: flex; + padding: 0 80px; + border-bottom: 1px solid $color-gray11; + justify-content: space-between; + .listItem { + margin: 0; + padding: 0; + height: 38px; + width: 114px; + + :global(.vtex-button) { + background-color: transparent; + border: none; + color: $color-gray12; + width: 100%; + + :global(.vtex-button__label) { + padding: 0 !important; + height: 38px; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + &:hover { + color: black; + border-bottom: 2px solid $color-black-padrao; + } + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 30a8dc3..d8b21c2 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,6 +1,7 @@ $color-black: #292929; $color-black-padrao: #000000; $color-black2: #202020; + $color-white: #fff; $color-gray: #6c6c6c; @@ -13,6 +14,10 @@ $color-gray-7: #575757; $color-gray-8: #989898; $color-gray-9: #868686; $color-gray-10: #afafaf; +$color-gray11: #b9b9b9; +$color-gray12: #bfbfbf; +$color-gray13: #575757; +$color-gray14: #929292; $color-blue: #4267b2;