Merge pull request #5022 from nextcloud-libraries/fix/41699-change_styles_for_focused_items_in_sidebar

emoral435 · web-flow · commit fa38cf90517a · 2024-01-04T11:20:10.000-06:00
Harmonize focus-visible styles for vue-navigation item with none-vue navigation item
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -111,6 +111,12 @@
 			width: calc(100% - #{$clickable-area});
 			margin: auto;
 		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 4px var(--color-main-background);
+			outline: 2px solid var(--color-main-text);
+			border-radius: var(--border-radius-pill);
+		}
 	}
 }
 /* Second level nesting for lists */

Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,12 @@`
`111`	`111`	`width: calc(100% - #{$clickable-area});`
`112`	`112`	`margin: auto;`
`113`	`113`	`}`
	`114`	`+`
	`115`	`+ &:focus-visible {`
	`116`	`+ box-shadow: 0 0 0 4px var(--color-main-background);`
	`117`	`+ outline: 2px solid var(--color-main-text);`
	`118`	`+ border-radius: var(--border-radius-pill);`
	`119`	`+ }`
`114`	`120`	`}`
`115`	`121`	`}`
`116`	`122`	`/* Second level nesting for lists */`