diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs index 03619c5c0a..1e6f4f2261 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs @@ -16,6 +16,12 @@ public partial class BitNav : BitComponentBase, IDisposable where TItem : + /// + /// The accent color of the nav. + /// + [Parameter, ResetClassBuilder] + public BitColor? Accent { get; set; } + /// /// The custom icon name of the chevron-down element of the BitNav component. /// @@ -31,6 +37,12 @@ public partial class BitNav : BitComponentBase, IDisposable where TItem : /// [Parameter] public BitNavClassStyles? Classes { get; set; } + /// + /// The general color of the nav. + /// + [Parameter, ResetClassBuilder] + public BitColor? Color { get; set; } + /// /// The initially selected item in manual mode. /// @@ -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() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.scss index 4b02da36ae..165c805841 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.scss @@ -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; @@ -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); } } } @@ -154,7 +157,7 @@ } .bit-nav-iic { - color: $clr-pri; + color: var(--bit-nav-clr); } .bit-nav-ion { @@ -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); + } } } @@ -201,8 +203,8 @@ .bit-nav-itm, .bit-nav-iic { - pointer-events: none; color: $clr-fg-dis; + pointer-events: none; } } @@ -210,3 +212,175 @@ 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}; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs index 6f46b38299..e621067810 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Nav/BitNavDemo.razor.cs @@ -4,6 +4,13 @@ public partial class BitNavDemo { private readonly List componentParameters = [ + new() + { + Name = "Accent", + Type = "BitColor?", + DefaultValue = "null", + Description = "The accent color of the nav.", + }, new() { Name = "ChevronDownIcon", @@ -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?",