less-rails-bootstrap 2.3.3 → 3.0.0.rc1
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.
- data/.gitignore +1 -0
- data/CHANGELOG.md +4 -0
- data/README.md +7 -11
- data/lib/less/rails/bootstrap/version.rb +1 -1
- data/scripts/update_bootstrap.sh +37 -8
- data/test/cases/usage_css_spec.rb +15 -12
- data/test/cases/usage_js_spec.rb +4 -4
- data/test/dummy_app/app/assets/stylesheets/fonts.css.less +2 -0
- data/test/dummy_app/app/assets/stylesheets/framework.css.less +4 -2
- data/test/dummy_app/app/assets/stylesheets/individual.css.less +2 -2
- data/test/spec_helper.rb +1 -2
- data/vendor/assets/javascripts/twitter/bootstrap.js +0 -1
- data/vendor/assets/javascripts/twitter/bootstrap/affix.js +58 -49
- data/vendor/assets/javascripts/twitter/bootstrap/alert.js +36 -37
- data/vendor/assets/javascripts/twitter/bootstrap/button.js +41 -39
- data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +131 -125
- data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +108 -96
- data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +72 -87
- data/vendor/assets/javascripts/twitter/bootstrap/modal.js +149 -155
- data/vendor/assets/javascripts/twitter/bootstrap/popover.js +60 -59
- data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +103 -107
- data/vendor/assets/javascripts/twitter/bootstrap/tab.js +73 -82
- data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +258 -255
- data/vendor/assets/javascripts/twitter/bootstrap/transition.js +34 -38
- data/vendor/frameworks/twitter/bootstrap/accordion.less +9 -12
- data/vendor/frameworks/twitter/bootstrap/alerts.less +43 -53
- data/vendor/frameworks/twitter/bootstrap/bootstrap.less +21 -21
- data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +7 -8
- data/vendor/frameworks/twitter/bootstrap/button-groups.less +93 -151
- data/vendor/frameworks/twitter/bootstrap/buttons.less +93 -164
- data/vendor/frameworks/twitter/bootstrap/carousel.less +110 -63
- data/vendor/frameworks/twitter/bootstrap/close.less +18 -17
- data/vendor/frameworks/twitter/bootstrap/code.less +14 -20
- data/vendor/frameworks/twitter/bootstrap/component-animations.less +10 -3
- data/vendor/frameworks/twitter/bootstrap/dropdowns.less +66 -143
- data/vendor/frameworks/twitter/bootstrap/forms.less +281 -548
- data/vendor/frameworks/twitter/bootstrap/grid.less +194 -11
- data/vendor/frameworks/twitter/bootstrap/media.less +8 -7
- data/vendor/frameworks/twitter/bootstrap/mixins.less +290 -446
- data/vendor/frameworks/twitter/bootstrap/modals.less +92 -51
- data/vendor/frameworks/twitter/bootstrap/navbar.less +285 -402
- data/vendor/frameworks/twitter/bootstrap/navs.less +176 -348
- data/vendor/frameworks/twitter/bootstrap/pager.less +45 -33
- data/vendor/frameworks/twitter/bootstrap/pagination.less +89 -104
- data/vendor/frameworks/twitter/bootstrap/popovers.less +53 -51
- data/vendor/frameworks/twitter/bootstrap/progress-bars.less +28 -45
- data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +92 -32
- data/vendor/frameworks/twitter/bootstrap/scaffolding.less +60 -18
- data/vendor/frameworks/twitter/bootstrap/tables.less +131 -164
- data/vendor/frameworks/twitter/bootstrap/thumbnails.less +20 -31
- data/vendor/frameworks/twitter/bootstrap/tooltip.less +45 -20
- data/vendor/frameworks/twitter/bootstrap/type.less +84 -99
- data/vendor/frameworks/twitter/bootstrap/utilities.less +17 -5
- data/vendor/frameworks/twitter/bootstrap/variables.less +446 -179
- data/vendor/frameworks/twitter/bootstrap/wells.less +5 -5
- metadata +41 -44
- data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +0 -335
- data/vendor/assets/stylesheets/twitter/bootstrap-responsive.css.less +0 -1
- data/vendor/assets/stylesheets/twitter/bootstrap.css.less +0 -1
- data/vendor/frameworks/twitter/bootstrap.less +0 -1
- data/vendor/frameworks/twitter/bootstrap/hero-unit.less +0 -25
- data/vendor/frameworks/twitter/bootstrap/labels-badges.less +0 -84
- data/vendor/frameworks/twitter/bootstrap/layouts.less +0 -16
- data/vendor/frameworks/twitter/bootstrap/reset.less +0 -216
- data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +0 -28
- data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +0 -193
- data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +0 -19
- data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +0 -189
- data/vendor/frameworks/twitter/bootstrap/responsive.less +0 -48
- data/vendor/frameworks/twitter/bootstrap/sprites.less +0 -197
@@ -5,28 +5,29 @@
|
|
5
5
|
|
6
6
|
.close {
|
7
7
|
float: right;
|
8
|
-
font-size:
|
8
|
+
font-size: (@font-size-base * 1.5);
|
9
9
|
font-weight: bold;
|
10
|
-
line-height:
|
11
|
-
color: @
|
12
|
-
text-shadow:
|
13
|
-
.opacity(
|
10
|
+
line-height: 1;
|
11
|
+
color: @close-color;
|
12
|
+
text-shadow: @close-text-shadow;
|
13
|
+
.opacity(.2);
|
14
|
+
|
14
15
|
&:hover,
|
15
16
|
&:focus {
|
16
|
-
color: @
|
17
|
+
color: @close-color;
|
17
18
|
text-decoration: none;
|
18
19
|
cursor: pointer;
|
19
|
-
.opacity(
|
20
|
+
.opacity(.5);
|
20
21
|
}
|
21
|
-
}
|
22
22
|
|
23
|
-
// Additional properties for button version
|
24
|
-
// iOS requires the button element instead of an anchor tag.
|
25
|
-
// If you want the anchor version, it requires `href="#"`.
|
26
|
-
button
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
23
|
+
// Additional properties for button version
|
24
|
+
// iOS requires the button element instead of an anchor tag.
|
25
|
+
// If you want the anchor version, it requires `href="#"`.
|
26
|
+
button& {
|
27
|
+
padding: 0;
|
28
|
+
cursor: pointer;
|
29
|
+
background: transparent;
|
30
|
+
border: 0;
|
31
|
+
-webkit-appearance: none;
|
32
|
+
}
|
32
33
|
}
|
@@ -6,48 +6,42 @@
|
|
6
6
|
// Inline and block code styles
|
7
7
|
code,
|
8
8
|
pre {
|
9
|
-
|
10
|
-
#font > #family > .monospace;
|
11
|
-
font-size: @baseFontSize - 2;
|
12
|
-
color: @grayDark;
|
13
|
-
.border-radius(3px);
|
9
|
+
font-family: @font-family-monospace;
|
14
10
|
}
|
15
11
|
|
16
12
|
// Inline code
|
17
13
|
code {
|
18
14
|
padding: 2px 4px;
|
19
|
-
|
20
|
-
|
21
|
-
|
15
|
+
font-size: 90%;
|
16
|
+
color: @code-color;
|
17
|
+
background-color: @code-bg;
|
22
18
|
white-space: nowrap;
|
19
|
+
border-radius: 4px;
|
23
20
|
}
|
24
21
|
|
25
22
|
// Blocks of code
|
26
23
|
pre {
|
27
24
|
display: block;
|
28
|
-
padding: (@
|
29
|
-
margin: 0 0 @
|
30
|
-
font-size: @
|
31
|
-
line-height: @
|
25
|
+
padding: ((@line-height-computed - 1) / 2);
|
26
|
+
margin: 0 0 (@line-height-computed / 2);
|
27
|
+
font-size: (@font-size-base - 1); // 14px to 13px
|
28
|
+
line-height: @line-height-base;
|
32
29
|
word-break: break-all;
|
33
30
|
word-wrap: break-word;
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
border:
|
38
|
-
border: 1px solid rgba(0,0,0,.15);
|
39
|
-
.border-radius(@baseBorderRadius);
|
31
|
+
color: @gray-dark;
|
32
|
+
background-color: @pre-bg;
|
33
|
+
border: 1px solid @pre-border-color;
|
34
|
+
border-radius: @border-radius-base;
|
40
35
|
|
41
36
|
// Make prettyprint styles more spaced out for readability
|
42
37
|
&.prettyprint {
|
43
|
-
margin-bottom: @
|
38
|
+
margin-bottom: @line-height-computed;
|
44
39
|
}
|
45
40
|
|
46
41
|
// Account for some code outputs that place code tags in pre tags
|
47
42
|
code {
|
48
43
|
padding: 0;
|
49
44
|
color: inherit;
|
50
|
-
white-space: pre;
|
51
45
|
white-space: pre-wrap;
|
52
46
|
background-color: transparent;
|
53
47
|
border: 0;
|
@@ -2,6 +2,10 @@
|
|
2
2
|
// Component animations
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
|
+
// Heads up!
|
6
|
+
//
|
7
|
+
// We don't use the `.opacity()` mixin here since it causes a bug with text
|
8
|
+
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552.
|
5
9
|
|
6
10
|
.fade {
|
7
11
|
opacity: 0;
|
@@ -12,11 +16,14 @@
|
|
12
16
|
}
|
13
17
|
|
14
18
|
.collapse {
|
19
|
+
display: none;
|
20
|
+
&.in {
|
21
|
+
display: block;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
.collapsing {
|
15
25
|
position: relative;
|
16
26
|
height: 0;
|
17
27
|
overflow: hidden;
|
18
28
|
.transition(height .35s ease);
|
19
|
-
&.in {
|
20
|
-
height: auto;
|
21
|
-
}
|
22
29
|
}
|
@@ -3,62 +3,39 @@
|
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
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
6
|
// Dropdown arrow/caret
|
21
7
|
// --------------------
|
22
8
|
.caret {
|
23
9
|
display: inline-block;
|
24
10
|
width: 0;
|
25
11
|
height: 0;
|
26
|
-
|
27
|
-
|
12
|
+
margin-left: 2px;
|
13
|
+
vertical-align: middle;
|
14
|
+
border-top: 4px solid @dropdown-caret-color;
|
28
15
|
border-right: 4px solid transparent;
|
29
16
|
border-left: 4px solid transparent;
|
30
17
|
content: "";
|
31
18
|
}
|
32
19
|
|
33
|
-
// Place the caret
|
34
|
-
.dropdown .caret {
|
35
|
-
margin-top: 8px;
|
36
|
-
margin-left: 2px;
|
37
|
-
}
|
38
|
-
|
39
20
|
// The dropdown menu (ul)
|
40
21
|
// ----------------------
|
41
22
|
.dropdown-menu {
|
42
23
|
position: absolute;
|
43
24
|
top: 100%;
|
44
25
|
left: 0;
|
45
|
-
z-index: @
|
26
|
+
z-index: @zindex-dropdown;
|
46
27
|
display: none; // none by default, but block on "open" of the menu
|
47
28
|
float: left;
|
48
29
|
min-width: 160px;
|
49
30
|
padding: 5px 0;
|
50
31
|
margin: 2px 0 0; // override default ul
|
51
32
|
list-style: none;
|
52
|
-
background-color: @
|
53
|
-
border: 1px solid
|
54
|
-
border: 1px solid @
|
55
|
-
|
56
|
-
|
57
|
-
.
|
58
|
-
.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;
|
33
|
+
background-color: @dropdown-bg;
|
34
|
+
border: 1px solid @dropdown-fallback-border; // IE8 fallback
|
35
|
+
border: 1px solid @dropdown-border;
|
36
|
+
border-radius: @border-radius-base;
|
37
|
+
.box-shadow(0 6px 12px rgba(0,0,0,.175));
|
38
|
+
.background-clip(padding-box);
|
62
39
|
|
63
40
|
// Aligns the dropdown menu to right
|
64
41
|
&.pull-right {
|
@@ -68,7 +45,7 @@
|
|
68
45
|
|
69
46
|
// Dividers (basically an hr) within the dropdown
|
70
47
|
.divider {
|
71
|
-
.nav-divider(@
|
48
|
+
.nav-divider(@dropdown-divider-bg);
|
72
49
|
}
|
73
50
|
|
74
51
|
// Links within the dropdown menu
|
@@ -77,64 +54,84 @@
|
|
77
54
|
padding: 3px 20px;
|
78
55
|
clear: both;
|
79
56
|
font-weight: normal;
|
80
|
-
line-height: @
|
81
|
-
color: @
|
82
|
-
white-space: nowrap;
|
57
|
+
line-height: @line-height-base;
|
58
|
+
color: @dropdown-link-color;
|
59
|
+
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
83
60
|
}
|
84
61
|
}
|
85
62
|
|
86
63
|
// Hover/Focus state
|
87
64
|
// -----------
|
88
|
-
.dropdown-menu > li > a
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
65
|
+
.dropdown-menu > li > a {
|
66
|
+
&:hover,
|
67
|
+
&:focus {
|
68
|
+
text-decoration: none;
|
69
|
+
color: @dropdown-link-hover-color;
|
70
|
+
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
|
71
|
+
}
|
95
72
|
}
|
96
73
|
|
97
74
|
// Active state
|
98
75
|
// ------------
|
99
|
-
.dropdown-menu > .active > a
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
76
|
+
.dropdown-menu > .active > a {
|
77
|
+
&,
|
78
|
+
&:hover,
|
79
|
+
&:focus {
|
80
|
+
color: @dropdown-link-active-color;
|
81
|
+
text-decoration: none;
|
82
|
+
outline: 0;
|
83
|
+
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
|
84
|
+
}
|
106
85
|
}
|
107
86
|
|
108
87
|
// Disabled state
|
109
88
|
// --------------
|
110
89
|
// Gray out text and ensure the hover/focus state remains gray
|
111
|
-
.dropdown-menu > .disabled > a
|
112
|
-
|
113
|
-
|
114
|
-
|
90
|
+
.dropdown-menu > .disabled > a {
|
91
|
+
&,
|
92
|
+
&:hover,
|
93
|
+
&:focus {
|
94
|
+
color: @gray-light;
|
95
|
+
}
|
115
96
|
}
|
116
97
|
// Nuke hover/focus effects
|
117
|
-
.dropdown-menu > .disabled > a
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
98
|
+
.dropdown-menu > .disabled > a {
|
99
|
+
&:hover,
|
100
|
+
&:focus {
|
101
|
+
text-decoration: none;
|
102
|
+
background-color: transparent;
|
103
|
+
background-image: none; // Remove CSS gradient
|
104
|
+
.reset-filter();
|
105
|
+
cursor: not-allowed;
|
106
|
+
}
|
124
107
|
}
|
125
108
|
|
126
109
|
// Open state for the dropdown
|
127
110
|
// ---------------------------
|
128
111
|
.open {
|
129
|
-
//
|
130
|
-
|
131
|
-
*z-index: @zindexDropdown;
|
132
|
-
|
133
|
-
& > .dropdown-menu {
|
112
|
+
// Show the menu
|
113
|
+
> .dropdown-menu {
|
134
114
|
display: block;
|
135
115
|
}
|
116
|
+
|
117
|
+
// Remove the outline when :focus is triggered
|
118
|
+
> a {
|
119
|
+
outline: 0;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
// Dropdown section headers
|
124
|
+
// ---------------------------
|
125
|
+
.dropdown-header {
|
126
|
+
display: block;
|
127
|
+
padding: 3px 20px;
|
128
|
+
font-size: @font-size-small;
|
129
|
+
line-height: @line-height-base;
|
130
|
+
color: @gray-light;
|
136
131
|
}
|
137
132
|
|
133
|
+
|
134
|
+
|
138
135
|
// Backdrop to catch body clicks on mobile, etc.
|
139
136
|
// ---------------------------
|
140
137
|
.dropdown-backdrop {
|
@@ -143,7 +140,7 @@
|
|
143
140
|
right: 0;
|
144
141
|
bottom: 0;
|
145
142
|
top: 0;
|
146
|
-
z-index: @
|
143
|
+
z-index: @zindex-dropdown - 10;
|
147
144
|
}
|
148
145
|
|
149
146
|
// Right aligned dropdowns
|
@@ -162,7 +159,7 @@
|
|
162
159
|
// Reverse the caret
|
163
160
|
.caret {
|
164
161
|
border-top: 0;
|
165
|
-
border-bottom: 4px solid @
|
162
|
+
border-bottom: 4px solid @dropdown-caret-color;
|
166
163
|
content: "";
|
167
164
|
}
|
168
165
|
// Different positioning for bottom up menu
|
@@ -172,77 +169,3 @@
|
|
172
169
|
margin-bottom: 1px;
|
173
170
|
}
|
174
171
|
}
|
175
|
-
|
176
|
-
// Sub menus
|
177
|
-
// ---------------------------
|
178
|
-
.dropdown-submenu {
|
179
|
-
position: relative;
|
180
|
-
}
|
181
|
-
// Default dropdowns
|
182
|
-
.dropdown-submenu > .dropdown-menu {
|
183
|
-
top: 0;
|
184
|
-
left: 100%;
|
185
|
-
margin-top: -6px;
|
186
|
-
margin-left: -1px;
|
187
|
-
.border-radius(0 6px 6px 6px);
|
188
|
-
}
|
189
|
-
.dropdown-submenu:hover > .dropdown-menu {
|
190
|
-
display: block;
|
191
|
-
}
|
192
|
-
|
193
|
-
// Dropups
|
194
|
-
.dropup .dropdown-submenu > .dropdown-menu {
|
195
|
-
top: auto;
|
196
|
-
bottom: 0;
|
197
|
-
margin-top: 0;
|
198
|
-
margin-bottom: -2px;
|
199
|
-
.border-radius(5px 5px 5px 0);
|
200
|
-
}
|
201
|
-
|
202
|
-
// Caret to indicate there is a submenu
|
203
|
-
.dropdown-submenu > a:after {
|
204
|
-
display: block;
|
205
|
-
content: " ";
|
206
|
-
float: right;
|
207
|
-
width: 0;
|
208
|
-
height: 0;
|
209
|
-
border-color: transparent;
|
210
|
-
border-style: solid;
|
211
|
-
border-width: 5px 0 5px 5px;
|
212
|
-
border-left-color: darken(@dropdownBackground, 20%);
|
213
|
-
margin-top: 5px;
|
214
|
-
margin-right: -10px;
|
215
|
-
}
|
216
|
-
.dropdown-submenu:hover > a:after {
|
217
|
-
border-left-color: @dropdownLinkColorHover;
|
218
|
-
}
|
219
|
-
|
220
|
-
// Left aligned submenus
|
221
|
-
.dropdown-submenu.pull-left {
|
222
|
-
// Undo the float
|
223
|
-
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
|
224
|
-
float: none;
|
225
|
-
|
226
|
-
// Positioning the submenu
|
227
|
-
> .dropdown-menu {
|
228
|
-
left: -100%;
|
229
|
-
margin-left: 10px;
|
230
|
-
.border-radius(6px 0 6px 6px);
|
231
|
-
}
|
232
|
-
}
|
233
|
-
|
234
|
-
// Tweak nav headers
|
235
|
-
// -----------------
|
236
|
-
// Increase padding from 15px to 20px on sides
|
237
|
-
.dropdown .dropdown-menu .nav-header {
|
238
|
-
padding-left: 20px;
|
239
|
-
padding-right: 20px;
|
240
|
-
}
|
241
|
-
|
242
|
-
// Typeahead
|
243
|
-
// ---------
|
244
|
-
.typeahead {
|
245
|
-
z-index: 1051;
|
246
|
-
margin-top: 2px; // give it some space to breathe
|
247
|
-
.border-radius(@baseBorderRadius);
|
248
|
-
}
|
@@ -3,13 +3,9 @@
|
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
5
|
|
6
|
-
//
|
7
|
-
//
|
8
|
-
|
9
|
-
// Make all forms have space below them
|
10
|
-
form {
|
11
|
-
margin: 0 0 @baseLineHeight;
|
12
|
-
}
|
6
|
+
// Normalize non-controls
|
7
|
+
//
|
8
|
+
// Restyle and baseline non-control form elements.
|
13
9
|
|
14
10
|
fieldset {
|
15
11
|
padding: 0;
|
@@ -17,153 +13,43 @@ fieldset {
|
|
17
13
|
border: 0;
|
18
14
|
}
|
19
15
|
|
20
|
-
// Groups of fields with labels on top (legends)
|
21
16
|
legend {
|
22
17
|
display: block;
|
23
18
|
width: 100%;
|
24
19
|
padding: 0;
|
25
|
-
margin-bottom: @
|
26
|
-
font-size: @
|
27
|
-
line-height:
|
28
|
-
color: @
|
20
|
+
margin-bottom: @line-height-computed;
|
21
|
+
font-size: (@font-size-base * 1.5);
|
22
|
+
line-height: inherit;
|
23
|
+
color: @gray-dark;
|
29
24
|
border: 0;
|
30
|
-
border-bottom: 1px solid
|
31
|
-
|
32
|
-
// Small
|
33
|
-
small {
|
34
|
-
font-size: @baseLineHeight * .75;
|
35
|
-
color: @grayLight;
|
36
|
-
}
|
25
|
+
border-bottom: 1px solid @legend-border-color;
|
37
26
|
}
|
38
27
|
|
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
28
|
label {
|
56
|
-
display: block;
|
29
|
+
display: inline-block;
|
57
30
|
margin-bottom: 5px;
|
31
|
+
font-weight: bold;
|
58
32
|
}
|
59
33
|
|
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
|
-
.border-radius(@inputBorderRadius);
|
89
|
-
vertical-align: middle;
|
90
|
-
}
|
91
34
|
|
92
|
-
//
|
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
|
-
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
123
|
-
.transition(~"border linear .2s, box-shadow linear .2s");
|
35
|
+
// Normalize form controls
|
124
36
|
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
outline: 0;
|
129
|
-
outline: thin dotted \9; /* IE6-9 */
|
130
|
-
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
131
|
-
}
|
37
|
+
// Override content-box in Normalize (* isn't specific enough)
|
38
|
+
input[type="search"] {
|
39
|
+
.box-sizing(border-box);
|
132
40
|
}
|
133
41
|
|
134
42
|
// Position radios and checkboxes better
|
135
43
|
input[type="radio"],
|
136
44
|
input[type="checkbox"] {
|
137
45
|
margin: 4px 0 0;
|
138
|
-
*margin-top: 0; /* IE7 */
|
139
46
|
margin-top: 1px \9; /* IE8-9 */
|
140
47
|
line-height: normal;
|
141
48
|
}
|
142
49
|
|
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
50
|
// Set the height of select and file controls to match text inputs
|
155
|
-
select,
|
156
51
|
input[type="file"] {
|
157
|
-
|
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
|
52
|
+
display: block;
|
167
53
|
}
|
168
54
|
|
169
55
|
// Make multiple select elements height not fixed
|
@@ -172,519 +58,366 @@ select[size] {
|
|
172
58
|
height: auto;
|
173
59
|
}
|
174
60
|
|
61
|
+
// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
|
62
|
+
select optgroup {
|
63
|
+
font-size: inherit;
|
64
|
+
font-style: inherit;
|
65
|
+
font-family: inherit;
|
66
|
+
}
|
67
|
+
|
175
68
|
// Focus for select, file, radio, and checkbox
|
176
|
-
select:focus,
|
177
69
|
input[type="file"]:focus,
|
178
70
|
input[type="radio"]:focus,
|
179
71
|
input[type="checkbox"]:focus {
|
180
72
|
.tab-focus();
|
181
73
|
}
|
182
74
|
|
75
|
+
// Fix for Chrome number input
|
76
|
+
// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
|
77
|
+
// See https://github.com/twbs/bootstrap/issues/8350 for more.
|
78
|
+
input[type="number"] {
|
79
|
+
&::-webkit-outer-spin-button,
|
80
|
+
&::-webkit-inner-spin-button {
|
81
|
+
height: auto;
|
82
|
+
}
|
83
|
+
}
|
183
84
|
|
184
|
-
// Uneditable inputs
|
185
|
-
// -------------------------
|
186
85
|
|
187
|
-
//
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
194
|
-
cursor: not-allowed;
|
86
|
+
// Placeholder
|
87
|
+
//
|
88
|
+
// Placeholder text gets special styles because when browsers invalidate entire
|
89
|
+
// lines if it doesn't understand a selector/
|
90
|
+
.form-control {
|
91
|
+
.placeholder();
|
195
92
|
}
|
196
93
|
|
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
94
|
|
203
|
-
//
|
204
|
-
|
205
|
-
|
206
|
-
|
95
|
+
// Common form controls
|
96
|
+
//
|
97
|
+
// Shared size and type resets for form controls. Apply `.form-control` to any
|
98
|
+
// of the following form controls:
|
99
|
+
//
|
100
|
+
// select
|
101
|
+
// textarea
|
102
|
+
// input[type="text"]
|
103
|
+
// input[type="password"]
|
104
|
+
// input[type="datetime"]
|
105
|
+
// input[type="datetime-local"]
|
106
|
+
// input[type="date"]
|
107
|
+
// input[type="month"]
|
108
|
+
// input[type="time"]
|
109
|
+
// input[type="week"]
|
110
|
+
// input[type="number"]
|
111
|
+
// input[type="email"]
|
112
|
+
// input[type="url"]
|
113
|
+
// input[type="search"]
|
114
|
+
// input[type="tel"]
|
115
|
+
// input[type="color"]
|
116
|
+
|
117
|
+
.form-control {
|
118
|
+
display: block;
|
119
|
+
width: 100%;
|
120
|
+
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
121
|
+
padding: @padding-base-vertical @padding-base-horizontal;
|
122
|
+
font-size: @font-size-base;
|
123
|
+
line-height: @line-height-base;
|
124
|
+
color: @gray;
|
125
|
+
vertical-align: middle;
|
126
|
+
background-color: @input-bg;
|
127
|
+
border: 1px solid @input-border;
|
128
|
+
border-radius: @input-border-radius;
|
129
|
+
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
130
|
+
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
|
131
|
+
|
132
|
+
&:focus {
|
133
|
+
border-color: rgba(82,168,236,.8);
|
134
|
+
outline: 0;
|
135
|
+
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
|
136
|
+
}
|
137
|
+
|
138
|
+
// Disabled and read-only inputs
|
139
|
+
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
|
140
|
+
// disabled if the fieldset is disabled. Due to implementation difficulty,
|
141
|
+
// we don't honor that edge case; we style them as disabled anyway.
|
142
|
+
&[disabled],
|
143
|
+
&[readonly],
|
144
|
+
fieldset[disabled] & {
|
145
|
+
cursor: not-allowed;
|
146
|
+
background-color: @input-bg-disabled;
|
147
|
+
}
|
148
|
+
|
149
|
+
// Reset height for `textarea`s
|
150
|
+
textarea& {
|
151
|
+
height: auto;
|
152
|
+
}
|
207
153
|
}
|
208
154
|
|
209
155
|
|
210
|
-
//
|
211
|
-
//
|
156
|
+
// Form groups
|
157
|
+
//
|
158
|
+
// Designed to help with the organization and spacing of vertical forms. For
|
159
|
+
// horizontal forms, use the predefined grid classes.
|
212
160
|
|
213
|
-
|
214
|
-
|
215
|
-
textarea {
|
216
|
-
.placeholder();
|
161
|
+
.form-group {
|
162
|
+
margin-bottom: 15px;
|
217
163
|
}
|
218
164
|
|
219
165
|
|
220
|
-
//
|
221
|
-
//
|
166
|
+
// Checkboxes and radios
|
167
|
+
//
|
168
|
+
// Indent the labels to position radios/checkboxes as hanging controls.
|
222
169
|
|
223
|
-
// Indent the labels to position radios/checkboxes as hanging
|
224
170
|
.radio,
|
225
171
|
.checkbox {
|
226
|
-
|
172
|
+
display: block;
|
173
|
+
min-height: @line-height-computed; // clear the floating input if there is no label text
|
174
|
+
margin-top: 10px;
|
175
|
+
margin-bottom: 10px;
|
227
176
|
padding-left: 20px;
|
177
|
+
vertical-align: middle;
|
178
|
+
label {
|
179
|
+
display: inline;
|
180
|
+
margin-bottom: 0;
|
181
|
+
font-weight: normal;
|
182
|
+
cursor: pointer;
|
183
|
+
}
|
228
184
|
}
|
229
185
|
.radio input[type="radio"],
|
230
|
-
.
|
186
|
+
.radio-inline input[type="radio"],
|
187
|
+
.checkbox input[type="checkbox"],
|
188
|
+
.checkbox-inline input[type="checkbox"] {
|
231
189
|
float: left;
|
232
190
|
margin-left: -20px;
|
233
191
|
}
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
.controls > .checkbox:first-child {
|
238
|
-
padding-top: 5px; // has to be padding because margin collaspes
|
192
|
+
.radio + .radio,
|
193
|
+
.checkbox + .checkbox {
|
194
|
+
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
|
239
195
|
}
|
240
196
|
|
241
197
|
// Radios and checkboxes on same line
|
242
|
-
|
243
|
-
.
|
244
|
-
.checkbox.inline {
|
198
|
+
.radio-inline,
|
199
|
+
.checkbox-inline {
|
245
200
|
display: inline-block;
|
246
|
-
padding-
|
201
|
+
padding-left: 20px;
|
247
202
|
margin-bottom: 0;
|
248
203
|
vertical-align: middle;
|
204
|
+
font-weight: normal;
|
205
|
+
cursor: pointer;
|
249
206
|
}
|
250
|
-
.radio
|
251
|
-
.checkbox
|
207
|
+
.radio-inline + .radio-inline,
|
208
|
+
.checkbox-inline + .checkbox-inline {
|
209
|
+
margin-top: 0;
|
252
210
|
margin-left: 10px; // space out consecutive inline controls
|
253
211
|
}
|
254
212
|
|
255
213
|
|
256
214
|
|
257
|
-
//
|
258
|
-
//
|
259
|
-
|
260
|
-
//
|
261
|
-
|
262
|
-
|
263
|
-
.
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
.row-fluid textarea[class*="span"],
|
277
|
-
.row-fluid .uneditable-input[class*="span"] {
|
278
|
-
float: none;
|
279
|
-
margin-left: 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
|
-
#grid > .input(@gridColumnWidth, @gridGutterWidth);
|
302
|
-
|
303
|
-
// Control row for multiple inputs per line
|
304
|
-
.controls-row {
|
305
|
-
.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: left;
|
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;
|
215
|
+
// Form control sizing
|
216
|
+
//
|
217
|
+
// Relative text size, padding, and border-radii changes for form controls. For
|
218
|
+
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
219
|
+
// element gets special love because it's special, and that's a fact!
|
220
|
+
|
221
|
+
.form-control {
|
222
|
+
&.input-large {
|
223
|
+
height: @input-height-large;
|
224
|
+
padding: @padding-large-vertical @padding-large-horizontal;
|
225
|
+
font-size: @font-size-large;
|
226
|
+
border-radius: @border-radius-large;
|
227
|
+
}
|
228
|
+
&.input-small {
|
229
|
+
height: @input-height-small;
|
230
|
+
padding: @padding-small-vertical @padding-small-horizontal;
|
231
|
+
font-size: @font-size-small;
|
232
|
+
border-radius: @border-radius-small;
|
233
|
+
}
|
335
234
|
}
|
336
|
-
|
337
|
-
input
|
338
|
-
input
|
339
|
-
input
|
340
|
-
|
341
|
-
|
235
|
+
select {
|
236
|
+
&.input-large {
|
237
|
+
height: @input-height-large;
|
238
|
+
line-height: @input-height-large;
|
239
|
+
}
|
240
|
+
&.input-small {
|
241
|
+
height: @input-height-small;
|
242
|
+
line-height: @input-height-small;
|
243
|
+
}
|
342
244
|
}
|
343
245
|
|
344
246
|
|
345
|
-
|
346
|
-
|
347
|
-
//
|
348
|
-
// --------------------------
|
247
|
+
// Form control feedback states
|
248
|
+
//
|
249
|
+
// Apply contextual and semantic states to individual form controls.
|
349
250
|
|
350
251
|
// Warning
|
351
|
-
.
|
352
|
-
.
|
252
|
+
.has-warning {
|
253
|
+
.form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
|
353
254
|
}
|
354
255
|
// Error
|
355
|
-
.
|
356
|
-
.
|
256
|
+
.has-error {
|
257
|
+
.form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
|
357
258
|
}
|
358
259
|
// Success
|
359
|
-
.
|
360
|
-
.
|
361
|
-
}
|
362
|
-
// Success
|
363
|
-
.control-group.info {
|
364
|
-
.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
|
-
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
|
377
|
-
.box-shadow(@shadow);
|
378
|
-
}
|
379
|
-
}
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
// FORM ACTIONS
|
384
|
-
// ------------
|
385
|
-
|
386
|
-
.form-actions {
|
387
|
-
padding: (@baseLineHeight - 1) 20px @baseLineHeight;
|
388
|
-
margin-top: @baseLineHeight;
|
389
|
-
margin-bottom: @baseLineHeight;
|
390
|
-
background-color: @formActionsBackground;
|
391
|
-
border-top: 1px solid #e5e5e5;
|
392
|
-
.clearfix(); // Adding clearfix to allow for .pull-right button containers
|
260
|
+
.has-success {
|
261
|
+
.form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
|
393
262
|
}
|
394
263
|
|
395
264
|
|
396
|
-
|
397
|
-
//
|
398
|
-
//
|
399
|
-
|
400
|
-
.help-block,
|
401
|
-
.help-inline {
|
402
|
-
color: lighten(@textColor, 15%); // lighten the text some for contrast
|
403
|
-
}
|
265
|
+
// Help text
|
266
|
+
//
|
267
|
+
// Apply to any element you wish to create light text for placement immediately
|
268
|
+
// below a form control. Use for general help, formatting, or instructional text.
|
404
269
|
|
405
270
|
.help-block {
|
406
271
|
display: block; // account for any element using help-block
|
407
|
-
margin-
|
408
|
-
|
409
|
-
|
410
|
-
.help-inline {
|
411
|
-
display: inline-block;
|
412
|
-
.ie7-inline-block();
|
413
|
-
vertical-align: middle;
|
414
|
-
padding-left: 5px;
|
272
|
+
margin-top: 5px;
|
273
|
+
margin-bottom: 10px;
|
274
|
+
color: lighten(@text-color, 25%); // lighten the text some for contrast
|
415
275
|
}
|
416
276
|
|
417
277
|
|
418
278
|
|
419
|
-
//
|
420
|
-
//
|
279
|
+
// Input groups
|
280
|
+
// --------------------------------------------------
|
421
281
|
|
422
|
-
//
|
423
|
-
|
424
|
-
.input-
|
425
|
-
display:
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
select,
|
434
|
-
.uneditable-input,
|
435
|
-
.dropdown-menu,
|
436
|
-
.popover {
|
437
|
-
font-size: @baseFontSize;
|
282
|
+
// Base styles
|
283
|
+
// -------------------------
|
284
|
+
.input-group {
|
285
|
+
display: table;
|
286
|
+
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
|
287
|
+
|
288
|
+
// Undo padding and float of grid classes
|
289
|
+
&.col {
|
290
|
+
float: none;
|
291
|
+
padding-left: 0;
|
292
|
+
padding-right: 0;
|
438
293
|
}
|
439
294
|
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
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
|
444
|
-
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
445
|
-
*margin-left: 0;
|
446
|
-
vertical-align: top;
|
447
|
-
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
|
448
|
-
// Make input on top when focused so blue border and shadow always show
|
449
|
-
&:focus {
|
450
|
-
z-index: 2;
|
451
|
-
}
|
452
|
-
}
|
453
|
-
.add-on {
|
454
|
-
display: inline-block;
|
455
|
-
width: auto;
|
456
|
-
height: @baseLineHeight;
|
457
|
-
min-width: 16px;
|
458
|
-
padding: 4px 5px;
|
459
|
-
font-size: @baseFontSize;
|
460
|
-
font-weight: normal;
|
461
|
-
line-height: @baseLineHeight;
|
462
|
-
text-align: center;
|
463
|
-
text-shadow: 0 1px 0 @white;
|
464
|
-
background-color: @grayLighter;
|
465
|
-
border: 1px solid #ccc;
|
466
|
-
}
|
467
|
-
.add-on,
|
468
|
-
.btn,
|
469
|
-
.btn-group > .dropdown-toggle {
|
470
|
-
vertical-align: top;
|
471
|
-
.border-radius(0);
|
472
|
-
}
|
473
|
-
.active {
|
474
|
-
background-color: lighten(@green, 30);
|
475
|
-
border-color: @green;
|
295
|
+
.form-control {
|
296
|
+
width: 100%;
|
297
|
+
margin-bottom: 0;
|
476
298
|
}
|
477
299
|
}
|
478
300
|
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
.btn:first-child {
|
486
|
-
// FYI, `.btn:first-child` accounts for a button group that's prepended
|
487
|
-
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
|
488
|
-
}
|
489
|
-
}
|
301
|
+
// Display as table-cell
|
302
|
+
// -------------------------
|
303
|
+
.input-group-addon,
|
304
|
+
.input-group-btn,
|
305
|
+
.input-group .form-control {
|
306
|
+
display: table-cell;
|
490
307
|
|
491
|
-
|
492
|
-
|
493
|
-
select,
|
494
|
-
.uneditable-input {
|
495
|
-
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
|
496
|
-
+ .btn-group .btn:last-child {
|
497
|
-
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
|
498
|
-
}
|
499
|
-
}
|
500
|
-
.add-on,
|
501
|
-
.btn,
|
502
|
-
.btn-group {
|
503
|
-
margin-left: -1px;
|
504
|
-
}
|
505
|
-
.add-on:last-child,
|
506
|
-
.btn:last-child,
|
507
|
-
.btn-group:last-child > .dropdown-toggle {
|
508
|
-
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
|
308
|
+
&:not(:first-child):not(:last-child) {
|
309
|
+
border-radius: 0;
|
509
310
|
}
|
510
311
|
}
|
312
|
+
// Addon and addon wrapper for buttons
|
313
|
+
.input-group-addon,
|
314
|
+
.input-group-btn {
|
315
|
+
width: 1%;
|
316
|
+
white-space: nowrap;
|
317
|
+
vertical-align: middle; // Match the inputs
|
318
|
+
}
|
511
319
|
|
512
|
-
//
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
margin-left: -1px;
|
530
|
-
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
|
320
|
+
// Text input groups
|
321
|
+
// -------------------------
|
322
|
+
.input-group-addon {
|
323
|
+
.box-sizing(border-box);
|
324
|
+
padding: @padding-base-vertical @padding-base-horizontal;
|
325
|
+
font-size: @font-size-base;
|
326
|
+
font-weight: normal;
|
327
|
+
line-height: @line-height-base;
|
328
|
+
text-align: center;
|
329
|
+
background-color: @gray-lighter;
|
330
|
+
border: 1px solid @input-group-addon-border-color;
|
331
|
+
border-radius: @border-radius-base;
|
332
|
+
|
333
|
+
&.input-small {
|
334
|
+
padding: @padding-small-vertical @padding-small-horizontal;
|
335
|
+
font-size: @font-size-small;
|
336
|
+
border-radius: @border-radius-small;
|
531
337
|
}
|
532
|
-
|
533
|
-
|
338
|
+
&.input-large {
|
339
|
+
padding: @padding-large-vertical @padding-large-horizontal;
|
340
|
+
font-size: @font-size-large;
|
341
|
+
border-radius: @border-radius-large;
|
534
342
|
}
|
535
343
|
}
|
536
344
|
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
padding-right: 14px;
|
545
|
-
padding-right: 4px \9;
|
546
|
-
padding-left: 14px;
|
547
|
-
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
548
|
-
margin-bottom: 0; // Remove the default margin on all inputs
|
549
|
-
.border-radius(15px);
|
345
|
+
// Reset rounded corners
|
346
|
+
.input-group .form-control:first-child,
|
347
|
+
.input-group-addon:first-child,
|
348
|
+
.input-group-btn:first-child > .btn,
|
349
|
+
.input-group-btn:first-child > .dropdown-toggle,
|
350
|
+
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
|
351
|
+
.border-right-radius(0);
|
550
352
|
}
|
551
|
-
|
552
|
-
|
553
|
-
.form-search .input-append .search-query,
|
554
|
-
.form-search .input-prepend .search-query {
|
555
|
-
.border-radius(0); // Override due to specificity
|
353
|
+
.input-group-addon:first-child {
|
354
|
+
border-right: 0;
|
556
355
|
}
|
557
|
-
.
|
558
|
-
|
356
|
+
.input-group .form-control:last-child,
|
357
|
+
.input-group-addon:last-child,
|
358
|
+
.input-group-btn:last-child > .btn,
|
359
|
+
.input-group-btn:last-child > .dropdown-toggle,
|
360
|
+
.input-group-btn:first-child > .btn:not(:first-child) {
|
361
|
+
.border-left-radius(0);
|
559
362
|
}
|
560
|
-
.
|
561
|
-
|
363
|
+
.input-group-addon:last-child {
|
364
|
+
border-left: 0;
|
562
365
|
}
|
563
|
-
|
564
|
-
|
366
|
+
|
367
|
+
// Button input groups
|
368
|
+
// -------------------------
|
369
|
+
.input-group-btn {
|
370
|
+
position: relative;
|
371
|
+
white-space: nowrap;
|
565
372
|
}
|
566
|
-
.
|
567
|
-
|
373
|
+
.input-group-btn > .btn {
|
374
|
+
position: relative;
|
375
|
+
// Jankily prevent input button groups from wrapping
|
376
|
+
+ .btn {
|
377
|
+
margin-left: -4px;
|
378
|
+
}
|
379
|
+
// Bring the "active" button to the front
|
380
|
+
&:hover,
|
381
|
+
&:active {
|
382
|
+
z-index: 2;
|
383
|
+
}
|
568
384
|
}
|
569
385
|
|
570
386
|
|
387
|
+
// Inline forms
|
388
|
+
// --------------------------------------------------
|
571
389
|
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
// Common properties
|
577
|
-
// -----------------
|
578
|
-
|
579
|
-
.form-search,
|
580
|
-
.form-inline,
|
581
|
-
.form-horizontal {
|
582
|
-
input,
|
583
|
-
textarea,
|
584
|
-
select,
|
585
|
-
.help-inline,
|
586
|
-
.uneditable-input,
|
587
|
-
.input-prepend,
|
588
|
-
.input-append {
|
390
|
+
.form-inline {
|
391
|
+
.form-control,
|
392
|
+
.radio,
|
393
|
+
.checkbox {
|
589
394
|
display: inline-block;
|
590
|
-
.ie7-inline-block();
|
591
|
-
margin-bottom: 0;
|
592
|
-
vertical-align: middle;
|
593
395
|
}
|
594
|
-
|
595
|
-
.
|
596
|
-
|
396
|
+
.radio,
|
397
|
+
.checkbox {
|
398
|
+
margin-top: 0;
|
399
|
+
margin-bottom: 0;
|
597
400
|
}
|
598
401
|
}
|
599
|
-
.form-search label,
|
600
|
-
.form-inline label,
|
601
|
-
.form-search .btn-group,
|
602
|
-
.form-inline .btn-group {
|
603
|
-
display: inline-block;
|
604
|
-
}
|
605
|
-
// Remove margin for input-prepend/-append
|
606
|
-
.form-search .input-append,
|
607
|
-
.form-inline .input-append,
|
608
|
-
.form-search .input-prepend,
|
609
|
-
.form-inline .input-prepend {
|
610
|
-
margin-bottom: 0;
|
611
|
-
}
|
612
|
-
// Inline checkbox/radio labels (remove padding on left)
|
613
|
-
.form-search .radio,
|
614
|
-
.form-search .checkbox,
|
615
|
-
.form-inline .radio,
|
616
|
-
.form-inline .checkbox {
|
617
|
-
padding-left: 0;
|
618
|
-
margin-bottom: 0;
|
619
|
-
vertical-align: middle;
|
620
|
-
}
|
621
|
-
// Remove float and margin, set to inline-block
|
622
|
-
.form-search .radio input[type="radio"],
|
623
|
-
.form-search .checkbox input[type="checkbox"],
|
624
|
-
.form-inline .radio input[type="radio"],
|
625
|
-
.form-inline .checkbox input[type="checkbox"] {
|
626
|
-
float: left;
|
627
|
-
margin-right: 3px;
|
628
|
-
margin-left: 0;
|
629
|
-
}
|
630
402
|
|
631
403
|
|
632
|
-
//
|
633
|
-
|
634
|
-
|
635
|
-
}
|
404
|
+
// Horizontal forms
|
405
|
+
// --------------------------------------------------
|
406
|
+
// Horizontal forms are built on grid classes.
|
636
407
|
|
637
|
-
|
638
|
-
|
639
|
-
margin-top: @baseLineHeight;
|
640
|
-
-webkit-margin-top-collapse: separate;
|
408
|
+
.form-horizontal .control-label {
|
409
|
+
padding-top: 6px;
|
641
410
|
}
|
642
411
|
|
643
|
-
// Horizontal-specific styles
|
644
|
-
// --------------------------
|
645
|
-
|
646
412
|
.form-horizontal {
|
647
|
-
|
648
|
-
|
649
|
-
margin-bottom: @baseLineHeight;
|
650
|
-
.clearfix();
|
413
|
+
.form-group {
|
414
|
+
.make-row();
|
651
415
|
}
|
652
|
-
|
653
|
-
|
654
|
-
|
655
|
-
|
656
|
-
|
416
|
+
}
|
417
|
+
|
418
|
+
// Only right align form labels here when the columns stop stacking
|
419
|
+
@media (min-width: @screen-tablet) {
|
420
|
+
.form-horizontal .control-label {
|
657
421
|
text-align: right;
|
658
422
|
}
|
659
|
-
// Move over all input controls and content
|
660
|
-
.controls {
|
661
|
-
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
662
|
-
// don't inherit the margin of the parent, in this case .controls
|
663
|
-
*display: inline-block;
|
664
|
-
*padding-left: 20px;
|
665
|
-
margin-left: @horizontalComponentOffset;
|
666
|
-
*margin-left: 0;
|
667
|
-
&:first-child {
|
668
|
-
*padding-left: @horizontalComponentOffset;
|
669
|
-
}
|
670
|
-
}
|
671
|
-
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
672
|
-
.help-block {
|
673
|
-
margin-bottom: 0;
|
674
|
-
}
|
675
|
-
// And apply it only to .help-block instances that follow a form control
|
676
|
-
input,
|
677
|
-
select,
|
678
|
-
textarea,
|
679
|
-
.uneditable-input,
|
680
|
-
.input-prepend,
|
681
|
-
.input-append {
|
682
|
-
+ .help-block {
|
683
|
-
margin-top: @baseLineHeight / 2;
|
684
|
-
}
|
685
|
-
}
|
686
|
-
// Move over buttons in .form-actions to align with .controls
|
687
|
-
.form-actions {
|
688
|
-
padding-left: @horizontalComponentOffset;
|
689
|
-
}
|
690
423
|
}
|