From 516545c356fd906d8fad17c94403433e6912313b Mon Sep 17 00:00:00 2001 From: Emerson Fully <63175980+emersonfully@users.noreply.github.com> Date: Thu, 9 Feb 2023 12:32:27 -0300 Subject: [PATCH] =?UTF-8?q?troca=20dos=20valores=20padr=C3=B5es=20css=20po?= =?UTF-8?q?r=20variaveis=20scss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/style.css | 18 ++- styles/css/agenciamagma.store-theme.css | 1 + styles/css/vtex.flex-layout.css | 4 +- styles/css/vtex.product-identifier.css | 13 +- styles/css/vtex.product-price.css | 7 +- styles/css/vtex.product-quantity.css | 1 + styles/css/vtex.product-summary.css | 1 + styles/css/vtex.rich-text.css | 1 + styles/css/vtex.shelf.css | 1 + styles/css/vtex.slider-layout.css | 1 + styles/css/vtex.store-components.css | 106 ++++++++++++--- styles/css/vtex.tab-layout.css | 2 + .../sass/pages/product/vtex.flex-layout.scss | 3 +- .../product/vtex.product-identifier.scss | 12 +- .../pages/product/vtex.product-price.scss | 8 +- .../pages/product/vtex.store-components.scss | 123 ++++++++++++++---- .../sass/pages/product/vtex.tab-layout.scss | 1 + styles/sass/utils/_vars.scss | 36 +++-- 18 files changed, 270 insertions(+), 69 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 9a744dd..3555dae 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -44,12 +44,22 @@ display: flex; flex-direction: column; margin-left: 20px; - color: gray; - font-weight: bold; + + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); } [class*="pix_discount-container"] { - font-weight: normal; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; } /*Cep-link*/ @@ -74,12 +84,12 @@ } [class*="vtex-tab-layout-0-x-listItem"] button { - color: #BFBFBF; text-transform: capitalize; font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-size: 18px; + color: #BFBFBF; } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..8895b65 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .html { background-color: red; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index bf4a718..7723cc4 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ @media screen and (max-width: 1024px) { .flexRowContent { @@ -29,7 +30,7 @@ width: 100%; max-width: 400px; position: absolute; - top: 358px; + top: 366px; left: 158px; } .flexRow--btn-product :global(.vtex-button) { @@ -37,6 +38,7 @@ border: 1px solid black; border-radius: 0; font-family: "Open Sans"; + padding: 12px; } .flexRow--btn-product :global(.vtex-button):hover { background-color: rgb(36, 36, 36); diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 8084274..6b75deb 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -6,11 +6,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .product-identifier--productReference { display: flex; justify-content: right; - color: gray; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} +@media screen and (max-width: 1024px) { + .product-identifier--productReference { + justify-content: left; + } } .product-identifier__label, diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index b4e962e..07fa1bb 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .listPrice { display: none; @@ -16,7 +17,8 @@ } .sellingPrice { - color: #3f3f40; + font-family: "Open Sans"; + color: #000000; font-size: 1.25rem; margin-bottom: -12px; } @@ -86,6 +88,7 @@ } .installmentsNumber { + font-family: "Open Sans"; font-weight: bold; font-size: 16px; margin-right: 6px; @@ -97,6 +100,7 @@ } .installmentValue { + font-family: "Open Sans"; font-size: 16px; font-weight: bold; margin-right: 6px; @@ -109,6 +113,7 @@ } .interestRate::after { + font-family: "Open Sans"; content: "sem juros"; font-size: 16px; font-weight: normal; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 5476938..345c24e 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .quantitySelectorTitle { display: none; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index daaf9b2..713454e 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .buyButton { display: none; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..53a4cc6 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css index 95e48f5..7dab7cd 100644 --- a/styles/css/vtex.shelf.css +++ b/styles/css/vtex.shelf.css @@ -7,6 +7,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .title { font-size: 0px; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 4a6ae45..0bfefc3 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .sliderLayoutContainer--carousel { background-color: white; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index bbf7bf1..1ec85b4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ /*Product name*/ .productNameContainer--quickview { @@ -18,6 +19,11 @@ text-align: right; color: #575757; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: left; + } +} /* carouselThumbs*/ .carouselGaleryThumbs { @@ -38,7 +44,7 @@ } .skuSelectorContainer .frameAround { border-radius: 50%; - border-color: black; + border-color: #000000; z-index: 2; margin: 2px; } @@ -75,8 +81,12 @@ } .skuSelectorSubcontainer--tamanho .skuSelectorName::after { content: "OUTROS TAMANHOS:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; font-size: 14px; - color: gray; + line-height: 19px; + color: #929292; } .skuSelectorSubcontainer--cor .skuSelectorName { @@ -84,8 +94,12 @@ } .skuSelectorSubcontainer--cor .skuSelectorName::after { content: "OUTRAS CORES:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; font-size: 14px; - color: gray; + line-height: 19px; + color: #929292; } /*not-Avaliable*/ @@ -99,14 +113,24 @@ } .subscriberContainer .title::after { content: "Produto indisponível"; - font-size: 16px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; } .subscriberContainer .subscribeLabel { font-size: 0px; } .subscriberContainer .subscribeLabel::after { content: "Deseja saber quando estiver disponível?"; - font-size: 16px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; } .subscriberContainer .inputName :global(.vtex-input-prefix__group), .subscriberContainer .inputEmail :global(.vtex-input-prefix__group) { @@ -119,15 +143,21 @@ bottom: 0; } .subscriberContainer .submit :global(.vtex-button) { - background-color: black; - color: white; + background-color: #000000; + color: #fff; font-size: 0px; width: 100%; height: 100%; + padding: 12px; } .subscriberContainer .submit :global(.vtex-button)::after { content: "Avise-me"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; font-size: 18px; + line-height: 25px; + text-transform: uppercase; } /*Shipping*/ @@ -136,11 +166,11 @@ position: relative; } .shippingContainer :global(.vtex-button) { - background-color: black; + background-color: #000000; width: 50px; - height: 45px; - color: white; - margin-top: 22px; + height: 44px; + color: #fff; + margin-top: 25px; margin-left: -4px; } .shippingContainer :global(.vtex-input__label) { @@ -148,7 +178,12 @@ } .shippingContainer :global(.vtex-input__label)::after { content: "calcular frete:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; font-size: 14px; + line-height: 19px; + color: #929292; text-transform: uppercase; } .shippingContainer :global(.vtex-button__label) { @@ -156,7 +191,11 @@ } .shippingContainer :global(.vtex-button__label)::after { content: "OK"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; font-size: 14px; + line-height: 19px; } .shippingContainer :global(.vtex-input-prefix__group) { border-radius: 0; @@ -165,10 +204,15 @@ width: 280px; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { - color: black; + color: #000000; position: absolute; right: 110px; top: 25px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; } @media screen and (max-width: 1024px) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { @@ -210,13 +254,35 @@ width: 50%; margin-left: 16px; } +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +@media screen and (max-width: 1024px) { + .productDescriptionContainer { + margin-top: 16px; + width: 100%; + } +} /*newsletter*/ .newsletter { - background: black; - color: white; + background: #000000; + color: #fff; margin-top: 50px; - border-bottom: 2px solid lightgray; + border-bottom: 2px solid white; } .newsletter .container { margin: auto; @@ -237,11 +303,11 @@ font-weight: 400; font-size: 24px; line-height: 38px; - color: #ffffff; + color: #fff; } .newsletter .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: Open Sans; + font-family: "Open Sans"; font-size: 18px; font-weight: 400; line-height: 25px; @@ -259,19 +325,19 @@ border-radius: 0; } .newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { - background-color: black; + background-color: #000000; } .newsletter .inputGroup .buttonContainer { padding: 0; } .newsletter .inputGroup .buttonContainer :global(.vtex-button) { - background-color: black; + background-color: #000000; border: none; border-bottom: 2px solid white; border-radius: 0; } .newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { - background-color: black; + background-color: #000000; border-bottom: 4px solid white; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 06c4b2f..9402e34 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ .listContainer { display: flex; @@ -29,5 +30,6 @@ .contentItem { flex-direction: column; padding: 16px 40px; + border-bottom: 1px solid #b9b9b9; } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index a252ba4..0fd7f09 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -20,7 +20,7 @@ width: 100%; max-width: 400px; position: absolute; - top: 358px; + top: 366px; left: 158px; :global(.vtex-button) { @@ -28,6 +28,7 @@ border: 1px solid black; border-radius: 0; font-family: "Open Sans"; + padding: 12px; &:hover { background-color: rgb(36, 36, 36); diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 41778e7..66ee5a3 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,7 +1,17 @@ .product-identifier--productReference { display: flex; justify-content: right; - color: gray; + + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray7; + + @media screen and (max-width: 1024px) { + justify-content: left; + } } .product-identifier__label, diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 4c27aac..bf30737 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -7,7 +7,8 @@ } .sellingPrice { - color: #3f3f40; + font-family: $font-family; + color: $color-black; font-size: 1.25rem; margin-bottom: -12px; } @@ -78,6 +79,8 @@ } .installmentsNumber { + font-family: $font-family; + font-weight: bold; font-size: 16px; @@ -91,6 +94,7 @@ } .installmentValue { + font-family: $font-family; font-size: 16px; font-weight: bold; margin-right: 6px; @@ -105,6 +109,8 @@ .interestRate { &::after { + font-family: $font-family; + content: "sem juros"; font-size: 16px; font-weight: normal; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c0b4f83..525580f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -6,7 +6,11 @@ font-size: 20px; line-height: 34px; text-align: right; - color: #575757; + color: $color-gray6; + + @media screen and (max-width: 1024px) { + text-align: left; + } } /* carouselThumbs*/ @@ -30,7 +34,7 @@ .frameAround { border-radius: 50%; - border-color: black; + border-color: $color-black; z-index: 2; margin: 2px; } @@ -41,13 +45,13 @@ .skuSelectorItemTextValue { padding: 0; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; - color: rgba(185, 185, 185, 0.6); + color: $color-gray10; } .diagonalCross { @@ -80,8 +84,12 @@ &::after { content: "OUTROS TAMANHOS:"; + font-family: $font-family; + font-style: normal; + font-weight: 400; font-size: 14px; - color: gray; + line-height: 19px; + color: $color-gray8; } } } @@ -92,8 +100,12 @@ &::after { content: "OUTRAS CORES:"; + font-family: $font-family; + font-style: normal; + font-weight: 400; font-size: 14px; - color: gray; + line-height: 19px; + color: $color-gray8; } } } @@ -108,7 +120,12 @@ &::after { content: "Produto indisponível"; - font-size: 16px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray11; } } @@ -117,7 +134,13 @@ &::after { content: "Deseja saber quando estiver disponível?"; - font-size: 16px; + + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray11; } } @@ -135,15 +158,21 @@ bottom: 0; :global(.vtex-button) { - background-color: black; - color: white; + background-color: $color-black; + color: $color-white; font-size: 0px; width: 100%; height: 100%; + padding: 12px; &::after { content: "Avise-me"; + font-family: $font-family; + font-style: normal; + font-weight: 600; font-size: 18px; + line-height: 25px; + text-transform: uppercase; } } } @@ -154,11 +183,11 @@ display: flex; position: relative; :global(.vtex-button) { - background-color: black; + background-color: $color-black; width: 50px; - height: 45px; - color: white; - margin-top: 22px; + height: 44px; + color: $color-white; + margin-top: 25px; margin-left: -4px; } @@ -167,7 +196,12 @@ &::after { content: "calcular frete:"; + font-family: $font-family; + font-style: normal; + font-weight: 400; font-size: 14px; + line-height: 19px; + color: $color-gray8; text-transform: uppercase; } } @@ -178,7 +212,11 @@ :global(.vtex-button__label)::after { content: "OK"; + font-family: $font-family; + font-style: normal; + font-weight: 600; font-size: 14px; + line-height: 19px; } :global(.vtex-input-prefix__group) { @@ -190,11 +228,17 @@ } :global(.vtex-address-form__postalCode-forgottenURL) { - color: black; + color: $color-black; position: absolute; right: 110px; top: 25px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + @media screen and (max-width: 1024px) { right: -60px; } @@ -221,8 +265,8 @@ .shippingTableCell { padding: 7px 0; - font-family: "Open Sans"; - color: #afafaf; + font-family: $font-family; + color: $color-gray12; } .shippingTableRadioBtn { @@ -239,15 +283,40 @@ .productDescriptionContainer { width: 50%; margin-left: 16px; + + .productDescriptionTitle { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 32px; + + color: $color-gray6; + } + + .productDescriptionText { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $color-gray8; + } + + @media screen and (max-width: 1024px) { + margin-top: 16px; + width: 100%; + } } /*newsletter*/ .newsletter { - background: black; - color: white; + background: $color-black; + color: $color-white; margin-top: 50px; - border-bottom: 2px solid lightgray; + border-bottom: 2px solid white; .container { margin: auto; @@ -265,24 +334,24 @@ .label { display: flex; flex-direction: column; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; - color: #ffffff; + color: $color-white; } .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: Open Sans; + font-family: $font-family; font-size: 18px; font-weight: 400; line-height: 25px; letter-spacing: 0em; text-align: center; - color: #929292; + color: $color-gray8; margin: 16px; } @@ -296,20 +365,20 @@ } :global(.vtex-styleguide-9-x-input) { - background-color: black; + background-color: $color-black; } .buttonContainer { padding: 0; :global(.vtex-button) { - background-color: black; + background-color: $color-black; border: none; border-bottom: 2px solid white; border-radius: 0; &:hover { - background-color: black; + background-color: $color-black; border-bottom: 4px solid white; } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index d559d07..1696228 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -18,5 +18,6 @@ @media screen and (max-width: 1024px) { flex-direction: column; padding: 16px 40px; + border-bottom: 1px solid #b9b9b9; } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..f83139d 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,8 @@ -$color-black: #292929; +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); + +$font-family: "Open Sans"; + +$color-black: #000000; $color-white: #fff; @@ -7,6 +11,14 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #575757; +$color-gray7: rgba(146, 146, 146, 0.48); +$color-gray8: #929292; +$color-gray9: #989898; +$color-gray10: rgba(185, 185, 185, 0.6); +$color-gray11: #868686; +$color-gray12: #afafaf; +$color-gray13: #b9b9b9; $color-blue: #4267b2; @@ -14,18 +26,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;