1 // 2 // Dropdown menus 3 // -------------------------------------------------- 4 5 6 // Dropdown arrow/caret 7 .caret { 8 display: inline-block; 9 width: 0; 10 height: 0; 11 margin-left: 2px; 12 vertical-align: middle; 13 border-top: @caret-width-base dashed; 14 border-right: @caret-width-base solid transparent; 15 border-left: @caret-width-base solid transparent; 16 } 17 18 // The dropdown wrapper (div) 19 .dropup, 20 .dropdown { 21 position: relative; 22 } 23 24 // Prevent the focus on the dropdown toggle when closing dropdowns 25 .dropdown-toggle:focus { 26 outline: 0; 27 } 28 29 // The dropdown menu (ul) 30 .dropdown-menu { 31 position: absolute; 32 top: 100%; 33 left: 0; 34 z-index: @zindex-dropdown; 35 display: none; // none by default, but block on "open" of the menu 36 float: left; 37 min-width: 160px; 38 padding: 5px 0; 39 margin: 2px 0 0; // override default ul 40 list-style: none; 41 font-size: @font-size-base; 42 text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) 43 background-color: @dropdown-bg; 44 border: 1px solid @dropdown-fallback-border; // IE8 fallback 45 border: 1px solid @dropdown-border; 46 border-radius: @border-radius-base; 47 .box-shadow(0 6px 12px rgba(0,0,0,.175)); 48 background-clip: padding-box; 49 50 // Aligns the dropdown menu to right 51 // 52 // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` 53 &.pull-right { 54 right: 0; 55 left: auto; 56 } 57 58 // Dividers (basically an hr) within the dropdown 59 .divider { 60 .nav-divider(@dropdown-divider-bg); 61 } 62 63 // Links within the dropdown menu 64 > li > a { 65 display: block; 66 padding: 3px 20px; 67 clear: both; 68 font-weight: normal; 69 line-height: @line-height-base; 70 color: @dropdown-link-color; 71 white-space: nowrap; // prevent links from randomly breaking onto new lines 72 } 73 } 74 75 // Hover/Focus state 76 .dropdown-menu > li > a { 77 &:hover, 78 &:focus { 79 text-decoration: none; 80 color: @dropdown-link-hover-color; 81 background-color: @dropdown-link-hover-bg; 82 } 83 } 84 85 // Active state 86 .dropdown-menu > .active > a { 87 &, 88 &:hover, 89 &:focus { 90 color: @dropdown-link-active-color; 91 text-decoration: none; 92 outline: 0; 93 background-color: @dropdown-link-active-bg; 94 } 95 } 96 97 // Disabled state 98 // 99 // Gray out text and ensure the hover/focus state remains gray 100 101 .dropdown-menu > .disabled > a { 102 &, 103 &:hover, 104 &:focus { 105 color: @dropdown-link-disabled-color; 106 } 107 108 // Nuke hover/focus effects 109 &:hover, 110 &:focus { 111 text-decoration: none; 112 background-color: transparent; 113 background-image: none; // Remove CSS gradient 114 .reset-filter(); 115 cursor: @cursor-disabled; 116 } 117 } 118 119 // Open state for the dropdown 120 .open { 121 // Show the menu 122 > .dropdown-menu { 123 display: block; 124 } 125 126 // Remove the outline when :focus is triggered 127 > a { 128 outline: 0; 129 } 130 } 131 132 // Menu positioning 133 // 134 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown 135 // menu with the parent. 136 .dropdown-menu-right { 137 left: auto; // Reset the default from `.dropdown-menu` 138 right: 0; 139 } 140 // With v3, we enabled auto-flipping if you have a dropdown within a right 141 // aligned nav component. To enable the undoing of that, we provide an override 142 // to restore the default dropdown menu alignment. 143 // 144 // This is only for left-aligning a dropdown menu within a `.navbar-right` or 145 // `.pull-right` nav component. 146 .dropdown-menu-left { 147 left: 0; 148 right: auto; 149 } 150 151 // Dropdown section headers 152 .dropdown-header { 153 display: block; 154 padding: 3px 20px; 155 font-size: @font-size-small; 156 line-height: @line-height-base; 157 color: @dropdown-header-color; 158 white-space: nowrap; // as with > li > a 159 } 160 161 // Backdrop to catch body clicks on mobile, etc. 162 .dropdown-backdrop { 163 position: fixed; 164 left: 0; 165 right: 0; 166 bottom: 0; 167 top: 0; 168 z-index: (@zindex-dropdown - 10); 169 } 170 171 // Right aligned dropdowns 172 .pull-right > .dropdown-menu { 173 right: 0; 174 left: auto; 175 } 176 177 // Allow for dropdowns to go bottom up (aka, dropup-menu) 178 // 179 // Just add .dropup after the standard .dropdown class and you're set, bro. 180 // TODO: abstract this so that the navbar fixed styles are not placed here? 181 182 .dropup, 183 .navbar-fixed-bottom .dropdown { 184 // Reverse the caret 185 .caret { 186 border-top: 0; 187 border-bottom: @caret-width-base solid; 188 content: ""; 189 } 190 // Different positioning for bottom up menu 191 .dropdown-menu { 192 top: auto; 193 bottom: 100%; 194 margin-bottom: 2px; 195 } 196 } 197 198 199 // Component alignment 200 // 201 // Reiterate per navbar.less and the modified component alignment there. 202 203 @media (min-width: @grid-float-breakpoint) { 204 .navbar-right { 205 .dropdown-menu { 206 .dropdown-menu-right(); 207 } 208 // Necessary for overrides of the default right aligned menu. 209 // Will remove come v4 in all likelihood. 210 .dropdown-menu-left { 211 .dropdown-menu-left(); 212 } 213 } 214 } 215
