forked from M3-Academy/challenge-vtex-io
feat(add-card-btn):estilizanod bot
ão de carrinho
This commit is contained in:
parent
5025125e07
commit
feadf14905
@ -70,7 +70,7 @@
|
|||||||
"flex-layout.col#stack": {
|
"flex-layout.col#stack": {
|
||||||
"children": ["stack-layout"],
|
"children": ["stack-layout"],
|
||||||
"props": {
|
"props": {
|
||||||
"width": "60%",
|
"width": "46%",
|
||||||
"rowGap": 10,
|
"rowGap": 10,
|
||||||
"blockClass": "StackLayout"
|
"blockClass": "StackLayout"
|
||||||
}
|
}
|
||||||
@ -98,13 +98,12 @@
|
|||||||
},
|
},
|
||||||
"children": [
|
"children": [
|
||||||
"flex-layout.row#product-name",
|
"flex-layout.row#product-name",
|
||||||
|
"product-identifier.product",
|
||||||
"product-rating-summary",
|
"product-rating-summary",
|
||||||
"flex-layout.row#list-price-savings",
|
"flex-layout.row#list-price-savings",
|
||||||
"flex-layout.row#selling-price",
|
"flex-layout.row#selling-price",
|
||||||
"product-installments",
|
"product-installments",
|
||||||
"product-identifier.product",
|
|
||||||
"sku-selector",
|
"sku-selector",
|
||||||
"product-quantity",
|
|
||||||
"product-assembly-options",
|
"product-assembly-options",
|
||||||
"product-gifts",
|
"product-gifts",
|
||||||
"flex-layout.row#buy-button",
|
"flex-layout.row#buy-button",
|
||||||
@ -119,12 +118,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
"product-identifier.product": {
|
"product-identifier.product": {
|
||||||
"props": {
|
"props": {
|
||||||
"label": "hide", //'default' | 'custom' | 'hide'
|
"label": "hide" //'default' | 'custom' | 'hide'
|
||||||
"customLabel": "teste", // text if label is custom
|
|
||||||
"idField": "skuReferenceId" //'itemId' | 'productId' | 'productReference' | 'skuEan' | 'skuReferenceId'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -145,9 +141,16 @@
|
|||||||
"flex-layout.row#buy-button": {
|
"flex-layout.row#buy-button": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginTop": 4,
|
"marginTop": 4,
|
||||||
"marginBottom": 7
|
"marginBottom": 7,
|
||||||
|
"blockClass":"buy-button"
|
||||||
},
|
},
|
||||||
"children": ["add-to-cart-button"]
|
"children": ["product-quantity","add-to-cart-button"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"add-to-cart-button": {
|
||||||
|
"props": {
|
||||||
|
"text": "ADICIONAR À SACOLA"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-availability": {
|
"flex-layout.row#product-availability": {
|
||||||
|
@ -12,6 +12,24 @@
|
|||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flexRowContent {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.flexRowContent--buy-button {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.flexRowContent--buy-button .stretchChildrenWidth {
|
||||||
|
padding: 0;
|
||||||
|
width: max-content !important;
|
||||||
|
}
|
||||||
|
.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
|
||||||
|
background: black;
|
||||||
|
height: 49px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 534px;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 40em) {
|
@media screen and (min-width: 40em) {
|
||||||
.flexRowContent--menu-link,
|
.flexRowContent--menu-link,
|
||||||
.flexRowContent--main-header {
|
.flexRowContent--main-header {
|
||||||
|
12
styles/css/vtex.product-quantity.css
Normal file
12
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
/*
|
||||||
|
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 */
|
||||||
|
.quantitySelectorTitle {
|
||||||
|
display: none;
|
||||||
|
}
|
@ -2,7 +2,23 @@
|
|||||||
.flexRowContent--main-header {
|
.flexRowContent--main-header {
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
}
|
}
|
||||||
|
.flexRowContent{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
&--buy-button{
|
||||||
|
gap: 10px;
|
||||||
|
.stretchChildrenWidth{
|
||||||
|
padding: 0;
|
||||||
|
width: max-content !important;
|
||||||
|
:global(.vtex-button){
|
||||||
|
background: black;
|
||||||
|
height: 49px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 534px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@media screen and (min-width: 40em) {
|
@media screen and (min-width: 40em) {
|
||||||
.flexRowContent--menu-link,
|
.flexRowContent--menu-link,
|
||||||
.flexRowContent--main-header {
|
.flexRowContent--main-header {
|
||||||
|
3
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
3
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.quantitySelectorTitle{
|
||||||
|
display: none;
|
||||||
|
}
|
@ -1,3 +1,6 @@
|
|||||||
|
.container{
|
||||||
|
|
||||||
|
}
|
||||||
.skuSelectorContainer{
|
.skuSelectorContainer{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
|
Loading…
Reference in New Issue
Block a user