florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Background color of active dropdown menu items in navbar (#3250)

Browse Source 
As reported in Issue #3249, This pull request fixes a issue that makes
the active navbar dropdown menu item unable to follow the global
background color settings.

It achieves this by merging the definition of `.navbar .dropdown-menu`
and `.btn-group.dropdown .dropdown-menu` in the `_base.scss`. This
should not affect the looking of the dropdown menu in a button.

**Before:**
<img width="274" height="194" alt="before"
src="https://github.com/user-attachments/assets/4fa59325-8dc9-4156-a8f6-293ce467d00d"
/>

**After:**
<img width="274" height="194" alt="after"
src="https://github.com/user-attachments/assets/5bcf16bc-0b3e-4b27-b5f2-95ae50f3e40f"
/>

**Button dropdown menu:**
<img width="316" height="241" alt="button"
src="https://github.com/user-attachments/assets/5609e568-1635-491d-8451-354e48eed9c5"
/>
This commit is contained in:
ZHU Yuhui 2025-11-07 22:18:08 +01:00 committed by GitHub
parent dc33b7488a
commit c38d33b5f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
_sass/_base.scss
View File

@ -250,7 +250,8 @@ ul.task-list input[type="checkbox"] {
opacity: 0.95;
}
.navbar .dropdown-menu {
.navbar .dropdown-menu,
.btn-group.dropdown .dropdown-menu {
background-color: var(--global-bg-color);
border: 1px solid var(--global-divider-color);
@ -276,6 +277,16 @@ ul.task-list input[type="checkbox"] {
}
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--global-hover-color);
color: var(--global-hover-text-color) !important;
&:hover {
color: var(--global-hover-text-color);
}
}
.navbar.navbar-light {
a {
&:hover {
@ -1041,29 +1052,6 @@ progress::-moz-progress-bar {
color: var(--global-hover-text-color) !important;
}
}
.dropdown-menu {
background-color: var(--global-bg-color);
}
.dropdown-item {
background-color: var(--global-bg-color);
color: var(--global-text-color);
&:hover {
color: var(--global-hover-color);
}
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--global-hover-color);
color: var(--global-hover-text-color) !important;
&:hover {
color: var(--global-hover-text-color);
}
}
}
/* Table of Contents */