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

feat: cria estilização do produto main

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-02-08 13:05:31 -03:00
parent e12747a531
commit 18d24f4519
8 changed files with 61 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,12 @@
padding: 0 40px;
margin: 0;
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) {
min-width: 296px;
@ -59,7 +65,7 @@
font-weight: 300;
font-size: 20px;
line-height: 34px;
max-width: 90%;
text-align: end;
}
@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) {

1
styles/css/vtex.product-identifier.css
View File

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

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

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

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

@ -9,8 +9,7 @@
/* Grid breakpoints */
.container--tab-product {
width: 100%;
max-width: 94.44%;
margin: 0 auto;
padding: 0 40px;
}
@media (min-width: 1920px) {
.container--tab-product {
@ -44,6 +43,11 @@
color: #BFBFBF;
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 {
background: #ffffff;
border: none !important;
@ -84,3 +88,12 @@
padding-left: 0;
}
}
.contentContainer {
padding: 0 32px;
}
@media (max-width: 1024px) {
.contentContainer {
padding: 0;
}
}

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

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

4
styles/sass/pages/product/vtex.product-identifier.scss
View File

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

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

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

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

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