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 {
text-align: center;
width: 100%;
height: 49px;
}
@media (max-width: 377px) {
.flexRow--divButtonBuy {
height: 74px;
}
}
.flexRow--divButtonBuy :global(.vtex-button) {
background-color: black;
border: 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 */
/* Grid breakpoints */
.quantitySelectorContainer {
width: 128px;
height: 49px;
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper--divQuantidade :global(.vtex-numeric-stepper__input) {
.quantitySelectorContainer .quantitySelectorStepper--divQuantidade {
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-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;
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;
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 {
text-align: center;
width: 100%;
height: 49px;
@media (max-width: 377px) {
height: 74px;
}
:global(.vtex-button) {
background-color: black;
border: 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{
// width: 128px;
// height: 49px;
width: 128px;
height: 49px;
.quantitySelectorTitle{
display: none;
}
// .quantitySelectorStepper{
// width: 100%;
// .vtex-numeric-stepper-container{
// width: 100%;
// }
// }
}
.quantitySelectorStepper--divQuantidade{
:global(.vtex-numeric-stepper__input){
border-left: 0px;
border-right: 0px;
}
:global(.vtex-numeric-stepper__plus-button){
color: black;
background-color: white;
}
:global(.vtex-numeric-stepper__minus-button){
color: black;
background-color: white;
.quantitySelectorStepper--divQuantidade{
height: 49px;
:global(.vtex-numeric-stepper-wrapper){
height: 49px;
:global(.vtex-numeric-stepper-container){
height: 49px;
:global(.vtex-numeric-stepper__input){
border-left: 0px;
border-right: 0px;
padding: 0;
height: 100%;
width: 55.3513514px !important ;
border-radius: 0 !important;
}
:global(.vtex-numeric-stepper__plus-button){
color: black;
background-color: white;
height: 49px;
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;
}
}
}
}
}