feat:modifica botoes de tamanho do produto
This commit is contained in:
parent
a0a2843b89
commit
41964c97ff
@ -15,7 +15,6 @@
|
|||||||
"postreleasy": "vtex publish --verbose"
|
"postreleasy": "vtex publish --verbose"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"agenciamagma.store-theme": "5.x",
|
|
||||||
"vtex.store": "2.x",
|
"vtex.store": "2.x",
|
||||||
"vtex.store-header": "2.x",
|
"vtex.store-header": "2.x",
|
||||||
"vtex.product-summary": "2.x",
|
"vtex.product-summary": "2.x",
|
||||||
|
@ -108,7 +108,6 @@
|
|||||||
"product-separator",
|
"product-separator",
|
||||||
"product-identifier.product",
|
"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",
|
||||||
@ -134,10 +133,12 @@
|
|||||||
|
|
||||||
"flex-layout.row#buy-button": {
|
"flex-layout.row#buy-button": {
|
||||||
"props": {
|
"props": {
|
||||||
|
"blockClass": "button-container",
|
||||||
"marginTop": 4,
|
"marginTop": 4,
|
||||||
|
"preventHorizontalStretch": true,
|
||||||
"marginBottom": 7
|
"marginBottom": 7
|
||||||
},
|
},
|
||||||
"children": ["add-to-cart-button"]
|
"children": ["product-quantity", "add-to-cart-button"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-availability": {
|
"flex-layout.row#product-availability": {
|
||||||
|
@ -19,6 +19,15 @@
|
|||||||
.container .homeLink {
|
.container .homeLink {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.container .homeLink .link--1 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.container .arrow--1 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.container .arrow--1 .link--1 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
.container .arrow--1 .caretIcon {
|
.container .arrow--1 .caretIcon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
@ -12,7 +12,20 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
.flexRowContent .flexColChild .product-identifier--productReference {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
.product-images {
|
.product-images {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-identifier__label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--button-container :global(.vtex-button) {
|
||||||
|
background-color: #000;
|
||||||
|
border: 0;
|
||||||
|
height: 50px;
|
||||||
|
}
|
17
styles/css/vtex.oriduct-price.css
Normal file
17
styles/css/vtex.oriduct-price.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/*
|
||||||
|
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@400;500;600;700&display=swap");
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.currencyInteger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.savings {
|
||||||
|
display: none;
|
||||||
|
}
|
@ -1,79 +1,32 @@
|
|||||||
.listPrice {
|
/*
|
||||||
color: #727273;
|
0 - 600PX: Phone
|
||||||
margin-bottom: .25rem;
|
600 - 900px: Table portrait
|
||||||
font-size: 1rem;
|
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@400;500;600;700&display=swap");
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.listPrice,
|
||||||
|
.savings {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sellingPrice {
|
.sellingPrice {
|
||||||
color: #3f3f40;
|
font-family: "Open Sans", sans-serif;
|
||||||
font-size: 1.25rem;
|
font-style: normal;
|
||||||
}
|
|
||||||
|
|
||||||
.sellingPriceValue {
|
|
||||||
font-size: 2.25rem;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.installments {
|
.installments {
|
||||||
color: #727273;
|
font-family: "Open Sans", sans-serif;
|
||||||
margin-bottom: 1rem;
|
font-style: normal;
|
||||||
}
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
.savings {
|
line-height: 22px;
|
||||||
font-weight: 500;
|
color: #929292;
|
||||||
color: #79B03A;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sellingPriceValue--summary {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #2E2E2E;
|
|
||||||
}
|
|
||||||
|
|
||||||
.savings--summary {
|
|
||||||
background: #8BC34A;
|
|
||||||
border-radius: 1000px;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
vertical-align: baseline;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.savings-discount--summary {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
vertical-align: baseline;
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listPrice--summary {
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.installments--summary {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.savings--summaryPercentage {
|
|
||||||
background: #0f3e99;
|
|
||||||
border-radius: 1000px;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.savingsPercentage--summaryPercentage {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 600;
|
|
||||||
vertical-align: baseline;
|
|
||||||
color: #FFFFFF;
|
|
||||||
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
|
|
||||||
}
|
}
|
41
styles/css/vtex.product-quantity.css
Normal file
41
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/*
|
||||||
|
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@400;500;600;700&display=swap");
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.quantitySelectorContainer {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.quantitySelectorContainer .quantitySelectorTitle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__input),
|
||||||
|
:global(.vtex-numeric-stepper__plus-button),
|
||||||
|
:global(.vtex-numeric-stepper__minus-button) {
|
||||||
|
height: 50px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__input) {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-add-to-cart-button-0-x-buttonText) {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
:global(.vtex-add-to-cart-button-0-x-buttonText)::before {
|
||||||
|
content: "ADICIONAR Á SACOLA";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
@ -11,6 +11,9 @@
|
|||||||
.quatitySelectorContainer {
|
.quatitySelectorContainer {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
.quatitySelectorContainer .quantitySelectorTitle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.quatitySelectorContainer .quatitySelectorStepper {
|
.quatitySelectorContainer .quatitySelectorStepper {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
@ -36,6 +36,39 @@
|
|||||||
color: #000;
|
color: #000;
|
||||||
border: 2px;
|
border: 2px;
|
||||||
}
|
}
|
||||||
|
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::before {
|
||||||
|
content: "OUTROS TAMANHOS:";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.container .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::before {
|
||||||
|
content: "OUTRAS CORES: ";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
.container .skuSelectorContainer .skuSelectorInternalBox {
|
.container .skuSelectorContainer .skuSelectorInternalBox {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@ -7,8 +7,15 @@
|
|||||||
}
|
}
|
||||||
.homeLink {
|
.homeLink {
|
||||||
display: none;
|
display: none;
|
||||||
|
.link--1 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.arrow--1 {
|
.arrow--1 {
|
||||||
|
padding-left: 0;
|
||||||
|
.link--1 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
.caretIcon {
|
.caretIcon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
24
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
24
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.flexRowContent {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
.flexColChild {
|
||||||
|
.product-identifier--productReference {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.product-images {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-identifier__label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--button-container {
|
||||||
|
:global(.vtex-button) {
|
||||||
|
background-color: #000;
|
||||||
|
border: 0;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
21
styles/sass/pages/product/vtex.product-price.scss
Normal file
21
styles/sass/pages/product/vtex.product-price.scss
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.listPrice,
|
||||||
|
.savings {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sellingPrice {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.installments {
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
30
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
30
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
.quantitySelectorContainer {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
.quantitySelectorTitle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__input),
|
||||||
|
:global(.vtex-numeric-stepper__plus-button),
|
||||||
|
:global(.vtex-numeric-stepper__minus-button) {
|
||||||
|
height: 50px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__input) {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-add-to-cart-button-0-x-buttonText) {
|
||||||
|
font-size: 0;
|
||||||
|
&::before {
|
||||||
|
content: "ADICIONAR Á SACOLA";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
@ -1,9 +0,0 @@
|
|||||||
.quatitySelectorContainer {
|
|
||||||
border: 0;
|
|
||||||
.quatitySelectorStepper {
|
|
||||||
border: 0;
|
|
||||||
.hideDecorator {
|
|
||||||
background-color: blueviolet;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -26,6 +26,46 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.skuSelectorSubcontainer--tamanho {
|
||||||
|
.skuSelectorName {
|
||||||
|
font-size: 0;
|
||||||
|
&::before {
|
||||||
|
content: "OUTROS TAMANHOS:";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skuSelectorSubcontainer--cor {
|
||||||
|
.skuSelectorImageValue {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skuSelectorNameSeparator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skuSelectorName {
|
||||||
|
font-size: 0;
|
||||||
|
&::before {
|
||||||
|
content: "OUTRAS CORES: ";
|
||||||
|
font-family: "Open Sans", sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.skuSelectorInternalBox {
|
.skuSelectorInternalBox {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1,7 +0,0 @@
|
|||||||
.flexRowContent {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.product-images {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user