forked from M3-Academy/challenge-vtex-io
hotfix: revendo a altura e tamanho do button de compra e de quantidade
This commit is contained in:
parent
37c23b0980
commit
29bf4757c6
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user