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

Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 93 commits from feature/challenge-vtex-io into develop 2023-02-03 17:14:03 +00:00
Conversation 0 Commits 93 Files Changed 68 +278 -40
2 changed files with 278 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a4f934c08d - Show all commits

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

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -11,21 +12,7 @@
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: auto; margin: auto;
} max-width: unset !important;
@media (max-width: 1920px) and (min-width: 1024px) {
.container {
padding: 0 40px;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.container {
padding: 0 40px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.container {
padding: 0 40px;
}
} }
.swiperCaret { .swiperCaret {
@ -58,12 +45,22 @@
margin-right: 0; margin-right: 0;
} }
} }
@media (max-width: 2560px) and (min-width: 1920px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide {
height: 904px !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide {
margin: 0; margin: 0;
height: 944px !important; height: 944px !important;
} }
} }
@media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage {
height: 904px !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage {
height: 944px !important; height: 944px !important;
@ -71,16 +68,16 @@
} }
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
object-fit: unset !important; object-fit: unset !important;
max-height: unset !important;
} }
@media (max-width: 1920px) and (min-width: 1024px) { @media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
max-height: unset !important; height: 904px !important;
} }
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
height: 944px !important; height: 944px !important;
max-height: unset !important;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
@ -88,7 +85,6 @@
width: 99.67% !important; width: 99.67% !important;
height: 296px !important; height: 296px !important;
object-fit: cover !important; object-fit: cover !important;
max-height: unset !important;
} }
} }
@media (max-width: 1920px) and (min-width: 1024px) { @media (max-width: 1920px) and (min-width: 1024px) {
@ -156,6 +152,113 @@
color: #575757; color: #575757;
} }
:global(.vtex-store-components-3-x-subscriberContainer) {
margin-top: 16px;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-title)::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-subscribeLabel)::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) {
margin: 0;
}
:global(.vtex-store-components-3-x-subscriberContainer) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) {
width: 60.091%;
margin: 0;
display: grid;
grid-template-areas: "A B" "C C";
max-width: unset !important;
}
@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%;
}
}
: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;
width: 12.22em;
}
@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-inputName) {
width: 23.657em;
}
}
: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;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
: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-size: 12px;
line-height: 16px;
color: #989898;
}
: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) {
grid-area: B;
margin: 0 0 15px;
width: 12.22em;
}
@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;
}
}
: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;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
: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)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
: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) {
grid-area: C;
margin: 0;
}
: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%;
}
: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;
}
: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)::after {
content: "AVISE-ME";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
.skuSelectorContainer { .skuSelectorContainer {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
@ -458,20 +561,25 @@
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 92.93%; width: 92.93%;
max-height: unset; max-height: unset;
left: 6.9%;
position: relative; position: relative;
margin-left: 32px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.productImagesContainer--image-description {
width: 94.784%;
}
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 100%;
left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 100%;
left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@ -480,9 +588,14 @@
} }
.productDescriptionContainer { .productDescriptionContainer {
margin-left: 32px;
width: 92.93%; width: 92.93%;
position: relative; position: relative;
margin-left: 16px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.productDescriptionContainer {
width: 94.784%;
}
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productDescriptionContainer { .productDescriptionContainer {

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

@ -4,15 +4,7 @@
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: auto; margin: auto;
@media (max-width: 1920px) and (min-width: 1024px) { max-width: unset !important;
padding: 0 40px;
}
@media (max-width: 1025px) and (min-width: 768px) {
padding: 0 40px;
}
@media (max-width: 768px) and (min-width: 375px) {
padding: 0 40px;
}
} }
.swiperCaret { .swiperCaret {
@ -42,28 +34,38 @@
margin-right: 0; margin-right: 0;
} }
.productImagesGallerySlide { .productImagesGallerySlide {
@media (max-width: 2560px) and (min-width: 1920px) {
height: 904px !important;
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
margin: 0; margin: 0;
height: 944px !important; height: 944px !important;
} }
.productImage { .productImage {
@media (max-width: 2561px) and (min-width: 1920px) {
height: 904px !important;
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important; height: 944px !important;
} }
.productImageTag--main { .productImageTag--main {
object-fit: unset !important; object-fit: unset !important;
@media (max-width: 1920px) and (min-width: 1024px) { max-height: unset !important;
max-height: unset !important; @media (max-width: 2561px) and (min-width: 1920px) {
height: 904px !important;
} }
// @media (max-width: 1920px) and (min-width: 1024px) {
// max-height: unset !important;
// }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important; height: 944px !important;
max-height: unset !important; // max-height: unset !important;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 99.67% !important; width: 99.67% !important;
height: 296px !important; height: 296px !important;
object-fit: cover !important; object-fit: cover !important;
max-height: unset !important; // max-height: unset !important;
} }
} }
} }
@ -128,6 +130,123 @@
} }
} }
:global(.vtex-store-components-3-x-subscriberContainer) {
margin-top: 16px;
:global(.vtex-store-components-3-x-title) {
font-size: 0;
margin: 0;
}
:global(.vtex-store-components-3-x-title)::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
margin-bottom: 16px;
}
:global(.vtex-store-components-3-x-subscribeLabel)::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
:global(.vtex-store-components-3-x-form) {
margin: 0;
:global(.vtex-store-components-3-x-content) {
width: 60.091%;
margin: 0;
display: grid;
grid-template-areas:
"A B"
"C C";
max-width: unset !important;
@media (max-width: 1025px) and (min-width: 768px) {
width: 81.02%;
}
// @media (max-width: 768px) and (min-width: 375px) {
// }
:global(.vtex-store-components-3-x-inputName) {
grid-area: A;
margin: 0 8px 15px 0;
width: 12.22em;
@media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em;
}
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
:global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
}
}
}
:global(.vtex-store-components-3-x-inputEmail) {
grid-area: B;
margin: 0 0 15px;
width: 12.22em;
@media (max-width: 1025px) and (min-width: 768px) {
width: 23.657em;
}
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
border: 1px solid #989898;
border-radius: unset;
}
:global(.vtex-styleguide-9-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
}
}
}
: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%;
:global(.vtex-button__label) {
font-size: 0;
}
:global(.vtex-button__label)::after {
content: "AVISE-ME";
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
}
}
}
}
}
// sku selector // sku selector
.skuSelectorContainer { .skuSelectorContainer {
@ -445,16 +564,19 @@
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 92.93%; width: 92.93%;
max-height: unset; max-height: unset;
left: 6.9%;
position: relative; position: relative;
margin-left: 32px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 94.784%;
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 100%; width: 100%;
left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 100%; width: 100%;
left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
& .productImageTag--image-description--main { & .productImageTag--image-description--main {
@ -462,9 +584,12 @@
} }
} }
.productDescriptionContainer { .productDescriptionContainer {
margin-left: 32px;
width: 92.93%; width: 92.93%;
position: relative; position: relative;
margin-left: 16px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 94.784%;
}
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;