From 9275b80a2cbaa62cc5cebe0dba6e5290b0108ba5 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Wed, 8 Feb 2023 10:12:53 -0300
Subject: [PATCH] =?UTF-8?q?style:=20corre=C3=A7=C3=A3o=20de=20estilo=20do?=
 =?UTF-8?q?=20Tab=20Layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/css/vtex.tab-layout.css                | 22 +++++++++++++---
 .../vtexTabLayout/vtex.tab-layout.scss        | 26 ++++++++++++++++---
 2 files changed, 42 insertions(+), 6 deletions(-)

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;
           }
         }