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

fix: Corrigindo alguns espaçamentos página pdp

Browse Source
This commit is contained in:
José Carlos Lins 2023-01-30 15:14:43 -03:00
parent af0875024a
commit 84ceb25af2
12 changed files with 108 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,12 +154,14 @@
width: 100% !important; width: 100% !important;
} }
.flexRowContent--credits .flexRowContent--container-develop { .flexRowContent--credits .flexRowContent--container-develop {
display: flex;
gap: 16px; gap: 16px;
} }
.flexRowContent--credits .flexRowContent--container-develop .stretchChildrenWidth { .flexRowContent--credits .flexRowContent--container-develop .stretchChildrenWidth {
width: 100% !important; width: 100% !important;
} }
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop { .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop {
display: flex;
gap: 8px; gap: 8px;
} }
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth { .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth {
@ -174,6 +176,7 @@
color: #FFFFFF; color: #FFFFFF;
} }
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop { .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop {
display: flex;
gap: 8px; gap: 8px;
} }
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth { .flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth {
@ -208,6 +211,10 @@
width: 100%; width: 100%;
margin-bottom: 32px; margin-bottom: 32px;
} }
.flexRowContent--newsletter-footer :global(.vtex-store-components-3-x-newsletter) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-label)::after {
font-size: 16px;
line-height: 22px;
}
.flexCol--menu-social-links-and-payments { .flexCol--menu-social-links-and-payments {
padding: 16px 0 32px 0; padding: 16px 0 32px 0;
} }
@ -220,10 +227,12 @@
width: 192px; width: 192px;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 0;
} }
.flexColChild--payment-methods .flexRowContent--wrapper-payments-icons .stretchChildrenWidth { .flexColChild--payment-methods .flexRowContent--wrapper-payments-icons .stretchChildrenWidth {
width: 100% !important; width: 100% !important;
height: 29px; height: 29px;
padding: 0;
} }
.flexRowContent--payment-methods { .flexRowContent--payment-methods {
padding-bottom: 0; padding-bottom: 0;
@ -247,10 +256,23 @@
align-items: center; align-items: center;
gap: 32px; gap: 32px;
padding: 16px 0 8px 0; padding: 16px 0 8px 0;
height: 131px; height: auto;
} }
.flexRowContent--credits .stretchChildrenWidth { .flexRowContent--credits .stretchChildrenWidth {
width: max-content !important; width: max-content !important;
padding: 0;
}
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop {
align-items: center;
}
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-vtex-develop .stretchChildrenWidth {
padding: 0;
}
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop {
align-items: center;
}
.flexRowContent--credits .flexRowContent--container-develop .flexRowContent--content-m3-develop .stretchChildrenWidth {
padding: 0;
} }
} }
.flexRowContent--main-header { .flexRowContent--main-header {
@ -269,6 +291,7 @@
.flexRowContent--main-header-mobile { .flexRowContent--main-header-mobile {
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.flexRowContent--mobile-header-col { .flexRowContent--mobile-header-col {
@ -284,6 +307,7 @@
} }
.flexRowContent--login-and-cart-container { .flexRowContent--login-and-cart-container {
display: flex;
gap: 40px; gap: 40px;
} }
@ -299,7 +323,7 @@
display: grid; display: grid;
grid-template-columns: 48.824% 1fr; grid-template-columns: 48.824% 1fr;
grid-column-gap: 32px; grid-column-gap: 32px;
padding-bottom: 16px; padding: 16px 0;
} }
.flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth { .flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth {
padding-right: 0; padding-right: 0;
@ -440,13 +464,12 @@
} }
.flexRow--container-description-section-product-pdp { .flexRow--container-description-section-product-pdp {
padding: 0 40px; padding: 0 32px;
} }
.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp { .flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp {
display: grid; display: grid;
gap: 32px; gap: 32px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 0 32px;
} }
.flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp .stretchChildrenWidth { .flexRow--container-description-section-product-pdp .flexRowContent--container-description-section-product-pdp .stretchChildrenWidth {
width: 100% !important; width: 100% !important;

6
styles/css/vtex.login.css
View File

@ -22,11 +22,11 @@
padding: 0 !important; padding: 0 !important;
padding-left: 4px !important; padding-left: 4px !important;
} }
.container :global(.vtex-button) :global(.vtex-button__label) .label {
.label {
font-size: 0; font-size: 0;
padding: 0; padding: 0;
display: block;
} }
.label::after { .container :global(.vtex-button) :global(.vtex-button__label) .label::after {
content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg"); content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
} }

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

@ -10,7 +10,8 @@
.product-identifier--productReference { .product-identifier--productReference {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 16px; margin-bottom: 24px;
margin-top: 8px;
} }
.product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator { .product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator {
display: none; display: none;

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

@ -119,6 +119,9 @@
color: #929292; color: #929292;
text-transform: uppercase; text-transform: uppercase;
} }
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0; font-size: 0;
} }
@ -245,6 +248,9 @@
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000; color: #000000;
text-decoration-line: underline; text-decoration-line: underline;
font-weight: 400;
font-size: 12px;
line-height: 16px;
} }
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none; display: none;
@ -284,6 +290,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
width: max-content; width: max-content;
padding-bottom: 1px;
} }
.shippingTable .shippingTableHead { .shippingTable .shippingTableHead {
display: table-caption; display: table-caption;

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

@ -68,8 +68,14 @@
border-top: 1px solid #B9B9B9; border-top: 1px solid #B9B9B9;
} }
.listContainer--container-list-tab-layout-pdp .listItem { .listContainer--container-list-tab-layout-pdp .listItem {
width: max-content; display: flex;
width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
justify-content: flex-start;
}
.listContainer--container-list-tab-layout-pdp .listItem :global(.vtex-button) {
display: flex;
width: 100%;
} }
.listContainer--container-list-tab-layout-pdp .listItem:first-child { .listContainer--container-list-tab-layout-pdp .listItem:first-child {
margin-top: 16px; margin-top: 16px;

34
styles/sass/pages/footer/vtex.flex-layout.scss
View File

@ -175,12 +175,14 @@
} }
.flexRowContent--container-develop{ .flexRowContent--container-develop{
display: flex;
gap: 16px; gap: 16px;
.stretchChildrenWidth{ .stretchChildrenWidth{
width: 100% !important; width: 100% !important;
} }
.flexRowContent--content-vtex-develop{ .flexRowContent--content-vtex-develop{
display: flex;
gap: 8px; gap: 8px;
.stretchChildrenWidth{ .stretchChildrenWidth{
width: max-content !important; width: max-content !important;
@ -198,6 +200,7 @@
} }
.flexRowContent--content-m3-develop{ .flexRowContent--content-m3-develop{
display: flex;
gap: 8px; gap: 8px;
.stretchChildrenWidth{ .stretchChildrenWidth{
width: max-content !important; width: max-content !important;
@ -227,6 +230,7 @@
} }
@media screen and (max-width: 1026px) { @media screen and (max-width: 1026px) {
.flexRowContent--newsletter-footer{ .flexRowContent--newsletter-footer{
:global(.vtex-store-components-3-x-newsletter){ :global(.vtex-store-components-3-x-newsletter){
padding-top: 64px; padding-top: 64px;
@ -238,6 +242,13 @@
:global(.vtex-store-components-3-x-form){ :global(.vtex-store-components-3-x-form){
width: 100%; width: 100%;
margin-bottom: 32px; margin-bottom: 32px;
:global(.vtex-store-components-3-x-label){
&::after{
font-size: 16px;
line-height: 22px;
}
}
} }
} }
} }
@ -255,10 +266,12 @@
width: 192px; width: 192px;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 0;
.stretchChildrenWidth{ .stretchChildrenWidth{
width: 100% !important; width: 100% !important;
height: 29px; height: 29px;
padding: 0;
} }
} }
} }
@ -292,10 +305,29 @@
gap: 32px; gap: 32px;
padding: 16px 0 8px 0; padding: 16px 0 8px 0;
height: 131px; height: auto;
.stretchChildrenWidth{ .stretchChildrenWidth{
width: max-content !important; width: max-content !important;
padding: 0;
}
.flexRowContent--container-develop{
.flexRowContent--content-vtex-develop{
align-items: center;
.stretchChildrenWidth{
padding: 0;
}
}
.flexRowContent--content-m3-develop{
align-items: center;
.stretchChildrenWidth{
padding: 0;
}
}
} }
} }

2
styles/sass/pages/header/vtex.flex-layout.scss
View File

@ -16,6 +16,7 @@
.flexRowContent--main-header-mobile{ .flexRowContent--main-header-mobile{
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.flexRowContent--mobile-header-col{ .flexRowContent--mobile-header-col{
@ -34,6 +35,7 @@ justify-content: space-between;
} }
.flexRowContent--login-and-cart-container{ .flexRowContent--login-and-cart-container{
display: flex;
gap: 40px; gap: 40px;
} }

19
styles/sass/pages/header/vtex.login.scss
View File

@ -13,15 +13,16 @@
:global(.vtex-button__label){ :global(.vtex-button__label){
padding: 0 !important; padding: 0 !important;
padding-left: 4px !important; padding-left: 4px !important;
.label{
font-size: 0;
padding: 0;
display: block;
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
}
}
} }
} }
} }
.label{
font-size: 0;
padding: 0;
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg");
}
}

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

@ -5,7 +5,7 @@
grid-template-columns: 48.824% 1fr; grid-template-columns: 48.824% 1fr;
grid-column-gap: 32px; grid-column-gap: 32px;
padding-bottom: 16px; padding: 16px 0;
.stretchChildrenWidth{ .stretchChildrenWidth{
padding-right: 0; padding-right: 0;
} }
@ -169,12 +169,11 @@
} }
.flexRow--container-description-section-product-pdp{ .flexRow--container-description-section-product-pdp{
padding: 0 40px; padding: 0 32px;
.flexRowContent--container-description-section-product-pdp{ .flexRowContent--container-description-section-product-pdp{
display: grid; display: grid;
gap: 32px; gap: 32px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding: 0 32px;
.stretchChildrenWidth{ .stretchChildrenWidth{
width: 100% !important; width: 100% !important;

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

@ -1,7 +1,8 @@
.product-identifier--productReference{ .product-identifier--productReference{
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 16px; margin-bottom: 24px;
margin-top: 8px;
.product-identifier__label, .product-identifier__separator{ .product-identifier__label, .product-identifier__separator{
display: none; display: none;

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

@ -75,6 +75,7 @@
} }
.skuSelectorSubcontainer--tamanho{ .skuSelectorSubcontainer--tamanho{
margin-bottom: 10px;
.skuSelectorName { .skuSelectorName {
font-size: 0; font-size: 0;
&::after{ &::after{
@ -226,6 +227,9 @@
:last-child{ :last-child{
color: #000000; color: #000000;
text-decoration-line: underline; text-decoration-line: underline;
font-weight: 400;
font-size: 12px;
line-height: 16px;
} }
:global(.vtex__icon-external-link){ :global(.vtex__icon-external-link){
@ -272,6 +276,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
width: max-content; width: max-content;
padding-bottom: 1px;
.shippingTableHead { .shippingTableHead {
display: table-caption; display: table-caption;

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

@ -73,14 +73,20 @@
.listContainer--container-list-tab-layout-pdp{ .listContainer--container-list-tab-layout-pdp{
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
// gap: 16px;
margin-bottom: 16px; margin-bottom: 16px;
border-top: 1px solid #B9B9B9; border-top: 1px solid #B9B9B9;
.listItem{ .listItem{
width: max-content; display: flex;
width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
justify-content: flex-start;
:global(.vtex-button){
display: flex;
width: 100%;
}
&:first-child{ &:first-child{
margin-top: 16px; margin-top: 16px;