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

feat: Finaliza detalhes de responsividade

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-02-03 16:55:24 -03:00
parent 20b47985d1
commit 2c71d5a521
16 changed files with 454 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
[class*="html--buy-button"] :global(.vtex-button) {
height: 49px;
max-width: 766px;
max-width: 806px;
background: black;
border: none;
border-radius: 0;

3
store/blocks/minicart.jsonc
View File

@ -3,7 +3,8 @@
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button",
"text": "ADICIONAR À SACOLA"
"text": "ADICIONAR À SACOLA",
"blockClass": "add-to-cart-button"
}
},

160
store/blocks/pdp/product-tab-layout.jsonc Normal file
View File

@ -0,0 +1,160 @@
// Descrição
{
"html#tab-layout": {
"props" : {
"testId": "tab-layout"
}
},
"tab-layout": {
"children": ["tab-list", "tab-content"],
"props": {
"blockClass": "tabLayout"
}
},
"tab-list": {
"children": [
"tab-list.item#1",
"tab-list.item#2",
"tab-list.item#3",
"tab-list.item#4",
"tab-list.item#5"
],
"props": {
"blockClass": "tabList"
}
},
"tab-content": {
"children": [
"tab-content.item#1",
"tab-content.item#2",
"tab-content.item#3",
"tab-content.item#4",
"tab-content.item#5"
],
"props": {
"blockClass": "tabContent"
}
},
"tab-list.item#1": {
"props": {
"tabId": "description#1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#2": {
"props": {
"tabId": "description#2",
"label": "Descrição"
}
},
"tab-list.item#3": {
"props": {
"tabId": "description#3",
"label": "Descrição"
}
},
"tab-list.item#4": {
"props": {
"tabId": "description#4",
"label": "Descrição"
}
},
"tab-list.item#5": {
"props": {
"tabId": "description#5",
"label": "Descrição"
}
},
"tab-content.item#1": {
"children": ["product-images#description", "rich-text#1"],
"props": {
"tabId": "description#1"
}
},
"tab-content.item#2": {
"children": ["product-images#description", "rich-text#2"],
"props": {
"tabId": "description#2"
}
},
"tab-content.item#3": {
"children": ["product-images#description", "rich-text#3"],
"props": {
"tabId": "description#3"
}
},
"tab-content.item#4": {
"children": ["product-images#description", "rich-text#4"],
"props": {
"tabId": "description#4"
}
},
"tab-content.item#5": {
"children": ["product-images#description", "rich-text#5"],
"props": {
"tabId": "description#5"
}
},
"product-images#description": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "auto"
},
"showNavigationArrows": false,
"showPaginationDots": false,
"displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal",
"zoomMode": "disabled",
"displayMode": "first-image"
}
},
"rich-text#1": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER",
"blockClass": "description-rich-text"
}
},
"rich-text#2": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER",
"blockClass": "description-rich-text"
}
},
"rich-text#3": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER",
"blockClass": "description-rich-text"
}
},
"rich-text#4": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER",
"blockClass": "description-rich-text"
}
},
"rich-text#5": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER",
"blockClass": "description-rich-text"
}
}
}

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

@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout",
"html#tab-layout",
"rich-text#carousel",
"list-context.product-list#product-carousel",
"product-questions-and-answers",
@ -122,7 +122,7 @@
"product-gifts",
"availability-subscriber",
"rich-text#labelCep",
"shipping-simulator"
"html#shipping-simulator"
]
},
@ -142,6 +142,8 @@
"children": ["vtex.store-components:product-name"]
},
// Skus
"html#sku-selector": {
"children": ["sku-selector"],
"props": {
@ -204,6 +206,7 @@
"flex-layout.row#product-availability": {
"props": {
"blockClass": "product-availability",
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
@ -247,154 +250,6 @@
}
},
// Descrição
"tab-layout": {
"children": ["tab-list", "tab-content"],
"props": {
"blockClass": "tabLayout"
}
},
"tab-list": {
"children": [
"tab-list.item#1",
"tab-list.item#2",
"tab-list.item#3",
"tab-list.item#4",
"tab-list.item#5"
],
"props": {
"blockClass": "tabList"
}
},
"tab-content": {
"children": [
"tab-content.item#1",
"tab-content.item#2",
"tab-content.item#3",
"tab-content.item#4",
"tab-content.item#5"
],
"props": {
"blockClass": "tabContent"
}
},
"tab-list.item#1": {
"props": {
"tabId": "description#1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#2": {
"props": {
"tabId": "description#2",
"label": "Descrição"
}
},
"tab-list.item#3": {
"props": {
"tabId": "description#3",
"label": "Descrição"
}
},
"tab-list.item#4": {
"props": {
"tabId": "description#4",
"label": "Descrição"
}
},
"tab-list.item#5": {
"props": {
"tabId": "description#5",
"label": "Descrição"
}
},
"tab-content.item#1": {
"children": ["product-images#description", "rich-text#1"],
"props": {
"tabId": "description#1"
}
},
"tab-content.item#2": {
"children": ["product-images#description", "rich-text#2"],
"props": {
"tabId": "description#2"
}
},
"tab-content.item#3": {
"children": ["product-images#description", "rich-text#3"],
"props": {
"tabId": "description#3"
}
},
"tab-content.item#4": {
"children": ["product-images#description", "rich-text#4"],
"props": {
"tabId": "description#4"
}
},
"tab-content.item#5": {
"children": ["product-images#description", "rich-text#5"],
"props": {
"tabId": "description#5"
}
},
"product-images#description": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
},
"showNavigationArrows": false,
"showPaginationDots": false,
"displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal",
"zoomMode": "disabled",
"displayMode": "first-image"
}
},
"rich-text#1": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#2": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#3": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#4": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
"rich-text#5": {
"props": {
"text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
"textPosition": "CENTER"
}
},
// Prateleira de produtos
"rich-text#carousel": {
@ -443,11 +298,12 @@
]
},
// "product-summary-image": {
// "props": {
// "aspectRatio": "1:1"
// }
// },
"product-summary-image": {
"props": {
"aspectRatio": "1:1",
"showBadge": false
}
},
// Newsletter
@ -457,5 +313,14 @@
"placeholder": "Digite seu e-mail",
"submit": "ENVIAR"
}
},
// Informações de frete
"html#shipping-simulator" : {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
}
}

5
styles/css/vtex.add-to-cart-button.css
View File

@ -14,4 +14,9 @@
text-align: center;
color: #fff;
padding: 7px 0;
}
@media screen and (max-width: 768px) {
.buttonText {
width: 168px;
}
}

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

@ -12,6 +12,12 @@
padding-top: 0;
}
@media screen and (max-width: 1024px) {
.flexRowContent--product-availability {
flex-direction: column;
}
}
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;

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

@ -19,7 +19,13 @@
}
.nameContainer .brandName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
font-size: 18px;
line-height: 25px;
color: #000000;
}
@media screen and (max-width: 1024px) {
.nameContainer .brandName {
font-size: 14px;
line-height: 19px;
}
}

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

@ -20,15 +20,30 @@
@media screen and (max-width: 1024px) {
.sliderLayoutContainer {
width: 100%;
padding: 0 40px;
}
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-element) {
padding: 0;
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
width: 105%;
max-height: unset !important;
object-fit: contain;
}
.sliderLayoutContainer :global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
}
.slideChildrenContainer {
width: 314px;
padding-right: 16px;
}
.listPrice {
:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -36,13 +51,19 @@
margin: 0;
padding-bottom: 8px;
}
.listPrice .listPriceLabel {
@media screen and (max-width: 1024px) {
:global(.vtex-store-components-3-x-listPrice) {
font-size: 12px;
line-height: 16px;
}
}
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
.listPrice .currencyContainer::before {
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before {
content: "de ";
}
.listPrice .currencyContainer::after {
:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after {
content: " por";
}
@ -58,6 +79,12 @@
line-height: 33px;
color: #000000;
}
@media screen and (max-width: 1024px) {
:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
font-size: 18px;
line-height: 25px;
}
}
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
visibility: hidden;
@ -87,10 +114,6 @@
}
}
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
.paginationDotsContainer {
align-items: center;
bottom: -30px;

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

@ -35,7 +35,6 @@
.productImageTag--main {
max-height: max-content !important;
max-width: max-content;
max-width: 100%;
}
@ -77,6 +76,9 @@
order: 2;
margin-bottom: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem--selected .diagonalCross {
color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 0;
}
@ -123,6 +125,9 @@
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorItem--selected .diagonalCross {
color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
@ -231,6 +236,10 @@
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
font-weight: 400;
@ -269,11 +278,15 @@
}
.shippingContainer :global(.vtex-button) {
font-size: 0;
background: black;
background: #000000;
width: 49px;
height: 49px;
border: none;
border-radius: 0;
cursor: pointer;
}
.shippingContainer :global(.vtex-button):hover {
opacity: 0.8;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "Ok";
@ -410,6 +423,10 @@
line-height: 19px;
color: #868686;
}
.subscriberContainer .form {
width: 100%;
margin: 0;
}
.subscriberContainer .form .content {
display: grid;
grid-template-areas: " nome email" " submit submit";
@ -454,6 +471,9 @@
border: none;
border-radius: 0;
}
.subscriberContainer .form .content .submit :global(.vtex-button):hover {
opacity: 0.8;
}
.subscriberContainer .form .content .submit :global(.vtex-button__label) {
font-size: 0;
}
@ -471,6 +491,9 @@
background: #000000;
margin-top: 96px;
}
.newsletter :global(.vtex-store-components-3-x-container) {
margin: auto;
}
.newsletter :global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px;
width: 774px;
@ -539,6 +562,9 @@
background-color: transparent;
border: none;
}
.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button):hover {
opacity: 0.8;
}
.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) {
border-bottom: 3px solid #929292;
padding: 6px 17px 12px !important;

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

@ -65,6 +65,9 @@
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label):hover {
color: #929292;
}
@media screen and (min-width: 1920px) {
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItem :global(.vtex-button__label) {
font-size: 24px;
@ -106,6 +109,9 @@
border-bottom: 2px solid #000000;
padding: 0;
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label):hover {
color: #000000;
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList .listItemActive :global(.vtex-button__label) {
flex-direction: column;
@ -139,26 +145,52 @@
max-width: 50%;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
max-width: 632px;
width: 100%;
max-width: 100%;
display: block;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
max-width: 50%;
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
width: 100% !important;
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
max-width: 100%;
}
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
margin-top: 0;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-paragraph) {
@media screen and (min-width: 1920px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
font-size: 32px;
line-height: 32px;
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
font-size: 20px;
line-height: 32px;
}
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (min-width: 1920px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
font-size: 14px;
line-height: 19px;
}
}

4
styles/sass/pages/product/vtex.add-to-cart-button.scss
View File

@ -5,4 +5,8 @@
text-align: center;
color: $white;
padding: 7px 0;
@media screen and (max-width: 768px) {
width: 168px;
}
}

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

@ -1,6 +1,13 @@
.flexRowContent {
margin: 0;
padding-top: 0;
}
.flexRowContent--product-availability {
@media screen and (max-width: 1024px) {
flex-direction: column;
}
}
.flexRowContent--menu-link,

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

@ -9,12 +9,6 @@
align-items: center;
}
// .imageNormal {
// width: 314px;
// height: 314px;
// max-height: 100%;
// }
// Nome do produto
.nameContainer {
@ -22,8 +16,13 @@
.brandName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
font-size: 18px;
line-height: 25px;
color: $black;
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}
}

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

@ -13,19 +13,39 @@
@media screen and (max-width: 1024px) {
width: 100%;
padding: 0 40px;
}
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: unset !important;
:global(.vtex-product-summary-2-x-element) {
padding: 0;
}
}
:global(.vtex-product-summary-2-x-imageNormal) {
height: 314px;
width: 105%;
max-height: unset !important;
object-fit: contain;
}
:global(.vtex-product-summary-2-x-imageStackContainer) {
display: flex;
}
}
// Informações de cada produto
.slideChildrenContainer {
width: 314px;
// width: 314px;
padding-right: 16px;
}
// Preço sem desconto
.listPrice {
:global(.vtex-store-components-3-x-listPrice) {
font-weight: 400;
font-size: 14px;
line-height: 19px;
@ -33,11 +53,16 @@
margin: 0;
padding-bottom: 8px;
.listPriceLabel {
@media screen and (max-width: 1024px) {
font-size: 12px;
line-height: 16px;
}
:global(.vtex-store-components-3-x-listPriceLabel) {
display: none;
}
.currencyContainer {
:global(.vtex-store-components-3-x-currencyContainer) {
&::before {
content: "de ";
}
@ -62,6 +87,11 @@
font-size: 24px;
line-height: 33px;
color: $black;
@media screen and (max-width: 1024px) {
font-size: 18px;
line-height: 25px;
}
}
}
@ -95,12 +125,6 @@
}
}
// Desconto
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
// Dots da prateleira de produtos
.paginationDotsContainer {

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

@ -29,8 +29,8 @@
.productImageTag--main {
max-height: max-content !important;
max-width: max-content;
max-width: 100%;
// max-width: max-content;
// max-width: 664px;
}
@ -76,6 +76,13 @@
order: 2;
margin-bottom: 16px;
.skuSelectorItem--selected {
.diagonalCross {
color: $black;
}
}
.skuSelectorNameContainer {
margin: 0;
}
@ -135,6 +142,13 @@
.skuSelectorOptionsList {
margin: 0;
}
.skuSelectorItem--selected {
.diagonalCross {
color: $black;
}
}
}
.skuSelectorItemTextValue {
@ -256,6 +270,10 @@
:global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $gray-400;
&::placeholder {
font-weight: 400;
@ -266,6 +284,9 @@
}
}
}
// Não sei meu CEP
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
right: -57px;
@ -279,7 +300,7 @@
display: flex;
align-items: center;
text-decoration-line: underline;
color: #000000 !important;
color: $black !important;
}
@media (max-width: 560px) {
@ -299,11 +320,16 @@
:global(.vtex-button) {
font-size: 0;
background: black;
background: $black;
width: 49px;
height: 49px;
border: none;
border-radius: 0;
cursor: pointer;
&:hover {
opacity: 0.8;
}
:global(.vtex-button__label)::after {
content: "Ok";
@ -318,102 +344,6 @@
}
}
// .shippingContainer {
// display: flex;
// width: 409px;
// height: 49px;
// @media (max-width: 560px) {
// width: 296px;
// }
// :global(.vtex-address-form__postalCode) {
// display: flex;
// align-items: center;
// padding-bottom: 0;
// // @media screen and (min-width: 280px) and (max-width: 768px) {
// // max-width: 296px;
// // }
// }
// :global(.vtex-input-prefix__group) {
// width: 280px;
// height: 49px;
// border-radius: 0;
// border: 1px solid $gray-1000;
// grid-area: input;
// :global(.vtex-address-form-4-x-input) {
// padding: 16.5px 16px;
// &::placeholder {
// font-weight: 400;
// font-size: 12px;
// line-height: 16px;
// color: $gray-400;
// }
// }
// }
// :global(.vtex-input__label) {
// font-size: 0;
// &::after {
// content: "CALCULAR FRETE:";
// font-weight: 400;
// font-size: 14px;
// line-height: 19px;
// color: $gray-500;
// }
// }
// :global(.vtex-button) {
// font-size: 0;
// position: relative;
// top: 27px;
// right: 147px;
// width: 49px;
// height: 49px;
// margin-top: 0;
// border: none;
// border-radius: 0;
// background-color: $black;
// cursor: pointer;
// grid-area: button;
// &::after {
// content: "OK";
// font-size: 14px;
// line-height: 19px;
// font-weight: 600;
// color: white;
// }
// }
// // Não sei meu CEP
// :global(.vtex-address-form__postalCode-forgottenURL) {
// grid-area: forgotten;
// padding: 0;
// position: relative;
// left: 32px;
// top: 10px;
// :last-child {
// color: $black;
// font-weight: 400;
// font-size: 12px;
// line-height: 16px;
// text-decoration: underline;
// :global(.vtex__icon-external-link) {
// display: none;
// }
// }
// }
// }
:global(.vtex-button__label) {
height: fit-content;
}
@ -469,7 +399,6 @@
font-size: 14px;
line-height: 19px;
color: $gray-700;
// margin-right: 40px;
}
}
@ -559,6 +488,9 @@
}
.form {
width: 100%;
margin: 0;
.content {
display: grid;
grid-template-areas:
@ -609,6 +541,10 @@
background-color: $black;
border: none;
border-radius: 0;
&:hover {
opacity: 0.8;
}
}
:global(.vtex-button__label) {
@ -631,10 +567,15 @@
// Newsletter
.newsletter {
display: block;
background: $black;
margin-top: 96px;
:global(.vtex-store-components-3-x-container) {
margin: auto;
}
:global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px;
width: 774px;
@ -704,6 +645,10 @@
color: $white;
background-color: transparent;
border: none;
&:hover {
opacity: 0.8;
}
}
:global(.vtex-button__label) {

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

@ -60,6 +60,10 @@
text-transform: capitalize;
padding: 0.25em 10px 0.32em;
&:hover {
color: $gray-500;
}
@media screen and (min-width: 1920px) {
font-size: 24px;
line-height: 24px;
@ -103,6 +107,10 @@
border-bottom: 2px solid $black;
padding: 0;
&:hover {
color: $black;
}
@media screen and (max-width: 1024px) {
flex-direction: column;
text-align: left;
@ -134,7 +142,7 @@
border-bottom: 1px solid $gray-100;
}
// Imagem do produto
// Imagem da descrição do produto
.productImagesContainer {
width: 50%;
@ -142,35 +150,64 @@
}
:global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
max-width: 632px;
width: 100%;
max-width: 100%;
display: block;
// max-width: 872px;
// @media screen and (max-width: 1024px) {
// width: 100% !important;
// max-width: 100%;
// }
}
// Conteúdo de texto da descrição do produto
:global(.vtex-rich-text-0-x-container--description-rich-text) {
max-width: 50%;
@media screen and (max-width: 1024px) {
width: 100% !important;
max-width: 100%;
}
}
// Título da descrição do produto
// Título da descrição do produto
:global(.vtex-rich-text-0-x-heading) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: $gray-600;
margin-top: 0;
}
:global(.vtex-rich-text-0-x-heading) {
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: $gray-600;
margin-top: 0;
// Texto descrição do produto
@media screen and (min-width: 1920px) {
font-size: 32px;
line-height: 32px;
}
:global(.vtex-rich-text-0-x-paragraph) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $gray-500;
// width: 50%;
@media screen and (max-width: 1024px) {
font-size: 20px;
line-height: 32px;
}
}
// Texto descrição do produto
:global(.vtex-rich-text-0-x-paragraph) {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $gray-500;
@media screen and (min-width: 1920px) {
font-size: 18px;
line-height: 25px;
}
@media screen and (max-width: 1024px) {
font-size: 14px;
line-height: 19px;
}
}
}
}
}