bootstrap-sass-rtl 2.3.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +29 -0
  6. data/Rakefile +1 -0
  7. data/bootstrap-sass-rtl.gemspec +24 -0
  8. data/lib/bootstrap/sass/rtl.rb +10 -0
  9. data/lib/bootstrap/sass/rtl/version.rb +7 -0
  10. data/vendor/assets/stylesheets/bootstrap-responsive-rtl.scss +1 -0
  11. data/vendor/assets/stylesheets/bootstrap-rtl.scss +1 -0
  12. data/vendor/assets/stylesheets/bootstrap-rtl/_accordion.scss +34 -0
  13. data/vendor/assets/stylesheets/bootstrap-rtl/_alerts.scss +79 -0
  14. data/vendor/assets/stylesheets/bootstrap-rtl/_breadcrumbs.scss +24 -0
  15. data/vendor/assets/stylesheets/bootstrap-rtl/_button-groups.scss +229 -0
  16. data/vendor/assets/stylesheets/bootstrap-rtl/_buttons.scss +228 -0
  17. data/vendor/assets/stylesheets/bootstrap-rtl/_carousel.scss +158 -0
  18. data/vendor/assets/stylesheets/bootstrap-rtl/_close.scss +32 -0
  19. data/vendor/assets/stylesheets/bootstrap-rtl/_code.scss +61 -0
  20. data/vendor/assets/stylesheets/bootstrap-rtl/_component-animations.scss +22 -0
  21. data/vendor/assets/stylesheets/bootstrap-rtl/_dropdowns.scss +237 -0
  22. data/vendor/assets/stylesheets/bootstrap-rtl/_forms.scss +689 -0
  23. data/vendor/assets/stylesheets/bootstrap-rtl/_grid.scss +21 -0
  24. data/vendor/assets/stylesheets/bootstrap-rtl/_hero-unit.scss +25 -0
  25. data/vendor/assets/stylesheets/bootstrap-rtl/_labels-badges.scss +83 -0
  26. data/vendor/assets/stylesheets/bootstrap-rtl/_layouts.scss +16 -0
  27. data/vendor/assets/stylesheets/bootstrap-rtl/_media.scss +55 -0
  28. data/vendor/assets/stylesheets/bootstrap-rtl/_mixins.scss +690 -0
  29. data/vendor/assets/stylesheets/bootstrap-rtl/_modals.scss +95 -0
  30. data/vendor/assets/stylesheets/bootstrap-rtl/_navbar.scss +497 -0
  31. data/vendor/assets/stylesheets/bootstrap-rtl/_navs.scss +409 -0
  32. data/vendor/assets/stylesheets/bootstrap-rtl/_pager.scss +43 -0
  33. data/vendor/assets/stylesheets/bootstrap-rtl/_pagination.scss +123 -0
  34. data/vendor/assets/stylesheets/bootstrap-rtl/_popovers.scss +133 -0
  35. data/vendor/assets/stylesheets/bootstrap-rtl/_progress-bars.scss +122 -0
  36. data/vendor/assets/stylesheets/bootstrap-rtl/_reset.scss +216 -0
  37. data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-1200px-min.scss +28 -0
  38. data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-767px-max.scss +193 -0
  39. data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-768px-979px.scss +19 -0
  40. data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-navbar.scss +189 -0
  41. data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-utilities.scss +74 -0
  42. data/vendor/assets/stylesheets/bootstrap-rtl/_scaffolding.scss +53 -0
  43. data/vendor/assets/stylesheets/bootstrap-rtl/_sprites.scss +197 -0
  44. data/vendor/assets/stylesheets/bootstrap-rtl/_tables.scss +235 -0
  45. data/vendor/assets/stylesheets/bootstrap-rtl/_thumbnails.scss +53 -0
  46. data/vendor/assets/stylesheets/bootstrap-rtl/_tooltip.scss +70 -0
  47. data/vendor/assets/stylesheets/bootstrap-rtl/_type.scss +247 -0
  48. data/vendor/assets/stylesheets/bootstrap-rtl/_utilities.scss +45 -0
  49. data/vendor/assets/stylesheets/bootstrap-rtl/_variables.scss +301 -0
  50. data/vendor/assets/stylesheets/bootstrap-rtl/_wells.scss +29 -0
  51. data/vendor/assets/stylesheets/bootstrap-rtl/bootstrap.scss +63 -0
  52. data/vendor/assets/stylesheets/bootstrap-rtl/responsive.scss +48 -0
  53. metadata +137 -0
@@ -0,0 +1,22 @@
1
+ //
2
+ // Component animations
3
+ // --------------------------------------------------
4
+
5
+
6
+ .fade {
7
+ opacity: 0;
8
+ @include transition(opacity .15s linear);
9
+ &.in {
10
+ opacity: 1;
11
+ }
12
+ }
13
+
14
+ .collapse {
15
+ position: relative;
16
+ height: 0;
17
+ overflow: hidden;
18
+ @include transition(height .35s ease);
19
+ &.in {
20
+ height: auto;
21
+ }
22
+ }
@@ -0,0 +1,237 @@
1
+ //
2
+ // Dropdown menus
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
7
+ .dropup,
8
+ .dropdown {
9
+ position: relative;
10
+ }
11
+ .dropdown-toggle {
12
+ // The caret makes the toggle a bit too tall in IE7
13
+ *margin-bottom: -3px;
14
+ }
15
+ .dropdown-toggle:active,
16
+ .open .dropdown-toggle {
17
+ outline: 0;
18
+ }
19
+
20
+ // Dropdown arrow/caret
21
+ // --------------------
22
+ .caret {
23
+ display: inline-block;
24
+ width: 0;
25
+ height: 0;
26
+ vertical-align: top;
27
+ border-top: 4px solid $black;
28
+ border-left: 4px solid transparent;
29
+ border-right: 4px solid transparent;
30
+ content: "";
31
+ }
32
+
33
+ // Place the caret
34
+ .dropdown .caret {
35
+ margin-top: 8px;
36
+ margin-right: 2px;
37
+ }
38
+
39
+ // The dropdown menu (ul)
40
+ // ----------------------
41
+ .dropdown-menu {
42
+ position: absolute;
43
+ top: 100%;
44
+ right: 0;
45
+ z-index: $zindexDropdown;
46
+ display: none; // none by default, but block on "open" of the menu
47
+ float: right;
48
+ min-width: 160px;
49
+ padding: 5px 0;
50
+ margin: 2px 0 0; // override default ul
51
+ list-style: none;
52
+ background-color: $dropdownBackground;
53
+ border: 1px solid #ccc; // Fallback for IE7-8
54
+ border: 1px solid $dropdownBorder;
55
+ *border-left-width: 2px;
56
+ *border-bottom-width: 2px;
57
+ @include border-radius(6px);
58
+ @include box-shadow(0 5px 10px rgba(0,0,0,.2));
59
+ -webkit-background-clip: padding-box;
60
+ -moz-background-clip: padding;
61
+ background-clip: padding-box;
62
+
63
+ // Aligns the dropdown menu to left
64
+ &.pull-right {
65
+ left: 0;
66
+ right: auto;
67
+ }
68
+
69
+ // Dividers (basically an hr) within the dropdown
70
+ .divider {
71
+ @include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
72
+ }
73
+
74
+ // Links within the dropdown menu
75
+ > li > a {
76
+ display: block;
77
+ padding: 3px 20px;
78
+ clear: both;
79
+ font-weight: normal;
80
+ line-height: $baseLineHeight;
81
+ color: $dropdownLinkColor;
82
+ white-space: nowrap;
83
+ }
84
+ }
85
+
86
+ // Hover/Focus state
87
+ // -----------
88
+ .dropdown-menu > li > a:hover,
89
+ .dropdown-menu > li > a:focus,
90
+ .dropdown-submenu:hover > a,
91
+ .dropdown-submenu:focus > a {
92
+ text-decoration: none;
93
+ color: $dropdownLinkColorHover;
94
+ @include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
95
+ }
96
+
97
+ // Active state
98
+ // ------------
99
+ .dropdown-menu > .active > a,
100
+ .dropdown-menu > .active > a:hover,
101
+ .dropdown-menu > .active > a:focus {
102
+ color: $dropdownLinkColorActive;
103
+ text-decoration: none;
104
+ outline: 0;
105
+ @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
106
+ }
107
+
108
+ // Disabled state
109
+ // --------------
110
+ // Gray out text and ensure the hover/focus state remains gray
111
+ .dropdown-menu > .disabled > a,
112
+ .dropdown-menu > .disabled > a:hover,
113
+ .dropdown-menu > .disabled > a:focus {
114
+ color: $grayLight;
115
+ }
116
+ // Nuke hover/focus effects
117
+ .dropdown-menu > .disabled > a:hover,
118
+ .dropdown-menu > .disabled > a:focus {
119
+ text-decoration: none;
120
+ background-color: transparent;
121
+ background-image: none; // Remove CSS gradient
122
+ @include reset-filter();
123
+ cursor: default;
124
+ }
125
+
126
+ // Open state for the dropdown
127
+ // ---------------------------
128
+ .open {
129
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
130
+ // make the menu appear below buttons that appeared later on the page
131
+ *z-index: $zindexDropdown;
132
+
133
+ & > .dropdown-menu {
134
+ display: block;
135
+ }
136
+ }
137
+
138
+ // left aligned dropdowns
139
+ // ---------------------------
140
+ .pull-right > .dropdown-menu {
141
+ left: 0;
142
+ right: auto;
143
+ }
144
+
145
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
146
+ // ------------------------------------------------------
147
+ // Just add .dropup after the standard .dropdown class and you're set, bro.
148
+ // TODO: abstract this so that the navbar fixed styles are not placed here?
149
+ .dropup,
150
+ .navbar-fixed-bottom .dropdown {
151
+ // Reverse the caret
152
+ .caret {
153
+ border-top: 0;
154
+ border-bottom: 4px solid $black;
155
+ content: "";
156
+ }
157
+ // Different positioning for bottom up menu
158
+ .dropdown-menu {
159
+ top: auto;
160
+ bottom: 100%;
161
+ margin-bottom: 1px;
162
+ }
163
+ }
164
+
165
+ // Sub menus
166
+ // ---------------------------
167
+ .dropdown-submenu {
168
+ position: relative;
169
+ }
170
+ // Default dropdowns
171
+ .dropdown-submenu > .dropdown-menu {
172
+ top: 0;
173
+ right: 100%;
174
+ margin-top: -6px;
175
+ margin-right: -1px;
176
+ @include border-radius(0 6px 6px 6px);
177
+ }
178
+ .dropdown-submenu:hover > .dropdown-menu {
179
+ display: block;
180
+ }
181
+
182
+ // Dropups
183
+ .dropup .dropdown-submenu > .dropdown-menu {
184
+ top: auto;
185
+ bottom: 0;
186
+ margin-top: 0;
187
+ margin-bottom: -2px;
188
+ @include border-radius(5px 0 5px 5px);
189
+ }
190
+
191
+ // Caret to indicate there is a submenu
192
+ .dropdown-submenu > a:after {
193
+ display: block;
194
+ content: " ";
195
+ float: left;
196
+ width: 0;
197
+ height: 0;
198
+ border-color: transparent;
199
+ border-style: solid;
200
+ border-width: 5px 5px 5px 0;
201
+ border-right-color: darken($dropdownBackground, 20%);
202
+ margin-top: 5px;
203
+ margin-left: -10px;
204
+ }
205
+ .dropdown-submenu:hover > a:after {
206
+ border-right-color: $dropdownLinkColorHover;
207
+ }
208
+
209
+ // Left aligned submenus
210
+ .dropdown-submenu.pull-left {
211
+ // Undo the float
212
+ // Yes, this is awkward since .pull-right adds a float, but it sticks to our conventions elsewhere.
213
+ float: none;
214
+
215
+ // Positioning the submenu
216
+ > .dropdown-menu {
217
+ right: -100%;
218
+ margin-right: 10px;
219
+ @include border-radius(6px 6px 6px 0);
220
+ }
221
+ }
222
+
223
+ // Tweak nav headers
224
+ // -----------------
225
+ // Increase padding from 15px to 20px on sides
226
+ .dropdown .dropdown-menu .nav-header {
227
+ padding-right: 20px;
228
+ padding-left: 20px;
229
+ }
230
+
231
+ // Typeahead
232
+ // ---------
233
+ .typeahead {
234
+ z-index: 1051;
235
+ margin-top: 2px; // give it some space to breathe
236
+ @include border-radius($baseBorderRadius);
237
+ }
@@ -0,0 +1,689 @@
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
+ @include 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
+ @include 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
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
123
+ @include 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
+ @include 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
+ }
142
+
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
+ // Set the height of select and file controls to match text inputs
155
+ select,
156
+ 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
167
+ }
168
+
169
+ // Make multiple select elements height not fixed
170
+ select[multiple],
171
+ select[size] {
172
+ height: auto;
173
+ }
174
+
175
+ // Focus for select, file, radio, and checkbox
176
+ select:focus,
177
+ input[type="file"]:focus,
178
+ input[type="radio"]:focus,
179
+ input[type="checkbox"]:focus {
180
+ @include tab-focus();
181
+ }
182
+
183
+
184
+ // Uneditable inputs
185
+ // -------------------------
186
+
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
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
194
+ cursor: not-allowed;
195
+ }
196
+
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
+
203
+ // Make uneditable textareas behave like a textarea
204
+ .uneditable-textarea {
205
+ width: auto;
206
+ height: auto;
207
+ }
208
+
209
+
210
+ // Placeholder
211
+ // -------------------------
212
+
213
+ // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
214
+ input,
215
+ textarea {
216
+ @include placeholder();
217
+ }
218
+
219
+
220
+ // CHECKBOXES & RADIOS
221
+ // -------------------
222
+
223
+ // Indent the labels to position radios/checkboxes as hanging
224
+ .radio,
225
+ .checkbox {
226
+ min-height: $baseLineHeight; // clear the floating input if there is no label text
227
+ padding-right: 20px;
228
+ }
229
+ .radio input[type="radio"],
230
+ .checkbox input[type="checkbox"] {
231
+ float: right;
232
+ margin-right: -20px;
233
+ }
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
239
+ }
240
+
241
+ // Radios and checkboxes on same line
242
+ // TODO v3: Convert .inline to .control-inline
243
+ .radio.inline,
244
+ .checkbox.inline {
245
+ display: inline-block;
246
+ padding-top: 5px;
247
+ margin-bottom: 0;
248
+ vertical-align: middle;
249
+ }
250
+ .radio.inline + .radio.inline,
251
+ .checkbox.inline + .checkbox.inline {
252
+ margin-right: 10px; // space out consecutive inline controls
253
+ }
254
+
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-right: 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
+ @include grid-input($gridColumnWidth, $gridGutterWidth);
302
+
303
+ // Control row for multiple inputs per line
304
+ .controls-row {
305
+ @include clearfix(); // Clear the float from controls
306
+ }
307
+
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: right;
313
+ }
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
+
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;
335
+ }
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
+
346
+
347
+ // FORM FIELD FEEDBACK STATES
348
+ // --------------------------
349
+
350
+ // Warning
351
+ .control-group.warning {
352
+ @include formFieldState($warningText, $warningText, $warningBackground);
353
+ }
354
+ // Error
355
+ .control-group.error {
356
+ @include formFieldState($errorText, $errorText, $errorBackground);
357
+ }
358
+ // Success
359
+ .control-group.success {
360
+ @include formFieldState($successText, $successText, $successBackground);
361
+ }
362
+ // Info
363
+ .control-group.info {
364
+ @include formFieldState($infoText, $infoText, $infoBackground);
365
+ }
366
+
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
+ @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
377
+ }
378
+ }
379
+
380
+
381
+
382
+ // FORM ACTIONS
383
+ // ------------
384
+
385
+ .form-actions {
386
+ padding: ($baseLineHeight - 1) 20px $baseLineHeight;
387
+ margin-top: $baseLineHeight;
388
+ margin-bottom: $baseLineHeight;
389
+ background-color: $formActionsBackground;
390
+ border-top: 1px solid #e5e5e5;
391
+ @include clearfix(); // Adding clearfix to allow for .pull-left button containers
392
+ }
393
+
394
+
395
+
396
+ // HELP TEXT
397
+ // ---------
398
+
399
+ .help-block,
400
+ .help-inline {
401
+ color: lighten($textColor, 15%); // lighten the text some for contrast
402
+ }
403
+
404
+ .help-block {
405
+ display: block; // account for any element using help-block
406
+ margin-bottom: $baseLineHeight / 2;
407
+ }
408
+
409
+ .help-inline {
410
+ display: inline-block;
411
+ @include ie7-inline-block();
412
+ vertical-align: middle;
413
+ padding-right: 5px;
414
+ }
415
+
416
+
417
+
418
+ // INPUT GROUPS
419
+ // ------------
420
+
421
+ // Allow us to put symbols and text within the input field for a cleaner look
422
+ .input-append,
423
+ .input-prepend {
424
+ display: inline-block;
425
+ margin-bottom: $baseLineHeight / 2;
426
+ vertical-align: middle;
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
+ .popover {
436
+ font-size: $baseFontSize;
437
+ }
438
+
439
+ input,
440
+ select,
441
+ .uneditable-input {
442
+ 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
443
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
444
+ *margin-right: 0;
445
+ vertical-align: top;
446
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
447
+ // Make input on top when focused so blue border and shadow always show
448
+ &:focus {
449
+ z-index: 2;
450
+ }
451
+ }
452
+ .add-on {
453
+ display: inline-block;
454
+ width: auto;
455
+ height: $baseLineHeight;
456
+ min-width: 16px;
457
+ padding: 4px 5px;
458
+ font-size: $baseFontSize;
459
+ font-weight: normal;
460
+ line-height: $baseLineHeight;
461
+ text-align: center;
462
+ text-shadow: 0 1px 0 $white;
463
+ background-color: $grayLighter;
464
+ border: 1px solid #ccc;
465
+ }
466
+ .add-on,
467
+ .btn,
468
+ .btn-group > .dropdown-toggle {
469
+ vertical-align: top;
470
+ @include border-radius(0);
471
+ }
472
+ .active {
473
+ background-color: lighten($green, 30);
474
+ border-color: $green;
475
+ }
476
+ }
477
+
478
+ .input-prepend {
479
+ .add-on,
480
+ .btn {
481
+ margin-left: -1px;
482
+ }
483
+ .add-on:first-child,
484
+ .btn:first-child {
485
+ // FYI, `.btn:first-child` accounts for a button group that's prepended
486
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
487
+ }
488
+ }
489
+
490
+ .input-append {
491
+ input,
492
+ select,
493
+ .uneditable-input {
494
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
495
+ + .btn-group .btn:last-child {
496
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
497
+ }
498
+ }
499
+ .add-on,
500
+ .btn,
501
+ .btn-group {
502
+ margin-right: -1px;
503
+ }
504
+ .add-on:last-child,
505
+ .btn:last-child,
506
+ .btn-group:last-child > .dropdown-toggle {
507
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
508
+ }
509
+ }
510
+
511
+ // Remove all border-radius for inputs with both prepend and append
512
+ .input-prepend.input-append {
513
+ input,
514
+ select,
515
+ .uneditable-input {
516
+ @include border-radius(0);
517
+ + .btn-group .btn {
518
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
519
+ }
520
+ }
521
+ .add-on:first-child,
522
+ .btn:first-child {
523
+ margin-left: -1px;
524
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
525
+ }
526
+ .add-on:last-child,
527
+ .btn:last-child {
528
+ margin-right: -1px;
529
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
530
+ }
531
+ .btn-group:first-child {
532
+ margin-right: 0;
533
+ }
534
+ }
535
+
536
+
537
+
538
+
539
+ // SEARCH FORM
540
+ // -----------
541
+
542
+ input.search-query {
543
+ padding-left: 14px;
544
+ padding-left: 4px \9;
545
+ padding-right: 14px;
546
+ padding-right: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
547
+ margin-bottom: 0; // Remove the default margin on all inputs
548
+ @include border-radius(15px);
549
+ }
550
+
551
+ /* Allow for input prepend/append in search forms */
552
+ .form-search .input-append .search-query,
553
+ .form-search .input-prepend .search-query {
554
+ @include border-radius(0); // Override due to specificity
555
+ }
556
+ .form-search .input-append .search-query {
557
+ @include border-radius(14px 14px 0 0);
558
+ }
559
+ .form-search .input-append .btn {
560
+ @include border-radius(0 0 14px 14px);
561
+ }
562
+ .form-search .input-prepend .search-query {
563
+ @include border-radius(0 0 14px 14px);
564
+ }
565
+ .form-search .input-prepend .btn {
566
+ @include border-radius(14px 14px 0 0);
567
+ }
568
+
569
+
570
+
571
+
572
+ // HORIZONTAL & VERTICAL FORMS
573
+ // ---------------------------
574
+
575
+ // Common properties
576
+ // -----------------
577
+
578
+ .form-search,
579
+ .form-inline,
580
+ .form-horizontal {
581
+ input,
582
+ textarea,
583
+ select,
584
+ .help-inline,
585
+ .uneditable-input,
586
+ .input-prepend,
587
+ .input-append {
588
+ display: inline-block;
589
+ @include ie7-inline-block();
590
+ margin-bottom: 0;
591
+ vertical-align: middle;
592
+ }
593
+ // Re-hide hidden elements due to specifity
594
+ .hide {
595
+ display: none;
596
+ }
597
+ }
598
+ .form-search label,
599
+ .form-inline label,
600
+ .form-search .btn-group,
601
+ .form-inline .btn-group {
602
+ display: inline-block;
603
+ }
604
+ // Remove margin for input-prepend/-append
605
+ .form-search .input-append,
606
+ .form-inline .input-append,
607
+ .form-search .input-prepend,
608
+ .form-inline .input-prepend {
609
+ margin-bottom: 0;
610
+ }
611
+ // Inline checkbox/radio labels (remove padding on left)
612
+ .form-search .radio,
613
+ .form-search .checkbox,
614
+ .form-inline .radio,
615
+ .form-inline .checkbox {
616
+ padding-right: 0;
617
+ margin-bottom: 0;
618
+ vertical-align: middle;
619
+ }
620
+ // Remove float and margin, set to inline-block
621
+ .form-search .radio input[type="radio"],
622
+ .form-search .checkbox input[type="checkbox"],
623
+ .form-inline .radio input[type="radio"],
624
+ .form-inline .checkbox input[type="checkbox"] {
625
+ float: right;
626
+ margin-left: 3px;
627
+ margin-right: 0;
628
+ }
629
+
630
+
631
+ // Margin to space out fieldsets
632
+ .control-group {
633
+ margin-bottom: $baseLineHeight / 2;
634
+ }
635
+
636
+ // Legend collapses margin, so next element is responsible for spacing
637
+ legend + .control-group {
638
+ margin-top: $baseLineHeight;
639
+ -webkit-margin-top-collapse: separate;
640
+ }
641
+
642
+ // Horizontal-specific styles
643
+ // --------------------------
644
+
645
+ .form-horizontal {
646
+ // Increase spacing between groups
647
+ .control-group {
648
+ margin-bottom: $baseLineHeight;
649
+ @include clearfix();
650
+ }
651
+ // Float the labels left
652
+ .control-label {
653
+ float: right;
654
+ width: $horizontalComponentOffset - 20;
655
+ padding-top: 5px;
656
+ text-align: left;
657
+ }
658
+ // Move over all input controls and content
659
+ .controls {
660
+ // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
661
+ // don't inherit the margin of the parent, in this case .controls
662
+ *display: inline-block;
663
+ *padding-right: 20px;
664
+ margin-right: $horizontalComponentOffset;
665
+ *margin-right: 0;
666
+ &:first-child {
667
+ *padding-right: $horizontalComponentOffset;
668
+ }
669
+ }
670
+ // Remove bottom margin on block level help text since that's accounted for on .control-group
671
+ .help-block {
672
+ margin-bottom: 0;
673
+ }
674
+ // And apply it only to .help-block instances that follow a form control
675
+ input,
676
+ select,
677
+ textarea,
678
+ .uneditable-input,
679
+ .input-prepend,
680
+ .input-append {
681
+ + .help-block {
682
+ margin-top: $baseLineHeight / 2;
683
+ }
684
+ }
685
+ // Move over buttons in .form-actions to align with .controls
686
+ .form-actions {
687
+ padding-right: $horizontalComponentOffset;
688
+ }
689
+ }