anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: correção de estilos e adicionando estilos para telas de 2561px até 1920px

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-30 18:33:19 -03:00
parent a4f934c08d
commit a0a28e660a
10 changed files with 91 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,12 @@
margin-left: 40px;
padding: 0 0 16px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.container {
margin: 0 auto;
width: 71.858%;
}
}
.container .homeLink {
padding: 0;
}

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

@ -24,13 +24,11 @@
.product-identifier__value {
text-align: left;
float: left;
margin-bottom: 24px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.product-identifier__value {
text-align: left;
float: left;
margin-bottom: 24px;
}
}

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

@ -12,4 +12,5 @@
font-size: 25px;
line-height: 38px;
color: #000000;
margin-top: 24px;
}

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

@ -34,6 +34,11 @@
width: 96%;
margin: 0 auto;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderTrackContainer {
width: 97.012%;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer {
width: 95.085%;
@ -47,6 +52,11 @@
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
width: 5.3515% !important;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
width: 5.4036% !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
width: 6.0831% !important;
@ -67,6 +77,11 @@
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 448.4px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 543.4px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 402.2px;
@ -99,6 +114,11 @@
width: 100%;
height: 314.4px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
height: 434.4px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
height: 291.2px;

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

@ -187,11 +187,21 @@
grid-template-areas: "A B" "C C";
max-width: unset !important;
}
@media (max-width: 2561px) and (min-width: 1920px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
width: 44.138%;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
width: 81.02%;
}
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
width: 100%;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
grid-area: A;
margin: 0 8px 15px 0;
@ -202,6 +212,11 @@
width: 23.657em;
}
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) {
width: 94.26%;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
@ -209,6 +224,7 @@
color: #989898;
border: 1px solid #989898;
border-radius: unset;
height: 40px;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
@ -220,12 +236,18 @@
grid-area: B;
margin: 0 0 15px;
width: 12.22em;
height: 40px;
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
width: 23.657em;
}
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) {
width: 99.47%;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
@ -247,6 +269,12 @@
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) {
width: 100%;
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) {
margin: 0;
height: 49px;
}
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-submit) :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}

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

@ -4,6 +4,10 @@
flex-wrap: wrap;
margin-left: 40px;
padding: 0 0 16px;
@media (max-width: 2561px) and (min-width: 1920px) {
margin: 0 auto;
width: 71.858%;
}
.homeLink {
padding: 0;
}

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

@ -164,12 +164,15 @@
"A B"
"C C";
max-width: unset !important;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 44.138%;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 81.02%;
}
// @media (max-width: 768px) and (min-width: 375px) {
// }
@media (max-width: 768px) and (min-width: 375px) {
width: 100%;
}
:global(.vtex-store-components-3-x-inputName) {
grid-area: A;
margin: 0 8px 15px 0;
@ -177,6 +180,9 @@
@media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 94.26%;
}
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
@ -186,6 +192,7 @@
color: #989898;
border: 1px solid #989898;
border-radius: unset;
height: 40px;
}
:global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
@ -200,9 +207,13 @@
grid-area: B;
margin: 0 0 15px;
width: 12.22em;
height: 40px;
@media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 99.47%;
}
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
@ -225,11 +236,12 @@
:global(.vtex-store-components-3-x-submit) {
grid-area: C;
margin: 0;
// @media (max-width: 1025px) and (min-width: 768px) {
// width: 150.13%;
// }
:global(.vtex-button) {
width: 100%;
@media (max-width: 768px) and (min-width: 375px) {
margin: 0;
height: 49px;
}
:global(.vtex-button__label) {
font-size: 0;
}

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

@ -15,11 +15,9 @@
@media (max-width: 1025px) and (min-width: 768px) {
text-align: left;
float: left;
margin-bottom: 24px;
}
@media (max-width: 768px) and (min-width: 375px) {
text-align: left;
float: left;
margin-bottom: 24px;
}
}

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

@ -5,4 +5,5 @@
font-size: 25px;
line-height: 38px;
color: #000000;
margin-top: 24px;
}

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

@ -19,6 +19,9 @@
.sliderTrackContainer {
width: 96%;
margin: 0 auto;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 97.012%;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 95.085%;
}
@ -28,6 +31,9 @@
.sliderTrack {
.slide--carousel {
width: 5.3515% !important;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 5.4036%!important;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 6.0831% !important;
}
@ -41,6 +47,9 @@
border-radius: 0;
:global(.vtex-product-summary-2-x-clearLink) {
min-height: 448.4px;
@media (max-width: 2561px) and (min-width: 1920px) {
min-height: 543.4px;
}
@media (max-width: 1025px) and (min-width: 768px) {
min-height: 402.2px;
}
@ -69,6 +78,9 @@
:global(.vtex-product-summary-2-x-imageContainer) {
width: 100%;
height: 314.4px;
@media (max-width: 2561px) and (min-width: 1920px) {
height: 434.4px;
}
@media (max-width: 1025px) and (min-width: 768px) {
height: 291.2px;
}