less-rails-bootstrap 2.0.13 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. data/.gitignore +2 -1
  2. data/CHANGELOG.md +2 -2
  3. data/lib/less/rails/bootstrap/version.rb +1 -1
  4. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  5. data/vendor/assets/javascripts/twitter/bootstrap.js +1 -0
  6. data/vendor/assets/javascripts/twitter/bootstrap/affix.js +104 -0
  7. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +1 -1
  8. data/vendor/assets/javascripts/twitter/bootstrap/button.js +1 -1
  9. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +12 -5
  10. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +4 -3
  11. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +66 -16
  12. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +95 -74
  13. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +9 -4
  14. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +9 -9
  15. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +2 -2
  16. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +15 -15
  17. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +2 -3
  18. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +50 -35
  19. data/vendor/frameworks/twitter/bootstrap/accordion.less +3 -2
  20. data/vendor/frameworks/twitter/bootstrap/alerts.less +16 -9
  21. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +1 -1
  22. data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +10 -10
  23. data/vendor/frameworks/twitter/bootstrap/button-groups.less +76 -23
  24. data/vendor/frameworks/twitter/bootstrap/buttons.less +85 -65
  25. data/vendor/frameworks/twitter/bootstrap/carousel.less +13 -3
  26. data/vendor/frameworks/twitter/bootstrap/close.less +4 -2
  27. data/vendor/frameworks/twitter/bootstrap/code.less +6 -5
  28. data/vendor/frameworks/twitter/bootstrap/component-animations.less +5 -2
  29. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +81 -14
  30. data/vendor/frameworks/twitter/bootstrap/forms.less +100 -48
  31. data/vendor/frameworks/twitter/bootstrap/grid.less +17 -1
  32. data/vendor/frameworks/twitter/bootstrap/hero-unit.less +4 -2
  33. data/vendor/frameworks/twitter/bootstrap/labels-badges.less +19 -2
  34. data/vendor/frameworks/twitter/bootstrap/layouts.less +1 -2
  35. data/vendor/frameworks/twitter/bootstrap/mixins.less +98 -73
  36. data/vendor/frameworks/twitter/bootstrap/modals.less +9 -2
  37. data/vendor/frameworks/twitter/bootstrap/navbar.less +238 -127
  38. data/vendor/frameworks/twitter/bootstrap/navs.less +38 -17
  39. data/vendor/frameworks/twitter/bootstrap/pager.less +5 -4
  40. data/vendor/frameworks/twitter/bootstrap/pagination.less +16 -8
  41. data/vendor/frameworks/twitter/bootstrap/popovers.less +101 -33
  42. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +18 -13
  43. data/vendor/frameworks/twitter/bootstrap/reset.less +6 -3
  44. data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +9 -7
  45. data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +86 -68
  46. data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +7 -5
  47. data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +18 -5
  48. data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +17 -15
  49. data/vendor/frameworks/twitter/bootstrap/responsive.less +5 -5
  50. data/vendor/frameworks/twitter/bootstrap/scaffolding.less +26 -4
  51. data/vendor/frameworks/twitter/bootstrap/sprites.less +15 -19
  52. data/vendor/frameworks/twitter/bootstrap/tables.less +60 -11
  53. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +9 -4
  54. data/vendor/frameworks/twitter/bootstrap/tooltip.less +47 -12
  55. data/vendor/frameworks/twitter/bootstrap/type.less +57 -83
  56. data/vendor/frameworks/twitter/bootstrap/utilities.less +9 -2
  57. data/vendor/frameworks/twitter/bootstrap/variables.less +100 -29
  58. data/vendor/frameworks/twitter/bootstrap/wells.less +7 -5
  59. metadata +11 -12
  60. data/vendor/frameworks/twitter/bootstrap/badges.less +0 -36
  61. data/vendor/frameworks/twitter/bootstrap/labels.less +0 -38
@@ -1,5 +1,21 @@
1
+ //
2
+ // Grid system
3
+ // --------------------------------------------------
4
+
5
+
1
6
  // Fixed (940px)
2
7
  #grid > .core(@gridColumnWidth, @gridGutterWidth);
3
8
 
4
9
  // Fluid (940px)
5
- #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
10
+ #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
11
+
12
+ // Reset utility classes due to specificity
13
+ [class*="span"].hide,
14
+ .row-fluid [class*="span"].hide {
15
+ display: none;
16
+ }
17
+
18
+ [class*="span"].pull-right,
19
+ .row-fluid [class*="span"].pull-right {
20
+ float: right;
21
+ }
@@ -1,5 +1,7 @@
1
- // HERO UNIT
2
- // ---------
1
+ //
2
+ // Hero unit
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  .hero-unit {
5
7
  padding: 60px;
@@ -1,5 +1,7 @@
1
- // LABELS & BADGES
2
- // ---------------
1
+ //
2
+ // Labels and badges
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  // Base classes
5
7
  .label,
@@ -53,3 +55,18 @@ a {
53
55
  &-inverse { background-color: @grayDark; }
54
56
  &-inverse[href] { background-color: darken(@grayDark, 10%); }
55
57
  }
58
+
59
+ // Quick fix for labels/badges in buttons
60
+ .btn {
61
+ .label,
62
+ .badge {
63
+ position: relative;
64
+ top: -1px;
65
+ }
66
+ }
67
+ .btn-mini {
68
+ .label,
69
+ .badge {
70
+ top: 0;
71
+ }
72
+ }
@@ -1,7 +1,6 @@
1
1
  //
2
2
  // Layouts
3
- // Fixed-width and fluid (with sidebar) layouts
4
- // --------------------------------------------
3
+ // --------------------------------------------------
5
4
 
6
5
 
7
6
  // Container (centered, fixed-width layouts)
@@ -1,6 +1,6 @@
1
- // Mixins.less
2
- // Snippets of reusable CSS to develop faster and keep code readable
3
- // -----------------------------------------------------------------
1
+ //
2
+ // Mixins
3
+ // --------------------------------------------------
4
4
 
5
5
 
6
6
  // UTILITY MIXINS
@@ -15,6 +15,9 @@
15
15
  &:after {
16
16
  display: table;
17
17
  content: "";
18
+ // Fixes Opera/contenteditable bug:
19
+ // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
20
+ line-height: 0;
18
21
  }
19
22
  &:after {
20
23
  clear: both;
@@ -62,10 +65,6 @@
62
65
 
63
66
  .ie7-restore-right-whitespace() {
64
67
  *margin-right: .3em;
65
-
66
- &:last-child {
67
- *margin-left: 0;
68
- }
69
68
  }
70
69
 
71
70
  // Sizing shortcuts
@@ -155,11 +154,12 @@
155
154
  .input-block-level {
156
155
  display: block;
157
156
  width: 100%;
158
- min-height: 28px; // Make inputs at least the height of their button counterpart
157
+ min-height: 30px; // Make inputs at least the height of their button counterpart
159
158
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
160
159
  }
161
160
 
162
161
 
162
+
163
163
  // Mixin for form field states
164
164
  .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
165
165
  // Set the text color
@@ -176,9 +176,13 @@
176
176
  textarea {
177
177
  color: @textColor;
178
178
  border-color: @borderColor;
179
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
179
180
  &:focus {
180
181
  border-color: darken(@borderColor, 10%);
181
- .box-shadow(0 0 6px lighten(@borderColor, 20%));
182
+ // Write out in full since the lighten() function isn't easily escaped
183
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
184
+ -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
185
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
182
186
  }
183
187
  }
184
188
  // Give a small background color for input-prepend/-append
@@ -202,6 +206,46 @@
202
206
  border-radius: @radius;
203
207
  }
204
208
 
209
+ // Single Corner Border Radius
210
+ .border-top-left-radius(@radius) {
211
+ -webkit-border-top-left-radius: @radius;
212
+ -moz-border-radius-topleft: @radius;
213
+ border-top-left-radius: @radius;
214
+ }
215
+ .border-top-right-radius(@radius) {
216
+ -webkit-border-top-right-radius: @radius;
217
+ -moz-border-radius-topright: @radius;
218
+ border-top-right-radius: @radius;
219
+ }
220
+ .border-bottom-right-radius(@radius) {
221
+ -webkit-border-bottom-right-radius: @radius;
222
+ -moz-border-radius-bottomright: @radius;
223
+ border-bottom-right-radius: @radius;
224
+ }
225
+ .border-bottom-left-radius(@radius) {
226
+ -webkit-border-bottom-left-radius: @radius;
227
+ -moz-border-radius-bottomleft: @radius;
228
+ border-bottom-left-radius: @radius;
229
+ }
230
+
231
+ // Single Side Border Radius
232
+ .border-top-radius(@radius) {
233
+ .border-top-right-radius(@radius);
234
+ .border-top-left-radius(@radius);
235
+ }
236
+ .border-right-radius(@radius) {
237
+ .border-top-right-radius(@radius);
238
+ .border-bottom-right-radius(@radius);
239
+ }
240
+ .border-bottom-radius(@radius) {
241
+ .border-bottom-right-radius(@radius);
242
+ .border-bottom-left-radius(@radius);
243
+ }
244
+ .border-left-radius(@radius) {
245
+ .border-top-left-radius(@radius);
246
+ .border-bottom-left-radius(@radius);
247
+ }
248
+
205
249
  // Drop shadows
206
250
  .box-shadow(@shadow) {
207
251
  -webkit-box-shadow: @shadow;
@@ -213,7 +257,6 @@
213
257
  .transition(@transition) {
214
258
  -webkit-transition: @transition;
215
259
  -moz-transition: @transition;
216
- -ms-transition: @transition;
217
260
  -o-transition: @transition;
218
261
  transition: @transition;
219
262
  }
@@ -248,11 +291,10 @@
248
291
  transform: skew(@x, @y);
249
292
  }
250
293
  .translate3d(@x, @y, @z) {
251
- -webkit-transform: translate(@x, @y, @z);
252
- -moz-transform: translate(@x, @y, @z);
253
- -ms-transform: translate(@x, @y, @z);
254
- -o-transform: translate(@x, @y, @z);
255
- transform: translate(@x, @y, @z);
294
+ -webkit-transform: translate3d(@x, @y, @z);
295
+ -moz-transform: translate3d(@x, @y, @z);
296
+ -o-transform: translate3d(@x, @y, @z);
297
+ transform: translate3d(@x, @y, @z);
256
298
  }
257
299
 
258
300
  // Backface visibility
@@ -262,7 +304,6 @@
262
304
  .backface-visibility(@visibility){
263
305
  -webkit-backface-visibility: @visibility;
264
306
  -moz-backface-visibility: @visibility;
265
- -ms-backface-visibility: @visibility;
266
307
  backface-visibility: @visibility;
267
308
  }
268
309
 
@@ -287,7 +328,6 @@
287
328
  .box-sizing(@boxmodel) {
288
329
  -webkit-box-sizing: @boxmodel;
289
330
  -moz-box-sizing: @boxmodel;
290
- -ms-box-sizing: @boxmodel;
291
331
  box-sizing: @boxmodel;
292
332
  }
293
333
 
@@ -350,7 +390,9 @@
350
390
  }
351
391
 
352
392
  // Gradient Bar Colors for buttons and alerts
353
- .gradientBar(@primaryColor, @secondaryColor) {
393
+ .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
394
+ color: @textColor;
395
+ text-shadow: @textShadow;
354
396
  #gradient > .vertical(@primaryColor, @secondaryColor);
355
397
  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
356
398
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
@@ -361,60 +403,54 @@
361
403
  .horizontal(@startColor: #555, @endColor: #333) {
362
404
  background-color: @endColor;
363
405
  background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
364
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
365
406
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
366
407
  background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
367
408
  background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
368
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
409
+ background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
369
410
  background-repeat: repeat-x;
370
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
411
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
371
412
  }
372
413
  .vertical(@startColor: #555, @endColor: #333) {
373
414
  background-color: mix(@startColor, @endColor, 60%);
374
415
  background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
375
- background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
376
416
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
377
417
  background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
378
418
  background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
379
- background-image: linear-gradient(top, @startColor, @endColor); // The standard
419
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
380
420
  background-repeat: repeat-x;
381
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
421
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
382
422
  }
383
423
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
384
424
  background-color: @endColor;
385
425
  background-repeat: repeat-x;
386
426
  background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
387
- background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
388
427
  background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
389
428
  background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
390
- background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
429
+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
391
430
  }
392
431
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
393
432
  background-color: mix(@midColor, @endColor, 80%);
394
433
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
395
434
  background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
396
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
397
- background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
435
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop*100%, @endColor);
398
436
  background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
399
437
  background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
400
438
  background-repeat: no-repeat;
401
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
439
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
402
440
  }
403
441
  .radial(@innerColor: #555, @outerColor: #333) {
404
442
  background-color: @outerColor;
405
443
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
406
444
  background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
407
445
  background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
408
- background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
409
446
  background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
410
447
  background-repeat: no-repeat;
411
448
  }
412
- .striped(@color, @angle: -45deg) {
449
+ .striped(@color, @angle: 45deg) {
413
450
  background-color: @color;
414
451
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
415
452
  background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
416
453
  background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
417
- background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
418
454
  background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
419
455
  background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
420
456
  }
@@ -448,14 +484,15 @@
448
484
 
449
485
  // Button backgrounds
450
486
  // ------------------
451
- .buttonBackground(@startColor, @endColor) {
487
+ .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
452
488
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
453
- .gradientBar(@startColor, @endColor);
489
+ .gradientBar(@startColor, @endColor, @textColor, @textShadow);
454
490
  *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
455
491
  .reset-filter();
456
492
 
457
493
  // in these cases the gradient won't cover the background, so we override
458
494
  &:hover, &:active, &.active, &.disabled, &[disabled] {
495
+ color: @textColor;
459
496
  background-color: @endColor;
460
497
  *background-color: darken(@endColor, 5%);
461
498
  }
@@ -475,43 +512,7 @@
475
512
  margin-top: (@navbarHeight - @elementHeight) / 2;
476
513
  }
477
514
 
478
- // Popover arrows
479
- // -------------------------
480
- // For tipsies and popovers
481
- #popoverArrow {
482
- .top(@arrowWidth: 5px, @color: @black) {
483
- bottom: 0;
484
- left: 50%;
485
- margin-left: -@arrowWidth;
486
- border-left: @arrowWidth solid transparent;
487
- border-right: @arrowWidth solid transparent;
488
- border-top: @arrowWidth solid @color;
489
- }
490
- .left(@arrowWidth: 5px, @color: @black) {
491
- top: 50%;
492
- right: 0;
493
- margin-top: -@arrowWidth;
494
- border-top: @arrowWidth solid transparent;
495
- border-bottom: @arrowWidth solid transparent;
496
- border-left: @arrowWidth solid @color;
497
- }
498
- .bottom(@arrowWidth: 5px, @color: @black) {
499
- top: 0;
500
- left: 50%;
501
- margin-left: -@arrowWidth;
502
- border-left: @arrowWidth solid transparent;
503
- border-right: @arrowWidth solid transparent;
504
- border-bottom: @arrowWidth solid @color;
505
- }
506
- .right(@arrowWidth: 5px, @color: @black) {
507
- top: 50%;
508
- left: 0;
509
- margin-top: -@arrowWidth;
510
- border-top: @arrowWidth solid transparent;
511
- border-bottom: @arrowWidth solid transparent;
512
- border-right: @arrowWidth solid @color;
513
- }
514
- }
515
+
515
516
 
516
517
  // Grid System
517
518
  // -----------
@@ -579,6 +580,7 @@
579
580
 
580
581
  // Set the container width, and override it for fixed navbars in media queries
581
582
  .container,
583
+ .navbar-static-top .container,
582
584
  .navbar-fixed-top .container,
583
585
  .navbar-fixed-bottom .container { .span(@gridColumns); }
584
586
 
@@ -596,6 +598,23 @@
596
598
  }
597
599
  .spanX (0) {}
598
600
 
601
+ .offsetX (@index) when (@index > 0) {
602
+ (~'.offset@{index}') { .offset(@index); }
603
+ (~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
604
+ .offsetX(@index - 1);
605
+ }
606
+ .offsetX (0) {}
607
+
608
+ .offset (@columns) {
609
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
610
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
611
+ }
612
+
613
+ .offsetFirstChild (@columns) {
614
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
615
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
616
+ }
617
+
599
618
  .span (@columns) {
600
619
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
601
620
  *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
@@ -614,8 +633,9 @@
614
633
  margin-left: 0;
615
634
  }
616
635
 
617
- // generate .spanX
636
+ // generate .spanX and .offsetX
618
637
  .spanX (@gridColumns);
638
+ .offsetX (@gridColumns);
619
639
  }
620
640
 
621
641
  }
@@ -629,7 +649,7 @@
629
649
  .spanX (0) {}
630
650
 
631
651
  .span(@columns) {
632
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
652
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
633
653
  }
634
654
 
635
655
  input,
@@ -638,6 +658,11 @@
638
658
  margin-left: 0; // override margin-left from core grid system
639
659
  }
640
660
 
661
+ // Space grid-sized controls properly if multiple per line
662
+ .controls-row [class*="span"] + [class*="span"] {
663
+ margin-left: @gridGutterWidth;
664
+ }
665
+
641
666
  // generate .spanX
642
667
  .spanX (@gridColumns);
643
668
 
@@ -1,5 +1,7 @@
1
- // MODALS
2
- // ------
1
+ //
2
+ // Modals
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  // Recalculate z-index where appropriate
5
7
  .modal-open {
@@ -54,6 +56,11 @@
54
56
  border-bottom: 1px solid #eee;
55
57
  // Close icon
56
58
  .close { margin-top: 2px; }
59
+ // Heading
60
+ h3 {
61
+ margin: 0;
62
+ line-height: 30px;
63
+ }
57
64
  }
58
65
 
59
66
  // Body (where all modal content resides)
@@ -1,27 +1,32 @@
1
- // NAVBAR (FIXED AND STATIC)
2
- // -------------------------
1
+ //
2
+ // Navbars (Redux)
3
+ // --------------------------------------------------
3
4
 
4
5
 
5
6
  // COMMON STYLES
6
7
  // -------------
7
8
 
9
+ // Base class and wrapper
8
10
  .navbar {
11
+ overflow: visible;
12
+ margin-bottom: @baseLineHeight;
13
+ color: @navbarText;
14
+
9
15
  // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
10
16
  *position: relative;
11
17
  *z-index: 2;
12
-
13
- overflow: visible;
14
- margin-bottom: @baseLineHeight;
15
18
  }
16
19
 
17
- // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
20
+ // Inner for background effects
21
+ // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
18
22
  .navbar-inner {
19
23
  min-height: @navbarHeight;
20
24
  padding-left: 20px;
21
25
  padding-right: 20px;
22
26
  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
27
+ border: 1px solid @navbarBorder;
23
28
  .border-radius(4px);
24
- .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
29
+ .box-shadow(0 1px 4px rgba(0,0,0,.065));
25
30
  }
26
31
 
27
32
  // Set width to auto for default container
@@ -36,48 +41,58 @@
36
41
  }
37
42
 
38
43
 
39
- // Brand, links, text, and buttons
40
- .navbar {
41
- color: @navbarText;
42
- // Hover and active states
43
- .brand:hover {
44
+ // Brand: website or project name
45
+ // -------------------------
46
+ .navbar .brand {
47
+ float: left;
48
+ display: block;
49
+ // Vertically center the text given @navbarHeight
50
+ padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
51
+ margin-left: -20px; // negative indent to left-align the text down the page
52
+ font-size: 20px;
53
+ font-weight: 200;
54
+ color: @navbarBrandColor;
55
+ text-shadow: 0 1px 0 @navbarBackgroundHighlight;
56
+ &:hover {
44
57
  text-decoration: none;
45
58
  }
46
- // Website or project name
47
- .brand {
48
- float: left;
49
- display: block;
50
- // Vertically center the text given @navbarHeight
51
- @elementHeight: 20px;
52
- padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
53
- margin-left: -20px; // negative indent to left-align the text down the page
54
- font-size: 20px;
55
- font-weight: 200;
56
- line-height: 1;
57
- color: @navbarBrandColor;
58
- }
59
- // Plain text in topbar
60
- .navbar-text {
61
- margin-bottom: 0;
62
- line-height: @navbarHeight;
63
- }
64
- // Janky solution for now to account for links outside the .nav
65
- .navbar-link {
66
- color: @navbarLinkColor;
67
- &:hover {
68
- color: @navbarLinkColorHover;
69
- }
70
- }
71
- // Buttons in navbar
72
- .btn,
73
- .btn-group {
74
- .navbarVerticalAlign(30px); // Vertically center in navbar
75
- }
76
- .btn-group .btn {
77
- margin: 0; // then undo the margin here so we don't accidentally double it
59
+ }
60
+
61
+ // Plain text in topbar
62
+ // -------------------------
63
+ .navbar-text {
64
+ margin-bottom: 0;
65
+ line-height: @navbarHeight;
66
+ }
67
+
68
+ // Janky solution for now to account for links outside the .nav
69
+ // -------------------------
70
+ .navbar-link {
71
+ color: @navbarLinkColor;
72
+ &:hover {
73
+ color: @navbarLinkColorHover;
78
74
  }
79
75
  }
80
76
 
77
+ // Dividers in navbar
78
+ // -------------------------
79
+ .navbar .divider-vertical {
80
+ height: @navbarHeight;
81
+ margin: 0 9px;
82
+ border-left: 1px solid @navbarBackground;
83
+ border-right: 1px solid @navbarBackgroundHighlight;
84
+ }
85
+
86
+ // Buttons in navbar
87
+ // -------------------------
88
+ .navbar .btn,
89
+ .navbar .btn-group {
90
+ .navbarVerticalAlign(28px); // Vertically center in navbar
91
+ }
92
+ .navbar .btn-group .btn {
93
+ margin: 0; // then undo the margin here so we don't accidentally double it
94
+ }
95
+
81
96
  // Navbar forms
82
97
  .navbar-form {
83
98
  margin-bottom: 0; // remove default bottom margin
@@ -89,7 +104,8 @@
89
104
  .navbarVerticalAlign(30px); // Vertically center in navbar
90
105
  }
91
106
  input,
92
- select {
107
+ select,
108
+ .btn {
93
109
  display: inline-block;
94
110
  margin-bottom: 0;
95
111
  }
@@ -112,37 +128,34 @@
112
128
  .navbar-search {
113
129
  position: relative;
114
130
  float: left;
115
- .navbarVerticalAlign(28px); // Vertically center in navbar
131
+ .navbarVerticalAlign(30px); // Vertically center in navbar
116
132
  margin-bottom: 0;
117
133
  .search-query {
118
- padding: 4px 9px;
134
+ margin-bottom: 0;
135
+ padding: 4px 14px;
119
136
  #font > .sans-serif(13px, normal, 1);
120
- color: @white;
121
- background-color: @navbarSearchBackground;
122
- border: 1px solid @navbarSearchBorder;
123
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
124
- .transition(none);
125
-
126
- .placeholder(@navbarSearchPlaceholderColor);
127
-
128
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
129
- &:focus,
130
- &.focused {
131
- padding: 5px 10px;
132
- color: @grayDark;
133
- text-shadow: 0 1px 0 @white;
134
- background-color: @navbarSearchBackgroundFocus;
135
- border: 0;
136
- .box-shadow(0 0 3px rgba(0,0,0,.15));
137
- outline: 0;
138
- }
137
+ .border-radius(15px); // redeclare because of specificity of the type attribute
139
138
  }
140
139
  }
141
140
 
142
141
 
143
142
 
144
- // FIXED NAVBAR
145
- // ------------
143
+ // Static navbar
144
+ // -------------------------
145
+
146
+ .navbar-static-top {
147
+ position: static;
148
+ width: 100%;
149
+ margin-bottom: 0; // remove 18px margin for default navbar
150
+ .navbar-inner {
151
+ .border-radius(0);
152
+ }
153
+ }
154
+
155
+
156
+
157
+ // Fixed navbar
158
+ // -------------------------
146
159
 
147
160
  // Shared (top/bottom) styles
148
161
  .navbar-fixed-top,
@@ -151,7 +164,14 @@
151
164
  right: 0;
152
165
  left: 0;
153
166
  z-index: @zindexFixedNavbar;
154
- margin-bottom: 0; // remove 18px margin for static navbar
167
+ margin-bottom: 0; // remove 18px margin for default navbar
168
+ }
169
+ .navbar-fixed-top,
170
+ .navbar-fixed-bottom,
171
+ .navbar-static-top {
172
+ .navbar-inner {
173
+ border: 0;
174
+ }
155
175
  }
156
176
  .navbar-fixed-top .navbar-inner,
157
177
  .navbar-fixed-bottom .navbar-inner {
@@ -160,6 +180,9 @@
160
180
  .border-radius(0);
161
181
  }
162
182
 
183
+ // Reset container width
184
+ // Required here as we reset the width earlier on and the grid mixins don't override early enough
185
+ .navbar-static-top .container,
163
186
  .navbar-fixed-top .container,
164
187
  .navbar-fixed-bottom .container {
165
188
  #grid > .core > .span(@gridColumns);
@@ -169,10 +192,19 @@
169
192
  .navbar-fixed-top {
170
193
  top: 0;
171
194
  }
195
+ .navbar-fixed-top,
196
+ .navbar-static-top {
197
+ .navbar-inner {
198
+ .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
199
+ }
200
+ }
172
201
 
173
202
  // Fixed to bottom
174
203
  .navbar-fixed-bottom {
175
204
  bottom: 0;
205
+ .navbar-inner {
206
+ .box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
207
+ }
176
208
  }
177
209
 
178
210
 
@@ -191,7 +223,6 @@
191
223
  float: right; // redeclare due to specificity
192
224
  }
193
225
  .navbar .nav > li {
194
- display: block;
195
226
  float: left;
196
227
  }
197
228
 
@@ -199,29 +230,17 @@
199
230
  .navbar .nav > li > a {
200
231
  float: none;
201
232
  // Vertically center the text given @navbarHeight
202
- @elementHeight: 20px;
203
- padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
204
- line-height: 19px;
233
+ padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
205
234
  color: @navbarLinkColor;
206
235
  text-decoration: none;
207
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
208
- }
209
- // Buttons
210
- .navbar .btn {
211
- display: inline-block;
212
- padding: 4px 10px 4px;
213
- // Vertically center the button given @navbarHeight
214
- @elementHeight: 28px;
215
- margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
216
- line-height: @baseLineHeight;
236
+ text-shadow: 0 1px 0 @navbarBackgroundHighlight;
217
237
  }
218
- .navbar .btn-group {
219
- margin: 0;
220
- // Vertically center the button given @navbarHeight
221
- @elementHeight: 28px;
222
- padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
238
+ .navbar .nav .dropdown-toggle .caret {
239
+ margin-top: 8px;
223
240
  }
241
+
224
242
  // Hover
243
+ .navbar .nav > li > a:focus,
225
244
  .navbar .nav > li > a:hover {
226
245
  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
227
246
  color: @navbarLinkColorHover;
@@ -229,27 +248,15 @@
229
248
  }
230
249
 
231
250
  // Active nav items
232
- .navbar .nav .active > a,
233
- .navbar .nav .active > a:hover {
251
+ .navbar .nav > .active > a,
252
+ .navbar .nav > .active > a:hover,
253
+ .navbar .nav > .active > a:focus {
234
254
  color: @navbarLinkColorActive;
235
255
  text-decoration: none;
236
256
  background-color: @navbarLinkBackgroundActive;
237
- }
238
-
239
- // Dividers (basically a vertical hr)
240
- .navbar .divider-vertical {
241
- height: @navbarHeight;
242
- width: 1px;
243
- margin: 0 9px;
244
- overflow: hidden;
245
- background-color: @navbarBackground;
246
- border-right: 1px solid @navbarBackgroundHighlight;
247
- }
248
-
249
- // Secondary (floated right) nav in topbar
250
- .navbar .nav.pull-right {
251
- margin-left: 10px;
252
- margin-right: 0;
257
+ -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
258
+ -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
259
+ box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
253
260
  }
254
261
 
255
262
  // Navbar button for toggling navbar items in responsive layouts
@@ -260,7 +267,7 @@
260
267
  padding: 7px 10px;
261
268
  margin-left: 5px;
262
269
  margin-right: 5px;
263
- .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
270
+ .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
264
271
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
265
272
  }
266
273
  .navbar .btn-navbar .icon-bar {
@@ -276,11 +283,12 @@
276
283
  }
277
284
 
278
285
 
286
+
279
287
  // Dropdown menus
280
288
  // --------------
281
289
 
282
290
  // Menu position and menu carets
283
- .navbar .dropdown-menu {
291
+ .navbar .nav > li > .dropdown-menu {
284
292
  &:before {
285
293
  content: '';
286
294
  display: inline-block;
@@ -304,7 +312,7 @@
304
312
  }
305
313
  }
306
314
  // Menu position and menu caret support for dropups via extra dropup class
307
- .navbar-fixed-bottom .dropdown-menu {
315
+ .navbar-fixed-bottom .nav > li > .dropdown-menu {
308
316
  &:before {
309
317
  border-top: 7px solid #ccc;
310
318
  border-top-color: @dropdownBorder;
@@ -319,32 +327,28 @@
319
327
  top: auto;
320
328
  }
321
329
  }
322
- // Dropdown toggle caret
323
- .navbar .nav li.dropdown .dropdown-toggle .caret,
324
- .navbar .nav li.dropdown.open .caret {
325
- border-top-color: @white;
326
- border-bottom-color: @white;
327
- }
328
- .navbar .nav li.dropdown.active .caret {
329
- .opacity(100);
330
- }
331
330
 
332
331
  // Remove background color from open dropdown
333
332
  .navbar .nav li.dropdown.open > .dropdown-toggle,
334
333
  .navbar .nav li.dropdown.active > .dropdown-toggle,
335
334
  .navbar .nav li.dropdown.open.active > .dropdown-toggle {
336
- background-color: transparent;
335
+ background-color: @navbarLinkBackgroundActive;
336
+ color: @navbarLinkColorActive;
337
337
  }
338
-
339
- // Dropdown link on hover
340
- .navbar .nav li.dropdown.active > .dropdown-toggle:hover {
341
- color: @white;
338
+ .navbar .nav li.dropdown > .dropdown-toggle .caret {
339
+ border-top-color: @navbarLinkColor;
340
+ border-bottom-color: @navbarLinkColor;
341
+ }
342
+ .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
343
+ .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
344
+ .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
345
+ border-top-color: @navbarLinkColorActive;
346
+ border-bottom-color: @navbarLinkColorActive;
342
347
  }
343
348
 
344
349
  // Right aligned menus need alt position
345
- // TODO: rejigger this at some point to simplify the selectors
346
- .navbar .pull-right .dropdown-menu,
347
- .navbar .dropdown-menu.pull-right {
350
+ .navbar .pull-right > li > .dropdown-menu,
351
+ .navbar .nav > li > .dropdown-menu.pull-right {
348
352
  left: auto;
349
353
  right: 0;
350
354
  &:before {
@@ -355,4 +359,111 @@
355
359
  left: auto;
356
360
  right: 13px;
357
361
  }
358
- }
362
+ .dropdown-menu {
363
+ left: auto;
364
+ right: 100%;
365
+ margin-left: 0;
366
+ margin-right: -1px;
367
+ .border-radius(6px 0 6px 6px);
368
+ }
369
+ }
370
+
371
+
372
+ // Inverted navbar
373
+ // -------------------------
374
+
375
+ .navbar-inverse {
376
+ color: @navbarInverseText;
377
+
378
+ .navbar-inner {
379
+ #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
380
+ border-color: @navbarInverseBorder;
381
+ }
382
+
383
+ .brand,
384
+ .nav > li > a {
385
+ color: @navbarInverseLinkColor;
386
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
387
+ &:hover {
388
+ color: @navbarInverseLinkColorHover;
389
+ }
390
+ }
391
+
392
+ .nav > li > a:focus,
393
+ .nav > li > a:hover {
394
+ background-color: @navbarInverseLinkBackgroundHover;
395
+ color: @navbarInverseLinkColorHover;
396
+ }
397
+
398
+ .nav .active > a,
399
+ .nav .active > a:hover,
400
+ .nav .active > a:focus {
401
+ color: @navbarInverseLinkColorActive;
402
+ background-color: @navbarInverseLinkBackgroundActive;
403
+ }
404
+
405
+ // Inline text links
406
+ .navbar-link {
407
+ color: @navbarInverseLinkColor;
408
+ &:hover {
409
+ color: @navbarInverseLinkColorHover;
410
+ }
411
+ }
412
+
413
+ // Dividers in navbar
414
+ .divider-vertical {
415
+ border-left-color: @navbarInverseBackground;
416
+ border-right-color: @navbarInverseBackgroundHighlight;
417
+ }
418
+
419
+ // Dropdowns
420
+ .nav li.dropdown.open > .dropdown-toggle,
421
+ .nav li.dropdown.active > .dropdown-toggle,
422
+ .nav li.dropdown.open.active > .dropdown-toggle {
423
+ background-color: @navbarInverseLinkBackgroundActive;
424
+ color: @navbarInverseLinkColorActive;
425
+ }
426
+ .nav li.dropdown > .dropdown-toggle .caret {
427
+ border-top-color: @navbarInverseLinkColor;
428
+ border-bottom-color: @navbarInverseLinkColor;
429
+ }
430
+ .nav li.dropdown.open > .dropdown-toggle .caret,
431
+ .nav li.dropdown.active > .dropdown-toggle .caret,
432
+ .nav li.dropdown.open.active > .dropdown-toggle .caret {
433
+ border-top-color: @navbarInverseLinkColorActive;
434
+ border-bottom-color: @navbarInverseLinkColorActive;
435
+ }
436
+
437
+ // Navbar search
438
+ .navbar-search {
439
+ .search-query {
440
+ color: @white;
441
+ background-color: @navbarInverseSearchBackground;
442
+ border-color: @navbarInverseSearchBorder;
443
+ .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
444
+ .transition(none);
445
+ .placeholder(@navbarInverseSearchPlaceholderColor);
446
+
447
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
448
+ &:focus,
449
+ &.focused {
450
+ padding: 5px 15px;
451
+ color: @grayDark;
452
+ text-shadow: 0 1px 0 @white;
453
+ background-color: @navbarInverseSearchBackgroundFocus;
454
+ border: 0;
455
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
456
+ outline: 0;
457
+ }
458
+ }
459
+ }
460
+
461
+ // Navbar collapse button
462
+ .btn-navbar {
463
+ .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
464
+ }
465
+
466
+ }
467
+
468
+
469
+