style-guide 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (209) hide show
  1. data/.gitignore +11 -0
  2. data/.gitmodules +3 -0
  3. data/.pairs +11 -0
  4. data/.rvmrc +1 -0
  5. data/Gemfile +5 -0
  6. data/Gemfile.lock +144 -0
  7. data/Guardfile +14 -0
  8. data/LICENSE +7 -0
  9. data/README.md +7 -0
  10. data/Rakefile +27 -0
  11. data/app/assets/images/style_guide/.gitkeep +0 -0
  12. data/app/assets/images/style_guide/img/bird.png +0 -0
  13. data/app/assets/images/style_guide/img/bootstrap-mdo-sfmoma-01.jpg +0 -0
  14. data/app/assets/images/style_guide/img/bootstrap-mdo-sfmoma-02.jpg +0 -0
  15. data/app/assets/images/style_guide/img/bootstrap-mdo-sfmoma-03.jpg +0 -0
  16. data/app/assets/images/style_guide/img/browsers.png +0 -0
  17. data/app/assets/images/style_guide/img/bs-docs-bootstrap-features.png +0 -0
  18. data/app/assets/images/style_guide/img/bs-docs-masthead-pattern.png +0 -0
  19. data/app/assets/images/style_guide/img/bs-docs-responsive-illustrations.png +0 -0
  20. data/app/assets/images/style_guide/img/bs-docs-twitter-github.png +0 -0
  21. data/app/assets/images/style_guide/img/example-diagram-01.png +0 -0
  22. data/app/assets/images/style_guide/img/example-diagram-02.png +0 -0
  23. data/app/assets/images/style_guide/img/example-diagram-03.png +0 -0
  24. data/app/assets/images/style_guide/img/example-sites/8020select.png +0 -0
  25. data/app/assets/images/style_guide/img/example-sites/adoptahydrant.png +0 -0
  26. data/app/assets/images/style_guide/img/example-sites/bartop.png +0 -0
  27. data/app/assets/images/style_guide/img/example-sites/breakingnews.png +0 -0
  28. data/app/assets/images/style_guide/img/example-sites/fleetio.png +0 -0
  29. data/app/assets/images/style_guide/img/example-sites/gathercontent.png +0 -0
  30. data/app/assets/images/style_guide/img/example-sites/jshint.png +0 -0
  31. data/app/assets/images/style_guide/img/example-sites/kippt.png +0 -0
  32. data/app/assets/images/style_guide/img/example-sites/railwayjs.png +0 -0
  33. data/app/assets/images/style_guide/img/example-sites/soundready.png +0 -0
  34. data/app/assets/images/style_guide/img/example-sites/totalwireframe.png +0 -0
  35. data/app/assets/images/style_guide/img/examples/bootstrap-example-carousel.png +0 -0
  36. data/app/assets/images/style_guide/img/examples/bootstrap-example-fluid.jpg +0 -0
  37. data/app/assets/images/style_guide/img/examples/bootstrap-example-hero.jpg +0 -0
  38. data/app/assets/images/style_guide/img/examples/bootstrap-example-marketing-narrow.png +0 -0
  39. data/app/assets/images/style_guide/img/examples/bootstrap-example-signin.png +0 -0
  40. data/app/assets/images/style_guide/img/examples/bootstrap-example-starter.jpg +0 -0
  41. data/app/assets/images/style_guide/img/examples/bootstrap-example-sticky-footer.png +0 -0
  42. data/app/assets/images/style_guide/img/examples/browser-icon-chrome.png +0 -0
  43. data/app/assets/images/style_guide/img/examples/browser-icon-firefox.png +0 -0
  44. data/app/assets/images/style_guide/img/examples/browser-icon-safari.png +0 -0
  45. data/app/assets/images/style_guide/img/examples/slide-01.jpg +0 -0
  46. data/app/assets/images/style_guide/img/examples/slide-02.jpg +0 -0
  47. data/app/assets/images/style_guide/img/examples/slide-03.jpg +0 -0
  48. data/app/assets/images/style_guide/img/github-16px.png +0 -0
  49. data/app/assets/images/style_guide/img/glyphicons/glyphicons_009_magic.png +0 -0
  50. data/app/assets/images/style_guide/img/glyphicons/glyphicons_042_group.png +0 -0
  51. data/app/assets/images/style_guide/img/glyphicons/glyphicons_079_podium.png +0 -0
  52. data/app/assets/images/style_guide/img/glyphicons/glyphicons_082_roundabout.png +0 -0
  53. data/app/assets/images/style_guide/img/glyphicons/glyphicons_155_show_thumbnails.png +0 -0
  54. data/app/assets/images/style_guide/img/glyphicons/glyphicons_163_iphone.png +0 -0
  55. data/app/assets/images/style_guide/img/glyphicons/glyphicons_214_resize_small.png +0 -0
  56. data/app/assets/images/style_guide/img/glyphicons/glyphicons_266_book_open.png +0 -0
  57. data/app/assets/images/style_guide/img/glyphicons-halflings-white.png +0 -0
  58. data/app/assets/images/style_guide/img/glyphicons-halflings.png +0 -0
  59. data/app/assets/images/style_guide/img/grid-18px-masked.png +0 -0
  60. data/app/assets/images/style_guide/img/grid-baseline-20px.png +0 -0
  61. data/app/assets/images/style_guide/img/icon-css3.png +0 -0
  62. data/app/assets/images/style_guide/img/icon-github.png +0 -0
  63. data/app/assets/images/style_guide/img/icon-html5.png +0 -0
  64. data/app/assets/images/style_guide/img/icon-twitter.png +0 -0
  65. data/app/assets/images/style_guide/img/less-logo-large.png +0 -0
  66. data/app/assets/images/style_guide/img/less-small.png +0 -0
  67. data/app/assets/images/style_guide/img/responsive-illustrations.png +0 -0
  68. data/app/assets/javascripts/style_guide/application.js +13 -0
  69. data/app/assets/javascripts/style_guide/docs.js +154 -0
  70. data/app/assets/javascripts/style_guide/prettify.js +28 -0
  71. data/app/assets/stylesheets/style_guide/application.css +13 -0
  72. data/app/assets/stylesheets/style_guide/docs.css +1015 -0
  73. data/app/assets/stylesheets/style_guide/prettify.css +30 -0
  74. data/app/controllers/style_guide/application_controller.rb +4 -0
  75. data/app/controllers/style_guide/style_controller.rb +12 -0
  76. data/app/helpers/style_guide/application_helper.rb +4 -0
  77. data/app/views/layouts/style_guide/application.html.erb +44 -0
  78. data/app/views/style_guide/partials/_buttons.erb +167 -0
  79. data/app/views/style_guide/partials/_code.erb +31 -0
  80. data/app/views/style_guide/partials/_forms.erb +714 -0
  81. data/app/views/style_guide/partials/_images.erb +318 -0
  82. data/app/views/style_guide/partials/_tables.erb +409 -0
  83. data/app/views/style_guide/partials/_typography.erb +331 -0
  84. data/app/views/style_guide/style/index.html.erb +32 -0
  85. data/config/routes.rb +3 -0
  86. data/lib/style_guide/engine.rb +12 -0
  87. data/lib/style_guide/version.rb +3 -0
  88. data/lib/style_guide.rb +4 -0
  89. data/script/rails +8 -0
  90. data/spec/dummy/README.rdoc +261 -0
  91. data/spec/dummy/Rakefile +7 -0
  92. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_009_magic.png +0 -0
  93. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_042_group.png +0 -0
  94. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_079_podium.png +0 -0
  95. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_082_roundabout.png +0 -0
  96. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_155_show_thumbnails.png +0 -0
  97. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_163_iphone.png +0 -0
  98. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_214_resize_small.png +0 -0
  99. data/spec/dummy/app/assets/images/img/glyphicons/glyphicons_266_book_open.png +0 -0
  100. data/spec/dummy/app/assets/images/img/glyphicons-halflings-white.png +0 -0
  101. data/spec/dummy/app/assets/images/img/glyphicons-halflings.png +0 -0
  102. data/spec/dummy/app/assets/javascripts/application.js +27 -0
  103. data/spec/dummy/app/assets/javascripts/bootstrap-affix.js +106 -0
  104. data/spec/dummy/app/assets/javascripts/bootstrap-alert.js +88 -0
  105. data/spec/dummy/app/assets/javascripts/bootstrap-button.js +94 -0
  106. data/spec/dummy/app/assets/javascripts/bootstrap-carousel.js +176 -0
  107. data/spec/dummy/app/assets/javascripts/bootstrap-collapse.js +156 -0
  108. data/spec/dummy/app/assets/javascripts/bootstrap-dropdown.js +148 -0
  109. data/spec/dummy/app/assets/javascripts/bootstrap-modal.js +234 -0
  110. data/spec/dummy/app/assets/javascripts/bootstrap-popover.js +103 -0
  111. data/spec/dummy/app/assets/javascripts/bootstrap-scrollspy.js +151 -0
  112. data/spec/dummy/app/assets/javascripts/bootstrap-tab.js +133 -0
  113. data/spec/dummy/app/assets/javascripts/bootstrap-tooltip.js +276 -0
  114. data/spec/dummy/app/assets/javascripts/bootstrap-transition.js +60 -0
  115. data/spec/dummy/app/assets/javascripts/bootstrap-typeahead.js +310 -0
  116. data/spec/dummy/app/assets/javascripts/jquery.js +2 -0
  117. data/spec/dummy/app/assets/stylesheets/application.css +15 -0
  118. data/spec/dummy/app/assets/stylesheets/bootstrap/accordion.less +34 -0
  119. data/spec/dummy/app/assets/stylesheets/bootstrap/alerts.less +65 -0
  120. data/spec/dummy/app/assets/stylesheets/bootstrap/bootstrap.less +63 -0
  121. data/spec/dummy/app/assets/stylesheets/bootstrap/breadcrumbs.less +24 -0
  122. data/spec/dummy/app/assets/stylesheets/bootstrap/button-groups.less +242 -0
  123. data/spec/dummy/app/assets/stylesheets/bootstrap/buttons.less +232 -0
  124. data/spec/dummy/app/assets/stylesheets/bootstrap/carousel.less +131 -0
  125. data/spec/dummy/app/assets/stylesheets/bootstrap/close.less +31 -0
  126. data/spec/dummy/app/assets/stylesheets/bootstrap/code.less +58 -0
  127. data/spec/dummy/app/assets/stylesheets/bootstrap/component-animations.less +22 -0
  128. data/spec/dummy/app/assets/stylesheets/bootstrap/dropdowns.less +237 -0
  129. data/spec/dummy/app/assets/stylesheets/bootstrap/forms.less +683 -0
  130. data/spec/dummy/app/assets/stylesheets/bootstrap/grid.less +21 -0
  131. data/spec/dummy/app/assets/stylesheets/bootstrap/hero-unit.less +25 -0
  132. data/spec/dummy/app/assets/stylesheets/bootstrap/labels-badges.less +74 -0
  133. data/spec/dummy/app/assets/stylesheets/bootstrap/layouts.less +16 -0
  134. data/spec/dummy/app/assets/stylesheets/bootstrap/media.less +55 -0
  135. data/spec/dummy/app/assets/stylesheets/bootstrap/mixins.less +687 -0
  136. data/spec/dummy/app/assets/stylesheets/bootstrap/modals.less +94 -0
  137. data/spec/dummy/app/assets/stylesheets/bootstrap/navbar.less +475 -0
  138. data/spec/dummy/app/assets/stylesheets/bootstrap/navs.less +385 -0
  139. data/spec/dummy/app/assets/stylesheets/bootstrap/pager.less +41 -0
  140. data/spec/dummy/app/assets/stylesheets/bootstrap/pagination.less +121 -0
  141. data/spec/dummy/app/assets/stylesheets/bootstrap/popovers.less +117 -0
  142. data/spec/dummy/app/assets/stylesheets/bootstrap/progress-bars.less +122 -0
  143. data/spec/dummy/app/assets/stylesheets/bootstrap/reset.less +138 -0
  144. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-1200px-min.less +28 -0
  145. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-767px-max.less +193 -0
  146. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-768px-979px.less +19 -0
  147. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-navbar.less +185 -0
  148. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive-utilities.less +43 -0
  149. data/spec/dummy/app/assets/stylesheets/bootstrap/responsive.less +48 -0
  150. data/spec/dummy/app/assets/stylesheets/bootstrap/scaffolding.less +52 -0
  151. data/spec/dummy/app/assets/stylesheets/bootstrap/sprites.less +193 -0
  152. data/spec/dummy/app/assets/stylesheets/bootstrap/tables.less +236 -0
  153. data/spec/dummy/app/assets/stylesheets/bootstrap/thumbnails.less +52 -0
  154. data/spec/dummy/app/assets/stylesheets/bootstrap/tooltip.less +70 -0
  155. data/spec/dummy/app/assets/stylesheets/bootstrap/type.less +227 -0
  156. data/spec/dummy/app/assets/stylesheets/bootstrap/utilities.less +30 -0
  157. data/spec/dummy/app/assets/stylesheets/bootstrap/variables.less +301 -0
  158. data/spec/dummy/app/assets/stylesheets/bootstrap/wells.less +29 -0
  159. data/spec/dummy/app/assets/stylesheets/bootstrap-responsive.css +1088 -0
  160. data/spec/dummy/app/assets/stylesheets/bootstrap.css +5893 -0
  161. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/_colors.scss +10 -0
  162. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/ars-maquette-web.css +35 -0
  163. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/button.less +5 -0
  164. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/layout.css.scss +11 -0
  165. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/typography.css.scss +20 -0
  166. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap/variables.css.less +10 -0
  167. data/spec/dummy/app/assets/stylesheets/pivotal-bootstrap.css.less +3 -0
  168. data/spec/dummy/app/controllers/application_controller.rb +3 -0
  169. data/spec/dummy/app/controllers/home_controller.rb +3 -0
  170. data/spec/dummy/app/helpers/application_helper.rb +2 -0
  171. data/spec/dummy/app/mailers/.gitkeep +0 -0
  172. data/spec/dummy/app/models/.gitkeep +0 -0
  173. data/spec/dummy/app/views/home/index.html.erb +1 -0
  174. data/spec/dummy/app/views/layouts/application.html.erb +14 -0
  175. data/spec/dummy/app/views/styles/_info-header.erb +1 -0
  176. data/spec/dummy/config/application.rb +32 -0
  177. data/spec/dummy/config/boot.rb +10 -0
  178. data/spec/dummy/config/environment.rb +5 -0
  179. data/spec/dummy/config/environments/development.rb +30 -0
  180. data/spec/dummy/config/environments/production.rb +67 -0
  181. data/spec/dummy/config/environments/test.rb +34 -0
  182. data/spec/dummy/config/initializers/backtrace_silencers.rb +7 -0
  183. data/spec/dummy/config/initializers/inflections.rb +15 -0
  184. data/spec/dummy/config/initializers/mime_types.rb +5 -0
  185. data/spec/dummy/config/initializers/secret_token.rb +7 -0
  186. data/spec/dummy/config/initializers/session_store.rb +8 -0
  187. data/spec/dummy/config/initializers/wrap_parameters.rb +9 -0
  188. data/spec/dummy/config/locales/en.yml +5 -0
  189. data/spec/dummy/config/routes.rb +4 -0
  190. data/spec/dummy/config.ru +4 -0
  191. data/spec/dummy/lib/assets/.gitkeep +0 -0
  192. data/spec/dummy/log/.gitkeep +0 -0
  193. data/spec/dummy/public/404.html +26 -0
  194. data/spec/dummy/public/422.html +26 -0
  195. data/spec/dummy/public/500.html +25 -0
  196. data/spec/dummy/public/favicon.ico +0 -0
  197. data/spec/dummy/public/img/glyphicons/glyphicons_009_magic.png +0 -0
  198. data/spec/dummy/public/img/glyphicons/glyphicons_042_group.png +0 -0
  199. data/spec/dummy/public/img/glyphicons/glyphicons_079_podium.png +0 -0
  200. data/spec/dummy/public/img/glyphicons/glyphicons_082_roundabout.png +0 -0
  201. data/spec/dummy/public/img/glyphicons/glyphicons_155_show_thumbnails.png +0 -0
  202. data/spec/dummy/public/img/glyphicons/glyphicons_163_iphone.png +0 -0
  203. data/spec/dummy/public/img/glyphicons/glyphicons_214_resize_small.png +0 -0
  204. data/spec/dummy/public/img/glyphicons/glyphicons_266_book_open.png +0 -0
  205. data/spec/dummy/public/img/glyphicons-halflings-white.png +0 -0
  206. data/spec/dummy/public/img/glyphicons-halflings.png +0 -0
  207. data/spec/dummy/script/rails +6 -0
  208. data/style-guide.gemspec +26 -0
  209. metadata +500 -0
@@ -0,0 +1,683 @@
1
+ //
2
+ // Forms
3
+ // --------------------------------------------------
4
+
5
+
6
+ // GENERAL STYLES
7
+ // --------------
8
+
9
+ // Make all forms have space below them
10
+ form {
11
+ margin: 0 0 @baseLineHeight;
12
+ }
13
+
14
+ fieldset {
15
+ padding: 0;
16
+ margin: 0;
17
+ border: 0;
18
+ }
19
+
20
+ // Groups of fields with labels on top (legends)
21
+ legend {
22
+ display: block;
23
+ width: 100%;
24
+ padding: 0;
25
+ margin-bottom: @baseLineHeight;
26
+ font-size: @baseFontSize * 1.5;
27
+ line-height: @baseLineHeight * 2;
28
+ color: @grayDark;
29
+ border: 0;
30
+ border-bottom: 1px solid #e5e5e5;
31
+
32
+ // Small
33
+ small {
34
+ font-size: @baseLineHeight * .75;
35
+ color: @grayLight;
36
+ }
37
+ }
38
+
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
+ label {
56
+ display: block;
57
+ margin-bottom: 5px;
58
+ }
59
+
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
+
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
+ }
132
+ }
133
+
134
+ // Position radios and checkboxes better
135
+ input[type="radio"],
136
+ input[type="checkbox"] {
137
+ margin: 4px 0 0;
138
+ *margin-top: 0; /* IE7 */
139
+ margin-top: 1px \9; /* IE8-9 */
140
+ line-height: normal;
141
+ cursor: pointer;
142
+ }
143
+
144
+ // Reset width of input images, buttons, radios, checkboxes
145
+ input[type="file"],
146
+ input[type="image"],
147
+ input[type="submit"],
148
+ input[type="reset"],
149
+ input[type="button"],
150
+ input[type="radio"],
151
+ input[type="checkbox"] {
152
+ width: auto; // Override of generic input selector
153
+ }
154
+
155
+ // Set the height of select and file controls to match text inputs
156
+ select,
157
+ input[type="file"] {
158
+ height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
159
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
160
+ line-height: @inputHeight;
161
+ }
162
+
163
+ // Make select elements obey height by applying a border
164
+ select {
165
+ width: 220px; // default input width + 10px of padding that doesn't get applied
166
+ border: 1px solid @inputBorder;
167
+ background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
168
+ }
169
+
170
+ // Make multiple select elements height not fixed
171
+ select[multiple],
172
+ select[size] {
173
+ height: auto;
174
+ }
175
+
176
+ // Focus for select, file, radio, and checkbox
177
+ select:focus,
178
+ input[type="file"]:focus,
179
+ input[type="radio"]:focus,
180
+ input[type="checkbox"]:focus {
181
+ .tab-focus();
182
+ }
183
+
184
+
185
+ // Uneditable inputs
186
+ // -------------------------
187
+
188
+ // Make uneditable inputs look inactive
189
+ .uneditable-input,
190
+ .uneditable-textarea {
191
+ color: @grayLight;
192
+ background-color: darken(@inputBackground, 1%);
193
+ border-color: @inputBorder;
194
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
195
+ cursor: not-allowed;
196
+ }
197
+
198
+ // For text that needs to appear as an input but should not be an input
199
+ .uneditable-input {
200
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
201
+ white-space: nowrap;
202
+ }
203
+
204
+ // Make uneditable textareas behave like a textarea
205
+ .uneditable-textarea {
206
+ width: auto;
207
+ height: auto;
208
+ }
209
+
210
+
211
+ // Placeholder
212
+ // -------------------------
213
+
214
+ // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
215
+ input,
216
+ textarea {
217
+ .placeholder();
218
+ }
219
+
220
+
221
+ // CHECKBOXES & RADIOS
222
+ // -------------------
223
+
224
+ // Indent the labels to position radios/checkboxes as hanging
225
+ .radio,
226
+ .checkbox {
227
+ min-height: @baseLineHeight; // clear the floating input if there is no label text
228
+ padding-left: 20px;
229
+ }
230
+ .radio input[type="radio"],
231
+ .checkbox input[type="checkbox"] {
232
+ float: left;
233
+ margin-left: -20px;
234
+ }
235
+
236
+ // Move the options list down to align with labels
237
+ .controls > .radio:first-child,
238
+ .controls > .checkbox:first-child {
239
+ padding-top: 5px; // has to be padding because margin collaspes
240
+ }
241
+
242
+ // Radios and checkboxes on same line
243
+ // TODO v3: Convert .inline to .control-inline
244
+ .radio.inline,
245
+ .checkbox.inline {
246
+ display: inline-block;
247
+ padding-top: 5px;
248
+ margin-bottom: 0;
249
+ vertical-align: middle;
250
+ }
251
+ .radio.inline + .radio.inline,
252
+ .checkbox.inline + .checkbox.inline {
253
+ margin-left: 10px; // space out consecutive inline controls
254
+ }
255
+
256
+
257
+
258
+ // INPUT SIZES
259
+ // -----------
260
+
261
+ // General classes for quick sizes
262
+ .input-mini { width: 60px; }
263
+ .input-small { width: 90px; }
264
+ .input-medium { width: 150px; }
265
+ .input-large { width: 210px; }
266
+ .input-xlarge { width: 270px; }
267
+ .input-xxlarge { width: 530px; }
268
+
269
+ // Grid style input sizes
270
+ input[class*="span"],
271
+ select[class*="span"],
272
+ textarea[class*="span"],
273
+ .uneditable-input[class*="span"],
274
+ // Redeclare since the fluid row class is more specific
275
+ .row-fluid input[class*="span"],
276
+ .row-fluid select[class*="span"],
277
+ .row-fluid textarea[class*="span"],
278
+ .row-fluid .uneditable-input[class*="span"] {
279
+ float: none;
280
+ margin-left: 0;
281
+ }
282
+ // Ensure input-prepend/append never wraps
283
+ .input-append input[class*="span"],
284
+ .input-append .uneditable-input[class*="span"],
285
+ .input-prepend input[class*="span"],
286
+ .input-prepend .uneditable-input[class*="span"],
287
+ .row-fluid input[class*="span"],
288
+ .row-fluid select[class*="span"],
289
+ .row-fluid textarea[class*="span"],
290
+ .row-fluid .uneditable-input[class*="span"],
291
+ .row-fluid .input-prepend [class*="span"],
292
+ .row-fluid .input-append [class*="span"] {
293
+ display: inline-block;
294
+ }
295
+
296
+
297
+
298
+ // GRID SIZING FOR INPUTS
299
+ // ----------------------
300
+
301
+ // Grid sizes
302
+ #grid > .input(@gridColumnWidth, @gridGutterWidth);
303
+
304
+ // Control row for multiple inputs per line
305
+ .controls-row {
306
+ .clearfix(); // Clear the float from controls
307
+ }
308
+
309
+ // Float to collapse white-space for proper grid alignment
310
+ .controls-row [class*="span"],
311
+ // Redeclare the fluid grid collapse since we undo the float for inputs
312
+ .row-fluid .controls-row [class*="span"] {
313
+ float: left;
314
+ }
315
+ // Explicity set top padding on all checkboxes/radios, not just first-child
316
+ .controls-row .checkbox[class*="span"],
317
+ .controls-row .radio[class*="span"] {
318
+ padding-top: 5px;
319
+ }
320
+
321
+
322
+
323
+
324
+ // DISABLED STATE
325
+ // --------------
326
+
327
+ // Disabled and read-only inputs
328
+ input[disabled],
329
+ select[disabled],
330
+ textarea[disabled],
331
+ input[readonly],
332
+ select[readonly],
333
+ textarea[readonly] {
334
+ cursor: not-allowed;
335
+ background-color: @inputDisabledBackground;
336
+ }
337
+ // Explicitly reset the colors here
338
+ input[type="radio"][disabled],
339
+ input[type="checkbox"][disabled],
340
+ input[type="radio"][readonly],
341
+ input[type="checkbox"][readonly] {
342
+ background-color: transparent;
343
+ }
344
+
345
+
346
+
347
+
348
+ // FORM FIELD FEEDBACK STATES
349
+ // --------------------------
350
+
351
+ // Warning
352
+ .control-group.warning {
353
+ .formFieldState(@warningText, @warningText, @warningBackground);
354
+ }
355
+ // Error
356
+ .control-group.error {
357
+ .formFieldState(@errorText, @errorText, @errorBackground);
358
+ }
359
+ // Success
360
+ .control-group.success {
361
+ .formFieldState(@successText, @successText, @successBackground);
362
+ }
363
+ // Success
364
+ .control-group.info {
365
+ .formFieldState(@infoText, @infoText, @infoBackground);
366
+ }
367
+
368
+ // HTML5 invalid states
369
+ // Shares styles with the .control-group.error above
370
+ input:focus:required:invalid,
371
+ textarea:focus:required:invalid,
372
+ select:focus:required:invalid {
373
+ color: #b94a48;
374
+ border-color: #ee5f5b;
375
+ &:focus {
376
+ border-color: darken(#ee5f5b, 10%);
377
+ @shadow: 0 0 6px lighten(#ee5f5b, 20%);
378
+ .box-shadow(@shadow);
379
+ }
380
+ }
381
+
382
+
383
+
384
+ // FORM ACTIONS
385
+ // ------------
386
+
387
+ .form-actions {
388
+ padding: (@baseLineHeight - 1) 20px @baseLineHeight;
389
+ margin-top: @baseLineHeight;
390
+ margin-bottom: @baseLineHeight;
391
+ background-color: @formActionsBackground;
392
+ border-top: 1px solid #e5e5e5;
393
+ .clearfix(); // Adding clearfix to allow for .pull-right button containers
394
+ }
395
+
396
+
397
+
398
+ // HELP TEXT
399
+ // ---------
400
+
401
+ .help-block,
402
+ .help-inline {
403
+ color: lighten(@textColor, 15%); // lighten the text some for contrast
404
+ }
405
+
406
+ .help-block {
407
+ display: block; // account for any element using help-block
408
+ margin-bottom: @baseLineHeight / 2;
409
+ }
410
+
411
+ .help-inline {
412
+ display: inline-block;
413
+ .ie7-inline-block();
414
+ vertical-align: middle;
415
+ padding-left: 5px;
416
+ }
417
+
418
+
419
+
420
+ // INPUT GROUPS
421
+ // ------------
422
+
423
+ // Allow us to put symbols and text within the input field for a cleaner look
424
+ .input-append,
425
+ .input-prepend {
426
+ margin-bottom: 5px;
427
+ font-size: 0; // white space collapse hack
428
+ white-space: nowrap; // Prevent span and input from separating
429
+
430
+ // Reset the white space collapse hack
431
+ input,
432
+ select,
433
+ .uneditable-input,
434
+ .dropdown-menu {
435
+ font-size: @baseFontSize;
436
+ }
437
+
438
+ input,
439
+ select,
440
+ .uneditable-input {
441
+ 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
442
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
443
+ *margin-left: 0;
444
+ vertical-align: top;
445
+ .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
446
+ // Make input on top when focused so blue border and shadow always show
447
+ &:focus {
448
+ z-index: 2;
449
+ }
450
+ }
451
+ .add-on {
452
+ display: inline-block;
453
+ width: auto;
454
+ height: @baseLineHeight;
455
+ min-width: 16px;
456
+ padding: 4px 5px;
457
+ font-size: @baseFontSize;
458
+ font-weight: normal;
459
+ line-height: @baseLineHeight;
460
+ text-align: center;
461
+ text-shadow: 0 1px 0 @white;
462
+ background-color: @grayLighter;
463
+ border: 1px solid #ccc;
464
+ }
465
+ .add-on,
466
+ .btn {
467
+ vertical-align: top;
468
+ .border-radius(0);
469
+ }
470
+ .active {
471
+ background-color: lighten(@green, 30);
472
+ border-color: @green;
473
+ }
474
+ }
475
+
476
+ .input-prepend {
477
+ .add-on,
478
+ .btn {
479
+ margin-right: -1px;
480
+ }
481
+ .add-on:first-child,
482
+ .btn:first-child {
483
+ // FYI, `.btn:first-child` accounts for a button group that's prepended
484
+ .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
485
+ }
486
+ }
487
+
488
+ .input-append {
489
+ input,
490
+ select,
491
+ .uneditable-input {
492
+ .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
493
+ + .btn-group .btn {
494
+ .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
495
+ }
496
+ }
497
+ .add-on,
498
+ .btn,
499
+ .btn-group {
500
+ margin-left: -1px;
501
+ }
502
+ .add-on:last-child,
503
+ .btn:last-child {
504
+ .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
505
+ }
506
+ }
507
+
508
+ // Remove all border-radius for inputs with both prepend and append
509
+ .input-prepend.input-append {
510
+ input,
511
+ select,
512
+ .uneditable-input {
513
+ .border-radius(0);
514
+ + .btn-group .btn {
515
+ .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
516
+ }
517
+ }
518
+ .add-on:first-child,
519
+ .btn:first-child {
520
+ margin-right: -1px;
521
+ .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
522
+ }
523
+ .add-on:last-child,
524
+ .btn:last-child {
525
+ margin-left: -1px;
526
+ .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
527
+ }
528
+ .btn-group:first-child {
529
+ margin-left: 0;
530
+ }
531
+ }
532
+
533
+
534
+
535
+
536
+ // SEARCH FORM
537
+ // -----------
538
+
539
+ input.search-query {
540
+ padding-right: 14px;
541
+ padding-right: 4px \9;
542
+ padding-left: 14px;
543
+ padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
544
+ margin-bottom: 0; // Remove the default margin on all inputs
545
+ .border-radius(15px);
546
+ }
547
+
548
+ /* Allow for input prepend/append in search forms */
549
+ .form-search .input-append .search-query,
550
+ .form-search .input-prepend .search-query {
551
+ .border-radius(0); // Override due to specificity
552
+ }
553
+ .form-search .input-append .search-query {
554
+ .border-radius(14px 0 0 14px);
555
+ }
556
+ .form-search .input-append .btn {
557
+ .border-radius(0 14px 14px 0);
558
+ }
559
+ .form-search .input-prepend .search-query {
560
+ .border-radius(0 14px 14px 0);
561
+ }
562
+ .form-search .input-prepend .btn {
563
+ .border-radius(14px 0 0 14px);
564
+ }
565
+
566
+
567
+
568
+
569
+ // HORIZONTAL & VERTICAL FORMS
570
+ // ---------------------------
571
+
572
+ // Common properties
573
+ // -----------------
574
+
575
+ .form-search,
576
+ .form-inline,
577
+ .form-horizontal {
578
+ input,
579
+ textarea,
580
+ select,
581
+ .help-inline,
582
+ .uneditable-input,
583
+ .input-prepend,
584
+ .input-append {
585
+ display: inline-block;
586
+ .ie7-inline-block();
587
+ margin-bottom: 0;
588
+ vertical-align: middle;
589
+ }
590
+ // Re-hide hidden elements due to specifity
591
+ .hide {
592
+ display: none;
593
+ }
594
+ }
595
+ .form-search label,
596
+ .form-inline label,
597
+ .form-search .btn-group,
598
+ .form-inline .btn-group {
599
+ display: inline-block;
600
+ }
601
+ // Remove margin for input-prepend/-append
602
+ .form-search .input-append,
603
+ .form-inline .input-append,
604
+ .form-search .input-prepend,
605
+ .form-inline .input-prepend {
606
+ margin-bottom: 0;
607
+ }
608
+ // Inline checkbox/radio labels (remove padding on left)
609
+ .form-search .radio,
610
+ .form-search .checkbox,
611
+ .form-inline .radio,
612
+ .form-inline .checkbox {
613
+ padding-left: 0;
614
+ margin-bottom: 0;
615
+ vertical-align: middle;
616
+ }
617
+ // Remove float and margin, set to inline-block
618
+ .form-search .radio input[type="radio"],
619
+ .form-search .checkbox input[type="checkbox"],
620
+ .form-inline .radio input[type="radio"],
621
+ .form-inline .checkbox input[type="checkbox"] {
622
+ float: left;
623
+ margin-right: 3px;
624
+ margin-left: 0;
625
+ }
626
+
627
+
628
+ // Margin to space out fieldsets
629
+ .control-group {
630
+ margin-bottom: @baseLineHeight / 2;
631
+ }
632
+
633
+ // Legend collapses margin, so next element is responsible for spacing
634
+ legend + .control-group {
635
+ margin-top: @baseLineHeight;
636
+ -webkit-margin-top-collapse: separate;
637
+ }
638
+
639
+ // Horizontal-specific styles
640
+ // --------------------------
641
+
642
+ .form-horizontal {
643
+ // Increase spacing between groups
644
+ .control-group {
645
+ margin-bottom: @baseLineHeight;
646
+ .clearfix();
647
+ }
648
+ // Float the labels left
649
+ .control-label {
650
+ float: left;
651
+ width: @horizontalComponentOffset - 20;
652
+ padding-top: 5px;
653
+ text-align: right;
654
+ }
655
+ // Move over all input controls and content
656
+ .controls {
657
+ // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
658
+ // don't inherit the margin of the parent, in this case .controls
659
+ *display: inline-block;
660
+ *padding-left: 20px;
661
+ margin-left: @horizontalComponentOffset;
662
+ *margin-left: 0;
663
+ &:first-child {
664
+ *padding-left: @horizontalComponentOffset;
665
+ }
666
+ }
667
+ // Remove bottom margin on block level help text since that's accounted for on .control-group
668
+ .help-block {
669
+ margin-bottom: 0;
670
+ }
671
+ // And apply it only to .help-block instances that follow a form control
672
+ input,
673
+ select,
674
+ textarea {
675
+ + .help-block {
676
+ margin-top: @baseLineHeight / 2;
677
+ }
678
+ }
679
+ // Move over buttons in .form-actions to align with .controls
680
+ .form-actions {
681
+ padding-left: @horizontalComponentOffset;
682
+ }
683
+ }