diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index be481b9..a99f5c8 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -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; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index d1243da..1da458a 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -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; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 186db91..1bc6e7e 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -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; + } + } } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 9715649..d5b93db 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -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; + } + } + } } } \ No newline at end of file