diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 28f9a94..bf63092 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -84,12 +84,16 @@ } } -.flexRowContent--description { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} @media only screen and (max-width: 1024px) { .flexRowContent--description { margin-bottom: 0px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } +} +@media only screen and (max-width: 425px) { + .flexRowContent--description { + margin-bottom: 0px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 9faee49..e424ba1 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -14,4 +14,21 @@ .slideChildrenContainer .sliderTrackContainer .sliderLeftArrow, .slideChildrenContainer .sliderTrackContainer .sliderRightArrow { margin-bottom: 40px; +} + +.imageContainer { + height: 314.4px; +} +.imageContainer .imageNormal { + height: 100%; + max-height: 100%; +} +@media only screen and (max-width: 425px) { + .imageContainer { + height: 124.8px; + } +} + +.containerNormal { + padding-bottom: 32px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 286e0e3..78a8ab6 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -9,6 +9,7 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); /* Grid breakpoints */ .paginationDotsContainer { + margin-top: 32px; display: flex; justify-items: center; align-items: center; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 9e9b8e2..1615958 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -91,9 +91,14 @@ margin-left: 10px; } .flexRowContent--description { - border-bottom: 1px solid rgba(0,0,0,0.1); + @include mq (md, max) { - margin-bottom: 0px;} + margin-bottom: 0px; + border-bottom: 1px solid rgba(0,0,0,0.1);} + @include mq (cstm, max) { + margin-bottom: 0px; + border-bottom: 1px solid rgba(0,0,0,0.1);} + } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 9e8d07d..e3dd309 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -7,8 +7,25 @@ margin-bottom: 40px; } } + + +} + +.imageContainer{ + height: 314.4px ; + .imageNormal{ + height: 100%; + max-height: 100%; + } + + @include mq (cstm, max) { + height: 124.8px; + + } +} + +.containerNormal { + padding-bottom: 32px; } - - diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 5b37b61..8d9ab0f 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,42 +1,44 @@ - -.paginationDotsContainer - -{ +.paginationDotsContainer { + margin-top: 32px; display: flex; justify-items: center; align-items: center; } - .paginationDot--carousel { + +.paginationDot--carousel { background-color: black; } -.paginationDot--carousel--isActive{ +.paginationDot--carousel--isActive { background-color: white; border: 1px solid black; width: 17px !important; height: 17px !important; } -.sliderLayoutContainer--carousel{ +.sliderLayoutContainer--carousel { margin-bottom: 64px; padding: 0 40px 0 40px; - .sliderLeftArrow--carousel{ + + .sliderLeftArrow--carousel { visibility: hidden; - &::before{ + + &::before { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-left-ueber.png"); } } - .sliderRightArrow--carousel{ + .sliderRightArrow--carousel { visibility: hidden; - &::after{ + + &::after { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/arroe-right-ueber.png"); - + } -} + } }