anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: correção de estilo do Tab Layout

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-02-08 10:12:53 -03:00
parent 35b4c346f3
commit 9275b80a2c
2 changed files with 42 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,6 +33,7 @@
.container--description-block .listContainer {
width: 71.858%;
margin: 0 auto 64px;
column-gap: 7%;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
@ -85,6 +86,7 @@
width: 100%;
height: 38px;
border-radius: 0;
min-height: unset;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block .listContainer .listItem :global(.vtex-button) {
@ -117,6 +119,7 @@
margin: 0;
padding: 0;
height: 38px;
min-height: unset;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive {
@ -136,37 +139,50 @@
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
border-bottom: 2px solid #000000;
width: 100%;
height: 38px;
border-radius: 0;
}
.container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
content: "";
border-bottom: 2px solid #000000;
width: 100%;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
font-size: 24px;
}
.container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
border-bottom: 3px solid #000000;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
content: unset;
border-bottom: unset;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) ::after {
content: unset;
border-bottom: unset;
}
}
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
flex-direction: row;
justify-content: left;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
flex-direction: row;
justify-content: left;
}
}

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

@ -19,6 +19,7 @@
@media (max-width: 2561px) and (min-width: 1920px) {
width: 71.858%;
margin: 0 auto 64px;
column-gap: 7%;
}
@media (max-width: 1025px) and (min-width: 768px) {
flex-direction: column;
@ -59,6 +60,7 @@
width: 100%;
height: 38px;
border-radius: 0;
min-height: unset;
@media (max-width: 2561px) and (min-width: 1920px) {
font-size: 24px;
}
@ -84,6 +86,7 @@
margin: 0;
padding: 0;
height: 38px;
min-height: unset;
@media (max-width: 1025px) and (min-width: 768px) {
margin-bottom: 16px;
}
@ -98,26 +101,43 @@
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
border-bottom: 2px solid $black;
width: 100%;
height: 38px;
border-radius: 0;
::after {
content: "";
border-bottom: 2px solid $black;
width: 100%;
}
@media (max-width: 2561px) and (min-width: 1920px) {
font-size: 24px;
::after {
border-bottom: 3px solid $black;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
border-bottom: unset;
::after {
content: unset;
border-bottom: unset;
}
}
@media (max-width: 768px) and (min-width: 375px) {
border-bottom: unset;
::after {
content: unset;
border-bottom: unset;
}
}
:global(.vtex-button__label) {
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
@media (max-width: 1025px) and (min-width: 768px) {
flex-direction: row;
justify-content: left;
}
@media (max-width: 768px) and (min-width: 375px) {
flex-direction: row;
justify-content: left;
}
}