forked from M3-Academy/challenge-vtex-io
Merge pull request 'development' (#18) from development into feature/productPurchase
Reviewed-on: #18
This commit is contained in:
commit
35b8f303a9
@ -9,7 +9,10 @@
|
||||
"list-context.product-list#shelf",
|
||||
"newsletter",
|
||||
"product-questions-and-answers"
|
||||
]
|
||||
],
|
||||
"props": {
|
||||
"blockClass": "productAll"
|
||||
}
|
||||
},
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
@ -126,7 +129,6 @@
|
||||
"flex-layout.row#cart",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
|
||||
"availability-subscriber",
|
||||
"shipping-simulator"
|
||||
]
|
||||
@ -135,7 +137,7 @@
|
||||
"props": {
|
||||
"blockClass": "cart"
|
||||
},
|
||||
"children": ["product-quantity", "flex-layout.row#buy-button"]
|
||||
"children": ["product-quantity#qtd", "flex-layout.row#buy-button"]
|
||||
},
|
||||
"flex-layout.row#product-name": {
|
||||
"props": {
|
||||
@ -150,11 +152,20 @@
|
||||
"showValueNameForImageVariation": true
|
||||
}
|
||||
},
|
||||
|
||||
"product-quantity#qtd": {
|
||||
"props": {
|
||||
"width": "25%",
|
||||
"size": "regular",
|
||||
"blockClass": "buyQtd"
|
||||
}
|
||||
//"children": ["product-quantity"]
|
||||
},
|
||||
"flex-layout.row#buy-button": {
|
||||
"props": {
|
||||
"width": "80%",
|
||||
"blockClass": "buyButton"
|
||||
"blockClass": "buyButton",
|
||||
"marginTop": "4",
|
||||
"marginBottom": "7",
|
||||
"paddingRight": "0"
|
||||
},
|
||||
|
||||
"children": ["add-to-cart-button"]
|
||||
@ -200,7 +211,13 @@
|
||||
}
|
||||
},
|
||||
"tab-list#product": {
|
||||
"children": ["tab-list.item#product1", "tab-list.item#product2"]
|
||||
"children": [
|
||||
"tab-list.item#product1",
|
||||
"tab-list.item#product2",
|
||||
"tab-list.item#product3",
|
||||
"tab-list.item#product4",
|
||||
"tab-list.item#product5"
|
||||
]
|
||||
},
|
||||
"tab-list.item#product1": {
|
||||
"props": {
|
||||
@ -215,8 +232,32 @@
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product3": {
|
||||
"props": {
|
||||
"tabId": "product3",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product4": {
|
||||
"props": {
|
||||
"tabId": "product4",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-list.item#product5": {
|
||||
"props": {
|
||||
"tabId": "product5",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
"tab-content#product": {
|
||||
"children": ["tab-content.item#product1", "tab-content.item#product2"]
|
||||
"children": [
|
||||
"tab-content.item#product1",
|
||||
"tab-content.item#product2",
|
||||
"tab-content.item#product3",
|
||||
"tab-content.item#product4",
|
||||
"tab-content.item#product5"
|
||||
]
|
||||
},
|
||||
"tab-content.item#product1": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
@ -225,17 +266,47 @@
|
||||
}
|
||||
},
|
||||
"tab-content.item#product2": {
|
||||
"children": ["product-description"],
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product2"
|
||||
}
|
||||
},
|
||||
"tab-content.item#product3": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product3"
|
||||
}
|
||||
},
|
||||
"tab-content.item#product4": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product4"
|
||||
}
|
||||
},
|
||||
"tab-content.item#product5": {
|
||||
"children": ["product-images#descricao", "product-description"],
|
||||
"props": {
|
||||
"tabId": "product5"
|
||||
}
|
||||
},
|
||||
"list-context.product-list#shelf": {
|
||||
"blocks": ["product-summary.shelf#shelf"],
|
||||
"children": ["slider-layout#shelf-products"]
|
||||
"children": ["rich-text#shelf", "slider-layout#shelf-products"]
|
||||
},
|
||||
"rich-text#shelf": {
|
||||
"props": {
|
||||
"textAlignment": "CENTER",
|
||||
"textPosition": "CENTER",
|
||||
"text": "Você também pode gostar: ",
|
||||
"blockClass": "shelfTitle"
|
||||
}
|
||||
},
|
||||
"product-summary.shelf#shelf": {
|
||||
"children": ["product-summary-image#shelf", "product-summary-price"]
|
||||
"children": [
|
||||
"product-summary-image#shelf",
|
||||
"product-summary-name",
|
||||
"product-summary-price"
|
||||
]
|
||||
},
|
||||
"slider-layout#shelf-products": {
|
||||
"props": {
|
||||
|
||||
@ -8,10 +8,27 @@
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.homeIcon {
|
||||
.container {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.container .homeIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homeLink::after {
|
||||
content: "Home";
|
||||
.container .Link,
|
||||
.container .term {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .homeLink::after {
|
||||
content: "Home";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
@ -8,3 +8,11 @@
|
||||
/* Media Query M3 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.container--shelfTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #575757;
|
||||
}
|
||||
@ -1,31 +1,22 @@
|
||||
/*
|
||||
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;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
/*.sliderLayoutContainer {
|
||||
margin: 0 40px 0 40px;
|
||||
.sliderRightArrow {
|
||||
right: 100px;
|
||||
}
|
||||
}*/
|
||||
.sliderLayoutContainer {
|
||||
width: 95%;
|
||||
padding: 0 16px 0 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sliderLayoutContainer--carousel {
|
||||
background-color: #F0F0F0;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.sliderTrackContainer {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.paginationDotsContainer {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.layoutContainer--shelf {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 96rem;
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.slide--shelf {
|
||||
margin-bottom: 25px;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
@ -158,3 +158,92 @@
|
||||
left: 70px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.productDescriptionContainer .productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
.productDescriptionContainer .productDescriptionText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
margin-top: 64px;
|
||||
}
|
||||
.newsletter .container {
|
||||
display: flex;
|
||||
height: 175px;
|
||||
padding: 0 0 0 0;
|
||||
background: black;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.newsletter .container .label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0;
|
||||
}
|
||||
.newsletter .container .label::before {
|
||||
content: "Assine nossa Newsletter";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.newsletter .container .label::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
}
|
||||
.newsletter .container :global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 774px;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
}
|
||||
.newsletter .container :global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
.newsletter .container :global(.vtex-button) {
|
||||
position: relative;
|
||||
left: 145px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
}
|
||||
.newsletter .container :global(.vtex-button):hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
.newsletter .container :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -1,4 +1,64 @@
|
||||
/*
|
||||
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;500;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.listContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.listContainer .listItem {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.listContainer .listItem :global(.vtex-button) {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
text-transform: initial;
|
||||
}
|
||||
.listContainer .listItemActive :global(.vtex-button) {
|
||||
background: white;
|
||||
border-bottom: 2px solid #000000;
|
||||
border-radius: 0;
|
||||
}
|
||||
.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
text-transform: initial;
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
}
|
||||
@ -1,8 +1,26 @@
|
||||
.homeIcon {
|
||||
.container {
|
||||
margin-left: 40px;
|
||||
.homeIcon {
|
||||
display: none;
|
||||
}
|
||||
.homeLink {
|
||||
}
|
||||
.Link,
|
||||
.term {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
.homeLink {
|
||||
&::after {
|
||||
content: "Home";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
.container--shelfTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
|
||||
color: #575757;
|
||||
}
|
||||
12
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
12
styles/sass/pages/product/vtex.slider-layout.scss
Normal file
@ -0,0 +1,12 @@
|
||||
/*.sliderLayoutContainer {
|
||||
margin: 0 40px 0 40px;
|
||||
.sliderRightArrow {
|
||||
right: 100px;
|
||||
}
|
||||
}*/
|
||||
.sliderLayoutContainer {
|
||||
width: 95%;
|
||||
padding: 0 16px 0 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -159,3 +159,96 @@
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//Estilização da descrição do produto
|
||||
.productDescriptionContainer {
|
||||
.productDescriptionTitle {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #575757;
|
||||
}
|
||||
.productDescriptionText {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
margin-top: 64px;
|
||||
.container {
|
||||
display: flex;
|
||||
height: 175px;
|
||||
padding: 0 0 0 0;
|
||||
background: black;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0;
|
||||
&::before {
|
||||
content: "Assine nossa Newsletter";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
&::after {
|
||||
content: "Receba ofertas e novidades por e-mail";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
:global(.vtex-input-prefix__group) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 774px;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #929292;
|
||||
}
|
||||
:global(.vtex-styleguide-9-x-input) {
|
||||
background: transparent;
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
:global(.vtex-button) {
|
||||
position: relative;
|
||||
left: 145px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 3px solid #bfbfbf;
|
||||
&:hover {
|
||||
border-bottom: 5px solid #bfbfbf;
|
||||
}
|
||||
|
||||
:global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
54
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
54
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,54 @@
|
||||
.container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.listContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #b9b9b9;
|
||||
margin-bottom: 32px;
|
||||
.listItem {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
:global(.vtex-button) {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
:global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listItemActive {
|
||||
:global(.vtex-button) {
|
||||
background: white;
|
||||
border-bottom: 2px solid #000000;
|
||||
border-radius: 0;
|
||||
:global(.vtex-button__label) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user