bootstrap-sass-keppy 0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. data/LICENSE +14 -0
  2. data/README.md +97 -0
  3. data/lib/bootstrap-sass.rb +43 -0
  4. data/lib/bootstrap-sass/compass_functions.rb +10 -0
  5. data/lib/bootstrap-sass/engine.rb +7 -0
  6. data/lib/bootstrap-sass/rails_functions.rb +14 -0
  7. data/templates/project/manifest.rb +18 -0
  8. data/templates/project/styles.scss +5 -0
  9. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  10. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  11. data/vendor/assets/javascripts/bootstrap-alert.js +90 -0
  12. data/vendor/assets/javascripts/bootstrap-button.js +96 -0
  13. data/vendor/assets/javascripts/bootstrap-carousel.js +169 -0
  14. data/vendor/assets/javascripts/bootstrap-collapse.js +157 -0
  15. data/vendor/assets/javascripts/bootstrap-dropdown.js +100 -0
  16. data/vendor/assets/javascripts/bootstrap-modal.js +218 -0
  17. data/vendor/assets/javascripts/bootstrap-popover.js +98 -0
  18. data/vendor/assets/javascripts/bootstrap-scrollspy.js +151 -0
  19. data/vendor/assets/javascripts/bootstrap-tab.js +135 -0
  20. data/vendor/assets/javascripts/bootstrap-tooltip.js +275 -0
  21. data/vendor/assets/javascripts/bootstrap-transition.js +61 -0
  22. data/vendor/assets/javascripts/bootstrap-typeahead.js +285 -0
  23. data/vendor/assets/javascripts/bootstrap.js +12 -0
  24. data/vendor/assets/stylesheets/_bootstrap-responsive.scss +35 -0
  25. data/vendor/assets/stylesheets/_bootstrap.scss +62 -0
  26. data/vendor/assets/stylesheets/bootstrap/_accordion.scss +33 -0
  27. data/vendor/assets/stylesheets/bootstrap/_alerts.scss +56 -0
  28. data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +24 -0
  29. data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +178 -0
  30. data/vendor/assets/stylesheets/bootstrap/_buttons.scss +171 -0
  31. data/vendor/assets/stylesheets/bootstrap/_carousel.scss +116 -0
  32. data/vendor/assets/stylesheets/bootstrap/_close.scss +29 -0
  33. data/vendor/assets/stylesheets/bootstrap/_code.scss +56 -0
  34. data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +20 -0
  35. data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +137 -0
  36. data/vendor/assets/stylesheets/bootstrap/_forms.scss +482 -0
  37. data/vendor/assets/stylesheets/bootstrap/_grid.scss +5 -0
  38. data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +22 -0
  39. data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
  40. data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
  41. data/vendor/assets/stylesheets/bootstrap/_mixins.scss +625 -0
  42. data/vendor/assets/stylesheets/bootstrap/_modals.scss +90 -0
  43. data/vendor/assets/stylesheets/bootstrap/_navbar.scss +344 -0
  44. data/vendor/assets/stylesheets/bootstrap/_navs.scss +340 -0
  45. data/vendor/assets/stylesheets/bootstrap/_pager.scss +35 -0
  46. data/vendor/assets/stylesheets/bootstrap/_pagination.scss +53 -0
  47. data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
  48. data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +118 -0
  49. data/vendor/assets/stylesheets/bootstrap/_reset.scss +110 -0
  50. data/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss +26 -0
  51. data/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss +136 -0
  52. data/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss +16 -0
  53. data/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss +147 -0
  54. data/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss +41 -0
  55. data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +29 -0
  56. data/vendor/assets/stylesheets/bootstrap/_sprites.scss +177 -0
  57. data/vendor/assets/stylesheets/bootstrap/_tables.scss +133 -0
  58. data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +49 -0
  59. data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
  60. data/vendor/assets/stylesheets/bootstrap/_type.scss +224 -0
  61. data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
  62. data/vendor/assets/stylesheets/bootstrap/_variables.scss +237 -0
  63. data/vendor/assets/stylesheets/bootstrap/_wells.scss +27 -0
  64. metadata +129 -0
@@ -0,0 +1,116 @@
1
+ // CAROUSEL
2
+ // --------
3
+
4
+ .carousel {
5
+ position: relative;
6
+ margin-bottom: $baseLineHeight;
7
+ line-height: 1;
8
+ }
9
+
10
+ .carousel-inner {
11
+ overflow: hidden;
12
+ width: 100%;
13
+ position: relative;
14
+ }
15
+
16
+ .carousel {
17
+
18
+ .item {
19
+ display: none;
20
+ position: relative;
21
+ @include transition(.6s ease-in-out left);
22
+ }
23
+
24
+ // Account for jankitude on images
25
+ .item > img {
26
+ display: block;
27
+ line-height: 1;
28
+ }
29
+
30
+ .active, .next, .prev { display: block; }
31
+
32
+ .active {
33
+ left: 0;
34
+ }
35
+
36
+ .next, .prev {
37
+ position: absolute;
38
+ top: 0;
39
+ width: 100%;
40
+ }
41
+
42
+ .next {
43
+ left: 100%;
44
+ }
45
+ .prev {
46
+ left: -100%;
47
+ }
48
+ .next.left, .prev.right {
49
+ left: 0;
50
+ }
51
+
52
+ .active.left {
53
+ left: -100%;
54
+ }
55
+ .active.right {
56
+ left: 100%;
57
+ }
58
+
59
+ }
60
+
61
+ // Left/right controls for nav
62
+ // ---------------------------
63
+
64
+ .carousel-control {
65
+ position: absolute;
66
+ top: 40%;
67
+ left: 15px;
68
+ width: 40px;
69
+ height: 40px;
70
+ margin-top: -20px;
71
+ font-size: 60px;
72
+ font-weight: 100;
73
+ line-height: 30px;
74
+ color: $white;
75
+ text-align: center;
76
+ background: $grayDarker;
77
+ border: 3px solid $white;
78
+ @include border-radius(23px);
79
+ @include opacity(0.5);
80
+
81
+ // we can't have this transition here
82
+ // because webkit cancels the carousel
83
+ // animation if you trip this while
84
+ // in the middle of another animation
85
+ // ;_;
86
+ // @include transition(opacity .2s linear);
87
+
88
+ // Reposition the right one
89
+ &.right {
90
+ left: auto;
91
+ right: 15px;
92
+ }
93
+
94
+ // Hover state
95
+ &:hover {
96
+ color: $white;
97
+ text-decoration: none;
98
+ @include opacity(0.9);
99
+ }
100
+ }
101
+
102
+ // Caption for text below images
103
+ // -----------------------------
104
+
105
+ .carousel-caption {
106
+ position: absolute;
107
+ left: 0;
108
+ right: 0;
109
+ bottom: 0;
110
+ padding: 10px 15px 5px;
111
+ background: $grayDark;
112
+ background: rgba(0,0,0,.75);
113
+ }
114
+ .carousel-caption h4, .carousel-caption p {
115
+ color: $white;
116
+ }
@@ -0,0 +1,29 @@
1
+ // CLOSE ICONS
2
+ // -----------
3
+
4
+ .close {
5
+ float: right;
6
+ font-size: 20px;
7
+ font-weight: bold;
8
+ line-height: $baseLineHeight;
9
+ color: $black;
10
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
11
+ @include opacity(0.2);
12
+ &:hover {
13
+ color: $black;
14
+ text-decoration: none;
15
+ cursor: pointer;
16
+ @include opacity(0.4);
17
+ }
18
+ }
19
+
20
+ // Additional properties for button version
21
+ // iOS requires the button element instead of an anchor tag.
22
+ // If you want the anchor version, it requires `href="#"`.
23
+ button.close {
24
+ padding: 0;
25
+ cursor: pointer;
26
+ background-color: transparent;
27
+ border: 0;
28
+ -webkit-appearance: none;
29
+ }
@@ -0,0 +1,56 @@
1
+ // Code.css.scss
2
+ // Code typography styles for the <code> and <pre> elements
3
+ // --------------------------------------------------------
4
+
5
+ // Inline and block code styles
6
+ code, pre {
7
+ padding: 0 3px 2px;
8
+ @include font-family-monospace();
9
+ font-size: $baseFontSize - 1;
10
+ color: $grayDark;
11
+ @include border-radius(3px);
12
+ }
13
+
14
+ // Inline code
15
+ code {
16
+ padding: 2px 4px;
17
+ color: #d14;
18
+ background-color: #f7f7f9;
19
+ border: 1px solid #e1e1e8;
20
+ }
21
+
22
+ // Blocks of code
23
+ pre {
24
+ display: block;
25
+ padding: ($baseLineHeight - 1) / 2;
26
+ margin: 0 0 $baseLineHeight / 2;
27
+ font-size: $baseFontSize * .925; // 13px to 12px
28
+ line-height: $baseLineHeight;
29
+ word-break: break-all;
30
+ word-wrap: break-word;
31
+ white-space: pre;
32
+ white-space: pre-wrap;
33
+ background-color: #f5f5f5;
34
+ border: 1px solid #ccc; // fallback for IE7-8
35
+ border: 1px solid rgba(0,0,0,.15);
36
+ @include border-radius(4px);
37
+
38
+ // Make prettyprint styles more spaced out for readability
39
+ &.prettyprint {
40
+ margin-bottom: $baseLineHeight;
41
+ }
42
+
43
+ // Account for some code outputs that place code tags in pre tags
44
+ code {
45
+ padding: 0;
46
+ color: inherit;
47
+ background-color: transparent;
48
+ border: 0;
49
+ }
50
+ }
51
+
52
+ // Enable scrollable blocks of code
53
+ .pre-scrollable {
54
+ max-height: 340px;
55
+ overflow-y: scroll;
56
+ }
@@ -0,0 +1,20 @@
1
+ // COMPONENT ANIMATIONS
2
+ // --------------------
3
+
4
+ .fade {
5
+ opacity: 0;
6
+ @include transition(opacity .15s linear);
7
+ &.in {
8
+ opacity: 1;
9
+ }
10
+ }
11
+
12
+ .collapse {
13
+ position:relative;
14
+ height: 0;
15
+ overflow:hidden;
16
+ @include transition(height .35s ease);
17
+ &.in {
18
+ height: auto;
19
+ }
20
+ }
@@ -0,0 +1,137 @@
1
+ // DROPDOWN MENUS
2
+ // --------------
3
+
4
+ // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
5
+ .dropup, .dropdown {
6
+ position: relative;
7
+ }
8
+ .dropdown-toggle {
9
+ // The caret makes the toggle a bit too tall in IE7
10
+ *margin-bottom: -3px;
11
+ }
12
+ .dropdown-toggle:active, .open .dropdown-toggle {
13
+ outline: 0;
14
+ }
15
+
16
+ // Dropdown arrow/caret
17
+ // --------------------
18
+ .caret {
19
+ display: inline-block;
20
+ width: 0;
21
+ height: 0;
22
+ vertical-align: top;
23
+ border-top: 4px solid $black;
24
+ border-right: 4px solid transparent;
25
+ border-left: 4px solid transparent;
26
+ content: "";
27
+ @include opacity(0.3);
28
+ }
29
+
30
+ // Place the caret
31
+ .dropdown .caret {
32
+ margin-top: 8px;
33
+ margin-left: 2px;
34
+ }
35
+ .dropdown:hover .caret, .open .caret {
36
+ @include opacity(1);
37
+ }
38
+
39
+ // The dropdown menu (ul)
40
+ // ----------------------
41
+ .dropdown-menu {
42
+ position: absolute;
43
+ top: 100%;
44
+ left: 0;
45
+ z-index: $zindexDropdown;
46
+ display: none; // none by default, but block on "open" of the menu
47
+ float: left;
48
+ min-width: 160px;
49
+ padding: 4px 0;
50
+ margin: 1px 0 0; // override default ul
51
+ list-style: none;
52
+ background-color: $dropdownBackground;
53
+ border: 1px solid #ccc;
54
+ border: 1px solid rgba(0,0,0,.2);
55
+ *border-right-width: 2px;
56
+ *border-bottom-width: 2px;
57
+ @include border-radius(5px);
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 right
64
+ &.pull-right {
65
+ right: 0;
66
+ left: 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
+ a {
76
+ display: block;
77
+ padding: 3px 15px;
78
+ clear: both;
79
+ font-weight: normal;
80
+ line-height: $baseLineHeight;
81
+ color: $dropdownLinkColor;
82
+ white-space: nowrap;
83
+ }
84
+ }
85
+
86
+ // Hover state
87
+ // -----------
88
+ .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
89
+ color: $dropdownLinkColorHover;
90
+ text-decoration: none;
91
+ background-color: $dropdownLinkBackgroundHover;
92
+ }
93
+
94
+ // Open state for the dropdown
95
+ // ---------------------------
96
+ .open {
97
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
98
+ // make the menu appear below buttons that appeared later on the page
99
+ *z-index: $zindexDropdown;
100
+
101
+ & > .dropdown-menu {
102
+ display: block;
103
+ }
104
+ }
105
+
106
+ // Right aligned dropdowns
107
+ // ---------------------------
108
+ .pull-right > .dropdown-menu {
109
+ right: 0;
110
+ left: auto;
111
+ }
112
+
113
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
114
+ // ------------------------------------------------------
115
+ // Just add .dropup after the standard .dropdown class and you're set, bro.
116
+ // TODO: abstract this so that the navbar fixed styles are not placed here?
117
+ .dropup, .navbar-fixed-bottom .dropdown {
118
+ // Reverse the caret
119
+ .caret {
120
+ border-top: 0;
121
+ border-bottom: 4px solid $black;
122
+ content: "\2191";
123
+ }
124
+ // Different positioning for bottom up menu
125
+ .dropdown-menu {
126
+ top: auto;
127
+ bottom: 100%;
128
+ margin-bottom: 1px;
129
+ }
130
+ }
131
+
132
+ // Typeahead
133
+ // ---------
134
+ .typeahead {
135
+ margin-top: 2px; // give it some space to breathe
136
+ @include border-radius(4px);
137
+ }
@@ -0,0 +1,482 @@
1
+ // Forms.less
2
+ // Base styles for various input types, form layouts, and states
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 * 1.5;
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, input, button, select, textarea {
41
+ @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
42
+ }
43
+ input, button, select, textarea {
44
+ font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
45
+ }
46
+
47
+ // Identify controls by their labels
48
+ label {
49
+ display: block;
50
+ margin-bottom: 5px;
51
+ }
52
+
53
+ // Form controls
54
+ // -------------------------
55
+
56
+ // Shared size and type resets
57
+ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
58
+ input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
59
+ input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
60
+ display: inline-block;
61
+ height: $baseLineHeight;
62
+ padding: 4px;
63
+ margin-bottom: 9px;
64
+ font-size: $baseFontSize;
65
+ line-height: $baseLineHeight;
66
+ color: $gray;
67
+ }
68
+
69
+ // Reset appearance properties for textual inputs and textarea
70
+ // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
71
+ input, textarea {
72
+ width: 210px;
73
+ }
74
+ // Reset height since textareas have rows
75
+ textarea {
76
+ height: auto;
77
+ }
78
+ // Everything else
79
+ textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
80
+ input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"],
81
+ input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
82
+ background-color: $inputBackground;
83
+ border: 1px solid $inputBorder;
84
+ @include border-radius($inputBorderRadius);
85
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
86
+ @include transition(#{border linear .2s, box-shadow linear .2s});
87
+
88
+ // Focus state
89
+ &:focus {
90
+ border-color: rgba(82,168,236,.8);
91
+ outline: 0;
92
+ outline: thin dotted \9; /* IE6-9 */
93
+ @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)});
94
+ }
95
+ }
96
+
97
+ // Position radios and checkboxes better
98
+ input[type="radio"], input[type="checkbox"] {
99
+ margin: 3px 0;
100
+ *margin-top: 0; /* IE7 */
101
+ line-height: normal;
102
+ cursor: pointer;
103
+ }
104
+
105
+ // Reset width of input buttons, radios, checkboxes
106
+ input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
107
+ width: auto; // Override of generic input selector
108
+ }
109
+
110
+ // Make uneditable textareas behave like a textarea
111
+ .uneditable-textarea {
112
+ width: auto;
113
+ height: auto;
114
+ }
115
+
116
+ // Set the height of select and file controls to match text inputs
117
+ select, input[type="file"] {
118
+ height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
119
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
120
+ line-height: 28px;
121
+ }
122
+
123
+ // Make select elements obey height by applying a border
124
+ select {
125
+ width: 220px; // default input width + 10px of padding that doesn't get applied
126
+ border: 1px solid #bbb;
127
+ }
128
+
129
+ // Make multiple select elements height not fixed
130
+ select[multiple], select[size] {
131
+ height: auto;
132
+ }
133
+
134
+ // Focus for select, file, radio, and checkbox
135
+ select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
136
+ @include tab-focus();
137
+ }
138
+
139
+
140
+
141
+ // CHECKBOXES & RADIOS
142
+ // -------------------
143
+
144
+ // Indent the labels to position radios/checkboxes as hanging
145
+ .radio, .checkbox {
146
+ min-height: 18px; // clear the floating input if there is no label text
147
+ padding-left: 18px;
148
+ }
149
+ .radio input[type="radio"], .checkbox input[type="checkbox"] {
150
+ float: left;
151
+ margin-left: -18px;
152
+ }
153
+
154
+ // Move the options list down to align with labels
155
+ .controls > .radio:first-child, .controls > .checkbox:first-child {
156
+ padding-top: 5px; // has to be padding because margin collaspes
157
+ }
158
+
159
+ // Radios and checkboxes on same line
160
+ // TODO v3: Convert .inline to .control-inline
161
+ .radio.inline, .checkbox.inline {
162
+ display: inline-block;
163
+ padding-top: 5px;
164
+ margin-bottom: 0;
165
+ vertical-align: middle;
166
+ }
167
+ .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
168
+ margin-left: 10px; // space out consecutive inline controls
169
+ }
170
+
171
+
172
+
173
+ // INPUT SIZES
174
+ // -----------
175
+
176
+ // General classes for quick sizes
177
+ .input-mini { width: 60px; }
178
+ .input-small { width: 90px; }
179
+ .input-medium { width: 150px; }
180
+ .input-large { width: 210px; }
181
+ .input-xlarge { width: 270px; }
182
+ .input-xxlarge { width: 530px; }
183
+
184
+ // Grid style input sizes
185
+ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
186
+ // Redeclare since the fluid row class is more specific
187
+ .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
188
+ float: none;
189
+ margin-left: 0;
190
+ }
191
+ // Ensure input-prepend/append never wraps
192
+ .input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"],
193
+ .input-prepend .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] {
194
+ display: inline-block;
195
+ }
196
+
197
+
198
+
199
+ // GRID SIZING FOR INPUTS
200
+ // ----------------------
201
+
202
+ @include gridInput($gridColumnWidth, $gridGutterWidth);
203
+
204
+
205
+
206
+ // DISABLED STATE
207
+ // --------------
208
+
209
+ // Disabled and read-only inputs
210
+ input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
211
+ cursor: not-allowed;
212
+ background-color: $inputDisabledBackground;
213
+ border-color: #ddd;
214
+ }
215
+ // Explicitly reset the colors here
216
+ input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
217
+ background-color: transparent;
218
+ }
219
+
220
+
221
+
222
+
223
+ // FORM FIELD FEEDBACK STATES
224
+ // --------------------------
225
+
226
+ // Warning
227
+ .control-group.warning {
228
+ @include formFieldState($warningText, $warningText, $warningBackground);
229
+ }
230
+ // Error
231
+ .control-group.error {
232
+ @include formFieldState($errorText, $errorText, $errorBackground);
233
+ }
234
+ // Success
235
+ .control-group.success {
236
+ @include formFieldState($successText, $successText, $successBackground);
237
+ }
238
+
239
+ // HTML5 invalid states
240
+ // Shares styles with the .control-group.error above
241
+ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
242
+ color: #b94a48;
243
+ border-color: #ee5f5b;
244
+ &:focus {
245
+ border-color: darken(#ee5f5b, 10%);
246
+ @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
247
+ }
248
+ }
249
+
250
+
251
+
252
+ // FORM ACTIONS
253
+ // ------------
254
+
255
+ .form-actions {
256
+ padding: ($baseLineHeight - 1) 20px $baseLineHeight;
257
+ margin-top: $baseLineHeight;
258
+ margin-bottom: $baseLineHeight;
259
+ background-color: $formActionsBackground;
260
+ border-top: 1px solid #e5e5e5;
261
+ @include clearfix(); // Adding clearfix to allow for .pull-right button containers
262
+ }
263
+
264
+ // For text that needs to appear as an input but should not be an input
265
+ .uneditable-input {
266
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
267
+ white-space: nowrap;
268
+ cursor: not-allowed;
269
+ background-color: $inputBackground;
270
+ border-color: #eee;
271
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
272
+ }
273
+
274
+ // Placeholder text gets special styles; can't be bundled together though for some reason
275
+ // (sass-edit) - need special mixin
276
+ @include rootPlaceholder();
277
+
278
+
279
+
280
+ // HELP TEXT
281
+ // ---------
282
+
283
+ .help-block, .help-inline {
284
+ color: $gray; // lighten the text some for contrast
285
+ }
286
+
287
+ .help-block {
288
+ display: block; // account for any element using help-block
289
+ margin-bottom: $baseLineHeight / 2;
290
+ }
291
+
292
+ .help-inline {
293
+ display: inline-block;
294
+ @include ie7-inline-block();
295
+ vertical-align: middle;
296
+ padding-left: 5px;
297
+ }
298
+
299
+
300
+
301
+ // INPUT GROUPS
302
+ // ------------
303
+
304
+ // Allow us to put symbols and text within the input field for a cleaner look
305
+ .input-prepend, .input-append {
306
+ margin-bottom: 5px;
307
+ input, select, .uneditable-input {
308
+ 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
309
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
310
+ *margin-left: 0;
311
+ vertical-align: middle;
312
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
313
+ // Make input on top when focused so blue border and shadow always show
314
+ &:focus {
315
+ z-index: 2;
316
+ }
317
+ }
318
+ .uneditable-input {
319
+ border-left-color: #ccc;
320
+ }
321
+ .add-on {
322
+ display: inline-block;
323
+ width: auto;
324
+ height: $baseLineHeight;
325
+ min-width: 16px;
326
+ padding: 4px 5px;
327
+ font-weight: normal;
328
+ line-height: $baseLineHeight;
329
+ text-align: center;
330
+ text-shadow: 0 1px 0 $white;
331
+ vertical-align: middle;
332
+ background-color: $grayLighter;
333
+ border: 1px solid #ccc;
334
+ }
335
+ .add-on, .btn {
336
+ margin-left: -1px;
337
+ @include border-radius(0);
338
+ }
339
+ .active {
340
+ background-color: lighten($green, 30);
341
+ border-color: $green;
342
+ }
343
+ }
344
+ .input-prepend {
345
+ .add-on, .btn {
346
+ margin-right: -1px;
347
+ }
348
+ .add-on:first-child, .btn:first-child {
349
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
350
+ }
351
+ }
352
+ .input-append {
353
+ input, select, .uneditable-input {
354
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
355
+ }
356
+ .uneditable-input {
357
+ border-right-color: #ccc;
358
+ border-left-color: #eee;
359
+ }
360
+ .add-on:last-child, .btn:last-child {
361
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
362
+ }
363
+ }
364
+ // Remove all border-radius for inputs with both prepend and append
365
+ .input-prepend.input-append {
366
+ input, select, .uneditable-input {
367
+ @include border-radius(0);
368
+ }
369
+ .add-on:first-child, .btn:first-child {
370
+ margin-right: -1px;
371
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
372
+ }
373
+ .add-on:last-child, .btn:last-child {
374
+ margin-left: -1px;
375
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
376
+ }
377
+ }
378
+
379
+
380
+
381
+ // SEARCH FORM
382
+ // -----------
383
+
384
+ .search-query {
385
+ padding-right: 14px;
386
+ padding-right: 4px \9;
387
+ padding-left: 14px;
388
+ padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
389
+ margin-bottom: 0; // remove the default margin on all inputs
390
+ @include border-radius(14px);
391
+ }
392
+
393
+
394
+
395
+ // HORIZONTAL & VERTICAL FORMS
396
+ // ---------------------------
397
+
398
+ // Common properties
399
+ // -----------------
400
+
401
+ .form-search, .form-inline, .form-horizontal {
402
+ input, textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
403
+ display: inline-block;
404
+ @include ie7-inline-block();
405
+ margin-bottom: 0;
406
+ }
407
+ // Re-hide hidden elements due to specifity
408
+ .hide {
409
+ display: none;
410
+ }
411
+ }
412
+ .form-search label, .form-inline label {
413
+ display: inline-block;
414
+ }
415
+ // Remove margin for input-prepend/-append
416
+ .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend {
417
+ margin-bottom: 0;
418
+ }
419
+ // Inline checkbox/radio labels (remove padding on left)
420
+ .form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox {
421
+ padding-left: 0;
422
+ margin-bottom: 0;
423
+ vertical-align: middle;
424
+ }
425
+ // Remove float and margin, set to inline-block
426
+ .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"],
427
+ .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
428
+ float: left;
429
+ margin-right: 3px;
430
+ margin-left: 0;
431
+ }
432
+
433
+
434
+ // Margin to space out fieldsets
435
+ .control-group {
436
+ margin-bottom: $baseLineHeight / 2;
437
+ }
438
+
439
+ // Legend collapses margin, so next element is responsible for spacing
440
+ legend + .control-group {
441
+ margin-top: $baseLineHeight;
442
+ -webkit-margin-top-collapse: separate;
443
+ }
444
+
445
+ // Horizontal-specific styles
446
+ // --------------------------
447
+
448
+ .form-horizontal {
449
+ // Increase spacing between groups
450
+ .control-group {
451
+ margin-bottom: $baseLineHeight;
452
+ @include clearfix();
453
+ }
454
+ // Float the labels left
455
+ .control-label {
456
+ float: left;
457
+ width: 140px;
458
+ padding-top: 5px;
459
+ text-align: right;
460
+ }
461
+ // Move over all input controls and content
462
+ .controls {
463
+ // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
464
+ // don't inherit the margin of the parent, in this case .controls
465
+ *display: inline-block;
466
+ *padding-left: 20px;
467
+ margin-left: 160px;
468
+ *margin-left: 0;
469
+ &:first-child {
470
+ *padding-left: 160px;
471
+ }
472
+ }
473
+ // Remove bottom margin on block level help text since that's accounted for on .control-group
474
+ .help-block {
475
+ margin-top: $baseLineHeight / 2;
476
+ margin-bottom: 0;
477
+ }
478
+ // Move over buttons in .form-actions to align with .controls
479
+ .form-actions {
480
+ padding-left: 160px;
481
+ }
482
+ }