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; + } + } + } +}