AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hotfix: revendo parte04 todo css, deixando mais responsivo e proximo ao figma possivel

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-30 14:47:13 -03:00
parent cf4ccf3724
commit 360b10b6b5
7 changed files with 190 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/components/Html/styles.css
View File

@ -20,7 +20,7 @@
} }
} }
[class*=""] { /* [class*=""] {
} } */

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

@ -32,6 +32,11 @@
.flexRowContent--divProductIndisponivel { .flexRowContent--divProductIndisponivel {
gap: 32px; gap: 32px;
} }
@media (max-width: 1024px) {
.flexRowContent--divProductIndisponivel {
flex-direction: column;
}
}
.flexColChild--info-availability .flexRow--divNomeProduct { .flexColChild--info-availability .flexRow--divNomeProduct {
text-align: end; text-align: end;

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

@ -71,6 +71,48 @@
padding-bottom: 16px !important; padding-bottom: 16px !important;
border: 0; border: 0;
} }
.newsletter--newsletter .container--newsletter .form--newsletter {
min-width: 744px;
}
@media (max-width: 1024px) {
.newsletter--newsletter .container--newsletter .form--newsletter {
margin: 0;
width: 100%;
max-width: 100%;
padding: 0;
min-width: 265px;
}
}
@media (max-width: 1024px) {
.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter {
display: flex;
width: inherit;
justify-content: start;
align-items: baseline;
}
}
.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #ffffff;
display: flex;
flex-direction: column;
min-width: 313px;
}
.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter::after {
content: "Receba ofertas e novidades por e-mail";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
text-align: center;
color: #929292;
}
.buttonContainer--newsletter { .buttonContainer--newsletter {
padding-left: 0 !important; padding-left: 0 !important;
@ -147,6 +189,17 @@
content: "OUTROS CORES:"; content: "OUTROS CORES:";
font-size: 14px; font-size: 14px;
} }
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku--selected .frameAround--divSku {
border: 3px solid black !important;
width: 52px !important;
height: 52px !important;
top: -2px !important;
left: -2px !important;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku--selected .diagonalCross--divSku {
color: black !important;
border: 1px solid black !important;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku { .skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -195,15 +248,25 @@
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-size: 14px; font-size: 14px;
} }
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku--selected .frameAround--divSku {
border: 3px solid black !important;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku--selected .diagonalCross--divSku {
height: 40px;
width: 40px;
border-radius: 50%;
color: black !important;
border: 1px solid black !important;
transform: rotate(-90deg);
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku { .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%;
} }
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku { .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku {
border: 1px solid #989898;
border-radius: 50%; border-radius: 50%;
width: 40px; border: 0.5px solid #989898;
height: 40px;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -230,6 +293,8 @@
height: 40px; height: 40px;
width: 40px; width: 40px;
border-radius: 50%; border-radius: 50%;
color: #d5d5d5;
border: 1px solid #d5d5d5;
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.skuSelectorContainer--divSku .diagonalCross--divSku { .skuSelectorContainer--divSku .diagonalCross--divSku {
@ -438,24 +503,24 @@
} }
.subscriberContainer .form .content { .subscriberContainer .form .content {
display: grid; display: grid;
grid-template-areas: "1" "2"; grid-template-areas: "name email" "submit submit";
justify-content: inherit; justify-content: inherit;
gap: 10px; gap: 10px;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.subscriberContainer .form .content .inputName { .subscriberContainer .form .content .inputName {
grid-area: 1; grid-area: name;
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.subscriberContainer .form .content .inputEmail { .subscriberContainer .form .content .inputEmail {
grid-area: 1; grid-area: email;
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.subscriberContainer .form .content .submit { .subscriberContainer .form .content .submit {
grid-area: 2; grid-area: submit;
} }
.subscriberContainer .form .content .submit :global(.vtex-button) { .subscriberContainer .form .content .submit :global(.vtex-button) {
width: 100%; width: 100%;

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

@ -29,6 +29,11 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia {
width: inherit;
}
}
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) { .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) {
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
@ -38,6 +43,18 @@
color: #bfbfbf; color: #bfbfbf;
text-transform: capitalize; text-transform: capitalize;
} }
@media (min-width: 2500px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) {
font-size: 24px !important;
}
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) {
width: inherit;
display: flex;
justify-content: start;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) { .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {
padding-left: 0; padding-left: 0;

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

@ -18,6 +18,9 @@
} }
.flexRowContent--divProductIndisponivel { .flexRowContent--divProductIndisponivel {
gap: 32px; gap: 32px;
@media (max-width: 1024px) {
flex-direction: column;
}
} }
.flexColChild--info-availability { .flexColChild--info-availability {
.flexRow--divNomeProduct { .flexRow--divNomeProduct {

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

@ -54,6 +54,46 @@
padding-top: 32px !important; padding-top: 32px !important;
padding-bottom: 16px !important; padding-bottom: 16px !important;
border: 0; border: 0;
.form--newsletter {
min-width: 744px;
@media (max-width: 1024px) {
margin: 0;
width: 100%;
max-width: 100%;
padding: 0;
min-width: 265px;
}
.inputGroup--newsletter {
@media (max-width: 1024px) {
display: flex;
width: inherit;
justify-content: start;
align-items: baseline;
}
}
.label--newsletter {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #ffffff;
display: flex;
flex-direction: column;
min-width: 313px;
&::after {
content: "Receba ofertas e novidades por e-mail";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
text-align: center;
color: #929292;
}
}
}
} }
} }
.buttonContainer--newsletter { .buttonContainer--newsletter {
@ -105,6 +145,9 @@
padding-top: 0 !important; padding-top: 0 !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
// vtex-store-components-3-x-skuSelectorItem vtex-store-components-3-x-skuSelectorItem--divSku vtex-store-components-3-x-skuSelectorItem--34 vtex-store-components-3-x-skuSelectorItem--divSku--34 vtex-store-components-3-x-skuSelectorItem--selected vtex-store-components-3-x-skuSelectorItem--divSku--selected relative di pointer flex items-center outline-0 ma2
// vtex-store-components-3-x-skuSelectorItem vtex-store-components-3-x-skuSelectorItem--divSku vtex-store-components-3-x-skuSelectorItem--34 vtex-store-components-3-x-skuSelectorItem--divSku--34 relative di pointer flex items-center outline-0 ma2
.skuSelectorContainer--divSku { .skuSelectorContainer--divSku {
display: flex; display: flex;
@ -124,6 +167,19 @@
font-size: 14px; font-size: 14px;
} }
} }
.skuSelectorItem--divSku--selected {
.frameAround--divSku {
border: 3px solid black !important;
width: 52px !important;
height: 52px !important;
top: -2px !important;
left: -2px !important;
}
.diagonalCross--divSku {
color: $color-black !important;
border: 1px solid $color-black !important;
}
}
.skuSelectorItem--divSku { .skuSelectorItem--divSku {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -172,19 +228,32 @@
font-size: 14px; font-size: 14px;
} }
} }
.skuSelectorItem--divSku--selected {
.frameAround--divSku {
border: 3px solid black !important;
}
.diagonalCross--divSku {
height: 40px;
width: 40px;
border-radius: 50%;
color: $color-black !important;
border: 1px solid $color-black !important;
transform: rotate(-90deg);
}
}
.skuSelectorItem--divSku { .skuSelectorItem--divSku {
width: 40px; width: 40px;
height: 40px; height: 40px;
.frameAround--divSku {
border: 1px solid #989898;
border-radius: 50%; border-radius: 50%;
width: 40px; .frameAround--divSku {
height: 40px; border-radius: 50%;
border: 0.5px solid #989898;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
} }
.skuSelectorInternalBox--divSku { .skuSelectorInternalBox--divSku {
border-radius: 50%; border-radius: 50%;
width: 40px; width: 40px;
@ -206,6 +275,8 @@
height: 40px; height: 40px;
width: 40px; width: 40px;
border-radius: 50%; border-radius: 50%;
color: #d5d5d5;
border: 1px solid #d5d5d5;
transform: rotate(-90deg); transform: rotate(-90deg);
} }
} }
@ -217,6 +288,7 @@
transform: rotate(-90deg); transform: rotate(-90deg);
} }
} }
.shippingContainer { .shippingContainer {
display: flex; display: flex;
position: relative; position: relative;
@ -419,24 +491,24 @@
.content { .content {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"1" "name email"
"2"; "submit submit";
justify-content: inherit; justify-content: inherit;
gap: 10px; gap: 10px;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
.inputName { .inputName {
grid-area: 1; grid-area: name;
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.inputEmail { .inputEmail {
grid-area: 1; grid-area: email;
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.submit { .submit {
grid-area: 2; grid-area: submit;
:global(.vtex-button) { :global(.vtex-button) {
width: 100%; width: 100%;
height: 49px; height: 49px;

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

@ -17,6 +17,9 @@
.listItem--renderGuia { .listItem--renderGuia {
margin: 0; margin: 0;
padding: 0; padding: 0;
@media (max-width: 1024px) {
width: inherit;
}
:global(.vtex-button) { :global(.vtex-button) {
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
@ -25,6 +28,14 @@
line-height: 38px; line-height: 38px;
color: #bfbfbf; color: #bfbfbf;
text-transform: capitalize; text-transform: capitalize;
@media (min-width: 2500px) {
font-size: 24px !important;
}
@media (max-width: 1024px) {
width: inherit;
display: flex;
justify-content: start;
}
} }
:global(.vtex-button__label) { :global(.vtex-button__label) {
@media (max-width: 1024px) { @media (max-width: 1024px) {