bootstrap-sass-rtl 2.3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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
+ }