ocertat/Kingsborough-LibGuide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dropdown fade by moving transition to higher-specificity selector

Browse Source 
The .fade transition (one class) was being overridden by a later
.dropdown-menu rule (also one class) that set transition to only
background-color. Moving the opacity transition into .dropdown-menu.fade
(two classes) ensures it wins regardless of cascade order.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mark Eaton
2026-02-23 11:30:59 -05:00
co-authored by Claude Opus 4.6
parent b066d5cd12
commit 149004f267
1 changed files with 2 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/home/bootstrap5/home1.css
+2 -4
View File
@@ -90,16 +90,14 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
margin-top: 0; margin-top: 0;
transition: opacity 0.5s ease, background-color 0.2s ease;
-webkit-transition: opacity 0.5s ease, background-color 0.2s ease;
} }
.show > .dropdown-menu.fade, .show > .dropdown-menu.fade,
.dropdown-menu.fade.show { .dropdown-menu.fade.show {
pointer-events: auto; pointer-events: auto;
opacity: 1; opacity: 1;
} }
.fade {
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease; /* Safari */
}
/* Show dropdown on hover AND keyboard focus (WCAG 2.1.1) */ /* Show dropdown on hover AND keyboard focus (WCAG 2.1.1) */
.dropdown:hover .dropdown-menu, .dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu { .dropdown:focus-within .dropdown-menu {