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

estilização do breadcrumb e titulo da prateleira inferior

Browse Source
This commit is contained in:
Emerson Fully 2023-02-09 22:21:52 -03:00
parent 7581931249
commit 5a12c47d67
9 changed files with 113 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,8 @@
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
"paddingBottom": 7,
"blockClass": "product-main-stack"
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
},
@ -78,7 +79,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "50%",
"rowGap": 0
}
},
@ -113,7 +114,6 @@
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator"
@ -164,8 +164,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {
@ -193,9 +193,18 @@
}
},
"rich-text#shelfTitle": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Você também pode gostar:",
"blockClass": "shelfTitleText"
}
},
"list-context.product-list#list": {
"blocks": ["product-summary.shelf#carrosselprodutos"],
"children": ["slider-layout#carrosselatualizado"]
"children": ["rich-text#shelfTitle", "slider-layout#carrosselatualizado"]
},
"product-summary.shelf#carrosselprodutos": {
"children": [

33
styles/css/vtex.breadcrumb.css Normal file
View File

@ -0,0 +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;700&display=swap");
/* Grid breakpoints */
.homeLink .homeIcon {
display: none;
}
.homeLink::before {
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.link--1,
.link--2,
.link--3 {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

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

@ -8,8 +8,11 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.flexRowContent--product-main-stack {
padding: 0 30px;
}
@media screen and (max-width: 1024px) {
.flexRowContent {
.flexRowContent--product-main-stack {
display: flex;
flex-direction: column;
}
@ -29,7 +32,7 @@
@media screen and (min-width: 769px) {
.flexRow--btn-product {
width: 100%;
max-width: 400px;
max-width: 526px;
position: absolute;
top: 366px;
left: 158px;

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

@ -7,4 +7,13 @@
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
/* Grid breakpoints */
.paragraph--shelfTitleText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
margin-bottom: 32px;
}

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

@ -206,7 +206,7 @@
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
color: #000000;
position: absolute;
right: 110px;
left: 348px;
top: 25px;
font-family: "Open Sans";
font-style: normal;

28
styles/sass/pages/product/vtex.breadcrumb.scss Normal file
View File

@ -0,0 +1,28 @@
.homeLink {
.homeIcon {
display: none;
}
&::before {
content: "Home";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
.link--1,
.link--2,
.link--3 {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

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

@ -1,10 +1,17 @@
.flexRowContent {
// .flexRowContent {
// @media screen and (max-width: 1024px) {
// display: flex;
// flex-direction: column;
// }
// }
.flexRowContent--product-main-stack {
padding: 0 30px;
@media screen and (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
.flexRowContent--main-header-mobile {
@media screen and (max-width: 1024px) {
display: flex;
@ -19,7 +26,7 @@
.flexRow--btn-product {
@media screen and (min-width: 769px) {
width: 100%;
max-width: 400px;
max-width: 526px;
position: absolute;
top: 366px;
left: 158px;

10
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -0,0 +1,10 @@
.paragraph--shelfTitleText {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
margin-bottom: 32px;
}

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

@ -230,7 +230,7 @@
:global(.vtex-address-form__postalCode-forgottenURL) {
color: $color-black;
position: absolute;
right: 110px;
left: 348px;
top: 25px;
font-family: $font-family;