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

feat: Adiciona estilo text-descricao

Browse Source
This commit is contained in:
Izabela Balizardo 2023-02-06 23:36:56 -03:00
parent 6d6f51d4d2
commit ec95d20eac
10 changed files with 193 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
react/components/Html/styles.css
View File

@ -95,15 +95,15 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
display: none;
} */
[class*="flexRowContent--btn-product"] button {
/* [class*="flexRowContent--btn-product"] button {
background-color: black;
border-color: black;
max-width: 526px;
width: 100%;
width: 766px;
height: 49px;
display: flex;
border-radius: 0px;
left: 158px;
bottom: 73px;
}
@ -111,14 +111,24 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
font-size: 0px;
}
[class*="flexRowContent--btn-product"] button span::after {
content: "ADICIONAR À SACOLA";
[class*="flexRowContent--btn-product"] button span::after {
font-size: 14px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-family: "Open Sans", sans-serif;
}
[class*="flexRowContent--btn-product"] button:hover {
background-color: #000000;
} */
[class*="vtex-add-to-cart-button-0-x-buttonText--botao-adicionar"] {
font-family: "Open Sans", sans-serif;
font-size: 14px;
bottom: 75px;
}
[class*="vtex-address-form__postalCode-forgottenURL"] a {
@ -133,4 +143,38 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
display: none;
}
/*Description*/
[class*="vtex-tab-layout-0-x-listItem"] {
margin: 0;
padding: 0;
}
[class*="vtex-tab-layout-0-x-listItem"] button {
color: gray;
text-transform: capitalize;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
}
[class*="vtex-tab-layout-0-x-listItem"] button:hover {
color: black;
border-bottom: 2px solid black;
background-color: white;
border-radius: 0;
}
[class*="vtex-tab-layout-0-x-listItemActive"] button {
color: black;
background-color: white;
border: none;
border-bottom: 2px solid black;
border-radius: 0;
}
[class*="vtex-tab-layout-0-x-listItemActive"] button:hover {
background-color: white;
border-bottom: 4px solid black;
color: black;
}

4
store/blocks/minicart.jsonc
View File

@ -2,7 +2,9 @@
"add-to-cart-button": {
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button"
"customPixelEventId": "add-to-cart-button",
"text": "Adicionar à sacola",
"blockClass": "botao-adicionar"
}
},

4
store/blocks/pdp/product.jsonc
View File

@ -252,7 +252,9 @@
"phone": "16:9"
},
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": false
"showPaginationDots": false,
"displayThumbnailsArrows": false,
"showNavigationArrows": false
}
},
"flex-layout.col#right-col": {

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

@ -7,4 +7,23 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
.flexRow--btn-product {
width: 100%;
max-width: 380px;
bottom: 75px;
position: relative;
left: 155px;
}
.flexRow--btn-product :global(.vtex-button) {
background-color: black;
border: 1px solid black;
border-radius: 0;
height: 49px;
}
.flexRow--btn-product :global(.vtex-button):hover {
background-color: rgb(36, 36, 36);
}
.flexRow--btn-product .flexRow--btn-product--botao-adicionar {
font-family: "Open Sans", sans-serif;
}

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

@ -19,6 +19,7 @@
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
margin-bottom: -12px;
}
.sellingPriceValue {
@ -27,8 +28,9 @@
}
.installments {
color: #727273;
margin-bottom: 1rem;
color: #929292;
margin-bottom: 8px;
font-size: 0px;
}
.sellingPriceValue--summary {
@ -82,4 +84,33 @@
vertical-align: baseline;
color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
.installmentsNumber {
font-weight: bold;
font-size: 16px;
margin-right: 6px;
}
.installmentsNumber::after {
content: "x";
font-size: 16px;
margin-left: 4px;
}
.installmentValue {
font-size: 16px;
font-weight: bold;
margin-right: 6px;
}
.installmentValue::before {
content: "de";
font-size: 16px;
font-weight: normal;
margin-right: 6px;
}
.interestRate::after {
content: "sem juros";
font-size: 16px;
font-weight: normal;
}

15
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,15 @@
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
.listContainer {
display: flex;
justify-content: space-evenly;
border-bottom: 1px solid gray;
}

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

@ -7,3 +7,27 @@
// display: flex;
// border-radius: 0px;
// }
.flexRow--btn-product {
width: 100%;
max-width: 380px;
bottom: 75px;
position: relative;
left: 155px;
:global(.vtex-button) {
background-color: black;
border: 1px solid black;
border-radius: 0;
height: 49px;
&:hover {
background-color: rgb(36, 36, 36);
}
}
.flexRow--btn-product--botao-adicionar {
font-family: "Open Sans", sans-serif;
}
}

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

@ -9,6 +9,7 @@
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
margin-bottom: -12px;
}
.sellingPriceValue {
@ -17,8 +18,9 @@
}
.installments {
color: #727273;
margin-bottom: 1rem;
color: #929292;
margin-bottom: 8px;
font-size: 0px;
}
.sellingPriceValue--summary {
@ -74,3 +76,37 @@
color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
.installmentsNumber {
font-weight: bold;
font-size: 16px;
margin-right: 6px;
&::after {
content: "x";
font-size: 16px;
margin-left: 4px;
}
}
.installmentValue {
font-size: 16px;
font-weight: bold;
margin-right: 6px;
&::before {
content: "de";
font-size: 16px;
font-weight: normal;
margin-right: 6px;
}
}
.interestRate {
&::after {
content: "sem juros";
font-size: 16px;
font-weight: normal;
}
}

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

@ -3,8 +3,6 @@
color: $color-white;
}
.productNameContainer {
font-family: "Open Sans";
font-style: normal;
@ -116,3 +114,5 @@
text-align: left;
}
}

5
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,5 @@
.listContainer {
display: flex;
justify-content: space-evenly;
border-bottom: 1px solid gray;
}