github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/dropdowns.less (about) 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 solid; 14 border-right: @caret-width-base solid transparent; 15 border-left: @caret-width-base solid transparent; 16 } 17 18 // The dropdown wrapper (div) 19 .dropdown { 20 position: relative; 21 } 22 23 // Prevent the focus on the dropdown toggle when closing dropdowns 24 .dropdown-toggle:focus { 25 outline: 0; 26 } 27 28 // The dropdown menu (ul) 29 .dropdown-menu { 30 position: absolute; 31 top: 100%; 32 left: 0; 33 z-index: @zindex-dropdown; 34 display: none; // none by default, but block on "open" of the menu 35 float: left; 36 min-width: 160px; 37 padding: 5px 0; 38 margin: 2px 0 0; // override default ul 39 list-style: none; 40 font-size: @font-size-base; 41 background-color: @dropdown-bg; 42 border: 1px solid @dropdown-fallback-border; // IE8 fallback 43 border: 1px solid @dropdown-border; 44 border-radius: @border-radius-base; 45 .box-shadow(0 6px 12px rgba(0,0,0,.175)); 46 background-clip: padding-box; 47 48 // Aligns the dropdown menu to right 49 // 50 // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` 51 &.pull-right { 52 right: 0; 53 left: auto; 54 } 55 56 // Dividers (basically an hr) within the dropdown 57 .divider { 58 .nav-divider(@dropdown-divider-bg); 59 } 60 61 // Links within the dropdown menu 62 > li > a { 63 display: block; 64 padding: 3px 20px; 65 clear: both; 66 font-weight: normal; 67 line-height: @line-height-base; 68 color: @dropdown-link-color; 69 white-space: nowrap; // prevent links from randomly breaking onto new lines 70 } 71 } 72 73 // Hover/Focus state 74 .dropdown-menu > li > a { 75 &:hover, 76 &:focus { 77 text-decoration: none; 78 color: @dropdown-link-hover-color; 79 background-color: @dropdown-link-hover-bg; 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 outline: 0; 91 background-color: @dropdown-link-active-bg; 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 .dropdown-menu > .disabled > a { 108 &:hover, 109 &:focus { 110 text-decoration: none; 111 background-color: transparent; 112 background-image: none; // Remove CSS gradient 113 .reset-filter(); 114 cursor: not-allowed; 115 } 116 } 117 118 // Open state for the dropdown 119 .open { 120 // Show the menu 121 > .dropdown-menu { 122 display: block; 123 } 124 125 // Remove the outline when :focus is triggered 126 > a { 127 outline: 0; 128 } 129 } 130 131 // Menu positioning 132 // 133 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown 134 // menu with the parent. 135 .dropdown-menu-right { 136 left: auto; // Reset the default from `.dropdown-menu` 137 right: 0; 138 } 139 // With v3, we enabled auto-flipping if you have a dropdown within a right 140 // aligned nav component. To enable the undoing of that, we provide an override 141 // to restore the default dropdown menu alignment. 142 // 143 // This is only for left-aligning a dropdown menu within a `.navbar-right` or 144 // `.pull-right` nav component. 145 .dropdown-menu-left { 146 left: 0; 147 right: auto; 148 } 149 150 // Dropdown section headers 151 .dropdown-header { 152 display: block; 153 padding: 3px 20px; 154 font-size: @font-size-small; 155 line-height: @line-height-base; 156 color: @dropdown-header-color; 157 } 158 159 // Backdrop to catch body clicks on mobile, etc. 160 .dropdown-backdrop { 161 position: fixed; 162 left: 0; 163 right: 0; 164 bottom: 0; 165 top: 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 border-top: 0; 185 border-bottom: @caret-width-base solid; 186 content: ""; 187 } 188 // Different positioning for bottom up menu 189 .dropdown-menu { 190 top: auto; 191 bottom: 100%; 192 margin-bottom: 1px; 193 } 194 } 195 196 197 // Component alignment 198 // 199 // Reiterate per navbar.less and the modified component alignment there. 200 201 @media (min-width: @grid-float-breakpoint) { 202 .navbar-right { 203 .dropdown-menu { 204 .dropdown-menu-right(); 205 } 206 // Necessary for overrides of the default right aligned menu. 207 // Will remove come v4 in all likelihood. 208 .dropdown-menu-left { 209 .dropdown-menu-left(); 210 } 211 } 212 } 213