diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index b775543..e5460d8 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -3,8 +3,6 @@
column-gap: 10px;
}
-
-
/* Tablet */
@media (max-width: 1024px) {
[class*="html--container__buyButton"] {
@@ -25,7 +23,8 @@
border: none;
border-radius: 0;
width: 100%;
- height: 49px;
+ height: auto;
+ min-height: 49px;
max-width: 526px;
/* aqui é até 1440 */
}
@@ -35,6 +34,12 @@
min-width: 766px;
}
}
+@media (max-width: 768px) {
+ [class*="html--container__buyButton"] :global(.vtex-button) {
+ max-height: 72px;
+ padding: 12px 64px ;
+ }
+}
@media (min-width: 490px) {
[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) {
[class*="html--container__buyButton"] :global(.vtex-button) {
max-width: 806px;
@@ -75,17 +74,23 @@
}
}
-@media (min-width: 490px) {
- [class*="html--container__buyButton"] :global(.vtex-button__label)::after {
- max-width: none;
- max-width: none;
- }
+[class*="html--quantity"] {
+ max-width: 128px!important;
+ height: 49px;
+ 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) {
[class*="html--m3-html-product-sumary"] {
height: unset;
@@ -100,12 +105,12 @@ max-width:314.4px;
max-width: 291.2px;
}}
-[class*="html--quantity"] {
- max-width: 128px!important;
- }
[class*="html--m3-html-product-sumary"]{
display: flex;
flex-direction: column;
}
- [class*="html--m3-add-to-cart-button "]{
- width: 100%; }
+ @media (min-width: 1920px) {
+ [class*="html--m3-product-summary-list"] {
+ padding: 0 360px;
+ }
+ }
diff --git a/store/blocks/header/category-menu.json b/store/blocks/header/category-menu.json
index f641551..b3e7f9f 100644
--- a/store/blocks/header/category-menu.json
+++ b/store/blocks/header/category-menu.json
@@ -23,17 +23,13 @@
"text": "Apparel & Accessories"
}
},
- "blocks": [
- "vtex.menu@2.x:submenu#category-apparel"
- ]
+ "blocks": ["vtex.menu@2.x:submenu#category-apparel"]
},
"vtex.menu@2.x:submenu#category-apparel": {
"props": {
"width": "auto"
},
- "children": [
- "vtex.menu@2.x:menu#category-apparel"
- ]
+ "children": ["vtex.menu@2.x:menu#category-apparel"]
},
"vtex.menu@2.x:menu#category-apparel": {
"props": {
@@ -119,42 +115,28 @@
"text": "More"
}
},
- "blocks": [
- "vtex.menu@2.x:submenu#more"
- ]
+ "blocks": ["vtex.menu@2.x:submenu#more"]
},
"vtex.menu@2.x:submenu#more": {
"props": {
"width": "100%"
},
- "children": [
- "flex-layout.row#menu-more"
- ]
+ "children": ["flex-layout.row#menu-more"]
},
"flex-layout.row#menu-more": {
- "children": [
- "flex-layout.col#menu-more-1",
- "flex-layout.col#menu-more-2"
- ]
+ "children": ["flex-layout.col#menu-more-1", "flex-layout.col#menu-more-2"]
},
"flex-layout.col#menu-more-1": {
- "children": [
- "vtex.menu@2.x:menu#more"
- ]
+ "children": ["vtex.menu@2.x:menu#more"]
},
"flex-layout.col#menu-more-2": {
- "children": [
- "info-card#home"
- ]
+ "children": ["info-card#home"]
},
"vtex.menu@2.x:menu#more": {
"props": {
"orientation": "vertical"
},
- "children": [
- "menu-item#about-us",
- "menu-item#faq"
- ]
+ "children": ["menu-item#about-us", "menu-item#faq"]
},
"menu-item#about-us": {
"props": {
diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc
index ab2c0c0..e79a49b 100644
--- a/store/blocks/header/header.jsonc
+++ b/store/blocks/header/header.jsonc
@@ -19,7 +19,7 @@
"fullWidth": true
}
},
-
+
"flex-layout.row#3-desktop": {
"props": {
"blockClass": "menu-link",
@@ -80,9 +80,9 @@
"props": {
"title": "Logo",
"href": "/",
- "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
- "width": "180",
- "height": "12"
+ "url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg",
+ "width": "140",
+ "height": "33"
}
},
"header-layout.mobile": {
@@ -125,9 +125,9 @@
"props": {
"title": "Logo",
"href": "/",
- "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
- "width": "77.5",
- "height": "27.5"
+ "url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg",
+ "width": "140",
+ "height": "33"
}
}
}
diff --git a/store/blocks/pdp/product-shelf-related.jsonc b/store/blocks/pdp/product-shelf-related.jsonc
index b2d4e7d..bbc5ab6 100644
--- a/store/blocks/pdp/product-shelf-related.jsonc
+++ b/store/blocks/pdp/product-shelf-related.jsonc
@@ -32,6 +32,7 @@
},
"html#slider-layout": {
"props": {
+ "blockClass": "m3-product-summary-list",
"testId": "product-summary-list"
},
"children": ["slider-layout#m3-carousel-products"]
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 343dcfa..105f0f2 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -10,6 +10,11 @@
.container {
padding: 16px 40px;
}
+@media (min-width: 1920px) {
+ .container {
+ padding: 16px 360px;
+ }
+}
.container .homeIcon {
display: none;
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index b040f82..951c0c1 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -12,6 +12,11 @@
margin: 0;
column-gap: 32px;
}
+@media (min-width: 1920px) {
+ .flexRowContent--product-main {
+ padding: 0 360px;
+ }
+}
@media (max-width: 1024px) {
.flexRowContent--product-main {
flex-direction: column;
@@ -23,6 +28,11 @@
padding: 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) {
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
@@ -41,6 +51,11 @@
margin: 0;
gap: 32px;
}
+@media (min-width: 1920px) {
+ .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
+ padding: 0 360px;
+ }
+}
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
flex-direction: column;
@@ -52,6 +67,11 @@
padding: 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) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
@@ -69,6 +89,7 @@
@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) {
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 {
@@ -113,7 +134,7 @@
}
@media (min-width: 1920px) {
.flexRowContent--description .stretchChildrenWidth {
- width: unset !important;
+ width: 100% !important;
}
}
@media (max-width: 1024px) {
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index a547762..016c9be 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -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__minus-button) {
border: none;
- background-color: #fff;
+ background-color: #ffffff;
+ color: #000000;
}
.quantitySelectorContainer--quantity__wrapper {
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 5c04d42..39301b0 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -20,7 +20,7 @@
}
:global(.vtex-product-summary-2-x-nameContainer) {
- background-color: white;
+ background-color: #ffffff;
width: 100%;
padding: 0;
padding-top: 16px;
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 6137049..a78a587 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -7,20 +7,23 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
-@media (min-width: 2000px) {
+@media (max-width: 590px) {
.sliderLayoutContainer--m3-carousel-products {
- max-width: 1920px;
- margin: 0 auto;
+ padding: 0 40px;
+ min-width: 296px;
}
}
.sliderTrackContainer--m3-carousel-products {
- max-width: 94.712%;
- margin: 0 40px;
+ width: 100%;
+ padding: 0 40px;
}
@media (max-width: 590px) {
.sliderTrackContainer--m3-carousel-products {
- max-width: 78.9333333333%;
+ min-width: 296px;
+ max-width: 100%;
+ margin: 0 auto;
+ padding: 0;
}
}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 058e6ec..1d80a66 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -113,6 +113,7 @@
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
+ max-width: 100% !important;
}
:global(.vtex-store-components-3-x-container) .productNameContainer--quickview {
text-align: end;
@@ -124,17 +125,19 @@
}
}
+.productImagesGallerySlide {
+ width: 100% !important;
+}
+
.shippingContainer {
display: flex;
flex-direction: row;
position: relative;
width: 100%;
}
-.shippingContainer :global(.vtex-address-form__postalCode) {
- display: flex;
-}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
+ display: flex;
width: 100%;
flex-direction: column;
}
@@ -142,6 +145,7 @@
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
left: 312px;
+ top: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
@@ -152,12 +156,7 @@
text-decoration-line: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
- color: #000;
-}
-@media (max-width: 1024px) {
- .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
- position: initial;
- }
+ color: #000000;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
@@ -165,6 +164,7 @@
right: 0;
bottom: 0;
left: auto;
+ top: auto;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
@@ -193,7 +193,7 @@
line-height: 16px;
display: flex;
align-items: center;
- color: #afafaf;
+ color: #AFAFAF;
}
.shippingContainer :global(.vtex-button) {
background: none;
@@ -201,7 +201,8 @@
width: 49px;
height: 49px;
border-radius: 0;
- background-color: #000;
+ background-color: #000000;
+ cursor: pointer;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
@@ -298,7 +299,7 @@
line-height: 16px;
display: flex;
align-items: center;
- color: #afafaf;
+ color: #AFAFAF;
padding: 0;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
@@ -338,7 +339,7 @@
line-height: 19px;
display: flex;
align-items: center;
- color: #868686;
+ color: #afafaf;
}
.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
@@ -353,7 +354,7 @@
/* or 136% */
display: flex;
align-items: center;
- color: #868686;
+ color: #afafaf;
}
.subscriberContainer .form {
width: 100%;
@@ -428,7 +429,7 @@
height: 49px;
border: none;
border-radius: 0;
- background: #000;
+ background: #000000;
}
.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
@@ -493,29 +494,80 @@
}
.productDescriptionContainer .content {
text-align: justify;
+ max-width: 632px;
+}
+@media (max-width: 1024px) {
+ .productDescriptionContainer .content {
+ max-width: none;
+ }
+}
+.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
- color: #929292;
- max-width: 632px;
+ color: #6c6c6c;
}
@media (min-width: 1920px) {
- .productDescriptionContainer .content {
+ .productDescriptionContainer .productDescriptionText {
max-width: 872px !important;
font-size: 18px;
line-height: 25px;
}
}
@media (max-width: 1024px) {
- .productDescriptionContainer .content {
+ .productDescriptionContainer .productDescriptionText {
font-size: 14px;
line-height: 19px;
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 {
display: flex;
flex-direction: column-reverse;
@@ -527,7 +579,7 @@
border-radius: 30px;
z-index: 3;
padding: 0;
- border-color: #000;
+ border-color: #000000;
top: 0;
left: 0;
}
@@ -542,6 +594,7 @@
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
margin-left: 0 !important;
+ gap: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
margin: 0;
@@ -560,6 +613,22 @@
line-height: 19px;
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 {
margin-bottom: 10px;
}
@@ -612,11 +681,12 @@
border: 1px solid #989898;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
- width: 30px;
- height: 30px;
- transform: rotate(274deg);
- left: 4px;
- top: 5px;
+ top: 2px;
+ right: 10px;
+ bottom: 2px;
+ left: 10px;
+ transform: rotateY(180deg);
+ color: #D5D5D5;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
padding: 0;
@@ -629,6 +699,14 @@
line-height: 19px;
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 {
color: #000000;
}
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index bbd2888..b8565f3 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -13,12 +13,12 @@
}
@media (min-width: 1920px) {
.container--tab-product {
- max-width: 1840px;
+ padding: 0 360px;
}
}
.container--tab-product .listContainer--m3-tab-list-product {
justify-content: space-around;
- border-bottom: 1px solid #B9B9B9;
+ border-bottom: 1px solid #989898;
margin-bottom: 32px;
}
@media (max-width: 1024px) {
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 968d7f9..6b64c75 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,6 +1,10 @@
.container {
padding: 16px 40px;
+ @media (min-width:1920px) {
+ padding: 16px 360px;
+ }
+
.homeIcon {
display: none;
}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 74ddf7d..b4654be 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -4,6 +4,11 @@
margin: 0;
column-gap: 32px;
+
+ @media (min-width:1920px) {
+ padding: 0 360px;
+ }
+
@media (max-width:1024px) {
flex-direction: column;
}
@@ -14,6 +19,10 @@
padding: 0;
border-radius: 0;
+ @media (min-width:1920px) {
+ max-width: 904px;
+ }
+
@media (max-width:1024px) {
width: 100% !important;
max-width: 944px;
@@ -21,6 +30,7 @@
}
}
+
// FIM PRODUCT
// INICIO INDISPONIVEL
@@ -37,18 +47,24 @@
margin: 0;
gap: 32px;
+ @media (min-width:1920px) {
+ padding: 0 360px;
+ }
+
@media (max-width:1024px) {
- // padding: 0 40px;
flex-direction: column;
}
- // padding: 0 40px;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px;
max-width: 664px;
padding: 0;
border-radius: 0;
+ @media (min-width:1920px) {
+ max-width: 904px;
+ }
+
@media (max-width:1024px) {
width: 100% !important;
max-width: 944px;
@@ -60,18 +76,15 @@
font-weight: 300;
font-size: 20px;
line-height: 34px;
- // max-width: 90%;
text-align: end;
@media (max-width:1024px) {
max-width: none;
+ text-align: initial;
}
}
- @media (max-width:1024px) {
- // width: 100% !important;
- // max-width: none;
- }
+ @media (max-width:1024px) {}
.flexColChild--info-availability {
height: 68px;
@@ -130,7 +143,7 @@
@media (min-width:1920px) {
.stretchChildrenWidth {
- width: unset !important;
+ width: 100% !important;
}
}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 1ac41e1..edd965d 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -1,5 +1,5 @@
.quantitySelectorStepper {
- border: 1px solid #989898;
+ border: 1px solid $color-gray10;
max-width: 128px;
padding: 3.5px 0;
@@ -15,7 +15,8 @@
:global(.vtex-numeric-stepper__plus-button),
:global(.vtex-numeric-stepper__minus-button) {
border: none;
- background-color: #fff;
+ background-color: $color-white;
+ color: $color-black;
}
}
}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index db8cf50..6bb1c5a 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -12,7 +12,7 @@
}
:global(.vtex-product-summary-2-x-nameContainer) {
- background-color: white;
+ background-color: $color-white;
width: 100%;
padding: 0;
padding-top: 16px;
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index f832ce8..0971d59 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,21 +1,27 @@
.sliderLayoutContainer--m3-carousel-products {
- @media (min-width:2000px) {
- max-width: 1920px;
- margin: 0 auto;
+
+ @media (max-width:590px) {
+ padding: 0 40px;
+ min-width: 296px;
}
}
.sliderTrackContainer--m3-carousel-products {
- max-width: 94.712%;
- // margin: 0 auto;
- margin: 0 40px;
+ width: 100%; // margin: 0 auto;
+ padding: 0 40px;
@media (max-width:590px) {
- max-width: 78.933333333333333333333333333333%;
+ min-width: 296px;
+ max-width: 100%;
+ margin: 0 auto;
+ padding: 0;
}
+
+
}
+
// card
.slide--m3-carousel-products {
margin: 0 8px;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 002a4cc..88f2b70 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -120,6 +120,7 @@
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
+ max-width: 100% !important;
.productNameContainer--quickview {
text-align: end;
@@ -131,6 +132,9 @@
}
}
+.productImagesGallerySlide {
+ width: 100% !important;
+}
// Area de formulario do cep
.shippingContainer {
@@ -140,9 +144,9 @@
width: 100%;
:global(.vtex-address-form__postalCode) {
- display: flex;
@media (max-width:768px) {
+ display: flex;
width: 100%;
flex-direction: column;
}
@@ -150,6 +154,7 @@
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
left: 312px;
+ top: 0;
font-family: $font-family;
font-style: normal;
font-weight: 400;
@@ -160,18 +165,19 @@
text-decoration-line: underline;
:last-child {
- color: #000;
+ color: $color-black;
}
- @media (max-width:1024px) {
- position: initial;
- }
+ // @media (max-width:1024px) {
+ // position: initial;
+ // }
@media (max-width:768px) {
position: absolute;
right: 0;
bottom: 0;
left: auto;
+ top: auto;
}
:global(.vtex__icon-external-link) {
@@ -185,7 +191,7 @@
}
:global(.vtex-input-prefix__group) {
- border: 1px solid #cccccc;
+ border: 1px solid $color-gray12;
border-radius: 0;
max-width: 231px;
height: 49px;
@@ -205,7 +211,7 @@
display: flex;
align-items: center;
- color: #afafaf;
+ color: $color-gray7;
}
@@ -217,7 +223,8 @@
width: 49px;
height: 49px;
border-radius: 0;
- background-color: #000;
+ background-color: $color-black;
+ cursor: pointer;
:global(.vtex-button__label) {
font-size: 0;
@@ -234,7 +241,7 @@
display: flex;
align-items: center;
- color: #ffffff;
+ color: $color-white;
}
}
}
@@ -267,7 +274,7 @@
line-height: 19px;
text-transform: uppercase;
/* identical to box height */
- color: #202020;
+ color: $color-gray14;
}
.shippingTableHeadDeliveryName {
@@ -299,7 +306,7 @@
text-transform: uppercase;
/* identical to box height */
- color: #202020;
+ color: $color-gray14
}
}
}
@@ -329,7 +336,7 @@
display: flex;
align-items: center;
- color: #afafaf;
+ color: $color-gray7;
padding: 0;
}
@@ -388,7 +395,7 @@
display: flex;
align-items: center;
- color: #868686;
+ color: $color-gray13;
}
}
@@ -407,7 +414,7 @@
display: flex;
align-items: center;
- color: #868686;
+ color: $color-gray13;
}
}
@@ -493,7 +500,7 @@
border: none;
border-radius: 0;
- background: #000;
+ background: $color-black;
:global(.vtex-button__label) {
font-size: 0;
@@ -510,7 +517,7 @@
display: flex;
align-items: center;
- color: #ffffff;
+ color: $color-white;
@media (min-width:1920px) {
font-weight: 600;
@@ -561,7 +568,6 @@
// FIM INDISPONIVEL
// INICIO DESCRIÇÃO
-.flexRow--description {}
.productDescriptionContainer {
.productDescriptionTitle {
@@ -575,13 +581,23 @@
.content {
text-align: justify;
+ max-width: 632px;
+
+ @media (max-width:1024px) {
+ max-width: none;
+ }
+ }
+
+ .productDescriptionText {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
- color: $color-gray6;
- max-width: 632px;
+ color: $color-gray;
+
+
+
@media (min-width:1920px) {
@@ -595,117 +611,68 @@
font-size: 14px;
line-height: 19px;
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 {
-// .skuSelectorName {
-// font-size: 0;
+.skuSelectorSubcontainer--tamanho {
-// margin-left: 16px;
+ .skuSelectorName {
+ font-size: 0;
-// &::after {
-// visibility: visible;
-// display: block;
-// content: "OUTRAS CORES:";
-// font-size: 14px;
-// }
-// }
+ margin-left: 16px;
-// .skuSelectorSelectorImageValue,
-// .skuSelectorNameSeparator {
-// display: none;
-// }
+ &::after {
+ visibility: visible;
+ display: block;
+ content: "OUTROS TAMANHOS:";
+ font-size: 14px;
+ }
+ }
-// .frameAround {
-// border-radius: 30px;
-// }
+ .frameAround {
+ // border: 1px solid $color-gray10;
+ width: 40px;
+ height: 40px;
+ border-radius: 30px;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
-// .skuSelectorItemImageValue,
-// .skuSelectorInternalBox {
-// border-radius: 21px;
-// color: $color-black;
-// }
-// }
+ .skuSelectorInternalBox {
+ margin: auto;
+ padding: 0;
+ width: 40px;
+ height: 40px;
+ border-radius: 30px;
+ color: $color-black;
+ border: 1px solid $color-gray10;
+ }
-// .diagonalCross {
-// top: 0px;
-// right: 10px;
-// bottom: 0px;
-// left: 10px;
-// transform: rotateY(180deg);
-// color: black;
-// }
-
-// .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;
+ .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 {
-// border-color: #000;
-// z-index: 9;
-// }
-// }
+.skuSelectorOptionsList {
+ margin: 0;
+}
-// .skuSelectorOptionsList {
-// margin: 0;
-// }
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@@ -717,7 +684,7 @@
border-radius: 30px;
z-index: 3;
padding: 0;
- border-color: #000;
+ border-color: $color-black;
top: 0;
left: 0;
}
@@ -734,6 +701,7 @@
.skuSelectorOptionsList {
margin-left: 0 !important;
+ gap: 16px;
.skuSelectorItem {
margin: 0;
@@ -753,7 +721,32 @@
font-weight: 400;
font-size: 14px;
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;
line-height: 19px;
content: 'OUTROS TAMANHOS: ';
- color: #929292;
+ color: $color-gray6
}
}
}
+
+
.skuSelectorOptionsList {
margin: 0;
margin-left: 0;
@@ -793,7 +788,7 @@
margin: 0;
.frameAround--sku-selector {
- border-color: #000000;
+ border-color: $color-black;
border-width: 2px;
width: 40px;
height: 40px;
@@ -813,14 +808,15 @@
border-radius: 100%;
width: 40px;
height: 40px;
- border: 1px solid #989898;
+ border: 1px solid $color-gray10;
.diagonalCross {
- width: 30px;
- height: 30px;
- transform: rotate(274deg);
- left: 4px;
- top: 5px;
+ top: 2px;
+ right: 10px;
+ bottom: 2px;
+ left: 10px;
+ transform: rotateY(180deg);
+ color: #D5D5D5;
}
@@ -841,9 +837,20 @@
}
.skuSelectorItem--selected {
+
.skuSelectorInternalBox {
+
+ .diagonalCross {
+ top: 2px;
+ right: 10px;
+ bottom: 2px;
+ left: 10px;
+ transform: rotateY(180deg);
+ color: $color-black;
+ }
+
.skuSelectorItemTextValue {
- color: #000000;
+ color: $color-black;
}
}
}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 7588cb4..8b186d0 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,20 +1,18 @@
.container--tab-product {
width: 100%;
- // max-width: 94.44%;
- // margin: 0 auto;
padding: 0 40px;
- @media (min-width:1920px) {
- max-width: 1840px;
+ @media (min-width:1920px) {
+ padding: 0 360px;
}
.listContainer--m3-tab-list-product {
justify-content: space-around;
- border-bottom: 1px solid #B9B9B9;
+ border-bottom: 1px solid $color-gray10;
margin-bottom: 32px;
@media (max-width:1024px) {
@@ -67,7 +65,7 @@
:global(.vtex-button) {
background-color: $color-white;
border: none;
- border-bottom: 2px solid #000000;
+ border-bottom: 2px solid $color-black;
border-radius: 0;
position: relative;
top: 2px;
@@ -85,7 +83,7 @@
font-size: 18px;
line-height: 38px;
- color: #000000;
+ color: $color-black;
@media (max-width:1024px) {
padding-left: 0;
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 479ce1a..4788ce0 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -15,6 +15,10 @@ $color-gray7: #AFAFAF;
$color-gray8: #BFBFBF;
$color-gray9: #BABABA;
$color-gray10: #989898;
+$color-gray11: #B9B9B9;
+$color-gray12: #cccccc;
+$color-gray13: #afafaf;
+$color-gray14: #202020;
$color-blue: #4267b2;