corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
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