Commit | Line | Data |
---|---|---|
7b869721 S |
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 @dropdown-caret-color; | |
14 | border-right: @caret-width-base solid transparent; | |
15 | border-left: @caret-width-base solid transparent; | |
16 | // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed, | |
17 | // we can just straight up remove this. | |
18 | border-bottom: 0 dotted; | |
19 | } | |
20 | ||
21 | // The dropdown wrapper (div) | |
22 | .dropdown { | |
23 | position: relative; | |
24 | } | |
25 | ||
26 | // Prevent the focus on the dropdown toggle when closing dropdowns | |
27 | .dropdown-toggle:focus { | |
28 | outline: 0; | |
29 | } | |
30 | ||
31 | // The dropdown menu (ul) | |
32 | .dropdown-menu { | |
33 | position: absolute; | |
34 | top: 100%; | |
35 | left: 0; | |
36 | z-index: @zindex-dropdown; | |
37 | display: none; // none by default, but block on "open" of the menu | |
38 | float: left; | |
39 | min-width: 160px; | |
40 | padding: 5px 0; | |
41 | margin: 2px 0 0; // override default ul | |
42 | list-style: none; | |
43 | font-size: @font-size-base; | |
44 | background-color: @dropdown-bg; | |
45 | border: 1px solid @dropdown-fallback-border; // IE8 fallback | |
46 | border: 1px solid @dropdown-border; | |
47 | border-radius: @border-radius-base; | |
48 | .box-shadow(0 6px 12px rgba(0,0,0,.175)); | |
49 | background-clip: padding-box; | |
50 | ||
51 | // Aligns the dropdown menu to right | |
52 | &.pull-right { | |
53 | right: 0; | |
54 | left: auto; | |
55 | } | |
56 | ||
57 | // Dividers (basically an hr) within the dropdown | |
58 | .divider { | |
59 | .nav-divider(@dropdown-divider-bg); | |
60 | } | |
61 | ||
62 | // Links within the dropdown menu | |
63 | > li > a { | |
64 | display: block; | |
65 | padding: 3px 20px; | |
66 | clear: both; | |
67 | font-weight: normal; | |
68 | line-height: @line-height-base; | |
69 | color: @dropdown-link-color; | |
70 | white-space: nowrap; // prevent links from randomly breaking onto new lines | |
71 | } | |
72 | } | |
73 | ||
74 | // Hover/Focus state | |
75 | .dropdown-menu > li > a { | |
76 | &:hover, | |
77 | &:focus { | |
78 | text-decoration: none; | |
79 | color: @dropdown-link-hover-color; | |
80 | background-color: @dropdown-link-hover-bg; | |
81 | } | |
82 | } | |
83 | ||
84 | // Active state | |
85 | .dropdown-menu > .active > a { | |
86 | &, | |
87 | &:hover, | |
88 | &:focus { | |
89 | color: @dropdown-link-active-color; | |
90 | text-decoration: none; | |
91 | outline: 0; | |
92 | background-color: @dropdown-link-active-bg; | |
93 | } | |
94 | } | |
95 | ||
96 | // Disabled state | |
97 | // | |
98 | // Gray out text and ensure the hover/focus state remains gray | |
99 | ||
100 | .dropdown-menu > .disabled > a { | |
101 | &, | |
102 | &:hover, | |
103 | &:focus { | |
104 | color: @dropdown-link-disabled-color; | |
105 | } | |
106 | } | |
107 | // Nuke hover/focus effects | |
108 | .dropdown-menu > .disabled > a { | |
109 | &:hover, | |
110 | &:focus { | |
111 | text-decoration: none; | |
112 | background-color: transparent; | |
113 | background-image: none; // Remove CSS gradient | |
114 | .reset-filter(); | |
115 | cursor: not-allowed; | |
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 | // Dropdown section headers | |
133 | .dropdown-header { | |
134 | display: block; | |
135 | padding: 3px 20px; | |
136 | font-size: @font-size-small; | |
137 | line-height: @line-height-base; | |
138 | color: @dropdown-header-color; | |
139 | } | |
140 | ||
141 | // Backdrop to catch body clicks on mobile, etc. | |
142 | .dropdown-backdrop { | |
143 | position: fixed; | |
144 | left: 0; | |
145 | right: 0; | |
146 | bottom: 0; | |
147 | top: 0; | |
148 | z-index: @zindex-dropdown - 10; | |
149 | } | |
150 | ||
151 | // Right aligned dropdowns | |
152 | .pull-right > .dropdown-menu { | |
153 | right: 0; | |
154 | left: auto; | |
155 | } | |
156 | ||
157 | // Allow for dropdowns to go bottom up (aka, dropup-menu) | |
158 | // | |
159 | // Just add .dropup after the standard .dropdown class and you're set, bro. | |
160 | // TODO: abstract this so that the navbar fixed styles are not placed here? | |
161 | ||
162 | .dropup, | |
163 | .navbar-fixed-bottom .dropdown { | |
164 | // Reverse the caret | |
165 | .caret { | |
166 | // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this | |
167 | // gets fixed, restore `border-top: 0;`. | |
168 | border-top: 0 dotted; | |
169 | border-bottom: @caret-width-base solid @dropdown-caret-color; | |
170 | content: ""; | |
171 | } | |
172 | // Different positioning for bottom up menu | |
173 | .dropdown-menu { | |
174 | top: auto; | |
175 | bottom: 100%; | |
176 | margin-bottom: 1px; | |
177 | } | |
178 | } | |
179 | ||
180 | ||
181 | // Component alignment | |
182 | // | |
183 | // Reiterate per navbar.less and the modified component alignment there. | |
184 | ||
185 | @media (min-width: @grid-float-breakpoint) { | |
186 | .navbar-right { | |
187 | .dropdown-menu { | |
188 | .pull-right > .dropdown-menu(); | |
189 | } | |
190 | } | |
191 | } | |
192 |