1 // The dropdown wrapper (`<div>`)
8 // Generate the caret automatically
10 display: inline-block;
13 margin-left: $caret-width;
14 vertical-align: middle;
16 border-top: $caret-width solid;
17 border-right: $caret-width solid transparent;
18 border-left: $caret-width solid transparent;
21 // Prevent the focus on the dropdown toggle when closing dropdowns
31 border-bottom: $caret-width solid;
41 z-index: $zindex-dropdown;
42 display: none; // none by default, but block on "open" of the menu
44 min-width: $dropdown-min-width;
45 padding: $dropdown-padding-y 0;
46 margin: $dropdown-margin-top 0 0; // override default ul
47 font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
49 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
51 background-color: $dropdown-bg;
52 background-clip: padding-box;
53 border: $dropdown-border-width solid $dropdown-border-color;
54 @include border-radius($border-radius);
55 @include box-shadow($dropdown-box-shadow);
58 // Dividers (basically an `<hr>`) within the dropdown
60 @include nav-divider($dropdown-divider-bg);
63 // Links, buttons, and more within the dropdown menu
65 // `<button>`-specific styles are denoted with `// For <button>s`
68 width: 100%; // For `<button>`s
69 padding: 3px $dropdown-item-padding-x;
71 font-weight: $font-weight-normal;
72 color: $dropdown-link-color;
73 text-align: inherit; // For `<button>`s
74 white-space: nowrap; // prevent links from randomly breaking onto new lines
75 background: none; // For `<button>`s
76 border: 0; // For `<button>`s
78 @include hover-focus {
79 color: $dropdown-link-hover-color;
80 text-decoration: none;
81 background-color: $dropdown-link-hover-bg;
86 color: $dropdown-link-active-color;
87 text-decoration: none;
88 background-color: $dropdown-link-active-bg;
93 color: $dropdown-link-disabled-color;
94 cursor: $cursor-disabled;
95 background-color: transparent;
96 // Remove CSS gradients if they're enabled
97 @if $enable-gradients {
98 background-image: none;
103 // Open state for the dropdown
110 // Remove the outline when :focus is triggered
118 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
119 // menu with the parent.
120 .dropdown-menu-right {
122 left: auto; // Reset the default from `.dropdown-menu`
125 .dropdown-menu-left {
130 // Dropdown section headers
133 padding: $dropdown-padding-y $dropdown-item-padding-x;
134 margin-bottom: 0; // for use with heading elements
135 font-size: $font-size-sm;
136 color: $dropdown-header-color;
137 white-space: nowrap; // as with > li > a
140 // Backdrop to catch body clicks on mobile, etc.
147 z-index: $zindex-dropdown-backdrop;
150 // Allow for dropdowns to go bottom up (aka, dropup-menu)
152 // Just add .dropup after the standard .dropdown class and you're set.
155 // Different positioning for bottom up menu
159 margin-bottom: $dropdown-margin-top;