feat(RibbonTab): update style sheet use scss (#3560)

* 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 扩展包
dotnetcore · May 23, 2024 · 0a835e8 · 0a835e8
1 parent cd3237a
commit 0a835e8
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 184 deletions.
diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -33,11 +33,11 @@
     <PackageReference Include="BootstrapBlazor.BarcodeGenerator" Version="0.1.1" />
     <PackageReference Include="BootstrapBlazor.Bluetooth" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.BootstrapIcon" Version="8.0.2" />
-    <PackageReference Include="BootstrapBlazor.BootstrapIcon.Extensions" Version="8.0.3" />
+    <PackageReference Include="BootstrapBlazor.BootstrapIcon.Extensions" Version="8.0.4" />
     <PackageReference Include="BootstrapBlazor.Chart" Version="8.1.5" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.CodeEditor" Version="8.0.2" />
-    <PackageReference Include="BootstrapBlazor.Dock" Version="8.1.3" />
+    <PackageReference Include="BootstrapBlazor.Dock" Version="8.1.4" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="8.0.3" />
     <PackageReference Include="BootstrapBlazor.FontAwesome" Version="8.0.4" />
     <PackageReference Include="BootstrapBlazor.Gantt" Version="8.0.1" />
@@ -47,7 +47,7 @@
     <PackageReference Include="BootstrapBlazor.Live2DDisplay" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.Markdown" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign" Version="8.0.3" />
-    <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="8.0.6" />
+    <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="8.0.7" />
     <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.Middleware" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.MindMap" Version="8.0.7" />

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.5.9-beta03</Version>
+    <Version>8.5.9-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git 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<RibbonTabItem>();
+        Items ??= [];
 
         if (IsSupportAnchor)
         {

diff --git 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/.../BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj b/.../BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.3</Version>
+    <Version>8.0.4</Version>
   </PropertyGroup>
 
   <PropertyGroup>

diff --git 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/...ootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj b/...ootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.6</Version>
+    <Version>8.0.7</Version>
   </PropertyGroup>
 
   <PropertyGroup>

diff --git 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" },