SauloKleinNery/challenge-vtex-io-saulo-klein
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Ajusta descrição do produto mobile com largura máxima

Browse Source
This commit is contained in:
Saulo Klein Nery 2023-02-10 14:28:29 -03:00
parent 78050fe264
commit 1da7537a67
2 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/css/vtex.tab-layout.css
View File

@ -39,6 +39,11 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
@media only screen and (max-width: 1024px) {
.container--tabLayout .listContainer .listItem :global(.vtex-button) {
width: 100%;
}
}
.container--tabLayout .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { .container--tabLayout .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
@ -48,6 +53,11 @@
border: none; border: none;
padding: 0 !important; padding: 0 !important;
} }
@media only screen and (max-width: 1024px) {
.container--tabLayout .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
justify-content: flex-start;
}
}
@media only screen and (min-width: 1025px) { @media only screen and (min-width: 1025px) {
.container--tabLayout .listContainer .listItemActive { .container--tabLayout .listContainer .listItemActive {
border-bottom: 2px solid #000; border-bottom: 2px solid #000;

9
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -26,15 +26,22 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
@include mq(lg, max) {
width: 100%;
}
:global(.vtex-button__label) { :global(.vtex-button__label) {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
color: $color-gray14; color: $color-gray14;
text-transform: capitalize; text-transform: capitalize;
border: none; border: none;
padding: 0 !important; padding: 0 !important;
@include mq(lg, max) {
justify-content: flex-start;
}
} }
} }
} }