forked from M3-Academy/challenge-vtex-io
feat: deixando o projeto responsivo e slick funcional
This commit is contained in:
parent
a4c4be5e68
commit
52dee67913
@ -1,3 +1,10 @@
|
||||
@media (min-width: 1920px) {
|
||||
[class*="html--page-product"] {
|
||||
|
||||
margin-left: 320px;
|
||||
padding-right: 320px;
|
||||
}
|
||||
}
|
||||
[class*="html--pdp-breadcrumb"] {
|
||||
background-color: #fff;
|
||||
}
|
@ -1,5 +1,15 @@
|
||||
{
|
||||
"store.product": {
|
||||
"children": [
|
||||
"html#pageProduct",
|
||||
"newsletter"
|
||||
]
|
||||
|
||||
},
|
||||
"html#pageProduct": {
|
||||
"props": {
|
||||
"blockClass":"page-product"
|
||||
},
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
@ -8,10 +18,11 @@
|
||||
// "flex-layout.row#description",
|
||||
// "flex-layout.row#specifications-title",
|
||||
// "product-specification-group#table",
|
||||
// "shelf.relatedProducts",
|
||||
// "product-questions-and-answers",
|
||||
|
||||
"shelf.relatedProducts",
|
||||
"product-questions-and-answers",
|
||||
"newsletter"
|
||||
"rich-text#titleSlick",
|
||||
"list-context.product-list#demo"
|
||||
]
|
||||
},
|
||||
"html#breadcrumb": {
|
||||
@ -222,7 +233,7 @@
|
||||
"props": {
|
||||
"blockClass": "renderGuia",
|
||||
"tabId": "product1",
|
||||
"label": "Descrição 1",
|
||||
"label": "Descrição",
|
||||
"defaultActiveTab": true
|
||||
}
|
||||
},
|
||||
@ -230,28 +241,28 @@
|
||||
"props": {
|
||||
"blockClass": "renderGuia",
|
||||
"tabId": "product2",
|
||||
"label": "Descrição 2"
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product3": {
|
||||
"props": {
|
||||
"blockClass": "renderGuia",
|
||||
"tabId": "product3",
|
||||
"label": "Descrição 3"
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product4": {
|
||||
"props": {
|
||||
"blockClass": "renderGuia",
|
||||
"tabId": "product4",
|
||||
"label": "Descrição 4"
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product5": {
|
||||
"props": {
|
||||
"blockClass": "renderGuia",
|
||||
"tabId": "product5",
|
||||
"label": "Descrição 5"
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-content#product": {
|
||||
@ -307,20 +318,77 @@
|
||||
"blockClass": "divImgDescription",
|
||||
"width": "50%"
|
||||
},
|
||||
"children": ["image#imgDescription"]
|
||||
"children": ["product-images#imgDescription"]
|
||||
},
|
||||
"image#imgDescription": {
|
||||
"product-images#imgDescription": {
|
||||
"props": {
|
||||
"src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-600-auto?v=637781133812700000&width=600&height=auto&aspect=true 600w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true 800w,https://agenciamagma.vtexassets.com/arquivos/ids/164491-1200-auto?v=637781133812700000&width=1200&height=auto&aspect=true 1200w",
|
||||
"displayMode": "first-image",
|
||||
"blockClass": "imgDescription"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#description": {
|
||||
"props": {
|
||||
"blockClass":"divDescription",
|
||||
"marginBottom": 7
|
||||
},
|
||||
"children": ["flex-layout.col#divImgDescription", "product-description"]
|
||||
},
|
||||
"rich-text#titleSlick": {
|
||||
"props": {
|
||||
"textAlignment": "CENTER",
|
||||
"textPosition": "CENTER",
|
||||
"text": "Você também pode gostar:",
|
||||
"blockClass": "tituloSlick"
|
||||
}
|
||||
},
|
||||
"list-context.product-list#demo": {
|
||||
"blocks": ["product-summary.shelf#demo"],
|
||||
"children": ["slider-layout#demo-product"]
|
||||
},
|
||||
|
||||
"product-summary.shelf#demo": {
|
||||
"children": [
|
||||
"product-summary-image",
|
||||
"product-summary-name",
|
||||
// "product-summary-description",
|
||||
"product-summary-price"
|
||||
// "product-summary-sku-selector",
|
||||
// "product-summary-buy-button"
|
||||
]
|
||||
},
|
||||
|
||||
"slider-layout#demo-product": {
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
"tablet": 3,
|
||||
"phone": 2
|
||||
},
|
||||
"infinite": true,
|
||||
"showNavigationArrows": "desktopOnly",
|
||||
"blockClass": "carousel"
|
||||
}
|
||||
// ,
|
||||
// "children": ["shelf.relatedProducts"]
|
||||
},
|
||||
|
||||
// "rich-text#1": {
|
||||
// "props": {
|
||||
// "text": "Test1"
|
||||
// }
|
||||
// },
|
||||
// "rich-text#2": {
|
||||
// "props": {
|
||||
// "text": "Test2"
|
||||
// }
|
||||
// },
|
||||
// "rich-text#3": {
|
||||
// "props": {
|
||||
// "text": "Test3"
|
||||
// }
|
||||
// },
|
||||
|
||||
"newsletter": {
|
||||
"props": {
|
||||
"blockClass": "newsletter",
|
||||
|
@ -15,11 +15,6 @@
|
||||
line-height: 19px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
.container {
|
||||
margin-left: 360px;
|
||||
}
|
||||
}
|
||||
.container .homeIcon {
|
||||
display: none;
|
||||
}
|
||||
|
@ -1,12 +0,0 @@
|
||||
/*
|
||||
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 */
|
||||
/* Grid breakpoints */
|
||||
.bw1 {
|
||||
background-color: black;
|
||||
}
|
@ -7,13 +7,34 @@
|
||||
*/
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.stretchChildrenWidth {
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.flexRowContent--divDescription {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--divProduct {
|
||||
margin-top: 16px;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0px;
|
||||
padding-left: 40px !important;
|
||||
margin-bottom: 16px;
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.flexRowContent--divProduct {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.flexRowContent--divProduct .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
@ -40,3 +61,8 @@
|
||||
.flexCol--divImgDescription {
|
||||
margin-right: 32px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.flexCol--divImgDescription {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
@ -14,6 +14,7 @@
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.container .productImagesContainer--divImagens {
|
||||
width: 100%;
|
||||
@ -32,6 +33,16 @@
|
||||
max-width: 664px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
|
||||
max-width: 904px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb {
|
||||
margin-right: 16px;
|
||||
padding: 0px;
|
||||
@ -68,10 +79,21 @@
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
}
|
||||
|
||||
.imageElement--imgDescription {
|
||||
.productImageTag--imgDescription {
|
||||
width: 100%;
|
||||
max-width: 664px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
.productImageTag--imgDescription {
|
||||
max-width: 904px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.productImageTag--imgDescription {
|
||||
max-width: 944px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
@ -81,3 +103,9 @@
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
@ -8,17 +8,23 @@
|
||||
/* Media Query M3 */
|
||||
/* Grid breakpoints */
|
||||
.container--estrutura {
|
||||
margin-left: 40px;
|
||||
padding-left: 40px !important;
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
.container--estrutura .listContainer--Guias {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid #B9B9B9;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
padding: 0px 64px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.container--estrutura .listContainer--Guias {
|
||||
flex-direction: column;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
}
|
||||
.container--estrutura .listContainer--Guias .listItem--renderGuia {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -29,12 +35,23 @@
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
color: #BFBFBF;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {
|
||||
padding-left: 0;
|
||||
padding-right: 48px;
|
||||
}
|
||||
}
|
||||
.container--estrutura .listContainer--Guias .listItemActive--renderGuia {
|
||||
border-bottom: 3px solid #000000;
|
||||
background-color: white;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.container--estrutura .listContainer--Guias .listItemActive--renderGuia {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.container--estrutura .listContainer--Guias .listItemActive--renderGuia :global(.vtex-button) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
@ -47,5 +64,11 @@
|
||||
}
|
||||
.container--estrutura .contentContainer--listRender {
|
||||
margin-left: 32px;
|
||||
padding-right: 72px;
|
||||
padding-right: 52px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.container--estrutura .contentContainer--listRender {
|
||||
margin-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
@ -4,9 +4,6 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-left: 40px;
|
||||
@media (min-width: 2500px) {
|
||||
margin-left: 360px;
|
||||
}
|
||||
.homeIcon {
|
||||
display: none;
|
||||
}
|
||||
|
@ -1,9 +1,27 @@
|
||||
|
||||
.stretchChildrenWidth{
|
||||
width: 100% !important;
|
||||
@media (max-width: 1024px) {
|
||||
padding-right: 0px
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--divDescription{
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.flexRowContent--divProduct {
|
||||
margin-top: 16px;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0px;
|
||||
padding-left: 40px !important;
|
||||
margin-bottom: 16px;
|
||||
padding-right: 40px !important;
|
||||
@media (max-width:1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
@ -30,5 +48,8 @@
|
||||
}
|
||||
.flexCol--divImgDescription{
|
||||
margin-right: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4,6 +4,7 @@
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
.productImagesContainer--divImagens {
|
||||
width: 100%;
|
||||
.productImagesGallerySwiperContainer {
|
||||
@ -17,6 +18,12 @@
|
||||
max-height: 100% !important;
|
||||
max-width: 664px;
|
||||
margin-bottom: 16px;
|
||||
@media (min-width:2500px) {
|
||||
max-width: 904px;
|
||||
}
|
||||
@media (max-width:1024px) {
|
||||
max-width: 100% ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -58,9 +65,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.imageElement--imgDescription {
|
||||
.productImageTag--imgDescription {
|
||||
width: 100%;
|
||||
max-width: 664px;
|
||||
@media (min-width:2500px) {
|
||||
max-width: 904px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 944px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.productDescriptionContainer {
|
||||
|
||||
@ -71,5 +85,9 @@
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,30 +1,43 @@
|
||||
.container--estrutura {
|
||||
margin-left: 40px ;
|
||||
padding-left: 40px !important ;
|
||||
padding-right: 40px !important;
|
||||
.listContainer--Guias {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-bottom: 1px solid #B9B9B9;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
padding: 0px 64px;
|
||||
margin-bottom: 36px;
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
.listItem--renderGuia {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
:global(.vtex-button) {
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
color: #BFBFBF;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
@media (max-width: 1024px) {
|
||||
padding-left: 0;
|
||||
padding-right: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listItemActive--renderGuia {
|
||||
border-bottom: 3px solid #000000;
|
||||
background-color: white;
|
||||
@media (max-width: 1024px) {
|
||||
border-bottom: none;
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
font-family: 'Open Sans';
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
@ -37,7 +50,10 @@
|
||||
}
|
||||
.contentContainer--listRender {
|
||||
margin-left: 32px;
|
||||
padding-right: 72px;
|
||||
|
||||
padding-right: 52px;
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user