bootstrap-sass 2.0.1 → 2.0.2

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.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

Files changed (46) hide show
  1. data/README.md +8 -8
  2. data/lib/bootstrap-sass.rb +2 -0
  3. data/lib/bootstrap-sass/engine.rb +1 -1
  4. data/templates/project/manifest.rb +1 -1
  5. data/vendor/assets/javascripts/bootstrap-alert.js +1 -1
  6. data/vendor/assets/javascripts/bootstrap-button.js +4 -2
  7. data/vendor/assets/javascripts/bootstrap-carousel.js +7 -3
  8. data/vendor/assets/javascripts/bootstrap-collapse.js +4 -2
  9. data/vendor/assets/javascripts/bootstrap-dropdown.js +1 -1
  10. data/vendor/assets/javascripts/bootstrap-modal.js +1 -1
  11. data/vendor/assets/javascripts/bootstrap-popover.js +1 -1
  12. data/vendor/assets/javascripts/bootstrap-scrollspy.js +1 -1
  13. data/vendor/assets/javascripts/bootstrap-tab.js +1 -1
  14. data/vendor/assets/javascripts/bootstrap-tooltip.js +2 -2
  15. data/vendor/assets/javascripts/bootstrap-transition.js +1 -1
  16. data/vendor/assets/javascripts/bootstrap-typeahead.js +7 -7
  17. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +65 -35
  18. data/vendor/assets/stylesheets/_bootstrap.scss +1 -11
  19. data/vendor/assets/stylesheets/bootstrap/_alerts.scss +3 -9
  20. data/vendor/assets/stylesheets/bootstrap/_badges.scss +36 -0
  21. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +2 -0
  22. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +32 -10
  23. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +16 -12
  24. data/vendor/assets/stylesheets/bootstrap/_code.scss +2 -2
  25. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +3 -1
  26. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +44 -27
  27. data/vendor/assets/stylesheets/bootstrap/_forms.scss +63 -40
  28. data/vendor/assets/stylesheets/bootstrap/_grid.scss +2 -5
  29. data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +3 -1
  30. data/vendor/assets/stylesheets/bootstrap/_labels.scss +9 -3
  31. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +161 -119
  32. data/vendor/assets/stylesheets/bootstrap/_modals.scss +12 -5
  33. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +62 -32
  34. data/vendor/assets/stylesheets/bootstrap/_navs.scss +16 -6
  35. data/vendor/assets/stylesheets/bootstrap/_pager.scss +5 -0
  36. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  37. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +15 -1
  38. data/vendor/assets/stylesheets/bootstrap/_reset.scss +1 -1
  39. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +3 -3
  40. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +3 -3
  41. data/vendor/assets/stylesheets/bootstrap/_tables.scss +11 -15
  42. data/vendor/assets/stylesheets/bootstrap/_type.scss +22 -5
  43. data/vendor/assets/stylesheets/bootstrap/_variables.scss +102 -14
  44. data/vendor/assets/stylesheets/bootstrap/_wells.scss +10 -0
  45. metadata +20 -9
  46. data/lib/bootstrap-sass/config/sass-ie_hex_str.rb +0 -14
@@ -6,6 +6,10 @@
6
6
  // -------------
7
7
 
8
8
  .navbar {
9
+ // Fix for IE7's bad indexing so dropdowns don't appear below content that follows the navbar
10
+ *position: relative;
11
+ *z-index: 2;
12
+
9
13
  overflow: visible;
10
14
  margin-bottom: $baseLineHeight;
11
15
  }
@@ -20,6 +24,12 @@
20
24
  @include box-shadow($shadow);
21
25
  }
22
26
 
27
+ // Set width to auto for default container
28
+ // We then reset it for fixed navbars in the #gridSystem mixin
29
+ .navbar .container {
30
+ width: auto;
31
+ }
32
+
23
33
  // Navbar button for toggling navbar items in responsive layouts
24
34
  .btn-navbar {
25
35
  display: none;
@@ -50,6 +60,7 @@
50
60
 
51
61
  // Brand, links, text, and buttons
52
62
  .navbar {
63
+ color: $navbarText;
53
64
  // Hover and active states
54
65
  .brand:hover {
55
66
  text-decoration: none;
@@ -68,16 +79,11 @@
68
79
  // Plain text in topbar
69
80
  .navbar-text {
70
81
  margin-bottom: 0;
71
- line-height: 40px;
72
- color: $navbarText;
73
- a:hover {
74
- color: $white;
75
- background-color: transparent;
76
- }
82
+ line-height: $navbarHeight;
77
83
  }
78
84
  // Buttons in navbar
79
85
  .btn, .btn-group {
80
- margin-top: 5px; // make buttons vertically centered in navbar
86
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
81
87
  }
82
88
  .btn-group .btn {
83
89
  margin-top: 0; // then undo the margin here so we don't accidentally double it
@@ -88,14 +94,13 @@
88
94
  .navbar-form {
89
95
  margin-bottom: 0; // remove default bottom margin
90
96
  @include clearfix();
97
+ input, select, .radio, .checkbox {
98
+ @include navbarVerticalAlign(30px); // Vertically center in navbar
99
+ }
91
100
  input, select {
92
101
  display: inline-block;
93
- margin-top: 5px;
94
102
  margin-bottom: 0;
95
103
  }
96
- .radio, .checkbox {
97
- margin-top: 5px;
98
- }
99
104
  input[type="image"], input[type="checkbox"], input[type="radio"] {
100
105
  margin-top: 3px;
101
106
  }
@@ -112,35 +117,32 @@
112
117
  .navbar-search {
113
118
  position: relative;
114
119
  float: left;
115
- margin-top: 6px;
120
+ @include navbarVerticalAlign(28px); // Vertically center in navbar
116
121
  margin-bottom: 0;
117
122
  .search-query {
118
123
  padding: 4px 9px;
119
124
  @include font-sans-serif(13px, normal, 1);
120
125
  color: $white;
121
- color: rgba(255,255,255,.75);
122
- background: #666;
123
- background: rgba(255,255,255,.3);
124
- border: 1px solid #111;
126
+ background-color: $navbarSearchBackground;
127
+ border: 1px solid $navbarSearchBorder;
125
128
  $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
126
129
  @include box-shadow($shadow);
127
130
  @include transition(none);
128
131
 
129
- // Placeholder text gets special styles; can't be bundled together though for some reason
130
- @include placeholder($grayLighter);
131
-
132
- // Hover states
133
- &:hover {
134
- color: $white;
135
- background-color: $grayLight;
136
- background-color: rgba(255,255,255,.5);
132
+ // Placeholder text gets special styles; can't be a grouped selector
133
+ &:-moz-placeholder {
134
+ color: $navbarSearchPlaceholderColor;
135
+ }
136
+ &::-webkit-input-placeholder {
137
+ color: $navbarSearchPlaceholderColor;
137
138
  }
139
+
138
140
  // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
139
141
  &:focus, &.focused {
140
142
  padding: 5px 10px;
141
143
  color: $grayDark;
142
144
  text-shadow: 0 1px 0 $white;
143
- background-color: $white;
145
+ background-color: $navbarSearchBackgroundFocus;
144
146
  border: 0;
145
147
  @include box-shadow(0 0 3px rgba(0,0,0,.15));
146
148
  outline: 0;
@@ -152,19 +154,28 @@
152
154
  // FIXED NAVBAR
153
155
  // ------------
154
156
 
155
- .navbar-fixed-top {
157
+ // Shared (top/bottom) styles
158
+ .navbar-fixed-top, .navbar-fixed-bottom {
156
159
  position: fixed;
157
- top: 0;
158
160
  right: 0;
159
161
  left: 0;
160
162
  z-index: $zindexFixedNavbar;
163
+ margin-bottom: 0; // remove 18px margin for static navbars
161
164
  }
162
- .navbar-fixed-top .navbar-inner {
165
+ .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
163
166
  padding-left: 0;
164
167
  padding-right: 0;
165
168
  @include border-radius(0);
166
169
  }
167
170
 
171
+ .navbar-fixed-top .container, .navbar-fixed-bottom .container {
172
+ @include gridCoreSpan($gridColumns, $gridColumnWidth, $gridGutterWidth);
173
+ }
174
+
175
+ // Fixed to top
176
+ .navbar-fixed-top { top: 0; }
177
+ .navbar-fixed-bottom { bottom: 0; }
178
+
168
179
 
169
180
  // NAVIGATION
170
181
  // ----------
@@ -202,9 +213,9 @@
202
213
 
203
214
  // Active nav items
204
215
  .navbar .nav .active > a, .navbar .nav .active > a:hover {
205
- color: $navbarLinkColorHover;
216
+ color: $navbarLinkColorActive;
206
217
  text-decoration: none;
207
- background-color: $navbarBackground;
218
+ background-color: $navbarLinkBackgroundActive;
208
219
  }
209
220
 
210
221
  // Dividers (basically a vertical hr)
@@ -238,7 +249,7 @@
238
249
  border-left: 7px solid transparent;
239
250
  border-right: 7px solid transparent;
240
251
  border-bottom: 7px solid #ccc;
241
- border-bottom-color: rgba(0,0,0,.2);
252
+ border-bottom-color: $dropdownBackground;
242
253
  position: absolute;
243
254
  top: -7px;
244
255
  left: 9px;
@@ -255,9 +266,27 @@
255
266
  }
256
267
  }
257
268
 
269
+ // Menu position and menu caret support for dropups via extra dropup class
270
+ .navbar-fixed-bottom .dropdown-menu {
271
+ &:before {
272
+ border-top: 7px solid #ccc;
273
+ border-top-color: $dropdownBorder;
274
+ border-bottom: 0;
275
+ bottom: -7px;
276
+ top: auto;
277
+ }
278
+ &:after {
279
+ border-top: 6px solid $dropdownBackground;
280
+ border-bottom: 0;
281
+ bottom: -6px;
282
+ top: auto;
283
+ }
284
+ }
285
+
258
286
  // Dropdown toggle caret
259
287
  .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
260
288
  border-top-color: $white;
289
+ border-bottom-color: $white;
261
290
  }
262
291
  .navbar .nav .active .caret {
263
292
  @include opacity(1);
@@ -274,7 +303,8 @@
274
303
  }
275
304
 
276
305
  // Right aligned menus need alt position
277
- .navbar .nav.pull-right .dropdown-menu {
306
+ // TODO: rejigger this at some point to simplify the selectors
307
+ .navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
278
308
  left: auto;
279
309
  right: 0;
280
310
  &:before {
@@ -42,8 +42,8 @@
42
42
  // --------
43
43
 
44
44
  .nav-list {
45
- padding-left: 14px;
46
- padding-right: 14px;
45
+ padding-left: 15px;
46
+ padding-right: 15px;
47
47
  margin-bottom: 0;
48
48
  }
49
49
  .nav-list > li > a, .nav-list .nav-header {
@@ -54,7 +54,7 @@
54
54
  .nav-list > li > a {
55
55
  padding: 3px 15px;
56
56
  }
57
- .nav-list .active > a, .nav-list .active > a:hover {
57
+ .nav-list > .active > a, .nav-list > .active > a:hover {
58
58
  color: $white;
59
59
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
60
60
  background-color: $linkColor;
@@ -62,6 +62,10 @@
62
62
  .nav-list [class^="icon-"] {
63
63
  margin-right: 2px;
64
64
  }
65
+ // Dividers (basically an hr) within the dropdown
66
+ .nav-list .divider {
67
+ @include nav-divider();
68
+ }
65
69
 
66
70
 
67
71
 
@@ -97,8 +101,9 @@
97
101
 
98
102
  // Actual tabs (as links)
99
103
  .nav-tabs > li > a {
100
- padding-top: 9px;
101
- padding-bottom: 9px;
104
+ padding-top: 8px;
105
+ padding-bottom: 8px;
106
+ line-height: $baseLineHeight;
102
107
  border: 1px solid transparent;
103
108
  @include border-radius(4px 4px 0 0);
104
109
  &:hover {
@@ -191,16 +196,19 @@
191
196
  // Make carets use linkColor to start
192
197
  .nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
193
198
  border-top-color: $linkColor;
199
+ border-bottom-color: $linkColor;
194
200
  margin-top: 6px;
195
201
  }
196
202
  .nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
197
203
  border-top-color: $linkColorHover;
204
+ border-bottom-color: $linkColorHover;
198
205
  }
199
206
 
200
207
  // Active dropdown links
201
208
  // -------------------------
202
209
  .nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
203
210
  border-top-color: $grayDark;
211
+ border-bottom-color: $grayDark;
204
212
  }
205
213
 
206
214
  // Active:hover dropdown links
@@ -219,6 +227,7 @@
219
227
  }
220
228
  .nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
221
229
  border-top-color: $white;
230
+ border-bottom-color: $white;
222
231
  @include opacity(1);
223
232
  }
224
233
 
@@ -241,7 +250,8 @@
241
250
  @include clearfix();
242
251
  }
243
252
  .tab-content {
244
- overflow: hidden; // prevent content from running below tabs
253
+ display: table; // prevent content from running below tabs
254
+ width: 100%;
245
255
  }
246
256
 
247
257
  // Remove border on bottom, left, right
@@ -27,4 +27,9 @@
27
27
  }
28
28
  .pager .previous a {
29
29
  float: left;
30
+ }
31
+ .pager .disabled a, .pager .disabled a:hover {
32
+ color: $grayLight;
33
+ background-color: #fff;
34
+ cursor: default;
30
35
  }
@@ -31,7 +31,7 @@
31
31
  color: $grayLight;
32
32
  cursor: default;
33
33
  }
34
- .pagination .disabled a, .pagination .disabled a:hover {
34
+ .pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover {
35
35
  color: $grayLight;
36
36
  background-color: transparent;
37
37
  cursor: default;
@@ -17,6 +17,11 @@
17
17
  to { background-position: 40px 0; }
18
18
  }
19
19
 
20
+ @-ms-keyframes progress-bar-stripes {
21
+ from { background-position: 0 0; }
22
+ to { background-position: 40px 0; }
23
+ }
24
+
20
25
  // Spec
21
26
  @keyframes progress-bar-stripes {
22
27
  from { background-position: 0 0; }
@@ -54,7 +59,7 @@
54
59
 
55
60
  // Striped bars
56
61
  .progress-striped .bar {
57
- @include gradient-striped(#62c462);
62
+ @include gradient-striped(#149bdf);
58
63
  @include background-size(40px 40px);
59
64
  }
60
65
 
@@ -92,4 +97,13 @@
92
97
  }
93
98
  .progress-info.progress-striped .bar {
94
99
  @include gradient-striped(#5bc0de);
100
+ }
101
+
102
+ // Warning (orange)
103
+ .progress-warning .bar {
104
+ @include gradient-vertical(lighten($orange, 15%), $orange);
105
+ }
106
+
107
+ .progress-warning.progress-striped .bar {
108
+ @include gradient-striped(lighten($orange, 15%));
95
109
  }
@@ -62,10 +62,10 @@ sub {
62
62
  // -------------------------
63
63
 
64
64
  img {
65
- max-width: 100%;
66
65
  height: auto;
67
66
  border: 0;
68
67
  -ms-interpolation-mode: bicubic;
68
+ vertical-align: middle;
69
69
  }
70
70
 
71
71
  // Forms
@@ -3,7 +3,7 @@
3
3
  // -------------------------------------------------------------------------------------------
4
4
 
5
5
 
6
- // STRUCTURAL LAYOUT
6
+ // Body reset
7
7
  // -----------------
8
8
 
9
9
  body {
@@ -12,11 +12,11 @@ body {
12
12
  font-size: $baseFontSize;
13
13
  line-height: $baseLineHeight;
14
14
  color: $textColor;
15
- background-color: $white;
15
+ background-color: $bodyBackground;
16
16
  }
17
17
 
18
18
 
19
- // LINKS
19
+ // Links
20
20
  // -----
21
21
 
22
22
  a {
@@ -11,7 +11,7 @@
11
11
  // and background-position. Your resulting HTML will look like
12
12
  // <i class="icon-inbox"></i>.
13
13
 
14
- // For the white version of the icons, just add the .icon-white class:
14
+ // For the white version of the icons, just add the .icon-white class:
15
15
  // <i class="icon-inbox icon-white"></i>
16
16
 
17
17
  [class^="icon-"], [class*=" icon-"] {
@@ -20,14 +20,14 @@
20
20
  height: 14px;
21
21
  line-height: 14px;
22
22
  vertical-align: text-top;
23
- background-image: asset-url("glyphicons-halflings.png", image);
23
+ background-image: $iconSpritePath;
24
24
  background-position: 14px 14px;
25
25
  background-repeat: no-repeat;
26
26
 
27
27
  @include ie7-restore-right-whitespace();
28
28
  }
29
29
  .icon-white {
30
- background-image: asset-url("glyphicons-halflings-white.png", image);
30
+ background-image: $iconWhiteSpritePath;
31
31
  }
32
32
 
33
33
  .icon-glass { background-position: 0 0; }
@@ -11,6 +11,7 @@ table {
11
11
  max-width: 100%;
12
12
  border-collapse: collapse;
13
13
  border-spacing: 0;
14
+ background-color: $tableBackground;
14
15
  }
15
16
 
16
17
  // BASELINE STYLES
@@ -25,7 +26,7 @@ table {
25
26
  line-height: $baseLineHeight;
26
27
  text-align: left;
27
28
  vertical-align: top;
28
- border-top: 1px solid #ddd;
29
+ border-top: 1px solid $tableBorder;
29
30
  }
30
31
  th {
31
32
  font-weight: bold;
@@ -35,12 +36,13 @@ table {
35
36
  vertical-align: bottom;
36
37
  }
37
38
  // Remove top border from thead by default
38
- thead:first-child tr th, thead:first-child tr td {
39
+ colgroup + thead tr:first-child th, colgroup + thead tr:first-child td,
40
+ thead:first-child tr:first-child th, thead:first-child tr:first-child td {
39
41
  border-top: 0;
40
42
  }
41
43
  // Account for multiple tbody instances
42
44
  tbody + tbody {
43
- border-top: 2px solid #ddd;
45
+ border-top: 2px solid $tableBorder;
44
46
  }
45
47
  }
46
48
 
@@ -60,12 +62,13 @@ table {
60
62
  // ----------------
61
63
 
62
64
  .table-bordered {
63
- border: 1px solid #ddd;
65
+ border: 1px solid $tableBorder;
66
+ border-left: 0;
64
67
  border-collapse: separate; // Done so we can round those corners!
65
68
  *border-collapse: collapsed; // IE7 can't round corners anyway
66
69
  @include border-radius(4px);
67
- th + th, td + td, th + td, td + th {
68
- border-left: 1px solid #ddd;
70
+ th, td {
71
+ border-left: 1px solid $tableBorder;
69
72
  }
70
73
  // Prevent a double border
71
74
  thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td {
@@ -95,7 +98,7 @@ table {
95
98
  .table-striped {
96
99
  tbody {
97
100
  tr:nth-child(odd) td, tr:nth-child(odd) th {
98
- background-color: #f9f9f9;
101
+ background-color: $tableBackgroundAccent;
99
102
  }
100
103
  }
101
104
  }
@@ -106,19 +109,12 @@ table {
106
109
  // Placed here since it has to come after the potential zebra striping
107
110
  .table {
108
111
  tbody tr:hover td, tbody tr:hover th {
109
- background-color: #f5f5f5;
112
+ background-color: $tableBackgroundHover;
110
113
  }
111
114
  }
112
115
 
113
116
  // TABLE CELL SIZING
114
117
  // -----------------
115
-
116
- // Change the columns
117
- @mixin tableColumns($columnSpan: 1) {
118
- float: none;
119
- width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16;
120
- margin-left: 0;
121
- }
122
118
  table {
123
119
  @for $i from 1 through $gridColumns {
124
120
  .span#{$i} { @include tableColumns($i); }