refactor: 适配紧凑模式

ArgoZhang · ArgoZhang · commit 2906e9554437 · 2025-04-01T10:31:28.000+08:00
diff --git a/src/BootstrapBlazor.Server/wwwroot/css/devui.css b/src/BootstrapBlazor.Server/wwwroot/css/devui.css
@@ -176,4 +176,5 @@ pre code.hljs {
 
 .tabs-chrome {
     --bb-tabs-item-wrap-padding-x: 0.5rem;
+    --bb-tabs-item-body-margin-bottom: 2px;
 }
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
@@ -574,6 +574,7 @@
 .tabs-chrome {
     --bb-tabs-header-padding: 0 0.25rem;
     --bb-tabs-item-wrap-padding-x: 1rem;
+    --bb-tabs-item-body-margin-bottom: 4px;
 }
 
 .tabs-chrome > .tabs-header {
@@ -617,11 +618,14 @@
                     }
                 }
             }
+        }
 
-            &:hover + .tabs-item-wrap {
+        &.active,
+        &:hover {
+            + .tabs-item-wrap {
                 .tabs-item {
                     &:before {
-                        content: none;
+                        content: none !important;
                     }
                 }
             }
@@ -634,7 +638,7 @@
             height: var(--bb-tabs-header-height) !important;
 
             .tabs-item-body {
-                margin-bottom: 4px;
+                margin-bottom: var(--bb-tabs-item-body-margin-bottom);
             }
         }
 

Original file line number	Diff line number	Diff line change
`@@ -176,4 +176,5 @@ pre code.hljs {`
`176`	`176`
`177`	`177`	`.tabs-chrome {`
`178`	`178`	`--bb-tabs-item-wrap-padding-x: 0.5rem;`
	`179`	`+ --bb-tabs-item-body-margin-bottom: 2px;`
`179`	`180`	`}`
Original file line number	Diff line number	Diff line change
`@@ -574,6 +574,7 @@`
`574`	`574`	`.tabs-chrome {`
`575`	`575`	`--bb-tabs-header-padding: 0 0.25rem;`
`576`	`576`	`--bb-tabs-item-wrap-padding-x: 1rem;`
	`577`	`+ --bb-tabs-item-body-margin-bottom: 4px;`
`577`	`578`	`}`
`578`	`579`
`579`	`580`	`.tabs-chrome > .tabs-header {`
`@@ -617,11 +618,14 @@`
`617`	`618`	`}`
`618`	`619`	`}`
`619`	`620`	`}`
	`621`	`+ }`
`620`	`622`
`621`		`- &:hover + .tabs-item-wrap {`
	`623`	`+ &.active,`
	`624`	`+ &:hover {`
	`625`	`+ + .tabs-item-wrap {`
`622`	`626`	`.tabs-item {`
`623`	`627`	`&:before {`
`624`		`- content: none;`
	`628`	`+ content: none !important;`
`625`	`629`	`}`
`626`	`630`	`}`
`627`	`631`	`}`
`@@ -634,7 +638,7 @@`
`634`	`638`	`height: var(--bb-tabs-header-height) !important;`
`635`	`639`
`636`	`640`	`.tabs-item-body {`
`637`		`- margin-bottom: 4px;`
	`641`	`+ margin-bottom: var(--bb-tabs-item-body-margin-bottom);`
`638`	`642`	`}`
`639`	`643`	`}`
`640`	`644`