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

fix: faz akustes finais

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-02-10 23:07:18 -03:00
parent 02ef4d1502
commit 994521192d
19 changed files with 371 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,6 @@
column-gap: 10px; column-gap: 10px;
} }
/* Tablet */ /* Tablet */
@media (max-width: 1024px) { @media (max-width: 1024px) {
[class*="html--container__buyButton"] { [class*="html--container__buyButton"] {
@ -25,7 +23,8 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
width: 100%; width: 100%;
height: 49px; height: auto;
min-height: 49px;
max-width: 526px; max-width: 526px;
/* aqui é até 1440 */ /* aqui é até 1440 */
} }
@ -35,6 +34,12 @@
min-width: 766px; min-width: 766px;
} }
} }
@media (max-width: 768px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
max-height: 72px;
padding: 12px 64px ;
}
}
@media (min-width: 490px) { @media (min-width: 490px) {
[class*="html--container__buyButton"] :global(.vtex-button__label)::after { [class*="html--container__buyButton"] :global(.vtex-button__label)::after {
@ -42,12 +47,6 @@
} }
} }
@media (min-width: 1023px) and (max-width: 1025px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
min-width: 806px;
}
}
@media (max-width: 1440px) { @media (max-width: 1440px) {
[class*="html--container__buyButton"] :global(.vtex-button) { [class*="html--container__buyButton"] :global(.vtex-button) {
max-width: 806px; max-width: 806px;
@ -75,17 +74,23 @@
} }
} }
@media (min-width: 490px) { [class*="html--quantity"] {
[class*="html--container__buyButton"] :global(.vtex-button__label)::after { max-width: 128px!important;
max-width: none; height: 49px;
max-width: none; margin-bottom: 16px
} }
@media (max-width: 767px) {
[class*="html--quantity"] {
margin-bottom: 10px
}
} }
[class*="html--m3-add-to-cart-button "]{
width: 100%; }
/* Area do product sumary */
/* @media (min-width:374px) and (max-width:376px) {
[class*="html--m3-html-product-sumary"] {
height: 254.8px!important;
}} */
@media (max-width:1920px) { @media (max-width:1920px) {
[class*="html--m3-html-product-sumary"] { [class*="html--m3-html-product-sumary"] {
height: unset; height: unset;
@ -100,12 +105,12 @@ max-width:314.4px;
max-width: 291.2px; max-width: 291.2px;
}} }}
[class*="html--quantity"] {
max-width: 128px!important;
}
[class*="html--m3-html-product-sumary"]{ [class*="html--m3-html-product-sumary"]{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
[class*="html--m3-add-to-cart-button "]{ @media (min-width: 1920px) {
width: 100%; } [class*="html--m3-product-summary-list"] {
padding: 0 360px;
}
}

34
store/blocks/header/category-menu.json
View File

@ -23,17 +23,13 @@
"text": "Apparel & Accessories" "text": "Apparel & Accessories"
} }
}, },
"blocks": [ "blocks": ["vtex.menu@2.x:submenu#category-apparel"]
"vtex.menu@2.x:submenu#category-apparel"
]
}, },
"vtex.menu@2.x:submenu#category-apparel": { "vtex.menu@2.x:submenu#category-apparel": {
"props": { "props": {
"width": "auto" "width": "auto"
}, },
"children": [ "children": ["vtex.menu@2.x:menu#category-apparel"]
"vtex.menu@2.x:menu#category-apparel"
]
}, },
"vtex.menu@2.x:menu#category-apparel": { "vtex.menu@2.x:menu#category-apparel": {
"props": { "props": {
@ -119,42 +115,28 @@
"text": "More" "text": "More"
} }
}, },
"blocks": [ "blocks": ["vtex.menu@2.x:submenu#more"]
"vtex.menu@2.x:submenu#more"
]
}, },
"vtex.menu@2.x:submenu#more": { "vtex.menu@2.x:submenu#more": {
"props": { "props": {
"width": "100%" "width": "100%"
}, },
"children": [ "children": ["flex-layout.row#menu-more"]
"flex-layout.row#menu-more"
]
}, },
"flex-layout.row#menu-more": { "flex-layout.row#menu-more": {
"children": [ "children": ["flex-layout.col#menu-more-1", "flex-layout.col#menu-more-2"]
"flex-layout.col#menu-more-1",
"flex-layout.col#menu-more-2"
]
}, },
"flex-layout.col#menu-more-1": { "flex-layout.col#menu-more-1": {
"children": [ "children": ["vtex.menu@2.x:menu#more"]
"vtex.menu@2.x:menu#more"
]
}, },
"flex-layout.col#menu-more-2": { "flex-layout.col#menu-more-2": {
"children": [ "children": ["info-card#home"]
"info-card#home"
]
}, },
"vtex.menu@2.x:menu#more": { "vtex.menu@2.x:menu#more": {
"props": { "props": {
"orientation": "vertical" "orientation": "vertical"
}, },
"children": [ "children": ["menu-item#about-us", "menu-item#faq"]
"menu-item#about-us",
"menu-item#faq"
]
}, },
"menu-item#about-us": { "menu-item#about-us": {
"props": { "props": {

14
store/blocks/header/header.jsonc
View File

@ -19,7 +19,7 @@
"fullWidth": true "fullWidth": true
} }
}, },
"flex-layout.row#3-desktop": { "flex-layout.row#3-desktop": {
"props": { "props": {
"blockClass": "menu-link", "blockClass": "menu-link",
@ -80,9 +80,9 @@
"props": { "props": {
"title": "Logo", "title": "Logo",
"href": "/", "href": "/",
"url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png", "url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg",
"width": "180", "width": "140",
"height": "12" "height": "33"
} }
}, },
"header-layout.mobile": { "header-layout.mobile": {
@ -125,9 +125,9 @@
"props": { "props": {
"title": "Logo", "title": "Logo",
"href": "/", "href": "/",
"url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png", "url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg",
"width": "77.5", "width": "140",
"height": "27.5" "height": "33"
} }
} }
} }

1
store/blocks/pdp/product-shelf-related.jsonc
View File

@ -32,6 +32,7 @@
}, },
"html#slider-layout": { "html#slider-layout": {
"props": { "props": {
"blockClass": "m3-product-summary-list",
"testId": "product-summary-list" "testId": "product-summary-list"
}, },
"children": ["slider-layout#m3-carousel-products"] "children": ["slider-layout#m3-carousel-products"]

5
styles/css/vtex.breadcrumb.css
View File

@ -10,6 +10,11 @@
.container { .container {
padding: 16px 40px; padding: 16px 40px;
} }
@media (min-width: 1920px) {
.container {
padding: 16px 360px;
}
}
.container .homeIcon { .container .homeIcon {
display: none; display: none;
} }

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

@ -12,6 +12,11 @@
margin: 0; margin: 0;
column-gap: 32px; column-gap: 32px;
} }
@media (min-width: 1920px) {
.flexRowContent--product-main {
padding: 0 360px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRowContent--product-main { .flexRowContent--product-main {
flex-direction: column; flex-direction: column;
@ -23,6 +28,11 @@
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
} }
@media (min-width: 1920px) {
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
max-width: 904px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { .flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important; width: 100% !important;
@ -41,6 +51,11 @@
margin: 0; margin: 0;
gap: 32px; gap: 32px;
} }
@media (min-width: 1920px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0 360px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
flex-direction: column; flex-direction: column;
@ -52,6 +67,11 @@
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
} }
@media (min-width: 1920px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
max-width: 904px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important; width: 100% !important;
@ -69,6 +89,7 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) {
max-width: none; max-width: none;
text-align: initial;
} }
} }
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability { .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability {
@ -113,7 +134,7 @@
} }
@media (min-width: 1920px) { @media (min-width: 1920px) {
.flexRowContent--description .stretchChildrenWidth { .flexRowContent--description .stretchChildrenWidth {
width: unset !important; width: 100% !important;
} }
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {

3
styles/css/vtex.product-quantity.css
View File

@ -19,7 +19,8 @@
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button), .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button),
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) { .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
border: none; border: none;
background-color: #fff; background-color: #ffffff;
color: #000000;
} }
.quantitySelectorContainer--quantity__wrapper { .quantitySelectorContainer--quantity__wrapper {

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

@ -20,7 +20,7 @@
} }
:global(.vtex-product-summary-2-x-nameContainer) { :global(.vtex-product-summary-2-x-nameContainer) {
background-color: white; background-color: #ffffff;
width: 100%; width: 100%;
padding: 0; padding: 0;
padding-top: 16px; padding-top: 16px;

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

@ -7,20 +7,23 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
@media (min-width: 2000px) { @media (max-width: 590px) {
.sliderLayoutContainer--m3-carousel-products { .sliderLayoutContainer--m3-carousel-products {
max-width: 1920px; padding: 0 40px;
margin: 0 auto; min-width: 296px;
} }
} }
.sliderTrackContainer--m3-carousel-products { .sliderTrackContainer--m3-carousel-products {
max-width: 94.712%; width: 100%;
margin: 0 40px; padding: 0 40px;
} }
@media (max-width: 590px) { @media (max-width: 590px) {
.sliderTrackContainer--m3-carousel-products { .sliderTrackContainer--m3-carousel-products {
max-width: 78.9333333333%; min-width: 296px;
max-width: 100%;
margin: 0 auto;
padding: 0;
} }
} }

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

@ -113,6 +113,7 @@
:global(.vtex-store-components-3-x-container) { :global(.vtex-store-components-3-x-container) {
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
max-width: 100% !important;
} }
:global(.vtex-store-components-3-x-container) .productNameContainer--quickview { :global(.vtex-store-components-3-x-container) .productNameContainer--quickview {
text-align: end; text-align: end;
@ -124,17 +125,19 @@
} }
} }
.productImagesGallerySlide {
width: 100% !important;
}
.shippingContainer { .shippingContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative; position: relative;
width: 100%; width: 100%;
} }
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) { .shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
} }
@ -142,6 +145,7 @@
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute; position: absolute;
left: 312px; left: 312px;
top: 0;
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -152,12 +156,7 @@
text-decoration-line: underline; text-decoration-line: underline;
} }
.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: #000; color: #000000;
}
@media (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: initial;
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
@ -165,6 +164,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: auto; left: auto;
top: auto;
} }
} }
.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) {
@ -193,7 +193,7 @@
line-height: 16px; line-height: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #afafaf; color: #AFAFAF;
} }
.shippingContainer :global(.vtex-button) { .shippingContainer :global(.vtex-button) {
background: none; background: none;
@ -201,7 +201,8 @@
width: 49px; width: 49px;
height: 49px; height: 49px;
border-radius: 0; border-radius: 0;
background-color: #000; background-color: #000000;
cursor: pointer;
} }
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0; font-size: 0;
@ -298,7 +299,7 @@
line-height: 16px; line-height: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #afafaf; color: #AFAFAF;
padding: 0; padding: 0;
} }
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
@ -338,7 +339,7 @@
line-height: 19px; line-height: 19px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #868686; color: #afafaf;
} }
.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) { .subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0; font-size: 0;
@ -353,7 +354,7 @@
/* or 136% */ /* or 136% */
display: flex; display: flex;
align-items: center; align-items: center;
color: #868686; color: #afafaf;
} }
.subscriberContainer .form { .subscriberContainer .form {
width: 100%; width: 100%;
@ -428,7 +429,7 @@
height: 49px; height: 49px;
border: none; border: none;
border-radius: 0; border-radius: 0;
background: #000; background: #000000;
} }
.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { .subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0; font-size: 0;
@ -493,29 +494,80 @@
} }
.productDescriptionContainer .content { .productDescriptionContainer .content {
text-align: justify; text-align: justify;
max-width: 632px;
}
@media (max-width: 1024px) {
.productDescriptionContainer .content {
max-width: none;
}
}
.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: #929292; color: #6c6c6c;
max-width: 632px;
} }
@media (min-width: 1920px) { @media (min-width: 1920px) {
.productDescriptionContainer .content { .productDescriptionContainer .productDescriptionText {
max-width: 872px !important; max-width: 872px !important;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
} }
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.productDescriptionContainer .content { .productDescriptionContainer .productDescriptionText {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
max-width: none; max-width: none;
padding-bottom: 16px;
border-bottom: 1px solid #B9B9B9;
} }
} }
.skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
margin-left: 16px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
visibility: visible;
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
.skuSelectorSubcontainer--tamanho .frameAround {
width: 40px;
height: 40px;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
margin: auto;
padding: 0;
width: 40px;
height: 40px;
border-radius: 30px;
color: #000000;
border: 1px solid #989898;
}
.skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorOptionsList {
margin: 0;
}
.skuSelectorContainer { .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
@ -527,7 +579,7 @@
border-radius: 30px; border-radius: 30px;
z-index: 3; z-index: 3;
padding: 0; padding: 0;
border-color: #000; border-color: #000000;
top: 0; top: 0;
left: 0; left: 0;
} }
@ -542,6 +594,7 @@
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
margin-left: 0 !important; margin-left: 0 !important;
gap: 16px;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
margin: 0; margin: 0;
@ -560,6 +613,22 @@
line-height: 19px; line-height: 19px;
color: #929292; color: #929292;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #D5D5D5;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho { .skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -612,11 +681,12 @@
border: 1px solid #989898; border: 1px solid #989898;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
width: 30px; top: 2px;
height: 30px; right: 10px;
transform: rotate(274deg); bottom: 2px;
left: 4px; left: 10px;
top: 5px; transform: rotateY(180deg);
color: #D5D5D5;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
padding: 0; padding: 0;
@ -629,6 +699,14 @@
line-height: 19px; line-height: 19px;
color: rgba(185, 185, 185, 0.6); color: rgba(185, 185, 185, 0.6);
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
color: #000000; color: #000000;
} }

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

@ -13,12 +13,12 @@
} }
@media (min-width: 1920px) { @media (min-width: 1920px) {
.container--tab-product { .container--tab-product {
max-width: 1840px; padding: 0 360px;
} }
} }
.container--tab-product .listContainer--m3-tab-list-product { .container--tab-product .listContainer--m3-tab-list-product {
justify-content: space-around; justify-content: space-around;
border-bottom: 1px solid #B9B9B9; border-bottom: 1px solid #989898;
margin-bottom: 32px; margin-bottom: 32px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {

4
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -1,6 +1,10 @@
.container { .container {
padding: 16px 40px; padding: 16px 40px;
@media (min-width:1920px) {
padding: 16px 360px;
}
.homeIcon { .homeIcon {
display: none; display: none;
} }

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

@ -4,6 +4,11 @@
margin: 0; margin: 0;
column-gap: 32px; column-gap: 32px;
@media (min-width:1920px) {
padding: 0 360px;
}
@media (max-width:1024px) { @media (max-width:1024px) {
flex-direction: column; flex-direction: column;
} }
@ -14,6 +19,10 @@
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
@media (min-width:1920px) {
max-width: 904px;
}
@media (max-width:1024px) { @media (max-width:1024px) {
width: 100% !important; width: 100% !important;
max-width: 944px; max-width: 944px;
@ -21,6 +30,7 @@
} }
} }
// FIM PRODUCT // FIM PRODUCT
// INICIO INDISPONIVEL // INICIO INDISPONIVEL
@ -37,18 +47,24 @@
margin: 0; margin: 0;
gap: 32px; gap: 32px;
@media (min-width:1920px) {
padding: 0 360px;
}
@media (max-width:1024px) { @media (max-width:1024px) {
// padding: 0 40px;
flex-direction: column; flex-direction: column;
} }
// padding: 0 40px;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) { :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px; min-width: 296px;
max-width: 664px; max-width: 664px;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
@media (min-width:1920px) {
max-width: 904px;
}
@media (max-width:1024px) { @media (max-width:1024px) {
width: 100% !important; width: 100% !important;
max-width: 944px; max-width: 944px;
@ -60,18 +76,15 @@
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
// max-width: 90%;
text-align: end; text-align: end;
@media (max-width:1024px) { @media (max-width:1024px) {
max-width: none; max-width: none;
text-align: initial;
} }
} }
@media (max-width:1024px) { @media (max-width:1024px) {}
// width: 100% !important;
// max-width: none;
}
.flexColChild--info-availability { .flexColChild--info-availability {
height: 68px; height: 68px;
@ -130,7 +143,7 @@
@media (min-width:1920px) { @media (min-width:1920px) {
.stretchChildrenWidth { .stretchChildrenWidth {
width: unset !important; width: 100% !important;
} }
} }

5
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -1,5 +1,5 @@
.quantitySelectorStepper { .quantitySelectorStepper {
border: 1px solid #989898; border: 1px solid $color-gray10;
max-width: 128px; max-width: 128px;
padding: 3.5px 0; padding: 3.5px 0;
@ -15,7 +15,8 @@
:global(.vtex-numeric-stepper__plus-button), :global(.vtex-numeric-stepper__plus-button),
:global(.vtex-numeric-stepper__minus-button) { :global(.vtex-numeric-stepper__minus-button) {
border: none; border: none;
background-color: #fff; background-color: $color-white;
color: $color-black;
} }
} }
} }

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

@ -12,7 +12,7 @@
} }
:global(.vtex-product-summary-2-x-nameContainer) { :global(.vtex-product-summary-2-x-nameContainer) {
background-color: white; background-color: $color-white;
width: 100%; width: 100%;
padding: 0; padding: 0;
padding-top: 16px; padding-top: 16px;

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

@ -1,21 +1,27 @@
.sliderLayoutContainer--m3-carousel-products { .sliderLayoutContainer--m3-carousel-products {
@media (min-width:2000px) {
max-width: 1920px; @media (max-width:590px) {
margin: 0 auto; padding: 0 40px;
min-width: 296px;
} }
} }
.sliderTrackContainer--m3-carousel-products { .sliderTrackContainer--m3-carousel-products {
max-width: 94.712%; width: 100%; // margin: 0 auto;
// margin: 0 auto; padding: 0 40px;
margin: 0 40px;
@media (max-width:590px) { @media (max-width:590px) {
max-width: 78.933333333333333333333333333333%; min-width: 296px;
max-width: 100%;
margin: 0 auto;
padding: 0;
} }
} }
// card // card
.slide--m3-carousel-products { .slide--m3-carousel-products {
margin: 0 8px; margin: 0 8px;

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

@ -120,6 +120,7 @@
:global(.vtex-store-components-3-x-container) { :global(.vtex-store-components-3-x-container) {
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
max-width: 100% !important;
.productNameContainer--quickview { .productNameContainer--quickview {
text-align: end; text-align: end;
@ -131,6 +132,9 @@
} }
} }
.productImagesGallerySlide {
width: 100% !important;
}
// Area de formulario do cep // Area de formulario do cep
.shippingContainer { .shippingContainer {
@ -140,9 +144,9 @@
width: 100%; width: 100%;
:global(.vtex-address-form__postalCode) { :global(.vtex-address-form__postalCode) {
display: flex;
@media (max-width:768px) { @media (max-width:768px) {
display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
} }
@ -150,6 +154,7 @@
:global(.vtex-address-form__postalCode-forgottenURL) { :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute; position: absolute;
left: 312px; left: 312px;
top: 0;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -160,18 +165,19 @@
text-decoration-line: underline; text-decoration-line: underline;
:last-child { :last-child {
color: #000; color: $color-black;
} }
@media (max-width:1024px) { // @media (max-width:1024px) {
position: initial; // position: initial;
} // }
@media (max-width:768px) { @media (max-width:768px) {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: auto; left: auto;
top: auto;
} }
:global(.vtex__icon-external-link) { :global(.vtex__icon-external-link) {
@ -185,7 +191,7 @@
} }
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
border: 1px solid #cccccc; border: 1px solid $color-gray12;
border-radius: 0; border-radius: 0;
max-width: 231px; max-width: 231px;
height: 49px; height: 49px;
@ -205,7 +211,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: #afafaf; color: $color-gray7;
} }
@ -217,7 +223,8 @@
width: 49px; width: 49px;
height: 49px; height: 49px;
border-radius: 0; border-radius: 0;
background-color: #000; background-color: $color-black;
cursor: pointer;
:global(.vtex-button__label) { :global(.vtex-button__label) {
font-size: 0; font-size: 0;
@ -234,7 +241,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: #ffffff; color: $color-white;
} }
} }
} }
@ -267,7 +274,7 @@
line-height: 19px; line-height: 19px;
text-transform: uppercase; text-transform: uppercase;
/* identical to box height */ /* identical to box height */
color: #202020; color: $color-gray14;
} }
.shippingTableHeadDeliveryName { .shippingTableHeadDeliveryName {
@ -299,7 +306,7 @@
text-transform: uppercase; text-transform: uppercase;
/* identical to box height */ /* identical to box height */
color: #202020; color: $color-gray14
} }
} }
} }
@ -329,7 +336,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: #afafaf; color: $color-gray7;
padding: 0; padding: 0;
} }
@ -388,7 +395,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: #868686; color: $color-gray13;
} }
} }
@ -407,7 +414,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: #868686; color: $color-gray13;
} }
} }
@ -493,7 +500,7 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
background: #000; background: $color-black;
:global(.vtex-button__label) { :global(.vtex-button__label) {
font-size: 0; font-size: 0;
@ -510,7 +517,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: #ffffff; color: $color-white;
@media (min-width:1920px) { @media (min-width:1920px) {
font-weight: 600; font-weight: 600;
@ -561,7 +568,6 @@
// FIM INDISPONIVEL // FIM INDISPONIVEL
// INICIO DESCRIÇÃO // INICIO DESCRIÇÃO
.flexRow--description {}
.productDescriptionContainer { .productDescriptionContainer {
.productDescriptionTitle { .productDescriptionTitle {
@ -575,13 +581,23 @@
.content { .content {
text-align: justify; text-align: justify;
max-width: 632px;
@media (max-width:1024px) {
max-width: none;
}
}
.productDescriptionText {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
color: $color-gray6; color: $color-gray;
max-width: 632px;
@media (min-width:1920px) { @media (min-width:1920px) {
@ -595,117 +611,68 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
max-width: none; max-width: none;
// max-width: none !important; padding-bottom: 16px;
border-bottom: 1px solid $color-gray11;
} }
} }
} }
// SKU E TAMANHOS
// .skuSelectorContainer {
// display: flex;
// flex-direction: column-reverse;
// .skuSelectorSubcontainer--cor { .skuSelectorSubcontainer--tamanho {
// .skuSelectorName {
// font-size: 0;
// margin-left: 16px; .skuSelectorName {
font-size: 0;
// &::after { margin-left: 16px;
// visibility: visible;
// display: block;
// content: "OUTRAS CORES:";
// font-size: 14px;
// }
// }
// .skuSelectorSelectorImageValue, &::after {
// .skuSelectorNameSeparator { visibility: visible;
// display: none; display: block;
// } content: "OUTROS TAMANHOS:";
font-size: 14px;
}
}
// .frameAround { .frameAround {
// border-radius: 30px; // border: 1px solid $color-gray10;
// } width: 40px;
height: 40px;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
}
// .skuSelectorItemImageValue, .skuSelectorInternalBox {
// .skuSelectorInternalBox { margin: auto;
// border-radius: 21px; padding: 0;
// color: $color-black; width: 40px;
// } height: 40px;
// } border-radius: 30px;
color: $color-black;
border: 1px solid $color-gray10;
}
// .diagonalCross { .skuSelectorItemTextValue {
// top: 0px; padding: 0;
// right: 10px; margin: auto;
// bottom: 0px; font-family: $font-family;
// left: 10px; font-style: normal;
// transform: rotateY(180deg); font-weight: 400;
// color: black; font-size: 14px;
// } line-height: 19px;
// .skuSelectorSubcontainer--tamanho {
// .skuSelectorName {
// font-size: 0;
// margin-left: 16px;
// &::after {
// visibility: visible;
// display: block;
// content: "OUTROS TAMANHOS:";
// font-size: 14px;
// }
// }
// .frameAround {
// // border: 1px solid #989898;
// width: 40px;
// height: 40px;
// border-radius: 30px;
// top: 0;
// left: 0;
// right: 0;
// }
// .skuSelectorInternalBox {
// margin: auto;
// padding: 0;
// width: 40px;
// height: 40px;
// border-radius: 30px;
// color: $color-black;
// border: 1px solid #989898;
// }
// .skuSelectorItemTextValue {
// padding: 0;
// margin: auto;
// font-family: $font-family;
// font-style: normal;
// font-weight: 400;
// font-size: 14px;
// line-height: 19px;
// color: rgba(185, 185, 185, 0.6); color: rgba(185, 185, 185, 0.6);
// } }
// } }
// .valueWrapper .skuSelectorItemTextValue {
// margin-right: 5px;
// }
// .frameAround { .skuSelectorOptionsList {
// border-color: #000; margin: 0;
// z-index: 9; }
// }
// }
// .skuSelectorOptionsList {
// margin: 0;
// }
.skuSelectorContainer { .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
@ -717,7 +684,7 @@
border-radius: 30px; border-radius: 30px;
z-index: 3; z-index: 3;
padding: 0; padding: 0;
border-color: #000; border-color: $color-black;
top: 0; top: 0;
left: 0; left: 0;
} }
@ -734,6 +701,7 @@
.skuSelectorOptionsList { .skuSelectorOptionsList {
margin-left: 0 !important; margin-left: 0 !important;
gap: 16px;
.skuSelectorItem { .skuSelectorItem {
margin: 0; margin: 0;
@ -753,7 +721,32 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: #929292; color: $color-gray6
}
}
}
.diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #D5D5D5;
}
.skuSelectorItem--selected {
.skuSelectorInternalBox {
.diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: $color-black;
} }
} }
} }
@ -776,11 +769,13 @@
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
content: 'OUTROS TAMANHOS: '; content: 'OUTROS TAMANHOS: ';
color: #929292; color: $color-gray6
} }
} }
} }
.skuSelectorOptionsList { .skuSelectorOptionsList {
margin: 0; margin: 0;
margin-left: 0; margin-left: 0;
@ -793,7 +788,7 @@
margin: 0; margin: 0;
.frameAround--sku-selector { .frameAround--sku-selector {
border-color: #000000; border-color: $color-black;
border-width: 2px; border-width: 2px;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -813,14 +808,15 @@
border-radius: 100%; border-radius: 100%;
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 1px solid #989898; border: 1px solid $color-gray10;
.diagonalCross { .diagonalCross {
width: 30px; top: 2px;
height: 30px; right: 10px;
transform: rotate(274deg); bottom: 2px;
left: 4px; left: 10px;
top: 5px; transform: rotateY(180deg);
color: #D5D5D5;
} }
@ -841,9 +837,20 @@
} }
.skuSelectorItem--selected { .skuSelectorItem--selected {
.skuSelectorInternalBox { .skuSelectorInternalBox {
.diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: $color-black;
}
.skuSelectorItemTextValue { .skuSelectorItemTextValue {
color: #000000; color: $color-black;
} }
} }
} }

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

@ -1,20 +1,18 @@
.container--tab-product { .container--tab-product {
width: 100%; width: 100%;
// max-width: 94.44%;
// margin: 0 auto;
padding: 0 40px; padding: 0 40px;
@media (min-width:1920px) {
max-width: 1840px;
@media (min-width:1920px) {
padding: 0 360px;
} }
.listContainer--m3-tab-list-product { .listContainer--m3-tab-list-product {
justify-content: space-around; justify-content: space-around;
border-bottom: 1px solid #B9B9B9; border-bottom: 1px solid $color-gray10;
margin-bottom: 32px; margin-bottom: 32px;
@media (max-width:1024px) { @media (max-width:1024px) {
@ -67,7 +65,7 @@
:global(.vtex-button) { :global(.vtex-button) {
background-color: $color-white; background-color: $color-white;
border: none; border: none;
border-bottom: 2px solid #000000; border-bottom: 2px solid $color-black;
border-radius: 0; border-radius: 0;
position: relative; position: relative;
top: 2px; top: 2px;
@ -85,7 +83,7 @@
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
color: #000000; color: $color-black;
@media (max-width:1024px) { @media (max-width:1024px) {
padding-left: 0; padding-left: 0;

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

@ -15,6 +15,10 @@ $color-gray7: #AFAFAF;
$color-gray8: #BFBFBF; $color-gray8: #BFBFBF;
$color-gray9: #BABABA; $color-gray9: #BABABA;
$color-gray10: #989898; $color-gray10: #989898;
$color-gray11: #B9B9B9;
$color-gray12: #cccccc;
$color-gray13: #afafaf;
$color-gray14: #202020;
$color-blue: #4267b2; $color-blue: #4267b2;