forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #1
@ -14,6 +14,12 @@
|
|||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
padding: 0 0 16px;
|
padding: 0 0 16px;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 71.858%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.container .homeLink {
|
.container .homeLink {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -24,13 +24,11 @@
|
|||||||
.product-identifier__value {
|
.product-identifier__value {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
.product-identifier__value {
|
.product-identifier__value {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -12,4 +12,5 @@
|
|||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
margin-top: 24px;
|
||||||
}
|
}
|
@ -34,6 +34,11 @@
|
|||||||
width: 96%;
|
width: 96%;
|
||||||
margin: 0 auto;
|
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) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer {
|
.sliderLayoutContainer--carousel .sliderTrackContainer {
|
||||||
width: 95.085%;
|
width: 95.085%;
|
||||||
@ -47,6 +52,11 @@
|
|||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
|
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
|
||||||
width: 5.3515% !important;
|
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) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
|
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
|
||||||
width: 6.0831% !important;
|
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) {
|
.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;
|
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) {
|
@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) {
|
.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;
|
min-height: 402.2px;
|
||||||
@ -99,6 +114,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 314.4px;
|
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) {
|
@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) {
|
.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;
|
height: 291.2px;
|
||||||
|
@ -187,11 +187,21 @@
|
|||||||
grid-template-areas: "A B" "C C";
|
grid-template-areas: "A B" "C C";
|
||||||
max-width: unset !important;
|
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) {
|
@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-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
|
||||||
width: 81.02%;
|
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) {
|
: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;
|
grid-area: A;
|
||||||
margin: 0 8px 15px 0;
|
margin: 0 8px 15px 0;
|
||||||
@ -202,6 +212,11 @@
|
|||||||
width: 23.657em;
|
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) {
|
: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-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -209,6 +224,7 @@
|
|||||||
color: #989898;
|
color: #989898;
|
||||||
border: 1px solid #989898;
|
border: 1px solid #989898;
|
||||||
border-radius: unset;
|
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 {
|
: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;
|
font-weight: 400;
|
||||||
@ -220,12 +236,18 @@
|
|||||||
grid-area: B;
|
grid-area: B;
|
||||||
margin: 0 0 15px;
|
margin: 0 0 15px;
|
||||||
width: 12.22em;
|
width: 12.22em;
|
||||||
|
height: 40px;
|
||||||
}
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@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) {
|
: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;
|
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) {
|
: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-weight: 400;
|
||||||
font-size: 12px;
|
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) {
|
: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%;
|
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) {
|
: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;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
@ -4,6 +4,10 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
padding: 0 0 16px;
|
padding: 0 0 16px;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 71.858%;
|
||||||
|
}
|
||||||
.homeLink {
|
.homeLink {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -164,12 +164,15 @@
|
|||||||
"A B"
|
"A B"
|
||||||
"C C";
|
"C C";
|
||||||
max-width: unset !important;
|
max-width: unset !important;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
width: 44.138%;
|
||||||
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
width: 81.02%;
|
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) {
|
:global(.vtex-store-components-3-x-inputName) {
|
||||||
grid-area: A;
|
grid-area: A;
|
||||||
margin: 0 8px 15px 0;
|
margin: 0 8px 15px 0;
|
||||||
@ -177,6 +180,9 @@
|
|||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
width: 23.657em;
|
width: 23.657em;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 94.26%;
|
||||||
|
}
|
||||||
:global(.vtex-input) {
|
:global(.vtex-input) {
|
||||||
:global(.vtex-input-prefix__group) {
|
:global(.vtex-input-prefix__group) {
|
||||||
:global(.vtex-styleguide-9-x-input) {
|
:global(.vtex-styleguide-9-x-input) {
|
||||||
@ -186,6 +192,7 @@
|
|||||||
color: #989898;
|
color: #989898;
|
||||||
border: 1px solid #989898;
|
border: 1px solid #989898;
|
||||||
border-radius: unset;
|
border-radius: unset;
|
||||||
|
height: 40px;
|
||||||
}
|
}
|
||||||
:global(.vtex-styleguide-9-x-input)::placeholder {
|
:global(.vtex-styleguide-9-x-input)::placeholder {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -200,9 +207,13 @@
|
|||||||
grid-area: B;
|
grid-area: B;
|
||||||
margin: 0 0 15px;
|
margin: 0 0 15px;
|
||||||
width: 12.22em;
|
width: 12.22em;
|
||||||
|
height: 40px;
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
width: 23.657em;
|
width: 23.657em;
|
||||||
}
|
}
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
width: 99.47%;
|
||||||
|
}
|
||||||
:global(.vtex-input) {
|
:global(.vtex-input) {
|
||||||
:global(.vtex-input-prefix__group) {
|
:global(.vtex-input-prefix__group) {
|
||||||
:global(.vtex-styleguide-9-x-input) {
|
:global(.vtex-styleguide-9-x-input) {
|
||||||
@ -224,12 +235,13 @@
|
|||||||
}
|
}
|
||||||
:global(.vtex-store-components-3-x-submit) {
|
:global(.vtex-store-components-3-x-submit) {
|
||||||
grid-area: C;
|
grid-area: C;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
// @media (max-width: 1025px) and (min-width: 768px) {
|
|
||||||
// width: 150.13%;
|
|
||||||
// }
|
|
||||||
:global(.vtex-button) {
|
:global(.vtex-button) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
|
margin: 0;
|
||||||
|
height: 49px;
|
||||||
|
}
|
||||||
:global(.vtex-button__label) {
|
:global(.vtex-button__label) {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
@ -15,11 +15,9 @@
|
|||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) and (min-width: 375px) {
|
@media (max-width: 768px) and (min-width: 375px) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: left;
|
float: left;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -5,4 +5,5 @@
|
|||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
@ -19,6 +19,9 @@
|
|||||||
.sliderTrackContainer {
|
.sliderTrackContainer {
|
||||||
width: 96%;
|
width: 96%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
width: 97.012%;
|
||||||
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
width: 95.085%;
|
width: 95.085%;
|
||||||
}
|
}
|
||||||
@ -28,6 +31,9 @@
|
|||||||
.sliderTrack {
|
.sliderTrack {
|
||||||
.slide--carousel {
|
.slide--carousel {
|
||||||
width: 5.3515% !important;
|
width: 5.3515% !important;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
width: 5.4036%!important;
|
||||||
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
width: 6.0831% !important;
|
width: 6.0831% !important;
|
||||||
}
|
}
|
||||||
@ -41,6 +47,9 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
:global(.vtex-product-summary-2-x-clearLink) {
|
:global(.vtex-product-summary-2-x-clearLink) {
|
||||||
min-height: 448.4px;
|
min-height: 448.4px;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
min-height: 543.4px;
|
||||||
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
min-height: 402.2px;
|
min-height: 402.2px;
|
||||||
}
|
}
|
||||||
@ -69,6 +78,9 @@
|
|||||||
:global(.vtex-product-summary-2-x-imageContainer) {
|
:global(.vtex-product-summary-2-x-imageContainer) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 314.4px;
|
height: 314.4px;
|
||||||
|
@media (max-width: 2561px) and (min-width: 1920px) {
|
||||||
|
height: 434.4px;
|
||||||
|
}
|
||||||
@media (max-width: 1025px) and (min-width: 768px) {
|
@media (max-width: 1025px) and (min-width: 768px) {
|
||||||
height: 291.2px;
|
height: 291.2px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user