twitter-bootstrap-rails-ajax 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (94) hide show
  1. data/README.md +221 -0
  2. data/Rakefile +14 -0
  3. data/lib/generators/bootstrap/install/install_generator.rb +53 -0
  4. data/lib/generators/bootstrap/install/templates/application.css +7 -0
  5. data/lib/generators/bootstrap/install/templates/application.js +10 -0
  6. data/lib/generators/bootstrap/install/templates/bootstrap.coffee +4 -0
  7. data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.less +29 -0
  8. data/lib/generators/bootstrap/layout/layout_generator.rb +23 -0
  9. data/lib/generators/bootstrap/layout/templates/layout.html.erb +97 -0
  10. data/lib/generators/bootstrap/layout/templates/layout.html.haml +70 -0
  11. data/lib/generators/bootstrap/layout/templates/layout.html.slim +70 -0
  12. data/lib/generators/bootstrap/themed/templates/_form.html.erb +16 -0
  13. data/lib/generators/bootstrap/themed/templates/_form.html.haml +10 -0
  14. data/lib/generators/bootstrap/themed/templates/_form.html.slim +11 -0
  15. data/lib/generators/bootstrap/themed/templates/edit.html.erb +4 -0
  16. data/lib/generators/bootstrap/themed/templates/edit.html.haml +3 -0
  17. data/lib/generators/bootstrap/themed/templates/edit.html.slim +3 -0
  18. data/lib/generators/bootstrap/themed/templates/index.html.erb +38 -0
  19. data/lib/generators/bootstrap/themed/templates/index.html.haml +24 -0
  20. data/lib/generators/bootstrap/themed/templates/index.html.slim +26 -0
  21. data/lib/generators/bootstrap/themed/templates/new.html.erb +4 -0
  22. data/lib/generators/bootstrap/themed/templates/new.html.haml +3 -0
  23. data/lib/generators/bootstrap/themed/templates/new.html.slim +3 -0
  24. data/lib/generators/bootstrap/themed/templates/show.html.erb +21 -0
  25. data/lib/generators/bootstrap/themed/templates/show.html.haml +14 -0
  26. data/lib/generators/bootstrap/themed/templates/show.html.slim +16 -0
  27. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.erb +14 -0
  28. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.haml +11 -0
  29. data/lib/generators/bootstrap/themed/templates/simple_form/_form.html.slim +12 -0
  30. data/lib/generators/bootstrap/themed/themed_generator.rb +99 -0
  31. data/lib/twitter-bootstrap-rails.rb +10 -0
  32. data/lib/twitter/bootstrap/rails/bootstrap.rb +2 -0
  33. data/lib/twitter/bootstrap/rails/engine.rb +24 -0
  34. data/lib/twitter/bootstrap/rails/twitter-bootstrap-breadcrumbs.rb +30 -0
  35. data/lib/twitter/bootstrap/rails/version.rb +7 -0
  36. data/vendor/assets/fonts/fontawesome-webfont.eot +0 -0
  37. data/vendor/assets/fonts/fontawesome-webfont.svg +175 -0
  38. data/vendor/assets/fonts/fontawesome-webfont.svgz +0 -0
  39. data/vendor/assets/fonts/fontawesome-webfont.ttf +0 -0
  40. data/vendor/assets/fonts/fontawesome-webfont.woff +0 -0
  41. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  42. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  43. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
  44. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-alert.js +94 -0
  45. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-button.js +100 -0
  46. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-carousel.js +161 -0
  47. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-collapse.js +138 -0
  48. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-dropdown.js +92 -0
  49. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-modal.js +210 -0
  50. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-popover.js +95 -0
  51. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-scrollspy.js +125 -0
  52. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tab.js +130 -0
  53. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-tooltip.js +270 -0
  54. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-transition.js +51 -0
  55. data/vendor/assets/javascripts/twitter/bootstrap/bootstrap-typeahead.js +324 -0
  56. data/vendor/toolkit/fontawesome.less +267 -0
  57. data/vendor/toolkit/twitter/bootstrap/accordion.less +28 -0
  58. data/vendor/toolkit/twitter/bootstrap/alerts.less +58 -0
  59. data/vendor/toolkit/twitter/bootstrap/badges.less +36 -0
  60. data/vendor/toolkit/twitter/bootstrap/bootstrap.less +63 -0
  61. data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +24 -0
  62. data/vendor/toolkit/twitter/bootstrap/button-groups.less +172 -0
  63. data/vendor/toolkit/twitter/bootstrap/buttons.less +187 -0
  64. data/vendor/toolkit/twitter/bootstrap/carousel.less +121 -0
  65. data/vendor/toolkit/twitter/bootstrap/close.less +18 -0
  66. data/vendor/toolkit/twitter/bootstrap/code.less +57 -0
  67. data/vendor/toolkit/twitter/bootstrap/component-animations.less +20 -0
  68. data/vendor/toolkit/twitter/bootstrap/dropdowns.less +148 -0
  69. data/vendor/toolkit/twitter/bootstrap/forms.less +555 -0
  70. data/vendor/toolkit/twitter/bootstrap/grid.less +5 -0
  71. data/vendor/toolkit/twitter/bootstrap/hero-unit.less +22 -0
  72. data/vendor/toolkit/twitter/bootstrap/labels.less +38 -0
  73. data/vendor/toolkit/twitter/bootstrap/layouts.less +17 -0
  74. data/vendor/toolkit/twitter/bootstrap/mixins.less +614 -0
  75. data/vendor/toolkit/twitter/bootstrap/modals.less +90 -0
  76. data/vendor/toolkit/twitter/bootstrap/navbar.less +341 -0
  77. data/vendor/toolkit/twitter/bootstrap/navs.less +363 -0
  78. data/vendor/toolkit/twitter/bootstrap/pager.less +36 -0
  79. data/vendor/toolkit/twitter/bootstrap/pagination.less +56 -0
  80. data/vendor/toolkit/twitter/bootstrap/popovers.less +49 -0
  81. data/vendor/toolkit/twitter/bootstrap/progress-bars.less +109 -0
  82. data/vendor/toolkit/twitter/bootstrap/reset.less +126 -0
  83. data/vendor/toolkit/twitter/bootstrap/responsive.less +371 -0
  84. data/vendor/toolkit/twitter/bootstrap/scaffolding.less +29 -0
  85. data/vendor/toolkit/twitter/bootstrap/sprites.less +158 -0
  86. data/vendor/toolkit/twitter/bootstrap/tables.less +159 -0
  87. data/vendor/toolkit/twitter/bootstrap/thumbnails.less +35 -0
  88. data/vendor/toolkit/twitter/bootstrap/tooltip.less +35 -0
  89. data/vendor/toolkit/twitter/bootstrap/type.less +234 -0
  90. data/vendor/toolkit/twitter/bootstrap/utilities.less +23 -0
  91. data/vendor/toolkit/twitter/bootstrap/variables.less +201 -0
  92. data/vendor/toolkit/twitter/bootstrap/wells.less +27 -0
  93. data/vendor/toolkit/twitter/bootstrap_base.less +2 -0
  94. metadata +138 -0
@@ -0,0 +1,121 @@
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
+ .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,
31
+ .next,
32
+ .prev { display: block; }
33
+
34
+ .active {
35
+ left: 0;
36
+ }
37
+
38
+ .next,
39
+ .prev {
40
+ position: absolute;
41
+ top: 0;
42
+ width: 100%;
43
+ }
44
+
45
+ .next {
46
+ left: 100%;
47
+ }
48
+ .prev {
49
+ left: -100%;
50
+ }
51
+ .next.left,
52
+ .prev.right {
53
+ left: 0;
54
+ }
55
+
56
+ .active.left {
57
+ left: -100%;
58
+ }
59
+ .active.right {
60
+ left: 100%;
61
+ }
62
+
63
+ }
64
+
65
+ // Left/right controls for nav
66
+ // ---------------------------
67
+
68
+ .carousel-control {
69
+ position: absolute;
70
+ top: 40%;
71
+ left: 15px;
72
+ width: 40px;
73
+ height: 40px;
74
+ margin-top: -20px;
75
+ font-size: 60px;
76
+ font-weight: 100;
77
+ line-height: 30px;
78
+ color: @white;
79
+ text-align: center;
80
+ background: @grayDarker;
81
+ border: 3px solid @white;
82
+ .border-radius(23px);
83
+ .opacity(50);
84
+
85
+ // we can't have this transition here
86
+ // because webkit cancels the carousel
87
+ // animation if you trip this while
88
+ // in the middle of another animation
89
+ // ;_;
90
+ // .transition(opacity .2s linear);
91
+
92
+ // Reposition the right one
93
+ &.right {
94
+ left: auto;
95
+ right: 15px;
96
+ }
97
+
98
+ // Hover state
99
+ &:hover {
100
+ color: @white;
101
+ text-decoration: none;
102
+ .opacity(90);
103
+ }
104
+ }
105
+
106
+ // Caption for text below images
107
+ // -----------------------------
108
+
109
+ .carousel-caption {
110
+ position: absolute;
111
+ left: 0;
112
+ right: 0;
113
+ bottom: 0;
114
+ padding: 10px 15px 5px;
115
+ background: @grayDark;
116
+ background: rgba(0,0,0,.75);
117
+ }
118
+ .carousel-caption h4,
119
+ .carousel-caption p {
120
+ color: @white;
121
+ }
@@ -0,0 +1,18 @@
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
+ .opacity(20);
12
+ &:hover {
13
+ color: @black;
14
+ text-decoration: none;
15
+ .opacity(40);
16
+ cursor: pointer;
17
+ }
18
+ }
@@ -0,0 +1,57 @@
1
+ // Code.less
2
+ // Code typography styles for the <code> and <pre> elements
3
+ // --------------------------------------------------------
4
+
5
+ // Inline and block code styles
6
+ code,
7
+ pre {
8
+ padding: 0 3px 2px;
9
+ #font > #family > .monospace;
10
+ font-size: @baseFontSize - 1;
11
+ color: @grayDark;
12
+ .border-radius(3px);
13
+ }
14
+
15
+ // Inline code
16
+ code {
17
+ padding: 2px 4px;
18
+ color: #d14;
19
+ background-color: #f7f7f9;
20
+ border: 1px solid #e1e1e8;
21
+ }
22
+
23
+ // Blocks of code
24
+ pre {
25
+ display: block;
26
+ padding: (@baseLineHeight - 1) / 2;
27
+ margin: 0 0 @baseLineHeight / 2;
28
+ font-size: @baseFontSize * .925; // 13px to 12px
29
+ line-height: @baseLineHeight;
30
+ background-color: #f5f5f5;
31
+ border: 1px solid #ccc; // fallback for IE7-8
32
+ border: 1px solid rgba(0,0,0,.15);
33
+ .border-radius(4px);
34
+ white-space: pre;
35
+ white-space: pre-wrap;
36
+ word-break: break-all;
37
+ word-wrap: break-word;
38
+
39
+ // Make prettyprint styles more spaced out for readability
40
+ &.prettyprint {
41
+ margin-bottom: @baseLineHeight;
42
+ }
43
+
44
+ // Account for some code outputs that place code tags in pre tags
45
+ code {
46
+ padding: 0;
47
+ color: inherit;
48
+ background-color: transparent;
49
+ border: 0;
50
+ }
51
+ }
52
+
53
+ // Enable scrollable blocks of code
54
+ .pre-scrollable {
55
+ max-height: 340px;
56
+ overflow-y: scroll;
57
+ }
@@ -0,0 +1,20 @@
1
+ // COMPONENT ANIMATIONS
2
+ // --------------------
3
+
4
+ .fade {
5
+ .transition(opacity .15s linear);
6
+ opacity: 0;
7
+ &.in {
8
+ opacity: 1;
9
+ }
10
+ }
11
+
12
+ .collapse {
13
+ .transition(height .35s ease);
14
+ position:relative;
15
+ overflow:hidden;
16
+ height: 0;
17
+ &.in {
18
+ height: auto;
19
+ }
20
+ }
@@ -0,0 +1,148 @@
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
+ .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,
13
+ .open .dropdown-toggle {
14
+ outline: 0;
15
+ }
16
+
17
+ // Dropdown arrow/caret
18
+ // --------------------
19
+ .caret {
20
+ display: inline-block;
21
+ width: 0;
22
+ height: 0;
23
+ vertical-align: top;
24
+ border-left: 4px solid transparent;
25
+ border-right: 4px solid transparent;
26
+ border-top: 4px solid @black;
27
+ .opacity(30);
28
+ content: "";
29
+ }
30
+
31
+ // Place the caret
32
+ .dropdown .caret {
33
+ margin-top: 8px;
34
+ margin-left: 2px;
35
+ }
36
+ .dropdown:hover .caret,
37
+ .open.dropdown .caret {
38
+ .opacity(100);
39
+ }
40
+
41
+ // The dropdown menu (ul)
42
+ // ----------------------
43
+ .dropdown-menu {
44
+ position: absolute;
45
+ top: 100%;
46
+ left: 0;
47
+ z-index: @zindexDropdown;
48
+ float: left;
49
+ display: none; // none by default, but block on "open" of the menu
50
+ min-width: 160px;
51
+ padding: 4px 0;
52
+ margin: 0; // override default ul
53
+ list-style: none;
54
+ background-color: @dropdownBackground;
55
+ border-color: #ccc;
56
+ border-color: rgba(0,0,0,.2);
57
+ border-style: solid;
58
+ border-width: 1px;
59
+ .border-radius(0 0 5px 5px);
60
+ .box-shadow(0 5px 10px rgba(0,0,0,.2));
61
+ -webkit-background-clip: padding-box;
62
+ -moz-background-clip: padding;
63
+ background-clip: padding-box;
64
+ *border-right-width: 2px;
65
+ *border-bottom-width: 2px;
66
+
67
+ // Aligns the dropdown menu to right
68
+ &.pull-right {
69
+ right: 0;
70
+ left: auto;
71
+ }
72
+
73
+ // Dividers (basically an hr) within the dropdown
74
+ .divider {
75
+ .nav-divider();
76
+ }
77
+
78
+ // Links within the dropdown menu
79
+ a {
80
+ display: block;
81
+ padding: 3px 15px;
82
+ clear: both;
83
+ font-weight: normal;
84
+ line-height: @baseLineHeight;
85
+ color: @dropdownLinkColor;
86
+ white-space: nowrap;
87
+ }
88
+ }
89
+
90
+ // Hover state
91
+ // -----------
92
+ .dropdown-menu li > a:hover,
93
+ .dropdown-menu .active > a,
94
+ .dropdown-menu .active > a:hover {
95
+ color: @dropdownLinkColorHover;
96
+ text-decoration: none;
97
+ background-color: @dropdownLinkBackgroundHover;
98
+ }
99
+
100
+ // Open state for the dropdown
101
+ // ---------------------------
102
+ .dropdown.open {
103
+ // IE7's z-index only goes to the nearest positioned ancestor, which would
104
+ // make the menu appear below buttons that appeared later on the page
105
+ *z-index: @zindexDropdown;
106
+
107
+ .dropdown-toggle {
108
+ color: @white;
109
+ background: #ccc;
110
+ background: rgba(0,0,0,.3);
111
+ }
112
+ .dropdown-menu {
113
+ display: block;
114
+ }
115
+ }
116
+
117
+ // Right aligned dropdowns
118
+ .pull-right .dropdown-menu {
119
+ left: auto;
120
+ right: 0;
121
+ }
122
+
123
+ // Allow for dropdowns to go bottom up (aka, dropup-menu)
124
+ // ------------------------------------------------------
125
+ // Just add .dropup after the standard .dropdown class and you're set, bro.
126
+ // TODO: abstract this so that the navbar fixed styles are not placed here?
127
+ .dropup,
128
+ .navbar-fixed-bottom .dropdown {
129
+ // Reverse the caret
130
+ .caret {
131
+ border-top: 0;
132
+ border-bottom: 4px solid @black;
133
+ content: "\2191";
134
+ }
135
+ // Different positioning for bottom up menu
136
+ .dropdown-menu {
137
+ top: auto;
138
+ bottom: 100%;
139
+ margin-bottom: 1px;
140
+ }
141
+ }
142
+
143
+ // Typeahead
144
+ // ---------
145
+ .typeahead {
146
+ margin-top: 2px; // give it some space to breathe
147
+ .border-radius(4px);
148
+ }
@@ -0,0 +1,555 @@
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 #eee;
31
+
32
+ // Small
33
+ small {
34
+ font-size: @baseLineHeight * .75;
35
+ color: @grayLight;
36
+ }
37
+ }
38
+
39
+ // Set font for forms
40
+ label,
41
+ input,
42
+ button,
43
+ select,
44
+ textarea {
45
+ #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
46
+ }
47
+ input,
48
+ button,
49
+ select,
50
+ textarea {
51
+ font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
52
+ }
53
+
54
+ // Identify controls by their labels
55
+ label {
56
+ display: block;
57
+ margin-bottom: 5px;
58
+ color: @grayDark;
59
+ }
60
+
61
+ // Inputs, Textareas, Selects
62
+ input,
63
+ textarea,
64
+ select,
65
+ .uneditable-input {
66
+ display: inline-block;
67
+ width: 210px;
68
+ height: @baseLineHeight;
69
+ padding: 4px;
70
+ margin-bottom: 9px;
71
+ font-size: @baseFontSize;
72
+ line-height: @baseLineHeight;
73
+ color: @gray;
74
+ border: 1px solid @inputBorder;
75
+ .border-radius(3px);
76
+ }
77
+ .uneditable-textarea {
78
+ width: auto;
79
+ height: auto;
80
+ }
81
+
82
+ // Inputs within a label
83
+ label input,
84
+ label textarea,
85
+ label select {
86
+ display: block;
87
+ }
88
+
89
+ // Mini reset for unique input types
90
+ input[type="image"],
91
+ input[type="checkbox"],
92
+ input[type="radio"] {
93
+ width: auto;
94
+ height: auto;
95
+ padding: 0;
96
+ margin: 3px 0;
97
+ *margin-top: 0; /* IE7 */
98
+ line-height: normal;
99
+ cursor: pointer;
100
+ .border-radius(0);
101
+ border: 0 \9; /* IE9 and down */
102
+ }
103
+ input[type="image"] {
104
+ border: 0;
105
+ }
106
+
107
+ // Reset the file input to browser defaults
108
+ input[type="file"] {
109
+ width: auto;
110
+ padding: initial;
111
+ line-height: initial;
112
+ border: initial;
113
+ background-color: @inputBackground;
114
+ background-color: initial;
115
+ .box-shadow(none);
116
+ }
117
+
118
+ // Help out input buttons
119
+ input[type="button"],
120
+ input[type="reset"],
121
+ input[type="submit"] {
122
+ width: auto;
123
+ height: auto;
124
+ }
125
+
126
+ // Set the height of select and file controls to match text inputs
127
+ select,
128
+ input[type="file"] {
129
+ height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
130
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
131
+ line-height: 28px;
132
+ }
133
+
134
+ // Reset line-height for IE
135
+ input[type="file"] {
136
+ line-height: 18px \9;
137
+ }
138
+
139
+ // Chrome on Linux and Mobile Safari need background-color
140
+ select {
141
+ width: 220px; // default input width + 10px of padding that doesn't get applied
142
+ background-color: @inputBackground;
143
+ }
144
+
145
+ // Make multiple select elements height not fixed
146
+ select[multiple],
147
+ select[size] {
148
+ height: auto;
149
+ }
150
+
151
+ // Remove shadow from image inputs
152
+ input[type="image"] {
153
+ .box-shadow(none);
154
+ }
155
+
156
+ // Make textarea height behave
157
+ textarea {
158
+ height: auto;
159
+ }
160
+
161
+ // Hidden inputs
162
+ input[type="hidden"] {
163
+ display: none;
164
+ }
165
+
166
+
167
+
168
+ // CHECKBOXES & RADIOS
169
+ // -------------------
170
+
171
+ // Indent the labels to position radios/checkboxes as hanging
172
+ .radio,
173
+ .checkbox {
174
+ padding-left: 18px;
175
+ }
176
+ .radio input[type="radio"],
177
+ .checkbox input[type="checkbox"] {
178
+ float: left;
179
+ margin-left: -18px;
180
+ }
181
+
182
+ // Move the options list down to align with labels
183
+ .controls > .radio:first-child,
184
+ .controls > .checkbox:first-child {
185
+ padding-top: 5px; // has to be padding because margin collaspes
186
+ }
187
+
188
+ // Radios and checkboxes on same line
189
+ // TODO v3: Convert .inline to .control-inline
190
+ .radio.inline,
191
+ .checkbox.inline {
192
+ display: inline-block;
193
+ padding-top: 5px;
194
+ margin-bottom: 0;
195
+ vertical-align: middle;
196
+ }
197
+ .radio.inline + .radio.inline,
198
+ .checkbox.inline + .checkbox.inline {
199
+ margin-left: 10px; // space out consecutive inline controls
200
+ }
201
+
202
+
203
+
204
+ // FOCUS STATE
205
+ // -----------
206
+
207
+ input,
208
+ textarea {
209
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
210
+ @transition: border linear .2s, box-shadow linear .2s;
211
+ .transition(@transition);
212
+ }
213
+ input:focus,
214
+ textarea:focus {
215
+ border-color: rgba(82,168,236,.8);
216
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
217
+ .box-shadow(@shadow);
218
+ outline: 0;
219
+ outline: thin dotted \9; /* IE6-9 */
220
+ }
221
+ input[type="file"]:focus,
222
+ input[type="radio"]:focus,
223
+ input[type="checkbox"]:focus,
224
+ select:focus {
225
+ .box-shadow(none); // override for file inputs
226
+ .tab-focus();
227
+ }
228
+
229
+
230
+
231
+ // INPUT SIZES
232
+ // -----------
233
+
234
+ // General classes for quick sizes
235
+ .input-mini { width: 60px; }
236
+ .input-small { width: 90px; }
237
+ .input-medium { width: 150px; }
238
+ .input-large { width: 210px; }
239
+ .input-xlarge { width: 270px; }
240
+ .input-xxlarge { width: 530px; }
241
+
242
+ // Grid style input sizes
243
+ input[class*="span"],
244
+ select[class*="span"],
245
+ textarea[class*="span"],
246
+ .uneditable-input {
247
+ float: none;
248
+ margin-left: 0;
249
+ }
250
+
251
+
252
+
253
+ // GRID SIZING FOR INPUTS
254
+ // ----------------------
255
+
256
+ #grid > .input (@gridColumnWidth, @gridGutterWidth);
257
+
258
+
259
+
260
+
261
+ // DISABLED STATE
262
+ // --------------
263
+
264
+ // Disabled and read-only inputs
265
+ input[disabled],
266
+ select[disabled],
267
+ textarea[disabled],
268
+ input[readonly],
269
+ select[readonly],
270
+ textarea[readonly] {
271
+ background-color: @inputDisabledBackground;
272
+ border-color: #ddd;
273
+ cursor: not-allowed;
274
+ }
275
+
276
+
277
+
278
+
279
+ // FORM FIELD FEEDBACK STATES
280
+ // --------------------------
281
+
282
+ // Warning
283
+ .control-group.warning {
284
+ .formFieldState(@warningText, @warningText, @warningBackground);
285
+ }
286
+ // Error
287
+ .control-group.error {
288
+ .formFieldState(@errorText, @errorText, @errorBackground);
289
+ }
290
+ // Success
291
+ .control-group.success {
292
+ .formFieldState(@successText, @successText, @successBackground);
293
+ }
294
+
295
+ // HTML5 invalid states
296
+ // Shares styles with the .control-group.error above
297
+ input:focus:required:invalid,
298
+ textarea:focus:required:invalid,
299
+ select:focus:required:invalid {
300
+ color: #b94a48;
301
+ border-color: #ee5f5b;
302
+ &:focus {
303
+ border-color: darken(#ee5f5b, 10%);
304
+ .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
305
+ }
306
+ }
307
+
308
+
309
+
310
+ // FORM ACTIONS
311
+ // ------------
312
+
313
+ .form-actions {
314
+ padding: (@baseLineHeight - 1) 20px @baseLineHeight;
315
+ margin-top: @baseLineHeight;
316
+ margin-bottom: @baseLineHeight;
317
+ background-color: @grayLighter;
318
+ border-top: 1px solid #ddd;
319
+ .clearfix(); // Adding clearfix to allow for .pull-right button containers
320
+ }
321
+
322
+ // For text that needs to appear as an input but should not be an input
323
+ .uneditable-input {
324
+ display: block;
325
+ background-color: @inputBackground;
326
+ border-color: #eee;
327
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
328
+ cursor: not-allowed;
329
+ }
330
+
331
+ // Placeholder text gets special styles; can't be bundled together though for some reason
332
+ .placeholder(@grayLight);
333
+
334
+
335
+
336
+ // HELP TEXT
337
+ // ---------
338
+
339
+ .help-block,
340
+ .help-inline {
341
+ color: @gray; // lighten the text some for contrast
342
+ }
343
+
344
+ .help-block {
345
+ display: block; // account for any element using help-block
346
+ margin-bottom: @baseLineHeight / 2;
347
+ }
348
+
349
+ .help-inline {
350
+ display: inline-block;
351
+ .ie7-inline-block();
352
+ vertical-align: middle;
353
+ padding-left: 5px;
354
+ }
355
+
356
+
357
+
358
+ // INPUT GROUPS
359
+ // ------------
360
+
361
+ // Allow us to put symbols and text within the input field for a cleaner look
362
+ .input-prepend,
363
+ .input-append {
364
+ margin-bottom: 5px;
365
+ input,
366
+ select,
367
+ .uneditable-input {
368
+ *margin-left: 0;
369
+ .border-radius(0 3px 3px 0);
370
+ &:focus {
371
+ position: relative;
372
+ z-index: 2;
373
+ }
374
+ }
375
+ .uneditable-input {
376
+ border-left-color: #ccc;
377
+ }
378
+ .add-on {
379
+ display: inline-block;
380
+ width: auto;
381
+ min-width: 16px;
382
+ height: @baseLineHeight;
383
+ padding: 4px 5px;
384
+ font-weight: normal;
385
+ line-height: @baseLineHeight;
386
+ text-align: center;
387
+ text-shadow: 0 1px 0 @white;
388
+ vertical-align: middle;
389
+ background-color: @grayLighter;
390
+ border: 1px solid #ccc;
391
+ }
392
+ .add-on,
393
+ .btn {
394
+ .border-radius(3px 0 0 3px);
395
+ }
396
+ .active {
397
+ background-color: lighten(@green, 30);
398
+ border-color: @green;
399
+ }
400
+ }
401
+ .input-prepend {
402
+ .add-on,
403
+ .btn {
404
+ margin-right: -1px;
405
+ }
406
+ }
407
+ .input-append {
408
+ input,
409
+ select
410
+ .uneditable-input {
411
+ .border-radius(3px 0 0 3px);
412
+ }
413
+ .uneditable-input {
414
+ border-left-color: #eee;
415
+ border-right-color: #ccc;
416
+ }
417
+ .add-on,
418
+ .btn {
419
+ margin-left: -1px;
420
+ .border-radius(0 3px 3px 0);
421
+ }
422
+ }
423
+ // Remove all border-radius for inputs with both prepend and append
424
+ .input-prepend.input-append {
425
+ input,
426
+ select,
427
+ .uneditable-input {
428
+ .border-radius(0);
429
+ }
430
+ .add-on:first-child,
431
+ .btn:first-child {
432
+ margin-right: -1px;
433
+ .border-radius(3px 0 0 3px);
434
+ }
435
+ .add-on:last-child,
436
+ .btn:last-child {
437
+ margin-left: -1px;
438
+ .border-radius(0 3px 3px 0);
439
+ }
440
+ }
441
+
442
+
443
+
444
+ // SEARCH FORM
445
+ // -----------
446
+
447
+ .search-query {
448
+ padding-left: 14px;
449
+ padding-right: 14px;
450
+ margin-bottom: 0; // remove the default margin on all inputs
451
+ .border-radius(14px);
452
+ }
453
+
454
+
455
+
456
+ // HORIZONTAL & VERTICAL FORMS
457
+ // ---------------------------
458
+
459
+ // Common properties
460
+ // -----------------
461
+
462
+ .form-search,
463
+ .form-inline,
464
+ .form-horizontal {
465
+ input,
466
+ textarea,
467
+ select,
468
+ .help-inline,
469
+ .uneditable-input,
470
+ .input-prepend,
471
+ .input-append {
472
+ display: inline-block;
473
+ margin-bottom: 0;
474
+ }
475
+ // Re-hide hidden elements due to specifity
476
+ .hide {
477
+ display: none;
478
+ }
479
+ }
480
+ .form-search label,
481
+ .form-inline label {
482
+ display: inline-block;
483
+ }
484
+ // Remove margin for input-prepend/-append
485
+ .form-search .input-append,
486
+ .form-inline .input-append,
487
+ .form-search .input-prepend,
488
+ .form-inline .input-prepend {
489
+ margin-bottom: 0;
490
+ }
491
+ // Inline checkbox/radio labels (remove padding on left)
492
+ .form-search .radio,
493
+ .form-search .checkbox,
494
+ .form-inline .radio,
495
+ .form-inline .checkbox {
496
+ padding-left: 0;
497
+ margin-bottom: 0;
498
+ vertical-align: middle;
499
+ }
500
+ // Remove float and margin, set to inline-block
501
+ .form-search .radio input[type="radio"],
502
+ .form-search .checkbox input[type="checkbox"],
503
+ .form-inline .radio input[type="radio"],
504
+ .form-inline .checkbox input[type="checkbox"] {
505
+ float: left;
506
+ margin-left: 0;
507
+ margin-right: 3px;
508
+ }
509
+
510
+
511
+ // Margin to space out fieldsets
512
+ .control-group {
513
+ margin-bottom: @baseLineHeight / 2;
514
+ }
515
+
516
+ // Legend collapses margin, so next element is responsible for spacing
517
+ legend + .control-group {
518
+ margin-top: @baseLineHeight;
519
+ -webkit-margin-top-collapse: separate;
520
+ }
521
+
522
+ // Horizontal-specific styles
523
+ // --------------------------
524
+
525
+ .form-horizontal {
526
+ // Increase spacing between groups
527
+ .control-group {
528
+ margin-bottom: @baseLineHeight;
529
+ .clearfix();
530
+ }
531
+ // Float the labels left
532
+ .control-label {
533
+ float: left;
534
+ width: 140px;
535
+ padding-top: 5px;
536
+ text-align: right;
537
+ }
538
+ // Move over all input controls and content
539
+ .controls {
540
+ margin-left: 160px;
541
+ /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
542
+ *display: inline-block;
543
+ *margin-left: 0;
544
+ *padding-left: 20px;
545
+ }
546
+ // Remove bottom margin on block level help text since that's accounted for on .control-group
547
+ .help-block {
548
+ margin-top: @baseLineHeight / 2;
549
+ margin-bottom: 0;
550
+ }
551
+ // Move over buttons in .form-actions to align with .controls
552
+ .form-actions {
553
+ padding-left: 160px;
554
+ }
555
+ }