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
@@ -10,11 +10,11 @@
10
10
  // Import the fonts
11
11
  @font-face {
12
12
  font-family: 'Glyphicons Halflings';
13
- src: url('@{icon-font-path}@{icon-font-name}.eot');
14
- src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
15
- url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
16
- url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
17
- url('@{icon-font-path}@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
13
+ src: asset-url('@{icon-font-path}@{icon-font-name}.eot');
14
+ src: asset-url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
15
+ asset-url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
16
+ asset-url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
17
+ asset-url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
18
18
  }
19
19
 
20
20
  // Catchall baseclass
@@ -28,10 +28,6 @@
28
28
  line-height: 1;
29
29
  -webkit-font-smoothing: antialiased;
30
30
  -moz-osx-font-smoothing: grayscale;
31
-
32
- &:empty {
33
- width: 1em;
34
- }
35
31
  }
36
32
 
37
33
  // Individual icons
@@ -2,92 +2,83 @@
2
2
  // Grid system
3
3
  // --------------------------------------------------
4
4
 
5
- // Set the container width, and override it for fixed navbars in media queries
5
+
6
+ // Container widths
7
+ //
8
+ // Set the container width, and override it for fixed navbars in media queries.
9
+
6
10
  .container {
7
11
  .container-fixed();
12
+
13
+ @media (min-width: @screen-sm-min) {
14
+ width: @container-sm;
15
+ }
16
+ @media (min-width: @screen-md-min) {
17
+ width: @container-md;
18
+ }
19
+ @media (min-width: @screen-lg-min) {
20
+ width: @container-lg;
21
+ }
22
+ }
23
+
24
+
25
+ // Fluid container
26
+ //
27
+ // Utilizes the mixin meant for fixed width containers, but without any defined
28
+ // width for fluid, full width layouts.
29
+
30
+ .container-fluid {
31
+ .container-fixed();
8
32
  }
9
33
 
10
- // mobile first defaults
34
+
35
+ // Row
36
+ //
37
+ // Rows contain and clear the floats of your columns.
38
+
11
39
  .row {
12
40
  .make-row();
13
41
  }
14
42
 
43
+
44
+ // Columns
45
+ //
15
46
  // Common styles for small and large grid columns
47
+
16
48
  .make-grid-columns();
17
49
 
18
50
 
19
51
  // Extra small grid
20
52
  //
21
- // Grid classes for extra small devices like smartphones. No offset, push, or
22
- // pull classes are present here due to the size of the target.
23
- //
24
- // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
25
- // it's full-width.
53
+ // Columns, offsets, pushes, and pulls for extra small devices like
54
+ // smartphones.
26
55
 
27
- .make-grid-columns-float(xs);
28
- .make-grid(@grid-columns, xs, width);
29
- .make-grid(@grid-columns, xs, pull);
30
- .make-grid(@grid-columns, xs, push);
31
- .make-grid(@grid-columns, xs, offset);
56
+ .make-grid(xs);
32
57
 
33
58
 
34
59
  // Small grid
35
60
  //
36
61
  // Columns, offsets, pushes, and pulls for the small device range, from phones
37
62
  // to tablets.
38
- //
39
- // Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
40
- // it's full-width.
41
63
 
42
64
  @media (min-width: @screen-sm-min) {
43
- .container {
44
- width: @container-sm;
45
- }
46
-
47
- .make-grid-columns-float(sm);
48
- .make-grid(@grid-columns, sm, width);
49
- .make-grid(@grid-columns, sm, pull);
50
- .make-grid(@grid-columns, sm, push);
51
- .make-grid(@grid-columns, sm, offset);
65
+ .make-grid(sm);
52
66
  }
53
67
 
54
68
 
55
69
  // Medium grid
56
70
  //
57
71
  // Columns, offsets, pushes, and pulls for the desktop device range.
58
- //
59
- // Note that `.col-md-12` doesn't get floated on purpose--there's no need since
60
- // it's full-width.
61
72
 
62
73
  @media (min-width: @screen-md-min) {
63
- .container {
64
- width: @container-md;
65
- }
66
-
67
- .make-grid-columns-float(md);
68
- .make-grid(@grid-columns, md, width);
69
- .make-grid(@grid-columns, md, pull);
70
- .make-grid(@grid-columns, md, push);
71
- .make-grid(@grid-columns, md, offset);
74
+ .make-grid(md);
72
75
  }
73
76
 
74
77
 
75
78
  // Large grid
76
79
  //
77
80
  // Columns, offsets, pushes, and pulls for the large desktop device range.
78
- //
79
- // Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
80
- // it's full-width.
81
81
 
82
82
  @media (min-width: @screen-lg-min) {
83
- .container {
84
- width: @container-lg;
85
- }
86
-
87
- .make-grid-columns-float(lg);
88
- .make-grid(@grid-columns, lg, width);
89
- .make-grid(@grid-columns, lg, pull);
90
- .make-grid(@grid-columns, lg, push);
91
- .make-grid(@grid-columns, lg, offset);
83
+ .make-grid(lg);
92
84
  }
93
-
@@ -10,13 +10,23 @@
10
10
  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
11
11
 
12
12
  // Undo padding and float of grid classes
13
- &.col {
13
+ &[class*="col-"] {
14
14
  float: none;
15
15
  padding-left: 0;
16
16
  padding-right: 0;
17
17
  }
18
18
 
19
19
  .form-control {
20
+ // Ensure that the input is always above the *appended* addon button for
21
+ // proper border colors.
22
+ position: relative;
23
+ z-index: 2;
24
+
25
+ // IE9 fubars the placeholder attribute in text inputs and the arrows on
26
+ // select elements in input groups. To fix it, we float the input. Details:
27
+ // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
28
+ float: left;
29
+
20
30
  width: 100%;
21
31
  margin-bottom: 0;
22
32
  }
@@ -29,10 +39,14 @@
29
39
 
30
40
  .input-group-lg > .form-control,
31
41
  .input-group-lg > .input-group-addon,
32
- .input-group-lg > .input-group-btn > .btn { .input-lg(); }
42
+ .input-group-lg > .input-group-btn > .btn {
43
+ .input-lg();
44
+ }
33
45
  .input-group-sm > .form-control,
34
46
  .input-group-sm > .input-group-addon,
35
- .input-group-sm > .input-group-btn > .btn { .input-sm(); }
47
+ .input-group-sm > .input-group-btn > .btn {
48
+ .input-sm();
49
+ }
36
50
 
37
51
 
38
52
  // Display as table-cell
@@ -90,8 +104,10 @@
90
104
  .input-group .form-control:first-child,
91
105
  .input-group-addon:first-child,
92
106
  .input-group-btn:first-child > .btn,
107
+ .input-group-btn:first-child > .btn-group > .btn,
93
108
  .input-group-btn:first-child > .dropdown-toggle,
94
- .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
109
+ .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
110
+ .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
95
111
  .border-right-radius(0);
96
112
  }
97
113
  .input-group-addon:first-child {
@@ -100,8 +116,10 @@
100
116
  .input-group .form-control:last-child,
101
117
  .input-group-addon:last-child,
102
118
  .input-group-btn:last-child > .btn,
119
+ .input-group-btn:last-child > .btn-group > .btn,
103
120
  .input-group-btn:last-child > .dropdown-toggle,
104
- .input-group-btn:first-child > .btn:not(:first-child) {
121
+ .input-group-btn:first-child > .btn:not(:first-child),
122
+ .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
105
123
  .border-left-radius(0);
106
124
  }
107
125
  .input-group-addon:last-child {
@@ -112,25 +130,37 @@
112
130
  // -------------------------
113
131
  .input-group-btn {
114
132
  position: relative;
133
+ // Jankily prevent input button groups from wrapping with `white-space` and
134
+ // `font-size` in combination with `inline-block` on buttons.
135
+ font-size: 0;
115
136
  white-space: nowrap;
116
137
 
117
- // Negative margin to only have a 1px border between the two
118
- &:first-child > .btn {
119
- margin-right: -1px;
138
+ // Negative margin for spacing, position for bringing hovered/focused/actived
139
+ // element above the siblings.
140
+ > .btn {
141
+ position: relative;
142
+ + .btn {
143
+ margin-left: -1px;
144
+ }
145
+ // Bring the "active" button to the front
146
+ &:hover,
147
+ &:focus,
148
+ &:active {
149
+ z-index: 2;
150
+ }
120
151
  }
121
- &:last-child > .btn {
122
- margin-left: -1px;
123
- }
124
- }
125
- .input-group-btn > .btn {
126
- position: relative;
127
- // Jankily prevent input button groups from wrapping
128
- + .btn {
129
- margin-left: -4px;
152
+
153
+ // Negative margin to only have a 1px border between the two
154
+ &:first-child {
155
+ > .btn,
156
+ > .btn-group {
157
+ margin-right: -1px;
158
+ }
130
159
  }
131
- // Bring the "active" button to the front
132
- &:hover,
133
- &:active {
134
- z-index: 2;
160
+ &:last-child {
161
+ > .btn,
162
+ > .btn-group {
163
+ margin-left: -1px;
164
+ }
135
165
  }
136
166
  }
@@ -6,24 +6,31 @@
6
6
  .jumbotron {
7
7
  padding: @jumbotron-padding;
8
8
  margin-bottom: @jumbotron-padding;
9
- font-size: @jumbotron-font-size;
10
- font-weight: 200;
11
- line-height: (@line-height-base * 1.5);
12
9
  color: @jumbotron-color;
13
10
  background-color: @jumbotron-bg;
14
11
 
15
- h1 {
16
- line-height: 1;
12
+ h1,
13
+ .h1 {
17
14
  color: @jumbotron-heading-color;
18
15
  }
19
16
  p {
20
- line-height: 1.4;
17
+ margin-bottom: (@jumbotron-padding / 2);
18
+ font-size: @jumbotron-font-size;
19
+ font-weight: 200;
20
+ }
21
+
22
+ > hr {
23
+ border-top-color: darken(@jumbotron-bg, 10%);
21
24
  }
22
25
 
23
26
  .container & {
24
27
  border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
25
28
  }
26
29
 
30
+ .container {
31
+ max-width: 100%;
32
+ }
33
+
27
34
  @media screen and (min-width: @screen-sm-min) {
28
35
  padding-top: (@jumbotron-padding * 1.6);
29
36
  padding-bottom: (@jumbotron-padding * 1.6);
@@ -33,7 +40,8 @@
33
40
  padding-right: (@jumbotron-padding * 2);
34
41
  }
35
42
 
36
- h1 {
43
+ h1,
44
+ .h1 {
37
45
  font-size: (@font-size-base * 4.5);
38
46
  }
39
47
  }
@@ -15,7 +15,7 @@
15
15
  border-radius: .25em;
16
16
 
17
17
  // Add hover effects, but only for links
18
- &[href] {
18
+ a& {
19
19
  &:hover,
20
20
  &:focus {
21
21
  color: @label-link-hover-color;
@@ -28,6 +28,12 @@
28
28
  &:empty {
29
29
  display: none;
30
30
  }
31
+
32
+ // Quick fix for labels in buttons
33
+ .btn & {
34
+ position: relative;
35
+ top: -1px;
36
+ }
31
37
  }
32
38
 
33
39
  // Colors
@@ -2,17 +2,21 @@
2
2
  // List groups
3
3
  // --------------------------------------------------
4
4
 
5
+
5
6
  // Base class
6
7
  //
7
8
  // Easily usable on <ul>, <ol>, or <div>.
9
+
8
10
  .list-group {
9
11
  // No need to set list-style: none; since .list-group-item is block level
10
12
  margin-bottom: 20px;
11
13
  padding-left: 0; // reset padding because ul and ol
12
14
  }
13
15
 
16
+
14
17
  // Individual list items
15
- // -------------------------
18
+ //
19
+ // Use on `li`s or `div`s within the `.list-group` parent.
16
20
 
17
21
  .list-group-item {
18
22
  position: relative;
@@ -41,7 +45,12 @@
41
45
  }
42
46
  }
43
47
 
48
+
44
49
  // Linked list items
50
+ //
51
+ // Use anchor elements instead of `li`s or `div`s to create linked list items.
52
+ // Includes an extra `.active` modifier class for showing selected items.
53
+
45
54
  a.list-group-item {
46
55
  color: @list-group-link-color;
47
56
 
@@ -53,8 +62,27 @@ a.list-group-item {
53
62
  &:hover,
54
63
  &:focus {
55
64
  text-decoration: none;
65
+ color: @list-group-link-hover-color;
56
66
  background-color: @list-group-hover-bg;
57
67
  }
68
+ }
69
+
70
+ .list-group-item {
71
+ // Disabled state
72
+ &.disabled,
73
+ &.disabled:hover,
74
+ &.disabled:focus {
75
+ background-color: @list-group-disabled-bg;
76
+ color: @list-group-disabled-color;
77
+
78
+ // Force color to inherit for custom content
79
+ .list-group-item-heading {
80
+ color: inherit;
81
+ }
82
+ .list-group-item-text {
83
+ color: @list-group-disabled-text-color;
84
+ }
85
+ }
58
86
 
59
87
  // Active class on item itself, not parent
60
88
  &.active,
@@ -66,17 +94,32 @@ a.list-group-item {
66
94
  border-color: @list-group-active-border;
67
95
 
68
96
  // Force color to inherit for custom content
69
- .list-group-item-heading {
97
+ .list-group-item-heading,
98
+ .list-group-item-heading > small,
99
+ .list-group-item-heading > .small {
70
100
  color: inherit;
71
101
  }
72
102
  .list-group-item-text {
73
- color: lighten(@list-group-active-bg, 40%);
103
+ color: @list-group-active-text-color;
74
104
  }
75
105
  }
76
106
  }
77
107
 
108
+
109
+ // Contextual variants
110
+ //
111
+ // Add modifier classes to change text and background color on individual items.
112
+ // Organizationally, this must come after the `:hover` states.
113
+
114
+ .list-group-item-variant(success; @state-success-bg; @state-success-text);
115
+ .list-group-item-variant(info; @state-info-bg; @state-info-text);
116
+ .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
117
+ .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
118
+
119
+
78
120
  // Custom content options
79
- // -------------------------
121
+ //
122
+ // Extra classes for creating well-formatted content within `.list-group-item`s.
80
123
 
81
124
  .list-group-item-heading {
82
125
  margin-top: 0;