Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00
Code Issues Projects 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
libs/components/src/layout/layout.component.html
View File

@ -19,8 +19,7 @@
variant === 'secondary' && {
'--color-text-alt2': 'var(--color-text-main)',
'--color-background-alt3': 'var(--color-secondary-100)',
'--color-background-alt4': 'var(--color-secondary-300)',
'--color-secondary-300': 'var(--color-secondary-500)'
'--color-background-alt4': 'var(--color-secondary-300)'
}
"
class="tw-fixed tw-inset-y-0 tw-left-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"

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) {