FluentUI2: remove hover text-decoration from vertical bar links (#6484)

* FluentUI2 remove hover text-decoration from vertical bar links

* Also disable text decoration for horizontal bar links

Author: njannink

Source/Blazorise.FluentUI2/Styles/components/_bar.scss

@@ -381,7 +381,7 @@
     padding-left: var(--spacingHorizontalSNudge);
     padding-right: var(--spacingHorizontalSNudge);
     padding-top: var(--spacingHorizontalSNudge);
-    text-decoration-line: none;
+    text-decoration-line: none !important;
     text-wrap: nowrap;
     transition-duration: var(--durationFaster);
     transition-property: background, border, color;
@@ -684,6 +684,10 @@
         }
 
         .b-bar-link {
+            &:hover {
+                text-decoration: none;
+            }
+
             &.fui-Link-active {
                 color: var(--b-bar-item-dark-active-color, #fff);
                 background: var(--b-bar-item-dark-active-background, #0288D1);
@@ -714,6 +718,10 @@
         }
 
         .b-bar-link {
+            &:hover {
+                text-decoration: none;
+            }
+
             &.fui-Link-active {
                 color: var(--b-bar-item-light-active-color, #000);
                 background: var(--b-bar-item-light-active-background, #0288D1);

Source/Blazorise.FluentUI2/wwwroot/blazorise.fluentui2.css

@@ -1745,7 +1745,7 @@ html[data-theme=dark] .surface {
   padding-left: var(--spacingHorizontalSNudge);
   padding-right: var(--spacingHorizontalSNudge);
   padding-top: var(--spacingHorizontalSNudge);
-  text-decoration-line: none;
+  text-decoration-line: none !important;
   text-wrap: nowrap;
   transition-duration: var(--durationFaster);
   transition-property: background, border, color;
@@ -2801,6 +2801,11 @@ html[data-theme=dark] .surface {
 .b-bar-vertical-small.b-bar-dark .b-bar-toggler-inline {
   stroke: var(--b-bar-dark-color, rgba(255, 255, 255, 0.5));
 }
+.b-bar-vertical-inline.b-bar-dark .b-bar-link:hover,
+.b-bar-vertical-popout.b-bar-dark .b-bar-link:hover,
+.b-bar-vertical-small.b-bar-dark .b-bar-link:hover {
+  text-decoration: none;
+}
 .b-bar-vertical-inline.b-bar-dark .b-bar-link.fui-Link-active,
 .b-bar-vertical-popout.b-bar-dark .b-bar-link.fui-Link-active,
 .b-bar-vertical-small.b-bar-dark .b-bar-link.fui-Link-active {
@@ -2823,6 +2828,11 @@ html[data-theme=dark] .surface {
 .b-bar-vertical-small.b-bar-light .b-bar-toggler-inline {
   stroke: var(--b-bar-light-color, rgba(0, 0, 0, 0.7));
 }
+.b-bar-vertical-inline.b-bar-light .b-bar-link:hover,
+.b-bar-vertical-popout.b-bar-light .b-bar-link:hover,
+.b-bar-vertical-small.b-bar-light .b-bar-link:hover {
+  text-decoration: none;
+}
 .b-bar-vertical-inline.b-bar-light .b-bar-link.fui-Link-active,
 .b-bar-vertical-popout.b-bar-light .b-bar-link.fui-Link-active,
 .b-bar-vertical-small.b-bar-light .b-bar-link.fui-Link-active {