From 082fa300d55663613fdcfd1cc841c2b8c6059756 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Wed, 1 Feb 2023 19:34:40 -0300 Subject: [PATCH] =?UTF-8?q?feat(product):=20realizando=20estiliza=C3=A7?= =?UTF-8?q?=C3=A3o=20do=20produto=20indisponivel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 119 +++++++++++++++ styles/css/vtex.product-identifier.css | 2 +- styles/css/vtex.store-components.css | 3 + .../vtexComponents/vtex.store-components.scss | 4 + .../vtexFlexLayout/vtex.flex-layout.scss | 141 ++++++++++++++++++ .../vtexProduct/vtex.product-identifier.scss | 2 +- styles/sass/utils/_vars.scss | 1 + 7 files changed, 270 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index cc3b9d2..f5abd23 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -195,4 +195,123 @@ .flexRow--cep .flexRowContent--cep .stretchChildrenWidth { padding: 0; margin: 0; +} + +.flexColChild--info-availability .flexRow--message-availability { + width: 57.74%; +} +@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { + .flexColChild--info-availability .flexRow--message-availability { + width: 100%; + } +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) { + margin: 0; + padding: 0; + font-size: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::after { + 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; + color: #868686; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) { + margin: 16px 0 0 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) { + width: 100%; + margin: 0; + display: grid; + grid-template-areas: "A B" "C C"; + max-width: unset !important; + grid-template-columns: 49% 49%; + column-gap: 8px; + row-gap: 16px; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-input__error) { + position: absolute; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input) { + height: 40px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 0 0 14px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #292929; + border: 1px solid #989898; + border-radius: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input)::placeholder { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) { + width: 100%; + height: 49px; + display: flex; + justify-content: center; + align-items: center; + background: #000; + cursor: pointer; + font-size: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; +} +.flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-button) :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index f150433..7231ec2 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -12,7 +12,7 @@ display: flex; align-items: center; justify-content: end; - margin-bottom: 24px; + margin-bottom: 16px; } @media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) { .product-identifier--productReference { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f7c9542..d368302 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -277,6 +277,9 @@ .shippingContainer :global(.vtex-address-form__postalCode) { padding: 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) { + position: absolute; +} .shippingContainer :global(.vtex-input-prefix__group) { width: 250px; height: 49px; diff --git a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss index 0fc4147..bb8edd0 100644 --- a/styles/sass/pages/product/vtexComponents/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexComponents/vtex.store-components.scss @@ -300,6 +300,10 @@ :global(.vtex-address-form__postalCode){ padding: 0; + + :global(.vtex-input__error){ + position: absolute; + } } :global(.vtex-input-prefix__group) { diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss index 780e702..fcf7b42 100644 --- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -197,3 +197,144 @@ } } } + +.flexColChild--info-availability { + .flexRow--message-availability { + width: 57.74%; + + @media #{$mq-tablet}, #{$mq-mobile}{ + width: 100%; + } + + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + padding: 0; + + &::after { + content: "Produto indisponível"; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + + } + } + + :global(.vtex-store-components-3-x-subscribeLabel) { + margin: 0; + padding: 0; + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray9; + } + } + + :global(.vtex-store-components-3-x-form) { + margin: 16px 0 0 0; + + :global(.vtex-store-components-3-x-content) { + width: 100%; + margin: 0; + display: grid; + grid-template-areas: "A B" + "C C"; + max-width: unset !important; + grid-template-columns: 49% 49%; + column-gap: 8px; + row-gap: 16px; + + } + + :global(.vtex-input__error){ + position: absolute; + margin: 0; + padding: 0; + } + + :global(.vtex-input-prefix__group) { + border-radius: 0; + border: none; + } + + :global(.vtex-store-components-3-x-inputName) { + grid-area: A; + margin: 0; + padding: 0; + } + + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: B; + margin: 0; + padding: 0; + } + + :global(.vtex-styleguide-9-x-input) { + height: 40px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 0 0 14px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-black; + border: 1px solid #989898; + border-radius: 0; + + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + } + } + + :global(.vtex-store-components-3-x-submit) { + grid-area: C; + margin: 0; + padding: 0; + } + + :global(.vtex-button) { + width: 100%; + height: 49px; + display: flex; + justify-content: center; + align-items: center; + background: $color-black0; + cursor: pointer; + font-size: 0; + + :global(.vtex-button__label) { + padding: 0; + + &::after{ + content: "AVISE-ME"; + font-family: $font-family; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: $color-white; + } + } + } + + } + + } +} diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss index fea1e30..324ff1f 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-identifier.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; justify-content: end; - margin-bottom: 24px; + margin-bottom: 16px; @media #{$mq-tablet}, #{$mq-mobile} { justify-content: flex-start; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index c3963f0..216d42f 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -16,6 +16,7 @@ $color-gray5: #e5e5e5; $color-gray6: #929292; $color-gray7: #575757; $color-gray8: rgba(185, 185, 185, 0.6); +$color-gray9: #868686; $color-blue: #4267b2;