cainamilech/challenge-vtex-io-caina
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pdp): Adiciona tablayout e newletter mobile

Browse Source
This commit is contained in:
Cainã Milech 2023-01-30 19:25:05 -03:00
parent 42784946d0
commit b1ebdf3c7e
21 changed files with 488 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
react/Pix.tsx → react/Pix.ts
View File

18
react/components/Html/styles.css
View File

@ -4,6 +4,12 @@
line-height: 19px;
text-align: end;
}
@media screen and (max-width: 1024px) {
[class*="html--codigo"] {
text-align: left;
margin-bottom: 24px;
}
}
[class*="html--description-container"] {
display: flex;
@ -11,10 +17,22 @@
margin-right: 32px;
gap: 32px;
}
@media screen and (max-width: 1024px) {
[class*="html--description-container"] {
flex-direction: column;
margin: 0;
gap: 16px;
}
}
[class*="html--image-container"] {
width: 49.82%;
}
@media screen and (max-width: 1024px) {
[class*="html--image-container"] {
width: 100%;
}
}
[class*="html--qtd-btn"] {
display: flex;

2
react/components/Pix/Pix.module.css
View File

@ -11,7 +11,7 @@
}
.price {
margin: 0;
margin: 0 0 -5px 0;
font-weight: 700;
font-size: 18px;
line-height: 25px;

2
react/components/Pix/Pix.tsx
View File

@ -3,7 +3,7 @@ import { useProduct } from "vtex.product-context";
import styles from "./Pix.module.css";
const Pix = () => {
if (typeof document !== undefined) {
if (typeof document !== "undefined") {
const input = document.querySelector(".vtex-address-form-4-x-input");
input?.setAttribute("placeholder", "Digite seu CEP");
}

109
store/blocks/pdp/product-tablayout.jsonc Normal file
View File

@ -0,0 +1,109 @@
{
"tab-layout#details": {
"children": ["tab-list#details", "tab-content#details"],
"props": {
"blockClass": "details",
"defaultActiveTabId": "details1"
}
},
"tab-list#details": {
"children": [
"tab-list.item#details1",
"tab-list.item#details2",
"tab-list.item#details3",
"tab-list.item#details4",
"tab-list.item#details5"
]
},
"tab-list.item#details1": {
"props": {
"tabId": "details1",
"label": "Descrição",
"blockClass": "descricao",
"defaultActiveTab": true
}
},
"tab-list.item#details2": {
"props": {
"tabId": "details2",
"label": "Descrição"
}
},
"tab-list.item#details3": {
"props": {
"tabId": "details3",
"label": "Descrição"
}
},
"tab-list.item#details4": {
"props": {
"tabId": "details4",
"label": "Descrição"
}
},
"tab-list.item#details5": {
"props": {
"tabId": "details5",
"label": "Descrição"
}
},
"tab-content#details": {
"children": [
"tab-content.item#details1",
"tab-content.item#details2",
"tab-content.item#details3",
"tab-content.item#details4",
"tab-content.item#details5"
]
},
"tab-content.item#details1": {
"children": ["html#description"],
"props": {
"tabId": "details1"
}
},
"tab-content.item#details2": {
"children": ["html#description"],
"props": {
"tabId": "details2"
}
},
"tab-content.item#details3": {
"children": ["html#description"],
"props": {
"tabId": "details3"
}
},
"tab-content.item#details4": {
"children": ["html#description"],
"props": {
"tabId": "details4"
}
},
"tab-content.item#details5": {
"children": ["html#description"],
"props": {
"tabId": "details5"
}
},
"html#description": {
"props": {
"tag": "section",
"testId": "description",
"blockClass": "description-container"
},
"children": ["html#description-image", "product-description"]
},
"html#description-image": {
"props": { "blockClass": "image-container" },
"children": ["product-images#description"]
},
"product-images#description": {
"props": {
"displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "description-imagem"
}
}
}

142
store/blocks/pdp/product.jsonc
View File

@ -42,7 +42,7 @@
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 1
"phone": 2
},
"infinite": true,
/*"fullWidth": false,*/
@ -50,114 +50,6 @@
}
},
"tab-layout#details": {
"children": ["tab-list#details", "tab-content#details"],
"props": {
"blockClass": "details",
"defaultActiveTabId": "details1"
}
},
"tab-list#details": {
"children": [
"tab-list.item#details1",
"tab-list.item#details2",
"tab-list.item#details3",
"tab-list.item#details4",
"tab-list.item#details5"
]
},
"tab-list.item#details1": {
"props": {
"tabId": "details1",
"label": "Descrição",
"blockClass": "descricao",
"defaultActiveTab": true
}
},
"tab-list.item#details2": {
"props": {
"tabId": "details2",
"label": "Descrição"
}
},
"tab-list.item#details3": {
"props": {
"tabId": "details3",
"label": "Descrição"
}
},
"tab-list.item#details4": {
"props": {
"tabId": "details4",
"label": "Descrição"
}
},
"tab-list.item#details5": {
"props": {
"tabId": "details5",
"label": "Descrição"
}
},
"tab-content#details": {
"children": [
"tab-content.item#details1",
"tab-content.item#details2",
"tab-content.item#details3",
"tab-content.item#details4",
"tab-content.item#details5"
]
},
"tab-content.item#details1": {
"children": ["html#description"],
"props": {
"tabId": "details1"
}
},
"tab-content.item#details2": {
"children": ["html#description"],
"props": {
"tabId": "details2"
}
},
"tab-content.item#details3": {
"children": ["html#description"],
"props": {
"tabId": "details3"
}
},
"tab-content.item#details4": {
"children": ["html#description"],
"props": {
"tabId": "details4"
}
},
"tab-content.item#details5": {
"children": ["html#description"],
"props": {
"tabId": "details5"
}
},
"html#description": {
"props": {
"tag": "section",
"testId": "description",
"blockClass": "description-container"
},
"children": ["html#description-image", "product-description"]
},
"html#description-image": {
"props": { "blockClass": "image-container" },
"children": ["product-images#description"]
},
"product-images#description": {
"props": {
"displayMode": "first-image",
"zoomMode": "disabled",
"blockClass": "description-imagem"
}
},
"breadcrumb#pdp": {
"props": {
"blockClass": "testebread",
@ -165,14 +57,6 @@
}
},
/*"html#breadcrumb": {
"props": {
"tag": "section",
"testId": "breadcrumbs",
"blockClass": "pdp-breadcrumb"
},
"children": ["breadcrumb"]
},*/
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
@ -198,14 +82,15 @@
"Else": "flex-layout.row#product-availability"
}
},
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
/*"colGap": 7,*/
/*"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingBottom": 7*/
"blockClass": "containerteste"
"paddingBottom": 7,*/
"blockClass": "container-produto"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
@ -233,8 +118,9 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "51%",
"rowGap": 0
"width": "50%",
"rowGap": 0,
"blockClass": "stack-container"
}
},
"flex-layout.row#product-image": {
@ -247,11 +133,11 @@
"thumbnailAspectRatio": "1:1",
"thumbnailMaxHeight": 90,
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": false,
"aspectRatio": {
"desktop": "1:1",
"phone": "16:9"
"desktop": "auto"
},
"displayThumbnailsArrows": false
"blockClass": "images-container"
}
},
"flex-layout.col#right-col": {
@ -337,12 +223,12 @@
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
/*"colGap": 7,*/
/*"rowGap": 7,
"marginTop": 5,
"marginBottom": 7,
"paddingBottom": 7*/
"blockClass": "containerteste"
"paddingBottom": 7,*/
"blockClass": "container-produto"
},
"children": [
"flex-layout.col#stack",

16
styles/css/vtex.flex-layout.css
View File

@ -11,6 +11,11 @@
.flexRowContent--name {
text-align: end;
}
@media screen and (max-width: 1024px) {
.flexRowContent--name {
text-align: left;
}
}
.flexRowContent--preco {
font-style: normal;
@ -21,7 +26,16 @@
margin: 0;
}
.flexRow--containerteste {
.flexRow--container-produto {
padding-left: 40px;
padding-right: 40px;
}
.flexRowContent--container-produto {
gap: 32px;
}
@media screen and (max-width: 1024px) {
.flexRowContent--container-produto {
display: block;
}
}

12
styles/css/vtex.product-price.css
View File

@ -31,6 +31,12 @@
color: #bababa;
margin-bottom: 8px;
}
@media screen and (max-width: 1024px) {
.listPrice--summary {
font-size: 12px;
line-height: 16px;
}
}
.listPrice--summary :global(.vtex-product-price-1-x-currencyCode--summary)::before {
content: "de ";
}
@ -44,3 +50,9 @@
line-height: 33px;
color: #000000;
}
@media screen and (max-width: 1024px) {
.sellingPrice--summary {
font-size: 18px;
line-height: 25px;
}
}

8
styles/css/vtex.product-summary.css
View File

@ -11,7 +11,7 @@
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
min-height: 66px;
/*min-height: 66px;*/
}
.nameContainer .productBrand {
font-weight: 400;
@ -19,6 +19,12 @@
line-height: 25px;
color: #000000;
}
@media screen and (max-width: 1024px) {
.nameContainer .productBrand {
font-size: 14px;
line-height: 19px;
}
}
.spacer {
display: none;

6
styles/css/vtex.rich-text.css
View File

@ -18,3 +18,9 @@
line-height: 38px;
color: #575757;
}
@media screen and (max-width: 768px) {
.container--title-prateleira .paragraph--title-prateleira {
font-size: 20px;
line-height: 38px;
}
}

21
styles/css/vtex.slider-layout.css
View File

@ -15,6 +15,16 @@
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.1773%;
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.63%;
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 89.73%;
}
}
.paginationDotsContainer--prateleira {
align-items: center;
@ -36,10 +46,21 @@
margin-left: 8px;
margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
.slide--prateleira {
margin-left: 4px;
margin-right: 4px;
}
}
.sliderArrows--prateleira {
margin: 14px;
}
@media screen and (max-width: 1024px) {
.sliderArrows--prateleira {
margin: 28px;
}
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;

119
styles/css/vtex.store-components.css
View File

@ -47,6 +47,14 @@
width: 100%;
}
.productImagesGallerySlide--images-container {
width: 100% !important;
}
/*
.swiper-slide-active {
width: 100%;
}*/
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
height: 664px;
@ -76,10 +84,10 @@
margin-left: -5px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName {
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
content: "OUTROS TAMANHOS";
font-style: normal;
font-weight: 400;
@ -167,10 +175,20 @@
align-items: end;
margin-top: 16px;
}
@media screen and (max-width: 768px) {
.shippingContainer {
margin-bottom: 24px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) {
position: relative;
padding: 0;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
width: 100%;
}
}
.shippingContainer :global(.vtex-input__error) {
position: absolute;
margin-top: 2px;
@ -195,6 +213,11 @@
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) {
width: 231px;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators) {
width: 100%;
}
}
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-hideDecorators)::placeholder {
font-weight: 400;
font-size: 12px;
@ -212,6 +235,12 @@
align-items: center;
text-decoration-line: underline;
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
top: 76px;
right: -50px;
}
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000;
}
@ -264,14 +293,14 @@
padding: 0;
}
.shippingTableHead .shippingTableHeadDeliveryName {
min-width: 110px;
width: 110px;
}
.shippingTableHead .shippingTableHeadDeliveryEstimate {
order: 3;
}
.shippingTableHead .shippingTableHeadDeliveryPrice {
display: flex;
min-width: 110px;
width: 110px;
font-size: 0;
}
.shippingTableHead .shippingTableHeadDeliveryPrice::after {
@ -294,10 +323,10 @@
padding: 15px 4px 0 0;
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
min-width: 110px;
width: 110px;
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
min-width: 110px;
width: 110px;
}
.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
order: 3;
@ -309,10 +338,21 @@
flex-direction: column;
width: 49.82%;
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer--descricao {
width: 100%;
}
}
.container--descricao {
margin: 0;
}
@media screen and (max-width: 1024px) {
.container--descricao {
border-bottom: 1px solid #bfbfbf;
padding-bottom: 16px;
}
}
.productDescriptionTitle--descricao {
font-weight: 400;
@ -321,6 +361,11 @@
color: #575757;
margin-bottom: 8px;
}
@media screen and (max-width: 1024px) {
.productDescriptionTitle--descricao {
font-size: 20px;
}
}
.content--descricao {
font-weight: 400;
@ -328,6 +373,12 @@
line-height: 22px;
color: #929292;
}
@media screen and (max-width: 1024px) {
.content--descricao {
font-size: 14px;
line-height: 19px;
}
}
.subscriberContainer {
position: relative;
@ -424,16 +475,29 @@
background-color: #000000;
border-bottom: 1px solid #fff;
}
@media screen and (max-width: 1024px) {
.newsletter--newsletter {
padding: 64px 16px 32px 16px;
}
}
@media screen and (max-width: 768px) {
.newsletter--newsletter {
margin-top: 32px;
}
}
.container--newsletter {
/*width: 53.75%;*/
width: 774px;
width: 53.75%;
color: #fff;
max-width: unset;
}
@media screen and (max-width: 1024px) {
.container--newsletter {
width: 100%;
}
}
.form--newsletter {
position: relative;
max-width: unset;
}
.form--newsletter :global(.vtex-styleguide-9-x-noAppearance) {
@ -447,40 +511,69 @@
padding-bottom: 4px;
align-items: flex-end;
}
@media screen and (max-width: 1024px) {
.form--newsletter :global(.vtex-input-prefix__group) {
padding-left: 18px;
padding-bottom: 12px;
}
}
.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
@media screen and (max-width: 1024px) {
.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators) {
font-size: 12px;
line-height: 16px;
}
}
.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
@media screen and (max-width: 1024px) {
.form--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
font-size: 12px;
line-height: 16px;
}
}
.label--newsletter {
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #fff;
display: flex;
flex-direction: column;
}
.label--newsletter::after {
content: "Receba ofertas e novidades por e-mail";
position: absolute;
right: 234px;
top: 50px;
margin-top: 16px;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #929292;
}
@media screen and (max-width: 1024px) {
.label--newsletter::after {
font-size: 16px;
line-height: 22px;
}
}
.inputGroup--newsletter {
margin-top: 40px;
margin-top: 16px;
padding: 0;
}
@media screen and (max-width: 768px) {
.inputGroup--newsletter {
display: flex;
}
}
.buttonContainer--newsletter {
margin: 0;

27
styles/css/vtex.tab-layout.css
View File

@ -19,6 +19,18 @@
justify-content: space-around;
align-items: end;
}
@media screen and (max-width: 1024px) {
.listContainer {
margin-top: 16px;
padding-bottom: 8px;
padding-top: 5px;
border-bottom: 1px solid #b9b9b9;
border-top: 1px solid #b9b9b9;
flex-direction: column;
align-items: initial;
margin-bottom: 16px;
}
}
.listItem {
background-color: transparent;
@ -47,10 +59,25 @@
.listItemActive {
border-bottom: 2px solid #000000;
}
.listItemActive :global(.vtex-button__label) {
color: #000000;
margin: 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
.listItemActive {
border: none;
}
}
.listItemActive--descricao {
border-bottom: 2px solid #000000;
}
@media screen and (max-width: 1024px) {
.listItemActive--descricao {
border: none;
}
}
.listItemActive--descricao :global(.vtex-button) {
border: none;
border-radius: 0%;

12
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -1,6 +1,9 @@
/*NOME PRODUTO*/
.flexRowContent--name {
text-align: end;
@media screen and (max-width: 1024px) {
text-align: left;
}
}
.flexRowContent--preco {
@ -12,7 +15,14 @@
margin: 0;
}
.flexRow--containerteste {
.flexRow--container-produto {
padding-left: 40px;
padding-right: 40px;
}
.flexRowContent--container-produto {
gap: 32px;
@media screen and (max-width: 1024px) {
display: block;
}
}

8
styles/sass/pages/product/vtex.product-price.scss
View File

@ -25,6 +25,10 @@
line-height: 19px;
color: $color-gray11;
margin-bottom: 8px;
@media screen and (max-width: 1024px) {
font-size: 12px;
line-height: 16px;
}
:global(.vtex-product-price-1-x-currencyCode--summary) {
&::before {
@ -45,4 +49,8 @@
font-size: 24px;
line-height: 33px;
color: $color-black-100;
@media screen and (max-width: 1024px) {
font-size: 18px;
line-height: 25px;
}
}

6
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -2,13 +2,17 @@
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
min-height: 66px;
/*min-height: 66px;*/
.productBrand {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-black-100;
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}
}

4
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -8,5 +8,9 @@
font-size: 24px;
line-height: 38px;
color: $color-gray8;
@media screen and (max-width: 768px) {
font-size: 20px;
line-height: 38px;
}
}
}

15
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -5,6 +5,12 @@
.sliderTrackContainer--prateleira {
width: 97.1773%;
@media screen and (max-width: 1024px) {
width: 97.63%;
}
@media screen and (max-width: 768px) {
width: 89.73%;
}
}
}
@ -32,10 +38,19 @@
margin-right: 8px;
margin-left: 8px;
margin-bottom: 32px;
@media screen and (max-width: 768px) {
margin-left: 4px;
margin-right: 4px;
}
}
.sliderArrows--prateleira {
margin: 14px;
@media screen and (max-width: 1024px) {
margin: 28px;
}
}
.sliderLayoutContainer {

87
styles/sass/pages/product/vtex.store-components.scss
View File

@ -37,6 +37,13 @@
.productImagesGallerySlide {
width: 100%;
}
.productImagesGallerySlide--images-container {
width: 100% !important;
}
/*
.swiper-slide-active {
width: 100%;
}*/
/*:global(.vtex-store-components-3-x-productImageTag) {
width: 664px;
@ -71,6 +78,8 @@
}
.skuSelectorSubcontainer--tamanho {
.skuSelectorNameContainer {
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
@ -83,6 +92,8 @@
color: color-gray6;
}
}
}
}
}
.skuSelectorItemTextValue--skus {
@ -184,10 +195,16 @@
display: flex;
align-items: end;
margin-top: 16px;
@media screen and (max-width: 768px) {
margin-bottom: 24px;
}
:global(.vtex-address-form__postalCode) {
position: relative;
padding: 0;
@media screen and (max-width: 768px) {
width: 100%;
}
}
:global(.vtex-input__error) {
@ -217,6 +234,9 @@
:global(.vtex-address-form-4-x-hideDecorators) {
width: 231px;
@media screen and (max-width: 768px) {
width: 100%;
}
&::placeholder {
font-weight: 400;
@ -237,6 +257,10 @@
display: flex;
align-items: center;
text-decoration-line: underline;
@media screen and (max-width: 768px) {
top: 76px;
right: -50px;
}
:last-child {
color: $color-black-100;
@ -300,7 +324,7 @@
}
.shippingTableHeadDeliveryName {
min-width: 110px;
width: 110px;
}
.shippingTableHeadDeliveryEstimate {
@ -309,7 +333,7 @@
.shippingTableHeadDeliveryPrice {
display: flex;
min-width: 110px;
width: 110px;
font-size: 0;
&::after {
content: "FRETE";
@ -336,11 +360,11 @@
}
.shippingTableCellDeliveryName {
min-width: 110px;
width: 110px;
}
.shippingTableCellDeliveryPrice {
min-width: 110px;
width: 110px;
}
.shippingTableCellDeliveryEstimate {
@ -356,10 +380,18 @@
justify-content: left;
flex-direction: column;
width: 49.82%;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
.container--descricao {
margin: 0;
@media screen and (max-width: 1024px) {
border-bottom: 1px solid $color-gray9;
padding-bottom: 16px;
}
}
.productDescriptionTitle--descricao {
font-weight: 400;
@ -367,12 +399,19 @@
line-height: 32px;
color: $color-gray8;
margin-bottom: 8px;
@media screen and (max-width: 1024px) {
font-size: 20px;
}
}
.content--descricao {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}
//PRODUTO INDISPONIVEL
@ -483,16 +522,23 @@
padding-bottom: 16px;
background-color: $color-black-100;
border-bottom: 1px solid $color-white;
@media screen and (max-width: 1024px) {
padding: 64px 16px 32px 16px;
}
@media screen and (max-width: 768px) {
margin-top: 32px;
}
}
.container--newsletter {
/*width: 53.75%;*/
width: 774px;
width: 53.75%;
color: $color-white;
max-width: unset;
@media screen and (max-width: 1024px) {
width: 100%;
}
}
.form--newsletter {
position: relative;
max-width: unset;
:global(.vtex-styleguide-9-x-noAppearance) {
@ -506,18 +552,30 @@
border-radius: 0%;
padding-bottom: 4px;
align-items: flex-end;
@media screen and (max-width: 1024px) {
padding-left: 18px;
padding-bottom: 12px;
}
:global(.vtex-styleguide-9-x-hideDecorators) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 12px;
line-height: 16px;
}
&::placeholder {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 12px;
line-height: 16px;
}
}
}
}
@ -528,21 +586,28 @@
font-size: 24px;
line-height: 38px;
color: $color-white;
display: flex;
flex-direction: column;
&::after {
content: "Receba ofertas e novidades por e-mail";
position: absolute;
right: 234px;
top: 50px;
margin-top: 16px;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: $color-gray6;
@media screen and (max-width: 1024px) {
font-size: 16px;
line-height: 22px;
}
}
}
.inputGroup--newsletter {
margin-top: 40px;
margin-top: 16px;
padding: 0;
@media screen and (max-width: 768px) {
display: flex;
}
}
.buttonContainer--newsletter {

23
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -6,10 +6,20 @@
.listContainer {
border-bottom: 1px solid $color-gray9;
margin-bottom: 32px;
display: flex;
justify-content: space-around;
align-items: end;
@media screen and (max-width: 1024px) {
margin-top: 16px;
padding-bottom: 8px;
padding-top: 5px;
border-bottom: 1px solid $color-gray12;
border-top: 1px solid $color-gray12;
flex-direction: column;
align-items: initial;
margin-bottom: 16px;
}
}
.listItem {
@ -41,10 +51,21 @@
.listItemActive {
border-bottom: 2px solid $color-black-100;
:global(.vtex-button__label) {
color: $color-black-100;
margin: 0;
padding: 0;
}
@media screen and (max-width: 1024px) {
border: none;
}
}
.listItemActive--descricao {
border-bottom: 2px solid $color-black-100;
@media screen and (max-width: 1024px) {
border: none;
}
:global(.vtex-button) {
border: none;
border-radius: 0%;

1
styles/sass/utils/_vars.scss
View File

@ -15,6 +15,7 @@ $color-gray8: #575757;
$color-gray9: #bfbfbf;
$color-gray10: #868686;
$color-gray11: #bababa;
$color-gray12: #b9b9b9;
$color-blue: #4267b2;