bootstrap-generators 2.3.2 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (179) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +12 -2
  3. data/{LICENSE.txt → MIT-LICENSE} +1 -3
  4. data/README.md +19 -64
  5. data/Rakefile +24 -22
  6. data/bootstrap-generators.gemspec +3 -1
  7. data/lib/bootstrap-generators.rb +12 -1
  8. data/lib/bootstrap/generators/version.rb +1 -1
  9. data/lib/generators/bootstrap/install/install_generator.rb +9 -24
  10. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +498 -179
  11. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.scss +620 -0
  12. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css → starter.css} +6 -6
  13. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.less → starter.less} +7 -7
  14. data/lib/generators/bootstrap/install/templates/assets/stylesheets/{fluid.css.scss → starter.scss} +7 -8
  15. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +11 -9
  16. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +9 -8
  17. data/lib/generators/bootstrap/install/templates/layouts/starter.html.erb +50 -0
  18. data/lib/generators/bootstrap/install/templates/layouts/{hero.html.haml → starter.html.haml} +0 -0
  19. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/edit.html.erb +3 -3
  20. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/index.html.erb +25 -25
  21. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/new.html.erb +2 -2
  22. data/lib/generators/bootstrap/install/templates/lib/templates/erb/scaffold/show.html.erb +5 -5
  23. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/edit.html.haml +3 -3
  24. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/index.html.haml +20 -19
  25. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/new.html.haml +2 -2
  26. data/lib/generators/bootstrap/install/templates/lib/templates/haml/scaffold/show.html.haml +5 -5
  27. data/readme-template.md.erb +5 -48
  28. data/test/lib/generators/bootstrap/install_generator_test.rb +3 -33
  29. data/vendor/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  30. data/vendor/assets/fonts/glyphicons-halflings-regular.svg +228 -0
  31. data/vendor/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  32. data/vendor/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  33. data/vendor/assets/javascripts/bootstrap-ie.js +2 -0
  34. data/vendor/assets/javascripts/bootstrap-ie/html5shiv.js +8 -0
  35. data/vendor/assets/javascripts/bootstrap-ie/respond.min.js +6 -0
  36. data/vendor/assets/javascripts/bootstrap.js +12 -13
  37. data/vendor/assets/javascripts/bootstrap/affix.js +126 -0
  38. data/vendor/assets/javascripts/{bootstrap-alert.js → bootstrap/alert.js} +35 -36
  39. data/vendor/assets/javascripts/bootstrap/button.js +109 -0
  40. data/vendor/assets/javascripts/bootstrap/carousel.js +217 -0
  41. data/vendor/assets/javascripts/bootstrap/collapse.js +179 -0
  42. data/vendor/assets/javascripts/bootstrap/dropdown.js +154 -0
  43. data/vendor/assets/javascripts/bootstrap/modal.js +246 -0
  44. data/vendor/assets/javascripts/bootstrap/popover.js +117 -0
  45. data/vendor/assets/javascripts/bootstrap/scrollspy.js +158 -0
  46. data/vendor/assets/javascripts/bootstrap/tab.js +135 -0
  47. data/vendor/assets/javascripts/bootstrap/tooltip.js +386 -0
  48. data/vendor/assets/javascripts/bootstrap/transition.js +56 -0
  49. data/vendor/assets/stylesheets/bootstrap.css +4638 -4000
  50. data/vendor/twitter/bootstrap/less/alerts.less +46 -58
  51. data/vendor/twitter/bootstrap/less/badges.less +51 -0
  52. data/vendor/twitter/bootstrap/less/bootstrap.less +27 -31
  53. data/vendor/twitter/bootstrap/less/breadcrumbs.less +7 -8
  54. data/vendor/twitter/bootstrap/less/button-groups.less +173 -154
  55. data/vendor/twitter/bootstrap/less/buttons.less +97 -165
  56. data/vendor/twitter/bootstrap/less/carousel.less +115 -64
  57. data/vendor/twitter/bootstrap/less/close.less +20 -19
  58. data/vendor/twitter/bootstrap/less/code.less +17 -22
  59. data/vendor/twitter/bootstrap/less/component-animations.less +10 -3
  60. data/vendor/twitter/bootstrap/less/dropdowns.less +92 -147
  61. data/vendor/twitter/bootstrap/less/forms.less +224 -561
  62. data/vendor/twitter/bootstrap/less/glyphicons.less +232 -0
  63. data/vendor/twitter/bootstrap/less/grid.less +336 -11
  64. data/vendor/twitter/bootstrap/less/input-groups.less +127 -0
  65. data/vendor/twitter/bootstrap/less/jumbotron.less +40 -0
  66. data/vendor/twitter/bootstrap/less/labels.less +58 -0
  67. data/vendor/twitter/bootstrap/less/list-group.less +88 -0
  68. data/vendor/twitter/bootstrap/less/media.less +8 -7
  69. data/vendor/twitter/bootstrap/less/mixins.less +487 -466
  70. data/vendor/twitter/bootstrap/less/modals.less +98 -52
  71. data/vendor/twitter/bootstrap/less/navbar.less +507 -383
  72. data/vendor/twitter/bootstrap/less/navs.less +169 -349
  73. data/vendor/twitter/bootstrap/less/normalize.less +396 -0
  74. data/vendor/twitter/bootstrap/less/pager.less +45 -33
  75. data/vendor/twitter/bootstrap/less/pagination.less +65 -105
  76. data/vendor/twitter/bootstrap/less/panels.less +148 -0
  77. data/vendor/twitter/bootstrap/less/popovers.less +51 -51
  78. data/vendor/twitter/bootstrap/less/print.less +100 -0
  79. data/vendor/twitter/bootstrap/less/progress-bars.less +28 -55
  80. data/vendor/twitter/bootstrap/less/responsive-utilities.less +195 -34
  81. data/vendor/twitter/bootstrap/less/scaffolding.less +101 -24
  82. data/vendor/twitter/bootstrap/less/tables.less +170 -178
  83. data/vendor/twitter/bootstrap/less/theme.less +232 -0
  84. data/vendor/twitter/bootstrap/less/thumbnails.less +11 -33
  85. data/vendor/twitter/bootstrap/less/tooltip.less +45 -20
  86. data/vendor/twitter/bootstrap/less/type.less +100 -109
  87. data/vendor/twitter/bootstrap/less/utilities.less +19 -7
  88. data/vendor/twitter/bootstrap/less/variables.less +498 -179
  89. data/vendor/twitter/bootstrap/less/wells.less +7 -7
  90. data/vendor/twitter/bootstrap/sass/_alerts.scss +46 -58
  91. data/vendor/twitter/bootstrap/sass/_badges.scss +51 -0
  92. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +8 -9
  93. data/vendor/twitter/bootstrap/sass/_button-groups.scss +173 -154
  94. data/vendor/twitter/bootstrap/sass/_buttons.scss +97 -165
  95. data/vendor/twitter/bootstrap/sass/_carousel.scss +116 -65
  96. data/vendor/twitter/bootstrap/sass/_close.scss +9 -8
  97. data/vendor/twitter/bootstrap/sass/_code.scss +16 -21
  98. data/vendor/twitter/bootstrap/sass/_component-animations.scss +10 -3
  99. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +94 -148
  100. data/vendor/twitter/bootstrap/sass/_forms.scss +220 -559
  101. data/vendor/twitter/bootstrap/sass/_glyphicons.scss +232 -0
  102. data/vendor/twitter/bootstrap/sass/_grid.scss +336 -11
  103. data/vendor/twitter/bootstrap/sass/_input-groups.scss +127 -0
  104. data/vendor/twitter/bootstrap/sass/_jumbotron.scss +40 -0
  105. data/vendor/twitter/bootstrap/sass/_labels.scss +58 -0
  106. data/vendor/twitter/bootstrap/sass/_list-group.scss +88 -0
  107. data/vendor/twitter/bootstrap/sass/_media.scss +8 -7
  108. data/vendor/twitter/bootstrap/sass/_mixins.scss +465 -433
  109. data/vendor/twitter/bootstrap/sass/_modals.scss +102 -52
  110. data/vendor/twitter/bootstrap/sass/_navbar.scss +511 -383
  111. data/vendor/twitter/bootstrap/sass/_navs.scss +169 -349
  112. data/vendor/twitter/bootstrap/sass/_normalize.scss +396 -0
  113. data/vendor/twitter/bootstrap/sass/_pager.scss +45 -33
  114. data/vendor/twitter/bootstrap/sass/_pagination.scss +65 -105
  115. data/vendor/twitter/bootstrap/sass/_panels.scss +148 -0
  116. data/vendor/twitter/bootstrap/sass/_popovers.scss +51 -51
  117. data/vendor/twitter/bootstrap/sass/_print.scss +100 -0
  118. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +28 -55
  119. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +180 -45
  120. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +101 -24
  121. data/vendor/twitter/bootstrap/sass/_tables.scss +169 -168
  122. data/vendor/twitter/bootstrap/sass/_theme.scss +232 -0
  123. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +11 -33
  124. data/vendor/twitter/bootstrap/sass/_tooltip.scss +45 -20
  125. data/vendor/twitter/bootstrap/sass/_type.scss +101 -110
  126. data/vendor/twitter/bootstrap/sass/_utilities.scss +19 -22
  127. data/vendor/twitter/bootstrap/sass/_variables.scss +498 -179
  128. data/vendor/twitter/bootstrap/sass/_wells.scss +7 -7
  129. data/vendor/twitter/bootstrap/sass/bootstrap.scss +29 -33
  130. metadata +47 -56
  131. data/lib/bootstrap/generators/engine.rb +0 -14
  132. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +0 -301
  133. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css +0 -18
  134. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.less +0 -19
  135. data/lib/generators/bootstrap/install/templates/assets/stylesheets/hero.css.scss +0 -19
  136. data/lib/generators/bootstrap/install/templates/config/initializers/simple_form.rb +0 -176
  137. data/lib/generators/bootstrap/install/templates/config/locales/simple_form.en.yml +0 -24
  138. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.erb +0 -13
  139. data/lib/generators/bootstrap/install/templates/form_builders/simple_form/_form.html.haml +0 -10
  140. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.erb +0 -80
  141. data/lib/generators/bootstrap/install/templates/layouts/fluid.html.haml +0 -94
  142. data/lib/generators/bootstrap/install/templates/layouts/hero.html.erb +0 -53
  143. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  144. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  145. data/vendor/assets/javascripts/bootstrap-affix.js +0 -117
  146. data/vendor/assets/javascripts/bootstrap-button.js +0 -105
  147. data/vendor/assets/javascripts/bootstrap-carousel.js +0 -207
  148. data/vendor/assets/javascripts/bootstrap-collapse.js +0 -167
  149. data/vendor/assets/javascripts/bootstrap-dropdown.js +0 -169
  150. data/vendor/assets/javascripts/bootstrap-modal.js +0 -247
  151. data/vendor/assets/javascripts/bootstrap-popover.js +0 -114
  152. data/vendor/assets/javascripts/bootstrap-scrollspy.js +0 -162
  153. data/vendor/assets/javascripts/bootstrap-tab.js +0 -144
  154. data/vendor/assets/javascripts/bootstrap-tooltip.js +0 -361
  155. data/vendor/assets/javascripts/bootstrap-transition.js +0 -60
  156. data/vendor/assets/javascripts/bootstrap-typeahead.js +0 -335
  157. data/vendor/assets/stylesheets/bootstrap-responsive.css +0 -1109
  158. data/vendor/twitter/bootstrap/less/accordion.less +0 -34
  159. data/vendor/twitter/bootstrap/less/hero-unit.less +0 -25
  160. data/vendor/twitter/bootstrap/less/labels-badges.less +0 -84
  161. data/vendor/twitter/bootstrap/less/layouts.less +0 -16
  162. data/vendor/twitter/bootstrap/less/reset.less +0 -216
  163. data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +0 -28
  164. data/vendor/twitter/bootstrap/less/responsive-767px-max.less +0 -193
  165. data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +0 -19
  166. data/vendor/twitter/bootstrap/less/responsive-navbar.less +0 -189
  167. data/vendor/twitter/bootstrap/less/responsive.less +0 -48
  168. data/vendor/twitter/bootstrap/less/sprites.less +0 -197
  169. data/vendor/twitter/bootstrap/sass/_accordion.scss +0 -34
  170. data/vendor/twitter/bootstrap/sass/_hero-unit.scss +0 -25
  171. data/vendor/twitter/bootstrap/sass/_labels-badges.scss +0 -83
  172. data/vendor/twitter/bootstrap/sass/_layouts.scss +0 -16
  173. data/vendor/twitter/bootstrap/sass/_reset.scss +0 -216
  174. data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +0 -28
  175. data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +0 -193
  176. data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +0 -19
  177. data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +0 -189
  178. data/vendor/twitter/bootstrap/sass/_sprites.scss +0 -197
  179. data/vendor/twitter/bootstrap/sass/responsive.scss +0 -48
@@ -3,13 +3,9 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // GENERAL STYLES
7
- // --------------
8
-
9
- // Make all forms have space below them
10
- form {
11
- margin: 0 0 @baseLineHeight;
12
- }
6
+ // Normalize non-controls
7
+ //
8
+ // Restyle and baseline non-control form elements.
13
9
 
14
10
  fieldset {
15
11
  padding: 0;
@@ -17,153 +13,43 @@ fieldset {
17
13
  border: 0;
18
14
  }
19
15
 
20
- // Groups of fields with labels on top (legends)
21
16
  legend {
22
17
  display: block;
23
18
  width: 100%;
24
19
  padding: 0;
25
- margin-bottom: @baseLineHeight;
26
- font-size: @baseFontSize * 1.5;
27
- line-height: @baseLineHeight * 2;
28
- color: @grayDark;
20
+ margin-bottom: @line-height-computed;
21
+ font-size: (@font-size-base * 1.5);
22
+ line-height: inherit;
23
+ color: @legend-color;
29
24
  border: 0;
30
- border-bottom: 1px solid #e5e5e5;
31
-
32
- // Small
33
- small {
34
- font-size: @baseLineHeight * .75;
35
- color: @grayLight;
36
- }
25
+ border-bottom: 1px solid @legend-border-color;
37
26
  }
38
27
 
39
- // Set font for forms
40
- label,
41
- input,
42
- button,
43
- select,
44
- textarea {
45
- #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
46
- }
47
- input,
48
- button,
49
- select,
50
- textarea {
51
- font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
52
- }
53
-
54
- // Identify controls by their labels
55
28
  label {
56
- display: block;
29
+ display: inline-block;
57
30
  margin-bottom: 5px;
31
+ font-weight: bold;
58
32
  }
59
33
 
60
- // Form controls
61
- // -------------------------
62
-
63
- // Shared size and type resets
64
- select,
65
- textarea,
66
- input[type="text"],
67
- input[type="password"],
68
- input[type="datetime"],
69
- input[type="datetime-local"],
70
- input[type="date"],
71
- input[type="month"],
72
- input[type="time"],
73
- input[type="week"],
74
- input[type="number"],
75
- input[type="email"],
76
- input[type="url"],
77
- input[type="search"],
78
- input[type="tel"],
79
- input[type="color"],
80
- .uneditable-input {
81
- display: inline-block;
82
- height: @baseLineHeight;
83
- padding: 4px 6px;
84
- margin-bottom: @baseLineHeight / 2;
85
- font-size: @baseFontSize;
86
- line-height: @baseLineHeight;
87
- color: @gray;
88
- .border-radius(@inputBorderRadius);
89
- vertical-align: middle;
90
- }
91
34
 
92
- // Reset appearance properties for textual inputs and textarea
93
- // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
94
- input,
95
- textarea,
96
- .uneditable-input {
97
- width: 206px; // plus 12px padding and 2px border
98
- }
99
- // Reset height since textareas have rows
100
- textarea {
101
- height: auto;
102
- }
103
- // Everything else
104
- textarea,
105
- input[type="text"],
106
- input[type="password"],
107
- input[type="datetime"],
108
- input[type="datetime-local"],
109
- input[type="date"],
110
- input[type="month"],
111
- input[type="time"],
112
- input[type="week"],
113
- input[type="number"],
114
- input[type="email"],
115
- input[type="url"],
116
- input[type="search"],
117
- input[type="tel"],
118
- input[type="color"],
119
- .uneditable-input {
120
- background-color: @inputBackground;
121
- border: 1px solid @inputBorder;
122
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
123
- .transition(~"border linear .2s, box-shadow linear .2s");
124
-
125
- // Focus state
126
- &:focus {
127
- border-color: rgba(82,168,236,.8);
128
- outline: 0;
129
- outline: thin dotted \9; /* IE6-9 */
130
- .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
131
- }
35
+ // Normalize form controls
36
+
37
+ // Override content-box in Normalize (* isn't specific enough)
38
+ input[type="search"] {
39
+ .box-sizing(border-box);
132
40
  }
133
41
 
134
42
  // Position radios and checkboxes better
135
43
  input[type="radio"],
136
44
  input[type="checkbox"] {
137
45
  margin: 4px 0 0;
138
- *margin-top: 0; /* IE7 */
139
46
  margin-top: 1px \9; /* IE8-9 */
140
47
  line-height: normal;
141
48
  }
142
49
 
143
- // Reset width of input images, buttons, radios, checkboxes
144
- input[type="file"],
145
- input[type="image"],
146
- input[type="submit"],
147
- input[type="reset"],
148
- input[type="button"],
149
- input[type="radio"],
150
- input[type="checkbox"] {
151
- width: auto; // Override of generic input selector
152
- }
153
-
154
50
  // Set the height of select and file controls to match text inputs
155
- select,
156
51
  input[type="file"] {
157
- height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
158
- *margin-top: 4px; /* For IE7, add top margin to align select with labels */
159
- line-height: @inputHeight;
160
- }
161
-
162
- // Make select elements obey height by applying a border
163
- select {
164
- width: 220px; // default input width + 10px of padding that doesn't get applied
165
- border: 1px solid @inputBorder;
166
- background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
52
+ display: block;
167
53
  }
168
54
 
169
55
  // Make multiple select elements height not fixed
@@ -172,519 +58,296 @@ select[size] {
172
58
  height: auto;
173
59
  }
174
60
 
61
+ // Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
62
+ select optgroup {
63
+ font-size: inherit;
64
+ font-style: inherit;
65
+ font-family: inherit;
66
+ }
67
+
175
68
  // Focus for select, file, radio, and checkbox
176
- select:focus,
177
69
  input[type="file"]:focus,
178
70
  input[type="radio"]:focus,
179
71
  input[type="checkbox"]:focus {
180
72
  .tab-focus();
181
73
  }
182
74
 
75
+ // Fix for Chrome number input
76
+ // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
77
+ // See https://github.com/twbs/bootstrap/issues/8350 for more.
78
+ input[type="number"] {
79
+ &::-webkit-outer-spin-button,
80
+ &::-webkit-inner-spin-button {
81
+ height: auto;
82
+ }
83
+ }
183
84
 
184
- // Uneditable inputs
185
- // -------------------------
186
85
 
187
- // Make uneditable inputs look inactive
188
- .uneditable-input,
189
- .uneditable-textarea {
190
- color: @grayLight;
191
- background-color: darken(@inputBackground, 1%);
192
- border-color: @inputBorder;
193
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
194
- cursor: not-allowed;
86
+ // Placeholder
87
+ //
88
+ // Placeholder text gets special styles because when browsers invalidate entire
89
+ // lines if it doesn't understand a selector/
90
+ .form-control {
91
+ .placeholder();
195
92
  }
196
93
 
197
- // For text that needs to appear as an input but should not be an input
198
- .uneditable-input {
199
- overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
200
- white-space: nowrap;
201
- }
202
94
 
203
- // Make uneditable textareas behave like a textarea
204
- .uneditable-textarea {
205
- width: auto;
206
- height: auto;
95
+ // Common form controls
96
+ //
97
+ // Shared size and type resets for form controls. Apply `.form-control` to any
98
+ // of the following form controls:
99
+ //
100
+ // select
101
+ // textarea
102
+ // input[type="text"]
103
+ // input[type="password"]
104
+ // input[type="datetime"]
105
+ // input[type="datetime-local"]
106
+ // input[type="date"]
107
+ // input[type="month"]
108
+ // input[type="time"]
109
+ // input[type="week"]
110
+ // input[type="number"]
111
+ // input[type="email"]
112
+ // input[type="url"]
113
+ // input[type="search"]
114
+ // input[type="tel"]
115
+ // input[type="color"]
116
+
117
+ .form-control {
118
+ display: block;
119
+ width: 100%;
120
+ height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
121
+ padding: @padding-base-vertical @padding-base-horizontal;
122
+ font-size: @font-size-base;
123
+ line-height: @line-height-base;
124
+ color: @input-color;
125
+ vertical-align: middle;
126
+ background-color: @input-bg;
127
+ border: 1px solid @input-border;
128
+ border-radius: @input-border-radius;
129
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
130
+ .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
131
+
132
+ // Customize the `:focus` state to imitate native WebKit styles.
133
+ .form-control-focus();
134
+
135
+ // Disabled and read-only inputs
136
+ // Note: HTML5 says that controls under a fieldset > legend:first-child won't
137
+ // be disabled if the fieldset is disabled. Due to implementation difficulty,
138
+ // we don't honor that edge case; we style them as disabled anyway.
139
+ &[disabled],
140
+ &[readonly],
141
+ fieldset[disabled] & {
142
+ cursor: not-allowed;
143
+ background-color: @input-bg-disabled;
144
+ }
145
+
146
+ // Reset height for `textarea`s
147
+ textarea& {
148
+ height: auto;
149
+ }
207
150
  }
208
151
 
209
152
 
210
- // Placeholder
211
- // -------------------------
153
+ // Form groups
154
+ //
155
+ // Designed to help with the organization and spacing of vertical forms. For
156
+ // horizontal forms, use the predefined grid classes.
212
157
 
213
- // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
214
- input,
215
- textarea {
216
- .placeholder();
158
+ .form-group {
159
+ margin-bottom: 15px;
217
160
  }
218
161
 
219
162
 
220
- // CHECKBOXES & RADIOS
221
- // -------------------
163
+ // Checkboxes and radios
164
+ //
165
+ // Indent the labels to position radios/checkboxes as hanging controls.
222
166
 
223
- // Indent the labels to position radios/checkboxes as hanging
224
167
  .radio,
225
168
  .checkbox {
226
- min-height: @baseLineHeight; // clear the floating input if there is no label text
169
+ display: block;
170
+ min-height: @line-height-computed; // clear the floating input if there is no label text
171
+ margin-top: 10px;
172
+ margin-bottom: 10px;
227
173
  padding-left: 20px;
174
+ vertical-align: middle;
175
+ label {
176
+ display: inline;
177
+ margin-bottom: 0;
178
+ font-weight: normal;
179
+ cursor: pointer;
180
+ }
228
181
  }
229
182
  .radio input[type="radio"],
230
- .checkbox input[type="checkbox"] {
183
+ .radio-inline input[type="radio"],
184
+ .checkbox input[type="checkbox"],
185
+ .checkbox-inline input[type="checkbox"] {
231
186
  float: left;
232
187
  margin-left: -20px;
233
188
  }
234
-
235
- // Move the options list down to align with labels
236
- .controls > .radio:first-child,
237
- .controls > .checkbox:first-child {
238
- padding-top: 5px; // has to be padding because margin collaspes
189
+ .radio + .radio,
190
+ .checkbox + .checkbox {
191
+ margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
239
192
  }
240
193
 
241
194
  // Radios and checkboxes on same line
242
- // TODO v3: Convert .inline to .control-inline
243
- .radio.inline,
244
- .checkbox.inline {
195
+ .radio-inline,
196
+ .checkbox-inline {
245
197
  display: inline-block;
246
- padding-top: 5px;
198
+ padding-left: 20px;
247
199
  margin-bottom: 0;
248
200
  vertical-align: middle;
201
+ font-weight: normal;
202
+ cursor: pointer;
249
203
  }
250
- .radio.inline + .radio.inline,
251
- .checkbox.inline + .checkbox.inline {
204
+ .radio-inline + .radio-inline,
205
+ .checkbox-inline + .checkbox-inline {
206
+ margin-top: 0;
252
207
  margin-left: 10px; // space out consecutive inline controls
253
208
  }
254
209
 
255
-
256
-
257
- // INPUT SIZES
258
- // -----------
259
-
260
- // General classes for quick sizes
261
- .input-mini { width: 60px; }
262
- .input-small { width: 90px; }
263
- .input-medium { width: 150px; }
264
- .input-large { width: 210px; }
265
- .input-xlarge { width: 270px; }
266
- .input-xxlarge { width: 530px; }
267
-
268
- // Grid style input sizes
269
- input[class*="span"],
270
- select[class*="span"],
271
- textarea[class*="span"],
272
- .uneditable-input[class*="span"],
273
- // Redeclare since the fluid row class is more specific
274
- .row-fluid input[class*="span"],
275
- .row-fluid select[class*="span"],
276
- .row-fluid textarea[class*="span"],
277
- .row-fluid .uneditable-input[class*="span"] {
278
- float: none;
279
- margin-left: 0;
280
- }
281
- // Ensure input-prepend/append never wraps
282
- .input-append input[class*="span"],
283
- .input-append .uneditable-input[class*="span"],
284
- .input-prepend input[class*="span"],
285
- .input-prepend .uneditable-input[class*="span"],
286
- .row-fluid input[class*="span"],
287
- .row-fluid select[class*="span"],
288
- .row-fluid textarea[class*="span"],
289
- .row-fluid .uneditable-input[class*="span"],
290
- .row-fluid .input-prepend [class*="span"],
291
- .row-fluid .input-append [class*="span"] {
292
- display: inline-block;
293
- }
294
-
295
-
296
-
297
- // GRID SIZING FOR INPUTS
298
- // ----------------------
299
-
300
- // Grid sizes
301
- #grid > .input(@gridColumnWidth, @gridGutterWidth);
302
-
303
- // Control row for multiple inputs per line
304
- .controls-row {
305
- .clearfix(); // Clear the float from controls
210
+ // Apply same disabled cursor tweak as for inputs
211
+ //
212
+ // Note: Neither radios nor checkboxes can be readonly.
213
+ input[type="radio"],
214
+ input[type="checkbox"],
215
+ .radio,
216
+ .radio-inline,
217
+ .checkbox,
218
+ .checkbox-inline {
219
+ &[disabled],
220
+ fieldset[disabled] & {
221
+ cursor: not-allowed;
222
+ }
306
223
  }
307
224
 
308
- // Float to collapse white-space for proper grid alignment
309
- .controls-row [class*="span"],
310
- // Redeclare the fluid grid collapse since we undo the float for inputs
311
- .row-fluid .controls-row [class*="span"] {
312
- float: left;
225
+ // Form control sizing
226
+ .input-sm {
227
+ .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
313
228
  }
314
- // Explicity set top padding on all checkboxes/radios, not just first-child
315
- .controls-row .checkbox[class*="span"],
316
- .controls-row .radio[class*="span"] {
317
- padding-top: 5px;
318
- }
319
-
320
-
321
-
322
-
323
- // DISABLED STATE
324
- // --------------
325
229
 
326
- // Disabled and read-only inputs
327
- input[disabled],
328
- select[disabled],
329
- textarea[disabled],
330
- input[readonly],
331
- select[readonly],
332
- textarea[readonly] {
333
- cursor: not-allowed;
334
- background-color: @inputDisabledBackground;
230
+ .input-lg {
231
+ .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
335
232
  }
336
- // Explicitly reset the colors here
337
- input[type="radio"][disabled],
338
- input[type="checkbox"][disabled],
339
- input[type="radio"][readonly],
340
- input[type="checkbox"][readonly] {
341
- background-color: transparent;
342
- }
343
-
344
-
345
233
 
346
234
 
347
- // FORM FIELD FEEDBACK STATES
348
- // --------------------------
235
+ // Form control feedback states
236
+ //
237
+ // Apply contextual and semantic states to individual form controls.
349
238
 
350
239
  // Warning
351
- .control-group.warning {
352
- .formFieldState(@warningText, @warningText, @warningBackground);
240
+ .has-warning {
241
+ .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
353
242
  }
354
243
  // Error
355
- .control-group.error {
356
- .formFieldState(@errorText, @errorText, @errorBackground);
357
- }
358
- // Success
359
- .control-group.success {
360
- .formFieldState(@successText, @successText, @successBackground);
244
+ .has-error {
245
+ .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
361
246
  }
362
247
  // Success
363
- .control-group.info {
364
- .formFieldState(@infoText, @infoText, @infoBackground);
248
+ .has-success {
249
+ .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
365
250
  }
366
251
 
367
- // HTML5 invalid states
368
- // Shares styles with the .control-group.error above
369
- input:focus:invalid,
370
- textarea:focus:invalid,
371
- select:focus:invalid {
372
- color: #b94a48;
373
- border-color: #ee5f5b;
374
- &:focus {
375
- border-color: darken(#ee5f5b, 10%);
376
- @shadow: 0 0 6px lighten(#ee5f5b, 20%);
377
- .box-shadow(@shadow);
378
- }
379
- }
380
-
381
-
382
252
 
383
- // FORM ACTIONS
384
- // ------------
253
+ // Static form control text
254
+ //
255
+ // Apply class to a `p` element to make any string of text align with labels in
256
+ // a horizontal form layout.
385
257
 
386
- .form-actions {
387
- padding: (@baseLineHeight - 1) 20px @baseLineHeight;
388
- margin-top: @baseLineHeight;
389
- margin-bottom: @baseLineHeight;
390
- background-color: @formActionsBackground;
391
- border-top: 1px solid #e5e5e5;
392
- .clearfix(); // Adding clearfix to allow for .pull-right button containers
258
+ .form-control-static {
259
+ margin-bottom: 0; // Remove default margin from `p`
260
+ padding-top: (@padding-base-vertical + 1);
393
261
  }
394
262
 
395
263
 
396
-
397
- // HELP TEXT
398
- // ---------
399
-
400
- .help-block,
401
- .help-inline {
402
- color: lighten(@textColor, 15%); // lighten the text some for contrast
403
- }
264
+ // Help text
265
+ //
266
+ // Apply to any element you wish to create light text for placement immediately
267
+ // below a form control. Use for general help, formatting, or instructional text.
404
268
 
405
269
  .help-block {
406
270
  display: block; // account for any element using help-block
407
- margin-bottom: @baseLineHeight / 2;
271
+ margin-top: 5px;
272
+ margin-bottom: 10px;
273
+ color: lighten(@text-color, 25%); // lighten the text some for contrast
408
274
  }
409
275
 
410
- .help-inline {
411
- display: inline-block;
412
- .ie7-inline-block();
413
- vertical-align: middle;
414
- padding-left: 5px;
415
- }
416
276
 
417
277
 
278
+ // Inline forms
279
+ //
280
+ // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
281
+ // forms begin stacked on extra small (mobile) devices and then go inline when
282
+ // viewports reach <768px.
283
+ //
284
+ // Requires wrapping inputs and labels with `.form-group` for proper display of
285
+ // default HTML form controls and our custom form controls (e.g., input groups).
286
+ //
287
+ // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
418
288
 
419
- // INPUT GROUPS
420
- // ------------
421
-
422
- // Allow us to put symbols and text within the input field for a cleaner look
423
- .input-append,
424
- .input-prepend {
425
- display: inline-block;
426
- margin-bottom: @baseLineHeight / 2;
427
- vertical-align: middle;
428
- font-size: 0; // white space collapse hack
429
- white-space: nowrap; // Prevent span and input from separating
430
-
431
- // Reset the white space collapse hack
432
- input,
433
- select,
434
- .uneditable-input,
435
- .dropdown-menu,
436
- .popover {
437
- font-size: @baseFontSize;
438
- }
289
+ .form-inline {
439
290
 
440
- input,
441
- select,
442
- .uneditable-input {
443
- 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
444
- margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
445
- *margin-left: 0;
446
- vertical-align: top;
447
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
448
- // Make input on top when focused so blue border and shadow always show
449
- &:focus {
450
- z-index: 2;
291
+ // Kick in the inline
292
+ @media (min-width: @screen-tablet) {
293
+ // Inline-block all the things for "inline"
294
+ .form-group {
295
+ display: inline-block;
296
+ margin-bottom: 0;
297
+ vertical-align: middle;
451
298
  }
452
- }
453
- .add-on {
454
- display: inline-block;
455
- width: auto;
456
- height: @baseLineHeight;
457
- min-width: 16px;
458
- padding: 4px 5px;
459
- font-size: @baseFontSize;
460
- font-weight: normal;
461
- line-height: @baseLineHeight;
462
- text-align: center;
463
- text-shadow: 0 1px 0 @white;
464
- background-color: @grayLighter;
465
- border: 1px solid #ccc;
466
- }
467
- .add-on,
468
- .btn,
469
- .btn-group > .dropdown-toggle {
470
- vertical-align: top;
471
- .border-radius(0);
472
- }
473
- .active {
474
- background-color: lighten(@green, 30);
475
- border-color: @green;
476
- }
477
- }
478
-
479
- .input-prepend {
480
- .add-on,
481
- .btn {
482
- margin-right: -1px;
483
- }
484
- .add-on:first-child,
485
- .btn:first-child {
486
- // FYI, `.btn:first-child` accounts for a button group that's prepended
487
- .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
488
- }
489
- }
490
299
 
491
- .input-append {
492
- input,
493
- select,
494
- .uneditable-input {
495
- .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
496
- + .btn-group .btn:last-child {
497
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
300
+ // In navbar-form, allow folks to *not* use `.form-group`
301
+ .form-control {
302
+ display: inline-block;
498
303
  }
499
- }
500
- .add-on,
501
- .btn,
502
- .btn-group {
503
- margin-left: -1px;
504
- }
505
- .add-on:last-child,
506
- .btn:last-child,
507
- .btn-group:last-child > .dropdown-toggle {
508
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
509
- }
510
- }
511
304
 
512
- // Remove all border-radius for inputs with both prepend and append
513
- .input-prepend.input-append {
514
- input,
515
- select,
516
- .uneditable-input {
517
- .border-radius(0);
518
- + .btn-group .btn {
519
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
305
+ // Remove default margin on radios/checkboxes that were used for stacking, and
306
+ // then undo the floating of radios and checkboxes to match (which also avoids
307
+ // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
308
+ .radio,
309
+ .checkbox {
310
+ display: inline-block;
311
+ margin-top: 0;
312
+ margin-bottom: 0;
313
+ padding-left: 0;
314
+ }
315
+ .radio input[type="radio"],
316
+ .checkbox input[type="checkbox"] {
317
+ float: none;
318
+ margin-left: 0;
520
319
  }
521
320
  }
522
- .add-on:first-child,
523
- .btn:first-child {
524
- margin-right: -1px;
525
- .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
526
- }
527
- .add-on:last-child,
528
- .btn:last-child {
529
- margin-left: -1px;
530
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
531
- }
532
- .btn-group:first-child {
533
- margin-left: 0;
534
- }
535
- }
536
-
537
-
538
-
539
-
540
- // SEARCH FORM
541
- // -----------
542
-
543
- input.search-query {
544
- padding-right: 14px;
545
- padding-right: 4px \9;
546
- padding-left: 14px;
547
- padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
548
- margin-bottom: 0; // Remove the default margin on all inputs
549
- .border-radius(15px);
550
- }
551
-
552
- /* Allow for input prepend/append in search forms */
553
- .form-search .input-append .search-query,
554
- .form-search .input-prepend .search-query {
555
- .border-radius(0); // Override due to specificity
556
- }
557
- .form-search .input-append .search-query {
558
- .border-radius(14px 0 0 14px);
559
- }
560
- .form-search .input-append .btn {
561
- .border-radius(0 14px 14px 0);
562
- }
563
- .form-search .input-prepend .search-query {
564
- .border-radius(0 14px 14px 0);
565
- }
566
- .form-search .input-prepend .btn {
567
- .border-radius(14px 0 0 14px);
568
321
  }
569
322
 
570
323
 
324
+ // Horizontal forms
325
+ //
326
+ // Horizontal forms are built on grid classes and allow you to create forms with
327
+ // labels on the left and inputs on the right.
571
328
 
572
-
573
- // HORIZONTAL & VERTICAL FORMS
574
- // ---------------------------
575
-
576
- // Common properties
577
- // -----------------
578
-
579
- .form-search,
580
- .form-inline,
581
329
  .form-horizontal {
582
- input,
583
- textarea,
584
- select,
585
- .help-inline,
586
- .uneditable-input,
587
- .input-prepend,
588
- .input-append {
589
- display: inline-block;
590
- .ie7-inline-block();
330
+
331
+ // Consistent vertical alignment of labels, radios, and checkboxes
332
+ .control-label,
333
+ .radio,
334
+ .checkbox,
335
+ .radio-inline,
336
+ .checkbox-inline {
337
+ margin-top: 0;
591
338
  margin-bottom: 0;
592
- vertical-align: middle;
339
+ padding-top: (@padding-base-vertical + 1); // Default padding plus a border
593
340
  }
594
- // Re-hide hidden elements due to specifity
595
- .hide {
596
- display: none;
597
- }
598
- }
599
- .form-search label,
600
- .form-inline label,
601
- .form-search .btn-group,
602
- .form-inline .btn-group {
603
- display: inline-block;
604
- }
605
- // Remove margin for input-prepend/-append
606
- .form-search .input-append,
607
- .form-inline .input-append,
608
- .form-search .input-prepend,
609
- .form-inline .input-prepend {
610
- margin-bottom: 0;
611
- }
612
- // Inline checkbox/radio labels (remove padding on left)
613
- .form-search .radio,
614
- .form-search .checkbox,
615
- .form-inline .radio,
616
- .form-inline .checkbox {
617
- padding-left: 0;
618
- margin-bottom: 0;
619
- vertical-align: middle;
620
- }
621
- // Remove float and margin, set to inline-block
622
- .form-search .radio input[type="radio"],
623
- .form-search .checkbox input[type="checkbox"],
624
- .form-inline .radio input[type="radio"],
625
- .form-inline .checkbox input[type="checkbox"] {
626
- float: left;
627
- margin-right: 3px;
628
- margin-left: 0;
629
- }
630
-
631
-
632
- // Margin to space out fieldsets
633
- .control-group {
634
- margin-bottom: @baseLineHeight / 2;
635
- }
636
-
637
- // Legend collapses margin, so next element is responsible for spacing
638
- legend + .control-group {
639
- margin-top: @baseLineHeight;
640
- -webkit-margin-top-collapse: separate;
641
- }
642
-
643
- // Horizontal-specific styles
644
- // --------------------------
645
341
 
646
- .form-horizontal {
647
- // Increase spacing between groups
648
- .control-group {
649
- margin-bottom: @baseLineHeight;
650
- .clearfix();
651
- }
652
- // Float the labels left
653
- .control-label {
654
- float: left;
655
- width: @horizontalComponentOffset - 20;
656
- padding-top: 5px;
657
- text-align: right;
658
- }
659
- // Move over all input controls and content
660
- .controls {
661
- // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
662
- // don't inherit the margin of the parent, in this case .controls
663
- *display: inline-block;
664
- *padding-left: 20px;
665
- margin-left: @horizontalComponentOffset;
666
- *margin-left: 0;
667
- &:first-child {
668
- *padding-left: @horizontalComponentOffset;
669
- }
670
- }
671
- // Remove bottom margin on block level help text since that's accounted for on .control-group
672
- .help-block {
673
- margin-bottom: 0;
342
+ // Make form groups behave like rows
343
+ .form-group {
344
+ .make-row();
674
345
  }
675
- // And apply it only to .help-block instances that follow a form control
676
- input,
677
- select,
678
- textarea,
679
- .uneditable-input,
680
- .input-prepend,
681
- .input-append {
682
- + .help-block {
683
- margin-top: @baseLineHeight / 2;
346
+
347
+ // Only right align form labels here when the columns stop stacking
348
+ @media (min-width: @screen-tablet) {
349
+ .control-label {
350
+ text-align: right;
684
351
  }
685
352
  }
686
- // Move over buttons in .form-actions to align with .controls
687
- .form-actions {
688
- padding-left: @horizontalComponentOffset;
689
- }
690
353
  }