| // The dropdown wrapper (`<div>`) |
| .dropup, |
| .dropdown { |
| position: relative; |
| } |
| |
| .dropdown-toggle { |
| // Generate the caret automatically |
| &::after { |
| display: inline-block; |
| width: 0; |
| height: 0; |
| margin-left: $caret-width; |
| vertical-align: middle; |
| content: ""; |
| border-top: $caret-width solid; |
| border-right: $caret-width solid transparent; |
| border-left: $caret-width solid transparent; |
| } |
| |
| // Prevent the focus on the dropdown toggle when closing dropdowns |
| &:focus { |
| outline: 0; |
| } |
| } |
| |
| .dropup { |
| .dropdown-toggle { |
| &::after { |
| border-top: 0; |
| border-bottom: $caret-width solid; |
| } |
| } |
| } |
| |
| // The dropdown menu |
| .dropdown-menu { |
| position: absolute; |
| top: 100%; |
| left: 0; |
| z-index: $zindex-dropdown; |
| display: none; // none by default, but block on "open" of the menu |
| float: left; |
| min-width: $dropdown-min-width; |
| padding: $dropdown-padding-y 0; |
| margin: $dropdown-margin-top 0 0; // override default ul |
| font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues |
| color: $body-color; |
| text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) |
| list-style: none; |
| background-color: $dropdown-bg; |
| background-clip: padding-box; |
| border: $dropdown-border-width solid $dropdown-border-color; |
| @include border-radius($border-radius); |
| @include box-shadow($dropdown-box-shadow); |
| } |
| |
| // Dividers (basically an `<hr>`) within the dropdown |
| .dropdown-divider { |
| @include nav-divider($dropdown-divider-bg); |
| } |
| |
| // Links, buttons, and more within the dropdown menu |
| // |
| // `<button>`-specific styles are denoted with `// For <button>s` |
| .dropdown-item { |
| display: block; |
| width: 100%; // For `<button>`s |
| padding: 3px $dropdown-item-padding-x; |
| clear: both; |
| font-weight: $font-weight-normal; |
| color: $dropdown-link-color; |
| text-align: inherit; // For `<button>`s |
| white-space: nowrap; // prevent links from randomly breaking onto new lines |
| background: none; // For `<button>`s |
| border: 0; // For `<button>`s |
| |
| @include hover-focus { |
| color: $dropdown-link-hover-color; |
| text-decoration: none; |
| background-color: $dropdown-link-hover-bg; |
| } |
| |
| &.active, |
| &:active { |
| color: $dropdown-link-active-color; |
| text-decoration: none; |
| background-color: $dropdown-link-active-bg; |
| } |
| |
| &.disabled, |
| &:disabled { |
| color: $dropdown-link-disabled-color; |
| cursor: $cursor-disabled; |
| background-color: transparent; |
| // Remove CSS gradients if they're enabled |
| @if $enable-gradients { |
| background-image: none; |
| } |
| } |
| } |
| |
| // Open state for the dropdown |
| .show { |
| // Show the menu |
| > .dropdown-menu { |
| display: block; |
| } |
| |
| // Remove the outline when :focus is triggered |
| > a { |
| outline: 0; |
| } |
| } |
| |
| // Menu positioning |
| // |
| // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown |
| // menu with the parent. |
| .dropdown-menu-right { |
| right: 0; |
| left: auto; // Reset the default from `.dropdown-menu` |
| } |
| |
| .dropdown-menu-left { |
| right: auto; |
| left: 0; |
| } |
| |
| // Dropdown section headers |
| .dropdown-header { |
| display: block; |
| padding: $dropdown-padding-y $dropdown-item-padding-x; |
| margin-bottom: 0; // for use with heading elements |
| font-size: $font-size-sm; |
| color: $dropdown-header-color; |
| white-space: nowrap; // as with > li > a |
| } |
| |
| // Backdrop to catch body clicks on mobile, etc. |
| .dropdown-backdrop { |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| z-index: $zindex-dropdown-backdrop; |
| } |
| |
| // Allow for dropdowns to go bottom up (aka, dropup-menu) |
| // |
| // Just add .dropup after the standard .dropdown class and you're set. |
| |
| .dropup { |
| // Different positioning for bottom up menu |
| .dropdown-menu { |
| top: auto; |
| bottom: 100%; |
| margin-bottom: $dropdown-margin-top; |
| } |
| } |