diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 13722d4..b4f3f75 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -7,8 +7,20 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +:global(.vtex-slider-layout-0-x-sliderLayoutContainer) { + width: 94%; + margin: auto; + padding: 0; +} +@media screen and (min-width: 1920px) and (max-width: 2560px) { + :global(.vtex-slider-layout-0-x-sliderLayoutContainer) { + width: 62%; + } +} + :global(.vtex-slider-layout-0-x-slideChildrenContainer) { width: 314px; + padding-right: 16px; } .imageWrapper { @@ -65,6 +77,26 @@ :global(.vtex-slider-layout-0-x-sliderRightArrow)::after { visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); + margin: 0 40px 0 0; +} +@media screen and (min-width: 1920px) and (max-width: 2560px) { + :global(.vtex-slider-layout-0-x-sliderRightArrow)::after { + margin: 0; + } +} + +:global(.vtex-slider-layout-0-x-sliderLeftArrow) { + visibility: hidden; +} +:global(.vtex-slider-layout-0-x-sliderLeftArrow)::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-eleonoraotz.png); + margin: 0 0 0 40px; +} +@media screen and (min-width: 1920px) and (max-width: 2560px) { + :global(.vtex-slider-layout-0-x-sliderLeftArrow)::before { + margin: 0; + } } :global(.vtex-store-components-3-x-discountInsideContainer) { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..24de56d 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,22 @@ -.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 */ +.paginationDotsContainer--shelf { + align-items: center; + bottom: -30px; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; -} - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.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; +.paginationDotsContainer--shelf .paginationDot--shelf { + background-color: #000000; } +.paginationDotsContainer--shelf .paginationDot--isActive { + background-color: white; + border: 1px solid #000000; + width: 17px !important; + height: 17px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ef75ad2..1dac09a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -38,6 +38,7 @@ } .thumbImg { + border-radius: 8px; height: 90px; max-width: 90px; } @@ -374,6 +375,7 @@ .newsletter { display: block; background: #000000; + margin-top: 96px; } .newsletter :global(.vtex-store-components-3-x-form) { padding: 32px 0 13px; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index b3c3c6d..78696d7 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,18 +1,19 @@ // :global(.vtex-slider-layout-0-x-slide--shelf) { // width: 300px; // } -// :global(.vtex-slider-layout-0-x-sliderLayoutContainer) { -// margin: 0 40px; -// // margin: 0 auto; +:global(.vtex-slider-layout-0-x-sliderLayoutContainer) { + width: 94%; + margin: auto; + padding: 0; -// @media screen and (min-width: 1920px) and (max-width: 2560px) { -// margin: 6px 360px; -// padding: 0; -// } -// } + @media screen and (min-width: 1920px) and (max-width: 2560px) { + width: 62%; + } +} :global(.vtex-slider-layout-0-x-slideChildrenContainer) { width: 314px; + padding-right: 16px; } .imageWrapper { @@ -77,13 +78,28 @@ &::after { visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); + margin: 0 40px 0 0; + + @media screen and (min-width: 1920px) and (max-width: 2560px) { + margin: 0; + } + } +} + +:global(.vtex-slider-layout-0-x-sliderLeftArrow) { + visibility: hidden; + + &::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-eleonoraotz.png); + margin: 0 0 0 40px; + + @media screen and (min-width: 1920px) and (max-width: 2560px) { + margin: 0; + } } } :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; } - -// .paginationDot--container { -// color: $black; -// } 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..8117965 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,15 @@ +.paginationDotsContainer--shelf { + align-items: center; + bottom: -30px; + + .paginationDot--shelf { + background-color: $black; + } + + .paginationDot--isActive { + background-color: white; + border: 1px solid $black; + width: 17px !important; + height: 17px !important; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index fc70e62..4fd81eb 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -28,6 +28,7 @@ } .thumbImg { + border-radius: 8px; height: 90px; max-width: 90px; } @@ -434,6 +435,7 @@ .newsletter { display: block; background: $black; + margin-top: 96px; :global(.vtex-store-components-3-x-form) { padding: 32px 0 13px;