fix: fixed button outline

openedx · Jun 22, 2023 · 9cef09e · 9cef09e
1 parent 813da66
commit 9cef09e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.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 {
@@ -58,7 +58,7 @@
       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);
       }
     }
   }

diff --git a/src/Nav/_mixins.scss b/src/Nav/_mixins.scss
@@ -1,16 +1,16 @@
-@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/Tabs/Tabs.scss b/src/Tabs/Tabs.scss
@@ -80,11 +80,12 @@
         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);
+      &: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
+        );
       }
     }
   }

diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss
@@ -14,6 +14,7 @@ $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;