less-rails-bootstrap 2.0.10 → 2.0.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. data/CHANGELOG.md +5 -0
  2. data/lib/less/rails/bootstrap/version.rb +1 -1
  3. data/scripts/update_bootstrap.sh +33 -0
  4. data/test/cases/usage_css_spec.rb +2 -2
  5. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  6. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  7. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +28 -32
  8. data/vendor/assets/javascripts/twitter/bootstrap/button.js +29 -33
  9. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +27 -19
  10. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +44 -25
  11. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +18 -10
  12. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +25 -17
  13. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +13 -10
  14. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +43 -17
  15. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +12 -7
  16. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +40 -35
  17. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +30 -20
  18. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +25 -11
  19. data/vendor/frameworks/twitter/bootstrap/accordion.less +5 -0
  20. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +2 -3
  21. data/vendor/frameworks/twitter/bootstrap/button-groups.less +55 -36
  22. data/vendor/frameworks/twitter/bootstrap/buttons.less +15 -11
  23. data/vendor/frameworks/twitter/bootstrap/close.less +12 -1
  24. data/vendor/frameworks/twitter/bootstrap/code.less +5 -5
  25. data/vendor/frameworks/twitter/bootstrap/component-animations.less +4 -4
  26. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +15 -20
  27. data/vendor/frameworks/twitter/bootstrap/forms.less +58 -29
  28. data/vendor/frameworks/twitter/bootstrap/grid.less +1 -1
  29. data/vendor/frameworks/twitter/bootstrap/labels-badges.less +55 -0
  30. data/vendor/frameworks/twitter/bootstrap/layouts.less +2 -2
  31. data/vendor/frameworks/twitter/bootstrap/mixins.less +53 -36
  32. data/vendor/frameworks/twitter/bootstrap/modals.less +1 -1
  33. data/vendor/frameworks/twitter/bootstrap/navbar.less +65 -42
  34. data/vendor/frameworks/twitter/bootstrap/navs.less +36 -36
  35. data/vendor/frameworks/twitter/bootstrap/pager.less +1 -1
  36. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +14 -6
  37. data/vendor/frameworks/twitter/bootstrap/reset.less +3 -3
  38. data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +23 -0
  39. data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +149 -0
  40. data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +15 -0
  41. data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +146 -0
  42. data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +41 -0
  43. data/vendor/frameworks/twitter/bootstrap/responsive.less +14 -337
  44. data/vendor/frameworks/twitter/bootstrap/sprites.less +41 -8
  45. data/vendor/frameworks/twitter/bootstrap/tables.less +22 -5
  46. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +11 -2
  47. data/vendor/frameworks/twitter/bootstrap/type.less +7 -6
  48. data/vendor/frameworks/twitter/bootstrap/variables.less +12 -8
  49. metadata +11 -4
@@ -70,11 +70,11 @@
70
70
 
71
71
  // Sizing shortcuts
72
72
  // -------------------------
73
- .size(@height: 5px, @width: 5px) {
73
+ .size(@height, @width) {
74
74
  width: @width;
75
75
  height: @height;
76
76
  }
77
- .square(@size: 5px) {
77
+ .square(@size) {
78
78
  .size(@size, @size);
79
79
  }
80
80
 
@@ -98,13 +98,15 @@
98
98
  white-space: nowrap;
99
99
  }
100
100
 
101
- // New image replacement
101
+ // CSS image replacement
102
102
  // -------------------------
103
- // Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
103
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
104
104
  .hide-text {
105
- overflow: hidden;
106
- text-indent: 100%;
107
- white-space: nowrap;
105
+ font: 0/0 a;
106
+ color: transparent;
107
+ text-shadow: none;
108
+ background-color: transparent;
109
+ border: 0;
108
110
  }
109
111
 
110
112
 
@@ -114,13 +116,13 @@
114
116
  #font {
115
117
  #family {
116
118
  .serif() {
117
- font-family: Georgia, "Times New Roman", Times, serif;
119
+ font-family: @serifFontFamily;
118
120
  }
119
121
  .sans-serif() {
120
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
122
+ font-family: @sansFontFamily;
121
123
  }
122
124
  .monospace() {
123
- font-family: Menlo, Monaco, "Courier New", monospace;
125
+ font-family: @monoFontFamily;
124
126
  }
125
127
  }
126
128
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
@@ -150,9 +152,8 @@
150
152
  .input-block-level {
151
153
  display: block;
152
154
  width: 100%;
153
- min-height: 28px; /* Make inputs at least the height of their button counterpart */
154
- /* Makes inputs behave like true block-level elements */
155
- .box-sizing(border-box);
155
+ min-height: 28px; // Make inputs at least the height of their button counterpart
156
+ .box-sizing(border-box); // Makes inputs behave like true block-level elements
156
157
  }
157
158
 
158
159
 
@@ -190,14 +191,14 @@
190
191
  // --------------------------------------------------
191
192
 
192
193
  // Border Radius
193
- .border-radius(@radius: 5px) {
194
+ .border-radius(@radius) {
194
195
  -webkit-border-radius: @radius;
195
196
  -moz-border-radius: @radius;
196
197
  border-radius: @radius;
197
198
  }
198
199
 
199
200
  // Drop shadows
200
- .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
201
+ .box-shadow(@shadow) {
201
202
  -webkit-box-shadow: @shadow;
202
203
  -moz-box-shadow: @shadow;
203
204
  box-shadow: @shadow;
@@ -227,21 +228,21 @@
227
228
  -o-transform: scale(@ratio);
228
229
  transform: scale(@ratio);
229
230
  }
230
- .translate(@x: 0, @y: 0) {
231
+ .translate(@x, @y) {
231
232
  -webkit-transform: translate(@x, @y);
232
233
  -moz-transform: translate(@x, @y);
233
234
  -ms-transform: translate(@x, @y);
234
235
  -o-transform: translate(@x, @y);
235
236
  transform: translate(@x, @y);
236
237
  }
237
- .skew(@x: 0, @y: 0) {
238
+ .skew(@x, @y) {
238
239
  -webkit-transform: skew(@x, @y);
239
240
  -moz-transform: skew(@x, @y);
240
241
  -ms-transform: skew(@x, @y);
241
242
  -o-transform: skew(@x, @y);
242
243
  transform: skew(@x, @y);
243
244
  }
244
- .translate3d(@x: 0, @y: 0, @z: 0) {
245
+ .translate3d(@x, @y, @z) {
245
246
  -webkit-transform: translate(@x, @y, @z);
246
247
  -moz-transform: translate(@x, @y, @z);
247
248
  -ms-transform: translate(@x, @y, @z);
@@ -249,6 +250,17 @@
249
250
  transform: translate(@x, @y, @z);
250
251
  }
251
252
 
253
+ // Backface visibility
254
+ // Prevent browsers from flickering when using CSS 3D transforms.
255
+ // Default value is `visible`, but can be changed to `hidden
256
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
257
+ .backface-visibility(@visibility){
258
+ -webkit-backface-visibility: @visibility;
259
+ -moz-backface-visibility: @visibility;
260
+ -ms-backface-visibility: @visibility;
261
+ backface-visibility: @visibility;
262
+ }
263
+
252
264
  // Background clipping
253
265
  // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
254
266
  .background-clip(@clip) {
@@ -279,18 +291,19 @@
279
291
  .user-select(@select) {
280
292
  -webkit-user-select: @select;
281
293
  -moz-user-select: @select;
294
+ -ms-user-select: @select;
282
295
  -o-user-select: @select;
283
296
  user-select: @select;
284
297
  }
285
298
 
286
299
  // Resize anything
287
- .resizable(@direction: both) {
300
+ .resizable(@direction) {
288
301
  resize: @direction; // Options: horizontal, vertical, both
289
302
  overflow: auto; // Safari fix
290
303
  }
291
304
 
292
305
  // CSS3 Content Columns
293
- .content-columns(@columnCount, @columnGap: @gridColumnGutter) {
306
+ .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
294
307
  -webkit-column-count: @columnCount;
295
308
  -moz-column-count: @columnCount;
296
309
  column-count: @columnCount;
@@ -300,9 +313,9 @@
300
313
  }
301
314
 
302
315
  // Opacity
303
- .opacity(@opacity: 100) {
316
+ .opacity(@opacity) {
304
317
  opacity: @opacity / 100;
305
- filter: ~"alpha(opacity=@{opacity})";
318
+ filter: ~"alpha(opacity=@{opacity})";
306
319
  }
307
320
 
308
321
 
@@ -393,7 +406,7 @@
393
406
  }
394
407
  // Reset filters for IE
395
408
  .reset-filter() {
396
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
409
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
397
410
  }
398
411
 
399
412
 
@@ -405,18 +418,17 @@
405
418
  // -------------------------
406
419
  // Dividers (basically an hr) within dropdowns and nav lists
407
420
  .nav-divider() {
408
- height: 1px;
409
- margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
410
- overflow: hidden;
411
- background-color: #e5e5e5;
412
- border-bottom: 1px solid @white;
413
-
414
421
  // IE7 needs a set width since we gave a height. Restricting just
415
422
  // to IE7 to keep the 1px left/right space in other browsers.
416
423
  // It is unclear where IE is getting the extra space that we need
417
424
  // to negative-margin away, but so it goes.
418
425
  *width: 100%;
426
+ height: 1px;
427
+ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
419
428
  *margin: -5px 0 5px;
429
+ overflow: hidden;
430
+ background-color: #e5e5e5;
431
+ border-bottom: 1px solid @white;
420
432
  }
421
433
 
422
434
  // Button backgrounds
@@ -424,11 +436,13 @@
424
436
  .buttonBackground(@startColor, @endColor) {
425
437
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
426
438
  .gradientBar(@startColor, @endColor);
439
+ *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
427
440
  .reset-filter();
428
441
 
429
442
  // in these cases the gradient won't cover the background, so we override
430
443
  &:hover, &:active, &.active, &.disabled, &[disabled] {
431
444
  background-color: @endColor;
445
+ *background-color: darken(@endColor, 5%);
432
446
  }
433
447
 
434
448
  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
@@ -489,8 +503,8 @@
489
503
 
490
504
  // Centered container element
491
505
  .container-fixed() {
492
- margin-left: auto;
493
506
  margin-right: auto;
507
+ margin-left: auto;
494
508
  .clearfix();
495
509
  }
496
510
 
@@ -507,9 +521,9 @@
507
521
  margin-left: @gridGutterWidth * -1;
508
522
  .clearfix();
509
523
  }
510
- .makeColumn(@columns: 1) {
524
+ .makeColumn(@columns: 1, @offset: 0) {
511
525
  float: left;
512
- margin-left: @gridGutterWidth;
526
+ margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
513
527
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
514
528
  }
515
529
 
@@ -531,7 +545,7 @@
531
545
  .offsetX (0) {}
532
546
 
533
547
  .offset (@columns) {
534
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
548
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
535
549
  }
536
550
 
537
551
  .span (@columns) {
@@ -562,23 +576,26 @@
562
576
  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
563
577
 
564
578
  .spanX (@index) when (@index > 0) {
565
- (~"> .span@{index}") { .span(@index); }
579
+ (~".span@{index}") { .span(@index); }
566
580
  .spanX(@index - 1);
567
581
  }
568
582
  .spanX (0) {}
569
583
 
570
584
  .span (@columns) {
571
585
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
586
+ *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
572
587
  }
573
588
 
574
589
  .row-fluid {
575
590
  width: 100%;
576
591
  .clearfix();
577
- > [class*="span"] {
592
+ [class*="span"] {
593
+ .input-block-level();
578
594
  float: left;
579
595
  margin-left: @fluidGridGutterWidth;
596
+ *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
580
597
  }
581
- > [class*="span"]:first-child {
598
+ [class*="span"]:first-child {
582
599
  margin-left: 0;
583
600
  }
584
601
 
@@ -56,7 +56,7 @@
56
56
  .close { margin-top: 2px; }
57
57
  }
58
58
 
59
- // Body (where all modal content resises)
59
+ // Body (where all modal content resides)
60
60
  .modal-body {
61
61
  overflow-y: auto;
62
62
  max-height: 400px;
@@ -16,12 +16,12 @@
16
16
 
17
17
  // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
18
18
  .navbar-inner {
19
+ min-height: @navbarHeight;
19
20
  padding-left: 20px;
20
21
  padding-right: 20px;
21
22
  #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
22
23
  .border-radius(4px);
23
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
24
- .box-shadow(@shadow);
24
+ .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)");
25
25
  }
26
26
 
27
27
  // Set width to auto for default container
@@ -30,28 +30,6 @@
30
30
  width: auto;
31
31
  }
32
32
 
33
- // Navbar button for toggling navbar items in responsive layouts
34
- .btn-navbar {
35
- display: none;
36
- float: right;
37
- padding: 7px 10px;
38
- margin-left: 5px;
39
- margin-right: 5px;
40
- .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
41
- @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
42
- .box-shadow(@shadow);
43
- }
44
- .btn-navbar .icon-bar {
45
- display: block;
46
- width: 18px;
47
- height: 2px;
48
- background-color: #f5f5f5;
49
- .border-radius(1px);
50
- .box-shadow(0 1px 0 rgba(0,0,0,.25));
51
- }
52
- .btn-navbar .icon-bar + .icon-bar {
53
- margin-top: 3px;
54
- }
55
33
  // Override the default collapsed state
56
34
  .nav-collapse.collapse {
57
35
  height: auto;
@@ -69,25 +47,34 @@
69
47
  .brand {
70
48
  float: left;
71
49
  display: block;
72
- padding: 8px 20px 12px;
50
+ // Vertically center the text given @navbarHeight
51
+ @elementHeight: 20px;
52
+ padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
73
53
  margin-left: -20px; // negative indent to left-align the text down the page
74
54
  font-size: 20px;
75
55
  font-weight: 200;
76
56
  line-height: 1;
77
- color: @white;
57
+ color: @navbarBrandColor;
78
58
  }
79
59
  // Plain text in topbar
80
60
  .navbar-text {
81
61
  margin-bottom: 0;
82
62
  line-height: @navbarHeight;
83
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
+ }
84
71
  // Buttons in navbar
85
72
  .btn,
86
73
  .btn-group {
87
74
  .navbarVerticalAlign(30px); // Vertically center in navbar
88
75
  }
89
76
  .btn-group .btn {
90
- margin-top: 0; // then undo the margin here so we don't accidentally double it
77
+ margin: 0; // then undo the margin here so we don't accidentally double it
91
78
  }
92
79
  }
93
80
 
@@ -133,8 +120,7 @@
133
120
  color: @white;
134
121
  background-color: @navbarSearchBackground;
135
122
  border: 1px solid @navbarSearchBorder;
136
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
137
- .box-shadow(@shadow);
123
+ .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)");
138
124
  .transition(none);
139
125
 
140
126
  // Placeholder text gets special styles; can't be a grouped selector
@@ -218,12 +204,29 @@
218
204
  // Links
219
205
  .navbar .nav > li > a {
220
206
  float: none;
221
- padding: 10px 10px 11px;
207
+ // Vertically center the text given @navbarHeight
208
+ @elementHeight: 20px;
209
+ padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
222
210
  line-height: 19px;
223
211
  color: @navbarLinkColor;
224
212
  text-decoration: none;
225
213
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
226
214
  }
215
+ // Buttons
216
+ .navbar .btn {
217
+ display: inline-block;
218
+ padding: 4px 10px 4px;
219
+ // Vertically center the button given @navbarHeight
220
+ @elementHeight: 28px;
221
+ margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
222
+ line-height: @baseLineHeight;
223
+ }
224
+ .navbar .btn-group {
225
+ margin: 0;
226
+ // Vertically center the button given @navbarHeight
227
+ @elementHeight: 28px;
228
+ padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2);
229
+ }
227
230
  // Hover
228
231
  .navbar .nav > li > a:hover {
229
232
  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
@@ -255,6 +258,28 @@
255
258
  margin-right: 0;
256
259
  }
257
260
 
261
+ // Navbar button for toggling navbar items in responsive layouts
262
+ // These definitions need to come after '.navbar .btn'
263
+ .navbar .btn-navbar {
264
+ display: none;
265
+ float: right;
266
+ padding: 7px 10px;
267
+ margin-left: 5px;
268
+ margin-right: 5px;
269
+ .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
270
+ .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
271
+ }
272
+ .navbar .btn-navbar .icon-bar {
273
+ display: block;
274
+ width: 18px;
275
+ height: 2px;
276
+ background-color: #f5f5f5;
277
+ .border-radius(1px);
278
+ .box-shadow(0 1px 0 rgba(0,0,0,.25));
279
+ }
280
+ .btn-navbar .icon-bar + .icon-bar {
281
+ margin-top: 3px;
282
+ }
258
283
 
259
284
 
260
285
  // Dropdown menus
@@ -262,8 +287,6 @@
262
287
 
263
288
  // Menu position and menu carets
264
289
  .navbar .dropdown-menu {
265
- margin-top: 1px;
266
- .border-radius(4px);
267
290
  &:before {
268
291
  content: '';
269
292
  display: inline-block;
@@ -303,31 +326,31 @@
303
326
  }
304
327
  }
305
328
  // Dropdown toggle caret
306
- .navbar .nav .dropdown-toggle .caret,
307
- .navbar .nav .open.dropdown .caret {
329
+ .navbar .nav li.dropdown .dropdown-toggle .caret,
330
+ .navbar .nav li.dropdown.open .caret {
308
331
  border-top-color: @white;
309
332
  border-bottom-color: @white;
310
333
  }
311
- .navbar .nav .active .caret {
334
+ .navbar .nav li.dropdown.active .caret {
312
335
  .opacity(100);
313
336
  }
314
337
 
315
338
  // Remove background color from open dropdown
316
- .navbar .nav .open > .dropdown-toggle,
317
- .navbar .nav .active > .dropdown-toggle,
318
- .navbar .nav .open.active > .dropdown-toggle {
339
+ .navbar .nav li.dropdown.open > .dropdown-toggle,
340
+ .navbar .nav li.dropdown.active > .dropdown-toggle,
341
+ .navbar .nav li.dropdown.open.active > .dropdown-toggle {
319
342
  background-color: transparent;
320
343
  }
321
344
 
322
345
  // Dropdown link on hover
323
- .navbar .nav .active > .dropdown-toggle:hover {
346
+ .navbar .nav li.dropdown.active > .dropdown-toggle:hover {
324
347
  color: @white;
325
348
  }
326
349
 
327
350
  // Right aligned menus need alt position
328
351
  // TODO: rejigger this at some point to simplify the selectors
329
- .navbar .nav.pull-right .dropdown-menu,
330
- .navbar .nav .dropdown-menu.pull-right {
352
+ .navbar .pull-right .dropdown-menu,
353
+ .navbar .dropdown-menu.pull-right {
331
354
  left: auto;
332
355
  right: 0;
333
356
  &:before {
@@ -338,4 +361,4 @@
338
361
  left: auto;
339
362
  right: 13px;
340
363
  }
341
- }
364
+ }