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

feat(product): adicionando estilo ao nameProduct e referencia

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-24 21:07:05 -03:00
parent e50d232b85
commit b9e9bfe8b3
10 changed files with 168 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,7 +79,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "50%",
"rowGap": 0
}
},
@ -103,16 +103,17 @@
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
"rowGap": 0,
"blockClass": "product-skus"
},
"children": [
"flex-layout.row#product-name",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"product-identifier.product",
// "product-rating-summary",
// "flex-layout.row#list-price-savings", preço com promoção vindo vtex
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",
"product-assembly-options",
@ -126,7 +127,8 @@
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
"marginBottom": 3,
"blockClass": "product__name"
},
"children": ["vtex.store-components:product-name"]
},

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

@ -111,14 +111,24 @@
}
}
.stretchChildrenWidth {
width: 50% !important;
.flexRowContent--product__image .stretchChildrenWidth:first-child {
padding-right: 16px;
margin-right: 16px;
}
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.stretchChildrenWidth {
.flexRowContent--product__image .stretchChildrenWidth {
width: 100% !important;
padding-right: 0;
}
}
.flexRow--product__name, .flexRowContent--product__name {
height: 34px;
}
.flexRowContent--product__name .stretchChildrenWidth {
width: 100% !important;
height: 34px;
padding: 0 !important;
margin: 0 0 8px 0 !important;
}

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

@ -1,3 +1,33 @@
/*
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@300;400;600;700&display=swap");
/* Grid breakpoints */
.product-identifier--productReference {
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: end;
margin-bottom: 24px;
}
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.product-identifier--productReference {
justify-content: flex-start;
padding-top: 8px;
}
}
.product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator {
display: none;
}
.product-identifier--productReference .product-identifier__value {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}

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

@ -1,79 +1,18 @@
.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@300;400;600;700&display=swap");
/* Grid breakpoints */
.sellingPriceValue {
font-size: 2.25rem;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
}
.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-size: 25px;
line-height: 38px;
color: #000;
}

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

@ -73,3 +73,23 @@
width: 100%;
height: 100%;
}
.productNameContainer--quickview {
display: flex;
justify-content: end;
align-items: center;
font-family: "Open Sans", sans-serif;
padding: 0;
margin: 0 0 8px 0;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
.productNameContainer--quickview {
justify-content: flex-start;
margin-top: 32px;
}
}

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

@ -103,13 +103,28 @@
}
}
.stretchChildrenWidth {
width: 50% !important;
.flexRowContent--product__image {
.stretchChildrenWidth {
&:first-child {
padding-right: 16px;
margin-right: 16px;
}
@media #{$mq-tablet}, #{$mq-mobile}{
width: 100% !important;
padding-right: 0;
}
}
}
.flexRow--product__name, .flexRowContent--product__name {
height: 34px;
}
.flexRowContent--product__name .stretchChildrenWidth {
width: 100% !important;
height: 34px;
padding: 0 !important;
margin: 0 0 8px 0 !important;
}

27
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -0,0 +1,27 @@
.product-identifier--productReference {
display: flex;
align-items: center;
justify-content: end;
margin-bottom: 24px;
@media #{$mq-tablet}, #{$mq-mobile} {
justify-content: flex-start;
padding-top: 8px;
}
.product-identifier {
&__label, &__separator {
display: none;
}
&__value {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black-tranparent;
}
}
}

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

@ -0,0 +1,8 @@
.sellingPriceValue{
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $color-black0;
}

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

@ -1,3 +1,4 @@
.container {
padding:16px 360px;
margin: 0;
@ -59,5 +60,24 @@
}
}
.productNameContainer--quickview {
display: flex;
justify-content: end;
align-items: center;
font-family: $font-family;
padding: 0;
margin: 0 0 8px 0;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: $color-gray7;
@media #{$mq-tablet}, #{$mq-mobile} {
justify-content: flex-start;
margin-top: 32px;
}
}

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

@ -2,7 +2,9 @@
$font-family: 'Open Sans', sans-serif;
$color-black0: #000;
$color-black: #292929;
$color-black-tranparent: rgba(146, 146, 146, 0.48);
$color-white: #fff;
@ -12,7 +14,7 @@ $color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray6: #929292;
$color-gray7: #575757;
$color-blue: #4267b2;