diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..5c04d42 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,97 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 */ +:global(.vtex-product-summary-2-x-containerNormal) { + max-width: unset !important; } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +:global(.vtex-product-summary-2-x-imageNormal) { + max-height: unset !important; } -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +:global(.vtex-product-summary-2-x-imageStackContainer) { + display: flex; } -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; +:global(.vtex-product-summary-2-x-nameContainer) { + background-color: white; + width: 100%; + padding: 0; + padding-top: 16px; + margin: 0 auto; +} +@media (max-width: 1024px) { + :global(.vtex-product-summary-2-x-nameContainer) { + margin-bottom: 8px; + margin-top: 16px; + max-width: 87.1794871795%; + } +} +@media (max-width: 1024px) and (min-width: 1023px) and (max-width: 1025px) { + :global(.vtex-product-summary-2-x-nameContainer) { + max-width: none; + } +} +:global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-brandName) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} +@media (max-width: 767px) { + :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-brandName) { + font-size: 14px; + line-height: 19px; } } -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +:global(.vtex-product-summary-2-x-priceContainer) { + padding: 0; + padding-top: 8px; } - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { +:global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer { + padding-top: 0 !important; + padding-bottom: 0 !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; text-align: center; + text-decoration-line: line-through; + color: #BABABA; } - -.image { - border-radius: 0.25rem; +@media (max-width: 767px) { + :global(.vtex-product-summary-2-x-priceContainer) .price_listPriceContainer { + font-size: 12px; + line-height: 16px; + } } +:global(.vtex-product-summary-2-x-priceContainer) .price_sellingPriceLabel, +:global(.vtex-product-summary-2-x-priceContainer) .price_installmentContainer { + display: none; +} +:global(.vtex-product-summary-2-x-priceContainer) .price_sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} +@media (max-width: 767px) { + :global(.vtex-product-summary-2-x-priceContainer) .price_sellingPrice { + font-size: 18px; + line-height: 25px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..cd13c69 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,29 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--m3-shipping-simulator-title .paragraph { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + margin-bottom: 8px; +} + +.paragraph--m3-shelf-related-title { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} +@media (max-width: 768px) { + .paragraph--m3-shelf-related-title { + 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..2603758 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,132 @@ -.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 */ +@media (min-width: 2000px) { + .sliderLayoutContainer--m3-carousel-products { + max-width: 1920px; + margin: 0 auto; + } } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderTrackContainer--m3-carousel-products { + max-width: 94.712%; + margin: 0 auto; +} +@media (max-width: 590px) { + .sliderTrackContainer--m3-carousel-products { + max-width: 78.9333333333%; + } } -.sliderTrackContainer { - max-width: 100%; +.slide--m3-carousel-products { + margin: 0 8px; +} +@media (min-width: 1920px) { + .slide--m3-carousel-products { + max-width: 434.4px !important; + } +} +@media (max-width: 1440px) { + .slide--m3-carousel-products { + max-width: 314.4px !important; + } +} +@media (max-width: 1024px) { + .slide--m3-carousel-products { + max-width: 291.2px !important; + } +} +@media (max-width: 375px) { + .slide--m3-carousel-products { + width: 124.8px !important; + } } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +:global(.vtex-product-summary-2-x-containerNormal) { + max-width: unset !important; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +:global(.vtex-product-summary-2-x-imageNormal) { + max-height: unset !important; + border-radius: 0; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +:global(.vtex-product-summary-2-x-imageStackContainer) { + display: flex; } + +.sliderLeftArrow--m3-carousel-products { + visibility: hidden; +} +.sliderLeftArrow--m3-carousel-products::after { + position: relative !important; + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg"); + width: 12px; + left: 16px; +} +@media (min-width: 2000px) { + .sliderLeftArrow--m3-carousel-products::after { + left: -8px !important; + } +} +@media (min-width: 1025px) { + .sliderLeftArrow--m3-carousel-products::after { + left: 0 !important; + } +} +@media (max-width: 1024px) { + .sliderLeftArrow--m3-carousel-products::after { + left: -8px !important; + bottom: 3px; + } +} + +.sliderRightArrow--m3-carousel-products { + visibility: hidden; +} +.sliderRightArrow--m3-carousel-products::before { + position: relative !important; + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-right.svg"); + width: 12px; + right: 16px !important; +} +@media (min-width: 2000px) { + .sliderRightArrow--m3-carousel-products::before { + left: 8px !important; + } +} +@media (min-width: 1025px) { + .sliderRightArrow--m3-carousel-products::before { + left: 0 !important; + } +} +@media (max-width: 1024px) { + .sliderRightArrow--m3-carousel-products::before { + left: 8px !important; + bottom: 3px; + } +} + +.paginationDotsContainer--m3-carousel-products { + display: flex; + align-items: center; + column-gap: 12px; + bottom: -16px; +} +.paginationDotsContainer--m3-carousel-products .paginationDot--m3-carousel-products { + background-color: #000; +} +.paginationDotsContainer--m3-carousel-products .paginationDot--isActive { + height: 1.063rem !important; + width: 1.0635rem !important; + background: transparent; + border: 1px solid; +} \ 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..fbf91a0 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,96 @@ +:global(.vtex-product-summary-2-x-containerNormal) { + max-width: unset !important; + + // @media (min-width:374px) and (max-width:376px) { + // max-width: 124.8px !important; + // } +} + +:global(.vtex-product-summary-2-x-imageNormal) { + max-height: unset !important; +} + +:global(.vtex-product-summary-2-x-imageStackContainer) { + display: flex; + +} + +:global(.vtex-product-summary-2-x-nameContainer) { + background-color: white; + width: 100%; + padding: 0; + padding-top: 16px; + margin: 0 auto; + + @media (max-width:1024px) { + margin-bottom: 8px; + margin-top: 16px; + max-width: 87.179487179487179487179487179487%; + + @media (min-width:1023px) and (max-width:1025px) { + max-width: none; + + } + } + + :global(.vtex-product-summary-2-x-brandName) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; + + @media (max-width:767px) { + font-size: 14px; + line-height: 19px; + + } + } +} + +:global(.vtex-product-summary-2-x-priceContainer) { + padding: 0; + padding-top: 8px; + + .price_listPriceContainer { + padding-top: 0 !important; + padding-bottom: 0 !important; + + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + + @media (max-width:767px) { + font-size: 12px; + line-height: 16px; + } + } + + .price_sellingPriceLabel, + .price_installmentContainer { + display: none; + } + + .price_sellingPrice { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; + + @media (max-width:767px) { + font-size: 18px; + line-height: 25px; + + } + } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..fb5da86 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,30 @@ +.container--m3-shipping-simulator-title { + .paragraph { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; + text-transform: uppercase; + margin-bottom: 8px; + } +} + +.paragraph--m3-shelf-related-title { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + text-align: center; + + color: #575757; + + @media (max-width:768px) { + font-size: 20px; + } + +} \ 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 new file mode 100644 index 0000000..71c1d31 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,126 @@ +.sliderLayoutContainer--m3-carousel-products { + @media (min-width:2000px) { + max-width: 1920px; + margin: 0 auto; + } +} + +.sliderTrackContainer--m3-carousel-products { + + max-width: 94.712%; + margin: 0 auto; + + @media (max-width:590px) { + max-width: 78.933333333333333333333333333333%; + } +} + +// card +.slide--m3-carousel-products { + margin: 0 8px; + + @media (min-width:1920px) { + max-width: 434.4px !important; + + } + + @media(max-width:1440px) { + max-width: 314.4px !important; + + } + + @media (max-width:1024px) { + max-width: 291.2px !important; + + } + + @media (max-width:375px) { + width: 124.8px !important; + + } + +} + +// IMAGENS +:global(.vtex-product-summary-2-x-containerNormal) { + max-width: unset !important; +} + +:global(.vtex-product-summary-2-x-imageNormal) { + max-height: unset !important; + border-radius: 0; +} + +:global(.vtex-product-summary-2-x-imageStackContainer) { + display: flex; +} + +// ARROW +.sliderLeftArrow--m3-carousel-products { + visibility: hidden; + + &::after { + position: relative !important; + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg"); + width: 12px; + left: 16px; + + @media (min-width:2000px) { + left: -8px !important; + } + + @media (min-width:1025px) { + left: 0 !important; + } + + @media (max-width:1024px) { + left: -8px !important; + bottom: 3px; + } + } +} + +.sliderRightArrow--m3-carousel-products { + visibility: hidden; + + &::before { + position: relative !important; + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-right.svg"); + width: 12px; + right: 16px !important; + + @media (min-width:2000px) { + left: 8px !important; + } + + @media (min-width:1025px) { + left: 0 !important; + } + + @media (max-width:1024px) { + left: 8px !important; + bottom: 3px; + } + } +} + +// DOTS +.paginationDotsContainer--m3-carousel-products { + display: flex; + align-items: center; + column-gap: 12px; + bottom: -16px; + + .paginationDot--m3-carousel-products { + background-color: #000; + } + + .paginationDot--isActive { + height: 1.063rem !important; + width: 1.0635rem !important; + background: transparent; + border: 1px solid; + } +} \ No newline at end of file