emersonfully/challenge-vtex-io-emersonfully
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

troca dos valores padrões css por variaveis scss

Browse Source
This commit is contained in:
Emerson Fully 2023-02-09 12:32:27 -03:00
parent 58ba9ff64c
commit 516545c356
18 changed files with 270 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
react/components/Html/style.css
View File

@ -44,12 +44,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 20px; 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"] { [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*/ /*Cep-link*/
@ -74,12 +84,12 @@
} }
[class*="vtex-tab-layout-0-x-listItem"] button { [class*="vtex-tab-layout-0-x-listItem"] button {
color: #BFBFBF;
text-transform: capitalize; text-transform: capitalize;
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
color: #BFBFBF;
} }

1
styles/css/agenciamagma.store-theme.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.html { .html {
background-color: red; background-color: red;

4
styles/css/vtex.flex-layout.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.flexRowContent { .flexRowContent {
@ -29,7 +30,7 @@
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
position: absolute; position: absolute;
top: 358px; top: 366px;
left: 158px; left: 158px;
} }
.flexRow--btn-product :global(.vtex-button) { .flexRow--btn-product :global(.vtex-button) {
@ -37,6 +38,7 @@
border: 1px solid black; border: 1px solid black;
border-radius: 0; border-radius: 0;
font-family: "Open Sans"; font-family: "Open Sans";
padding: 12px;
} }
.flexRow--btn-product :global(.vtex-button):hover { .flexRow--btn-product :global(.vtex-button):hover {
background-color: rgb(36, 36, 36); background-color: rgb(36, 36, 36);

13
styles/css/vtex.product-identifier.css
View File

@ -6,11 +6,22 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.product-identifier--productReference { .product-identifier--productReference {
display: flex; display: flex;
justify-content: right; 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, .product-identifier__label,

7
styles/css/vtex.product-price.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.listPrice { .listPrice {
display: none; display: none;
@ -16,7 +17,8 @@
} }
.sellingPrice { .sellingPrice {
color: #3f3f40; font-family: "Open Sans";
color: #000000;
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: -12px; margin-bottom: -12px;
} }
@ -86,6 +88,7 @@
} }
.installmentsNumber { .installmentsNumber {
font-family: "Open Sans";
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
margin-right: 6px; margin-right: 6px;
@ -97,6 +100,7 @@
} }
.installmentValue { .installmentValue {
font-family: "Open Sans";
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-right: 6px; margin-right: 6px;
@ -109,6 +113,7 @@
} }
.interestRate::after { .interestRate::after {
font-family: "Open Sans";
content: "sem juros"; content: "sem juros";
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;

1
styles/css/vtex.product-quantity.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.quantitySelectorTitle { .quantitySelectorTitle {
display: none; display: none;

1
styles/css/vtex.product-summary.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.buyButton { .buyButton {
display: none; display: none;

1
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,5 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */

1
styles/css/vtex.shelf.css
View File

@ -7,6 +7,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.title { .title {
font-size: 0px; font-size: 0px;

1
styles/css/vtex.slider-layout.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.sliderLayoutContainer--carousel { .sliderLayoutContainer--carousel {
background-color: white; background-color: white;

106
styles/css/vtex.store-components.css
View File

@ -7,6 +7,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
/*Product name*/ /*Product name*/
.productNameContainer--quickview { .productNameContainer--quickview {
@ -18,6 +19,11 @@
text-align: right; text-align: right;
color: #575757; color: #575757;
} }
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
text-align: left;
}
}
/* carouselThumbs*/ /* carouselThumbs*/
.carouselGaleryThumbs { .carouselGaleryThumbs {
@ -38,7 +44,7 @@
} }
.skuSelectorContainer .frameAround { .skuSelectorContainer .frameAround {
border-radius: 50%; border-radius: 50%;
border-color: black; border-color: #000000;
z-index: 2; z-index: 2;
margin: 2px; margin: 2px;
} }
@ -75,8 +81,12 @@
} }
.skuSelectorSubcontainer--tamanho .skuSelectorName::after { .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px; font-size: 14px;
color: gray; line-height: 19px;
color: #929292;
} }
.skuSelectorSubcontainer--cor .skuSelectorName { .skuSelectorSubcontainer--cor .skuSelectorName {
@ -84,8 +94,12 @@
} }
.skuSelectorSubcontainer--cor .skuSelectorName::after { .skuSelectorSubcontainer--cor .skuSelectorName::after {
content: "OUTRAS CORES:"; content: "OUTRAS CORES:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px; font-size: 14px;
color: gray; line-height: 19px;
color: #929292;
} }
/*not-Avaliable*/ /*not-Avaliable*/
@ -99,14 +113,24 @@
} }
.subscriberContainer .title::after { .subscriberContainer .title::after {
content: "Produto indisponível"; 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 { .subscriberContainer .subscribeLabel {
font-size: 0px; font-size: 0px;
} }
.subscriberContainer .subscribeLabel::after { .subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?"; 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 .inputName :global(.vtex-input-prefix__group),
.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) { .subscriberContainer .inputEmail :global(.vtex-input-prefix__group) {
@ -119,15 +143,21 @@
bottom: 0; bottom: 0;
} }
.subscriberContainer .submit :global(.vtex-button) { .subscriberContainer .submit :global(.vtex-button) {
background-color: black; background-color: #000000;
color: white; color: #fff;
font-size: 0px; font-size: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 12px;
} }
.subscriberContainer .submit :global(.vtex-button)::after { .subscriberContainer .submit :global(.vtex-button)::after {
content: "Avise-me"; content: "Avise-me";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px; font-size: 18px;
line-height: 25px;
text-transform: uppercase;
} }
/*Shipping*/ /*Shipping*/
@ -136,11 +166,11 @@
position: relative; position: relative;
} }
.shippingContainer :global(.vtex-button) { .shippingContainer :global(.vtex-button) {
background-color: black; background-color: #000000;
width: 50px; width: 50px;
height: 45px; height: 44px;
color: white; color: #fff;
margin-top: 22px; margin-top: 25px;
margin-left: -4px; margin-left: -4px;
} }
.shippingContainer :global(.vtex-input__label) { .shippingContainer :global(.vtex-input__label) {
@ -148,7 +178,12 @@
} }
.shippingContainer :global(.vtex-input__label)::after { .shippingContainer :global(.vtex-input__label)::after {
content: "calcular frete:"; content: "calcular frete:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase; text-transform: uppercase;
} }
.shippingContainer :global(.vtex-button__label) { .shippingContainer :global(.vtex-button__label) {
@ -156,7 +191,11 @@
} }
.shippingContainer :global(.vtex-button__label)::after { .shippingContainer :global(.vtex-button__label)::after {
content: "OK"; content: "OK";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 19px;
} }
.shippingContainer :global(.vtex-input-prefix__group) { .shippingContainer :global(.vtex-input-prefix__group) {
border-radius: 0; border-radius: 0;
@ -165,10 +204,15 @@
width: 280px; width: 280px;
} }
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
color: black; color: #000000;
position: absolute; position: absolute;
right: 110px; right: 110px;
top: 25px; top: 25px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
@ -210,13 +254,35 @@
width: 50%; width: 50%;
margin-left: 16px; 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*/
.newsletter { .newsletter {
background: black; background: #000000;
color: white; color: #fff;
margin-top: 50px; margin-top: 50px;
border-bottom: 2px solid lightgray; border-bottom: 2px solid white;
} }
.newsletter .container { .newsletter .container {
margin: auto; margin: auto;
@ -237,11 +303,11 @@
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 38px; line-height: 38px;
color: #ffffff; color: #fff;
} }
.newsletter .label::after { .newsletter .label::after {
content: "Receba ofertas e novidades por e-mail"; content: "Receba ofertas e novidades por e-mail";
font-family: Open Sans; font-family: "Open Sans";
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 25px; line-height: 25px;
@ -259,19 +325,19 @@
border-radius: 0; border-radius: 0;
} }
.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { .newsletter .inputGroup :global(.vtex-styleguide-9-x-input) {
background-color: black; background-color: #000000;
} }
.newsletter .inputGroup .buttonContainer { .newsletter .inputGroup .buttonContainer {
padding: 0; padding: 0;
} }
.newsletter .inputGroup .buttonContainer :global(.vtex-button) { .newsletter .inputGroup .buttonContainer :global(.vtex-button) {
background-color: black; background-color: #000000;
border: none; border: none;
border-bottom: 2px solid white; border-bottom: 2px solid white;
border-radius: 0; border-radius: 0;
} }
.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { .newsletter .inputGroup .buttonContainer :global(.vtex-button):hover {
background-color: black; background-color: #000000;
border-bottom: 4px solid white; border-bottom: 4px solid white;
} }

2
styles/css/vtex.tab-layout.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
.listContainer { .listContainer {
display: flex; display: flex;
@ -29,5 +30,6 @@
.contentItem { .contentItem {
flex-direction: column; flex-direction: column;
padding: 16px 40px; padding: 16px 40px;
border-bottom: 1px solid #b9b9b9;
} }
} }

3
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -20,7 +20,7 @@
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
position: absolute; position: absolute;
top: 358px; top: 366px;
left: 158px; left: 158px;
:global(.vtex-button) { :global(.vtex-button) {
@ -28,6 +28,7 @@
border: 1px solid black; border: 1px solid black;
border-radius: 0; border-radius: 0;
font-family: "Open Sans"; font-family: "Open Sans";
padding: 12px;
&:hover { &:hover {
background-color: rgb(36, 36, 36); background-color: rgb(36, 36, 36);

12
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -1,7 +1,17 @@
.product-identifier--productReference { .product-identifier--productReference {
display: flex; display: flex;
justify-content: right; 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, .product-identifier__label,

8
styles/sass/pages/product/vtex.product-price.scss
View File

@ -7,7 +7,8 @@
} }
.sellingPrice { .sellingPrice {
color: #3f3f40; font-family: $font-family;
color: $color-black;
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: -12px; margin-bottom: -12px;
} }
@ -78,6 +79,8 @@
} }
.installmentsNumber { .installmentsNumber {
font-family: $font-family;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
@ -91,6 +94,7 @@
} }
.installmentValue { .installmentValue {
font-family: $font-family;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-right: 6px; margin-right: 6px;
@ -105,6 +109,8 @@
.interestRate { .interestRate {
&::after { &::after {
font-family: $font-family;
content: "sem juros"; content: "sem juros";
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;

123
styles/sass/pages/product/vtex.store-components.scss
View File

@ -6,7 +6,11 @@
font-size: 20px; font-size: 20px;
line-height: 34px; line-height: 34px;
text-align: right; text-align: right;
color: #575757; color: $color-gray6;
@media screen and (max-width: 1024px) {
text-align: left;
}
} }
/* carouselThumbs*/ /* carouselThumbs*/
@ -30,7 +34,7 @@
.frameAround { .frameAround {
border-radius: 50%; border-radius: 50%;
border-color: black; border-color: $color-black;
z-index: 2; z-index: 2;
margin: 2px; margin: 2px;
} }
@ -41,13 +45,13 @@
.skuSelectorItemTextValue { .skuSelectorItemTextValue {
padding: 0; padding: 0;
font-family: "Open Sans"; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
color: rgba(185, 185, 185, 0.6); color: $color-gray10;
} }
.diagonalCross { .diagonalCross {
@ -80,8 +84,12 @@
&::after { &::after {
content: "OUTROS TAMANHOS:"; content: "OUTROS TAMANHOS:";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px; font-size: 14px;
color: gray; line-height: 19px;
color: $color-gray8;
} }
} }
} }
@ -92,8 +100,12 @@
&::after { &::after {
content: "OUTRAS CORES:"; content: "OUTRAS CORES:";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px; font-size: 14px;
color: gray; line-height: 19px;
color: $color-gray8;
} }
} }
} }
@ -108,7 +120,12 @@
&::after { &::after {
content: "Produto indisponível"; 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 { &::after {
content: "Deseja saber quando estiver disponível?"; 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; bottom: 0;
:global(.vtex-button) { :global(.vtex-button) {
background-color: black; background-color: $color-black;
color: white; color: $color-white;
font-size: 0px; font-size: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 12px;
&::after { &::after {
content: "Avise-me"; content: "Avise-me";
font-family: $font-family;
font-style: normal;
font-weight: 600;
font-size: 18px; font-size: 18px;
line-height: 25px;
text-transform: uppercase;
} }
} }
} }
@ -154,11 +183,11 @@
display: flex; display: flex;
position: relative; position: relative;
:global(.vtex-button) { :global(.vtex-button) {
background-color: black; background-color: $color-black;
width: 50px; width: 50px;
height: 45px; height: 44px;
color: white; color: $color-white;
margin-top: 22px; margin-top: 25px;
margin-left: -4px; margin-left: -4px;
} }
@ -167,7 +196,12 @@
&::after { &::after {
content: "calcular frete:"; content: "calcular frete:";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px;
color: $color-gray8;
text-transform: uppercase; text-transform: uppercase;
} }
} }
@ -178,7 +212,11 @@
:global(.vtex-button__label)::after { :global(.vtex-button__label)::after {
content: "OK"; content: "OK";
font-family: $font-family;
font-style: normal;
font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 19px;
} }
:global(.vtex-input-prefix__group) { :global(.vtex-input-prefix__group) {
@ -190,11 +228,17 @@
} }
:global(.vtex-address-form__postalCode-forgottenURL) { :global(.vtex-address-form__postalCode-forgottenURL) {
color: black; color: $color-black;
position: absolute; position: absolute;
right: 110px; right: 110px;
top: 25px; top: 25px;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
right: -60px; right: -60px;
} }
@ -221,8 +265,8 @@
.shippingTableCell { .shippingTableCell {
padding: 7px 0; padding: 7px 0;
font-family: "Open Sans"; font-family: $font-family;
color: #afafaf; color: $color-gray12;
} }
.shippingTableRadioBtn { .shippingTableRadioBtn {
@ -239,15 +283,40 @@
.productDescriptionContainer { .productDescriptionContainer {
width: 50%; width: 50%;
margin-left: 16px; 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*/
.newsletter { .newsletter {
background: black; background: $color-black;
color: white; color: $color-white;
margin-top: 50px; margin-top: 50px;
border-bottom: 2px solid lightgray; border-bottom: 2px solid white;
.container { .container {
margin: auto; margin: auto;
@ -265,24 +334,24 @@
.label { .label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: "Open Sans"; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 38px; line-height: 38px;
color: #ffffff; color: $color-white;
} }
.label::after { .label::after {
content: "Receba ofertas e novidades por e-mail"; content: "Receba ofertas e novidades por e-mail";
font-family: Open Sans; font-family: $font-family;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 25px; line-height: 25px;
letter-spacing: 0em; letter-spacing: 0em;
text-align: center; text-align: center;
color: #929292; color: $color-gray8;
margin: 16px; margin: 16px;
} }
@ -296,20 +365,20 @@
} }
:global(.vtex-styleguide-9-x-input) { :global(.vtex-styleguide-9-x-input) {
background-color: black; background-color: $color-black;
} }
.buttonContainer { .buttonContainer {
padding: 0; padding: 0;
:global(.vtex-button) { :global(.vtex-button) {
background-color: black; background-color: $color-black;
border: none; border: none;
border-bottom: 2px solid white; border-bottom: 2px solid white;
border-radius: 0; border-radius: 0;
&:hover { &:hover {
background-color: black; background-color: $color-black;
border-bottom: 4px solid white; border-bottom: 4px solid white;
} }
} }

1
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -18,5 +18,6 @@
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
flex-direction: column; flex-direction: column;
padding: 16px 40px; padding: 16px 40px;
border-bottom: 1px solid #b9b9b9;
} }
} }

18
styles/sass/utils/_vars.scss
View File

@ -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; $color-white: #fff;
@ -7,6 +11,14 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #c4c4c4; $color-gray4: #c4c4c4;
$color-gray5: #e5e5e5; $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; $color-blue: #4267b2;
@ -19,7 +31,7 @@ $grid-breakpoints: (
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px xl: 1200px,
) !default; ) !default;
$z-index: ( $z-index: (
@ -27,5 +39,5 @@ $z-index: (
level2: 10, level2: 10,
level3: 15, level3: 15,
level4: 20, level4: 20,
level5: 25 level5: 25,
) !default; ) !default;