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

feat: Adicionado os estilos dos preços e parcelados

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2023-02-10 11:00:00 -03:00
parent 92789c1daa
commit eb6440c499
4 changed files with 61 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,18 +9,22 @@
/* Media Query M3 */ /* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */ /* Grid breakpoints */
:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
margin: 0;
}
.flexRowContent { .flexRowContent {
margin: 8px 0 0 0px; margin: 8px 0 0 0px;
padding: 0; padding: 0;
} }
:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
margin: 0;
}
.flexRow--buyButton .flexRowContent {
margin: 0 0 0 0 !important;
padding: 0;
}
.flexRowContent--cart { .flexRowContent--cart {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 25px; margin-bottom: 25px;
} }

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

@ -1,79 +1,27 @@
.listPrice { /*
color: #727273; 0 - 600PX: Phone
margin-bottom: .25rem; 600 - 900px: Table portrait
font-size: 1rem; 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@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.sellingPrice { .sellingPrice {
color: #3f3f40; font-family: "Open Sans";
font-size: 1.25rem; font-style: normal;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700; font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
} }
.installments { .installments {
color: #727273; font-family: "Open Sans";
margin-bottom: 1rem; font-style: normal;
} font-weight: 700;
font-size: 16px;
.savings { line-height: 22px;
font-weight: 500; color: #929292;
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;
} }

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

@ -1,18 +1,24 @@
.flexRow { .flexRow {
} }
:global(.vtex-stack-layout-0-x-stackItem) {
.flexRow {
margin: 0;
}
}
.flexRowContent { .flexRowContent {
margin: 8px 0 0 0px; margin: 8px 0 0 0px;
padding: 0; padding: 0;
} }
:global(.vtex-stack-layout-0-x-stackItem) {
.flexRow {
margin: 0;
}
}
.flexRow--buyButton {
.flexRowContent {
margin: 0 0 0 0 !important;
padding: 0;
}
}
.flexRowContent--cart { .flexRowContent--cart {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 25px; margin-bottom: 25px;
.flexRow--buyButton { .flexRow--buyButton {

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

@ -0,0 +1,17 @@
.sellingPrice {
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;
}