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

feat: criação do layout 2500+

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-02-10 10:44:40 -03:00
parent 141f4ced54
commit 65bd1b75bd
15 changed files with 313 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
react/components/Html/style.css
View File

@ -15,6 +15,27 @@
background: #000; background: #000;
border: #000; border: #000;
border-radius: 0; 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'] { [class*='html--Prateleira'] {

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

@ -7,7 +7,6 @@
"flex-layout.row#specifications-title", "flex-layout.row#specifications-title",
"list-context.product-list#demo1", "list-context.product-list#demo1",
"product-questions-and-answers" "product-questions-and-answers"
// "newsletter"
] ]
}, },
"html#breadcrumb": { "html#breadcrumb": {
@ -112,13 +111,12 @@
"html#selling-price", "html#selling-price",
"html#product-installments", "html#product-installments",
"html#pix", "html#pix",
"availability-subscriber",
"html#sku-selector", "html#sku-selector",
"html#quantityAndButton", "html#quantityAndButton",
"Placeholder",
"product-assembly-options",
"product-gifts", "product-gifts",
"availability-subscriber", "html#shipping-simulator",
"html#shipping-simulator" "Placeholder"
] ]
}, },
"html#selling-price": { "html#selling-price": {
@ -227,8 +225,8 @@
"children": [ "children": [
"html#product-name", "html#product-name",
"html#codigo", "html#codigo",
"html#sku-selector", "flex-layout.row#availability",
"flex-layout.row#availability" "html#sku-selector"
] ]
}, },
"html#codigo": { "html#codigo": {
@ -262,7 +260,11 @@
"props": { "blockClass": "description" }, "props": { "blockClass": "description" },
"children": ["product-description"] "children": ["product-description"]
}, },
"product-description": {
"props": {
"collapseContent": false
}
},
"html#tab-layout#desc": { "html#tab-layout#desc": {
"props": { "props": {
"testId": "product-description", "testId": "product-description",
@ -408,6 +410,11 @@
"product-selling-price" "product-selling-price"
] ]
}, },
"product-list-price": {
"props": {
"markers": ["discount"]
}
},
"html#slider-layout": { "html#slider-layout": {
"props": { "props": {
"testId": "product-summary-list" "testId": "product-summary-list"

9
styles/css/agenciamagma.store-theme.css
View File

@ -6,11 +6,4 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.html {
background-color: blueviolet;
}
.html--pdp-breadcrumb {
background-color: black;
}

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

@ -8,8 +8,9 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container { .container {
padding-left: 40px; padding: 0 40px;
align-items: center; margin: 0 auto;
max-width: 96rem;
} }
.container .homeLink .homeIcon { .container .homeLink .homeIcon {
display: none; display: none;

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

@ -7,6 +7,11 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.flexRow--message-availability {
display: flex;
order: 0;
}
:global(.vtex-store-components-3-x-container) { :global(.vtex-store-components-3-x-container) {
padding: 0 40px; padding: 0 40px;
} }
@ -26,6 +31,27 @@
.flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) {
margin-left: 32px; 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) { .flexColChild :global(.vtex-store-components-3-x-container) {
padding: 0 32px; padding: 0 32px;
} }
@ -40,8 +66,8 @@
} }
.flexRowContent { .flexRowContent {
margin-bottom: 0; margin: 0 auto;
padding-bottom: 0; padding: 16px 0 0;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {

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

@ -9,24 +9,55 @@
/* Grid breakpoints */ /* Grid breakpoints */
.sliderLayoutContainer { .sliderLayoutContainer {
padding: 0 40px 32px; padding: 0 40px 32px;
margin-bottom: 32px; margin: 0 auto 32px;
max-width: 96rem;
} }
.sliderLayoutContainer .sliderLeftArrow { .sliderLayoutContainer .sliderLeftArrow {
left: 36px; left: 36px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@media (max-width: 500px) {
.sliderLayoutContainer .sliderLeftArrow {
left: 33px;
}
}
@media (max-width: 374px) {
.sliderLayoutContainer .sliderLeftArrow {
left: 24px;
}
}
.sliderLayoutContainer .sliderRightArrow { .sliderLayoutContainer .sliderRightArrow {
right: 36px; right: 36px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@media (max-width: 500px) {
.sliderLayoutContainer .sliderRightArrow {
right: 33px;
}
}
@media (max-width: 374px) {
.sliderLayoutContainer .sliderRightArrow {
right: 24px;
}
}
.sliderLayoutContainer .sliderTrackContainer { .sliderLayoutContainer .sliderTrackContainer {
margin: 0 auto; margin: 0 auto;
width: 94%; width: 94%;
} }
.sliderLayoutContainer .sliderTrackContainer .sliderTrack { .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) { .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
margin: 0; 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) { .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%; width: 100%;
min-height: 94px;
height: 100%; 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) { .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) { .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; display: flex;
max-width: 282.4px; max-width: 282.4px;
height: 50px; height: 132px;
align-items: center; align-items: center;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-style: normal; font-style: normal;
@ -62,12 +94,27 @@
text-align: center; text-align: center;
color: #000; 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) { .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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0; 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) { .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-family: "Open Sans", sans-serif;
font-style: normal; font-style: normal;
@ -79,6 +126,7 @@
padding: 0; 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) { .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-family: "Open Sans", sans-serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -88,6 +136,45 @@
color: #bababa; color: #bababa;
padding: 0; 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) { .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; display: flex;
padding: 0; padding: 0;
@ -102,6 +189,11 @@
text-align: center; text-align: center;
color: #000; 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 { .sliderLayoutContainer .paginationDotsContainer {
align-items: center; align-items: center;
} }

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

@ -8,72 +8,6 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* 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 { .productImagesGallerySlide {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -166,6 +100,7 @@
margin: 0; margin: 0;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
gap: 16px;
margin-left: 0 !important; margin-left: 0 !important;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
@ -404,6 +339,9 @@
color: #202020; color: #202020;
text-transform: uppercase; text-transform: uppercase;
} }
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
font-weight: 400 !important;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
order: 2; order: 2;
font-weight: 400 !important; font-weight: 400 !important;
@ -450,6 +388,9 @@
display: none; display: none;
} }
.subscriberContainer {
padding-bottom: 56px;
}
.subscriberContainer .title { .subscriberContainer .title {
font-size: 0; font-size: 0;
margin-bottom: 0; margin-bottom: 0;

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

@ -8,7 +8,8 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.listContainer { .listContainer {
margin-bottom: 32px; margin: 0 auto 32px;
max-width: 96rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
@ -55,18 +56,24 @@
text-transform: capitalize; text-transform: capitalize;
border-radius: 0; border-radius: 0;
} }
@media (min-width: 1920px) {
.listItem :global(.vtex-button) {
font-size: 24px;
line-height: 38px;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.listItem { .listItem {
margin: 0; margin: 0;
padding: 0; padding: 8px 0;
} }
.listItem :global(.vtex-button) { .listItem :global(.vtex-button) {
margin: 0; margin: 0;
padding: 0; padding: 0 !important;
} }
.listItem :global(.vtex-button) :global(.vtex-button__label) { .listItem :global(.vtex-button) :global(.vtex-button__label) {
padding: 0; padding: 0 !important;
} }
} }
@ -82,6 +89,12 @@
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
.listItemActive :global(.vtex-button) { .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;
} }
} }

6
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -1,7 +1 @@
.html {
background-color: blueviolet;
}
.html--pdp-breadcrumb {
background-color: black;
}

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

@ -1,6 +1,8 @@
.container { .container {
padding-left: 40px; padding: 0 40px;
align-items: center; margin: 0 auto;
max-width: 96rem;
.homeLink { .homeLink {
.homeIcon { .homeIcon {
display: none; display: none;

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

@ -1,13 +1,16 @@
.flexRow--message-availability {
display: flex;
order: 0;
}
:global(.vtex-store-components-3-x-container) { :global(.vtex-store-components-3-x-container) {
padding: 0 40px; padding: 0 40px;
:global(.vtex-flex-layout-0-x-flexRowContent) { :global(.vtex-flex-layout-0-x-flexRowContent) {
@media (max-width: 1024px) { @media (max-width: 1024px) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
} }
:global(.vtex-store-components-3-x-carouselContainer) { :global(.vtex-store-components-3-x-carouselContainer) {
margin-bottom: 32px; margin-bottom: 32px;
} }
@ -16,21 +19,35 @@
max-height: none; max-height: none;
} }
} }
.flexColChild { .flexColChild {
:global(.vtex-store-components-3-x-productDescriptionTitle) { :global(.vtex-store-components-3-x-productDescriptionTitle) {
margin-left: 32px; 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) { :global(.vtex-store-components-3-x-container) {
padding: 0 32px; padding: 0 32px;
} }
.agenciamagma-store-theme-5-x-html--Quantity-Button { .agenciamagma-store-theme-5-x-html--Quantity-Button {
display: flex; display: flex;
} }
} }
.flexColChild--image-description { .flexColChild--image-description {
:global(.vtex-store-components-3-x-imageElement) { :global(.vtex-store-components-3-x-imageElement) {
@media (max-width: 1024px) { @media (max-width: 1024px) {
@ -38,12 +55,10 @@
} }
} }
} }
.flexRowContent { .flexRowContent {
margin-bottom: 0; margin: 0 auto;
padding-bottom: 0; padding: 16px 0 0;
} }
.stretchChildrenWidth { .stretchChildrenWidth {
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 100% !important; width: 100% !important;

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

@ -1,6 +1,5 @@
.quantitySelectorContainer { .quantitySelectorContainer {
margin: 0; margin: 0;
.quantitySelectorTitle { .quantitySelectorTitle {
display: none; display: none;
} }

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

@ -1,36 +1,48 @@
.sliderLayoutContainer { .sliderLayoutContainer {
padding: 0 40px 32px; padding: 0 40px 32px;
margin-bottom: 32px; margin: 0 auto 32px;
max-width: 96rem;
.sliderLeftArrow { .sliderLeftArrow {
left: 36px; left: 36px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@media (max-width: 500px) {
left: 33px;
}
@media (max-width: 374px) {
left: 24px;
}
} }
.sliderRightArrow { .sliderRightArrow {
right: 36px; right: 36px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@media (max-width: 500px) {
right: 33px;
}
@media (max-width: 374px) {
right: 24px;
}
} }
.sliderTrackContainer { .sliderTrackContainer {
margin: 0 auto; margin: 0 auto;
width: 94%; width: 94%;
.sliderTrack { .sliderTrack {
gap: 16px; gap: 2px;
@media (min-width: 300px) {
gap: 8px;
}
@media (min-width: 500px) {
gap: 16px;
}
.slide { .slide {
.slideChildrenContainer { .slideChildrenContainer {
:global(.vtex-product-summary-2-x-container) { :global(.vtex-product-summary-2-x-container) {
margin: 0; margin: 0;
:global(.vtex-product-summary-2-x-element) { :global(.vtex-product-summary-2-x-element) {
padding: 0; padding: 0;
:global(.vtex-product-summary-2-x-imageContainer) { :global(.vtex-product-summary-2-x-imageContainer) {
display: flex; display: flex;
:global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountContainer) {
:global(.vtex-store-components-3-x-discountInsideContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) {
display: none; display: none;
@ -38,6 +50,7 @@
:global(.vtex-product-summary-2-x-imageContainer) { :global(.vtex-product-summary-2-x-imageContainer) {
:global(.vtex-product-summary-2-x-imageNormal) { :global(.vtex-product-summary-2-x-imageNormal) {
width: 100%; width: 100%;
min-height: 94px;
height: 100%; height: 100%;
} }
} }
@ -47,13 +60,11 @@
display: flex; display: flex;
padding: 0; padding: 0;
justify-content: center; justify-content: center;
:global(.vtex-product-summary-2-x-productBrand) { :global(.vtex-product-summary-2-x-productBrand) {
display: flex; display: flex;
max-width: 282.4px; max-width: 282.4px;
height: 50px; height: 132px;
align-items: center; align-items: center;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -61,6 +72,12 @@
line-height: 25px; line-height: 25px;
text-align: center; text-align: center;
color: #000; color: #000;
@media (min-width: 500px) {
height: 50px;
}
@media (max-width: 300px) {
font-size: 16px;
}
} }
} }
:global(.vtex-product-price-1-x-listPrice) { :global(.vtex-product-price-1-x-listPrice) {
@ -69,6 +86,10 @@
align-items: center; align-items: center;
margin: 0; margin: 0;
@media (max-width: 374px) {
height: 38px;
}
:global(.vtex-product-price-1-x-listPriceValue) { :global(.vtex-product-price-1-x-listPriceValue) {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-style: normal; font-style: normal;
@ -80,6 +101,7 @@
padding: 0; padding: 0;
} }
:global(.vtex-product-price-1-x-currencyContainer) { :global(.vtex-product-price-1-x-currencyContainer) {
position: relative;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -88,19 +110,47 @@
text-align: center; text-align: center;
color: #bababa; color: #bababa;
padding: 0; 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 { :global(.vtex-product-price-1-x-listPriceValue)::before {
// content: 'por'; content: 'de';
// font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
// font-style: normal; font-style: normal;
// font-weight: 400; font-weight: 400;
// font-size: 14px; font-size: 14px;
// line-height: 19px; line-height: 19px;
// text-align: center; text-align: center;
// color: #bababa; 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) { :global(.vtex-product-price-1-x-sellingPrice) {
display: flex; display: flex;
padding: 0; padding: 0;
@ -113,6 +163,10 @@
line-height: 33px; line-height: 33px;
text-align: center; text-align: center;
color: #000; color: #000;
@media (max-width: 349px) {
font-size: 18px;
}
} }
} }
} }
@ -123,13 +177,11 @@
} }
.paginationDotsContainer { .paginationDotsContainer {
align-items: center; align-items: center;
.paginationDot { .paginationDot {
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: #000; background-color: #000;
} }
.paginationDot--isActive { .paginationDot--isActive {
background-color: #fff; background-color: #fff;
width: 17px !important; width: 17px !important;

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

@ -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 { .productImagesGallerySlide {
width: 100%; width: 100%;
height: 100%; height: 100%;
.productImage { .productImage {
width: 100%; width: 100%;
height: 100%; height: 100%;
.productImageTag { .productImageTag {
@media (min-width: 1025px) { @media (min-width: 1025px) {
width: 100% !important; width: 100% !important;
@ -85,11 +13,9 @@
} }
} }
} }
.carouselGaleryThumbs { .carouselGaleryThumbs {
display: flex !important; display: flex !important;
margin-top: 16px; margin-top: 16px;
:first-child { :first-child {
display: flex !important; display: flex !important;
justify-content: flex-start; justify-content: flex-start;
@ -119,7 +45,6 @@
} }
} }
} }
.productBrand { .productBrand {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -133,7 +58,6 @@
justify-content: flex-end; justify-content: flex-end;
} }
} }
.skuSelectorContainer { .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
@ -156,6 +80,7 @@
.skuSelectorNameContainer { .skuSelectorNameContainer {
margin: 0; margin: 0;
.skuSelectorOptionsList { .skuSelectorOptionsList {
gap: 16px;
margin-left: 0 !important; margin-left: 0 !important;
.skuSelectorItem { .skuSelectorItem {
margin: 0; margin: 0;
@ -178,7 +103,6 @@
} }
} }
} }
.skuSelectorSubcontainer--tamanho { .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px; margin-bottom: 10px;
.skuSelectorNameContainer { .skuSelectorNameContainer {
@ -258,7 +182,6 @@
} }
} }
} }
.shippingContainer { .shippingContainer {
display: flex; display: flex;
margin: 0; margin: 0;
@ -314,7 +237,6 @@
bottom: 0; bottom: 0;
} }
} }
:global(.vtex-address-form__postalCode-forgottenURL) { :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex; display: flex;
position: absolute; position: absolute;
@ -391,6 +313,9 @@
line-height: 19px; line-height: 19px;
color: #202020; color: #202020;
text-transform: uppercase; text-transform: uppercase;
.shippingTableHeadDeliveryName {
font-weight: 400 !important;
}
.shippingTableHeadDeliveryEstimate { .shippingTableHeadDeliveryEstimate {
order: 2; order: 2;
font-weight: 400 !important; font-weight: 400 !important;
@ -441,8 +366,9 @@
} }
} }
} }
.subscriberContainer { .subscriberContainer {
padding-bottom: 56px;
.title { .title {
font-size: 0; font-size: 0;
margin-bottom: 0; margin-bottom: 0;
@ -472,7 +398,6 @@
line-height: 19px; line-height: 19px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #868686; color: #868686;
} }
.form { .form {
@ -481,15 +406,12 @@
display: flex; display: flex;
height: 40px; height: 40px;
gap: 8px; gap: 8px;
.input { .input {
margin: 0; margin: 0;
:global(.vtex-input) { :global(.vtex-input) {
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
border: 0.6px solid #989898; border: 0.6px solid #989898;
border-radius: 0; border-radius: 0;
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
border-radius: 0; border-radius: 0;
} }
@ -501,14 +423,12 @@
position: absolute; position: absolute;
bottom: calc(-100% - 27px); bottom: calc(-100% - 27px);
margin: 0 !important; margin: 0 !important;
:global(.vtex-button) { :global(.vtex-button) {
width: 100%; width: 100%;
background: #000; background: #000;
border: 0.6px solid #000; border: 0.6px solid #000;
border-radius: 0; border-radius: 0;
color: #fff; color: #fff;
:global(.vtex-button__label) { :global(.vtex-button__label) {
padding: 12px; padding: 12px;
font-size: 0; font-size: 0;
@ -527,7 +447,6 @@
} }
} }
} }
.productDescriptionContainer { .productDescriptionContainer {
@media (max-width: 1024px) { @media (max-width: 1024px) {
position: relative; position: relative;

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

@ -1,5 +1,6 @@
.listContainer { .listContainer {
margin-bottom: 32px; margin: 0 auto 32px;
max-width: 96rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
@ -44,21 +45,24 @@
line-height: 38px; line-height: 38px;
text-transform: capitalize; text-transform: capitalize;
border-radius: 0; border-radius: 0;
@media (min-width: 1920px) {
font-size: 24px;
line-height: 38px;
}
} }
.listItem { .listItem {
@media (max-width: 1024px) { @media (max-width: 1024px) {
margin: 0; margin: 0;
padding: 0; padding: 8px 0;
:global(.vtex-button) { :global(.vtex-button) {
margin: 0; margin: 0;
padding: 0; padding: 0 !important;
:global(.vtex-button__label) { :global(.vtex-button__label) {
padding: 0; padding: 0 !important;
} }
} }
} }
} }
.listItemActive :global(.vtex-button) { .listItemActive :global(.vtex-button) {
background-color: white; background-color: white;
color: black; color: black;
@ -68,8 +72,11 @@
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
@media (min-width: 1025px) { @media (min-width: 1025px) {
border-bottom: 2px black solid; border-bottom: 3px black solid;
}
@media (min-width: 1920px) {
font-size: 24px;
line-height: 38px;
} }
} }