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 #2

Merged
anacarolinaduartecavalcante merged 94 commits from develop into master 2023-02-03 17:19:00 +00:00
Conversation 0 Commits 94 Files Changed 68 +204 -15
8 changed files with 204 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f2a4c8e880 - Show all commits

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

@ -22,6 +22,16 @@
width: 100% !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.stretchChildrenWidth {
width: 100% !important;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.stretchChildrenWidth {
width: 100% !important;
}
}
.flexCol--stack-layout-content {
width: 100% !important;
@ -41,7 +51,8 @@
}
@media (max-width: 768px) and (min-width: 375px) {
.flexRowContent--product-main-content {
padding: 0 40px;
display: grid;
grid-template-columns: 100%;
}
}

2
styles/css/vtex.rich-text.css
View File

@ -20,7 +20,7 @@
}
@media (max-width: 768px) and (min-width: 375px) {
.container--slider-title {
margin-bottom: 24px;
margin-bottom: 16px;
}
}
.container--slider-title .wrapper--slider-title .heading--slider-title {

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

@ -10,18 +10,68 @@
.sliderLayoutContainer--carousel {
background: unset;
min-height: 448.4px;
margin-bottom: 64px;
width: 94.435%;
margin: 0 auto 64px;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel {
width: 92.166%;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel {
width: 78.616%;
margin: 0 auto 32px;
min-height: 273.8px;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer {
margin-bottom: 32px;
width: 96%;
margin: 0 auto;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer {
width: 95.085%;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel .sliderTrackContainer {
width: 87.03%;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
width: 5.3515% !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
width: 6.0831% !important;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel {
width: 6.921% !important;
}
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel {
width: 100%;
}
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) {
max-width: 314.4px !important;
max-width: 100% !important;
border-radius: 0;
}
.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: 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;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
min-height: 273.8px;
}
}
.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) {
padding: 0;
}
@ -41,9 +91,22 @@
min-height: 50px;
}
.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) {
width: 314.4px;
width: 100%;
height: 314.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;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.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: 124.8px;
}
}
.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) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
border-radius: 0;
}
@media (max-width: 1920px) and (min-width: 1024px) {
.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) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
min-width: 100%;
@ -82,9 +145,14 @@
text-align: center;
color: #000000;
}
.sliderLayoutContainer--carousel .sliderArrows {
padding: 0;
margin: 0;
}
.sliderLayoutContainer--carousel .paginationDotsContainer {
display: flex;
align-items: center;
bottom: -32px;
}
.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot {
background-color: #000000;

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

@ -17,6 +17,16 @@
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 {
display: none;
@ -34,6 +44,31 @@
margin-right: 0;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide {
margin: 0;
height: 944px !important;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage {
height: 944px !important;
}
}
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
object-fit: unset !important;
}
@ -45,6 +80,7 @@
@media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
height: 944px !important;
max-height: unset !important;
}
}
@media (max-width: 768px) and (min-width: 375px) {
@ -52,6 +88,7 @@
width: 99.67% !important;
height: 296px !important;
object-fit: cover !important;
max-height: unset !important;
}
}
@media (max-width: 1920px) and (min-width: 1024px) {

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

@ -11,6 +11,12 @@
@media (max-width: 1920px) and (min-width: 1024px) {
width: 100% !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 100% !important;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 100% !important;
}
}
.flexCol--stack-layout-content {
@ -27,7 +33,9 @@
grid-template-columns: 100%;
}
@media (max-width: 768px) and (min-width: 375px) {
padding: 0 40px;
// padding: 0 40px;
display: grid;
grid-template-columns: 100%;
}
}

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

@ -7,6 +7,12 @@
@media (max-width: 1920px) and (min-width: 1024px) {
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 {
@ -25,8 +31,25 @@
margin-left: 0;
margin-right: 0;
}
@media (max-width: 1025px) and (min-width: 768px) {
width: 100%;
margin-left: 0;
margin-right: 0;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.productImagesGallerySlide {
@media (max-width: 1025px) and (min-width: 768px) {
margin: 0;
height: 944px !important;
}
.productImage {
@media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important;
}
.productImageTag--main {
object-fit: unset !important;
@media (max-width: 1920px) and (min-width: 1024px) {
@ -34,11 +57,13 @@
}
@media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important;
max-height: unset !important;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 99.67% !important;
height: 296px !important;
object-fit: cover !important;
max-height: unset !important;
}
}
}

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

@ -9,7 +9,7 @@
margin-bottom: 24px;
}
@media (max-width: 768px) and (min-width: 375px) {
margin-bottom: 24px;
margin-bottom: 16px;
}
.wrapper--slider-title {
.heading--slider-title {

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

@ -3,17 +3,47 @@
.sliderLayoutContainer--carousel {
background: unset;
min-height: 448.4px;
margin-bottom: 64px;
width: 94.435%;
margin: 0 auto 64px;
@media (max-width: 1025px) and (min-width: 768px) {
width: 92.166%;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 78.616%;
margin: 0 auto 32px;
min-height: 273.8px;
}
.sliderTrackContainer {
margin-bottom: 32px;
width: 96%;
margin: 0 auto;
@media (max-width: 1025px) and (min-width: 768px) {
width: 95.085%;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 87.03%;
}
.sliderTrack {
.slide--carousel {
width: 5.3515% !important;
@media (max-width: 1025px) and (min-width: 768px) {
width: 6.0831% !important;
}
@media (max-width: 768px) and (min-width: 375px) {
width: 6.921% !important;
}
.slideChildrenContainer--carousel {
width: 100%;
:global(.vtex-product-summary-2-x-containerNormal) {
max-width: 314.4px !important;
max-width: 100% !important;
border-radius: 0;
:global(.vtex-product-summary-2-x-clearLink) {
min-height: 448.4px;
@media (max-width: 1025px) and (min-width: 768px) {
min-height: 402.2px;
}
@media (max-width: 768px) and (min-width: 375px) {
min-height: 273.8px;
}
:global(.vtex-product-summary-2-x-element) {
padding: 0;
:global(.vtex-product-summary-2-x-nameContainer) {
@ -34,12 +64,18 @@
}
}
:global(.vtex-product-summary-2-x-imageContainer) {
width: 314.4px;
width: 100%;
height: 314.4px;
@media (max-width: 1025px) and (min-width: 768px) {
height: 291.2px;
}
@media (max-width: 768px) and (min-width: 375px) {
height: 124.8px;
}
:global(.vtex-product-summary-2-x-imageContainer) {
:global(.vtex-product-summary-2-x-imageNormal) {
border-radius: 0;
@media (max-width: 1920px) and (min-width: 1024px) {
// min-width: 314.4px;
min-width: 100%;
}
}
@ -65,7 +101,6 @@
padding: 0;
display: flex;
justify-content: center;
// flex-direction: column;
:global(.vtex-store-components-3-x-sellingPriceLabel) {
display: none;
}
@ -86,9 +121,14 @@
}
}
}
.sliderArrows {
padding: 0;
margin: 0;
}
.paginationDotsContainer {
display: flex;
align-items: center;
bottom: -32px;
.paginationDot {
background-color: #000000;
width: 10px !important;