diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..8fd4405 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,58 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } +/* +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 */ +.containerNormal { + max-width: 100% !important; + margin: 0 !important; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: 8px !important; + padding-bottom: 8px !important; } - -.brandName { - font-weight: 600; +.nameContainer .brandName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { + line-height: 25px; text-align: center; + color: #000000; } -.image { - border-radius: 0.25rem; +.imageStackContainer { + width: 434.4px !important; + height: 434.4px; } +@media (max-width: 1920px) { + .imageStackContainer { + width: 291.2px !important; + height: 291.2px; + } +} +@media (max-width: 500px) { + .imageStackContainer { + width: 124.8px !important; + height: 124.8px; + } +} + +.imageNormal { + width: 100%; + height: 100%; + max-height: 100% !important; +} + +.priceContainer { + padding-top: 0px !important; + padding-bottom: 0px !important; +} +.priceContainer .installmentContainer { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 1978ab5..00a5d35 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -12,6 +12,9 @@ margin-left: 40px; margin-right: 40px; } +.sliderTrackContainer--carousel .sliderTrack--carousel { + gap: 16px; +} .sliderTrackContainer--carousel .slide--carousel { padding: 0px; width: 434.4px !important; @@ -23,12 +26,6 @@ height: 448.4px; } } -@media (max-width: 1920px) { - .sliderTrackContainer--carousel .slide--carousel { - width: 314.4px !important; - height: 448.4px; - } -} @media (max-width: 500px) { .sliderTrackContainer--carousel .slide--carousel { width: 291.2px !important; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e59e125..0265c43 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -111,4 +111,9 @@ margin-bottom: 8px; padding-bottom: 8px; } +} + +.listPrice { + padding-top: 0 !important; + padding-bottom: 0 !important; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..5d65d07 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,44 @@ +.containerNormal { + max-width: 100% !important; + margin: 0 !important; +} +.nameContainer{ + padding-top: 8px !important; + padding-bottom: 8px !important; + .brandName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; + } + +} + +.imageStackContainer { + width: 434.4px !important; + height: 434.4px; + @media (max-width: 1920px) { + width: 291.2px !important; + height: 291.2px; + } + @media (max-width: 500px) { + width: 124.8px !important; + height: 124.8px; + } +} +.imageNormal { + width: 100%; + height: 100%; + max-height: 100% !important; +} + +.priceContainer{ + padding-top: 0px !important; + padding-bottom: 0px !important; + .installmentContainer{ + display: none; + } + } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 3deee82..bf2744f 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -3,25 +3,20 @@ 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; - } - + gap: 16px; + } + .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: 500px) { + width: 291.2px !important; + height: 402.2px; + } } .sliderArrows--carousel { .caretIcon--carousel { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 80987ac..8f024ff 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -93,3 +93,8 @@ } } } + +.listPrice{ + padding-top: 0 !important; + padding-bottom: 0 !important; +}