diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index 36dde0c..9827e81 100644
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@@ -15,6 +15,27 @@
background: #000;
border: #000;
border-radius: 0;
+ font-size: 0;
+}
+
+[class*='html--Quantity-Button']
+ > [class*='html--addButton']
+ > [class*='button']
+ > [class*='vtex-button__label'] {
+ width: 100%;
+ padding: 0;
+}
+
+[class*='html--Quantity-Button']
+ > [class*='html--addButton']
+ > [class*='button']
+ > [class*='vtex-button__label']::before {
+ content: 'ADICIONAR À SACOLA';
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
}
[class*='html--Prateleira'] {
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6dd20f4..667708b 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -7,7 +7,6 @@
"flex-layout.row#specifications-title",
"list-context.product-list#demo1",
"product-questions-and-answers"
- // "newsletter"
]
},
"html#breadcrumb": {
@@ -112,13 +111,12 @@
"html#selling-price",
"html#product-installments",
"html#pix",
+ "availability-subscriber",
"html#sku-selector",
"html#quantityAndButton",
- "Placeholder",
- "product-assembly-options",
"product-gifts",
- "availability-subscriber",
- "html#shipping-simulator"
+ "html#shipping-simulator",
+ "Placeholder"
]
},
"html#selling-price": {
@@ -227,8 +225,8 @@
"children": [
"html#product-name",
"html#codigo",
- "html#sku-selector",
- "flex-layout.row#availability"
+ "flex-layout.row#availability",
+ "html#sku-selector"
]
},
"html#codigo": {
@@ -262,7 +260,11 @@
"props": { "blockClass": "description" },
"children": ["product-description"]
},
-
+ "product-description": {
+ "props": {
+ "collapseContent": false
+ }
+ },
"html#tab-layout#desc": {
"props": {
"testId": "product-description",
@@ -408,6 +410,11 @@
"product-selling-price"
]
},
+ "product-list-price": {
+ "props": {
+ "markers": ["discount"]
+ }
+ },
"html#slider-layout": {
"props": {
"testId": "product-summary-list"
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index c16a50b..34c4328 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -6,11 +6,4 @@
1800px + : Big desktop
*/
/* Media Query M3 */
-/* Grid breakpoints */
-.html {
- background-color: blueviolet;
-}
-
-.html--pdp-breadcrumb {
- background-color: black;
-}
\ No newline at end of file
+/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 8fff30f..dd3cefe 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -8,8 +8,9 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
- padding-left: 40px;
- align-items: center;
+ padding: 0 40px;
+ margin: 0 auto;
+ max-width: 96rem;
}
.container .homeLink .homeIcon {
display: none;
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 083e71e..f3c7cb1 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -7,6 +7,11 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
+.flexRow--message-availability {
+ display: flex;
+ order: 0;
+}
+
:global(.vtex-store-components-3-x-container) {
padding: 0 40px;
}
@@ -26,6 +31,27 @@
.flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) {
margin-left: 32px;
}
+@media (min-width: 1920px) {
+ .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 32px;
+ line-height: 32px;
+ }
+}
+.flexColChild :global(.vtex-store-components-3-x-productDescriptionText) {
+ margin-left: 32px;
+}
+@media (min-width: 1920px) {
+ .flexColChild :global(.vtex-store-components-3-x-productDescriptionText) {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
.flexColChild :global(.vtex-store-components-3-x-container) {
padding: 0 32px;
}
@@ -40,8 +66,8 @@
}
.flexRowContent {
- margin-bottom: 0;
- padding-bottom: 0;
+ margin: 0 auto;
+ padding: 16px 0 0;
}
@media (max-width: 1024px) {
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 85e9db3..82dbcde 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -9,24 +9,55 @@
/* Grid breakpoints */
.sliderLayoutContainer {
padding: 0 40px 32px;
- margin-bottom: 32px;
+ margin: 0 auto 32px;
+ max-width: 96rem;
}
.sliderLayoutContainer .sliderLeftArrow {
left: 36px;
margin: 0;
padding: 0;
}
+@media (max-width: 500px) {
+ .sliderLayoutContainer .sliderLeftArrow {
+ left: 33px;
+ }
+}
+@media (max-width: 374px) {
+ .sliderLayoutContainer .sliderLeftArrow {
+ left: 24px;
+ }
+}
.sliderLayoutContainer .sliderRightArrow {
right: 36px;
margin: 0;
padding: 0;
}
+@media (max-width: 500px) {
+ .sliderLayoutContainer .sliderRightArrow {
+ right: 33px;
+ }
+}
+@media (max-width: 374px) {
+ .sliderLayoutContainer .sliderRightArrow {
+ right: 24px;
+ }
+}
.sliderLayoutContainer .sliderTrackContainer {
margin: 0 auto;
width: 94%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack {
- gap: 16px;
+ gap: 2px;
+}
+@media (min-width: 300px) {
+ .sliderLayoutContainer .sliderTrackContainer .sliderTrack {
+ gap: 8px;
+ }
+}
+@media (min-width: 500px) {
+ .sliderLayoutContainer .sliderTrackContainer .sliderTrack {
+ gap: 16px;
+ }
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
margin: 0;
@@ -42,6 +73,7 @@
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
width: 100%;
+ min-height: 94px;
height: 100%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
@@ -52,7 +84,7 @@
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
display: flex;
max-width: 282.4px;
- height: 50px;
+ height: 132px;
align-items: center;
font-family: "Open Sans", sans-serif;
font-style: normal;
@@ -62,12 +94,27 @@
text-align: center;
color: #000;
}
+@media (min-width: 500px) {
+ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
+ height: 50px;
+ }
+}
+@media (max-width: 300px) {
+ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
+ font-size: 16px;
+ }
+}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
+@media (max-width: 374px) {
+ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) {
+ height: 38px;
+ }
+}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) {
font-family: "Open Sans", sans-serif;
font-style: normal;
@@ -79,6 +126,7 @@
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) {
+ position: relative;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
@@ -88,6 +136,45 @@
color: #bababa;
padding: 0;
}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::before {
+ content: "";
+ position: absolute;
+ background: #bababa;
+ height: 1px;
+ width: 8px;
+ bottom: 7px;
+ left: -8px;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::after {
+ content: "";
+ position: absolute;
+ background: #bababa;
+ height: 1px;
+ width: 8px;
+ bottom: 7px;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::before {
+ content: "de";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ color: #bababa;
+ padding-right: 8px;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::after {
+ content: "por";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ color: #bababa;
+ padding-left: 8px;
+}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) {
display: flex;
padding: 0;
@@ -102,6 +189,11 @@
text-align: center;
color: #000;
}
+@media (max-width: 349px) {
+ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
+ font-size: 18px;
+ }
+}
.sliderLayoutContainer .paginationDotsContainer {
align-items: center;
}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 396b8c9..74c82ce 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -8,72 +8,6 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
-.newsletter {
- margin-top: 32px;
- background: black;
-}
-.newsletter .container {
- padding: 32px 0 16px 0;
-}
-.newsletter .container .form .label {
- font-size: 0;
- display: flex;
- flex-direction: column;
- gap: 16px;
-}
-.newsletter .container .form .label::before {
- content: "Assine nossa newsletter";
- font-size: 24px;
- font-family: "Open Sans", sans-serif;
- font-style: normal;
- font-weight: 400;
- line-height: 38px;
- color: #ffffff;
-}
-.newsletter .container .form .label::after {
- content: "Receba ofertas e novidades por e-mail";
- white-space: pre;
- font-family: "Open Sans", sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 18px;
- line-height: 25px;
- color: #929292;
-}
-.newsletter .container .form .inputGroup {
- display: flex;
- justify-content: center;
-}
-.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) {
- border: none;
- border-bottom: 1px #929292 solid;
- border-radius: 0;
-}
-.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
- background: black;
- font-family: "Open Sans", sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 18px;
- line-height: 25px;
- color: #929292;
- width: 774px;
-}
-.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) {
- padding: 0;
-}
-.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
- background: black;
- border: none;
- border-bottom: 3px gray solid;
- border-radius: 0;
- font-family: "Open Sans", sans-serif;
- font-style: normal;
- font-weight: 700;
- font-size: 14px;
- line-height: 19px;
-}
-
.productImagesGallerySlide {
width: 100%;
height: 100%;
@@ -166,6 +100,7 @@
margin: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
+ gap: 16px;
margin-left: 0 !important;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
@@ -404,6 +339,9 @@
color: #202020;
text-transform: uppercase;
}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+ font-weight: 400 !important;
+}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
order: 2;
font-weight: 400 !important;
@@ -450,6 +388,9 @@
display: none;
}
+.subscriberContainer {
+ padding-bottom: 56px;
+}
.subscriberContainer .title {
font-size: 0;
margin-bottom: 0;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 7a7ef75..90a380d 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -8,7 +8,8 @@
/* Media Query M3 */
/* Grid breakpoints */
.listContainer {
- margin-bottom: 32px;
+ margin: 0 auto 32px;
+ max-width: 96rem;
display: flex;
flex-direction: row;
justify-content: space-around;
@@ -55,18 +56,24 @@
text-transform: capitalize;
border-radius: 0;
}
+@media (min-width: 1920px) {
+ .listItem :global(.vtex-button) {
+ font-size: 24px;
+ line-height: 38px;
+ }
+}
@media (max-width: 1024px) {
.listItem {
margin: 0;
- padding: 0;
+ padding: 8px 0;
}
.listItem :global(.vtex-button) {
margin: 0;
- padding: 0;
+ padding: 0 !important;
}
.listItem :global(.vtex-button) :global(.vtex-button__label) {
- padding: 0;
+ padding: 0 !important;
}
}
@@ -82,6 +89,12 @@
}
@media (min-width: 1025px) {
.listItemActive :global(.vtex-button) {
- border-bottom: 2px black solid;
+ border-bottom: 3px black solid;
+ }
+}
+@media (min-width: 1920px) {
+ .listItemActive :global(.vtex-button) {
+ font-size: 24px;
+ line-height: 38px;
}
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index 4e15541..8b13789 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -1,7 +1 @@
-.html {
- background-color: blueviolet;
-}
-.html--pdp-breadcrumb {
- background-color: black;
-}
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 526aae0..6bd8a23 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,6 +1,8 @@
.container {
- padding-left: 40px;
- align-items: center;
+ padding: 0 40px;
+ margin: 0 auto;
+ max-width: 96rem;
+
.homeLink {
.homeIcon {
display: none;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index a413ca1..7d82dbb 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,13 +1,16 @@
+.flexRow--message-availability {
+ display: flex;
+ order: 0;
+}
+
:global(.vtex-store-components-3-x-container) {
padding: 0 40px;
-
:global(.vtex-flex-layout-0-x-flexRowContent) {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
-
:global(.vtex-store-components-3-x-carouselContainer) {
margin-bottom: 32px;
}
@@ -16,21 +19,35 @@
max-height: none;
}
}
-
.flexColChild {
:global(.vtex-store-components-3-x-productDescriptionTitle) {
margin-left: 32px;
+ @media (min-width: 1920px) {
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 32px;
+ line-height: 32px;
+ }
}
+ :global(.vtex-store-components-3-x-productDescriptionText) {
+ margin-left: 32px;
+ @media (min-width: 1920px) {
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ }
+ }
:global(.vtex-store-components-3-x-container) {
padding: 0 32px;
}
-
.agenciamagma-store-theme-5-x-html--Quantity-Button {
display: flex;
}
}
-
.flexColChild--image-description {
:global(.vtex-store-components-3-x-imageElement) {
@media (max-width: 1024px) {
@@ -38,12 +55,10 @@
}
}
}
-
.flexRowContent {
- margin-bottom: 0;
- padding-bottom: 0;
+ margin: 0 auto;
+ padding: 16px 0 0;
}
-
.stretchChildrenWidth {
@media (max-width: 1024px) {
width: 100% !important;
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 8b339ef..90370b1 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -1,6 +1,5 @@
.quantitySelectorContainer {
margin: 0;
-
.quantitySelectorTitle {
display: none;
}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 170d7fb..2d91b18 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,36 +1,48 @@
.sliderLayoutContainer {
padding: 0 40px 32px;
- margin-bottom: 32px;
-
+ margin: 0 auto 32px;
+ max-width: 96rem;
.sliderLeftArrow {
left: 36px;
margin: 0;
padding: 0;
+ @media (max-width: 500px) {
+ left: 33px;
+ }
+ @media (max-width: 374px) {
+ left: 24px;
+ }
}
-
.sliderRightArrow {
right: 36px;
margin: 0;
padding: 0;
+ @media (max-width: 500px) {
+ right: 33px;
+ }
+ @media (max-width: 374px) {
+ right: 24px;
+ }
}
-
.sliderTrackContainer {
margin: 0 auto;
width: 94%;
-
.sliderTrack {
- gap: 16px;
-
+ gap: 2px;
+ @media (min-width: 300px) {
+ gap: 8px;
+ }
+ @media (min-width: 500px) {
+ gap: 16px;
+ }
.slide {
.slideChildrenContainer {
:global(.vtex-product-summary-2-x-container) {
margin: 0;
-
:global(.vtex-product-summary-2-x-element) {
padding: 0;
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
-
:global(.vtex-store-components-3-x-discountContainer) {
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
@@ -38,6 +50,7 @@
:global(.vtex-product-summary-2-x-imageContainer) {
:global(.vtex-product-summary-2-x-imageNormal) {
width: 100%;
+ min-height: 94px;
height: 100%;
}
}
@@ -47,13 +60,11 @@
display: flex;
padding: 0;
justify-content: center;
-
:global(.vtex-product-summary-2-x-productBrand) {
display: flex;
max-width: 282.4px;
- height: 50px;
+ height: 132px;
align-items: center;
-
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
@@ -61,6 +72,12 @@
line-height: 25px;
text-align: center;
color: #000;
+ @media (min-width: 500px) {
+ height: 50px;
+ }
+ @media (max-width: 300px) {
+ font-size: 16px;
+ }
}
}
:global(.vtex-product-price-1-x-listPrice) {
@@ -69,6 +86,10 @@
align-items: center;
margin: 0;
+ @media (max-width: 374px) {
+ height: 38px;
+ }
+
:global(.vtex-product-price-1-x-listPriceValue) {
font-family: 'Open Sans', sans-serif;
font-style: normal;
@@ -80,6 +101,7 @@
padding: 0;
}
:global(.vtex-product-price-1-x-currencyContainer) {
+ position: relative;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
@@ -88,19 +110,47 @@
text-align: center;
color: #bababa;
padding: 0;
+ &::before {
+ content: '';
+ position: absolute;
+ background: #bababa;
+ height: 1px;
+ width: 8px;
+ bottom: 7px;
+ left: -8px;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ background: #bababa;
+ height: 1px;
+ width: 8px;
+ bottom: 7px;
+ }
}
}
- // :global(.vtex-product-price-1-x-listPriceValue)::after {
- // content: 'por';
- // font-family: 'Open Sans', sans-serif;
- // font-style: normal;
- // font-weight: 400;
- // font-size: 14px;
- // line-height: 19px;
- // text-align: center;
- // color: #bababa;
- // }
-
+ :global(.vtex-product-price-1-x-listPriceValue)::before {
+ content: 'de';
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ color: #bababa;
+ padding-right: 8px;
+ }
+ :global(.vtex-product-price-1-x-listPriceValue)::after {
+ content: 'por';
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ color: #bababa;
+ padding-left: 8px;
+ }
:global(.vtex-product-price-1-x-sellingPrice) {
display: flex;
padding: 0;
@@ -113,6 +163,10 @@
line-height: 33px;
text-align: center;
color: #000;
+
+ @media (max-width: 349px) {
+ font-size: 18px;
+ }
}
}
}
@@ -123,13 +177,11 @@
}
.paginationDotsContainer {
align-items: center;
-
.paginationDot {
width: 10px;
height: 10px;
background-color: #000;
}
-
.paginationDot--isActive {
background-color: #fff;
width: 17px !important;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index c13b678..3bf3522 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,81 +1,9 @@
-.newsletter {
- margin-top: 32px;
- background: black;
- .container {
- padding: 32px 0 16px 0;
- .form {
- .label {
- font-size: 0;
- display: flex;
- flex-direction: column;
- gap: 16px;
- &::before {
- content: 'Assine nossa newsletter';
- font-size: 24px;
- font-family: 'Open Sans', sans-serif;
- font-style: normal;
- font-weight: 400;
- line-height: 38px;
- color: #ffffff;
- }
- &::after {
- content: 'Receba ofertas e novidades por e-mail';
- white-space: pre;
- font-family: 'Open Sans', sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 18px;
- line-height: 25px;
- color: #929292;
- }
- }
- .inputGroup {
- display: flex;
- justify-content: center;
- :global(.vtex-input) {
- :global(.vtex-input-prefix__group) {
- border: none;
- border-bottom: 1px #929292 solid;
- border-radius: 0;
- :global(.vtex-styleguide-9-x-input) {
- background: black;
- font-family: 'Open Sans', sans-serif;
- font-style: normal;
- font-weight: 400;
- font-size: 18px;
- line-height: 25px;
- color: #929292;
- width: 774px;
- }
- }
- }
- :global(.vtex-store-components-3-x-buttonContainer) {
- padding: 0;
- :global(.vtex-button) {
- background: black;
- border: none;
- border-bottom: 3px gray solid;
- border-radius: 0;
- font-family: 'Open Sans', sans-serif;
- font-style: normal;
- font-weight: 700;
- font-size: 14px;
- line-height: 19px;
- }
- }
- }
- }
- }
-}
-
.productImagesGallerySlide {
width: 100%;
height: 100%;
-
.productImage {
width: 100%;
height: 100%;
-
.productImageTag {
@media (min-width: 1025px) {
width: 100% !important;
@@ -85,11 +13,9 @@
}
}
}
-
.carouselGaleryThumbs {
display: flex !important;
margin-top: 16px;
-
:first-child {
display: flex !important;
justify-content: flex-start;
@@ -119,7 +45,6 @@
}
}
}
-
.productBrand {
display: flex;
justify-content: flex-start;
@@ -133,7 +58,6 @@
justify-content: flex-end;
}
}
-
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@@ -156,6 +80,7 @@
.skuSelectorNameContainer {
margin: 0;
.skuSelectorOptionsList {
+ gap: 16px;
margin-left: 0 !important;
.skuSelectorItem {
margin: 0;
@@ -178,7 +103,6 @@
}
}
}
-
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer {
@@ -258,7 +182,6 @@
}
}
}
-
.shippingContainer {
display: flex;
margin: 0;
@@ -314,7 +237,6 @@
bottom: 0;
}
}
-
:global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
@@ -391,6 +313,9 @@
line-height: 19px;
color: #202020;
text-transform: uppercase;
+ .shippingTableHeadDeliveryName {
+ font-weight: 400 !important;
+ }
.shippingTableHeadDeliveryEstimate {
order: 2;
font-weight: 400 !important;
@@ -441,8 +366,9 @@
}
}
}
-
.subscriberContainer {
+ padding-bottom: 56px;
+
.title {
font-size: 0;
margin-bottom: 0;
@@ -472,7 +398,6 @@
line-height: 19px;
display: flex;
align-items: center;
-
color: #868686;
}
.form {
@@ -481,15 +406,12 @@
display: flex;
height: 40px;
gap: 8px;
-
.input {
margin: 0;
-
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
border: 0.6px solid #989898;
border-radius: 0;
-
:global(.vtex-styleguide-9-x-input) {
border-radius: 0;
}
@@ -501,14 +423,12 @@
position: absolute;
bottom: calc(-100% - 27px);
margin: 0 !important;
-
:global(.vtex-button) {
width: 100%;
background: #000;
border: 0.6px solid #000;
border-radius: 0;
color: #fff;
-
:global(.vtex-button__label) {
padding: 12px;
font-size: 0;
@@ -527,7 +447,6 @@
}
}
}
-
.productDescriptionContainer {
@media (max-width: 1024px) {
position: relative;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 9c689eb..851d7a4 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -1,5 +1,6 @@
.listContainer {
- margin-bottom: 32px;
+ margin: 0 auto 32px;
+ max-width: 96rem;
display: flex;
flex-direction: row;
justify-content: space-around;
@@ -44,21 +45,24 @@
line-height: 38px;
text-transform: capitalize;
border-radius: 0;
+ @media (min-width: 1920px) {
+ font-size: 24px;
+ line-height: 38px;
+ }
}
.listItem {
@media (max-width: 1024px) {
margin: 0;
- padding: 0;
+ padding: 8px 0;
:global(.vtex-button) {
margin: 0;
- padding: 0;
+ padding: 0 !important;
:global(.vtex-button__label) {
- padding: 0;
+ padding: 0 !important;
}
}
}
}
-
.listItemActive :global(.vtex-button) {
background-color: white;
color: black;
@@ -68,8 +72,11 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
-
@media (min-width: 1025px) {
- border-bottom: 2px black solid;
+ border-bottom: 3px black solid;
+ }
+ @media (min-width: 1920px) {
+ font-size: 24px;
+ line-height: 38px;
}
}