diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..e28ea8f --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,122 @@ +// .flexRow { +// width: auto; +// padding: 0 40px; +// } +:global(.vtex-breadcrumb-1-x-container) { + padding: 0 40px; + + :nth-child(n) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-breadcrumb-1-x-term) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} + +:global(.vtex-telemarketing-2-x-wrapper) { + :global(.vtex-store-components-3-x-container) { + margin: auto; + } +} + +:global(.vtex-store-components-3-x-container) { + padding-left: 0px; + padding-right: 0px; + @media (min-width: 2560px) { + max-width: 100%; + margin: 0 320px; + } + :global(.vtex-flex-layout-0-x-flexRowContent) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding-right: 0 !important; + overflow: hidden; + } + } + + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 40px; + gap: 32px; + margin-top: 16px; + margin-bottom: 16px; + + @media (max-width: 1024px) { + flex-direction: column; + } + :global(.vtex-flex-layout-0-x-flexRow) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: block; + padding: 0; + margin-top: 0; + margin-bottom: 0; + } + } + } +} + +.addButton { + width: 100%; +} + +.flexRow--buyButton { + width: 100%; + .flexRowContent--buyButton { + margin: 0; + :global(.vtex-button) { + background-color: black; + height: 49px; + border: none; + border-radius: unset; + } + :global(.vtex-add-to-cart-button-0-x-buttonText) { + font-size: 0; + &::after { + content: "ADICIONAR À SACOLA"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: #ffffff; + } + } + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .flexColChild { + width: 100%; + } +} + +@media screen and (max-width: 376px) { + :global(.vtex-add-to-cart-button-0-x-buttonText) { + max-width: 168px; + } + + .flexRow--buyButton { + .flexRowContent--buyButton { + :global(.vtex-button) { + height: 74px !important; + } + } + } +} 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..3495eca --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,262 @@ +.sliderLayoutContainer { + padding: 16px 40px 113px; + margin-bottom: -49px; + + .sliderTrackContainer { + padding: 0 24px 36px; + + .sliderTrack { + gap: 16px; + + .slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-container) { + margin: 0; + width: 100%; + @media (min-width: 2560px) { + align-items: center; + max-width: 434.4px !important; + min-height: 543.4px !important; + } + + :global(.vtex-product-summary-2-x-element) { + :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + width: 100%; + + :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; + background-color: #ededed; + + @media (min-width: 2560px) { + min-width: 434.4px; + min-height: 434.4px; + } + } + } + :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + padding: 0; + justify-content: center; + + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: auto; + align-items: center; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; + + :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; + + :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; + } + :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; + } + } + :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + } + + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + :nth-child(n) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } + } + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + } + + :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; + } + } + + :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-description) { + display: none; + } + :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; + } + } + } + } + } + } + } + .paginationDotsContainer { + bottom: 113px; + align-items: center; + + .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + border: 0.5px solid #000; + } + + .paginationDot--isActive { + background-color: #fff; + height: 17px !important; + width: 17px !important; + } + } +} + +.slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-clearLink) { + :global(.vtex-product-summary-2-x-container) { + :global(.vtex-product-summary-2-x-element) { + .html--prateleira-flexcol { + display: flex; + } + } + } + } + } +} + +@media screen and (max-width: 1024px) { + :global(.vtex-product-summary-2-x-productBrand) { + font-size: 14px !important; + line-height: 19px !important; + height: auto !important; + } + :global(.vtex-product-summary-2-x-imageContainer) { + margin-bottom: 4px; + } + .sliderTrackContainer { + padding: 0 24px 24px !important; + } + .sliderTrack { + gap: 12px !important; + } + .sliderLayoutContainer { + margin-bottom: -49px; + } +} + +@media screen and (max-width: 376px) { + .sliderLayoutContainer { + margin-bottom: -81px; + } + .sliderTrack { + gap: 8px !important; + } + :global(.vtex-product-summary-2-x-imageContainer) { + :global(.vtex-product-summary-2-x-imageNormal) { + height: 124.8px !important; + } + } + .sliderTrackContainer { + padding-bottom: 16px !important; + } +} + +:global(.vtex-product-price-1-x-interestRate) { + &::after { + content: "sem juros"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } +} + +:global(.vtex-product-price-1-x-installments) { + font-size: 0; +} + +:global(.vtex-product-price-1-x-installmentValue) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + &::before { + content: " de "; + } + &::after { + content: " "; + } +} + +:global(.vtex-product-price-1-x-installmentsNumber) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + &::after { + content: " x "; + } +}