Browse Source

Add horizontal gap to vertical MudTabs between tabbar and panels

MudBlazor 9 renders mud-tabs-vertical with the tabbar flush against the panels
container, making the active tab indicator visually touch the panel content.
Add 16px padding-inline-start on the panels area (and -end for the reverse layout)
so the tabbar and panels have breathing room.
pull/25393/head
maliming 1 week ago
parent
commit
c68c97da0a
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
  1. 12
      framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css

12
framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css

@ -98,3 +98,15 @@
line-height: 1.4rem;
}
/* Vertical MudTabs (Position="Left"/"Right"): add horizontal gap between the tabbar
and the panels container so the active tab indicator does not visually touch the
panel content. v9 default puts them flush against each other. */
.mud-tabs.mud-tabs-vertical > .mud-tabs-panels {
padding-inline-start: 16px;
}
.mud-tabs.mud-tabs-vertical-reverse > .mud-tabs-panels {
padding-inline-end: 16px;
}

Loading…
Cancel
Save