UX: Refactor nav stack active element ()

* UX: Add a grey background and bold text to highlight the active element in the nav stack
This commit is contained in:
Ella E. 2025-01-06 18:14:17 -07:00 committed by GitHub
parent 7df1fac68b
commit fd909dd348
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 31 deletions
app/assets/stylesheets
common
desktop

View File

@ -780,12 +780,6 @@ $mobile-breakpoint: 700px;
a.active {
color: var(--primary);
background-color: var(--d-sidebar-admin-background);
font-weight: 700;
&::after {
display: none; // Hides the arrow
}
}
}

View File

@ -92,19 +92,15 @@
color: var(--primary);
@include ellipsis;
&:hover {
background: var(--d-sidebar-highlight-background);
}
&.active {
position: relative;
--arrow-thickness: 8px;
background: var(--d-selected);
&::after {
position: absolute;
right: 0;
top: calc(50% - var(--arrow-thickness));
content: " ";
border: var(--arrow-thickness) solid transparent;
border-left-color: var(--secondary);
}
color: var(--primary);
background-color: var(--d-selected);
font-weight: bold;
}
}

View File

@ -29,20 +29,6 @@
padding-left: 1.4em;
}
}
a {
color: var(--primary-medium);
&.active {
color: var(--primary);
font-weight: bold;
background-color: transparent;
&:after {
display: none;
}
}
}
}
.select-kit + .messages-nav {