diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss new file mode 100644 index 0000000..95d4854 --- /dev/null +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -0,0 +1,718 @@ +.newsletter { + background: black; + + .container { + .form { + .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 8px; + + &::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; + } + + &::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + + @media screen and (max-width: 350px) { + white-space: unset; + } + } + } + + .inputGroup { + display: flex; + justify-content: center; + + :global(.vtex-input) { + width: 686px; + + @media (max-width: 1024px) { + width: 100%; + } + + :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + font-size: 18px; + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 25px; + color: #929292; + width: 774px; + } + } + } + + :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; + + :global(.vtex-button) { + width: 88px; + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + } + } + } + } +} + +.productBrand { + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + margin-bottom: 8px; + float: right; + color: #575757; +} + +.productImageTag { + object-fit: unset !important; + max-height: 100% !important; + width: 100%; +} + +:global(.vtex-store-components-3-x-productImageTag--zoom) { + display: none; +} + +:global(.vtex-stack-layout-0-x-stackItem) { + min-height: unset; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + + .skuSelectorNameContainer { + margin: 0; + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; + } + } + } + + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; + + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + + // border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } +} + +.skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + margin: 0; + + .skuSelectorTextContainer { + + .skuSelectorName, + .skuSelectorNameSeparator, + .skuSelectorSelectorImageValue { + font-size: 0; + } + + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTRAS CORES:"; + + color: #929292; + } + } + + .skuSelectorOptionsList { + margin: 0; + + .skuSelectorItem--sku-selector { + .frameAround--sku-selector { + border: 2px solid #000000; + border-radius: 24px; + z-index: 5; + } + + .skuSelectorInternalBox { + border-radius: 24px; + } + } + } + } +} + +.shippingContainer { + position: relative; +} + +:global(.vtex-tab-layout-0-x-contentContainer) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 32px; + gap: 32px; + + .productImagesContainer { + width: 50%; + } + + .productDescriptionContainer { + width: 50%; + + .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + + @media (min-width: 2560px) { + font-size: 32px; + } + } + + .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + @media (min-width: 2560px) { + font-size: 18px; + line-height: 25px; + } + + color: #929292; + + :first-child { + @media (min-width: 2560px) { + margin: 0; + } + } + } + } +} + +// .swiper-container-initialized { +// .swiper-wrapper { +.carouselGaleryThumbs { + margin-top: 16px; + + @media screen and (max-width: 639px) { + display: block; + } + + :first-child { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; + + :first-child { + .productImagesThumb { + height: 90px !important; + width: 90px !important; + margin-bottom: 0; + + .figure { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; + + .thumbImg { + height: 90px; + width: 90px; + border-radius: 8px; + } + } + } + } + } +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + padding-bottom: 0; + + @media (max-width: 376px) { + width: calc(100% - 47px); + flex-direction: column; + } + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + @media (max-width: 376px) { + width: 100%; + } + + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + + :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + } + + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + + @media (max-width: 376px) { + margin-right: -49px; + justify-content: right; + position: static; + } + + :last-child { + color: #000; + line-height: normal; + + :last-child { + display: none; + } + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + align-self: end; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; + + @media (max-width: 376px) { + align-self: center; + bottom: -4px; + } + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +} + +.shippingTable { + border: 0; + width: auto; + + .shippingTableHead { + display: block; + + .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; + } + + .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; + } + + .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; + } + + .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; + + &::after { + content: "Valor"; + font-size: 14px; + } + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: grid; + grid-template-columns: 103px 56px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; + + :nth-child(n) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + } + + .shippingTableCell { + padding: 0; + } + + .shippingTableRadioBtn { + display: none; + } + + .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; + } + + .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; + } + + .shippingTableCellDeliveryPrice { + grid-area: B; + } + } + } +} + +@media screen and (max-width:1024px) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + } + + .productBrand { + float: left; + } + + .productDescriptionTitle { + font-size: 20px !important; + line-height: 32px !important; + } + + .productDescriptionText { + font-size: 14px !important; + line-height: 19px !important; + } + + .container { + .form { + margin: 0 16px; + max-width: 992px; + padding: 0; + + .label { + width: 100%; + + &::after { + font-size: 16px !important; + line-height: 22px !important; + } + } + + .inputGroup { + width: 100%; + + :global(.vtex-styleguide-9-x-input) { + font-size: 12px !important; + line-height: 16px !important; + width: 100% !important; + } + } + } + + } +} + +:global(.vtex-store-components-3-x-subscriberContainer) { + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-family: "Open Sans", "sans-serif"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } + } + + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin: 0; + + &::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } + } + + :global(.vtex-store-components-3-x-form) { + margin: 0; + + :global(.vtex-store-components-3-x-content) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-column-gap: 8px; + grid-row-gap: 3px; + + @media (min-width: 2560px) { + min-width: 765px; + } + + :global(.vtex-store-components-3-x-inputName) { + grid-area: 1 / 1/ 2 / 2; + margin: 0 !important; + + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #989898; + } + } + } + } + + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: 1 / 2 / 2 / 3; + margin: 0 !important; + + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + :global(.vtex-styleguide-9-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #989898; + } + } + } + } + + :global(.vtex-store-components-3-x-submit) { + grid-area: 2 / 1 / 3 / 3; + + :global(.vtex-button) { + font-size: 0; + width: 100%; + } + + :global(.vtex-button)::before { + content: "AVISE-ME"; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + height: 49px; + background: black; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: white; + } + } + } + } +}