AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hotfix: revendo a altura e tamanho do button de compra e de quantidade

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-02-03 18:32:16 -03:00
parent 37c23b0980
commit 29bf4757c6
4 changed files with 89 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
styles/css/vtex.flex-layout.css
View File

@ -135,9 +135,26 @@
.flexRow--divButtonBuy { .flexRow--divButtonBuy {
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 49px;
}
@media (max-width: 377px) {
.flexRow--divButtonBuy {
height: 74px;
}
} }
.flexRow--divButtonBuy :global(.vtex-button) { .flexRow--divButtonBuy :global(.vtex-button) {
background-color: black; background-color: black;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
height: 49px;
}
@media (max-width: 377px) {
.flexRow--divButtonBuy :global(.vtex-button) {
height: 74px;
}
.flexRow--divButtonBuy :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
width: 130px;
margin: auto;
}
} }

30
styles/css/vtex.product-quantity.css
View File

@ -7,19 +7,41 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.quantitySelectorContainer {
width: 128px;
height: 49px;
}
.quantitySelectorContainer .quantitySelectorTitle { .quantitySelectorContainer .quantitySelectorTitle {
display: none; display: none;
} }
.quantitySelectorContainer .quantitySelectorStepper--divQuantidade {
.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__input) { height: 49px;
}
.quantitySelectorContainer .quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper-wrapper) {
height: 49px;
}
.quantitySelectorContainer .quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) {
height: 49px;
}
.quantitySelectorContainer .quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
border-left: 0px; border-left: 0px;
border-right: 0px; border-right: 0px;
padding: 0;
height: 100%;
width: 55.3513514px !important;
border-radius: 0 !important;
} }
.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__plus-button) { .quantitySelectorContainer .quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button) {
color: black; color: black;
background-color: white; background-color: white;
height: 49px;
width: 34.9405405px !important;
border-radius: 0 !important;
} }
.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__minus-button) { .quantitySelectorContainer .quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
color: black; color: black;
background-color: white; background-color: white;
height: 49px;
width: 34.9405405px !important;
border-radius: 0 !important;
} }

13
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -113,9 +113,22 @@
.flexRow--divButtonBuy { .flexRow--divButtonBuy {
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 49px;
@media (max-width: 377px) {
height: 74px;
}
:global(.vtex-button) { :global(.vtex-button) {
background-color: black; background-color: black;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
height: 49px;
@media (max-width: 377px) {
height: 74px;
:global(.vtex-button__label){
padding: 0;
width: 130px ;
margin: auto;
}
}
} }
} }

54
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -1,27 +1,39 @@
.quantitySelectorContainer{ .quantitySelectorContainer{
// width: 128px; width: 128px;
// height: 49px; height: 49px;
.quantitySelectorTitle{ .quantitySelectorTitle{
display: none; display: none;
} }
// .quantitySelectorStepper{ .quantitySelectorStepper--divQuantidade{
// width: 100%; height: 49px;
// .vtex-numeric-stepper-container{ :global(.vtex-numeric-stepper-wrapper){
// width: 100%; height: 49px;
// } :global(.vtex-numeric-stepper-container){
// } height: 49px;
} :global(.vtex-numeric-stepper__input){
.quantitySelectorStepper--divQuantidade{ border-left: 0px;
:global(.vtex-numeric-stepper__input){ border-right: 0px;
border-left: 0px; padding: 0;
border-right: 0px; height: 100%;
} width: 55.3513514px !important ;
:global(.vtex-numeric-stepper__plus-button){ border-radius: 0 !important;
color: black; }
background-color: white; :global(.vtex-numeric-stepper__plus-button){
} color: black;
:global(.vtex-numeric-stepper__minus-button){ background-color: white;
color: black; height: 49px;
background-color: white; width: 34.9405405px !important;
border-radius: 0 !important;
}
:global(.vtex-numeric-stepper__minus-button){
color: black;
background-color: white;
height: 49px;
width: 34.9405405px !important;
border-radius: 0 !important;
}
}
}
} }
} }