|
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 &.pull-right { |
|
50 right: 0; |
|
51 left: auto; |
|
52 } |
|
53 |
|
54 // Dividers (basically an hr) within the dropdown |
|
55 .divider { |
|
56 .nav-divider(@dropdown-divider-bg); |
|
57 } |
|
58 |
|
59 // Links within the dropdown menu |
|
60 > li > a { |
|
61 display: block; |
|
62 padding: 3px 20px; |
|
63 clear: both; |
|
64 font-weight: normal; |
|
65 line-height: @line-height-base; |
|
66 color: @dropdown-link-color; |
|
67 white-space: nowrap; // prevent links from randomly breaking onto new lines |
|
68 } |
|
69 } |
|
70 |
|
71 // Hover/Focus state |
|
72 .dropdown-menu > li > a { |
|
73 &:hover, |
|
74 &:focus { |
|
75 text-decoration: none; |
|
76 color: @dropdown-link-hover-color; |
|
77 background-color: @dropdown-link-hover-bg; |
|
78 } |
|
79 } |
|
80 |
|
81 // Active state |
|
82 .dropdown-menu > .active > a { |
|
83 &, |
|
84 &:hover, |
|
85 &:focus { |
|
86 color: @dropdown-link-active-color; |
|
87 text-decoration: none; |
|
88 outline: 0; |
|
89 background-color: @dropdown-link-active-bg; |
|
90 } |
|
91 } |
|
92 |
|
93 // Disabled state |
|
94 // |
|
95 // Gray out text and ensure the hover/focus state remains gray |
|
96 |
|
97 .dropdown-menu > .disabled > a { |
|
98 &, |
|
99 &:hover, |
|
100 &:focus { |
|
101 color: @dropdown-link-disabled-color; |
|
102 } |
|
103 } |
|
104 // Nuke hover/focus effects |
|
105 .dropdown-menu > .disabled > a { |
|
106 &:hover, |
|
107 &:focus { |
|
108 text-decoration: none; |
|
109 background-color: transparent; |
|
110 background-image: none; // Remove CSS gradient |
|
111 .reset-filter(); |
|
112 cursor: not-allowed; |
|
113 } |
|
114 } |
|
115 |
|
116 // Open state for the dropdown |
|
117 .open { |
|
118 // Show the menu |
|
119 > .dropdown-menu { |
|
120 display: block; |
|
121 } |
|
122 |
|
123 // Remove the outline when :focus is triggered |
|
124 > a { |
|
125 outline: 0; |
|
126 } |
|
127 } |
|
128 |
|
129 // Dropdown section headers |
|
130 .dropdown-header { |
|
131 display: block; |
|
132 padding: 3px 20px; |
|
133 font-size: @font-size-small; |
|
134 line-height: @line-height-base; |
|
135 color: @dropdown-header-color; |
|
136 } |
|
137 |
|
138 // Backdrop to catch body clicks on mobile, etc. |
|
139 .dropdown-backdrop { |
|
140 position: fixed; |
|
141 left: 0; |
|
142 right: 0; |
|
143 bottom: 0; |
|
144 top: 0; |
|
145 z-index: @zindex-dropdown - 10; |
|
146 } |
|
147 |
|
148 // Right aligned dropdowns |
|
149 .pull-right > .dropdown-menu { |
|
150 right: 0; |
|
151 left: auto; |
|
152 } |
|
153 |
|
154 // Allow for dropdowns to go bottom up (aka, dropup-menu) |
|
155 // |
|
156 // Just add .dropup after the standard .dropdown class and you're set, bro. |
|
157 // TODO: abstract this so that the navbar fixed styles are not placed here? |
|
158 |
|
159 .dropup, |
|
160 .navbar-fixed-bottom .dropdown { |
|
161 // Reverse the caret |
|
162 .caret { |
|
163 border-top: 0; |
|
164 border-bottom: @caret-width-base solid; |
|
165 content: ""; |
|
166 } |
|
167 // Different positioning for bottom up menu |
|
168 .dropdown-menu { |
|
169 top: auto; |
|
170 bottom: 100%; |
|
171 margin-bottom: 1px; |
|
172 } |
|
173 } |
|
174 |
|
175 |
|
176 // Component alignment |
|
177 // |
|
178 // Reiterate per navbar.less and the modified component alignment there. |
|
179 |
|
180 @media (min-width: @grid-float-breakpoint) { |
|
181 .navbar-right { |
|
182 .dropdown-menu { |
|
183 .pull-right > .dropdown-menu(); |
|
184 } |
|
185 } |
|
186 } |
|
187 |