Mercurial > wikked

comparison static/bootstrap/less/dropdowns.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 //
2 // Dropdown menus
3 // --------------------------------------------------
4
5
6 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
7 .dropup,
8 .dropdown {
9 position: relative;
10 }
11 .dropdown-toggle {
12 // The caret makes the toggle a bit too tall in IE7
13 *margin-bottom: -3px;
14 }
15 .dropdown-toggle:active,
16 .open .dropdown-toggle {
17 outline: 0;
18 }
19
20 // Dropdown arrow/caret
21 // --------------------
22 .caret {
23 display: inline-block;
24 width: 0;
25 height: 0;
26 vertical-align: top;
27 border-top: 4px solid @black;
28 border-right: 4px solid transparent;
29 border-left: 4px solid transparent;
30 content: "";
31 }
32
33 // Place the caret
34 .dropdown .caret {
35 margin-top: 8px;
36 margin-left: 2px;
37 }
38
39 // The dropdown menu (ul)
40 // ----------------------
41 .dropdown-menu {
42 position: absolute;
43 top: 100%;
44 left: 0;
45 z-index: @zindexDropdown;
46 display: none; // none by default, but block on "open" of the menu
47 float: left;
48 min-width: 160px;
49 padding: 5px 0;
50 margin: 2px 0 0; // override default ul
51 list-style: none;
52 background-color: @dropdownBackground;
53 border: 1px solid #ccc; // Fallback for IE7-8
54 border: 1px solid @dropdownBorder;
55 *border-right-width: 2px;
56 *border-bottom-width: 2px;
57 .border-radius(6px);
58 .box-shadow(0 5px 10px rgba(0,0,0,.2));
59 -webkit-background-clip: padding-box;
60 -moz-background-clip: padding;
61 background-clip: padding-box;
62
63 // Aligns the dropdown menu to right
64 &.pull-right {
65 right: 0;
66 left: auto;
67 }
68
69 // Dividers (basically an hr) within the dropdown
70 .divider {
71 .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
72 }
73
74 // Links within the dropdown menu
75 li > a {
76 display: block;
77 padding: 3px 20px;
78 clear: both;
79 font-weight: normal;
80 line-height: @baseLineHeight;
81 color: @dropdownLinkColor;
82 white-space: nowrap;
83 }
84 }
85
86 // Hover state
87 // -----------
88 .dropdown-menu li > a:hover,
89 .dropdown-menu li > a:focus,
90 .dropdown-submenu:hover > a {
91 text-decoration: none;
92 color: @dropdownLinkColorHover;
93 #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
94 }
95
96 // Active state
97 // ------------
98 .dropdown-menu .active > a,
99 .dropdown-menu .active > a:hover {
100 color: @dropdownLinkColorActive;
101 text-decoration: none;
102 outline: 0;
103 #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
104 }
105
106 // Disabled state
107 // --------------
108 // Gray out text and ensure the hover state remains gray
109 .dropdown-menu .disabled > a,
110 .dropdown-menu .disabled > a:hover {
111 color: @grayLight;
112 }
113 // Nuke hover effects
114 .dropdown-menu .disabled > a:hover {
115 text-decoration: none;
116 background-color: transparent;
117 background-image: none; // Remove CSS gradient
118 .reset-filter();
119 cursor: default;
120 }
121
122 // Open state for the dropdown
123 // ---------------------------
124 .open {
125 // IE7's z-index only goes to the nearest positioned ancestor, which would
126 // make the menu appear below buttons that appeared later on the page
127 *z-index: @zindexDropdown;
128
129 & > .dropdown-menu {
130 display: block;
131 }
132 }
133
134 // Right aligned dropdowns
135 // ---------------------------
136 .pull-right > .dropdown-menu {
137 right: 0;
138 left: auto;
139 }
140
141 // Allow for dropdowns to go bottom up (aka, dropup-menu)
142 // ------------------------------------------------------
143 // Just add .dropup after the standard .dropdown class and you're set, bro.
144 // TODO: abstract this so that the navbar fixed styles are not placed here?
145 .dropup,
146 .navbar-fixed-bottom .dropdown {
147 // Reverse the caret
148 .caret {
149 border-top: 0;
150 border-bottom: 4px solid @black;
151 content: "";
152 }
153 // Different positioning for bottom up menu
154 .dropdown-menu {
155 top: auto;
156 bottom: 100%;
157 margin-bottom: 1px;
158 }
159 }
160
161 // Sub menus
162 // ---------------------------
163 .dropdown-submenu {
164 position: relative;
165 }
166 // Default dropdowns
167 .dropdown-submenu > .dropdown-menu {
168 top: 0;
169 left: 100%;
170 margin-top: -6px;
171 margin-left: -1px;
172 .border-radius(0 6px 6px 6px);
173 }
174 .dropdown-submenu:hover > .dropdown-menu {
175 display: block;
176 }
177
178 // Dropups
179 .dropup .dropdown-submenu > .dropdown-menu {
180 top: auto;
181 bottom: 0;
182 margin-top: 0;
183 margin-bottom: -2px;
184 .border-radius(5px 5px 5px 0);
185 }
186
187 // Caret to indicate there is a submenu
188 .dropdown-submenu > a:after {
189 display: block;
190 content: " ";
191 float: right;
192 width: 0;
193 height: 0;
194 border-color: transparent;
195 border-style: solid;
196 border-width: 5px 0 5px 5px;
197 border-left-color: darken(@dropdownBackground, 20%);
198 margin-top: 5px;
199 margin-right: -10px;
200 }
201 .dropdown-submenu:hover > a:after {
202 border-left-color: @dropdownLinkColorHover;
203 }
204
205 // Left aligned submenus
206 .dropdown-submenu.pull-left {
207 // Undo the float
208 // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
209 float: none;
210
211 // Positioning the submenu
212 > .dropdown-menu {
213 left: -100%;
214 margin-left: 10px;
215 .border-radius(6px 0 6px 6px);
216 }
217 }
218
219 // Tweak nav headers
220 // -----------------
221 // Increase padding from 15px to 20px on sides
222 .dropdown .dropdown-menu .nav-header {
223 padding-left: 20px;
224 padding-right: 20px;
225 }
226
227 // Typeahead
228 // ---------
229 .typeahead {
230 z-index: 1051;
231 margin-top: 2px; // give it some space to breathe
232 .border-radius(@baseBorderRadius);
233 }