Skip to content

Commit

Permalink
feat(blazorui): add Accent and Color parameters to BitNav #8780 (#8781)
Browse files Browse the repository at this point in the history
  • Loading branch information
@msynk
msynk authored Sep 27, 2024
1 parent ddd7f32 commit 04285d3
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 12 deletions.
56 changes: 56 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ public partial class BitNav<TItem> : BitComponentBase, IDisposable where TItem :



/// <summary>
/// The accent color of the nav.
/// </summary>
[Parameter, ResetClassBuilder]
public BitColor? Accent { get; set; }

/// <summary>
/// The custom icon name of the chevron-down element of the BitNav component.
/// </summary>
Expand All @@ -31,6 +37,12 @@ public partial class BitNav<TItem> : BitComponentBase, IDisposable where TItem :
/// </summary>
[Parameter] public BitNavClassStyles? Classes { get; set; }

/// <summary>
/// The general color of the nav.
/// </summary>
[Parameter, ResetClassBuilder]
public BitColor? Color { get; set; }

/// <summary>
/// The initially selected item in manual mode.
/// </summary>
Expand Down Expand Up @@ -756,6 +768,50 @@ protected override void RegisterCssClasses()
ClassBuilder.Register(() => FullWidth ? "bit-nav-flw" : string.Empty);

ClassBuilder.Register(() => IconOnly ? "bit-nav-ion" : string.Empty);

ClassBuilder.Register(() => Accent switch
{
BitColor.Primary => "bit-nav-apri",
BitColor.Secondary => "bit-nav-asec",
BitColor.Tertiary => "bit-nav-ater",
BitColor.Info => "bit-nav-ainf",
BitColor.Success => "bit-nav-asuc",
BitColor.Warning => "bit-nav-awrn",
BitColor.SevereWarning => "bit-nav-aswr",
BitColor.Error => "bit-nav-aerr",
BitColor.PrimaryBackground => "bit-nav-apbg",
BitColor.SecondaryBackground => "bit-nav-asbg",
BitColor.TertiaryBackground => "bit-nav-atbg",
BitColor.PrimaryForeground => "bit-nav-apfg",
BitColor.SecondaryForeground => "bit-nav-asfg",
BitColor.TertiaryForeground => "bit-nav-atfg",
BitColor.PrimaryBorder => "bit-nav-apbr",
BitColor.SecondaryBorder => "bit-nav-asbr",
BitColor.TertiaryBorder => "bit-nav-atbr",
_ => "bit-nav-apbg",
});

ClassBuilder.Register(() => Color switch
{
BitColor.Primary => "bit-nav-pri",
BitColor.Secondary => "bit-nav-sec",
BitColor.Tertiary => "bit-nav-ter",
BitColor.Info => "bit-nav-inf",
BitColor.Success => "bit-nav-suc",
BitColor.Warning => "bit-nav-wrn",
BitColor.SevereWarning => "bit-nav-swr",
BitColor.Error => "bit-nav-err",
BitColor.PrimaryBackground => "bit-nav-pbg",
BitColor.SecondaryBackground => "bit-nav-sbg",
BitColor.TertiaryBackground => "bit-nav-tbg",
BitColor.PrimaryForeground => "bit-nav-pfg",
BitColor.SecondaryForeground => "bit-nav-sfg",
BitColor.TertiaryForeground => "bit-nav-tfg",
BitColor.PrimaryBorder => "bit-nav-pbr",
BitColor.SecondaryBorder => "bit-nav-sbr",
BitColor.TertiaryBorder => "bit-nav-tbr",
_ => "bit-nav-pri",
});
}

protected override void RegisterCssStyles()
Expand Down
198 changes: 186 additions & 12 deletions src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@
.bit-nav-cbt {
cursor: pointer;
user-select: none;
color: $clr-fg-pri;
font-size: spacing(1.5);
min-width: spacing(3.375);
background-color: transparent;
color: $clr-fg-pri;

i {
transition: transform 0.1s linear 0s;
Expand Down Expand Up @@ -93,14 +93,17 @@
padding: spacing(0.5);
box-sizing: border-box;
min-height: spacing(6.0);
border-color: transparent;
border-radius: $shp-border-radius;
border-inline-start-width: spacing(0.375);
border-inline-start-style: $shp-border-style;

@media (hover: hover) {
&:hover {
background-color: $clr-bg-pri-hover;
background-color: var(--bit-nav-clr-hover);

.bit-nav-itm {
color: $clr-pri;
color: var(--bit-nav-clr-text);
}
}
}
Expand Down Expand Up @@ -154,7 +157,7 @@
}

.bit-nav-iic {
color: $clr-pri;
color: var(--bit-nav-clr);
}

.bit-nav-ion {
Expand All @@ -178,15 +181,14 @@
}

.bit-nav-sel {
background-color: $clr-bg-sec;
border-inline-start: spacing(0.375) $shp-border-style $clr-pri;
border-color: var(--bit-nav-clr);
background-color: var(--bit-nav-clr-active);

@media(hover:hover) {
@media (hover:hover) {
&:hover {
background-color: $clr-bg-pri-hover;
/*.bit-nav-itm {
color: $clr-pri;
}*/
.bit-nav-itm {
color: var(--bit-nav-clr-text);
}
}
}

Expand All @@ -201,12 +203,184 @@

.bit-nav-itm,
.bit-nav-iic {
pointer-events: none;
color: $clr-fg-dis;
pointer-events: none;
}
}

.bit-nav-sep {
height: 0;
border: 1px solid $clr-brd-sec;
}


.bit-nav-apri {
--bit-nav-clr-text: #{$clr-pri-text};
--bit-nav-clr-hover: #{$clr-pri-hover};
--bit-nav-clr-active: #{$clr-pri-active};
}

.bit-nav-asec {
--bit-nav-clr-text: #{$clr-sec-text};
--bit-nav-clr-hover: #{$clr-sec-hover};
--bit-nav-clr-active: #{$clr-sec-active};
}

.bit-nav-ater {
--bit-nav-clr-text: #{$clr-ter-text};
--bit-nav-clr-hover: #{$clr-ter-hover};
--bit-nav-clr-active: #{$clr-ter-active};
}

.bit-nav-ainf {
--bit-nav-clr-text: #{$clr-inf-text};
--bit-nav-clr-hover: #{$clr-inf-hover};
--bit-nav-clr-active: #{$clr-inf-active};
}

.bit-nav-asuc {
--bit-nav-clr-text: #{$clr-suc-text};
--bit-nav-clr-hover: #{$clr-suc-hover};
--bit-nav-clr-active: #{$clr-suc-active};
}

.bit-nav-awrn {
--bit-nav-clr-text: #{$clr-wrn-text};
--bit-nav-clr-hover: #{$clr-wrn-hover};
--bit-nav-clr-active: #{$clr-wrn-active};
}

.bit-nav-aswr {
--bit-nav-clr-text: #{$clr-swr-text};
--bit-nav-clr-hover: #{$clr-swr-hover};
--bit-nav-clr-active: #{$clr-swr-active};
}

.bit-nav-aerr {
--bit-nav-clr-text: #{$clr-err-text};
--bit-nav-clr-hover: #{$clr-err-hover};
--bit-nav-clr-active: #{$clr-err-active};
}

.bit-nav-apbg {
--bit-nav-clr-text: #{$clr-fg-pri};
--bit-nav-clr-hover: #{$clr-bg-pri-hover};
--bit-nav-clr-active: #{$clr-bg-pri-active};
}

.bit-nav-asbg {
--bit-nav-clr-text: #{$clr-fg-pri};
--bit-nav-clr-hover: #{$clr-bg-sec-hover};
--bit-nav-clr-active: #{$clr-bg-sec-active};
}

.bit-nav-atbg {
--bit-nav-clr-text: #{$clr-fg-pri};
--bit-nav-clr-hover: #{$clr-bg-ter-hover};
--bit-nav-clr-active: #{$clr-bg-ter-active};
}

.bit-nav-apfg {
--bit-nav-clr-text: #{$clr-bg-pri};
--bit-nav-clr-hover: #{$clr-fg-pri-hover};
--bit-nav-clr-active: #{$clr-fg-pri-active};
}

.bit-nav-asfg {
--bit-nav-clr-text: #{$clr-bg-pri};
--bit-nav-clr-hover: #{$clr-fg-sec-hover};
--bit-nav-clr-active: #{$clr-fg-sec-active};
}

.bit-nav-atfg {
--bit-nav-clr-text: #{$clr-bg-pri};
--bit-nav-clr-hover: #{$clr-fg-ter-hover};
--bit-nav-clr-active: #{$clr-fg-ter-active};
}

.bit-nav-apbr {
--bit-nav-clr-text: #{$clr-fg-pri};
--bit-nav-clr-hover: #{$clr-brd-pri-hover};
--bit-nav-clr-active: #{$clr-brd-pri-active};
}

.bit-nav-asbr {
--bit-nav-clr-text: #{$clr-fg-pri};
--bit-nav-clr-hover: #{$clr-brd-sec-hover};
--bit-nav-clr-active: #{$clr-brd-sec-active};
}

.bit-nav-atbr {
--bit-nav-clr-text: #{$clr-fg-pri};
--bit-nav-clr-hover: #{$clr-brd-ter-hover};
--bit-nav-clr-active: #{$clr-brd-ter-active};
}


.bit-nav-pri {
--bit-nav-clr: #{$clr-pri};
}

.bit-nav-sec {
--bit-nav-clr: #{$clr-sec};
}

.bit-nav-ter {
--bit-nav-clr: #{$clr-ter};
}

.bit-nav-inf {
--bit-nav-clr: #{$clr-inf};
}

.bit-nav-suc {
--bit-nav-clr: #{$clr-suc};
}

.bit-nav-wrn {
--bit-nav-clr: #{$clr-wrn};
}

.bit-nav-swr {
--bit-nav-clr: #{$clr-swr};
}

.bit-nav-err {
--bit-nav-clr: #{$clr-err};
}

.bit-nav-pbg {
--bit-nav-clr: #{$clr-bg-pri};
}

.bit-nav-sbg {
--bit-nav-clr: #{$clr-bg-sec};
}

.bit-nav-tbg {
--bit-nav-clr: #{$clr-bg-ter};
}

.bit-nav-pfg {
--bit-nav-clr: #{$clr-fg-pri};
}

.bit-nav-sfg {
--bit-nav-clr: #{$clr-fg-sec};
}

.bit-nav-tfg {
--bit-nav-clr: #{$clr-fg-ter};
}

.bit-nav-pbr {
--bit-nav-clr: #{$clr-brd-pri};
}

.bit-nav-sbr {
--bit-nav-clr: #{$clr-brd-sec};
}

.bit-nav-tbr {
--bit-nav-clr: #{$clr-brd-ter};
}
14 changes: 14 additions & 0 deletions ...I/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@ public partial class BitNavDemo
{
private readonly List<ComponentParameter> componentParameters =
[
new()
{
Name = "Accent",
Type = "BitColor?",
DefaultValue = "null",
Description = "The accent color of the nav.",
},
new()
{
Name = "ChevronDownIcon",
Expand All @@ -28,6 +35,13 @@ public partial class BitNavDemo
Href = "#nav-class-styles",
},
new()
{
Name = "Color",
Type = "BitColor?",
DefaultValue = "null",
Description = "The general color of the nav.",
},
new()
{
Name = "DefaultSelectedItem",
Type = "TItem?",
Expand Down

0 comments on commit 04285d3

Please sign in to comment.