diff --git a/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css b/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css index 64d27d70371..0331bffb14d 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css +++ b/src/BootstrapBlazor.Server/Components/Samples/DropdownWidgets.razor.css @@ -1,5 +1,6 @@ .widget-demo { - background-color: #6c757d; + background-color: rgba(var(--bs-body-color-rgb), .12); + border-radius: var(--bs-border-radius); } .dropdown-item-center { diff --git a/src/BootstrapBlazor/Components/DropdownWidget/DropdownWidget.razor.scss b/src/BootstrapBlazor/Components/DropdownWidget/DropdownWidget.razor.scss index 0a664696ba0..e26681b7c03 100644 --- a/src/BootstrapBlazor/Components/DropdownWidget/DropdownWidget.razor.scss +++ b/src/BootstrapBlazor/Components/DropdownWidget/DropdownWidget.razor.scss @@ -8,6 +8,7 @@ --bb-widget-body-max-height: #{$bb-widget-body-max-height}; --bb-widget-item-odd-bg: #{$bb-widget-item-odd-bg}; --bb-widget-footer-padding: #{$bb-widget-footer-padding}; + --bb-widget-footer-bg: #{$bb-widget-footer-bg}; .dropdown-toggle { color: var(--bb-widget-toggle-color); @@ -56,7 +57,7 @@ .dropdown-footer { padding: var(--bb-widget-footer-padding); - background-color: var(--bb-widget-border-color); + background-color: var(--bb-widget-footer-bg); border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); } diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss index 7955da59704..7b1c19c4e7c 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss @@ -237,13 +237,14 @@ $bb-drawer-backdrop-bg: rgba(0, 0, 0, 0.5); // Dropdown $bb-widget-toggle-color: var(--bs-body-color); $bb-widget-toggle-padding: 10px 16px; -$bb-widget-border-color: #dcdfe6; +$bb-widget-border-color: var(--bs-border-color); $bb-widget-badge-font-size: 9px; $bb-widget-badge-top: 5px; $bb-widget-header-padding: 0.5rem 0.625rem; $bb-widget-body-max-height: 300px; -$bb-widget-item-odd-bg: #eef0f3; +$bb-widget-item-odd-bg: rgba(var(--bs-body-color-rgb),.12); $bb-widget-footer-padding: 0.5rem 0.625rem; +$bb-widget-footer-bg: rgba(var(--bs-body-color-rgb),.22); // Empty $bb-empty-image-margin: 1rem 0 .5rem 0;