Add active colors to super sidebar interactive items
What does this MR do and why?
Add active colors to super sidebar interactive items
- Rename
counter
classuser-bar-button
shared with "Search or go to" - Rename
user-bar-item
classuser-bar-dropdown-toggle
for clarity - Add
$t-white-a-*
SCSS variables - Make
$t-gray-a-
values static and remove_dark.scss
overrides (see !137738 (comment 1681041239)) - Refactor super sidebar styles with new custom properties for
:active
states, removemix-blend-mode
usage, add.gl-dark
custom property values using$t-white-a-*
values - Update
nav-item
andmenu-section
to use CSS custom properties for:hover
/:focus
and now:active
states - Remove
gl-bg-t-gray-a-08
override class onGlBadge
innav-item
Screenshots or screen recordings
Before | After |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #428352 (closed)
Edited by Scott de Jonge