diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 053ae84..16cc1f6 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -326,7 +326,7 @@ "blockClass": "imgDescription" } }, - + "flex-layout.row#description": { "props": { "blockClass":"divDescription", @@ -343,6 +343,9 @@ } }, "list-context.product-list#demo": { + "props":{ + // "collection":"/m3-academy---desafio/sandalias" + }, "blocks": ["product-summary.shelf#demo"], "children": ["slider-layout#demo-product"] }, diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..a0a805c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,32 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--tituloSlick { + height: 40px; + margin-bottom: 32px; +} +@media (min-width: 1024px) { + .container--tituloSlick { + margin-bottom: 24px; + } +} +@media (min-width: 500px) { + .container--tituloSlick { + margin-bottom: 16px; + } +} +.container--tituloSlick .paragraph--tituloSlick { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} +@media (min-width: 1024px) { + .container--tituloSlick .paragraph--tituloSlick { + font-size: 20px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..1978ab5 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,40 @@ -.sliderLayoutContainer { - justify-content: center; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.sliderTrackContainer--carousel { + background-color: #fff; + margin-left: 40px; + margin-right: 40px; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderTrackContainer--carousel .slide--carousel { + padding: 0px; + width: 434.4px !important; + height: 543.4px; } - -.sliderTrackContainer { - max-width: 100%; +@media (max-width: 1920px) { + .sliderTrackContainer--carousel .slide--carousel { + width: 314.4px !important; + height: 448.4px; + } } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +@media (max-width: 1920px) { + .sliderTrackContainer--carousel .slide--carousel { + width: 314.4px !important; + height: 448.4px; + } } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +@media (max-width: 500px) { + .sliderTrackContainer--carousel .slide--carousel { + width: 291.2px !important; + height: 402.2px; + } } +.sliderTrackContainer--carousel .paginationDotsContainer--carousel { + margin-bottom: 105px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b8f32c7..e59e125 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -81,17 +81,20 @@ .productImageTag--imgDescription { width: 100%; + max-height: 664px !important; max-width: 664px; } @media (min-width: 2500px) { .productImageTag--imgDescription { max-width: 904px; + max-height: 904px !important; } } @media (max-width: 1024px) { .productImageTag--imgDescription { max-width: 944px; margin-bottom: 16px; + max-height: 944px !important; } } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..e946be3 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,22 @@ +.container--tituloSlick { + height: 40px; + margin-bottom: 32px; + @media (min-width: 1024px) { + margin-bottom: 24px; + } + @media (min-width: 500px) { + margin-bottom: 16px; + } + .paragraph--tituloSlick { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + @media (min-width: 1024px) { + font-size: 20px; + } + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..3deee82 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,42 @@ +.sliderTrackContainer--carousel { + background-color: $color-white; + margin-left: 40px; + margin-right: 40px; + .sliderTrack--carousel { + +} +.slide--carousel { + padding: 0px; + width: 434.4px !important; + height: 543.4px; + @media (max-width: 1920px) { + width: 314.4px !important; + height: 448.4px; + } + @media (max-width: 1920px) { + width: 314.4px !important; + height: 448.4px; + } + @media (max-width: 500px) { + width: 291.2px !important; + height: 402.2px; + } + + } + .sliderArrows--carousel { + .caretIcon--carousel { + } + } + .sliderArrows--carousel { + .caretIcon--carousel { + } + } + + .paginationDotsContainer--carousel { + margin-bottom: 105px; + .paginationDot--carousel { + } + .paginationDot--carousel--isActive { + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index cccb61c..80987ac 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -18,11 +18,11 @@ max-height: 100% !important; max-width: 664px; margin-bottom: 16px; - @media (min-width:2500px) { + @media (min-width: 2500px) { max-width: 904px; } - @media (max-width:1024px) { - max-width: 100% ; + @media (max-width: 1024px) { + max-width: 100%; } } } @@ -67,17 +67,19 @@ .productImageTag--imgDescription { width: 100%; + max-height: 664px !important; max-width: 664px; - @media (min-width:2500px) { + @media (min-width: 2500px) { max-width: 904px; + max-height: 904px !important; } @media (max-width: 1024px) { max-width: 944px; margin-bottom: 16px; + max-height: 944px !important; } } .productDescriptionContainer { - .productDescriptionTitle { font-family: "Open Sans"; font-style: normal;