anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1

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 (59) hide show
  1. data/Rakefile +11 -15
  2. data/bootstrap-rails.gemspec +4 -4
  3. data/lib/bootstrap-rails/version.rb +1 -1
  4. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  5. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  6. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  7. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  8. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  9. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  10. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  11. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  12. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  13. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  14. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  15. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  16. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  17. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  18. data/vendor/assets/javascripts/bootstrap.js +8 -5
  19. data/vendor/assets/stylesheets/accordion.scss +28 -0
  20. data/vendor/assets/stylesheets/alerts.scss +70 -0
  21. data/vendor/assets/stylesheets/bootstrap.scss +44 -8
  22. data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
  23. data/vendor/assets/stylesheets/button-groups.scss +147 -0
  24. data/vendor/assets/stylesheets/buttons.scss +165 -0
  25. data/vendor/assets/stylesheets/carousel.scss +121 -0
  26. data/vendor/assets/stylesheets/close.scss +18 -0
  27. data/vendor/assets/stylesheets/code.scss +44 -0
  28. data/vendor/assets/stylesheets/component-animations.scss +18 -0
  29. data/vendor/assets/stylesheets/dropdowns.scss +131 -0
  30. data/vendor/assets/stylesheets/forms.scss +337 -287
  31. data/vendor/assets/stylesheets/grid.scss +8 -0
  32. data/vendor/assets/stylesheets/hero-unit.scss +20 -0
  33. data/vendor/assets/stylesheets/labels.scss +16 -0
  34. data/vendor/assets/stylesheets/layouts.scss +17 -0
  35. data/vendor/assets/stylesheets/mixins.scss +375 -111
  36. data/vendor/assets/stylesheets/modals.scss +72 -0
  37. data/vendor/assets/stylesheets/navbar.scss +292 -0
  38. data/vendor/assets/stylesheets/navs.scss +344 -0
  39. data/vendor/assets/stylesheets/pager.scss +30 -0
  40. data/vendor/assets/stylesheets/pagination.scss +55 -0
  41. data/vendor/assets/stylesheets/popovers.scss +49 -0
  42. data/vendor/assets/stylesheets/progress-bars.scss +95 -0
  43. data/vendor/assets/stylesheets/reset.scss +37 -52
  44. data/vendor/assets/stylesheets/responsive.scss +323 -0
  45. data/vendor/assets/stylesheets/scaffolding.scss +13 -96
  46. data/vendor/assets/stylesheets/sprites.scss +158 -0
  47. data/vendor/assets/stylesheets/tables.scss +68 -149
  48. data/vendor/assets/stylesheets/thumbnails.scss +35 -0
  49. data/vendor/assets/stylesheets/tooltip.scss +35 -0
  50. data/vendor/assets/stylesheets/type.scss +100 -70
  51. data/vendor/assets/stylesheets/utilities.scss +23 -0
  52. data/vendor/assets/stylesheets/variables.scss +94 -55
  53. data/vendor/assets/stylesheets/wells.scss +17 -0
  54. metadata +51 -30
  55. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  56. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  57. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  58. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
  59. data/vendor/assets/stylesheets/patterns.scss +0 -1060
@@ -0,0 +1,18 @@
1
+ // CLOSE ICONS
2
+ // -----------
3
+
4
+ .close {
5
+ float: right;
6
+ font-size: 20px;
7
+ font-weight: bold;
8
+ line-height: $baseLineHeight;
9
+ color: $black;
10
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
11
+ @include opacity(20);
12
+ &:hover {
13
+ color: $black;
14
+ text-decoration: none;
15
+ @include opacity(40);
16
+ cursor: pointer;
17
+ }
18
+ }
@@ -0,0 +1,44 @@
1
+ // Code.less
2
+ // Code typography styles for the <code> and <pre> elements
3
+ // --------------------------------------------------------
4
+
5
+ // Inline and block code styles
6
+ code,
7
+ pre {
8
+ padding: 0 3px 2px;
9
+ @include font-family-monospace;
10
+ font-size: $baseFontSize - 1;
11
+ color: $grayDark;
12
+ @include border-radius(3px);
13
+ }
14
+ code {
15
+ padding: 3px 4px;
16
+ color: #d14;
17
+ background-color: #f7f7f9;
18
+ border: 1px solid #e1e1e8;
19
+ }
20
+ pre {
21
+ display: block;
22
+ padding: ($baseLineHeight - 1) / 2;
23
+ margin: 0 0 $baseLineHeight / 2;
24
+ font-size: 12px;
25
+ line-height: $baseLineHeight;
26
+ background-color: #f5f5f5;
27
+ border: 1px solid #ccc; // fallback for IE7-8
28
+ border: 1px solid rgba(0,0,0,.15);
29
+ @include border-radius(4px);
30
+ white-space: pre;
31
+ white-space: pre-wrap;
32
+ word-break: break-all;
33
+
34
+ // Make prettyprint styles more spaced out for readability
35
+ &.prettyprint {
36
+ margin-bottom: $baseLineHeight;
37
+ }
38
+
39
+ // Account for some code outputs that place code tags in pre tags
40
+ code {
41
+ padding: 0;
42
+ background-color: transparent;
43
+ }
44
+ }
@@ -0,0 +1,18 @@
1
+ // COMPONENT ANIMATIONS
2
+ // --------------------
3
+
4
+ .fade {
5
+ @include transition(opacity .15s linear);
6
+ opacity: 0;
7
+ &.in {
8
+ opacity: 1;
9
+ }
10
+ }
11
+
12
+ .collapse {
13
+ @include transition(height .35s ease);
14
+ position:relative;
15
+ overflow:hidden;
16
+ height: 0;
17
+ &.in { height: auto; }
18
+ }
@@ -0,0 +1,131 @@
1
+ // DROPDOWN MENUS
2
+ // --------------
3
+
4
+ // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
5
+ .dropdown {
6
+ position: relative;
7
+ }
8
+ .dropdown-toggle {
9
+ // The caret makes the toggle a bit too tall in IE7
10
+ *margin-bottom: -3px;
11
+ }
12
+ .dropdown-toggle:active,
13
+ .open .dropdown-toggle {
14
+ outline: 0;
15
+ }
16
+ // Dropdown arrow/caret
17
+ .caret {
18
+ display: inline-block;
19
+ width: 0;
20
+ height: 0;
21
+ text-indent: -99999px;
22
+ // IE7 won't do the border trick if there's a text indent, but it doesn't
23
+ // do the content that text-indent is hiding, either, so we're ok.
24
+ *text-indent: 0;
25
+ vertical-align: top;
26
+ border-left: 4px solid transparent;
27
+ border-right: 4px solid transparent;
28
+ border-top: 4px solid $black;
29
+ @include opacity(30);
30
+ content: "\2193";
31
+ }
32
+ .dropdown .caret {
33
+ margin-top: 8px;
34
+ margin-left: 2px;
35
+ }
36
+ .dropdown:hover .caret,
37
+ .open.dropdown .caret {
38
+ @include opacity(100);
39
+ }
40
+ // The dropdown menu (ul)
41
+ .dropdown-menu {
42
+ position: absolute;
43
+ top: 100%;
44
+ left: 0;
45
+ z-index: $zindexDropdown;
46
+ float: left;
47
+ display: none; // none by default, but block on "open" of the menu
48
+ min-width: 160px;
49
+ max-width: 220px;
50
+ _width: 160px;
51
+ padding: 4px 0;
52
+ margin: 0; // override default ul
53
+ list-style: none;
54
+ background-color: $white;
55
+ border-color: #ccc;
56
+ border-color: rgba(0,0,0,.2);
57
+ border-style: solid;
58
+ border-width: 1px;
59
+ @include border-radius(0 0 5px 5px);
60
+ @include box-shadow(0 5px 10px rgba(0,0,0,.2));
61
+ -webkit-background-clip: padding-box;
62
+ -moz-background-clip: padding;
63
+ background-clip: padding-box;
64
+ *border-right-width: 2px;
65
+ *border-bottom-width: 2px;
66
+
67
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
68
+ &.bottom-up {
69
+ top: auto;
70
+ bottom: 100%;
71
+ margin-bottom: 2px;
72
+ }
73
+
74
+ // Dividers (basically an hr) within the dropdown
75
+ .divider {
76
+ height: 1px;
77
+ margin: 5px 1px;
78
+ overflow: hidden;
79
+ background-color: #e5e5e5;
80
+ border-bottom: 1px solid $white;
81
+
82
+ // IE7 needs a set width since we gave a height. Restricting just
83
+ // to IE7 to keep the 1px left/right space in other browsers.
84
+ // It is unclear where IE is getting the extra space that we need
85
+ // to negative-margin away, but so it goes.
86
+ *width: 100%;
87
+ *margin: -5px 0 5px;
88
+ }
89
+
90
+ // Links within the dropdown menu
91
+ a {
92
+ display: block;
93
+ padding: 3px 15px;
94
+ clear: both;
95
+ font-weight: normal;
96
+ line-height: 18px;
97
+ color: $gray;
98
+ white-space: nowrap;
99
+ }
100
+ }
101
+
102
+ // Hover state
103
+ .dropdown-menu li > a:hover,
104
+ .dropdown-menu .active > a,
105
+ .dropdown-menu .active > a:hover {
106
+ color: $white;
107
+ text-decoration: none;
108
+ background-color: $linkColor;
109
+ }
110
+
111
+ // Open state for the dropdown
112
+ .dropdown.open {
113
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
114
+ // make the menu appear below buttons that appeared later on the page
115
+ *z-index: $zindexDropdown;
116
+
117
+ .dropdown-toggle {
118
+ color: $white;
119
+ background: #ccc;
120
+ background: rgba(0,0,0,.3);
121
+ }
122
+ .dropdown-menu {
123
+ display: block;
124
+ }
125
+ }
126
+
127
+ // Typeahead
128
+ .typeahead {
129
+ margin-top: 2px; // give it some space to breathe
130
+ @include border-radius(4px);
131
+ }
@@ -1,66 +1,51 @@
1
- /* Forms.less
2
- * Base styles for various input types, form layouts, and states
3
- * ------------------------------------------------------------- */
1
+ // Forms.less
2
+ // Base styles for various input types, form layouts, and states
3
+ // -------------------------------------------------------------
4
4
 
5
5
 
6
- // FORM STYLES
7
- // -----------
6
+ // GENERAL STYLES
7
+ // --------------
8
8
 
9
+ // Make all forms have space below them
9
10
  form {
10
- margin-bottom: $baseline;
11
+ margin: 0 0 $baseLineHeight;
11
12
  }
12
13
 
13
- // Groups of fields with labels on top (legends)
14
14
  fieldset {
15
- margin-bottom: $baseline;
16
- padding-top: $baseline;
17
- legend {
18
- display: block;
19
- padding-left: 150px;
20
- font-size: $basefont * 1.5;
21
- line-height: 1;
22
- color: $grayDark;
23
- *padding: 0 0 5px 145px; /* IE6-7 */
24
- *line-height: 1.5; /* IE6-7 */
25
- }
15
+ padding: 0;
16
+ margin: 0;
17
+ border: 0;
26
18
  }
27
19
 
28
- // Parent element that clears floats and wraps labels and fields together
29
- form .clearfix {
30
- margin-bottom: $baseline;
31
- @include clearfix;
20
+ // Groups of fields with labels on top (legends)
21
+ legend {
22
+ display: block;
23
+ width: 100%;
24
+ padding: 0;
25
+ margin-bottom: $baseLineHeight * 1.5;
26
+ font-size: $baseFontSize * 1.5;
27
+ line-height: $baseLineHeight * 2;
28
+ color: $grayDark;
29
+ border: 0;
30
+ border-bottom: 1px solid #eee;
32
31
  }
33
32
 
34
33
  // Set font for forms
35
34
  label,
36
35
  input,
36
+ button,
37
37
  select,
38
38
  textarea {
39
- @include font-sans-serif(normal,13px,normal);
39
+ @include font-sans-serif($baseFontSize,normal,$baseLineHeight);
40
40
  }
41
41
 
42
- // Float labels left
42
+ // Identify controls by their labels
43
43
  label {
44
- padding-top: 6px;
45
- font-size: $basefont;
46
- line-height: $baseline;
47
- float: left;
48
- width: 130px;
49
- text-align: right;
44
+ display: block;
45
+ margin-bottom: 5px;
50
46
  color: $grayDark;
51
47
  }
52
48
 
53
- // Shift over the inside div to align all label's relevant content
54
- form .input {
55
- margin-left: 150px;
56
- }
57
-
58
- // Checkboxs and radio buttons
59
- input[type=checkbox],
60
- input[type=radio] {
61
- cursor: pointer;
62
- }
63
-
64
49
  // Inputs, Textareas, Selects
65
50
  input,
66
51
  textarea,
@@ -68,109 +53,216 @@ select,
68
53
  .uneditable-input {
69
54
  display: inline-block;
70
55
  width: 210px;
71
- height: $baseline;
56
+ height: $baseLineHeight;
72
57
  padding: 4px;
73
- font-size: $basefont;
74
- line-height: $baseline;
58
+ margin-bottom: 9px;
59
+ font-size: $baseFontSize;
60
+ line-height: $baseLineHeight;
75
61
  color: $gray;
76
62
  border: 1px solid #ccc;
77
63
  @include border-radius(3px);
78
64
  }
65
+ .uneditable-textarea {
66
+ width: auto;
67
+ height: auto;
68
+ }
79
69
 
80
- // remove padding from select
81
- select {
82
- padding: initial;
70
+ // Inputs within a label
71
+ label input,
72
+ label textarea,
73
+ label select {
74
+ display: block;
83
75
  }
84
76
 
85
- // mini reset for non-html5 file types
86
- input[type=checkbox],
87
- input[type=radio] {
77
+ // Mini reset for unique input types
78
+ input[type="image"],
79
+ input[type="checkbox"],
80
+ input[type="radio"] {
88
81
  width: auto;
89
82
  height: auto;
90
83
  padding: 0;
91
84
  margin: 3px 0;
92
- *margin-top: 0; /* IE6-7 */
85
+ *margin-top: 0; /* IE7 */
93
86
  line-height: normal;
94
- border: none;
87
+ border: 0;
88
+ cursor: pointer;
89
+ @include border-radius(0);
95
90
  }
96
91
 
97
- input[type=file] {
98
- background-color: $white;
92
+ // Reset the file input to browser defaults
93
+ input[type="file"] {
99
94
  padding: initial;
100
- border: initial;
101
95
  line-height: initial;
96
+ border: initial;
97
+ background-color: $white;
98
+ background-color: initial;
102
99
  @include box-shadow(none);
103
100
  }
104
101
 
105
- input[type=button],
106
- input[type=reset],
107
- input[type=submit] {
102
+ // Help out input buttons
103
+ input[type="button"],
104
+ input[type="reset"],
105
+ input[type="submit"] {
108
106
  width: auto;
109
107
  height: auto;
110
108
  }
111
109
 
110
+ // Set the height of select and file controls to match text inputs
112
111
  select,
113
- input[type=file] {
114
- height: $baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
115
- *height: auto; // Reset for IE7
116
- line-height: $baseline * 1.5;
112
+ input[type="file"] {
113
+ height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
117
114
  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
115
+ line-height: 28px;
116
+ }
117
+
118
+ // Chrome on Linux and Mobile Safari need background-color
119
+ select {
120
+ width: 220px; // default input width + 10px of padding that doesn't get applied
121
+ background-color: $white;
118
122
  }
119
123
 
120
124
  // Make multiple select elements height not fixed
121
- select[multiple] {
122
- height: inherit;
123
- background-color: $white; // Fixes Chromium bug of unreadable items
125
+ select[multiple],
126
+ select[size] {
127
+ height: auto;
128
+ }
129
+
130
+ // Remove shadow from image inputs
131
+ input[type="image"] {
132
+ @include box-shadow(none);
124
133
  }
125
134
 
135
+ // Make textarea height behave
126
136
  textarea {
127
137
  height: auto;
128
138
  }
129
139
 
130
- // For text that needs to appear as an input but should not be an input
131
- .uneditable-input {
132
- background-color: $white;
133
- display: block;
134
- border-color: #eee;
135
- @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
136
- cursor: not-allowed;
140
+ // Hidden inputs
141
+ input[type="hidden"] {
142
+ display: none;
137
143
  }
138
144
 
139
- // Placeholder text gets special styles; can't be bundled together though for some reason
140
- :-moz-placeholder {
141
- color: $grayLight;
145
+
146
+
147
+ // CHECKBOXES & RADIOS
148
+ // -------------------
149
+
150
+ // Indent the labels to position radios/checkboxes as hanging
151
+ .radio,
152
+ .checkbox {
153
+ padding-left: 18px;
142
154
  }
143
- ::-webkit-input-placeholder {
144
- color: $grayLight;
155
+ .radio input[type="radio"],
156
+ .checkbox input[type="checkbox"] {
157
+ float: left;
158
+ margin-left: -18px;
145
159
  }
146
160
 
147
- // Focus states
161
+ // Move the options list down to align with labels
162
+ .controls > .radio:first-child,
163
+ .controls > .checkbox:first-child {
164
+ padding-top: 5px; // has to be padding because margin collaspes
165
+ }
166
+
167
+ // Radios and checkboxes on same line
168
+ .radio.inline,
169
+ .checkbox.inline {
170
+ display: inline-block;
171
+ margin-bottom: 0;
172
+ vertical-align: middle;
173
+ }
174
+ .radio.inline + .radio.inline,
175
+ .checkbox.inline + .checkbox.inline {
176
+ margin-left: 10px; // space out consecutive inline controls
177
+ }
178
+ // But don't forget to remove their padding on first-child
179
+ .controls > .radio.inline:first-child,
180
+ .controls > .checkbox.inline:first-child {
181
+ padding-top: 0;
182
+ }
183
+
184
+
185
+
186
+ // FOCUS STATE
187
+ // -----------
188
+
148
189
  input,
149
190
  textarea {
191
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
150
192
  $transition: border linear .2s, box-shadow linear .2s;
151
193
  @include transition($transition);
152
- @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
153
194
  }
154
195
  input:focus,
155
196
  textarea:focus {
156
- outline: 0;
157
197
  border-color: rgba(82,168,236,.8);
158
- $shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
198
+ $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
159
199
  @include box-shadow($shadow);
200
+ outline: 0;
201
+ outline: thin dotted \9; /* IE6-8 */
160
202
  }
161
- input[type=file]:focus,
162
- input[type=checkbox]:focus,
203
+ input[type="file"]:focus,
204
+ input[type="checkbox"]:focus,
163
205
  select:focus {
164
206
  @include box-shadow(none); // override for file inputs
165
- outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
207
+ @include tab-focus();
208
+ }
209
+
210
+
211
+
212
+ // INPUT SIZES
213
+ // -----------
214
+
215
+ // General classes for quick sizes
216
+ .input-mini { width: 60px; }
217
+ .input-small { width: 90px; }
218
+ .input-medium { width: 150px; }
219
+ .input-large { width: 210px; }
220
+ .input-xlarge { width: 270px; }
221
+ .input-xxlarge { width: 530px; }
222
+
223
+ // Grid style input sizes
224
+ input[class*="span"],
225
+ select[class*="span"],
226
+ textarea[class*="span"],
227
+ .uneditable-input {
228
+ float: none;
229
+ margin-left: 0;
230
+ }
231
+
232
+
233
+
234
+ // GRID SIZING FOR INPUTS
235
+ // ----------------------
236
+
237
+ @include input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth);
238
+
239
+
240
+
241
+
242
+
243
+ // DISABLED STATE
244
+ // --------------
245
+
246
+ // Disabled and read-only inputs
247
+ input[disabled],
248
+ select[disabled],
249
+ textarea[disabled],
250
+ input[readonly],
251
+ select[readonly],
252
+ textarea[readonly] {
253
+ background-color: #f5f5f5;
254
+ border-color: #ddd;
255
+ cursor: not-allowed;
166
256
  }
167
257
 
168
258
 
259
+
260
+
169
261
  // FORM FIELD FEEDBACK STATES
170
262
  // --------------------------
171
263
 
172
264
  // Mixin for form field states
173
- @mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
265
+ @mixin form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
174
266
  // Set the text color
175
267
  > label,
176
268
  .help-block,
@@ -179,6 +271,7 @@ select:focus {
179
271
  }
180
272
  // Style inputs accordingly
181
273
  input,
274
+ select,
182
275
  textarea {
183
276
  color: $textColor;
184
277
  border-color: $borderColor;
@@ -195,164 +288,116 @@ select:focus {
195
288
  border-color: $textColor;
196
289
  }
197
290
  }
198
- // Error
199
- form .clearfix.error {
200
- @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
201
- }
202
291
  // Warning
203
- form .clearfix.warning {
204
- @include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
205
- }
206
- // Success
207
- form .clearfix.success {
208
- @include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
209
- }
210
-
211
-
212
- // Form element sizes
213
- // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
214
- .input-mini,
215
- input.mini,
216
- textarea.mini,
217
- select.mini {
218
- width: 60px;
219
- }
220
- .input-small,
221
- input.small,
222
- textarea.small,
223
- select.small {
224
- width: 90px;
225
- }
226
- .input-medium,
227
- input.medium,
228
- textarea.medium,
229
- select.medium {
230
- width: 150px;
231
- }
232
- .input-large,
233
- input.large,
234
- textarea.large,
235
- select.large {
236
- width: 210px;
237
- }
238
- .input-xlarge,
239
- input.xlarge,
240
- textarea.xlarge,
241
- select.xlarge {
242
- width: 270px;
243
- }
244
- .input-xxlarge,
245
- input.xxlarge,
246
- textarea.xxlarge,
247
- select.xxlarge {
248
- width: 530px;
292
+ .control-group.warning {
293
+ @include form-field-state($warningText, $warningText, $warningBackground);
249
294
  }
250
- textarea.xxlarge {
251
- overflow-y: auto;
252
- }
253
-
254
- // Grid style input sizes
255
- // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
256
- @mixin form-columns($columnSpan: 1) {
257
- display: inline-block;
258
- float: none;
259
- width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
260
- margin-left: 0;
295
+ // Error
296
+ .control-group.error {
297
+ @include form-field-state($errorText, $errorText, $errorBackground);
261
298
  }
262
- input,
263
- textarea {
264
- // Default columns
265
- @for $i from 1 through 16 {
266
- &.span#{$i} { @include form-columns($i); }
299
+ // Success
300
+ .control-group.success {
301
+ @include form-field-state($successText, $successText, $successBackground);
302
+ }
303
+
304
+ // HTML5 invalid states
305
+ // Shares styles with the .control-group.error above
306
+ input:focus:required:invalid,
307
+ textarea:focus:required:invalid,
308
+ select:focus:required:invalid {
309
+ color: #b94a48;
310
+ border-color: #ee5f5b;
311
+ &:focus {
312
+ border-color: darken(#ee5f5b, 10%);
313
+ @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
267
314
  }
268
315
  }
269
316
 
270
- // Disabled and read-only inputs
271
- input[disabled],
272
- select[disabled],
273
- textarea[disabled],
274
- input[readonly],
275
- select[readonly],
276
- textarea[readonly] {
317
+
318
+
319
+ // FORM ACTIONS
320
+ // ------------
321
+
322
+ .form-actions {
323
+ padding: ($baseLineHeight - 1) 20px $baseLineHeight;
324
+ margin-top: $baseLineHeight;
325
+ margin-bottom: $baseLineHeight;
277
326
  background-color: #f5f5f5;
278
- border-color: #ddd;
279
- cursor: not-allowed;
327
+ border-top: 1px solid #ddd;
280
328
  }
281
329
 
282
- // Actions (the buttons)
283
- .actions {
284
- background: #f5f5f5;
285
- margin-top: $baseline;
286
- margin-bottom: $baseline;
287
- padding: ($baseline - 1) 20px $baseline 150px;
288
- border-top: 1px solid #ddd;
289
- @include border-radius(0 0 3px 3px);
290
- .secondary-action {
291
- float: right;
292
- a {
293
- line-height: 30px;
294
- &:hover {
295
- text-decoration: underline;
296
- }
297
- }
298
- }
330
+ // For text that needs to appear as an input but should not be an input
331
+ .uneditable-input {
332
+ display: block;
333
+ background-color: $white;
334
+ border-color: #eee;
335
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
336
+ cursor: not-allowed;
299
337
  }
300
338
 
301
- // Help Text
302
- // TODO: Do we need to set basefont and baseline here?
303
- .help-inline,
339
+ // Placeholder text gets special styles; can't be bundled together though for some reason
340
+ @include placeholder($grayLight);
341
+
342
+
343
+
344
+ // HELP TEXT
345
+ // ---------
346
+
304
347
  .help-block {
305
- font-size: $basefont;
306
- line-height: $baseline;
348
+ margin-top: 5px;
349
+ margin-bottom: 0;
307
350
  color: $grayLight;
308
351
  }
352
+
309
353
  .help-inline {
354
+ display: inline-block;
355
+ @include ie7-inline-block();
356
+ margin-bottom: 9px;
357
+ vertical-align: middle;
310
358
  padding-left: 5px;
311
- *position: relative; /* IE6-7 */
312
- *top: -5px; /* IE6-7 */
313
359
  }
314
360
 
315
- // Big blocks of help text
316
- .help-block {
317
- display: block;
318
- max-width: 600px;
319
- }
320
361
 
321
- // Inline Fields (input fields that appear as inline objects
322
- .inline-inputs {
323
- color: $gray;
324
- span {
325
- padding: 0 2px 0 1px;
326
- }
327
- }
362
+
363
+ // INPUT GROUPS
364
+ // ------------
328
365
 
329
366
  // Allow us to put symbols and text within the input field for a cleaner look
330
367
  .input-prepend,
331
368
  .input-append {
332
- input {
369
+ margin-bottom: 5px;
370
+ @include clearfix(); // Clear the float to prevent wrapping
371
+ input,
372
+ .uneditable-input {
333
373
  @include border-radius(0 3px 3px 0);
374
+ &:focus {
375
+ position: relative;
376
+ z-index: 2;
377
+ }
378
+ }
379
+ .uneditable-input {
380
+ border-left-color: #ccc;
334
381
  }
335
382
  .add-on {
336
- position: relative;
337
- background: #f5f5f5;
338
- border: 1px solid #ccc;
339
- z-index: 2;
340
383
  float: left;
341
384
  display: block;
342
385
  width: auto;
343
386
  min-width: 16px;
344
- height: 18px;
345
- padding: 4px 4px 4px 5px;
387
+ height: $baseLineHeight;
346
388
  margin-right: -1px;
389
+ padding: 4px 5px;
347
390
  font-weight: normal;
348
- line-height: 18px;
391
+ line-height: $baseLineHeight;
349
392
  color: $grayLight;
350
393
  text-align: center;
351
394
  text-shadow: 0 1px 0 $white;
395
+ background-color: #f5f5f5;
396
+ border: 1px solid #ccc;
352
397
  @include border-radius(3px 0 0 3px);
353
398
  }
354
399
  .active {
355
- background: lighten($green, 30);
400
+ background-color: lighten($green, 30);
356
401
  border-color: $green;
357
402
  }
358
403
  }
@@ -362,105 +407,110 @@ textarea[readonly] {
362
407
  }
363
408
  }
364
409
  .input-append {
365
- input {
410
+ input,
411
+ .uneditable-input {
366
412
  float: left;
367
413
  @include border-radius(3px 0 0 3px);
368
414
  }
415
+ .uneditable-input {
416
+ border-right-color: #ccc;
417
+ }
369
418
  .add-on {
370
- @include border-radius(0 3px 3px 0);
371
419
  margin-right: 0;
372
420
  margin-left: -1px;
421
+ @include border-radius(0 3px 3px 0);
373
422
  }
374
- }
423
+ input:first-child {
424
+ // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
425
+ // inherit the sum of its ancestors' margins.
426
+ *margin-left: -160px;
375
427
 
376
- // Stacked options for forms (radio buttons or checkboxes)
377
- .inputs-list {
378
- margin: 0 0 5px;
379
- width: 100%;
380
- li {
381
- display: block;
382
- padding: 0;
383
- width: 100%;
384
- }
385
- label {
386
- display: block;
387
- float: none;
388
- width: auto;
389
- padding: 0;
390
- margin-left: 20px;
391
- line-height: $baseline;
392
- text-align: left;
393
- white-space: normal;
394
- strong {
395
- color: $gray;
396
- }
397
- small {
398
- font-size: $basefont - 2;
399
- font-weight: normal;
428
+ &+.add-on {
429
+ *margin-left: -21px;
400
430
  }
401
431
  }
402
- .inputs-list {
403
- margin-left: 25px;
404
- margin-bottom: 10px;
405
- padding-top: 0;
406
- }
407
- &:first-child {
408
- padding-top: 6px;
409
- }
410
- li + li {
411
- padding-top: 2px;
412
- }
413
- input[type=radio],
414
- input[type=checkbox] {
432
+ }
433
+
434
+
435
+
436
+ // SEARCH FORM
437
+ // -----------
438
+
439
+ .search-query {
440
+ padding-left: 14px;
441
+ padding-right: 14px;
442
+ margin-bottom: 0; // remove the default margin on all inputs
443
+ @include border-radius(14px);
444
+ }
445
+
446
+
447
+
448
+ // HORIZONTAL & VERTICAL FORMS
449
+ // ---------------------------
450
+
451
+ // Common properties
452
+ // -----------------
453
+
454
+ .form-search,
455
+ .form-inline,
456
+ .form-horizontal {
457
+ input,
458
+ textarea,
459
+ select,
460
+ .help-inline,
461
+ .uneditable-input {
462
+ display: inline-block;
415
463
  margin-bottom: 0;
416
- margin-left: -20px;
417
- float: left;
418
464
  }
419
465
  }
466
+ .form-search label,
467
+ .form-inline label,
468
+ .form-search .input-append,
469
+ .form-inline .input-append,
470
+ .form-search .input-prepend,
471
+ .form-inline .input-prepend {
472
+ display: inline-block;
473
+ }
474
+ // Make the prepend and append add-on vertical-align: middle;
475
+ .form-search .input-append .add-on,
476
+ .form-inline .input-prepend .add-on,
477
+ .form-search .input-append .add-on,
478
+ .form-inline .input-prepend .add-on {
479
+ vertical-align: middle;
480
+ }
420
481
 
421
- // Stacked forms
422
- .form-stacked {
423
- padding-left: 20px;
424
- fieldset {
425
- padding-top: $baseline / 2;
426
- }
427
- legend {
428
- padding-left: 0;
429
- }
430
- label {
431
- display: block;
432
- float: none;
433
- width: auto;
434
- font-weight: bold;
435
- text-align: left;
436
- line-height: 20px;
437
- padding-top: 0;
482
+ // Margin to space out fieldsets
483
+ .control-group {
484
+ margin-bottom: $baseLineHeight / 2;
485
+ }
486
+
487
+ // Horizontal-specific styles
488
+ // --------------------------
489
+
490
+ .form-horizontal {
491
+ // Legend collapses margin, so we're relegated to padding
492
+ legend + .control-group {
493
+ margin-top: $baseLineHeight;
494
+ -webkit-margin-top-collapse: separate;
438
495
  }
439
- .clearfix {
440
- margin-bottom: $baseline / 2;
441
- div.input {
442
- margin-left: 0;
443
- }
496
+ // Increase spacing between groups
497
+ .control-group {
498
+ margin-bottom: $baseLineHeight;
499
+ @include clearfix();
444
500
  }
445
- .inputs-list {
446
- margin-bottom: 0;
447
- li {
448
- padding-top: 0;
449
- label {
450
- font-weight: normal;
451
- padding-top: 0;
452
- }
453
- }
501
+ // Float the labels left
502
+ .control-group > label {
503
+ float: left;
504
+ width: 140px;
505
+ padding-top: 5px;
506
+ text-align: right;
454
507
  }
455
- div.clearfix.error {
456
- padding-top: 10px;
457
- padding-bottom: 10px;
458
- padding-left: 10px;
459
- margin-top: 0;
460
- margin-left: -10px;
508
+ // Move over all input controls and content
509
+ .controls {
510
+ margin-left: 160px;
461
511
  }
462
- .actions {
463
- margin-left: -20px;
464
- padding-left: 20px;
512
+ // Move over buttons in .form-actions to align with .controls
513
+ .form-actions {
514
+ padding-left: 160px;
465
515
  }
466
516
  }