From 1b452ddcd8919b51d2175f2ea17d0afbc027fcac Mon Sep 17 00:00:00 2001 From: ueberjames Date: Wed, 8 Feb 2023 23:09:19 -0300 Subject: [PATCH] =?UTF-8?q?estiliza=C3=A7=C3=A3o=20do=20mobile=20imagem=20?= =?UTF-8?q?de=20indisponivel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.flex-layout.css | 10 +++ styles/css/vtex.rich-text.css | 5 +- styles/css/vtex.slider-layout.css | 9 ++- styles/css/vtex.store-components.css | 51 +++++++++++- styles/css/vtex.tab-layout.css | 9 ++- .../sass/pages/product/vtex.flex-layout.scss | 11 +++ styles/sass/pages/product/vtex.rich-text.scss | 8 +- .../pages/product/vtex.slider-layout.scss | 10 ++- .../pages/product/vtex.store-components.scss | 79 ++++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 12 ++- 11 files changed, 192 insertions(+), 14 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dda6086..bea3bec 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -285,7 +285,6 @@ "sku-selector", // "product-quantity", "html#quantity-button-buy", - "product-assembly-options", "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", @@ -335,6 +334,7 @@ "flex-layout.row#product-availability": { "props": { + "blockClass":"indisponivel", "colGap": 7, "marginTop": 4, "marginBottom": 7, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 1b2072e..7cb1c76 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -59,4 +59,14 @@ .flexRowContent--description .stretchChildrenWidth { width: 100% !important; } +} + +@media only screen and (max-width: 1024px) { + .flexRowContent--indisponivel { + padding: 0 40px 0 40px; + flex-direction: column; + } + .flexRowContent--indisponivel .stretchChildrenWidth { + width: 100% !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index ffff190..d5128b9 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -16,7 +16,8 @@ font-weight: 400; } @media only screen and (max-width: 1024px) { - .wrapper--help-message { - margin: 0; + .wrapper--help-message .paragraph--help-message { + margin: 16px 0 24px 0; + padding: 0 40px 0 40px; } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 0cf08d8..2d8c1bc 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -25,6 +25,13 @@ height: 17px !important; } -.sliderLayoutContainer { +.sliderLayoutContainer--carousel { margin-bottom: 64px; + padding: 0 40px 0 40px; +} +.sliderLayoutContainer--carousel .sliderLeftArrow--carousel { + margin-left: 12px; +} +.sliderLayoutContainer--carousel .sliderRightArrow--carousel { + margin-right: 12px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8dbc1eb..ca2bc08 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -256,6 +256,55 @@ margin-left: 58px; } +.subscriberContainer .title { + font-size: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-size: 14px; + color: #868686; + line-height: 19px; + font-family: "Open Sans", sans-serif; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-size: 14px; + color: #868686; + font-family: "Open Sans", sans-serif; +} +.subscriberContainer .form .content { + display: grid; + grid-template-areas: " nome email" " submit submit"; +} +.subscriberContainer .form .content .inputName { + grid-area: nome; +} +.subscriberContainer .form .content .inputEmail { + grid-area: email; +} +.subscriberContainer .form .content .submit { + grid-area: submit; + width: 100%; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + height: 49px; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label) { + background-color: #000000; + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button__label)::after { + text-transform: uppcase; + content: "avise-me"; + font-size: 18px; + color: #FFFFFF; + font-family: "Open Sans", sans-serif; +} + .productDescriptionTitle { font-size: 24px; line-height: 32px; @@ -283,6 +332,6 @@ } @media only screen and (max-width: 1024px) { .productDescriptionText::after { - padding-left: 0; + padding: 0px 21px 0px 0; } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 1d7dacf..61412b8 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -56,6 +56,12 @@ .container .contentContainer--DescricaoCont { padding-top: 32px; } +@media only screen and (max-width: 1024px) { + .container .contentContainer--DescricaoCont { + border-bottom: 1px solid #BFBFBF; + padding-bottom: 62px; + } +} .container--Descricao { padding-top: 16px; @@ -63,8 +69,7 @@ } @media only screen and (max-width: 1024px) { .container--Descricao { - color: #BFBFBF; - border-top: 1px solid; + border-top: 1px solid #BFBFBF; } } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 85b1b20..8c4acab 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -57,6 +57,17 @@ margin-left: 10px; } } +.flexRowContent--indisponivel{ + + @include mq (md, max) { + padding: 0 40px 0 40px; + flex-direction: column; + .stretchChildrenWidth{ + width: 100% !important; + + } +} +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 1a2ac06..b109c30 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -5,7 +5,11 @@ color: $color-gray8; font-weight: 400; @include mq (md, max) { - margin: 0; - + .paragraph--help-message + {margin: 16px 0 24px 0; + padding: 0 40px 0 40px; + + } + } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index d4df88d..a9094a3 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -18,7 +18,15 @@ height: 17px !important; } -.sliderLayoutContainer{ +.sliderLayoutContainer--carousel{ margin-bottom: 64px; + padding: 0 40px 0 40px; + .sliderLeftArrow--carousel{ + margin-left: 12px; + } + + .sliderRightArrow--carousel{ + margin-right: 12px;} + } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6bfc18d..cebeb50 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -376,6 +376,78 @@ padding-bottom: 15px; // cep-fim +//produto-indisponivel +.subscriberContainer { + + + .title { + font-size: 0; + + &::after { + content: "Produto indisponível"; + font-size: 14px; + color: $color-gray8; + line-height: 19px; + font-family: $font-open; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-size: 14px; + color: $color-gray8; + font-family: $font-open; + } + + } + + .form { + .content { + display: grid; + grid-template-areas: " nome email" + " submit submit"; + + .inputName { + grid-area: nome; + } + + .inputEmail { + grid-area: email; + } + + .submit { + grid-area: submit; + width: 100%; + + :global(.vtex-button) { + width: 100%; + height: 49px; + } + + :global(.vtex-button__label) { + background-color: $color-black2; + font-size: 0; + + &::after { + text-transform: uppcase; + content: "avise-me"; + font-size: 18px; + color: $color-white; + font-family: $font-open; + + } + } + + } + } + } +} + +//produto-indiponivel-fim + // tab-descrição .productDescriptionTitle { @@ -402,7 +474,12 @@ padding-bottom: 15px; padding-left: 32px; content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque."; @include mq (md, max) { - padding-left: 0;} + padding: 0px 21px 0px 0; + // border-bottom: 1px solid $color-gray7; + + + + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index a48dd7b..bdf3ce3 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -53,7 +53,13 @@ .container { .contentContainer--DescricaoCont { padding-top: 32px; - + + @include mq (md, max) { + + border-bottom: 1px solid $color-gray7; + padding-bottom: 62px; + } + } } @@ -62,8 +68,8 @@ margin: 0 40px 0 40px; @include mq (md, max) { - color: #BFBFBF; - border-top: 1px solid; + + border-top: 1px solid $color-gray7; } }