refactor: refactoring outlines

openedx · Jun 22, 2023 · a5c6392 · a5c6392
1 parent 8e2c29e
commit a5c6392
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 25 deletions.
diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss
@@ -55,7 +55,7 @@
     .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);
@@ -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;
+        }
       }
     }
   }
@@ -118,11 +122,7 @@
         border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-dropdown-border-color;
 
         &:hover {
-          border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-link-hover-bg;
-        }
-
-        &:focus::before {
-          bottom: calc(#{$nav-inverse-tabs-dropdown-bottom-gap} * -1);
+          border-bottom: none;
         }
       }
 
@@ -155,8 +155,8 @@
   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
   button.nav-link {
-    border: $nav-tabs-border-width solid $nav-tabs-link-border-color;
-    border-bottom-width: $nav-tabs-link-border-bottom-width;
+    border: none;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-link-border-color;
 
     &.disabled {
       border-color: $nav-tabs-link-disabled-border-color;
@@ -169,16 +169,18 @@
     @include border-top-radius($nav-tabs-border-radius);
 
     &:hover {
-      background-color: $nav-tabs-link-hover-bg;
+      background-color: $nav-tabs-hover-bg;
     }
 
     &: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;
+      background-color: $nav-tabs-disabled-bg;
     }
   }
 

diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss
@@ -9,20 +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-focus-border-color:                 $nav-tabs-link-active-color !default;
-$nav-tabs-link-distance-to-border:                 .313rem !default;
-$nav-tabs-link-border-bottom-width:                2px !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;
 
@@ -38,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;
 
@@ -49,7 +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/Tabs/Tabs.scss b/src/Tabs/Tabs.scss
@@ -22,6 +22,7 @@
 
     .dropdown .dropdown-toggle {
       display: block;
+      border: none;
     }
   }
 
@@ -78,6 +79,13 @@
         color: $tab-inverse-pills-link-dropdown-toggle-active-hover-color;
         background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg;
       }
+
+      &:focus::before {
+        top: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
+        bottom: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
+        right: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
+        left: calc(#{$tab-inverse-pills-link-dropdown-distance} * -1);
+      }
     }
   }
 
@@ -86,12 +94,6 @@
     .dropdown .dropdown-toggle {
       padding: .563rem $tab-more-link-dropdown-toggle-padding-y;
     }
-
-    &.active .dropdown .dropdown-toggle:hover {
-      border-bottom:
-        $tab-more-link-dropdown-toggle-border-active solid
-        $tab-more-link-dropdown-toggle-border-active-color;
-    }
   }
 
   // Nav inverse tabs

diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss
@@ -10,15 +10,14 @@ $tab-more-link-dropdown-toggle-btn-focus-color:             $tab-more-link-dropd
 $tab-more-link-dropdown-toggle-btn-focus-border-color:      $tab-more-link-dropdown-toggle-focus-bg !default;
 $tab-more-link-dropdown-toggle-active-color:                $tab-more-link-dropdown-toggle-focus-color !default;
 $tab-more-link-dropdown-toggle-hover-color:                 $tab-more-link-dropdown-toggle-focus-bg !default;
-$tab-more-link-dropdown-toggle-border-active:               2px !default;
-$tab-more-link-dropdown-toggle-border-active-color:         $primary !default;
 $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-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;