feat: created mores styles and fix in little styles

This commit is contained in:
Henrique Santos Santana 2023-02-09 08:50:43 -03:00
parent 9847452543
commit 924a7c6471
8 changed files with 76 additions and 4 deletions

View File

@ -172,7 +172,7 @@
width: 100%; width: 100%;
} }
.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) { .flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) {
width: 99%; width: 96%;
} }
.flexRow--productSpecifications { .flexRow--productSpecifications {
@ -199,6 +199,11 @@
border: none; border: none;
} }
} }
@media screen and (min-width: 1921px) {
.flexRowContent--productSpecificationItemContainer {
margin-top: 64px;
}
}
.flexRow--productShelf { .flexRow--productShelf {
padding: 0 40px; padding: 0 40px;

View File

@ -49,6 +49,23 @@
.container { .container {
text-align: center; text-align: center;
max-width: none !important;
margin: 0 4px;
}
@media screen and (min-width: 769px) {
.container {
max-width: 291.2px !important;
}
}
@media screen and (min-width: 1025px) {
.container {
max-width: 314.4px !important;
}
}
@media screen and (min-width: 1921px) {
.container {
max-width: 434.4px !important;
}
} }
.priceContainer { .priceContainer {

View File

@ -41,6 +41,17 @@
.sliderLayoutContainer--productShelf { .sliderLayoutContainer--productShelf {
width: 100%; width: 100%;
padding: 0 19.2px;
}
@media screen and (min-width: 769px) {
.sliderLayoutContainer--productShelf {
padding: 23.2px;
}
}
@media screen and (min-width: 1025px) {
.sliderLayoutContainer--productShelf {
padding: 0 27.2px;
}
} }
.sliderArrows--productShelf { .sliderArrows--productShelf {

View File

@ -8,7 +8,7 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.listContainer--ProductSpecificationTabList { .listContainer--ProductSpecificationTabList {
justify-content: space-around; justify-content: space-between;
border-bottom: 1px solid #b9b9b9; border-bottom: 1px solid #b9b9b9;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@ -16,6 +16,11 @@
border-top: 1px solid #b9b9b9; border-top: 1px solid #b9b9b9;
} }
} }
@media screen and (min-width: 1025px) {
.listContainer--ProductSpecificationTabList {
padding: 0 64px;
}
}
.listContainer--ProductSpecificationTabList .listItem { .listContainer--ProductSpecificationTabList .listItem {
position: relative; position: relative;
padding: 0; padding: 0;

View File

@ -165,7 +165,7 @@
} }
:global(.vtex-add-to-cart-button-0-x-buttonText) { :global(.vtex-add-to-cart-button-0-x-buttonText) {
width: 99%; width: 96%;
} }
} }
} }
@ -191,6 +191,10 @@
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
border: none; border: none;
} }
@media screen and (min-width: 1921px) {
margin-top: 64px;
}
} }
.flexRow--productShelf { .flexRow--productShelf {

View File

@ -41,6 +41,22 @@
.container { .container {
text-align: center; text-align: center;
max-width: none !important;
margin: 0 4px;
@media screen and (min-width: 769px) {
max-width: 291.2px !important;
}
@media screen and (min-width: 1025px) {
max-width: 314.4px !important;
}
@media screen and (min-width: 1921px) {
max-width: 434.4px !important;
}
} }
.priceContainer { .priceContainer {

View File

@ -32,6 +32,16 @@
.sliderLayoutContainer--productShelf { .sliderLayoutContainer--productShelf {
width: 100%; width: 100%;
padding: 0 19.2px;
@media screen and (min-width: 769px) {
padding: 23.2px;
}
@media screen and (min-width: 1025px) {
padding: 0 27.2px;
}
} }
.sliderArrows--productShelf { .sliderArrows--productShelf {

View File

@ -1,11 +1,15 @@
.listContainer--ProductSpecificationTabList { .listContainer--ProductSpecificationTabList {
justify-content: space-around; justify-content: space-between;
border-bottom: 1px solid #b9b9b9; border-bottom: 1px solid #b9b9b9;
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
border-top: 1px solid #b9b9b9; border-top: 1px solid #b9b9b9;
} }
@media screen and (min-width: 1025px) {
padding: 0 64px;
}
.listItem { .listItem {
position: relative; position: relative;
padding: 0; padding: 0;