bootstrap-on-rails 0.0.2 → 3.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/README.md +16 -7
  4. data/app/assets/fonts/bootstrap/glyphicons-halflings-regular.eot +0 -0
  5. data/app/assets/fonts/bootstrap/glyphicons-halflings-regular.svg +47 -47
  6. data/app/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  7. data/app/assets/fonts/bootstrap/glyphicons-halflings-regular.woff +0 -0
  8. data/app/assets/javascripts/bootstrap/affix.js +48 -32
  9. data/app/assets/javascripts/bootstrap/alert.js +14 -20
  10. data/app/assets/javascripts/bootstrap/button.js +34 -33
  11. data/app/assets/javascripts/bootstrap/carousel.js +60 -54
  12. data/app/assets/javascripts/bootstrap/collapse.js +27 -36
  13. data/app/assets/javascripts/bootstrap/dropdown.js +36 -39
  14. data/app/assets/javascripts/bootstrap/modal.js +90 -56
  15. data/app/assets/javascripts/bootstrap/popover.js +21 -25
  16. data/app/assets/javascripts/bootstrap/scrollspy.js +56 -44
  17. data/app/assets/javascripts/bootstrap/tab.js +17 -24
  18. data/app/assets/javascripts/bootstrap/tooltip.js +158 -87
  19. data/app/assets/javascripts/bootstrap/transition.js +24 -21
  20. data/app/assets/stylesheets/bootstrap/alerts.less +4 -3
  21. data/app/assets/stylesheets/bootstrap/badges.less +27 -23
  22. data/app/assets/stylesheets/bootstrap/bootstrap.less +3 -2
  23. data/app/assets/stylesheets/bootstrap/breadcrumbs.less +4 -1
  24. data/app/assets/stylesheets/bootstrap/button-groups.less +36 -49
  25. data/app/assets/stylesheets/bootstrap/buttons.less +16 -17
  26. data/app/assets/stylesheets/bootstrap/carousel.less +18 -6
  27. data/app/assets/stylesheets/bootstrap/close.less +0 -0
  28. data/app/assets/stylesheets/bootstrap/code.less +16 -1
  29. data/app/assets/stylesheets/bootstrap/component-animations.less +6 -4
  30. data/app/assets/stylesheets/bootstrap/dropdowns.less +33 -10
  31. data/app/assets/stylesheets/bootstrap/forms.less +236 -60
  32. data/app/assets/stylesheets/bootstrap/glyphicons.less +5 -9
  33. data/app/assets/stylesheets/bootstrap/grid.less +40 -49
  34. data/app/assets/stylesheets/bootstrap/input-groups.less +51 -21
  35. data/app/assets/stylesheets/bootstrap/jumbotron.less +15 -7
  36. data/app/assets/stylesheets/bootstrap/labels.less +7 -1
  37. data/app/assets/stylesheets/bootstrap/list-group.less +47 -4
  38. data/app/assets/stylesheets/bootstrap/media.less +0 -0
  39. data/app/assets/stylesheets/bootstrap/mixins.less +35 -854
  40. data/app/assets/stylesheets/bootstrap/mixins/alerts.less +14 -0
  41. data/app/assets/stylesheets/bootstrap/mixins/background-variant.less +8 -0
  42. data/app/assets/stylesheets/bootstrap/mixins/border-radius.less +18 -0
  43. data/app/assets/stylesheets/bootstrap/mixins/buttons.less +50 -0
  44. data/app/assets/stylesheets/bootstrap/mixins/center-block.less +7 -0
  45. data/app/assets/stylesheets/bootstrap/mixins/clearfix.less +22 -0
  46. data/app/assets/stylesheets/bootstrap/mixins/forms.less +81 -0
  47. data/app/assets/stylesheets/bootstrap/mixins/gradients.less +59 -0
  48. data/app/assets/stylesheets/bootstrap/mixins/grid-framework.less +91 -0
  49. data/app/assets/stylesheets/bootstrap/mixins/grid.less +122 -0
  50. data/app/assets/stylesheets/bootstrap/mixins/hide-text.less +21 -0
  51. data/app/assets/stylesheets/bootstrap/mixins/image.less +34 -0
  52. data/app/assets/stylesheets/bootstrap/mixins/labels.less +12 -0
  53. data/app/assets/stylesheets/bootstrap/mixins/list-group.less +29 -0
  54. data/app/assets/stylesheets/bootstrap/mixins/nav-divider.less +10 -0
  55. data/app/assets/stylesheets/bootstrap/mixins/nav-vertical-align.less +9 -0
  56. data/app/assets/stylesheets/bootstrap/mixins/opacity.less +8 -0
  57. data/app/assets/stylesheets/bootstrap/mixins/pagination.less +23 -0
  58. data/app/assets/stylesheets/bootstrap/mixins/panels.less +24 -0
  59. data/app/assets/stylesheets/bootstrap/mixins/progress-bar.less +10 -0
  60. data/app/assets/stylesheets/bootstrap/mixins/reset-filter.less +8 -0
  61. data/app/assets/stylesheets/bootstrap/mixins/resize.less +6 -0
  62. data/app/assets/stylesheets/bootstrap/mixins/responsive-visibility.less +15 -0
  63. data/app/assets/stylesheets/bootstrap/mixins/size.less +10 -0
  64. data/app/assets/stylesheets/bootstrap/mixins/tab-focus.less +9 -0
  65. data/app/assets/stylesheets/bootstrap/mixins/table-row.less +28 -0
  66. data/app/assets/stylesheets/bootstrap/mixins/text-emphasis.less +8 -0
  67. data/app/assets/stylesheets/bootstrap/mixins/text-overflow.less +8 -0
  68. data/app/assets/stylesheets/bootstrap/mixins/vendor-prefixes.less +224 -0
  69. data/app/assets/stylesheets/bootstrap/modals.less +38 -20
  70. data/app/assets/stylesheets/bootstrap/navbar.less +103 -72
  71. data/app/assets/stylesheets/bootstrap/navs.less +3 -23
  72. data/app/assets/stylesheets/bootstrap/normalize.less +153 -134
  73. data/app/assets/stylesheets/bootstrap/pager.less +5 -5
  74. data/app/assets/stylesheets/bootstrap/pagination.less +6 -3
  75. data/app/assets/stylesheets/bootstrap/panels.less +117 -46
  76. data/app/assets/stylesheets/bootstrap/popovers.less +12 -12
  77. data/app/assets/stylesheets/bootstrap/print.less +0 -4
  78. data/app/assets/stylesheets/bootstrap/progress-bars.less +27 -14
  79. data/app/assets/stylesheets/bootstrap/responsive-embed.less +34 -0
  80. data/app/assets/stylesheets/bootstrap/responsive-utilities.less +109 -124
  81. data/app/assets/stylesheets/bootstrap/scaffolding.less +34 -3
  82. data/app/assets/stylesheets/bootstrap/tables.less +23 -26
  83. data/app/assets/stylesheets/bootstrap/theme.less +12 -1
  84. data/app/assets/stylesheets/bootstrap/thumbnails.less +10 -4
  85. data/app/assets/stylesheets/bootstrap/tooltip.less +1 -1
  86. data/app/assets/stylesheets/bootstrap/type.less +151 -117
  87. data/app/assets/stylesheets/bootstrap/utilities.less +1 -0
  88. data/app/assets/stylesheets/bootstrap/variables.less +399 -190
  89. data/app/assets/stylesheets/bootstrap/wells.less +1 -1
  90. data/bootstrap-on-rails.gemspec +1 -1
  91. data/lib/bootstrap-on-rails/version.rb +1 -1
  92. metadata +33 -3
@@ -15,31 +15,36 @@
15
15
  // Container that the modal scrolls within
16
16
  .modal {
17
17
  display: none;
18
- overflow: auto;
19
- overflow-y: scroll;
18
+ overflow: hidden;
20
19
  position: fixed;
21
20
  top: 0;
22
21
  right: 0;
23
22
  bottom: 0;
24
23
  left: 0;
25
- z-index: @zindex-modal-background;
24
+ z-index: @zindex-modal;
25
+ -webkit-overflow-scrolling: touch;
26
+
27
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
28
+ // https://github.com/twbs/bootstrap/pull/10951.
29
+ outline: 0;
26
30
 
27
31
  // When fading in the modal, animate it to slide down
28
32
  &.fade .modal-dialog {
29
- .translate(0, -25%);
33
+ .translate3d(0, -25%, 0);
30
34
  .transition-transform(~"0.3s ease-out");
31
35
  }
32
- &.in .modal-dialog { .translate(0, 0)}
36
+ &.in .modal-dialog { .translate3d(0, 0, 0) }
37
+ }
38
+ .modal-open .modal {
39
+ overflow-x: hidden;
40
+ overflow-y: auto;
33
41
  }
34
42
 
35
43
  // Shell div to position the modal with bottom padding
36
44
  .modal-dialog {
37
45
  position: relative;
38
- margin-left: auto;
39
- margin-right: auto;
40
46
  width: auto;
41
- padding: 10px;
42
- z-index: (@zindex-modal-background + 10);
47
+ margin: 10px;
43
48
  }
44
49
 
45
50
  // Actual modal
@@ -52,7 +57,7 @@
52
57
  .box-shadow(0 3px 9px rgba(0,0,0,.5));
53
58
  background-clip: padding-box;
54
59
  // Remove focus outline from opened modal
55
- outline: none;
60
+ outline: 0;
56
61
  }
57
62
 
58
63
  // Modal background
@@ -62,11 +67,11 @@
62
67
  right: 0;
63
68
  bottom: 0;
64
69
  left: 0;
65
- z-index: (@zindex-modal-background - 10);
70
+ z-index: @zindex-modal-background;
66
71
  background-color: @modal-backdrop-bg;
67
72
  // Fade for backdrop
68
73
  &.fade { .opacity(0); }
69
- &.in { .opacity(.5); }
74
+ &.in { .opacity(@modal-backdrop-opacity); }
70
75
  }
71
76
 
72
77
  // Modal header
@@ -96,11 +101,10 @@
96
101
 
97
102
  // Footer (for actions)
98
103
  .modal-footer {
99
- margin-top: 15px;
100
- padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
104
+ padding: @modal-inner-padding;
101
105
  text-align: right; // right align buttons
102
106
  border-top: 1px solid @modal-footer-border-color;
103
- .clearfix(); // clear it in case folks use .pull-* classes on buttons
107
+ &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
104
108
 
105
109
  // Properly space out buttons
106
110
  .btn + .btn {
@@ -117,16 +121,30 @@
117
121
  }
118
122
  }
119
123
 
120
- // Scale up the modal
121
- @media screen and (min-width: @screen-sm-min) {
124
+ // Measure scrollbar width for padding body during modal show/hide
125
+ .modal-scrollbar-measure {
126
+ position: absolute;
127
+ top: -9999px;
128
+ width: 50px;
129
+ height: 50px;
130
+ overflow: scroll;
131
+ }
122
132
 
133
+ // Scale up the modal
134
+ @media (min-width: @screen-sm-min) {
135
+ // Automatically set modal's width for larger viewports
123
136
  .modal-dialog {
124
- width: 600px;
125
- padding-top: 30px;
126
- padding-bottom: 30px;
137
+ width: @modal-md;
138
+ margin: 30px auto;
127
139
  }
128
140
  .modal-content {
129
141
  .box-shadow(0 5px 15px rgba(0,0,0,.5));
130
142
  }
131
143
 
144
+ // Modal sizes
145
+ .modal-sm { width: @modal-sm; }
146
+ }
147
+
148
+ @media (min-width: @screen-md-min) {
149
+ .modal-lg { width: @modal-lg; }
132
150
  }
@@ -15,7 +15,7 @@
15
15
  border: 1px solid transparent;
16
16
 
17
17
  // Prevent floats from breaking the navbar
18
- .clearfix();
18
+ &:extend(.clearfix all);
19
19
 
20
20
  @media (min-width: @grid-float-breakpoint) {
21
21
  border-radius: @navbar-border-radius;
@@ -29,7 +29,7 @@
29
29
  // styling of responsive aspects.
30
30
 
31
31
  .navbar-header {
32
- .clearfix();
32
+ &:extend(.clearfix all);
33
33
 
34
34
  @media (min-width: @grid-float-breakpoint) {
35
35
  float: left;
@@ -48,13 +48,12 @@
48
48
  // content for the user's viewport.
49
49
 
50
50
  .navbar-collapse {
51
- max-height: 340px;
52
51
  overflow-x: visible;
53
52
  padding-right: @navbar-padding-horizontal;
54
53
  padding-left: @navbar-padding-horizontal;
55
54
  border-top: 1px solid transparent;
56
55
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
57
- .clearfix();
56
+ &:extend(.clearfix all);
58
57
  -webkit-overflow-scrolling: touch;
59
58
 
60
59
  &.in {
@@ -74,18 +73,27 @@
74
73
  }
75
74
 
76
75
  &.in {
77
- overflow-y: auto;
76
+ overflow-y: visible;
78
77
  }
79
78
 
80
- // Account for first and last children spacing
81
- .navbar-nav.navbar-left:first-child {
82
- margin-left: -@navbar-padding-horizontal;
83
- }
84
- .navbar-nav.navbar-right:last-child {
85
- margin-right: -@navbar-padding-horizontal;
79
+ // Undo the collapse side padding for navbars with containers to ensure
80
+ // alignment of right-aligned contents.
81
+ .navbar-fixed-top &,
82
+ .navbar-static-top &,
83
+ .navbar-fixed-bottom & {
84
+ padding-left: 0;
85
+ padding-right: 0;
86
86
  }
87
- .navbar-text:last-child {
88
- margin-right: 0;
87
+ }
88
+ }
89
+
90
+ .navbar-fixed-top,
91
+ .navbar-fixed-bottom {
92
+ .navbar-collapse {
93
+ max-height: @navbar-collapse-max-height;
94
+
95
+ @media (max-width: @screen-xs-min) and (orientation: landscape) {
96
+ max-height: 200px;
89
97
  }
90
98
  }
91
99
  }
@@ -95,14 +103,17 @@
95
103
  //
96
104
  // When a container is present, change the behavior of the header and collapse.
97
105
 
98
- .container > .navbar-header,
99
- .container > .navbar-collapse {
100
- margin-right: -@navbar-padding-horizontal;
101
- margin-left: -@navbar-padding-horizontal;
106
+ .container,
107
+ .container-fluid {
108
+ > .navbar-header,
109
+ > .navbar-collapse {
110
+ margin-right: -@navbar-padding-horizontal;
111
+ margin-left: -@navbar-padding-horizontal;
102
112
 
103
- @media (min-width: @grid-float-breakpoint) {
104
- margin-right: 0;
105
- margin-left: 0;
113
+ @media (min-width: @grid-float-breakpoint) {
114
+ margin-right: 0;
115
+ margin-left: 0;
116
+ }
106
117
  }
107
118
  }
108
119
 
@@ -130,6 +141,7 @@
130
141
  right: 0;
131
142
  left: 0;
132
143
  z-index: @zindex-navbar-fixed;
144
+ .translate3d(0, 0, 0);
133
145
 
134
146
  // Undo the rounded corners
135
147
  @media (min-width: @grid-float-breakpoint) {
@@ -154,6 +166,7 @@
154
166
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
155
167
  font-size: @font-size-large;
156
168
  line-height: @line-height-computed;
169
+ height: @navbar-height;
157
170
 
158
171
  &:hover,
159
172
  &:focus {
@@ -161,7 +174,8 @@
161
174
  }
162
175
 
163
176
  @media (min-width: @grid-float-breakpoint) {
164
- .navbar > .container & {
177
+ .navbar > .container &,
178
+ .navbar > .container-fluid & {
165
179
  margin-left: -@navbar-padding-horizontal;
166
180
  }
167
181
  }
@@ -180,9 +194,16 @@
180
194
  padding: 9px 10px;
181
195
  .navbar-vertical-align(34px);
182
196
  background-color: transparent;
197
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
183
198
  border: 1px solid transparent;
184
199
  border-radius: @border-radius-base;
185
200
 
201
+ // We remove the `outline` here, but later compensate by attaching `:hover`
202
+ // styles to `:focus`.
203
+ &:focus {
204
+ outline: 0;
205
+ }
206
+
186
207
  // Bars
187
208
  .icon-bar {
188
209
  display: block;
@@ -202,7 +223,7 @@
202
223
 
203
224
  // Navbar nav links
204
225
  //
205
- // Builds on top of the `.nav` components with it's own modifier class to make
226
+ // Builds on top of the `.nav` components with its own modifier class to make
206
227
  // the nav the full height of the horizontal nav (above 768px).
207
228
 
208
229
  .navbar-nav {
@@ -214,7 +235,7 @@
214
235
  line-height: @line-height-computed;
215
236
  }
216
237
 
217
- @media (max-width: @screen-xs-max) {
238
+ @media (max-width: @grid-float-breakpoint-max) {
218
239
  // Dropdowns get custom display when collapsed
219
240
  .open .dropdown-menu {
220
241
  position: static;
@@ -246,12 +267,15 @@
246
267
  > li {
247
268
  float: left;
248
269
  > a {
249
- padding-top: ((@navbar-height - @line-height-computed) / 2);
250
- padding-bottom: ((@navbar-height - @line-height-computed) / 2);
270
+ padding-top: @navbar-padding-vertical;
271
+ padding-bottom: @navbar-padding-vertical;
251
272
  }
252
273
  }
253
- }
254
274
 
275
+ &.navbar-right:last-child {
276
+ margin-right: -@navbar-padding-horizontal;
277
+ }
278
+ }
255
279
  }
256
280
 
257
281
 
@@ -285,7 +309,7 @@
285
309
  .form-inline();
286
310
 
287
311
  .form-group {
288
- @media (max-width: @screen-xs-max) {
312
+ @media (max-width: @grid-float-breakpoint-max) {
289
313
  margin-bottom: 5px;
290
314
  }
291
315
  }
@@ -302,6 +326,11 @@
302
326
  padding-top: 0;
303
327
  padding-bottom: 0;
304
328
  .box-shadow(none);
329
+
330
+ // Outdent the form if last child to line up with content down the page
331
+ &.navbar-right:last-child {
332
+ margin-right: -@navbar-padding-horizontal;
333
+ }
305
334
  }
306
335
  }
307
336
 
@@ -318,13 +347,6 @@
318
347
  .border-bottom-radius(0);
319
348
  }
320
349
 
321
- // Right aligned menus need alt position
322
- .navbar-nav.pull-right > li > .dropdown-menu,
323
- .navbar-nav > li > .dropdown-menu.pull-right {
324
- left: auto;
325
- right: 0;
326
- }
327
-
328
350
 
329
351
  // Buttons in navbars
330
352
  //
@@ -332,6 +354,13 @@
332
354
 
333
355
  .navbar-btn {
334
356
  .navbar-vertical-align(@input-height-base);
357
+
358
+ &.btn-sm {
359
+ .navbar-vertical-align(@input-height-small);
360
+ }
361
+ &.btn-xs {
362
+ .navbar-vertical-align(22);
363
+ }
335
364
  }
336
365
 
337
366
 
@@ -340,12 +369,17 @@
340
369
  // Add a class to make any element properly align itself vertically within the navbars.
341
370
 
342
371
  .navbar-text {
343
- float: left;
344
372
  .navbar-vertical-align(@line-height-computed);
345
373
 
346
374
  @media (min-width: @grid-float-breakpoint) {
375
+ float: left;
347
376
  margin-left: @navbar-padding-horizontal;
348
377
  margin-right: @navbar-padding-horizontal;
378
+
379
+ // Outdent the form if last child to line up with content down the page
380
+ &.navbar-right:last-child {
381
+ margin-right: 0;
382
+ }
349
383
  }
350
384
  }
351
385
 
@@ -414,15 +448,8 @@
414
448
  border-color: @navbar-default-border;
415
449
  }
416
450
 
417
- // Dropdown menu items and carets
451
+ // Dropdown menu items
418
452
  .navbar-nav {
419
- // Caret should match text color on hover
420
- > .dropdown > a:hover .caret,
421
- > .dropdown > a:focus .caret {
422
- border-top-color: @navbar-default-link-hover-color;
423
- border-bottom-color: @navbar-default-link-hover-color;
424
- }
425
-
426
453
  // Remove background color from open dropdown
427
454
  > .open > a {
428
455
  &,
@@ -430,19 +457,10 @@
430
457
  &:focus {
431
458
  background-color: @navbar-default-link-active-bg;
432
459
  color: @navbar-default-link-active-color;
433
- .caret {
434
- border-top-color: @navbar-default-link-active-color;
435
- border-bottom-color: @navbar-default-link-active-color;
436
- }
437
460
  }
438
461
  }
439
- > .dropdown > a .caret {
440
- border-top-color: @navbar-default-link-color;
441
- border-bottom-color: @navbar-default-link-color;
442
- }
443
462
 
444
-
445
- @media (max-width: @screen-xs-max) {
463
+ @media (max-width: @grid-float-breakpoint-max) {
446
464
  // Dropdowns get custom display when collapsed
447
465
  .open .dropdown-menu {
448
466
  > li > a {
@@ -485,6 +503,20 @@
485
503
  }
486
504
  }
487
505
 
506
+ .btn-link {
507
+ color: @navbar-default-link-color;
508
+ &:hover,
509
+ &:focus {
510
+ color: @navbar-default-link-hover-color;
511
+ }
512
+ &[disabled],
513
+ fieldset[disabled] & {
514
+ &:hover,
515
+ &:focus {
516
+ color: @navbar-default-link-disabled-color;
517
+ }
518
+ }
519
+ }
488
520
  }
489
521
 
490
522
  // Inverse navbar
@@ -561,31 +593,16 @@
561
593
  color: @navbar-inverse-link-active-color;
562
594
  }
563
595
  }
564
- > .dropdown > a:hover .caret {
565
- border-top-color: @navbar-inverse-link-hover-color;
566
- border-bottom-color: @navbar-inverse-link-hover-color;
567
- }
568
- > .dropdown > a .caret {
569
- border-top-color: @navbar-inverse-link-color;
570
- border-bottom-color: @navbar-inverse-link-color;
571
- }
572
- > .open > a {
573
- &,
574
- &:hover,
575
- &:focus {
576
- .caret {
577
- border-top-color: @navbar-inverse-link-active-color;
578
- border-bottom-color: @navbar-inverse-link-active-color;
579
- }
580
- }
581
- }
582
596
 
583
- @media (max-width: @screen-xs-max) {
597
+ @media (max-width: @grid-float-breakpoint-max) {
584
598
  // Dropdowns get custom display
585
599
  .open .dropdown-menu {
586
600
  > .dropdown-header {
587
601
  border-color: @navbar-inverse-border;
588
602
  }
603
+ .divider {
604
+ background-color: @navbar-inverse-border;
605
+ }
589
606
  > li > a {
590
607
  color: @navbar-inverse-link-color;
591
608
  &:hover,
@@ -621,4 +638,18 @@
621
638
  }
622
639
  }
623
640
 
641
+ .btn-link {
642
+ color: @navbar-inverse-link-color;
643
+ &:hover,
644
+ &:focus {
645
+ color: @navbar-inverse-link-hover-color;
646
+ }
647
+ &[disabled],
648
+ fieldset[disabled] & {
649
+ &:hover,
650
+ &:focus {
651
+ color: @navbar-inverse-link-disabled-color;
652
+ }
653
+ }
654
+ }
624
655
  }