diff --git a/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs b/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs index 899f1d4946b..2157303a21d 100644 --- a/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs +++ b/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs @@ -46,7 +46,8 @@ public partial class RadioList .Build(); private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn") - .AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString == item.Value) + .AddClass($"btn-outline-{Color.ToDescriptionString()}") + .AddClass("active", CurrentValueAsString == item.Value) .Build(); /// diff --git a/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss b/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss index f60f1e5e8f3..80b82db9b81 100644 --- a/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss +++ b/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss @@ -1,4 +1,4 @@ -.radio-list { +.radio-list { --bb-radio-item-width: #{$bb-radio-item-width}; --bb-radio-item-padding: #{$bb-radio-item-padding}; --bb-radio-group-item-active-color: #{$bb-radio-group-item-active-color}; @@ -24,7 +24,6 @@ } &.btn-group { - border: var(--bs-border-width) solid var(--bs-border-color); display: inline-flex; flex: 0 !important; flex-wrap: nowrap; @@ -39,12 +38,18 @@ } &.disabled > span { + --bs-btn-hover-color: var(--bs-btn-color); + --bs-btn-active-color: var(--bs-btn-color); opacity: var(--bs-btn-disabled-opacity); &:not(.active) { background-color: var(--bs-secondary-bg); } } + + .btn-outline-info { + --bs-btn-active-color: var(--bb-radio-group-item-active-color); + } } &.btn-group-vertical { diff --git a/test/UnitTest/Components/RadioTest.cs b/test/UnitTest/Components/RadioTest.cs index 3cbc56d2718..2c56a6c8644 100644 --- a/test/UnitTest/Components/RadioTest.cs +++ b/test/UnitTest/Components/RadioTest.cs @@ -232,13 +232,13 @@ public void IsButton_Ok() { pb.Add(a => a.Color, Color.Danger); }); - cut.Contains("btn active bg-danger"); + cut.Contains("btn btn-outline-danger"); cut.InvokeAsync(() => { var btn = cut.Find(".btn"); btn.Click(); - cut.Contains("btn active bg-danger"); + cut.Contains("btn btn-outline-danger active"); }); }