corrade-nucleus-nucleons – Blame information for rev
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | 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 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 | list-style: none; |
||
42 | font-size: @font-size-base; |
||
43 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) |
||
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 | // |
||
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: normal; |
||
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 | } |
||
75 | |||
76 | // Hover/Focus state |
||
77 | .dropdown-menu > li > a { |
||
78 | &:hover, |
||
79 | &:focus { |
||
80 | text-decoration: none; |
||
81 | color: @dropdown-link-hover-color; |
||
82 | background-color: @dropdown-link-hover-bg; |
||
83 | } |
||
84 | } |
||
85 | |||
86 | // Active state |
||
87 | .dropdown-menu > .active > a { |
||
88 | &, |
||
89 | &:hover, |
||
90 | &:focus { |
||
91 | color: @dropdown-link-active-color; |
||
92 | text-decoration: none; |
||
93 | outline: 0; |
||
94 | background-color: @dropdown-link-active-bg; |
||
95 | } |
||
96 | } |
||
97 | |||
98 | // Disabled state |
||
99 | // |
||
100 | // Gray out text and ensure the hover/focus state remains gray |
||
101 | |||
102 | .dropdown-menu > .disabled > a { |
||
103 | &, |
||
104 | &:hover, |
||
105 | &:focus { |
||
106 | color: @dropdown-link-disabled-color; |
||
107 | } |
||
108 | |||
109 | // Nuke hover/focus effects |
||
110 | &:hover, |
||
111 | &:focus { |
||
112 | text-decoration: none; |
||
113 | background-color: transparent; |
||
114 | background-image: none; // Remove CSS gradient |
||
115 | .reset-filter(); |
||
116 | cursor: @cursor-disabled; |
||
117 | } |
||
118 | } |
||
119 | |||
120 | // Open state for the dropdown |
||
121 | .open { |
||
122 | // Show the menu |
||
123 | > .dropdown-menu { |
||
124 | display: block; |
||
125 | } |
||
126 | |||
127 | // Remove the outline when :focus is triggered |
||
128 | > a { |
||
129 | outline: 0; |
||
130 | } |
||
131 | } |
||
132 | |||
133 | // Menu positioning |
||
134 | // |
||
135 | // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown |
||
136 | // menu with the parent. |
||
137 | .dropdown-menu-right { |
||
138 | left: auto; // Reset the default from `.dropdown-menu` |
||
139 | right: 0; |
||
140 | } |
||
141 | // With v3, we enabled auto-flipping if you have a dropdown within a right |
||
142 | // aligned nav component. To enable the undoing of that, we provide an override |
||
143 | // to restore the default dropdown menu alignment. |
||
144 | // |
||
145 | // This is only for left-aligning a dropdown menu within a `.navbar-right` or |
||
146 | // `.pull-right` nav component. |
||
147 | .dropdown-menu-left { |
||
148 | left: 0; |
||
149 | right: auto; |
||
150 | } |
||
151 | |||
152 | // Dropdown section headers |
||
153 | .dropdown-header { |
||
154 | display: block; |
||
155 | padding: 3px 20px; |
||
156 | font-size: @font-size-small; |
||
157 | line-height: @line-height-base; |
||
158 | color: @dropdown-header-color; |
||
159 | white-space: nowrap; // as with > li > a |
||
160 | } |
||
161 | |||
162 | // Backdrop to catch body clicks on mobile, etc. |
||
163 | .dropdown-backdrop { |
||
164 | position: fixed; |
||
165 | left: 0; |
||
166 | right: 0; |
||
167 | bottom: 0; |
||
168 | top: 0; |
||
169 | z-index: (@zindex-dropdown - 10); |
||
170 | } |
||
171 | |||
172 | // Right aligned dropdowns |
||
173 | .pull-right > .dropdown-menu { |
||
174 | right: 0; |
||
175 | left: auto; |
||
176 | } |
||
177 | |||
178 | // Allow for dropdowns to go bottom up (aka, dropup-menu) |
||
179 | // |
||
180 | // Just add .dropup after the standard .dropdown class and you're set, bro. |
||
181 | // TODO: abstract this so that the navbar fixed styles are not placed here? |
||
182 | |||
183 | .dropup, |
||
184 | .navbar-fixed-bottom .dropdown { |
||
185 | // Reverse the caret |
||
186 | .caret { |
||
187 | border-top: 0; |
||
188 | border-bottom: @caret-width-base dashed; |
||
189 | border-bottom: @caret-width-base solid ~"\9"; // IE8 |
||
190 | content: ""; |
||
191 | } |
||
192 | // Different positioning for bottom up menu |
||
193 | .dropdown-menu { |
||
194 | top: auto; |
||
195 | bottom: 100%; |
||
196 | margin-bottom: 2px; |
||
197 | } |
||
198 | } |
||
199 | |||
200 | |||
201 | // Component alignment |
||
202 | // |
||
203 | // Reiterate per navbar.less and the modified component alignment there. |
||
204 | |||
205 | @media (min-width: @grid-float-breakpoint) { |
||
206 | .navbar-right { |
||
207 | .dropdown-menu { |
||
208 | .dropdown-menu-right(); |
||
209 | } |
||
210 | // Necessary for overrides of the default right aligned menu. |
||
211 | // Will remove come v4 in all likelihood. |
||
212 | .dropdown-menu-left { |
||
213 | .dropdown-menu-left(); |
||
214 | } |
||
215 | } |
||
216 | } |