user_card_popover: Improve outline styling for focused elements.

- Adds focus outline to the custom profile field links.
- Replaces the grey outline of the copy and status buttons with the
  blue one used across the popover options.
- Adds hover state styling to the focus state styling for the copy
  buttons.
This commit is contained in:
Sayam Samal
2024-07-10 02:56:35 +05:30
committed by Tim Abbott
parent 7232ff68f8
commit 6ee491697f

View File

@@ -144,12 +144,18 @@
.custom-profile-field-link {
color: var(--color-text-item);
&:hover,
&:focus {
&:hover {
color: var(--color-text-link);
text-decoration: none;
}
&:focus-visible {
color: var(--color-text-url-hover);
outline: 1px solid var(--color-outline-focus) !important;
outline-offset: 2px;
border-radius: 2px;
}
.custom-profile-field-text {
text-overflow: ellipsis;
overflow: hidden;
@@ -1014,8 +1020,10 @@ ul.popover-group-menu-member-list {
}
&:focus-visible {
outline: 1px solid var(--color-outline-focus) !important;
outline-offset: 0;
color: unset;
color: var(--color-copy-btn-hover) !important;
background-color: var(--color-copy-btn-bg-hover);
}
}
@@ -1255,6 +1263,7 @@ ul.popover-group-menu-member-list {
&:focus {
/* Override bootstrap defaults */
outline: 1px solid var(--color-outline-focus) !important;
outline-offset: 0;
}