From 360b10b6b529ba57e794297e1f974c136bf21610 Mon Sep 17 00:00:00 2001 From: Adilson Fernando Date: Mon, 30 Jan 2023 14:47:13 -0300 Subject: [PATCH] hotfix: revendo parte04 todo css, deixando mais responsivo e proximo ao figma possivel --- react/components/Html/styles.css | 4 +- styles/css/vtex.flex-layout.css | 5 ++ styles/css/vtex.store-components.css | 79 +++++++++++++++-- styles/css/vtex.tab-layout.css | 17 ++++ .../sass/pages/product/vtex.flex-layout.scss | 3 + .../pages/product/vtex.store-components.scss | 88 +++++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 11 +++ 7 files changed, 190 insertions(+), 17 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index e446a4d..03dbac8 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -20,7 +20,7 @@ } } -[class*=""] { +/* [class*=""] { -} +} */ diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 1466295..8a3394b 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -32,6 +32,11 @@ .flexRowContent--divProductIndisponivel { gap: 32px; } +@media (max-width: 1024px) { + .flexRowContent--divProductIndisponivel { + flex-direction: column; + } +} .flexColChild--info-availability .flexRow--divNomeProduct { text-align: end; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index beab778..6177a57 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -71,6 +71,48 @@ padding-bottom: 16px !important; border: 0; } +.newsletter--newsletter .container--newsletter .form--newsletter { + min-width: 744px; +} +@media (max-width: 1024px) { + .newsletter--newsletter .container--newsletter .form--newsletter { + margin: 0; + width: 100%; + max-width: 100%; + padding: 0; + min-width: 265px; + } +} +@media (max-width: 1024px) { + .newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter { + display: flex; + width: inherit; + justify-content: start; + align-items: baseline; + } +} +.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + display: flex; + flex-direction: column; + min-width: 313px; +} +.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + text-align: center; + color: #929292; +} .buttonContainer--newsletter { padding-left: 0 !important; @@ -147,6 +189,17 @@ content: "OUTROS CORES:"; font-size: 14px; } +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku--selected .frameAround--divSku { + border: 3px solid black !important; + width: 52px !important; + height: 52px !important; + top: -2px !important; + left: -2px !important; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku--selected .diagonalCross--divSku { + color: black !important; + border: 1px solid black !important; +} .skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku { width: 48px; height: 48px; @@ -195,15 +248,25 @@ content: "OUTROS TAMANHOS:"; font-size: 14px; } +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku--selected .frameAround--divSku { + border: 3px solid black !important; +} +.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku--selected .diagonalCross--divSku { + height: 40px; + width: 40px; + border-radius: 50%; + color: black !important; + border: 1px solid black !important; + transform: rotate(-90deg); +} .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku { width: 40px; height: 40px; + border-radius: 50%; } .skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku { - border: 1px solid #989898; border-radius: 50%; - width: 40px; - height: 40px; + border: 0.5px solid #989898; top: 0; bottom: 0; right: 0; @@ -230,6 +293,8 @@ height: 40px; width: 40px; border-radius: 50%; + color: #d5d5d5; + border: 1px solid #d5d5d5; transform: rotate(-90deg); } .skuSelectorContainer--divSku .diagonalCross--divSku { @@ -438,24 +503,24 @@ } .subscriberContainer .form .content { display: grid; - grid-template-areas: "1" "2"; + grid-template-areas: "name email" "submit submit"; justify-content: inherit; gap: 10px; width: 100%; max-width: 100%; } .subscriberContainer .form .content .inputName { - grid-area: 1; + grid-area: name; margin-right: 0; margin-bottom: 0; } .subscriberContainer .form .content .inputEmail { - grid-area: 1; + grid-area: email; margin-right: 0; margin-bottom: 0; } .subscriberContainer .form .content .submit { - grid-area: 2; + grid-area: submit; } .subscriberContainer .form .content .submit :global(.vtex-button) { width: 100%; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index acff555..6153fbb 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -29,6 +29,11 @@ margin: 0; padding: 0; } +@media (max-width: 1024px) { + .container--estrutura .listContainer--Guias .listItem--renderGuia { + width: inherit; + } +} .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; @@ -38,6 +43,18 @@ color: #bfbfbf; text-transform: capitalize; } +@media (min-width: 2500px) { + .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) { + font-size: 24px !important; + } +} +@media (max-width: 1024px) { + .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button) { + width: inherit; + display: flex; + justify-content: start; + } +} @media (max-width: 1024px) { .container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) { padding-left: 0; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index c3eecc9..cf04caa 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -18,6 +18,9 @@ } .flexRowContent--divProductIndisponivel { gap: 32px; + @media (max-width: 1024px) { + flex-direction: column; + } } .flexColChild--info-availability { .flexRow--divNomeProduct { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4d6ad1f..5b4a104 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -54,6 +54,46 @@ padding-top: 32px !important; padding-bottom: 16px !important; border: 0; + .form--newsletter { + min-width: 744px; + @media (max-width: 1024px) { + margin: 0; + width: 100%; + max-width: 100%; + padding: 0; + min-width: 265px; + } + .inputGroup--newsletter { + @media (max-width: 1024px) { + display: flex; + width: inherit; + justify-content: start; + align-items: baseline; + } + } + .label--newsletter { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + display: flex; + flex-direction: column; + min-width: 313px; + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + text-align: center; + color: #929292; + } + } + } } } .buttonContainer--newsletter { @@ -105,6 +145,9 @@ padding-top: 0 !important; padding-bottom: 0 !important; } +// vtex-store-components-3-x-skuSelectorItem vtex-store-components-3-x-skuSelectorItem--divSku vtex-store-components-3-x-skuSelectorItem--34 vtex-store-components-3-x-skuSelectorItem--divSku--34 vtex-store-components-3-x-skuSelectorItem--selected vtex-store-components-3-x-skuSelectorItem--divSku--selected relative di pointer flex items-center outline-0 ma2 + +// vtex-store-components-3-x-skuSelectorItem vtex-store-components-3-x-skuSelectorItem--divSku vtex-store-components-3-x-skuSelectorItem--34 vtex-store-components-3-x-skuSelectorItem--divSku--34 relative di pointer flex items-center outline-0 ma2 .skuSelectorContainer--divSku { display: flex; @@ -124,6 +167,19 @@ font-size: 14px; } } + .skuSelectorItem--divSku--selected { + .frameAround--divSku { + border: 3px solid black !important; + width: 52px !important; + height: 52px !important; + top: -2px !important; + left: -2px !important; + } + .diagonalCross--divSku { + color: $color-black !important; + border: 1px solid $color-black !important; + } + } .skuSelectorItem--divSku { width: 48px; height: 48px; @@ -172,19 +228,32 @@ font-size: 14px; } } + .skuSelectorItem--divSku--selected { + .frameAround--divSku { + border: 3px solid black !important; + } + .diagonalCross--divSku { + height: 40px; + width: 40px; + border-radius: 50%; + color: $color-black !important; + border: 1px solid $color-black !important; + transform: rotate(-90deg); + } + } .skuSelectorItem--divSku { width: 40px; height: 40px; + border-radius: 50%; .frameAround--divSku { - border: 1px solid #989898; border-radius: 50%; - width: 40px; - height: 40px; + border: 0.5px solid #989898; top: 0; bottom: 0; right: 0; left: 0; } + .skuSelectorInternalBox--divSku { border-radius: 50%; width: 40px; @@ -206,6 +275,8 @@ height: 40px; width: 40px; border-radius: 50%; + color: #d5d5d5; + border: 1px solid #d5d5d5; transform: rotate(-90deg); } } @@ -217,6 +288,7 @@ transform: rotate(-90deg); } } + .shippingContainer { display: flex; position: relative; @@ -419,24 +491,24 @@ .content { display: grid; grid-template-areas: - "1" - "2"; + "name email" + "submit submit"; justify-content: inherit; gap: 10px; width: 100%; max-width: 100%; .inputName { - grid-area: 1; + grid-area: name; margin-right: 0; margin-bottom: 0; } .inputEmail { - grid-area: 1; + grid-area: email; margin-right: 0; margin-bottom: 0; } .submit { - grid-area: 2; + grid-area: submit; :global(.vtex-button) { width: 100%; height: 49px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index edb84d2..000d4bd 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -17,6 +17,9 @@ .listItem--renderGuia { margin: 0; padding: 0; + @media (max-width: 1024px) { + width: inherit; + } :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; @@ -25,6 +28,14 @@ line-height: 38px; color: #bfbfbf; text-transform: capitalize; + @media (min-width: 2500px) { + font-size: 24px !important; + } + @media (max-width: 1024px) { + width: inherit; + display: flex; + justify-content: start; + } } :global(.vtex-button__label) { @media (max-width: 1024px) {