浏览代码

fixed vertical nav-tabs border style

REJack 5 年之前
父节点
当前提交
c1207646f4
共有 1 个文件被更改,包括 10 次插入5 次删除
  1. 10 5
      build/scss/_navs.scss

+ 10 - 5
build/scss/_navs.scss

@@ -26,34 +26,39 @@
   border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
 
   .nav-link {
+    border-bottom-left-radius: $nav-tabs-border-radius;
+    border-top-right-radius: 0;
     margin-right: -$nav-tabs-border-width;
 
     @include hover-focus {
-      border-color: $gray-200 $nav-tabs-border-color $gray-200 $gray-200;
+      border-color: $gray-200 transparent $gray-200 $gray-200;
     }
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    border-color: $gray-300 $nav-tabs-link-active-bg $gray-300 $gray-300;
+    border-color: $gray-300 transparent $gray-300 $gray-300;
   }
 
   &.nav-tabs-right {
     border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
     border-right: 0;
 
-
     .nav-link {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: $nav-tabs-border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: $nav-tabs-border-radius;
       margin-left: -$nav-tabs-border-width;
 
       @include hover-focus {
-        border-color: $gray-200 $gray-200 $gray-200 $nav-tabs-border-color;
+        border-color: $gray-200 $gray-200 $gray-200 transparent;
       }
     }
 
     .nav-link.active,
     .nav-item.show .nav-link {
-      border-color: $gray-300 $gray-300 $gray-300 $nav-tabs-link-active-bg;
+      border-color: $gray-300 $gray-300 $gray-300 transparent;
     }
   }
 }