diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 9881fdb..f19e38b 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -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; } } diff --git a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss index aa5ed62..aaa507b 100644 --- a/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtexTabLayout/vtex.tab-layout.scss @@ -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; } }