diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 058a122..b116723 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -126,7 +126,7 @@ "product-gifts", // "flex-layout.row#buy-button", "html#buy-button", - "availability-subscriber", + // "availability-subscriber", "shipping-simulator", "share#default" ] @@ -206,8 +206,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index d87bf9e..d3a0261 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -111,5 +111,5 @@ font-weight: 700; font-size: 25px; line-height: 38px; - color: #292929; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 744ef10..3168fc3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -351,4 +351,101 @@ .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { background: transparent; padding: 0; +} + +.subscriberContainer { + margin-top: 43px; +} +.subscriberContainer .title { + font-size: 0; + margin: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +.form { + width: 100%; + margin: 0; +} +.form .content { + display: grid; + grid-template-areas: "nm em" "sub sub"; + justify-content: inherit; + gap: 8px; + width: 100%; + max-width: 399px; +} +.form .content .inputName { + grid-area: nm; + width: 100%; + margin: 0; +} +.form .content .inputName :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; +} +.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #989898; +} +.form .content .inputEmail { + grid-area: em; + width: 100%; + margin: 0; +} +.form .content .inputEmail :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; +} +.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #989898; +} +.form .content .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; +} +.form .content .submit :global(.vtex-button) { + height: 49px; + background: #000000; + border: none; + border-radius: 0; +} +.form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + 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.tab-layout.css b/styles/css/vtex.tab-layout.css index 58dbc7d..d8dbad8 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -50,8 +50,8 @@ font-weight: 400; font-size: 18px; line-height: 38px; - color: #292929; - border-bottom: 2px solid #292929; + color: #000000; + border-bottom: 2px solid #000000; border-radius: 0; text-transform: capitalize; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4042018..adf25ab 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -352,3 +352,117 @@ background: transparent; padding: 0; } + +.subscriberContainer { + margin-top: 43px; + + .title { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } +} + +.form { + width: 100%; + margin: 0; + + .content { + display: grid; + grid-template-areas: + "nm em" + "sub sub"; + justify-content: inherit; + gap: 8px; + width: 100%; + max-width: 399px; + + .inputName { + grid-area: nm; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: $color-gray13; + } + } + + .inputEmail { + grid-area: em; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: $color-gray13; + } + } + + .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; + + & :global(.vtex-button) { + height: 49px; + background: $color-black; + border: none; + border-radius: 0; + } + + & :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: $color-white; + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index f867a81..b38d9da 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -15,6 +15,8 @@ $color-gray8: #575757; $color-gray9: #afafaf; $color-gray10: #bfbfbf; $color-gray11: #ffffff; +$color-gray12: #868686; +$color-gray13: #989898; $color-blue: #4267b2;