diff --git a/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss b/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss index 2c8b7b4368a..5a5a4381135 100644 --- a/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss +++ b/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss @@ -4,46 +4,46 @@ --bb-radio-group-item-active-color: #{$bb-radio-group-item-active-color}; display: flex; flex-wrap: wrap; -} - .radio-list .form-check { + .form-check { width: var(--bb-radio-item-width); } - .radio-list.is-vertical { + &.is-vertical { flex-direction: column; height: auto; line-height: unset; - } - .radio-list.is-vertical .form-check:not(:last-child) { + .form-check:not(:last-child) { margin-bottom: .5rem; } + } - .radio-list.form-control { + &.form-control { padding: var(--bb-radio-item-padding); } - .radio-list.btn-group { - border: 1px solid var(--bs-secondary); + &.btn-group { + border: var(--bs-border-width) solid var(--bs-border-color); display: inline-flex; flex: 0 !important; flex-wrap: nowrap; white-space: nowrap; - } - .radio-list.btn-group > .btn { + > .btn { white-space: nowrap; } - .radio-list.btn-group .active { + .active { color: var(--bb-radio-group-item-active-color); } - .radio-list.btn-group.disabled > span { + &.disabled > span { opacity: var(--bs-btn-disabled-opacity); - } - .radio-list.btn-group.disabled > span:not(.active) { + &:not(.active) { background-color: var(--bs-secondary-bg); } + } + } +} diff --git a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss index 108a9ac356e..10236f50043 100644 --- a/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss +++ b/src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss @@ -1,8 +1,8 @@ .multi-select { --bb-multi-select-min-height: 35px; --bb-multi-select-max-height: 65px; - --bb-multi-select-button-bg-color: #e9ecef; - --bb-multi-select-button-hover-bg-color: #dee2e6; + --bb-multi-select-button-bg-color: rgba(var(--bs-body-color-rgb), .15); + --bb-multi-select-button-hover-bg-color: rgba(var(--bs-body-color-rgb), .3); --bb-multi-select-item-margin-x: 3px; --bb-multi-select-item-margin-y: 3px; --bb-multi-select-item-padding: 2px 6px; diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss index 9a1fa151215..c6b2c311951 100644 --- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss +++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss @@ -472,6 +472,16 @@ $bb-select-search-height: 60px; $bb-select-append-width: 30px; $bb-select-append-color: #c0c4cc; +// Multiple-Select +$bb-multi-select-min-height: 35px; +$bb-multi-select-max-height: 65px; +$bb-multi-select-button-bg-color: rgba(var(--bs-body-color-rgb), .12); +$bb-multi-select-button-hover-bg-color: rgba(var(--bs-body-color-rgb), .3); +$bb-multi-select-item-margin-x: 3px; +$bb-multi-select-item-margin-y: 3px; +$bb-multi-select-item-padding: 2px 6px; +$bb-multi-select-item-max-width: 130px; + // Skeleton $bb-skeleton-table-header-bg: rgba(var(--bs-body-color-rgb), 0.25); $bb-skeleton-striped-row-bg: rgba(var(--bs-body-color-rgb), 0.05);