fix: fixed odd trapezoid-like underline on active tab in Tabs compone…

…nt (#2377)
openedx · Jul 21, 2023 · 8a32af8 · 8a32af8
1 parent f029e8e
commit 8a32af8
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 24 deletions.
diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss
@@ -1,16 +1,20 @@
-@mixin nav-tabs-link-focus($border-color) {
+@mixin nav-tabs-link-focus(
+  $border-color,
+  $radius: $nav-tabs-border-radius,
+  $distance: $nav-tabs-link-distance-to-border
+) {
   position: relative;
   outline: 0;
   z-index: map-get($map: $indexes, $key: 1);
 
   &::before {
     content: "";
     position: absolute;
-    top: calc(#{$nav-tabs-link-distance-to-border} * -1);
-    right: calc(#{$nav-tabs-link-distance-to-border} * -1);
-    bottom: calc(#{$nav-tabs-link-distance-to-border} * -1);
-    left: calc(#{$nav-tabs-link-distance-to-border} * -1);
+    top: calc(#{$distance} * -1);
+    right: calc(#{$distance} * -1);
+    bottom: calc(#{$distance} * -1);
+    left: calc(#{$distance} * -1);
     border: solid $nav-tabs-border-width $border-color;
-    border-radius: $nav-tabs-border-radius;
+    border-radius: $radius;
   }
 }
diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss
@@ -9,19 +9,23 @@ $nav-link-font-weight:                             500 !default;
 $nav-tabs-border-color:                            $light-400 !default;
 $nav-tabs-border-width:                            2px !default;
 $nav-tabs-border-radius:                           0 !default;
+$nav-tabs-hover-bg:                                transparent !default;
+$nav-tabs-focus-border-color:                      $nav-tabs-hover-bg !default;
+$nav-tabs-disabled-bg:                             $nav-tabs-hover-bg !default;
 $nav-tabs-link-hover-border-color:                 transparent transparent $nav-tabs-border-color !default;
 $nav-tabs-link-hover-bg:                           $light-400 !default;
 $nav-tabs-link-active-color:                       $primary-500 !default;
+$nav-tabs-link-active-border-color:                $nav-tabs-link-active-color !default;
 $nav-tabs-link-active-bg:                          transparent !default;
-$nav-tabs-link-active-border-color:                transparent transparent $primary-500 !default;
 $nav-tabs-link-focus-border-color:                 $nav-tabs-link-active-color !default;
-$nav-tabs-link-distance-to-border:                 .313rem !default;
-$nav-tabs-link-border-bottom-width:                .188rem !default;
+$nav-tabs-link-distance-to-border:                 4px !default;
 $nav-tabs-link-border-color:                       transparent !default;
+$nav-tabs-link-disabled-border-color:              $nav-tabs-link-border-color !default;
 
 $nav-pills-border-radius:                          $border-radius !default;
 $nav-pills-link-active-color:                      $component-active-color !default;
 $nav-pills-link-active-bg:                         $component-active-bg !default;
+$nav-pills-link-active-border-color:               $white !default;
 $nav-pills-link-border-color:                      $nav-tabs-border-color !default;
 $nav-pills-link-border-width:                      1px !default;
 
@@ -37,7 +41,8 @@ $nav-inverse-pills-link-active-hover-color:        $nav-inverse-pills-link-color
 $nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default;
 $nav-inverse-pills-link-active-focus-hover-bg:     $nav-inverse-pills-link-color !default;
 $nav-inverse-pills-link-active-focus-color:        $nav-inverse-pills-link-active-color !default;
-$nav-inverse-pills-link-active-focus-border-color: $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-focus-border-color: $primary !default;
+$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default;
 $nav-inverse-pills-link-border-width:              $nav-pills-link-border-width !default;
 $nav-inverse-pills-tab-content-color:              $nav-inverse-pills-link-color !default;
 
@@ -48,5 +53,7 @@ $nav-inverse-tabs-link-active-hover-bg:            transparent !default;
 $nav-inverse-tabs-link-focus-bg:                   $nav-inverse-tabs-link-color !default;
 $nav-inverse-tabs-link-active-border-color:        $nav-inverse-tabs-link-color !default;
 $nav-inverse-tabs-link-active-bg:                  $nav-inverse-tabs-link-hover-bg !default;
-$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-link-border-bottom-width !default;
+$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default;
 $nav-inverse-tabs-tab-content-color:               $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-dropdown-border-color:           $nav-inverse-tabs-link-active-hover-bg !default;
+$nav-inverse-tabs-dropdown-bottom-gap:             .4375rem !default;
diff --git a/src/Nav/index.scss b/src/Nav/index.scss
@@ -43,7 +43,7 @@
     border: $nav-pills-link-border-width solid $nav-pills-link-border-color;
 
     &:focus {
-      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius);
     }
 
     &:hover {
@@ -55,10 +55,10 @@
     .nav-item.show .nav-link {
       color: $nav-pills-link-active-color;
       background-color: $nav-pills-link-active-bg;
-      border-color: $nav-pills-link-active-bg;
+      border-color: $nav-pills-link-active-border-color;
 
       &:focus {
-        @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+        @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius);
       }
     }
   }
@@ -97,10 +97,14 @@
         border-color: $nav-inverse-pills-link-active-hover-border-color;
       }
 
-      &:focus:hover {
-        background-color: $nav-inverse-pills-link-active-focus-hover-bg;
-        color: $nav-inverse-pills-link-active-focus-color;
+      &:focus {
         border-color: $nav-inverse-pills-link-active-focus-border-color;
+
+        &:hover {
+          background-color: $nav-inverse-pills-link-active-focus-hover-bg;
+          color: $nav-inverse-pills-link-active-focus-color;
+          border-color: $nav-inverse-pills-link-active-focus-hover-border-color;
+        }
       }
     }
   }
@@ -114,6 +118,14 @@
       color: $nav-inverse-tabs-link-color;
       border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-link-border-bottom-color;
 
+      .dropdown .dropdown-toggle {
+        border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-dropdown-border-color;
+
+        &:hover {
+          border-bottom: none;
+        }
+      }
+
       &:hover {
         background-color: $nav-inverse-tabs-link-hover-bg;
       }
@@ -142,34 +154,45 @@
 .nav-tabs {
   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
+  button.nav-link {
+    border: none;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-link-border-color;
+
+    &.disabled {
+      border-color: $nav-tabs-link-disabled-border-color;
+    }
+  }
+
   .nav-link {
     margin-bottom: calc(#{$nav-tabs-border-width} * -1);
-    border: $nav-tabs-border-width solid $nav-tabs-link-border-color;
-    border-bottom-width: $nav-tabs-link-border-bottom-width;
 
     @include border-top-radius($nav-tabs-border-radius);
 
     &:hover {
-      border-color: $nav-tabs-link-hover-border-color;
       background-color: $nav-tabs-link-hover-bg;
     }
 
+    .dropdown {
+      padding-bottom: .125rem;
+    }
+
     &:focus {
+      border-bottom: $nav-tabs-border-width solid $nav-tabs-focus-border-color;
+
       @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
     }
 
     &.disabled {
       color: $nav-link-disabled-color;
-      background-color: transparent;
-      border-color: transparent;
+      background-color: $nav-tabs-disabled-bg;
     }
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
     color: $nav-tabs-link-active-color;
     background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-link-active-border-color;
 
     &:hover {
       background-color: $nav-tabs-link-hover-bg;

diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss
@@ -14,9 +14,11 @@ $tab-inverse-pills-link-dropdown-toggle-padding-x:          .625rem !default;
 $tab-inverse-pills-link-dropdown-toggle-padding-y:          $spacer !default;
 $tab-inverse-pills-link-dropdown-toggle-focus-bg:           $white !default;
 $tab-inverse-pills-link-dropdown-toggle-focus-color:        $primary-500 !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
 $tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
 $tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
 $tab-inverse-pills-link-dropdown-toggle-active-hover-bg:    $primary-300 !default;
+$tab-inverse-pills-link-dropdown-distance:                  5px !default;
 $tab-inverse-tabs-link-dropdown-toggle-padding-x:           .625rem !default;
 $tab-inverse-tabs-link-dropdown-toggle-padding-y:           $spacer !default;
 $tab-inverse-tabs-link-dropdown-toggle-hover-bg:            transparent !default;
diff --git a/src/Tabs/index.scss b/src/Tabs/index.scss
@@ -64,6 +64,7 @@
   &.nav-inverse-pills .pgn__tab_more.nav-link {
     .dropdown .dropdown-toggle {
       padding: $tab-inverse-pills-link-dropdown-toggle-padding-x $tab-inverse-pills-link-dropdown-toggle-padding-y;
+      border: none;
 
       &:focus {
         background-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg;
@@ -78,12 +79,20 @@
         color: $tab-inverse-pills-link-dropdown-toggle-active-hover-color;
         background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg;
       }
+
+      &:focus {
+        @include nav-tabs-link-focus(
+          $tab-inverse-pills-link-dropdown-toggle-focus-border-color,
+          $nav-tabs-border-radius,
+          $tab-inverse-pills-link-dropdown-distance
+        );
+      }
     }
   }
 
   // Nav tabs
   &.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    padding: .563rem 1rem;
+    padding: .563rem $tab-more-link-dropdown-toggle-padding-y;
   }
 
   // Nav inverse tabs