mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

Rewrite dropdowns

Browse Source 
- Remove nested > selectors for dropdown items
- Update docs examples to use all the new markup
This commit is contained in:
Mark Otto
2015-08-17 11:19:14 -07:00
parent 5d114f8cb4
commit e558f490dd
4 changed files with 222 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
scss/_dropdown.scss
View File

@@ -53,54 +53,50 @@
.dropdown-divider {
@include nav-divider($dropdown-divider-bg);
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
// Links, buttons, and more within the dropdown menu
.dropdown-item {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height;
color: $dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
@include hover-focus {
color: $dropdown-link-hover-color;
text-decoration: none;
background-color: $dropdown-link-hover-bg;
}
}
// Active state
.dropdown-menu > .active > a {
@include plain-hover-focus {
color: $dropdown-link-active-color;
text-decoration: none;
background-color: $dropdown-link-active-bg;
outline: 0;
}
}
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a {
@include plain-hover-focus {
color: $dropdown-link-disabled-color;
// Active state
&.active {
@include plain-hover-focus {
color: $dropdown-link-active-color;
text-decoration: none;
background-color: $dropdown-link-active-bg;
outline: 0;
}
}
// Nuke hover/focus effects
@include hover-focus {
text-decoration: none;
cursor: $cursor-disabled;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
// Disabled state
//
// Gray out text and ensure the hover/focus state remains gray
&.disabled {
@include plain-hover-focus {
color: $dropdown-link-disabled-color;
}
// Nuke hover/focus effects
@include hover-focus {
text-decoration: none;
cursor: $cursor-disabled;
background-color: transparent;
background-image: none; // Remove CSS gradient
@include reset-filter();
}
}
}