Override Bootstrap dropdown CSS variables completely: no borders, no radius, no shadow, auto-width
- Set --bs-dropdown-min-width: 0 (width adapts to content) - Set --bs-dropdown-border-width: 0 (no borders) - Set --bs-dropdown-border-radius: 0 (no rounded corners) - Set --bs-dropdown-box-shadow: none (no shadow) - Set --bs-dropdown-padding-x/y: 0 (no padding) - white-space: nowrap and width: auto on dropdown-item - Same overrides on submenu dropdown-menu
This commit is contained in:
@@ -69,18 +69,26 @@
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-min-width: 0;
|
||||
--bs-dropdown-padding-x: 0;
|
||||
--bs-dropdown-padding-y: 0;
|
||||
--bs-dropdown-border-width: 0;
|
||||
--bs-dropdown-border-radius: 0;
|
||||
--bs-dropdown-box-shadow: none;
|
||||
background-color: var(--header-bg) !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
min-width: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.dropdown-item {
|
||||
color: var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.4rem 1rem;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
}
|
||||
.dropdown-item:hover, .dropdown-item:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
@@ -310,8 +318,12 @@ pre code {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
--bs-dropdown-border-width: 0;
|
||||
--bs-dropdown-border-radius: 0;
|
||||
--bs-dropdown-box-shadow: none;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
|
||||
Reference in New Issue
Block a user