anjlab-bootstrap-rails 2.0.2.1 → 2.0.3.rc

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 (47) hide show
  1. data/Rakefile +36 -25
  2. data/lib/bootstrap-rails/version.rb +1 -1
  3. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  4. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  5. data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
  6. data/vendor/assets/javascripts/bootstrap-button.js +29 -33
  7. data/vendor/assets/javascripts/bootstrap-carousel.js +27 -19
  8. data/vendor/assets/javascripts/bootstrap-collapse.js +44 -25
  9. data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
  10. data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
  11. data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
  12. data/vendor/assets/javascripts/bootstrap-scrollspy.js +43 -17
  13. data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
  14. data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
  15. data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
  16. data/vendor/assets/javascripts/bootstrap-typeahead.js +25 -11
  17. data/vendor/assets/stylesheets/accordion.scss +5 -0
  18. data/vendor/assets/stylesheets/bootstrap.scss +2 -3
  19. data/vendor/assets/stylesheets/button-groups.scss +55 -36
  20. data/vendor/assets/stylesheets/buttons.scss +15 -11
  21. data/vendor/assets/stylesheets/close.scss +12 -1
  22. data/vendor/assets/stylesheets/code.scss +4 -4
  23. data/vendor/assets/stylesheets/component-animations.scss +5 -5
  24. data/vendor/assets/stylesheets/dropdowns.scss +15 -20
  25. data/vendor/assets/stylesheets/forms.scss +58 -30
  26. data/vendor/assets/stylesheets/labels-badges.scss +54 -0
  27. data/vendor/assets/stylesheets/layouts.scss +1 -1
  28. data/vendor/assets/stylesheets/mixins.scss +58 -46
  29. data/vendor/assets/stylesheets/modals.scss +1 -1
  30. data/vendor/assets/stylesheets/navbar.scss +64 -41
  31. data/vendor/assets/stylesheets/navs.scss +36 -36
  32. data/vendor/assets/stylesheets/progress-bars.scss +14 -6
  33. data/vendor/assets/stylesheets/reset.scss +3 -3
  34. data/vendor/assets/stylesheets/responsive-1200px-min.scss +26 -0
  35. data/vendor/assets/stylesheets/responsive-767px-max.scss +149 -0
  36. data/vendor/assets/stylesheets/responsive-768px-979px.scss +17 -0
  37. data/vendor/assets/stylesheets/responsive-navbar.scss +146 -0
  38. data/vendor/assets/stylesheets/responsive-utilities.scss +41 -0
  39. data/vendor/assets/stylesheets/responsive.scss +14 -337
  40. data/vendor/assets/stylesheets/sprites.scss +37 -5
  41. data/vendor/assets/stylesheets/tables.scss +22 -5
  42. data/vendor/assets/stylesheets/thumbnails.scss +14 -2
  43. data/vendor/assets/stylesheets/type.scss +7 -6
  44. data/vendor/assets/stylesheets/variables.scss +10 -6
  45. metadata +43 -16
  46. data/vendor/assets/stylesheets/badges.scss +0 -36
  47. data/vendor/assets/stylesheets/labels.scss +0 -38
@@ -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
  @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground);
22
23
  @include border-radius(4px);
23
- $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
24
- @include box-shadow($shadow);
24
+ @include 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
- @include button-background($navbarBackgroundHighlight, $navbarBackground);
41
- $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
42
- @include box-shadow($shadow);
43
- }
44
- .btn-navbar .icon-bar {
45
- display: block;
46
- width: 18px;
47
- height: 2px;
48
- background-color: #f5f5f5;
49
- @include border-radius(1px);
50
- @include 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
  @include navbar-vertical-align(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
- @include box-shadow($shadow);
123
+ @include box-shadow((inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)));
138
124
  @include 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
+ @include button-background($navbarBackgroundHighlight, $navbarBackground);
270
+ @include 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
+ @include border-radius(1px);
278
+ @include 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
- @include 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
  @include 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 {
@@ -21,6 +21,11 @@
21
21
  background-color: $grayLighter;
22
22
  }
23
23
 
24
+ // Redeclare pull classes because of specifity
25
+ .nav > .pull-right {
26
+ float: right;
27
+ }
28
+
24
29
  // Nav headers (for dropdowns and lists)
25
30
  .nav .nav-header {
26
31
  display: block;
@@ -98,12 +103,10 @@
98
103
  .nav-tabs {
99
104
  border-bottom: 1px solid #ddd;
100
105
  }
101
-
102
106
  // Make the list-items overlay the bottom border
103
107
  .nav-tabs > li {
104
108
  margin-bottom: -1px;
105
109
  }
106
-
107
110
  // Actual tabs (as links)
108
111
  .nav-tabs > li > a {
109
112
  padding-top: 8px;
@@ -125,6 +128,7 @@
125
128
  cursor: default;
126
129
  }
127
130
 
131
+
128
132
  // PILLS
129
133
  // -----
130
134
 
@@ -189,14 +193,11 @@
189
193
  // DROPDOWNS
190
194
  // ---------
191
195
 
192
- // Position the menu
193
- .nav-tabs .dropdown-menu,
194
- .nav-pills .dropdown-menu {
195
- margin-top: 1px;
196
- border-width: 1px;
196
+ .nav-tabs .dropdown-menu {
197
+ @include border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu
197
198
  }
198
199
  .nav-pills .dropdown-menu {
199
- @include border-radius(4px);
200
+ @include border-radius(4px); // make rounded corners match the pills
200
201
  }
201
202
 
202
203
  // Default dropdown links
@@ -233,14 +234,14 @@
233
234
  // -------------------------
234
235
  .nav-tabs .open .dropdown-toggle,
235
236
  .nav-pills .open .dropdown-toggle,
236
- .nav > .open.active > a:hover {
237
+ .nav > li.dropdown.open.active > a:hover {
237
238
  color: $white;
238
239
  background-color: $grayLight;
239
240
  border-color: $grayLight;
240
241
  }
241
- .nav .open .caret,
242
- .nav .open.active .caret,
243
- .nav .open a:hover .caret {
242
+ .nav li.dropdown.open .caret,
243
+ .nav li.dropdown.open.active .caret,
244
+ .nav li.dropdown.open a:hover .caret {
244
245
  border-top-color: $white;
245
246
  border-bottom-color: $white;
246
247
  @include opacity(100);
@@ -265,14 +266,13 @@
265
266
  @include clearfix();
266
267
  }
267
268
  .tab-content {
268
- display: table; // prevent content from running below tabs
269
- width: 100%;
269
+ overflow: auto; // prevent content from running below tabs
270
270
  }
271
271
 
272
272
  // Remove border on bottom, left, right
273
- .tabs-below .nav-tabs,
274
- .tabs-right .nav-tabs,
275
- .tabs-left .nav-tabs {
273
+ .tabs-below > .nav-tabs,
274
+ .tabs-right > .nav-tabs,
275
+ .tabs-left > .nav-tabs {
276
276
  border-bottom: 0;
277
277
  }
278
278
 
@@ -290,22 +290,22 @@
290
290
  // BOTTOM
291
291
  // ------
292
292
 
293
- .tabs-below .nav-tabs {
293
+ .tabs-below > .nav-tabs {
294
294
  border-top: 1px solid #ddd;
295
295
  }
296
- .tabs-below .nav-tabs > li {
296
+ .tabs-below > .nav-tabs > li {
297
297
  margin-top: -1px;
298
298
  margin-bottom: 0;
299
299
  }
300
- .tabs-below .nav-tabs > li > a {
300
+ .tabs-below > .nav-tabs > li > a {
301
301
  @include border-radius(0 0 4px 4px);
302
302
  &:hover {
303
303
  border-bottom-color: transparent;
304
304
  border-top-color: #ddd;
305
305
  }
306
306
  }
307
- .tabs-below .nav-tabs .active > a,
308
- .tabs-below .nav-tabs .active > a:hover {
307
+ .tabs-below > .nav-tabs > .active > a,
308
+ .tabs-below > .nav-tabs > .active > a:hover {
309
309
  border-color: transparent #ddd #ddd #ddd;
310
310
  }
311
311
 
@@ -313,51 +313,51 @@
313
313
  // ------------
314
314
 
315
315
  // Common styles
316
- .tabs-left .nav-tabs > li,
317
- .tabs-right .nav-tabs > li {
316
+ .tabs-left > .nav-tabs > li,
317
+ .tabs-right > .nav-tabs > li {
318
318
  float: none;
319
319
  }
320
- .tabs-left .nav-tabs > li > a,
321
- .tabs-right .nav-tabs > li > a {
320
+ .tabs-left > .nav-tabs > li > a,
321
+ .tabs-right > .nav-tabs > li > a {
322
322
  min-width: 74px;
323
323
  margin-right: 0;
324
324
  margin-bottom: 3px;
325
325
  }
326
326
 
327
327
  // Tabs on the left
328
- .tabs-left .nav-tabs {
328
+ .tabs-left > .nav-tabs {
329
329
  float: left;
330
330
  margin-right: 19px;
331
331
  border-right: 1px solid #ddd;
332
332
  }
333
- .tabs-left .nav-tabs > li > a {
333
+ .tabs-left > .nav-tabs > li > a {
334
334
  margin-right: -1px;
335
335
  @include border-radius(4px 0 0 4px);
336
336
  }
337
- .tabs-left .nav-tabs > li > a:hover {
337
+ .tabs-left > .nav-tabs > li > a:hover {
338
338
  border-color: $grayLighter #ddd $grayLighter $grayLighter;
339
339
  }
340
- .tabs-left .nav-tabs .active > a,
341
- .tabs-left .nav-tabs .active > a:hover {
340
+ .tabs-left > .nav-tabs .active > a,
341
+ .tabs-left > .nav-tabs .active > a:hover {
342
342
  border-color: #ddd transparent #ddd #ddd;
343
343
  *border-right-color: $white;
344
344
  }
345
345
 
346
346
  // Tabs on the right
347
- .tabs-right .nav-tabs {
347
+ .tabs-right > .nav-tabs {
348
348
  float: right;
349
349
  margin-left: 19px;
350
350
  border-left: 1px solid #ddd;
351
351
  }
352
- .tabs-right .nav-tabs > li > a {
352
+ .tabs-right > .nav-tabs > li > a {
353
353
  margin-left: -1px;
354
354
  @include border-radius(0 4px 4px 0);
355
355
  }
356
- .tabs-right .nav-tabs > li > a:hover {
356
+ .tabs-right > .nav-tabs > li > a:hover {
357
357
  border-color: $grayLighter $grayLighter $grayLighter #ddd;
358
358
  }
359
- .tabs-right .nav-tabs .active > a,
360
- .tabs-right .nav-tabs .active > a:hover {
359
+ .tabs-right > .nav-tabs .active > a,
360
+ .tabs-right > .nav-tabs .active > a:hover {
361
361
  border-color: #ddd #ddd #ddd transparent;
362
362
  *border-left-color: $white;
363
363
  }
@@ -7,26 +7,32 @@
7
7
 
8
8
  // Webkit
9
9
  @-webkit-keyframes progress-bar-stripes {
10
- from { background-position: 0 0; }
11
- to { background-position: 40px 0; }
10
+ from { background-position: 40px 0; }
11
+ to { background-position: 0 0; }
12
12
  }
13
13
 
14
14
  // Firefox
15
15
  @-moz-keyframes progress-bar-stripes {
16
- from { background-position: 0 0; }
17
- to { background-position: 40px 0; }
16
+ from { background-position: 40px 0; }
17
+ to { background-position: 0 0; }
18
18
  }
19
19
 
20
20
  // IE9
21
21
  @-ms-keyframes progress-bar-stripes {
22
+ from { background-position: 40px 0; }
23
+ to { background-position: 0 0; }
24
+ }
25
+
26
+ // Opera
27
+ @-o-keyframes progress-bar-stripes {
22
28
  from { background-position: 0 0; }
23
29
  to { background-position: 40px 0; }
24
30
  }
25
31
 
26
32
  // Spec
27
33
  @keyframes progress-bar-stripes {
28
- from { background-position: 0 0; }
29
- to { background-position: 40px 0; }
34
+ from { background-position: 40px 0; }
35
+ to { background-position: 0 0; }
30
36
  }
31
37
 
32
38
 
@@ -68,6 +74,8 @@
68
74
  .progress.active .bar {
69
75
  -webkit-animation: progress-bar-stripes 2s linear infinite;
70
76
  -moz-animation: progress-bar-stripes 2s linear infinite;
77
+ -ms-animation: progress-bar-stripes 2s linear infinite;
78
+ -o-animation: progress-bar-stripes 2s linear infinite;
71
79
  animation: progress-bar-stripes 2s linear infinite;
72
80
  }
73
81
 
@@ -75,10 +75,10 @@ sub {
75
75
  // -------------------------
76
76
 
77
77
  img {
78
- height: auto;
78
+ max-width: 100%; // Make images inherently responsive
79
+ vertical-align: middle;
79
80
  border: 0;
80
81
  -ms-interpolation-mode: bicubic;
81
- vertical-align: middle;
82
82
  }
83
83
 
84
84
  // Forms
@@ -111,10 +111,10 @@ input[type="submit"] {
111
111
  -webkit-appearance: button; // Style clickable inputs in iOS
112
112
  }
113
113
  input[type="search"] { // Appearance in Safari/Chrome
114
- -webkit-appearance: textfield;
115
114
  -webkit-box-sizing: content-box;
116
115
  -moz-box-sizing: content-box;
117
116
  box-sizing: content-box;
117
+ -webkit-appearance: textfield;
118
118
  }
119
119
  input[type="search"]::-webkit-search-decoration,
120
120
  input[type="search"]::-webkit-search-cancel-button {