1// The dropdown wrapper (`<div>`) 2.dropup, 3.dropright, 4.dropdown, 5.dropleft { 6 position: relative; 7} 8 9.dropdown-toggle { 10 white-space: nowrap; 11 12 // Generate the caret automatically 13 @include caret(); 14} 15 16// The dropdown menu 17.dropdown-menu { 18 position: absolute; 19 top: 100%; 20 left: 0; 21 z-index: $zindex-dropdown; 22 display: none; // none by default, but block on "open" of the menu 23 float: left; 24 min-width: $dropdown-min-width; 25 padding: $dropdown-padding-y 0; 26 margin: $dropdown-spacer 0 0; // override default ul 27 @include font-size($dropdown-font-size); 28 color: $dropdown-color; 29 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) 30 list-style: none; 31 background-color: $dropdown-bg; 32 background-clip: padding-box; 33 border: $dropdown-border-width solid $dropdown-border-color; 34 @include border-radius($dropdown-border-radius); 35 @include box-shadow($dropdown-box-shadow); 36} 37 38@each $breakpoint in map-keys($grid-breakpoints) { 39 @include media-breakpoint-up($breakpoint) { 40 $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 41 42 .dropdown-menu#{$infix}-left { 43 right: auto; 44 left: 0; 45 } 46 47 .dropdown-menu#{$infix}-right { 48 right: 0; 49 left: auto; 50 } 51 } 52} 53 54// Allow for dropdowns to go bottom up (aka, dropup-menu) 55// Just add .dropup after the standard .dropdown class and you're set. 56.dropup { 57 .dropdown-menu { 58 top: auto; 59 bottom: 100%; 60 margin-top: 0; 61 margin-bottom: $dropdown-spacer; 62 } 63 64 .dropdown-toggle { 65 @include caret(up); 66 } 67} 68 69.dropright { 70 .dropdown-menu { 71 top: 0; 72 right: auto; 73 left: 100%; 74 margin-top: 0; 75 margin-left: $dropdown-spacer; 76 } 77 78 .dropdown-toggle { 79 @include caret(right); 80 &::after { 81 vertical-align: 0; 82 } 83 } 84} 85 86.dropleft { 87 .dropdown-menu { 88 top: 0; 89 right: 100%; 90 left: auto; 91 margin-top: 0; 92 margin-right: $dropdown-spacer; 93 } 94 95 .dropdown-toggle { 96 @include caret(left); 97 &::before { 98 vertical-align: 0; 99 } 100 } 101} 102 103// When enabled Popper.js, reset basic dropdown position 104// stylelint-disable-next-line no-duplicate-selectors 105.dropdown-menu { 106 &[x-placement^="top"], 107 &[x-placement^="right"], 108 &[x-placement^="bottom"], 109 &[x-placement^="left"] { 110 right: auto; 111 bottom: auto; 112 } 113} 114 115// Dividers (basically an `<hr>`) within the dropdown 116.dropdown-divider { 117 @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true); 118} 119 120// Links, buttons, and more within the dropdown menu 121// 122// `<button>`-specific styles are denoted with `// For <button>s` 123.dropdown-item { 124 display: block; 125 width: 100%; // For `<button>`s 126 padding: $dropdown-item-padding-y $dropdown-item-padding-x; 127 clear: both; 128 font-weight: $font-weight-normal; 129 color: $dropdown-link-color; 130 text-align: inherit; // For `<button>`s 131 text-decoration: if($link-decoration == none, null, none); 132 white-space: nowrap; // prevent links from randomly breaking onto new lines 133 background-color: transparent; // For `<button>`s 134 border: 0; // For `<button>`s 135 136 // Prevent dropdown overflow if there's no padding 137 // See https://github.com/twbs/bootstrap/pull/27703 138 @if $dropdown-padding-y == 0 { 139 &:first-child { 140 @include border-top-radius($dropdown-inner-border-radius); 141 } 142 143 &:last-child { 144 @include border-bottom-radius($dropdown-inner-border-radius); 145 } 146 } 147 148 @include hover-focus() { 149 color: $dropdown-link-hover-color; 150 text-decoration: none; 151 @include gradient-bg($dropdown-link-hover-bg); 152 } 153 154 &.active, 155 &:active { 156 color: $dropdown-link-active-color; 157 text-decoration: none; 158 @include gradient-bg($dropdown-link-active-bg); 159 } 160 161 &.disabled, 162 &:disabled { 163 color: $dropdown-link-disabled-color; 164 pointer-events: none; 165 background-color: transparent; 166 // Remove CSS gradients if they're enabled 167 @if $enable-gradients { 168 background-image: none; 169 } 170 } 171} 172 173.dropdown-menu.show { 174 display: block; 175} 176 177// Dropdown section headers 178.dropdown-header { 179 display: block; 180 padding: $dropdown-header-padding; 181 margin-bottom: 0; // for use with heading elements 182 @include font-size($font-size-sm); 183 color: $dropdown-header-color; 184 white-space: nowrap; // as with > li > a 185} 186 187// Dropdown text 188.dropdown-item-text { 189 display: block; 190 padding: $dropdown-item-padding-y $dropdown-item-padding-x; 191 color: $dropdown-link-color; 192} 193