bootstrap-sass 2.0.2 → 2.0.3

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


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

Files changed (44) hide show
  1. data/README.md +26 -10
  2. data/lib/bootstrap-sass.rb +24 -13
  3. data/lib/bootstrap-sass/{compass_extensions.rb → compass_functions.rb} +0 -0
  4. data/lib/bootstrap-sass/engine.rb +0 -2
  5. data/lib/bootstrap-sass/{config/sass_extentions.rb → rails_functions.rb} +0 -0
  6. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  7. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  8. data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
  9. data/vendor/assets/javascripts/bootstrap-button.js +29 -33
  10. data/vendor/assets/javascripts/bootstrap-carousel.js +27 -19
  11. data/vendor/assets/javascripts/bootstrap-collapse.js +45 -26
  12. data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
  13. data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
  14. data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
  15. data/vendor/assets/javascripts/bootstrap-scrollspy.js +43 -17
  16. data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
  17. data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
  18. data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
  19. data/vendor/assets/javascripts/bootstrap-typeahead.js +24 -10
  20. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +100 -68
  21. data/vendor/assets/stylesheets/_bootstrap.scss +11 -2
  22. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +5 -0
  23. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +51 -31
  24. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +15 -11
  25. data/vendor/assets/stylesheets/bootstrap/_close.scss +12 -1
  26. data/vendor/assets/stylesheets/bootstrap/_code.scss +4 -4
  27. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +4 -4
  28. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +16 -22
  29. data/vendor/assets/stylesheets/bootstrap/_forms.scss +58 -37
  30. data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
  31. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +1 -1
  32. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +99 -73
  33. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +61 -40
  34. data/vendor/assets/stylesheets/bootstrap/_navs.scss +27 -26
  35. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +15 -6
  36. data/vendor/assets/stylesheets/bootstrap/_reset.scss +3 -3
  37. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +25 -5
  38. data/vendor/assets/stylesheets/bootstrap/_tables.scss +17 -6
  39. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +14 -0
  40. data/vendor/assets/stylesheets/bootstrap/_type.scss +7 -6
  41. data/vendor/assets/stylesheets/bootstrap/_variables.scss +52 -9
  42. metadata +10 -22
  43. data/vendor/assets/stylesheets/bootstrap/_badges.scss +0 -36
  44. data/vendor/assets/stylesheets/bootstrap/_labels.scss +0 -38
@@ -1,3 +1,13 @@
1
+ //
2
+ // Bootstrap v2.0.3
3
+ //
4
+ // Copyright 2012 Twitter, Inc
5
+ // Licensed under the Apache License v2.0
6
+ // http://www.apache.org/licenses/LICENSE-2.0
7
+ //
8
+ // Designed and built with all the love in the world @twitter by @mdo and @fat.
9
+ // Converted to Sass by @thomasmcdonald_, and distributed as bootstrap-sass
10
+
1
11
  // Core variables and mixins
2
12
  @import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
3
13
  @import "bootstrap/mixins";
@@ -42,8 +52,7 @@
42
52
 
43
53
  // Components: Misc
44
54
  @import "bootstrap/thumbnails";
45
- @import "bootstrap/labels";
46
- @import "bootstrap/badges";
55
+ @import "bootstrap/labels-badges";
47
56
  @import "bootstrap/progress-bars";
48
57
  @import "bootstrap/accordion";
49
58
  @import "bootstrap/carousel";
@@ -21,6 +21,11 @@
21
21
  padding: 8px 15px;
22
22
  }
23
23
 
24
+ // General toggle styles
25
+ .accordion-toggle {
26
+ cursor: pointer;
27
+ }
28
+
24
29
  // Inner needs the styles because you can't animate properly with any styles on the element
25
30
  .accordion-inner {
26
31
  padding: 9px 15px;
@@ -25,14 +25,14 @@
25
25
  }
26
26
 
27
27
  // Float them, remove border radius, then re-add to first and last elements
28
- .btn-group .btn {
28
+ .btn-group > .btn {
29
29
  position: relative;
30
30
  float: left;
31
31
  margin-left: -1px;
32
32
  @include border-radius(0);
33
33
  }
34
34
  // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
35
- .btn-group .btn:first-child {
35
+ .btn-group > .btn:first-child {
36
36
  margin-left: 0;
37
37
  -webkit-border-top-left-radius: 4px;
38
38
  -moz-border-radius-topleft: 4px;
@@ -41,7 +41,8 @@
41
41
  -moz-border-radius-bottomleft: 4px;
42
42
  border-bottom-left-radius: 4px;
43
43
  }
44
- .btn-group .btn:last-child, .btn-group .dropdown-toggle {
44
+ // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
45
+ .btn-group > .btn:last-child, .btn-group > .dropdown-toggle {
45
46
  -webkit-border-top-right-radius: 4px;
46
47
  -moz-border-radius-topright: 4px;
47
48
  border-top-right-radius: 4px;
@@ -50,7 +51,7 @@
50
51
  border-bottom-right-radius: 4px;
51
52
  }
52
53
  // Reset corners for large buttons
53
- .btn-group .btn.large:first-child {
54
+ .btn-group > .btn.large:first-child {
54
55
  margin-left: 0;
55
56
  -webkit-border-top-left-radius: 6px;
56
57
  -moz-border-radius-topleft: 6px;
@@ -59,7 +60,7 @@
59
60
  -moz-border-radius-bottomleft: 6px;
60
61
  border-bottom-left-radius: 6px;
61
62
  }
62
- .btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle {
63
+ .btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle {
63
64
  -webkit-border-top-right-radius: 6px;
64
65
  -moz-border-radius-topright: 6px;
65
66
  border-top-right-radius: 6px;
@@ -69,7 +70,7 @@
69
70
  }
70
71
 
71
72
  // On hover/focus/active, bring the proper btn to front
72
- .btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active, .btn-group .btn.active {
73
+ .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
73
74
  z-index: 2;
74
75
  }
75
76
 
@@ -84,48 +85,60 @@
84
85
  // ----------------------
85
86
 
86
87
  // Give the line between buttons some depth
87
- .btn-group .dropdown-toggle {
88
+ .btn-group > .dropdown-toggle {
88
89
  padding-left: 8px;
89
90
  padding-right: 8px;
90
- $shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
91
- @include box-shadow($shadow);
92
- *padding-top: 3px;
93
- *padding-bottom: 3px;
91
+ @include box-shadow(#{inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
92
+ *padding-top: 4px;
93
+ *padding-bottom: 4px;
94
94
  }
95
- .btn-group .btn-mini.dropdown-toggle {
95
+ .btn-group > .btn-mini.dropdown-toggle {
96
96
  padding-left: 5px;
97
97
  padding-right: 5px;
98
- *padding-top: 1px;
99
- *padding-bottom: 1px;
100
98
  }
101
- .btn-group .btn-small.dropdown-toggle {
99
+ .btn-group > .btn-small.dropdown-toggle {
102
100
  *padding-top: 4px;
103
101
  *padding-bottom: 4px;
104
102
  }
105
- .btn-group .btn-large.dropdown-toggle {
103
+ .btn-group > .btn-large.dropdown-toggle {
106
104
  padding-left: 12px;
107
105
  padding-right: 12px;
108
106
  }
109
107
 
110
108
  .btn-group.open {
111
- // IE7's z-index only goes to the nearest positioned ancestor, which would
112
- // make the menu appear below buttons that appeared later on the page
113
- *z-index: $zindexDropdown;
114
-
115
- // Reposition menu on open and round all corners
116
- .dropdown-menu {
117
- display: block;
118
- margin-top: 1px;
119
- @include border-radius(5px);
120
- }
121
109
 
110
+ // The clickable button for toggling the menu
111
+ // Remove the gradient and set the same inset shadow as the :active state
122
112
  .dropdown-toggle {
123
113
  background-image: none;
124
- $shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
125
- @include box-shadow($shadow);
114
+ @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
115
+ }
116
+
117
+ // Keep the hover's background when dropdown is open
118
+ .btn.dropdown-toggle {
119
+ background-color: $btnBackgroundHighlight;
120
+ }
121
+ .btn-primary.dropdown-toggle {
122
+ background-color: $btnPrimaryBackgroundHighlight;
123
+ }
124
+ .btn-warning.dropdown-toggle {
125
+ background-color: $btnWarningBackgroundHighlight;
126
+ }
127
+ .btn-danger.dropdown-toggle {
128
+ background-color: $btnDangerBackgroundHighlight;
129
+ }
130
+ .btn-success.dropdown-toggle {
131
+ background-color: $btnSuccessBackgroundHighlight;
132
+ }
133
+ .btn-info.dropdown-toggle {
134
+ background-color: $btnInfoBackgroundHighlight;
135
+ }
136
+ .btn-inverse.dropdown-toggle {
137
+ background-color: $btnInverseBackgroundHighlight;
126
138
  }
127
139
  }
128
140
 
141
+
129
142
  // Reposition the caret
130
143
  .btn .caret {
131
144
  margin-top: 7px;
@@ -143,10 +156,17 @@
143
156
  }
144
157
  .btn-large .caret {
145
158
  margin-top: 6px;
146
- border-left: 5px solid transparent;
147
- border-right: 5px solid transparent;
148
- border-top: 5px solid $black;
159
+ border-left-width: 5px;
160
+ border-right-width: 5px;
161
+ border-top-width: 5px;
149
162
  }
163
+ // Upside down carets for .dropup
164
+ .dropup .btn-large .caret {
165
+ border-bottom: 5px solid $black;
166
+ border-top: 0;
167
+ }
168
+
169
+
150
170
 
151
171
  // Account for other colors
152
172
  .btn-primary, .btn-warning, .btn-danger, .btn-info, .btn-success, .btn-inverse {
@@ -13,20 +13,19 @@
13
13
  margin-bottom: 0; // For input.btn
14
14
  font-size: $baseFontSize;
15
15
  line-height: $baseLineHeight;
16
+ *line-height: 20px;
16
17
  color: $grayDark;
17
18
  text-align: center;
18
19
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
19
20
  vertical-align: middle;
21
+ cursor: pointer;
20
22
  @include buttonBackground($btnBackground, $btnBackgroundHighlight);
21
23
  border: 1px solid $btnBorder;
24
+ *border: 0; // Remove the border to prevent IE7's black border on input:focus
22
25
  border-bottom-color: darken($btnBorder, 10%);
23
26
  @include border-radius(4px);
24
- $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
25
- @include box-shadow($shadow);
26
- cursor: pointer;
27
-
28
- // Give IE7 some love
29
- @include ie7-restore-left-whitespace();
27
+ @include ie7-restore-left-whitespace(); // Give IE7 some love
28
+ @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
30
29
  }
31
30
 
32
31
  // Hover state
@@ -34,6 +33,7 @@
34
33
  color: $grayDark;
35
34
  text-decoration: none;
36
35
  background-color: darken($white, 10%);
36
+ *background-color: darken($white, 15%); // Buttons in IE7 don't get borders, so darken on hover
37
37
  background-position: 0 -15px;
38
38
 
39
39
  // transition is only when going to hover, otherwise the background
@@ -48,19 +48,18 @@
48
48
 
49
49
  // Active state
50
50
  .btn.active, .btn:active {
51
- background-image: none;
52
- $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
53
- @include box-shadow($shadow);
54
51
  background-color: darken($white, 10%);
55
52
  background-color: darken($white, 15%) \9;
53
+ background-image: none;
56
54
  outline: 0;
55
+ @include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
57
56
  }
58
57
 
59
58
  // Disabled state
60
59
  .btn.disabled, .btn[disabled] {
61
60
  cursor: default;
62
- background-image: none;
63
61
  background-color: darken($white, 10%);
62
+ background-image: none;
64
63
  @include opacity(0.65);
65
64
  @include box-shadow(none);
66
65
  }
@@ -104,8 +103,8 @@
104
103
  // Set text color
105
104
  // -------------------------
106
105
  .btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover {
107
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
108
106
  color: $white;
107
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
109
108
  }
110
109
  // Provide *some* extra contrast for those who can get it
111
110
  .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active {
@@ -114,6 +113,11 @@
114
113
 
115
114
  // Set the backgrounds
116
115
  // -------------------------
116
+ .btn {
117
+ // reset here as of 2.0.3 due to Recess property order
118
+ border-color: #ccc;
119
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
120
+ }
117
121
  .btn-primary {
118
122
  @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
119
123
  }
@@ -12,7 +12,18 @@
12
12
  &:hover {
13
13
  color: $black;
14
14
  text-decoration: none;
15
- @include opacity(0.4);
16
15
  cursor: pointer;
16
+ @include opacity(0.4);
17
17
  }
18
18
  }
19
+
20
+ // Additional properties for button version
21
+ // iOS requires the button element instead of an anchor tag.
22
+ // If you want the anchor version, it requires `href="#"`.
23
+ button.close {
24
+ padding: 0;
25
+ cursor: pointer;
26
+ background-color: transparent;
27
+ border: 0;
28
+ -webkit-appearance: none;
29
+ }
@@ -26,14 +26,14 @@ pre {
26
26
  margin: 0 0 $baseLineHeight / 2;
27
27
  font-size: $baseFontSize * .925; // 13px to 12px
28
28
  line-height: $baseLineHeight;
29
+ word-break: break-all;
30
+ word-wrap: break-word;
31
+ white-space: pre;
32
+ white-space: pre-wrap;
29
33
  background-color: #f5f5f5;
30
34
  border: 1px solid #ccc; // fallback for IE7-8
31
35
  border: 1px solid rgba(0,0,0,.15);
32
36
  @include border-radius(4px);
33
- white-space: pre;
34
- white-space: pre-wrap;
35
- word-break: break-all;
36
- word-wrap: break-word;
37
37
 
38
38
  // Make prettyprint styles more spaced out for readability
39
39
  &.prettyprint {
@@ -2,18 +2,18 @@
2
2
  // --------------------
3
3
 
4
4
  .fade {
5
+ @include opacity(0);
5
6
  @include transition(opacity .15s linear);
6
- opacity: 0;
7
7
  &.in {
8
- opacity: 1;
8
+ @include opacity(1);
9
9
  }
10
10
  }
11
11
 
12
12
  .collapse {
13
- @include transition(height .35s ease);
14
13
  position:relative;
15
- overflow:hidden;
16
14
  height: 0;
15
+ overflow:hidden;
16
+ @include transition(height .35s ease);
17
17
  &.in {
18
18
  height: auto;
19
19
  }
@@ -2,7 +2,7 @@
2
2
  // --------------
3
3
 
4
4
  // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
5
- .dropdown {
5
+ .dropup, .dropdown {
6
6
  position: relative;
7
7
  }
8
8
  .dropdown-toggle {
@@ -20,11 +20,11 @@
20
20
  width: 0;
21
21
  height: 0;
22
22
  vertical-align: top;
23
- border-left: 4px solid transparent;
24
- border-right: 4px solid transparent;
25
23
  border-top: 4px solid $black;
26
- @include opacity(0.3);
24
+ border-right: 4px solid transparent;
25
+ border-left: 4px solid transparent;
27
26
  content: "";
27
+ @include opacity(0.3);
28
28
  }
29
29
 
30
30
  // Place the caret
@@ -32,7 +32,7 @@
32
32
  margin-top: 8px;
33
33
  margin-left: 2px;
34
34
  }
35
- .dropdown:hover .caret, .open.dropdown .caret {
35
+ .dropdown:hover .caret, .open .caret {
36
36
  @include opacity(1);
37
37
  }
38
38
 
@@ -43,24 +43,22 @@
43
43
  top: 100%;
44
44
  left: 0;
45
45
  z-index: $zindexDropdown;
46
- float: left;
47
46
  display: none; // none by default, but block on "open" of the menu
47
+ float: left;
48
48
  min-width: 160px;
49
49
  padding: 4px 0;
50
- margin: 0; // override default ul
50
+ margin: 1px 0 0; // override default ul
51
51
  list-style: none;
52
52
  background-color: $dropdownBackground;
53
- border-color: #ccc;
54
- border-color: rgba(0,0,0,.2);
55
- border-style: solid;
56
- border-width: 1px;
57
- @include border-radius(0 0 5px 5px);
53
+ border: 1px solid #ccc;
54
+ border: 1px solid rgba(0,0,0,.2);
55
+ *border-right-width: 2px;
56
+ *border-bottom-width: 2px;
57
+ @include border-radius(5px);
58
58
  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
59
59
  -webkit-background-clip: padding-box;
60
60
  -moz-background-clip: padding;
61
61
  background-clip: padding-box;
62
- *border-right-width: 2px;
63
- *border-bottom-width: 2px;
64
62
 
65
63
  // Aligns the dropdown menu to right
66
64
  &.pull-right {
@@ -95,25 +93,21 @@
95
93
 
96
94
  // Open state for the dropdown
97
95
  // ---------------------------
98
- .dropdown.open {
96
+ .open {
99
97
  // IE7's z-index only goes to the nearest positioned ancestor, which would
100
98
  // make the menu appear below buttons that appeared later on the page
101
99
  *z-index: $zindexDropdown;
102
100
 
103
- .dropdown-toggle {
104
- color: $white;
105
- background: #ccc;
106
- background: rgba(0,0,0,.3);
107
- }
108
101
  .dropdown-menu {
109
102
  display: block;
110
103
  }
111
104
  }
112
105
 
113
106
  // Right aligned dropdowns
107
+ // ---------------------------
114
108
  .pull-right .dropdown-menu {
115
- left: auto;
116
109
  right: 0;
110
+ left: auto;
117
111
  }
118
112
 
119
113
  // Allow for dropdowns to go bottom up (aka, dropup-menu)
@@ -140,4 +134,4 @@
140
134
  .typeahead {
141
135
  margin-top: 2px; // give it some space to breathe
142
136
  @include border-radius(4px);
143
- }
137
+ }
@@ -40,7 +40,6 @@ legend {
40
40
  label, input, button, select, textarea {
41
41
  @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
42
42
  }
43
-
44
43
  input, button, select, textarea {
45
44
  font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
46
45
  }
@@ -62,8 +61,9 @@ input, textarea, select, .uneditable-input {
62
61
  font-size: $baseFontSize;
63
62
  line-height: $baseLineHeight;
64
63
  color: $gray;
64
+ background-color: $inputBackground;
65
65
  border: 1px solid $inputBorder;
66
- @include border-radius(3px);
66
+ @include border-radius($inputBorderRadius);
67
67
  }
68
68
  .uneditable-textarea {
69
69
  width: auto;
@@ -84,8 +84,9 @@ input[type="image"], input[type="checkbox"], input[type="radio"] {
84
84
  *margin-top: 0; /* IE7 */
85
85
  line-height: normal;
86
86
  cursor: pointer;
87
- @include border-radius(0);
87
+ background-color: transparent;
88
88
  border: 0 \9; /* IE9 and down */
89
+ @include border-radius(0);
89
90
  }
90
91
  input[type="image"] {
91
92
  border: 0;
@@ -96,9 +97,9 @@ input[type="file"] {
96
97
  width: auto;
97
98
  padding: initial;
98
99
  line-height: initial;
99
- border: initial;
100
100
  background-color: $inputBackground;
101
101
  background-color: initial;
102
+ border: initial;
102
103
  @include box-shadow(none);
103
104
  }
104
105
 
@@ -153,6 +154,7 @@ input[type="hidden"] {
153
154
 
154
155
  // Indent the labels to position radios/checkboxes as hanging
155
156
  .radio, .checkbox {
157
+ min-height: 18px; // clear the floating input if there is no label text
156
158
  padding-left: 18px;
157
159
  }
158
160
  .radio input[type="radio"], .checkbox input[type="checkbox"] {
@@ -184,19 +186,17 @@ input[type="hidden"] {
184
186
 
185
187
  input, textarea {
186
188
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
187
- $transition: border linear .2s, box-shadow linear .2s;
188
- @include transition($transition);
189
+ @include transition(#{border linear .2s, box-shadow linear .2s});
189
190
  }
190
191
  input:focus, textarea:focus {
191
192
  border-color: rgba(82,168,236,.8);
192
- $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
193
- @include box-shadow($shadow);
194
193
  outline: 0;
195
194
  outline: thin dotted \9; /* IE6-9 */
195
+ @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)});
196
196
  }
197
197
  input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus {
198
- @include box-shadow(none); // override for file inputs
199
198
  @include tab-focus();
199
+ @include box-shadow(none); // override for file inputs
200
200
  }
201
201
 
202
202
 
@@ -213,7 +213,9 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
213
213
  .input-xxlarge { width: 530px; }
214
214
 
215
215
  // Grid style input sizes
216
- input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
216
+ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
217
+ // Redeclare since the fluid row class is more specific
218
+ .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
217
219
  float: none;
218
220
  margin-left: 0;
219
221
  }
@@ -233,9 +235,13 @@ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditabl
233
235
 
234
236
  // Disabled and read-only inputs
235
237
  input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
238
+ cursor: not-allowed;
236
239
  background-color: $inputDisabledBackground;
237
240
  border-color: #ddd;
238
- cursor: not-allowed;
241
+ }
242
+ // Explicitly reset the colors here
243
+ input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
244
+ background-color: transparent;
239
245
  }
240
246
 
241
247
 
@@ -277,18 +283,19 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
277
283
  padding: ($baseLineHeight - 1) 20px $baseLineHeight;
278
284
  margin-top: $baseLineHeight;
279
285
  margin-bottom: $baseLineHeight;
280
- background-color: $grayLighter;
286
+ background-color: $formActionsBackground;
281
287
  border-top: 1px solid #ddd;
282
288
  @include clearfix(); // Adding clearfix to allow for .pull-right button containers
283
289
  }
284
290
 
285
291
  // For text that needs to appear as an input but should not be an input
286
292
  .uneditable-input {
287
- display: block;
293
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
294
+ white-space: nowrap;
295
+ cursor: not-allowed;
288
296
  background-color: $inputBackground;
289
297
  border-color: #eee;
290
298
  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
291
- cursor: not-allowed;
292
299
  }
293
300
 
294
301
  // Placeholder text gets special styles; can't be bundled together though for some reason
@@ -300,7 +307,7 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
300
307
  // ---------
301
308
 
302
309
  .help-block, .help-inline {
303
- color: $gray; // lighten the text for some contrast
310
+ color: $gray; // lighten the text some for contrast
304
311
  }
305
312
 
306
313
  .help-block {
@@ -324,22 +331,24 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
324
331
  .input-prepend, .input-append {
325
332
  margin-bottom: 5px;
326
333
  input, select, .uneditable-input {
334
+ position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
335
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
327
336
  *margin-left: 0;
328
- @include border-radius(0 3px 3px 0);
337
+ vertical-align: middle;
338
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
339
+ // Make input on top when focused so blue border and shadow always show
329
340
  &:focus {
330
- position: relative;
331
341
  z-index: 2;
332
342
  }
333
343
  }
334
344
  .uneditable-input {
335
- border-left-color: #eee;
336
- border-right-color: #ccc;
345
+ border-left-color: #ccc;
337
346
  }
338
347
  .add-on {
339
348
  display: inline-block;
340
349
  width: auto;
341
- min-width: 16px;
342
350
  height: $baseLineHeight;
351
+ min-width: 16px;
343
352
  padding: 4px 5px;
344
353
  font-weight: normal;
345
354
  line-height: $baseLineHeight;
@@ -350,7 +359,8 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
350
359
  border: 1px solid #ccc;
351
360
  }
352
361
  .add-on, .btn {
353
- @include border-radius(3px 0 0 3px);
362
+ margin-left: -1px;
363
+ @include border-radius(0);
354
364
  }
355
365
  .active {
356
366
  background-color: lighten($green, 30);
@@ -361,17 +371,20 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
361
371
  .add-on, .btn {
362
372
  margin-right: -1px;
363
373
  }
374
+ .add-on:first-child, .btn:first-child {
375
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
376
+ }
364
377
  }
365
378
  .input-append {
366
379
  input, select, .uneditable-input {
367
- @include border-radius(3px 0 0 3px);
380
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
368
381
  }
369
382
  .uneditable-input {
370
383
  border-right-color: #ccc;
384
+ border-left-color: #eee;
371
385
  }
372
- .add-on, .btn {
373
- margin-left: -1px;
374
- @include border-radius(0 3px 3px 0);
386
+ .add-on:last-child, .btn:last-child {
387
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
375
388
  }
376
389
  }
377
390
  // Remove all border-radius for inputs with both prepend and append
@@ -381,11 +394,11 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
381
394
  }
382
395
  .add-on:first-child, .btn:first-child {
383
396
  margin-right: -1px;
384
- @include border-radius(3px 0 0 3px);
397
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
385
398
  }
386
399
  .add-on:last-child, .btn:last-child {
387
400
  margin-left: -1px;
388
- @include border-radius(0 3px 3px 0);
401
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
389
402
  }
390
403
  }
391
404
 
@@ -395,8 +408,10 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
395
408
  // -----------
396
409
 
397
410
  .search-query {
398
- padding-left: 14px;
399
411
  padding-right: 14px;
412
+ padding-right: 4px \9;
413
+ padding-left: 14px;
414
+ padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
400
415
  margin-bottom: 0; // remove the default margin on all inputs
401
416
  @include border-radius(14px);
402
417
  }
@@ -412,10 +427,13 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
412
427
  .form-search, .form-inline, .form-horizontal {
413
428
  input, textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
414
429
  display: inline-block;
430
+ @include ie7-inline-block();
415
431
  margin-bottom: 0;
416
432
  }
417
- // Re-hide elemnts due to specifity
418
- .hide { display: none; }
433
+ // Re-hide hidden elements due to specifity
434
+ .hide {
435
+ display: none;
436
+ }
419
437
  }
420
438
  .form-search label, .form-inline label {
421
439
  display: inline-block;
@@ -433,18 +451,17 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
433
451
  // Remove float and margin, set to inline-block
434
452
  .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
435
453
  float: left;
436
- margin-left: 0;
437
454
  margin-right: 3px;
455
+ margin-left: 0;
438
456
  }
439
457
 
440
458
 
441
-
442
459
  // Margin to space out fieldsets
443
460
  .control-group {
444
461
  margin-bottom: $baseLineHeight / 2;
445
462
  }
446
463
 
447
- // Legend collapses margin, so next elements is responsible for spacing
464
+ // Legend collapses margin, so next element is responsible for spacing
448
465
  legend + .control-group {
449
466
  margin-top: $baseLineHeight;
450
467
  -webkit-margin-top-collapse: separate;
@@ -468,11 +485,15 @@ legend + .control-group {
468
485
  }
469
486
  // Move over all input controls and content
470
487
  .controls {
471
- margin-left: 160px;
472
- /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
488
+ // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
489
+ // don't inherit the margin of the parent, in this case .controls
473
490
  *display: inline-block;
474
- *margin-left: 0;
475
491
  *padding-left: 20px;
492
+ margin-left: 160px;
493
+ *margin-left: 0;
494
+ &:first-child {
495
+ *padding-left: 160px;
496
+ }
476
497
  }
477
498
  // Remove bottom margin on block level help text since that's accounted for on .control-group
478
499
  .help-block {
@@ -483,4 +504,4 @@ legend + .control-group {
483
504
  .form-actions {
484
505
  padding-left: 160px;
485
506
  }
486
- }
507
+ }