You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is your feature request related to a problem? Please describe.
The vertical nav widget looks great but does not allow for nested lists.
Describe the solution you'd like
If hoo-nav-listsub are nested they should be indented, like they are in Fluent React.
Describe alternatives you've considered
Tried doing this with DevTools in Pattern Lab but did not succeed. It is of course also possible that I did it wrong there is just a missing example and not something missing in the framework.
The text was updated successfully, but these errors were encountered:
/* Set padding on navitem-text rather than link, avoids issues with button before link */
.hoo-navitem[aria-current] .hoo-navitem-link {
padding-left: 0;
}
.hoo-nav-listsub .hoo-navitem-text {
padding-left: 1.6875rem;
}
.hoo-nav-listsub .hoo-nav-listsub .hoo-navitem-text {
padding-left: 2.5625rem;
}
/* Do not rotate all icon below expanded */
.hoo-navitem[aria-expanded=true] .hoo-buttonicon svg {
transform: inherit;
}
/* Rotate nearest icon, more selectors needed to support deeper trees */
.hoo-navitem[aria-expanded=true] > .hoo-navitem-text > .hoo-buttonicon svg,
.hoo-navitem[aria-expanded=true] > * > .hoo-navitem-text > .hoo-buttonicon svg /* Allow for nav item content as custom element */ {
transform: rotate(90deg);
}
/* Set border on navitem-text, rather than li, avoids children also getting the background, if the parent is a link to a page */
.hoo-navitem-text[aria-current=page] {
background-color: var(--buttonBackgroundCheckedHovered);
border-left: 2px var(--ButtonPressedBorder) solid;
}
.hoo-navitem-text[aria-current=page] > .hoo-navitem-link {
margin-left: -2px;
}
Is your feature request related to a problem? Please describe.
The vertical nav widget looks great but does not allow for nested lists.
Describe the solution you'd like
If
hoo-nav-listsub
are nested they should be indented, like they are in Fluent React.Describe alternatives you've considered
Tried doing this with DevTools in Pattern Lab but did not succeed. It is of course also possible that I did it wrong there is just a missing example and not something missing in the framework.
The text was updated successfully, but these errors were encountered: