Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +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' && { variant === 'secondary' && {
'--color-text-alt2': 'var(--color-text-main)', '--color-text-alt2': 'var(--color-text-main)',
'--color-background-alt3': 'var(--color-secondary-100)', '--color-background-alt3': 'var(--color-secondary-100)',
'--color-background-alt4': 'var(--color-secondary-300)', '--color-background-alt4': 'var(--color-secondary-300)'
'--color-secondary-300': 'var(--color-secondary-500)'
} }
" "
class="tw-fixed tw-inset-y-0 tw-left-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3" 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 <div
class="tw-relative" class="tw-relative"
[ngClass]="[ [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 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 focusVisibleWithin$ = new BehaviorSubject(false);
protected fvwStyles$ = this.focusVisibleWithin$.pipe( 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"]) @HostListener("focusin", ["$event.target"])
onFocusIn(target: HTMLElement) { onFocusIn(target: HTMLElement) {