From 8eb6eb3abdc25fc51ea90b127d94016f2c77f6de Mon Sep 17 00:00:00 2001 From: devartes Date: Tue, 24 Jan 2023 16:33:02 -0300 Subject: [PATCH] style(swiper): corrigindo tamanhos --- styles/css/vtex.flex-layout.css | 120 ++++-------------- styles/css/vtex.store-components.css | 39 +++++- .../product/flex-layout/vtex.flex-layout.scss | 23 ++++ .../vtex.store-components.scss | 41 +++++- 4 files changed, 119 insertions(+), 104 deletions(-) create mode 100644 styles/sass/pages/product/flex-layout/vtex.flex-layout.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..731ba90 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,34 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.flexRowContent { + padding: 0; + margin: 0; + column-gap: 32px; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; +.stretchChildrenWidth { + padding: 0; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; } } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; +.flexCol--stack-layout-content { + width: 100% !important; +} + +@media (max-width: 1920px) and (min-width: 1024px) { + .flexRowContent--product-main-content { + display: grid; + grid-template-columns: 48.819% 48.819%; } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5e62b97..57c51f7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,17 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + width: 100%; + padding: 0; + margin: auto; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .container { + padding: 0 40px; + } +} + .carouselGaleryThumbs { margin-top: 16px; } @@ -25,8 +36,8 @@ } .carouselGaleryCursor { - margin: 0; - width: 100%; + margin: 0 !important; + width: auto; padding: 0; } @@ -34,9 +45,27 @@ display: none; } +@media (max-width: 1920px) and (min-width: 1024px) { + .productImagesGallerySwiperContainer { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} + .productImageTag--main { - width: 664px; object-fit: unset !important; - max-height: 664px !important; - height: 664px; +} +@media (max-width: 1920px) and (min-width: 1024px) { + .productImageTag--main { + max-height: 664px !important; + height: 664px !important; + } +} + +@media (max-width: 1920px) and (min-width: 1024px) { + .productVideo, + .videoContainer { + height: 664px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss new file mode 100644 index 0000000..7ffd755 --- /dev/null +++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss @@ -0,0 +1,23 @@ +.flexRowContent { + padding: 0; + margin: 0; + column-gap: 32px; +} + +.stretchChildrenWidth { + padding: 0; + @media (max-width: 1920px) and (min-width: 1024px) { + width: 100% !important; + } +} + +.flexCol--stack-layout-content { + width: 100% !important; +} + +.flexRowContent--product-main-content { + @media (max-width: 1920px) and (min-width: 1024px) { + display: grid; + grid-template-columns: 48.819% 48.819%; + } +} diff --git a/styles/sass/pages/product/store-components/vtex.store-components.scss b/styles/sass/pages/product/store-components/vtex.store-components.scss index 1e12132..fd083ec 100644 --- a/styles/sass/pages/product/store-components/vtex.store-components.scss +++ b/styles/sass/pages/product/store-components/vtex.store-components.scss @@ -1,5 +1,14 @@ //product-image +.container { + width: 100%; + padding: 0; + margin: auto; + @media (max-width: 1920px) and (min-width: 1024px) { + padding: 0 40px; + } +} + .carouselGaleryThumbs { margin-top: 16px; .productImagesThumb { @@ -17,9 +26,11 @@ } } } + + .carouselGaleryCursor { - margin: 0; - width: 100%; + margin: 0 !important; + width: auto; padding: 0; } @@ -27,9 +38,25 @@ display: none; } -.productImageTag--main { - width: 664px; - object-fit: unset !important; - max-height: 664px !important; - height: 664px; +.productImagesGallerySwiperContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + width: 100%; + margin-left: 0; + margin-right: 0; + } } +.productImageTag--main { + object-fit: unset !important; + @media (max-width: 1920px) and (min-width: 1024px) { + max-height: 664px !important; + height: 664px !important; + } +} + +.productVideo, +.videoContainer { + @media (max-width: 1920px) and (min-width: 1024px) { + height: 664px; + } +} +