feat(Tab): reduce toolbar spacing (#5782)

* refactor: 调整间隙

* refactor: 调整拐角

* refactor: 调整左间隙

* refactor: 增加左侧偏移量

* refactor: 调整不同模式左侧偏移量

* chore: bump version 9.5.3

* refactor: 兼容阿拉伯兄弟

* refactor: 调整工具按钮防止被遮挡

* refactor: 左侧间隙支持响应式

* refactor: 更新工具按钮大小

* refactor: 更新 DevUI 样式

Author: ArgoZhang

src/BootstrapBlazor.Server/wwwroot/css/devui.css

@@ -168,13 +168,21 @@ pre code.hljs {
     --bb-tabs-item-close-button-height: 16px;
 }
 
-.tabs-chrome > .tabs-header,
-.tabs-capsule > .tabs-header {
-    --bb-tabs-item-body-padding: 2px 8px;
-    --bb-tabs-header-height: 26px;
-}
-
 .tabs-chrome {
     --bb-tabs-item-wrap-padding-x: 0.5rem;
     --bb-tabs-item-body-margin-bottom: 2px;
 }
+
+    .tabs-chrome > .tabs-header,
+    .tabs-capsule > .tabs-header {
+        --bb-tabs-item-body-padding: 2px 8px;
+        --bb-tabs-chrome-item-height: 26px;
+    }
+
+        .tabs-chrome > .tabs-header .nav-link-bar .nav-link-bar-button, .tabs-capsule > .tabs-header .nav-link-bar .nav-link-bar-button {
+            padding: 0 .5rem;
+        }
+
+        .tabs-chrome > .tabs-header .of .tabs-nav-scroll, .tabs-chrome > .tabs-header .extend .tabs-nav-scroll {
+            margin-inline-start: -0.75rem;
+        }

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.3-beta01</Version>
+    <Version>9.5.3</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Tab/Tab.razor.scss

@@ -92,7 +92,7 @@
 .tabs-nav-wrap {
     > .nav-link-bar {
         cursor: pointer;
-        font-size: 1rem;
+        font-size: var(--bb-font-size);
         color: var(--bs-body-color);
         width: var(--bb-tabs-bar-width);
         height: 100%;
@@ -582,6 +582,16 @@
 .tabs-chrome > .tabs-header {
     padding: var(--bb-tabs-header-padding);
 
+    .nav-link-bar-button:hover {
+        z-index: 2;
+    }
+
+    .of, .extend {
+        .tabs-nav-scroll {
+            margin-inline-start: -1rem;
+        }
+    }
+
     .tabs-item-wrap {
         overflow: hidden;
         position: relative;
@@ -603,7 +613,7 @@
         }
 
         &:not(:first-child) {
-            margin-left: calc(0px - 2 * var(--bb-tabs-item-wrap-padding-x));
+            margin-inline-start: calc(0px - 2 * var(--bb-tabs-item-wrap-padding-x));
         }
 
         &:not(.active) {
@@ -633,6 +643,14 @@
             }
         }
 
+        &:hover:not(.active) {
+            z-index: 5;
+
+            .tab-corner {
+                display: none;
+            }
+        }
+
         .tabs-item {
             border: none !important;
             border-top-left-radius: 10px;
@@ -682,8 +700,14 @@
 }
 
 .tabs-capsule > .tabs-header {
+    .of, .extend {
+        .tabs-nav-scroll {
+            margin-inline-start: -0.5rem;
+        }
+    }
+
     .tabs-item-wrap {
-        margin-left: calc(var(--bb-tabs-item-wrap-padding-x) / 2);
+        margin-inline-start: calc(var(--bb-tabs-item-wrap-padding-x) / 2);
 
         &.active {
             .tabs-item {

src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss

@@ -603,7 +603,7 @@ $bb-switch-inner-off-text-color: #606266;
 $bb-switch-label-margin-left: 10px;
 
 // Tab
-$bb-tabs-item-padding: 0 1rem;
+$bb-tabs-item-padding: 0 .5rem;
 $bb-tabs-item-height: 40px;
 $bb-tabs-item-active-color: #409eff;
 $bb-tabs-item-hover-color: #409eff;