From 0a835e88ddaf854885f52f1a54ed1e5a5e6b592d Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 23 May 2024 13:08:36 +0800 Subject: [PATCH] feat(RibbonTab): update style sheet use scss (#3560) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: 更新样式 * style: 重构样式 * style: 精简代码 * style: 调整 content 样式 * refactor: 更新 Group 样式 * style: 更新 tab-commands 样式 * style: 更新 ribbon 样式 * style: 更新收起样式 * refactor: 重构代码 * style: 更新箭头图标样式 * chore: bump version 8.0.7 * chore: bump version 8.0.4 * chore: 更新图标扩展库 * chore: bump version 8.5.9-beta04 * chore: 更新 Dock 扩展包 --- .../BootstrapBlazor.Server.csproj | 6 +- src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- .../Components/RibbonTab/RibbonTab.razor.cs | 2 +- .../Components/RibbonTab/RibbonTab.razor.scss | 306 ++++++++---------- ...trapBlazor.BootstrapIcon.Extensions.csproj | 2 +- .../DefaultIcon.cs | 2 +- ...rapBlazor.MaterialDesign.Extensions.csproj | 2 +- .../DefaultIcon.cs | 2 +- 8 files changed, 140 insertions(+), 184 deletions(-) diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 775b9e78bdc..e9ed0bbbf64 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -33,11 +33,11 @@ - + - + @@ -47,7 +47,7 @@ - + diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index e8e0f19694e..e53a72e9ef6 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 8.5.9-beta03 + 8.5.9-beta04 diff --git a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs index b461d335d1b..d5da4203b47 100644 --- a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs +++ b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs @@ -145,7 +145,7 @@ protected override void OnParametersSet() RibbonArrowDownIcon ??= IconTheme.GetIconByKey(ComponentIcons.RibbonTabArrowDownIcon); RibbonArrowPinIcon ??= IconTheme.GetIconByKey(ComponentIcons.RibbonTabArrowPinIcon); - Items ??= Enumerable.Empty(); + Items ??= []; if (IsSupportAnchor) { diff --git a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss index 20614688aac..b08203f9134 100644 --- a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss +++ b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss @@ -25,180 +25,136 @@ --bb-ribbon-body-padding: #{$bb-ribbon-body-padding}; --bb-ribbon-menu-header-height: calc(var(--bb-ribbon-menu-height) + var(--bb-ribbon-menu-margin-top) + var(--bb-ribbon-menu-body-height)); position: relative; -} - -.ribbon-tab.is-float:not(.is-expand) { - --bb-ribbon-menu-body-height: 0px; -} - -.ribbon-tab .ribbon-header { - position: relative; -} - -.ribbon-tab .ribbon-header .tabs-header { - background-color: var(--bb-ribbon-menu-bg); - border-bottom: 1px solid var(--bs-border-color); -} - -.ribbon-tab .ribbon-header .tabs-border-card.tabs-top .tabs-header { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.ribbon-tab .ribbon-header .tabs-border-card { - border-radius: unset; - border: none; - box-shadow: none; -} - -.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item { - padding: 0 var(--bb-ribbon-menu-padding); - margin-top: var(--bb-ribbon-menu-margin-top); - height: var(--bb-ribbon-menu-height); - border-top-left-radius: var(--bb-ribbon-menu-radius); - border-top-right-radius: var(--bb-ribbon-menu-radius); - transition: background-color .3s ease-in-out, color .3s ease-in-out, border-right-color .3s ease-in-out, border-left-color .3s ease-in-out; -} - -.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item.active { - border-left-color: var(--bb-ribbon-menu-border-color); - border-right-color: var(--bb-ribbon-menu-border-color); - border-top-color: var(--bb-ribbon-menu-border-color); -} - -.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:nth-child(2) { - padding-left: var(--bb-ribbon-menu-padding); -} - -.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:last-child { - padding-right: var(--bb-ribbon-menu-padding); -} - -.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:not(:hover):not(.active) { - color: var(--bb-ribbon-menu-color); -} - -.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:hover { - color: var(--bb-ribbon-menu-hover-color); -} - -.ribbon-tab .tabs-nav-scroll { - padding: 0 var(--bb-ribbon-menu-padding); -} - -.ribbon-tab .tabs .tabs-body { - padding: 0; -} - -.ribbon-tab .tabs-body-content { - overflow: hidden; - height: var(--bb-ribbon-menu-body-height); - transition: height .3s ease-in-out; -} - -.ribbon-tab.is-float:not(.is-expand) .tabs-body-content { - height: 0; -} - -.ribbon-tab .fa-thumb-tack { - width: 18px; - height: 28px; - display: flex; - justify-content: center; - align-items: center; -} -.ribbon-tab .tab-commands { - display: flex; - flex-wrap: nowrap; - font-size: var(--bb-ribbon-button-fontsize); - overflow: hidden; - padding: var(--bb-ribbon-menu-body-padding); - height: 100%; -} - -.ribbon-tab .link-group { - display: flex; - flex-direction: column; - align-items: center; -} - -.ribbon-tab .link-button { - font-size: var(--bb-ribbon-button-fontsize); - padding: var(--bb-ribbon-button-padding); - border-radius: var(--bb-ribbon-button-radius); - border: var(--bb-ribbon-button-border-width) solid var(--bb-ribbon-button-border-color); - min-width: var(--bb-ribbon-button-min-width); - transition: background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out; -} - -.ribbon-tab .link-button.active { - background-color: var(--bb-ribbon-button-active-bg); - border-color: var(--bb-ribbon-button-active-border-color); -} - -.ribbon-tab .link-button:not(:last-child) { - margin-right: 1px; -} - -.ribbon-tab .link-button:not([disabled]):hover { - background-color: var(--bb-ribbon-button-hover-bg); - border-color: var(--bb-ribbon-button-hover-border-color); -} - -.ribbon-tab .link-button > i { - font-size: 1rem; - margin-bottom: .25rem; -} - -.ribbon-tab .link-button > span { - white-space: nowrap; -} - -.ribbon-tab .link-group-name { - margin-top: var(--bb-ribbon-group-margin-top); - color: var(--bb-ribbon-group-color); - font-size: var(--bb-ribbon-group-fontsize) -} - -.ribbon-tab .divider-vertical { - margin: 0 4px; -} - -.ribbon-tab .ribbon-buttons { - position: absolute; - right: 1rem; - top: var(--bb-ribbon-menu-margin-top); - height: var(--bb-ribbon-menu-height); -} - -.ribbon-tab .ribbon-buttons, -.ribbon-tab .ribbon-customer-buttons { - display: flex; - align-items: center; -} - -.ribbon-tab .ribbon-buttons > * { - cursor: pointer; -} - -.ribbon-tab .ribbon-customer-buttons { - margin-right: 1rem; -} - -.ribbon-tab .ribbon-button { - padding: 1px 8px; - cursor: pointer; - border-radius: var(--bs-border-radius); - transition: background-color .3s ease-in-out; -} - -.ribbon-tab .ribbon-button:hover { - background-color: var(--bb-tab-item-hover-color); -} - -.ribbon-tab .ribbon-body { - border-top: var(--bs-border-width) solid var(--bs-border-color); - padding: var(--bb-ribbon-body-padding); - position: relative; + &.is-float:not(.is-expand) { + --bb-ribbon-menu-body-height: 0px; + + .tabs-body-content { + height: 0; + } + } + + .ribbon-header { + position: relative; + + .tabs-header { + background-color: var(--bb-ribbon-menu-bg); + border-bottom: 1px solid var(--bs-border-color); + + .tabs-nav-scroll { + padding: 0 var(--bb-ribbon-menu-padding); + } + } + + .tabs-body { + padding: 0; + + .link-button { + font-size: var(--bb-ribbon-button-fontsize); + padding: var(--bb-ribbon-button-padding); + border-radius: var(--bb-ribbon-button-radius); + border: var(--bb-ribbon-button-border-width) solid var(--bb-ribbon-button-border-color); + min-width: var(--bb-ribbon-button-min-width); + transition: background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out; + + &.active { + background-color: var(--bb-ribbon-button-active-bg); + border-color: var(--bb-ribbon-button-active-border-color); + } + + &:not(:last-child) { + margin-right: 1px; + } + + &:not([disabled]):hover { + background-color: var(--bb-ribbon-button-hover-bg); + border-color: var(--bb-ribbon-button-hover-border-color); + } + + > i { + font-size: 1rem; + margin-bottom: .25rem; + } + + > span { + white-space: nowrap; + } + } + + .tabs-body-content { + overflow: hidden; + height: var(--bb-ribbon-menu-body-height); + transition: height .3s ease-in-out; + + .tab-commands { + display: flex; + flex-wrap: nowrap; + font-size: var(--bb-ribbon-button-fontsize); + overflow: hidden; + padding: var(--bb-ribbon-menu-body-padding); + height: 100%; + + .link-group { + display: flex; + flex-direction: column; + align-items: center; + + .link-group-name { + margin-top: var(--bb-ribbon-group-margin-top); + color: var(--bb-ribbon-group-color); + font-size: var(--bb-ribbon-group-fontsize) + } + } + + .divider-vertical { + margin: 0 4px; + } + } + } + } + + .ribbon-buttons { + position: absolute; + right: 1rem; + top: var(--bb-ribbon-menu-margin-top); + height: var(--bb-ribbon-menu-height); + display: flex; + align-items: center; + + > * { + cursor: pointer; + } + + .ribbon-customer-buttons { + display: flex; + align-items: center; + margin-right: 1rem; + } + + .ribbon-button { + padding: 1px 8px; + cursor: pointer; + border-radius: var(--bs-border-radius); + transition: background-color .3s ease-in-out; + + &:hover { + background-color: var(--bb-tab-item-hover-color); + } + } + } + + .ribbon-arrow { + width: 18px; + height: 28px; + display: flex; + justify-content: center; + align-items: center; + } + } + + .ribbon-body { + border-top: var(--bs-border-width) solid var(--bs-border-color); + padding: var(--bb-ribbon-body-padding); + position: relative; + } } diff --git a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj index eba806ab8ad..62d5b4addd0 100644 --- a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj +++ b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj @@ -1,7 +1,7 @@ - 8.0.3 + 8.0.4 diff --git a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs index d3dad50adf1..d8a5e44b608 100644 --- a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs +++ b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs @@ -102,7 +102,7 @@ internal class DefaultIcon { ComponentIcons.RibbonTabArrowUpIcon, "bi bi-chevron-up" }, { ComponentIcons.RibbonTabArrowDownIcon, "bi bi-chevron-down" }, - { ComponentIcons.RibbonTabArrowPinIcon, "bi bi-pin bi-rotate-90" }, + { ComponentIcons.RibbonTabArrowPinIcon, "bi bi-pin bi-pin-angle" }, { ComponentIcons.MultiSelectClearIcon, "bi bi-x" }, diff --git a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj index 7fa622801bd..af1b33f36a1 100644 --- a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj +++ b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj @@ -1,7 +1,7 @@ - 8.0.6 + 8.0.7 diff --git a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs index 93983dc7ec4..60e69138fe1 100644 --- a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs +++ b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs @@ -102,7 +102,7 @@ internal class DefaultIcon { ComponentIcons.RibbonTabArrowUpIcon, "mdi mdi-chevron-up" }, { ComponentIcons.RibbonTabArrowDownIcon, "mdi mdi-chevron-down" }, - { ComponentIcons.RibbonTabArrowPinIcon, "mdi mdi-pin mdi-rotate-90" }, + { ComponentIcons.RibbonTabArrowPinIcon, "mdi mdi-pin mdi-pin-off" }, { ComponentIcons.MultiSelectClearIcon, "mdi mdi-close" },