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