1 // The dropdown wrapper (`<div>`)
10 // Generate the caret automatically
19 z-index: $zindex-dropdown;
20 display: none; // none by default, but block on "open" of the menu
22 min-width: $dropdown-min-width;
23 padding: $dropdown-padding-y 0;
24 margin: $dropdown-spacer 0 0; // override default ul
25 font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
27 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
29 background-color: $dropdown-bg;
30 background-clip: padding-box;
31 border: $dropdown-border-width solid $dropdown-border-color;
32 @include border-radius($dropdown-border-radius);
33 @include box-shadow($dropdown-box-shadow);
36 .dropdown-menu-right {
41 // Allow for dropdowns to go bottom up (aka, dropup-menu)
42 // Just add .dropup after the standard .dropdown class and you're set.
48 margin-bottom: $dropdown-spacer;
62 margin-left: $dropdown-spacer;
66 @include caret(right);
79 margin-right: $dropdown-spacer;
90 // When enabled Popper.js, reset basic dropdown position
91 // stylelint-disable no-duplicate-selectors
93 &[x-placement^="top"],
94 &[x-placement^="right"],
95 &[x-placement^="bottom"],
96 &[x-placement^="left"] {
101 // stylelint-enable no-duplicate-selectors
103 // Dividers (basically an `<hr>`) within the dropdown
105 @include nav-divider($dropdown-divider-bg);
108 // Links, buttons, and more within the dropdown menu
110 // `<button>`-specific styles are denoted with `// For <button>s`
113 width: 100%; // For `<button>`s
114 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
116 font-weight: $font-weight-normal;
117 color: $dropdown-link-color;
118 text-align: inherit; // For `<button>`s
119 white-space: nowrap; // prevent links from randomly breaking onto new lines
120 background-color: transparent; // For `<button>`s
121 border: 0; // For `<button>`s
123 @include hover-focus {
124 color: $dropdown-link-hover-color;
125 text-decoration: none;
126 @include gradient-bg($dropdown-link-hover-bg);
131 color: $dropdown-link-active-color;
132 text-decoration: none;
133 @include gradient-bg($dropdown-link-active-bg);
138 color: $dropdown-link-disabled-color;
139 background-color: transparent;
140 // Remove CSS gradients if they're enabled
141 @if $enable-gradients {
142 background-image: none;
147 .dropdown-menu.show {
151 // Dropdown section headers
154 padding: $dropdown-padding-y $dropdown-item-padding-x;
155 margin-bottom: 0; // for use with heading elements
156 font-size: $font-size-sm;
157 color: $dropdown-header-color;
158 white-space: nowrap; // as with > li > a
162 .dropdown-item-text {
164 padding: $dropdown-item-padding-y $dropdown-item-padding-x;
165 color: $dropdown-link-color;