diff --git a/react/components/Html/style.css b/react/components/Html/style.css index f3cbcbd..003005c 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -8,7 +8,7 @@ [class*='html'] > [class*='button'] { width: 100%; height: 49px; - /* margin-right: 40px; */ background: #000; border: #000; + border-radius: 0; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index faf0aee..2501f7c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,7 +11,7 @@ padding: 0 40px; } :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { - max-height: 664px !important; + max-height: none; } .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { @@ -19,4 +19,9 @@ } .flexColChild :global(.vtex-store-components-3-x-container) { padding: 0 32px; +} + +.flexRowContent { + margin-bottom: 0; + padding-bottom: 0; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index ce6049d..6484857 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -120,14 +120,17 @@ display: none; } .sliderLayoutContainer .paginationDotsContainer { + align-items: center; bottom: 113px; } .sliderLayoutContainer .paginationDotsContainer .paginationDot { width: 10px; height: 10px; background-color: #000; - border: 0.5px solid #000; } .sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5bbb00e..6b60e6b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -54,11 +55,6 @@ color: #929292; width: 774px; } -.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { - content: "Digite seu e-mail"; - font-size: 16px; - color: white; -} .newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { padding: 0; } @@ -74,8 +70,22 @@ line-height: 19px; } -.productImageTag { - width: auto !important; +.productImagesGallerySlide { + width: 100%; + height: 100%; +} +.productImagesGallerySlide .productImage { + width: 100%; + height: 100%; +} +.productImagesGallerySlide .productImage .productImageTag { + max-height: none !important; +} +@media (min-width: 1025px) { + .productImagesGallerySlide .productImage .productImageTag { + width: 100% !important; + height: fit-content; + } } .carouselGaleryThumbs :first-child { @@ -87,6 +97,7 @@ .carouselGaleryThumbs :first-child :first-child .productImagesThumb { width: 13.605%; height: fit-content !important; + max-height: 90px; margin: 0; } @@ -105,30 +116,103 @@ display: flex; flex-direction: column-reverse; } -.skuSelectorContainer .frameAround, -.skuSelectorContainer .skuSelectorInternalBox { +.skuSelectorContainer .frameAround { + width: 43px; + height: 43px; border-radius: 1.5rem; z-index: 3; padding: 0; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem { - height: 43px; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { - width: 40px; - height: 40px; - bottom: -0.25rem; - top: 0rem; - left: 0rem; - right: -0.25rem; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .valueWrapper { - padding: 10px 11px; - width: 40px; - height: 40px; -} -.skuSelectorContainer .frameAround { border-color: #000; + top: -3%; + left: -1px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS CORES"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .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; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .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); +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; } .shippingContainer { @@ -139,6 +223,7 @@ } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; + padding-bottom: 16px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { display: flex; @@ -165,8 +250,19 @@ border-radius: 0; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; padding: 8px 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; @@ -181,7 +277,7 @@ display: flex; width: 49px; height: 49px; - margin-bottom: 5px; + margin-top: 11px; background: #000; border: 1px solid #000; border-radius: 0; @@ -201,4 +297,140 @@ display: flex; align-items: center; color: #fff; +} + +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; +} +.shippingTable .shippingTableHead { + display: flex; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + content: "FRETE"; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + width: 108px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; +} + +.subscriberContainer .title { + font-size: 0; + margin-bottom: 0; + border: none; +} +.subscriberContainer .title::before { + 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; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .form .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; +} +.subscriberContainer .form .content .input { + margin: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; +} +.subscriberContainer .form .content .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { + padding: 12px; + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "avise-me"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 711d8df..2358719 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,7 +11,8 @@ margin-bottom: 32px; display: flex; flex-direction: row; - column-gap: 197.5px; + justify-content: space-around; + padding: 0 40px; } .listContainer::after { content: ""; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 34b6522..617257b 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,7 +2,8 @@ padding: 0 40px; :global(.vtex-store-components-3-x-productImageTag) { - max-height: 664px !important; + // max-height: 664px !important; + max-height: none; } } @@ -15,3 +16,8 @@ padding: 0 32px; } } + +.flexRowContent { + margin-bottom: 0; + padding-bottom: 0; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 5bae733..5bddf9f 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -130,17 +130,20 @@ } } .paginationDotsContainer { + align-items: center; bottom: 113px; .paginationDot { width: 10px; height: 10px; background-color: #000; - border: 0.5px solid #000; } .paginationDot--isActive { background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index d5f78e1..2d51094 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -44,11 +44,6 @@ line-height: 25px; color: #929292; width: 774px; - &::before { - content: 'Digite seu e-mail'; - font-size: 16px; - color: white; - } } } } @@ -71,8 +66,22 @@ } } -.productImageTag { - width: auto !important; +.productImagesGallerySlide { + width: 100%; + height: 100%; + + .productImage { + width: 100%; + height: 100%; + + .productImageTag { + @media (min-width: 1025px) { + width: 100% !important; + height: fit-content; + } + max-height: none !important; + } + } } .carouselGaleryThumbs { @@ -85,6 +94,7 @@ .productImagesThumb { width: 13.605%; height: fit-content !important; + max-height: 90px; margin: 0; } } @@ -108,36 +118,121 @@ display: flex; flex-direction: column-reverse; - .frameAround, - .skuSelectorInternalBox { + .frameAround { + width: 43px; + height: 43px; border-radius: 1.5rem; z-index: 3; padding: 0; + border-color: #000; + top: -3%; + left: -1px; + } + + .skuSelectorInternalBox { + border-radius: 50%; + } + + .skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorSelectorImageValue { + font-size: 0; + } + .skuSelectorName::before { + content: 'OUTRAS CORES'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } } .skuSelectorSubcontainer--tamanho { - .skuSelectorItem { - height: 43px; - } + margin-bottom: 10px; - .frameAround { - width: 40px; - height: 40px; + .skuSelectorNameContainer { + margin: 0; - bottom: -0.25rem; - top: 0rem; - left: 0rem; - right: -0.25rem; - } - .valueWrapper { - padding: 10px 11px; - width: 40px; - height: 40px; - } - } + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + &::after { + font-family: 'Open Sans', sans-serif; + 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; - .frameAround { - border-color: #000; + .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; + } + } + } + } + } } } @@ -149,6 +244,7 @@ :global(.vtex-address-form__postalCode) { display: flex; + padding-bottom: 16px; :global(.vtex-input) { display: flex; @@ -179,9 +275,20 @@ border-radius: 0; :global(.vtex-address-form-4-x-input) { + font-family: 'Open Sans', sans-serif; + 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) { @@ -201,7 +308,7 @@ display: flex; width: 49px; height: 49px; - margin-bottom: 5px; + margin-top: 11px; background: #000; border: 1px solid #000; @@ -229,3 +336,163 @@ } } } + +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; + + .shippingTableHead { + display: flex; + .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + + .shippingTableHeadDeliveryEstimate { + order: 2; + } + .shippingTableHeadDeliveryPrice { + font-size: 0; + } + .shippingTableHeadDeliveryPrice::before { + content: 'FRETE'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + + .shippingTableCell { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; + } + + .shippingTableCellDeliveryEstimate { + order: 2; + } + .shippingTableCellDeliveryPrice { + width: 108px; + } + .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; + + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } +} + +.subscriberContainer { + .title { + font-size: 0; + margin-bottom: 0; + border: none; + } + .title::before { + 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; + } + .subscribeLabel { + font-size: 0; + } + .subscribeLabel::before { + content: 'Deseja saber quando estiver disponível?'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .form { + .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; + + .input { + margin: 0; + + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + } + } + } + } + .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; + + :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; + + :global(.vtex-button__label) { + padding: 12px; + font-size: 0; + } + :global(.vtex-button__label)::before { + content: 'avise-me'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 966d427..558055b 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -2,7 +2,10 @@ margin-bottom: 32px; display: flex; flex-direction: row; - column-gap: 197.5px; + justify-content: space-around; + padding: 0 40px; + // column-gap: 197.5px; + &::after { content: ''; background-color: #bfbfbf;