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

refactor: corrigindo css do product-name

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2023-02-07 12:32:47 -03:00
parent 570893390e
commit d6cd35ecfe
12 changed files with 188 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
react/components/Example/paymentWithPix.tsx
View File

@ -1,20 +1,21 @@
import React from 'react';
import {useProduct} from 'vtex.product-context';
import styles from "./styles.css"
const paymentWithPix= (props:any) => {
console.log("props",props);
const paymentWithPix =() => {
const product = useProduct();
let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg"
return (
<div>
<img src={imagePix} alt="Imagem do icone do pix" />
<p>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * 0.9}</p>
<p>10 % de desconto</p>
<div className={styles.wrapperPix}>
<img className={styles.wrapperPixImage}src={imagePix} alt="Imagem do icone do pix" />
<div className={styles.wrapperPrices}>
<h3 className={styles.wrapperTitle}>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</h3>
<h3 className={styles.wrapperSubtitle}>R$ 10 % de desconto</h3>
</div>
</div>
)

36
react/components/Example/styles.css Normal file
View File

@ -0,0 +1,36 @@
.wrapperPix {
display: flex;
gap: 26px;
align-items: center;
margin-top: 8px;
}
.wrapperPixImage {
width: 66px;
height: 24px;
}
.wrapperPrices {
display: flex;
flex-direction: column;
}
.wrapperTitle {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
margin: 0;
}
.wrapperSubtitle {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
margin: 0;
}

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

@ -78,7 +78,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "50%",
"width": "51%",
"rowGap": 0,
"blockClass":"stack"
}
@ -113,8 +113,8 @@
"flex-layout.row#selling-price",
"product-installments",
"example-component",
"product-separator",
"product-identifier.product",
// "product-separator",
// "product-identifier.product",
"sku-selector",
"flex-layout.row#box-buy",
"product-assembly-options",
@ -209,12 +209,12 @@
"tab-list#home": {
"children": [
"tab-list.item#home1",
"tab-list.item#home2",
"tab-list.item#home3",
"tab-list.item#home4",
"tab-list.item#home5"
"children": [
"tab-list.item#home1",
"tab-list.item#home2",
"tab-list.item#home3",
"tab-list.item#home4",
"tab-list.item#home5"
]
},
@ -251,7 +251,6 @@
"props": {
"tabId": "description5",
"label": "Descrição"
}
},
"tab-content#home": {

12
styles/css/product-separator.css Normal file
View File

@ -0,0 +1,12 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
/*font*/
/*colors*/
/* Grid breakpoints */

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

@ -1,79 +1,29 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
/*font*/
/*colors*/
/* Grid breakpoints */
.sellingPriceValue {
font-size: 2.25rem;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}

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

@ -12,4 +12,8 @@
/* Grid breakpoints */
.quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper {
background-color: white;
}

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

@ -173,4 +173,9 @@
line-height: 34px;
text-align: right;
color: #575757;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}

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

@ -15,4 +15,31 @@
flex-direction: row;
gap: 32px;
padding: 32px 72px 16px 72px;
}
.listContainer {
display: flex;
justify-content: start;
padding-left: 104px;
border-bottom: 1px solid #B9B9B9;
}
.listItem {
margin: 0;
padding: 0;
}
.listItem :global(.vtex-button) {
border-top: none;
border-left: none;
border-right: none;
}
.listItem :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #000000;
background-color: white;
padding: 0 16px;
}

19
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,19 @@
.sellingPriceValue {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}

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

@ -1,3 +1,7 @@
.quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper {
background-color: white;
}

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

@ -175,3 +175,12 @@
text-align: right;
color: #575757;
}
//estilização do container de skus ( tamanhos e cores )
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}

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

@ -5,3 +5,34 @@
padding: 32px 72px 16px 72px;
}
//estilização do menu "descrição"
.listContainer {
display: flex;
justify-content: start;
padding-left: 104px;
border-bottom: 1px solid #B9B9B9;
}
.listItem {
margin: 0;
padding: 0;
:global(.vtex-button) {
border-top: none;
border-left: none;
border-right: none;
:global(.vtex-button__label ) {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #000000;
background-color: white;
padding: 0 16px;
}
}
}