Mercurial > wikked

comparison static/bootstrap/less/navs.less @ 88:a5a3d454eac9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated Bootstrap.
author Ludovic Chabant <ludovic@chabant.com>
date Fri, 05 Apr 2013 08:08:12 -0700
parents 130eccd396d8
children d29e2f337b00
comparison
equal deleted inserted replaced
87:c0cf67362fb1 88:a5a3d454eac9
14 14
15 // Make links block level 15 // Make links block level
16 .nav > li > a { 16 .nav > li > a {
17 display: block; 17 display: block;
18 } 18 }
19 .nav > li > a:hover { 19 .nav > li > a:hover,
20 .nav > li > a:focus {
20 text-decoration: none; 21 text-decoration: none;
21 background-color: @grayLighter; 22 background-color: @grayLighter;
22 } 23 }
23 24
24 // Prevent IE8 from misplacing imgs 25 // Prevent IE8 from misplacing imgs
66 } 67 }
67 .nav-list > li > a { 68 .nav-list > li > a {
68 padding: 3px 15px; 69 padding: 3px 15px;
69 } 70 }
70 .nav-list > .active > a, 71 .nav-list > .active > a,
71 .nav-list > .active > a:hover { 72 .nav-list > .active > a:hover,
73 .nav-list > .active > a:focus {
72 color: @white; 74 color: @white;
73 text-shadow: 0 -1px 0 rgba(0,0,0,.2); 75 text-shadow: 0 -1px 0 rgba(0,0,0,.2);
74 background-color: @linkColor; 76 background-color: @linkColor;
75 } 77 }
76 .nav-list [class^="icon-"], 78 .nav-list [class^="icon-"],
120 padding-top: 8px; 122 padding-top: 8px;
121 padding-bottom: 8px; 123 padding-bottom: 8px;
122 line-height: @baseLineHeight; 124 line-height: @baseLineHeight;
123 border: 1px solid transparent; 125 border: 1px solid transparent;
124 .border-radius(4px 4px 0 0); 126 .border-radius(4px 4px 0 0);
125 &:hover { 127 &:hover,
128 &:focus {
126 border-color: @grayLighter @grayLighter #ddd; 129 border-color: @grayLighter @grayLighter #ddd;
127 } 130 }
128 } 131 }
129 // Active state, and it's :hover to override normal :hover 132 // Active state, and it's :hover/:focus to override normal :hover/:focus
130 .nav-tabs > .active > a, 133 .nav-tabs > .active > a,
131 .nav-tabs > .active > a:hover { 134 .nav-tabs > .active > a:hover,
135 .nav-tabs > .active > a:focus {
132 color: @gray; 136 color: @gray;
133 background-color: @bodyBackground; 137 background-color: @bodyBackground;
134 border: 1px solid #ddd; 138 border: 1px solid #ddd;
135 border-bottom-color: transparent; 139 border-bottom-color: transparent;
136 cursor: default; 140 cursor: default;
149 .border-radius(5px); 153 .border-radius(5px);
150 } 154 }
151 155
152 // Active state 156 // Active state
153 .nav-pills > .active > a, 157 .nav-pills > .active > a,
154 .nav-pills > .active > a:hover { 158 .nav-pills > .active > a:hover,
159 .nav-pills > .active > a:focus {
155 color: @white; 160 color: @white;
156 background-color: @linkColor; 161 background-color: @linkColor;
157 } 162 }
158 163
159 164
181 .border-top-radius(4px); 186 .border-top-radius(4px);
182 } 187 }
183 .nav-tabs.nav-stacked > li:last-child > a { 188 .nav-tabs.nav-stacked > li:last-child > a {
184 .border-bottom-radius(4px); 189 .border-bottom-radius(4px);
185 } 190 }
186 .nav-tabs.nav-stacked > li > a:hover { 191 .nav-tabs.nav-stacked > li > a:hover,
192 .nav-tabs.nav-stacked > li > a:focus {
187 border-color: #ddd; 193 border-color: #ddd;
188 z-index: 2; 194 z-index: 2;
189 } 195 }
190 196
191 // Pills 197 // Pills
214 .nav .dropdown-toggle .caret { 220 .nav .dropdown-toggle .caret {
215 border-top-color: @linkColor; 221 border-top-color: @linkColor;
216 border-bottom-color: @linkColor; 222 border-bottom-color: @linkColor;
217 margin-top: 6px; 223 margin-top: 6px;
218 } 224 }
219 .nav .dropdown-toggle:hover .caret { 225 .nav .dropdown-toggle:hover .caret,
226 .nav .dropdown-toggle:focus .caret {
220 border-top-color: @linkColorHover; 227 border-top-color: @linkColorHover;
221 border-bottom-color: @linkColorHover; 228 border-bottom-color: @linkColorHover;
222 } 229 }
223 /* move down carets for tabs */ 230 /* move down carets for tabs */
224 .nav-tabs .dropdown-toggle .caret { 231 .nav-tabs .dropdown-toggle .caret {
234 .nav-tabs .active .dropdown-toggle .caret { 241 .nav-tabs .active .dropdown-toggle .caret {
235 border-top-color: @gray; 242 border-top-color: @gray;
236 border-bottom-color: @gray; 243 border-bottom-color: @gray;
237 } 244 }
238 245
239 // Active:hover dropdown links 246 // Active:hover/:focus dropdown links
240 // ------------------------- 247 // -------------------------
241 .nav > .dropdown.active > a:hover { 248 .nav > .dropdown.active > a:hover,
249 .nav > .dropdown.active > a:focus {
242 cursor: pointer; 250 cursor: pointer;
243 } 251 }
244 252
245 // Open dropdowns 253 // Open dropdowns
246 // ------------------------- 254 // -------------------------
247 .nav-tabs .open .dropdown-toggle, 255 .nav-tabs .open .dropdown-toggle,
248 .nav-pills .open .dropdown-toggle, 256 .nav-pills .open .dropdown-toggle,
249 .nav > li.dropdown.open.active > a:hover { 257 .nav > li.dropdown.open.active > a:hover,
258 .nav > li.dropdown.open.active > a:focus {
250 color: @white; 259 color: @white;
251 background-color: @grayLight; 260 background-color: @grayLight;
252 border-color: @grayLight; 261 border-color: @grayLight;
253 } 262 }
254 .nav li.dropdown.open .caret, 263 .nav li.dropdown.open .caret,
255 .nav li.dropdown.open.active .caret, 264 .nav li.dropdown.open.active .caret,
256 .nav li.dropdown.open a:hover .caret { 265 .nav li.dropdown.open a:hover .caret,
266 .nav li.dropdown.open a:focus .caret {
257 border-top-color: @white; 267 border-top-color: @white;
258 border-bottom-color: @white; 268 border-bottom-color: @white;
259 .opacity(100); 269 .opacity(100);
260 } 270 }
261 271
262 // Dropdowns in stacked tabs 272 // Dropdowns in stacked tabs
263 .tabs-stacked .open > a:hover { 273 .tabs-stacked .open > a:hover,
274 .tabs-stacked .open > a:focus {
264 border-color: @grayLight; 275 border-color: @grayLight;
265 } 276 }
266 277
267 278
268 279
309 margin-top: -1px; 320 margin-top: -1px;
310 margin-bottom: 0; 321 margin-bottom: 0;
311 } 322 }
312 .tabs-below > .nav-tabs > li > a { 323 .tabs-below > .nav-tabs > li > a {
313 .border-radius(0 0 4px 4px); 324 .border-radius(0 0 4px 4px);
314 &:hover { 325 &:hover,
326 &:focus {
315 border-bottom-color: transparent; 327 border-bottom-color: transparent;
316 border-top-color: #ddd; 328 border-top-color: #ddd;
317 } 329 }
318 } 330 }
319 .tabs-below > .nav-tabs > .active > a, 331 .tabs-below > .nav-tabs > .active > a,
320 .tabs-below > .nav-tabs > .active > a:hover { 332 .tabs-below > .nav-tabs > .active > a:hover,
333 .tabs-below > .nav-tabs > .active > a:focus {
321 border-color: transparent #ddd #ddd #ddd; 334 border-color: transparent #ddd #ddd #ddd;
322 } 335 }
323 336
324 // LEFT & RIGHT 337 // LEFT & RIGHT
325 // ------------ 338 // ------------
344 } 357 }
345 .tabs-left > .nav-tabs > li > a { 358 .tabs-left > .nav-tabs > li > a {
346 margin-right: -1px; 359 margin-right: -1px;
347 .border-radius(4px 0 0 4px); 360 .border-radius(4px 0 0 4px);
348 } 361 }
349 .tabs-left > .nav-tabs > li > a:hover { 362 .tabs-left > .nav-tabs > li > a:hover,
363 .tabs-left > .nav-tabs > li > a:focus {
350 border-color: @grayLighter #ddd @grayLighter @grayLighter; 364 border-color: @grayLighter #ddd @grayLighter @grayLighter;
351 } 365 }
352 .tabs-left > .nav-tabs .active > a, 366 .tabs-left > .nav-tabs .active > a,
353 .tabs-left > .nav-tabs .active > a:hover { 367 .tabs-left > .nav-tabs .active > a:hover,
368 .tabs-left > .nav-tabs .active > a:focus {
354 border-color: #ddd transparent #ddd #ddd; 369 border-color: #ddd transparent #ddd #ddd;
355 *border-right-color: @white; 370 *border-right-color: @white;
356 } 371 }
357 372
358 // Tabs on the right 373 // Tabs on the right
363 } 378 }
364 .tabs-right > .nav-tabs > li > a { 379 .tabs-right > .nav-tabs > li > a {
365 margin-left: -1px; 380 margin-left: -1px;
366 .border-radius(0 4px 4px 0); 381 .border-radius(0 4px 4px 0);
367 } 382 }
368 .tabs-right > .nav-tabs > li > a:hover { 383 .tabs-right > .nav-tabs > li > a:hover,
384 .tabs-right > .nav-tabs > li > a:focus {
369 border-color: @grayLighter @grayLighter @grayLighter #ddd; 385 border-color: @grayLighter @grayLighter @grayLighter #ddd;
370 } 386 }
371 .tabs-right > .nav-tabs .active > a, 387 .tabs-right > .nav-tabs .active > a,
372 .tabs-right > .nav-tabs .active > a:hover { 388 .tabs-right > .nav-tabs .active > a:hover,
389 .tabs-right > .nav-tabs .active > a:focus {
373 border-color: #ddd #ddd #ddd transparent; 390 border-color: #ddd #ddd #ddd transparent;
374 *border-left-color: @white; 391 *border-left-color: @white;
375 } 392 }
376 393
377 394
381 398
382 // Gray out text 399 // Gray out text
383 .nav > .disabled > a { 400 .nav > .disabled > a {
384 color: @grayLight; 401 color: @grayLight;
385 } 402 }
386 // Nuke hover effects 403 // Nuke hover/focus effects
387 .nav > .disabled > a:hover { 404 .nav > .disabled > a:hover,
405 .nav > .disabled > a:focus {
388 text-decoration: none; 406 text-decoration: none;
389 background-color: transparent; 407 background-color: transparent;
390 cursor: default; 408 cursor: default;
391 } 409 }