corrade-nucleus-nucleons – Blame information for rev 24
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | office | 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 |