feat(pdp-shelf): cretaed initial styles for small,medium devices

This commit is contained in:
Henrique Santos Santana 2023-02-04 22:03:14 -03:00
parent e649918e25
commit 753a05b213
10 changed files with 125 additions and 10 deletions

View File

@ -26,14 +26,23 @@
"props": { "props": {
"text": "## Você também pode gostar:", "text": "## Você também pode gostar:",
"textPosition": "CENTER", "textPosition": "CENTER",
"textAlignment": "CENTER" "textAlignment": "CENTER",
"blockClass": "productShelfTitle"
} }
}, },
"slider-layout#pdp-shelf": { "slider-layout#pdp-shelf": {
"props": { "props": {
"blockClass": "productShelf", "blockClass": "productShelf",
"infinite": true "itemsPerPage": {
"desktop": 4,
"(min-width:1025px)": 4,
"(min-width:768px)": 3,
"tablet": 2,
"phone": 2
},
"fullWidth": true
} }
}, },
@ -48,7 +57,16 @@
"product-summary-image#pdp-shelf": { "product-summary-image#pdp-shelf": {
"props": { "props": {
"showBadge": false, "showBadge": false,
"alabelSellingPricespectRatio": "1:1" "alabelSellingPricespectRatio": "1:1",
"aspectRatio": "1:1",
"width": {
"(min-width: 1921px)": "434.4px",
"desktop": "314.4px",
"(min-width:1025px)": "314.4px",
"(min-width:768px)": "291.2px",
"tablet": "291.2px",
"phone": "124.8px"
}
} }
}, },

View File

@ -60,6 +60,7 @@
"rowGap": 7, "rowGap": 7,
"marginTop": 5, "marginTop": 5,
"marginBottom": 7, "marginBottom": 7,
"preserveLayoutOnMobile": false,
"blockClass": "productMain" "blockClass": "productMain"
}, },
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"] "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@ -252,7 +253,5 @@
"blockClass": "message-availability" "blockClass": "message-availability"
}, },
"children": ["availability-subscriber"] "children": ["availability-subscriber"]
}, }
"availability-subscriber": {}
} }

View File

@ -110,9 +110,11 @@
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.flexRowContent--productAvailability,
.flexRowContent--productMain { .flexRowContent--productMain {
flex-direction: column !important; flex-direction: column !important;
} }
.flexRowContent--productAvailability .stretchChildrenWidth,
.flexRowContent--productMain .stretchChildrenWidth { .flexRowContent--productMain .stretchChildrenWidth {
width: 100% !important; width: 100% !important;
} }
@ -166,6 +168,8 @@
padding: 0 40px; padding: 0 40px;
} }
@media screen and (min-width: 1025px) {
.flexRow--productSpecificationItemContainer { .flexRow--productSpecificationItemContainer {
padding: 0 32px; padding: 0 32px;
} }
}

View File

@ -50,3 +50,16 @@
.image { .image {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.sellingPriceContainer .currencyContainer {
font-weight: 700;
color: #000;
font-size: 18px;
line-height: normal;
}
@media screen and (min-width: 1025px) {
.sellingPriceContainer .currencyContainer {
font-size: 24px;
line-height: normal;
}
}

View File

@ -7,3 +7,17 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.container--productShelfTitle {
padding: 0 40px;
}
.container--productShelfTitle .heading {
font-size: 20px;
font-weight: 400;
line-height: 38px;
color: #575757;
}
@media screen and (min-width: 768px) {
.container--productShelfTitle .heading {
font-size: 24px;
}
}

View File

@ -43,3 +43,21 @@
width: 100%; width: 100%;
padding: 0 40px; padding: 0 40px;
} }
.paginationDotsContainer--productShelf {
align-items: center;
}
.paginationDot--productShelf {
background-color: #000;
width: 10px !important;
height: 10px !important;
transition: 300ms ease;
}
.paginationDot--productShelf--isActive {
border: 1px solid #000;
background-color: #fff;
width: 17px !important;
height: 17px !important;
}

View File

@ -102,6 +102,7 @@
padding: 0 40px; padding: 0 40px;
} }
.flexRowContent--productAvailability,
.flexRowContent--productMain { .flexRowContent--productMain {
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
flex-direction: column !important; flex-direction: column !important;
@ -166,5 +167,7 @@
} }
.flexRow--productSpecificationItemContainer { .flexRow--productSpecificationItemContainer {
@media screen and (min-width: 1025px) {
padding: 0 32px; padding: 0 32px;
} }
}

View File

@ -42,3 +42,17 @@
.image { .image {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.sellingPriceContainer {
.currencyContainer {
font-weight: 700;
color: #000;
font-size: 18px;
line-height: normal;
@media screen and (min-width: 1025px) {
font-size: 24px;
line-height: normal;
}
}
}

View File

@ -0,0 +1,14 @@
.container--productShelfTitle {
padding: 0 40px;
.heading {
font-size: 20px;
font-weight: 400;
line-height: 38px;
color: #575757;
@media screen and (min-width: 768px) {
font-size: 24px;
}
}
}

View File

@ -34,3 +34,21 @@
width: 100%; width: 100%;
padding: 0 40px; padding: 0 40px;
} }
.paginationDotsContainer--productShelf {
align-items: center;
}
.paginationDot--productShelf {
background-color: #000;
width: 10px !important;
height: 10px !important;
transition: 300ms ease;
}
.paginationDot--productShelf--isActive {
border: 1px solid #000;
background-color: #fff;
width: 17px !important;
height: 17px !important;
}