diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 1287216..3112737 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -82,6 +82,116 @@ text-transform: uppercase; } +[class*="html--message-availability"] { + width: 60.090361%; +} + +[class*="html--message-availability"] :global(.vtex-store-components-3-x-form) { + margin-bottom: 16px; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin-bottom: 16px; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #868686; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-content) { + margin: 0; + display: grid; + gap: 8px; + row-gap: 15px; + grid-auto-columns: 1fr 1fr; + grid-template: + "name email" + "buttonSubmit buttonSubmit"; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-input) { + margin: 0; +} +[class*="html--message-availability"] :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + padding: 12px 14px; +} + +[class*="html--message-availability"] + :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + color: #989898; +} + +[class*="html--message-availability"] :global(.vtex-styleguide-9-x-input) { + padding: 0; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-inputName) { + grid-area: name; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: email; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-submit) { + grid-area: buttonSubmit; + width: 100%; + margin: 0; +} +[class*="html--message-availability"] :global(.vtex-button) { + width: 100%; + height: 49px; + border: none; + border-radius: 0; + background-color: #000; +} + +[class*="html--message-availability"] :global(.vtex-button__label) { + font-size: 0; +} +[class*="html--message-availability"] :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} + @media screen and (min-width: 2500px) { [class*="html--pdp-breadcrumb"] { margin: 0 360px; @@ -117,6 +227,9 @@ [class*="html--stack"] { width: 100%; } + [class*="html--info-availability"] { + width: 100%; + } [class*="html--right-col"] { width: 100%; @@ -129,6 +242,16 @@ [class*="html--buy-container"] :global(.vtex-button__label) { padding: 0; } + + [class*="html--message-availability"] { + width: 81.0381355932%; + } + + [class*="html--message-availability"] + :global(.vtex-store-components-3-x-content) { + max-width: none; + width: 100%; + } } @media screen and (max-width: 376px) { @@ -145,5 +268,7 @@ height: 70px; } - + [class*="html--message-availability"] { + width: 100%; + } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0aacf42..c1d698d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -110,7 +110,7 @@ "sku-selector", // "product-quantity", "html#buy-container", - "product-assembly-options", + // "product-assembly-options", "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", @@ -165,12 +165,11 @@ "children": [ "html#product-name", // "product-identifier.product", - - "sku-selector", - "flex-layout.row#availability" + "html#availability", + "sku-selector" ] }, - "flex-layout.row#availability": { + "html#availability": { "props": { "blockClass": "message-availability" },