feat: cria estilização do produto main #13

Merged
emmanuelvitor merged 1 commits from feature/product-main into development 2023-02-09 02:21:21 +00:00
8 changed files with 61 additions and 15 deletions

View File

@ -11,6 +11,12 @@
padding: 0 40px; padding: 0 40px;
margin: 0; margin: 0;
border: 1px solid red; border: 1px solid red;
column-gap: 32px;
}
@media (max-width: 1024px) {
.flexRowContent--product-main {
flex-direction: column;
}
} }
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { .flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px; min-width: 296px;
@ -59,7 +65,7 @@
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
max-width: 90%; text-align: end;
} }
@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) {

View File

@ -10,7 +10,6 @@
.product-identifier--productReference { .product-identifier--productReference {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-right: 40px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.product-identifier--productReference { .product-identifier--productReference {

View File

@ -24,8 +24,8 @@
.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) { .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px; padding: 32px 0 13px;
width: 100%; width: 100%;
max-width: 774px;
position: relative; position: relative;
max-width: 775px;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) { .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) {
@ -137,7 +137,6 @@
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
/* or 136% */
display: flex; display: flex;
align-items: center; align-items: center;
color: #868686; color: #868686;
@ -161,6 +160,12 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
max-width: 399px;
}
@media (max-width: 1024px) {
.subscriberContainer .form {
max-width: 775px;
}
} }
.subscriberContainer .form .content { .subscriberContainer .form .content {
display: grid; display: grid;

View File

@ -9,8 +9,7 @@
/* Grid breakpoints */ /* Grid breakpoints */
.container--tab-product { .container--tab-product {
width: 100%; width: 100%;
max-width: 94.44%; padding: 0 40px;
margin: 0 auto;
} }
@media (min-width: 1920px) { @media (min-width: 1920px) {
.container--tab-product { .container--tab-product {
@ -44,6 +43,11 @@
color: #BFBFBF; color: #BFBFBF;
text-transform: capitalize; text-transform: capitalize;
} }
@media (max-width: 1024px) {
.container--tab-product .listContainer--m3-tab-list-product .listItem :global(.vtex-button) :global(.vtex-button__label) {
padding-left: 0;
}
}
.container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product { .container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product {
background: #ffffff; background: #ffffff;
border: none !important; border: none !important;
@ -84,3 +88,12 @@
padding-left: 0; padding-left: 0;
} }
} }
.contentContainer {
padding: 0 32px;
}
@media (max-width: 1024px) {
.contentContainer {
padding: 0;
}
}

View File

@ -3,6 +3,11 @@
padding: 0 40px; padding: 0 40px;
margin: 0; margin: 0;
border: 1px solid red; border: 1px solid red;
column-gap: 32px;
@media (max-width:1024px) {
flex-direction: column;
}
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) { :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px; min-width: 296px;
@ -56,7 +61,8 @@
font-weight: 300; font-weight: 300;
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
max-width: 90%; // max-width: 90%;
text-align: end;
@media (max-width:1024px) { @media (max-width:1024px) {
max-width: none; max-width: none;

View File

@ -1,7 +1,7 @@
.product-identifier--productReference { .product-identifier--productReference {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-right: 40px; // padding-right: 40px;
@media (max-width:1024px) { @media (max-width:1024px) {
display: block; display: block;
@ -26,5 +26,3 @@
color: #9292927a; color: #9292927a;
} }
} }
.product-identifier__value {}

View File

@ -14,8 +14,8 @@
:global(.vtex-store-components-3-x-form) { :global(.vtex-store-components-3-x-form) {
padding: 32px 0 13px; padding: 32px 0 13px;
width: 100%; width: 100%;
max-width: 774px;
position: relative; position: relative;
max-width: 775px;
@media (max-width:1024px) { @media (max-width:1024px) {
max-width: 100%; max-width: 100%;
@ -149,7 +149,6 @@
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
/* or 136% */
display: flex; display: flex;
align-items: center; align-items: center;
@ -181,6 +180,11 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
max-width: 399px;
@media (max-width:1024px) {
max-width: 775px;
}
.content { .content {
display: grid; display: grid;

View File

@ -1,8 +1,9 @@
.container--tab-product { .container--tab-product {
width: 100%; width: 100%;
max-width: 94.44%; // max-width: 94.44%;
margin: 0 auto; // margin: 0 auto;
padding: 0 40px;
@media (min-width:1920px) { @media (min-width:1920px) {
max-width: 1840px; max-width: 1840px;
@ -21,6 +22,8 @@
flex-direction: column; flex-direction: column;
} }
.listItem { .listItem {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -40,6 +43,10 @@
color: $color-gray8; color: $color-gray8;
text-transform: capitalize; text-transform: capitalize;
@media (max-width:1024px) {
padding-left: 0;
}
} }
} }
} }
@ -92,3 +99,11 @@
} }
} }
.contentContainer {
padding: 0 32px;
@media (max-width:1024px) {
padding: 0;
}
}