querobolsa-bootstrap-sass 0.1.0

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 (64) hide show
  1. data/LICENSE +14 -0
  2. data/README.md +106 -0
  3. data/lib/querobolsa-bootstrap-sass.rb +43 -0
  4. data/lib/querobolsa-bootstrap-sass/compass_functions.rb +10 -0
  5. data/lib/querobolsa-bootstrap-sass/engine.rb +7 -0
  6. data/lib/querobolsa-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 +142 -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
+ input.search-query { // input. fix the overwriting of the search-query and allow rounded corner for the search field
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
+ }