diff --git a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css index 13c8f5157a7..7b075ce5e94 100644 --- a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css @@ -85,8 +85,8 @@ font-weight: var(--bb-font-weight); color: var(--bs-body-color); font-size: var(--bb-sub-font-size); - margin-top: 1rem; - margin-bottom: .5rem; + margin-top: var(--bb-demo-block-margin-top); + margin-bottom: var(--bb-demo-block-margin-bottom); } ::deep .table-cell .progress { diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css index 2ccdc79e512..c6967ec1666 100644 --- a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css @@ -8,7 +8,7 @@ } .pre-code:not(:last-child) { - margin-bottom: 1rem; + margin-bottom: var(--bb-pre-margin-bottom); } .pre-code .loading { @@ -30,7 +30,7 @@ } code { - line-height: 1.8; + line-height: var(--bb-code-line-height); font-size: 0.75rem; padding: 10px 65px 10px 16px; display: block; diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor index 2c7b5039710..c53b4e26292 100644 --- a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor +++ b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor @@ -2,6 +2,13 @@ @attribute [JSModuleAutoLoader("Components/ThemeChooser.razor.js")] @inject IOptionsMonitor WebsiteOption + + @foreach (var css in _currentTheme) + { + + } + +
diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs index 13f01903da4..b2c402f3fb4 100644 --- a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.cs @@ -23,6 +23,8 @@ public partial class ThemeChooser [NotNull] private IStringLocalizer? Localizer { get; set; } + private readonly List _currentTheme = []; + /// /// OnInitialized 方法 /// @@ -36,13 +38,14 @@ protected override void OnInitialized() WebsiteOption.CurrentValue.CurrentTheme = "bootstrap"; } - private async Task OnClickTheme(SelectedItem item) + private void OnClickTheme(SelectedItem item) { + _currentTheme.Clear(); WebsiteOption.CurrentValue.CurrentTheme = item.Value; var theme = WebsiteOption.CurrentValue.Themes.Find(i => i.Key == item.Value); - if (theme != null) + if (theme is { Files: not null }) { - await InvokeVoidAsync("updateTheme", [theme.Files]); + _currentTheme.AddRange(theme.Files); } } diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css index b2d5b345403..72f1d1fe17a 100644 --- a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.css @@ -64,5 +64,5 @@ } ::deep .btn-theme img { - width: 20px; + width: 100%; } diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js index 36809694e2f..460a8bdaa84 100644 --- a/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js +++ b/src/BootstrapBlazor.Server/Components/Components/ThemeChooser.razor.js @@ -9,41 +9,18 @@ export function init(id) { } const themeList = el.querySelector('.theme-list') - const chooser = { el, themeList } - Data.set(id, chooser); + Data.set(id, { el }); EventHandler.on(el, 'click', () => { themeList.classList.toggle('is-open') }) } -export function updateTheme(args) { - const links = document.querySelectorAll('link') - if (links) { - const link = [].slice.call(links).filter(function (item) { - const href = item.getAttribute('href') - return href.indexOf('css/site.css') > -1 - }); - const original = link[0]; - while (original.nextElementSibling && original.nextElementSibling.nodeName === 'LINK') { - original.nextElementSibling.remove() - } - - args.forEach(function (c) { - const link = document.createElement('link') - link.setAttribute('rel', 'stylesheet') - link.setAttribute('href', c) - - insertAfter(original, link) - }); - } -} - export function dispose(id) { - const chooser = Data.get(id) + const theme = Data.get(id) Data.remove(id) - if (chooser) { - EventHandler.off(chooser.el, 'click') + if (theme) { + EventHandler.off(theme.el, 'click') } } diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css index bcf3ca2182d..316279230e2 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css +++ b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css @@ -1,6 +1,4 @@ ::deep .btn-fade { - --bb-button-circle-width: 40px; - --bb-button-circle-height: 40px; opacity: 0.7; box-shadow: var(--bb-layout-button-shadow); transition: opacity .3s linear; diff --git a/src/BootstrapBlazor.Server/appsettings.json b/src/BootstrapBlazor.Server/appsettings.json index 33219794af4..b7b9977604c 100644 --- a/src/BootstrapBlazor.Server/appsettings.json +++ b/src/BootstrapBlazor.Server/appsettings.json @@ -104,7 +104,7 @@ }, { "key": "devui", - "name": "DevUI (制作中)", + "name": "DevUI", "files": [ "./css/devui.css" ] diff --git a/src/BootstrapBlazor.Server/wwwroot/css/devui.css b/src/BootstrapBlazor.Server/wwwroot/css/devui.css index ca6ff7b4527..408c2acdf6b 100644 --- a/src/BootstrapBlazor.Server/wwwroot/css/devui.css +++ b/src/BootstrapBlazor.Server/wwwroot/css/devui.css @@ -1,6 +1,158 @@ :root { - /* --bs-border-radius: 5px; + --bs-border-radius: 4px; --bb-font-size: .75rem; - --bs-nav-link-font-size: .875rem; -*/ + --bs-nav-link-font-size: .75rem; + --bb-sub-font-size: .75rem; + --bb-mb-3: .25rem; + --bb-space: .25rem; + --bb-row-control-padding: 4px; + --bb-header-font-size: 0.875rem; + --bb-padding: 0.1875rem 0.375rem; + --bb-title-font-size: 0.875rem; + --bb-pre-margin-bottom: .5rem; + --bb-row-control-padding: 3px; + --bb-height: 26px; +} + +p { + margin-bottom: var(--bb-mb-3); +} + +code { + --bb-code-line-height: 1.5; +} + +pre code.hljs { + padding: var(--bb-space); +} + +.navbar-header { + --bs-nav-link-font-size: var(--bb-header-font-size); + --bb-font-size: var(--bb-header-font-size); +} + + .navbar-header .bb-g-search { + --bb-global-search-padding: var(--bb-padding); + } + +.mb-3 { + margin-bottom: var(--bb-mb-3) !important; +} + +.btn { + font-size: var(--bb-font-size); + --bs-btn-padding-x: 0.5rem; + --bs-btn-padding-y: 0.1875rem; + --bs-btn-xs-padding-x: 0.3125rem; + --bs-btn-xs-padding-y: 0.0625rem; + --bs-btn-xs-font-size: 0.75rem; + --bs-btn-xl-padding-x: 1.25rem; + --bs-btn-xl-padding-y: 0.8rem; + --bs-btn-xl-font-size: 1.25rem; + --bs-btn-xxl-padding-x: 1.25rem; + --bs-btn-xxl-padding-y: 0.8rem; + --bs-btn-xxl-font-size: 1.5rem; +} + +.btn-circle { + --bb-button-circle-width: 35px; + --bb-button-circle-height: 35px; +} + +.form-check { + --bb-checkbox-label-padding-y: 3px; +} + +.form-control-color { + height: 26px; +} + +.card { + --bs-card-spacer-x: var(--bb-space); + --bs-card-spacer-y: var(--bb-space); + --bs-card-cap-padding-x: var(--bb-space); +} + +.col-form-label { + padding: 4px 2px; +} + +.alert { + --bs-alert-margin-bottom: var(--bb-mb-3); +} + +.datetime-picker { + --bb-dt-picker-input-padding: 3px 33px 3px 12px; + --bb-dt-picker-input-icon-padding: 3px 33px +} + +.demo-block { + --bb-demo-block-margin-top: .5rem; + --bb-demo-block-margin-bottom: .25rem; +} + +.my-3 { + margin: .5rem !important; +} + +.g-3, .gy-3 { + --bs-gutter-y: .25rem; +} + +.g-3, .gx-3 { + --bs-gutter-x: .5rem; +} + +.groupbox { + --bb-groupbox-padding: 1rem .5rem .5rem .5rem +} + +.form-control { + --bb-form-control-padding: var(--bb-padding); +} + +.form-label { + margin-bottom: .25rem; +} + +.input-group-text { + padding: var(--bb-padding); +} + +.input-group > .switch { + --bb-switch-padding: 2px .5rem; +} + +.popover { + --bs-popover-font-size: var(--bb-font-size); +} + +.select { + --bb-select-padding: var(--bb-padding); +} + +.switch { + --bb-switch-padding: 3px 0; +} + +.multiselect { + --bb-multi-select-item-margin-x: 1px; + --bb-multi-select-item-margin-y: 1px; + --bb-multi-select-item-padding: 1px 4px; + --bb-multi-select-min-height: 26px; + --bb-multi-select-max-height: 26px; +} + +.radio-list { + --bb-radio-item-padding: 2px 0.75rem; +} + +.table-container { + --bb-table-td-padding-x: .25rem; + --bb-table-td-padding-y: .25rem; +} + +.tabs { + --bb-tabs-item-height: 29px; + --bb-tabs-body-padding: .5rem; } diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css index 59431b0e001..e88baf3473d 100644 --- a/src/BootstrapBlazor.Server/wwwroot/css/site.css +++ b/src/BootstrapBlazor.Server/wwwroot/css/site.css @@ -37,6 +37,8 @@ --bb-sidebar-body-hover-bg: rgba(175, 184, 193, 0.2); --bb-sidebar-body-drag-hover-bg: rgb(9, 105, 218); --bb-code-bg: #e9ecef; + --bb-mb-3: 1rem; + --bb-pre-margin-bottom: 1rem; --bb-header-select-width: 230px; --bb-header-search-margin-bottom: .5rem; } @@ -56,7 +58,7 @@ html .search-dialog-mask { } h3, h4, h5 { - margin-bottom: 1rem; + margin-bottom: var(--bb-mb-3); } #blazor-error-ui { @@ -224,11 +226,11 @@ code { .code-label + img, .pre-code + img { - margin-bottom: 1rem; + margin-bottom: var(--bb-mb-3); } .code-quest { - margin-bottom: 1rem; + margin-bottom: var(--bb-mb-3); font-weight: bold; } @@ -287,11 +289,11 @@ code { } .card-body > section:not(:first-child) { - margin-top: 1rem; + margin-top: var(--bb-mb-3); } .card-body > section:not(:last-child) { - margin-bottom: 1rem; + margin-bottom: var(--bb-mb-3); } .custom-clock { @@ -301,6 +303,15 @@ code { width: 320px; } +.demo-block { + --bb-demo-block-margin-top: 1rem; + --bb-demo-block-margin-bottom: .5rem; +} + +code { + --bb-code-line-height: 1.6; +} + @media (min-width: 768px) { :root { --bs-header-height: 50px; diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index 9e1d16eaa0a..3eb3a8ca02c 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -1,17 +1,19 @@ .datetime-picker { --bb-dt-picker-bar-color: #{$bb-dt-picker-bar-color}; + --bb-dt-picker-input-padding: #{$bb-dt-form-control-padding}; + --bb-dt-picker-input-icon-padding: #{$bb-dt-form-control-icon-padding}; position: relative; .form-control { cursor: pointer; - --bb-form-control-padding: #{$bb-dt-form-control-padding}; + --bb-form-control-padding: var(--bb-dt-picker-input-padding); &[readonly]:not([disabled]) { background-color: var(--bs-body-bg); } &.has-icon { - --bb-form-control-padding: #{$bb-dt-form-control-icon-padding}; + --bb-form-control-padding: var(--bb-dt-picker-input-icon-padding); } }