bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 07:13:32 +00:00
Code Issues Releases Wiki Activity

[CL-156][CL-176] update bit-nav-item styles (#7712)

Browse Source 
* remove secondary-300 color redefinition

* add nav-item hover styles

* use inset focus-visible ring
This commit is contained in:
Will Martin
2024-01-29 15:58:33 -05:00
committed by GitHub
parent 33b26ecfb4
commit d33b9ec58d
3 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/navigation/nav-item.component.html
View File

@@ -1,7 +1,7 @@
<div
class="tw-relative"
[ngClass]="[
showActiveStyles ? 'tw-bg-background-alt4' : 'tw-bg-background-alt3',
showActiveStyles ? 'tw-bg-background-alt4' : 'tw-bg-background-alt3 hover:tw-bg-primary-300/60',
fvwStyles$ | async
]"
>

4
libs/components/src/navigation/nav-item.component.ts
View File

@@ -42,7 +42,9 @@ export class NavItemComponent extends NavBaseComponent {
*/
protected focusVisibleWithin$ = new BehaviorSubject(false);
protected fvwStyles$ = this.focusVisibleWithin$.pipe(
map((value) => (value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-text-alt2" : "")),
map((value) =>
value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-inset tw-ring-text-alt2" : "",
),
);
@HostListener("focusin", ["$event.target"])
onFocusIn(target: HTMLElement) {