bootstrap-sass 2.0.2 → 2.0.3
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.
Potentially problematic release.
This version of bootstrap-sass might be problematic. Click here for more details.
- data/README.md +26 -10
- data/lib/bootstrap-sass.rb +24 -13
- data/lib/bootstrap-sass/{compass_extensions.rb → compass_functions.rb} +0 -0
- data/lib/bootstrap-sass/engine.rb +0 -2
- data/lib/bootstrap-sass/{config/sass_extentions.rb → rails_functions.rb} +0 -0
- data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
- data/vendor/assets/javascripts/bootstrap-button.js +29 -33
- data/vendor/assets/javascripts/bootstrap-carousel.js +27 -19
- data/vendor/assets/javascripts/bootstrap-collapse.js +45 -26
- data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
- data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
- data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +43 -17
- data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
- data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
- data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
- data/vendor/assets/javascripts/bootstrap-typeahead.js +24 -10
- data/vendor/assets/stylesheets/_bootstrap-responsive.scss +100 -68
- data/vendor/assets/stylesheets/_bootstrap.scss +11 -2
- data/vendor/assets/stylesheets/bootstrap/_accordion.scss +5 -0
- data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +51 -31
- data/vendor/assets/stylesheets/bootstrap/_buttons.scss +15 -11
- data/vendor/assets/stylesheets/bootstrap/_close.scss +12 -1
- data/vendor/assets/stylesheets/bootstrap/_code.scss +4 -4
- data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +4 -4
- data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +16 -22
- data/vendor/assets/stylesheets/bootstrap/_forms.scss +58 -37
- data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +50 -0
- data/vendor/assets/stylesheets/bootstrap/_layouts.scss +1 -1
- data/vendor/assets/stylesheets/bootstrap/_mixins.scss +99 -73
- data/vendor/assets/stylesheets/bootstrap/_navbar.scss +61 -40
- data/vendor/assets/stylesheets/bootstrap/_navs.scss +27 -26
- data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +15 -6
- data/vendor/assets/stylesheets/bootstrap/_reset.scss +3 -3
- data/vendor/assets/stylesheets/bootstrap/_sprites.scss +25 -5
- data/vendor/assets/stylesheets/bootstrap/_tables.scss +17 -6
- data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +14 -0
- data/vendor/assets/stylesheets/bootstrap/_type.scss +7 -6
- data/vendor/assets/stylesheets/bootstrap/_variables.scss +52 -9
- metadata +10 -22
- data/vendor/assets/stylesheets/bootstrap/_badges.scss +0 -36
- data/vendor/assets/stylesheets/bootstrap/_labels.scss +0 -38
@@ -1,3 +1,13 @@
|
|
1
|
+
//
|
2
|
+
// Bootstrap v2.0.3
|
3
|
+
//
|
4
|
+
// Copyright 2012 Twitter, Inc
|
5
|
+
// Licensed under the Apache License v2.0
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
7
|
+
//
|
8
|
+
// Designed and built with all the love in the world @twitter by @mdo and @fat.
|
9
|
+
// Converted to Sass by @thomasmcdonald_, and distributed as bootstrap-sass
|
10
|
+
|
1
11
|
// Core variables and mixins
|
2
12
|
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
|
3
13
|
@import "bootstrap/mixins";
|
@@ -42,8 +52,7 @@
|
|
42
52
|
|
43
53
|
// Components: Misc
|
44
54
|
@import "bootstrap/thumbnails";
|
45
|
-
@import "bootstrap/labels";
|
46
|
-
@import "bootstrap/badges";
|
55
|
+
@import "bootstrap/labels-badges";
|
47
56
|
@import "bootstrap/progress-bars";
|
48
57
|
@import "bootstrap/accordion";
|
49
58
|
@import "bootstrap/carousel";
|
@@ -25,14 +25,14 @@
|
|
25
25
|
}
|
26
26
|
|
27
27
|
// Float them, remove border radius, then re-add to first and last elements
|
28
|
-
.btn-group .btn {
|
28
|
+
.btn-group > .btn {
|
29
29
|
position: relative;
|
30
30
|
float: left;
|
31
31
|
margin-left: -1px;
|
32
32
|
@include border-radius(0);
|
33
33
|
}
|
34
34
|
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
35
|
-
.btn-group .btn:first-child {
|
35
|
+
.btn-group > .btn:first-child {
|
36
36
|
margin-left: 0;
|
37
37
|
-webkit-border-top-left-radius: 4px;
|
38
38
|
-moz-border-radius-topleft: 4px;
|
@@ -41,7 +41,8 @@
|
|
41
41
|
-moz-border-radius-bottomleft: 4px;
|
42
42
|
border-bottom-left-radius: 4px;
|
43
43
|
}
|
44
|
-
.
|
44
|
+
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
|
45
|
+
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle {
|
45
46
|
-webkit-border-top-right-radius: 4px;
|
46
47
|
-moz-border-radius-topright: 4px;
|
47
48
|
border-top-right-radius: 4px;
|
@@ -50,7 +51,7 @@
|
|
50
51
|
border-bottom-right-radius: 4px;
|
51
52
|
}
|
52
53
|
// Reset corners for large buttons
|
53
|
-
.btn-group .btn.large:first-child {
|
54
|
+
.btn-group > .btn.large:first-child {
|
54
55
|
margin-left: 0;
|
55
56
|
-webkit-border-top-left-radius: 6px;
|
56
57
|
-moz-border-radius-topleft: 6px;
|
@@ -59,7 +60,7 @@
|
|
59
60
|
-moz-border-radius-bottomleft: 6px;
|
60
61
|
border-bottom-left-radius: 6px;
|
61
62
|
}
|
62
|
-
.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle {
|
63
|
+
.btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle {
|
63
64
|
-webkit-border-top-right-radius: 6px;
|
64
65
|
-moz-border-radius-topright: 6px;
|
65
66
|
border-top-right-radius: 6px;
|
@@ -69,7 +70,7 @@
|
|
69
70
|
}
|
70
71
|
|
71
72
|
// On hover/focus/active, bring the proper btn to front
|
72
|
-
.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active, .btn-group .btn.active {
|
73
|
+
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
|
73
74
|
z-index: 2;
|
74
75
|
}
|
75
76
|
|
@@ -84,48 +85,60 @@
|
|
84
85
|
// ----------------------
|
85
86
|
|
86
87
|
// Give the line between buttons some depth
|
87
|
-
.btn-group .dropdown-toggle {
|
88
|
+
.btn-group > .dropdown-toggle {
|
88
89
|
padding-left: 8px;
|
89
90
|
padding-right: 8px;
|
90
|
-
|
91
|
-
|
92
|
-
*padding-
|
93
|
-
*padding-bottom: 3px;
|
91
|
+
@include box-shadow(#{inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
|
92
|
+
*padding-top: 4px;
|
93
|
+
*padding-bottom: 4px;
|
94
94
|
}
|
95
|
-
.btn-group .btn-mini.dropdown-toggle {
|
95
|
+
.btn-group > .btn-mini.dropdown-toggle {
|
96
96
|
padding-left: 5px;
|
97
97
|
padding-right: 5px;
|
98
|
-
*padding-top: 1px;
|
99
|
-
*padding-bottom: 1px;
|
100
98
|
}
|
101
|
-
.btn-group .btn-small.dropdown-toggle {
|
99
|
+
.btn-group > .btn-small.dropdown-toggle {
|
102
100
|
*padding-top: 4px;
|
103
101
|
*padding-bottom: 4px;
|
104
102
|
}
|
105
|
-
.btn-group .btn-large.dropdown-toggle {
|
103
|
+
.btn-group > .btn-large.dropdown-toggle {
|
106
104
|
padding-left: 12px;
|
107
105
|
padding-right: 12px;
|
108
106
|
}
|
109
107
|
|
110
108
|
.btn-group.open {
|
111
|
-
// IE7's z-index only goes to the nearest positioned ancestor, which would
|
112
|
-
// make the menu appear below buttons that appeared later on the page
|
113
|
-
*z-index: $zindexDropdown;
|
114
|
-
|
115
|
-
// Reposition menu on open and round all corners
|
116
|
-
.dropdown-menu {
|
117
|
-
display: block;
|
118
|
-
margin-top: 1px;
|
119
|
-
@include border-radius(5px);
|
120
|
-
}
|
121
109
|
|
110
|
+
// The clickable button for toggling the menu
|
111
|
+
// Remove the gradient and set the same inset shadow as the :active state
|
122
112
|
.dropdown-toggle {
|
123
113
|
background-image: none;
|
124
|
-
|
125
|
-
|
114
|
+
@include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
|
115
|
+
}
|
116
|
+
|
117
|
+
// Keep the hover's background when dropdown is open
|
118
|
+
.btn.dropdown-toggle {
|
119
|
+
background-color: $btnBackgroundHighlight;
|
120
|
+
}
|
121
|
+
.btn-primary.dropdown-toggle {
|
122
|
+
background-color: $btnPrimaryBackgroundHighlight;
|
123
|
+
}
|
124
|
+
.btn-warning.dropdown-toggle {
|
125
|
+
background-color: $btnWarningBackgroundHighlight;
|
126
|
+
}
|
127
|
+
.btn-danger.dropdown-toggle {
|
128
|
+
background-color: $btnDangerBackgroundHighlight;
|
129
|
+
}
|
130
|
+
.btn-success.dropdown-toggle {
|
131
|
+
background-color: $btnSuccessBackgroundHighlight;
|
132
|
+
}
|
133
|
+
.btn-info.dropdown-toggle {
|
134
|
+
background-color: $btnInfoBackgroundHighlight;
|
135
|
+
}
|
136
|
+
.btn-inverse.dropdown-toggle {
|
137
|
+
background-color: $btnInverseBackgroundHighlight;
|
126
138
|
}
|
127
139
|
}
|
128
140
|
|
141
|
+
|
129
142
|
// Reposition the caret
|
130
143
|
.btn .caret {
|
131
144
|
margin-top: 7px;
|
@@ -143,10 +156,17 @@
|
|
143
156
|
}
|
144
157
|
.btn-large .caret {
|
145
158
|
margin-top: 6px;
|
146
|
-
border-left: 5px
|
147
|
-
border-right: 5px
|
148
|
-
border-top: 5px
|
159
|
+
border-left-width: 5px;
|
160
|
+
border-right-width: 5px;
|
161
|
+
border-top-width: 5px;
|
149
162
|
}
|
163
|
+
// Upside down carets for .dropup
|
164
|
+
.dropup .btn-large .caret {
|
165
|
+
border-bottom: 5px solid $black;
|
166
|
+
border-top: 0;
|
167
|
+
}
|
168
|
+
|
169
|
+
|
150
170
|
|
151
171
|
// Account for other colors
|
152
172
|
.btn-primary, .btn-warning, .btn-danger, .btn-info, .btn-success, .btn-inverse {
|
@@ -13,20 +13,19 @@
|
|
13
13
|
margin-bottom: 0; // For input.btn
|
14
14
|
font-size: $baseFontSize;
|
15
15
|
line-height: $baseLineHeight;
|
16
|
+
*line-height: 20px;
|
16
17
|
color: $grayDark;
|
17
18
|
text-align: center;
|
18
19
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
19
20
|
vertical-align: middle;
|
21
|
+
cursor: pointer;
|
20
22
|
@include buttonBackground($btnBackground, $btnBackgroundHighlight);
|
21
23
|
border: 1px solid $btnBorder;
|
24
|
+
*border: 0; // Remove the border to prevent IE7's black border on input:focus
|
22
25
|
border-bottom-color: darken($btnBorder, 10%);
|
23
26
|
@include border-radius(4px);
|
24
|
-
|
25
|
-
@include box-shadow(
|
26
|
-
cursor: pointer;
|
27
|
-
|
28
|
-
// Give IE7 some love
|
29
|
-
@include ie7-restore-left-whitespace();
|
27
|
+
@include ie7-restore-left-whitespace(); // Give IE7 some love
|
28
|
+
@include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
|
30
29
|
}
|
31
30
|
|
32
31
|
// Hover state
|
@@ -34,6 +33,7 @@
|
|
34
33
|
color: $grayDark;
|
35
34
|
text-decoration: none;
|
36
35
|
background-color: darken($white, 10%);
|
36
|
+
*background-color: darken($white, 15%); // Buttons in IE7 don't get borders, so darken on hover
|
37
37
|
background-position: 0 -15px;
|
38
38
|
|
39
39
|
// transition is only when going to hover, otherwise the background
|
@@ -48,19 +48,18 @@
|
|
48
48
|
|
49
49
|
// Active state
|
50
50
|
.btn.active, .btn:active {
|
51
|
-
background-image: none;
|
52
|
-
$shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
53
|
-
@include box-shadow($shadow);
|
54
51
|
background-color: darken($white, 10%);
|
55
52
|
background-color: darken($white, 15%) \9;
|
53
|
+
background-image: none;
|
56
54
|
outline: 0;
|
55
|
+
@include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
|
57
56
|
}
|
58
57
|
|
59
58
|
// Disabled state
|
60
59
|
.btn.disabled, .btn[disabled] {
|
61
60
|
cursor: default;
|
62
|
-
background-image: none;
|
63
61
|
background-color: darken($white, 10%);
|
62
|
+
background-image: none;
|
64
63
|
@include opacity(0.65);
|
65
64
|
@include box-shadow(none);
|
66
65
|
}
|
@@ -104,8 +103,8 @@
|
|
104
103
|
// Set text color
|
105
104
|
// -------------------------
|
106
105
|
.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover {
|
107
|
-
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
108
106
|
color: $white;
|
107
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
109
108
|
}
|
110
109
|
// Provide *some* extra contrast for those who can get it
|
111
110
|
.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active {
|
@@ -114,6 +113,11 @@
|
|
114
113
|
|
115
114
|
// Set the backgrounds
|
116
115
|
// -------------------------
|
116
|
+
.btn {
|
117
|
+
// reset here as of 2.0.3 due to Recess property order
|
118
|
+
border-color: #ccc;
|
119
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
|
120
|
+
}
|
117
121
|
.btn-primary {
|
118
122
|
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
|
119
123
|
}
|
@@ -12,7 +12,18 @@
|
|
12
12
|
&:hover {
|
13
13
|
color: $black;
|
14
14
|
text-decoration: none;
|
15
|
-
@include opacity(0.4);
|
16
15
|
cursor: pointer;
|
16
|
+
@include opacity(0.4);
|
17
17
|
}
|
18
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
|
+
}
|
@@ -26,14 +26,14 @@ pre {
|
|
26
26
|
margin: 0 0 $baseLineHeight / 2;
|
27
27
|
font-size: $baseFontSize * .925; // 13px to 12px
|
28
28
|
line-height: $baseLineHeight;
|
29
|
+
word-break: break-all;
|
30
|
+
word-wrap: break-word;
|
31
|
+
white-space: pre;
|
32
|
+
white-space: pre-wrap;
|
29
33
|
background-color: #f5f5f5;
|
30
34
|
border: 1px solid #ccc; // fallback for IE7-8
|
31
35
|
border: 1px solid rgba(0,0,0,.15);
|
32
36
|
@include border-radius(4px);
|
33
|
-
white-space: pre;
|
34
|
-
white-space: pre-wrap;
|
35
|
-
word-break: break-all;
|
36
|
-
word-wrap: break-word;
|
37
37
|
|
38
38
|
// Make prettyprint styles more spaced out for readability
|
39
39
|
&.prettyprint {
|
@@ -2,18 +2,18 @@
|
|
2
2
|
// --------------------
|
3
3
|
|
4
4
|
.fade {
|
5
|
+
@include opacity(0);
|
5
6
|
@include transition(opacity .15s linear);
|
6
|
-
opacity: 0;
|
7
7
|
&.in {
|
8
|
-
opacity
|
8
|
+
@include opacity(1);
|
9
9
|
}
|
10
10
|
}
|
11
11
|
|
12
12
|
.collapse {
|
13
|
-
@include transition(height .35s ease);
|
14
13
|
position:relative;
|
15
|
-
overflow:hidden;
|
16
14
|
height: 0;
|
15
|
+
overflow:hidden;
|
16
|
+
@include transition(height .35s ease);
|
17
17
|
&.in {
|
18
18
|
height: auto;
|
19
19
|
}
|
@@ -2,7 +2,7 @@
|
|
2
2
|
// --------------
|
3
3
|
|
4
4
|
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
5
|
-
.dropdown {
|
5
|
+
.dropup, .dropdown {
|
6
6
|
position: relative;
|
7
7
|
}
|
8
8
|
.dropdown-toggle {
|
@@ -20,11 +20,11 @@
|
|
20
20
|
width: 0;
|
21
21
|
height: 0;
|
22
22
|
vertical-align: top;
|
23
|
-
border-left: 4px solid transparent;
|
24
|
-
border-right: 4px solid transparent;
|
25
23
|
border-top: 4px solid $black;
|
26
|
-
|
24
|
+
border-right: 4px solid transparent;
|
25
|
+
border-left: 4px solid transparent;
|
27
26
|
content: "";
|
27
|
+
@include opacity(0.3);
|
28
28
|
}
|
29
29
|
|
30
30
|
// Place the caret
|
@@ -32,7 +32,7 @@
|
|
32
32
|
margin-top: 8px;
|
33
33
|
margin-left: 2px;
|
34
34
|
}
|
35
|
-
.dropdown:hover .caret, .open
|
35
|
+
.dropdown:hover .caret, .open .caret {
|
36
36
|
@include opacity(1);
|
37
37
|
}
|
38
38
|
|
@@ -43,24 +43,22 @@
|
|
43
43
|
top: 100%;
|
44
44
|
left: 0;
|
45
45
|
z-index: $zindexDropdown;
|
46
|
-
float: left;
|
47
46
|
display: none; // none by default, but block on "open" of the menu
|
47
|
+
float: left;
|
48
48
|
min-width: 160px;
|
49
49
|
padding: 4px 0;
|
50
|
-
margin: 0; // override default ul
|
50
|
+
margin: 1px 0 0; // override default ul
|
51
51
|
list-style: none;
|
52
52
|
background-color: $dropdownBackground;
|
53
|
-
border
|
54
|
-
border
|
55
|
-
border-
|
56
|
-
border-width:
|
57
|
-
@include border-radius(
|
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
58
|
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
59
59
|
-webkit-background-clip: padding-box;
|
60
60
|
-moz-background-clip: padding;
|
61
61
|
background-clip: padding-box;
|
62
|
-
*border-right-width: 2px;
|
63
|
-
*border-bottom-width: 2px;
|
64
62
|
|
65
63
|
// Aligns the dropdown menu to right
|
66
64
|
&.pull-right {
|
@@ -95,25 +93,21 @@
|
|
95
93
|
|
96
94
|
// Open state for the dropdown
|
97
95
|
// ---------------------------
|
98
|
-
.
|
96
|
+
.open {
|
99
97
|
// IE7's z-index only goes to the nearest positioned ancestor, which would
|
100
98
|
// make the menu appear below buttons that appeared later on the page
|
101
99
|
*z-index: $zindexDropdown;
|
102
100
|
|
103
|
-
.dropdown-toggle {
|
104
|
-
color: $white;
|
105
|
-
background: #ccc;
|
106
|
-
background: rgba(0,0,0,.3);
|
107
|
-
}
|
108
101
|
.dropdown-menu {
|
109
102
|
display: block;
|
110
103
|
}
|
111
104
|
}
|
112
105
|
|
113
106
|
// Right aligned dropdowns
|
107
|
+
// ---------------------------
|
114
108
|
.pull-right .dropdown-menu {
|
115
|
-
left: auto;
|
116
109
|
right: 0;
|
110
|
+
left: auto;
|
117
111
|
}
|
118
112
|
|
119
113
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
@@ -140,4 +134,4 @@
|
|
140
134
|
.typeahead {
|
141
135
|
margin-top: 2px; // give it some space to breathe
|
142
136
|
@include border-radius(4px);
|
143
|
-
}
|
137
|
+
}
|
@@ -40,7 +40,6 @@ legend {
|
|
40
40
|
label, input, button, select, textarea {
|
41
41
|
@include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
|
42
42
|
}
|
43
|
-
|
44
43
|
input, button, select, textarea {
|
45
44
|
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
46
45
|
}
|
@@ -62,8 +61,9 @@ input, textarea, select, .uneditable-input {
|
|
62
61
|
font-size: $baseFontSize;
|
63
62
|
line-height: $baseLineHeight;
|
64
63
|
color: $gray;
|
64
|
+
background-color: $inputBackground;
|
65
65
|
border: 1px solid $inputBorder;
|
66
|
-
@include border-radius(
|
66
|
+
@include border-radius($inputBorderRadius);
|
67
67
|
}
|
68
68
|
.uneditable-textarea {
|
69
69
|
width: auto;
|
@@ -84,8 +84,9 @@ input[type="image"], input[type="checkbox"], input[type="radio"] {
|
|
84
84
|
*margin-top: 0; /* IE7 */
|
85
85
|
line-height: normal;
|
86
86
|
cursor: pointer;
|
87
|
-
|
87
|
+
background-color: transparent;
|
88
88
|
border: 0 \9; /* IE9 and down */
|
89
|
+
@include border-radius(0);
|
89
90
|
}
|
90
91
|
input[type="image"] {
|
91
92
|
border: 0;
|
@@ -96,9 +97,9 @@ input[type="file"] {
|
|
96
97
|
width: auto;
|
97
98
|
padding: initial;
|
98
99
|
line-height: initial;
|
99
|
-
border: initial;
|
100
100
|
background-color: $inputBackground;
|
101
101
|
background-color: initial;
|
102
|
+
border: initial;
|
102
103
|
@include box-shadow(none);
|
103
104
|
}
|
104
105
|
|
@@ -153,6 +154,7 @@ input[type="hidden"] {
|
|
153
154
|
|
154
155
|
// Indent the labels to position radios/checkboxes as hanging
|
155
156
|
.radio, .checkbox {
|
157
|
+
min-height: 18px; // clear the floating input if there is no label text
|
156
158
|
padding-left: 18px;
|
157
159
|
}
|
158
160
|
.radio input[type="radio"], .checkbox input[type="checkbox"] {
|
@@ -184,19 +186,17 @@ input[type="hidden"] {
|
|
184
186
|
|
185
187
|
input, textarea {
|
186
188
|
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
187
|
-
|
188
|
-
@include transition($transition);
|
189
|
+
@include transition(#{border linear .2s, box-shadow linear .2s});
|
189
190
|
}
|
190
191
|
input:focus, textarea:focus {
|
191
192
|
border-color: rgba(82,168,236,.8);
|
192
|
-
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
|
193
|
-
@include box-shadow($shadow);
|
194
193
|
outline: 0;
|
195
194
|
outline: thin dotted \9; /* IE6-9 */
|
195
|
+
@include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)});
|
196
196
|
}
|
197
197
|
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus {
|
198
|
-
@include box-shadow(none); // override for file inputs
|
199
198
|
@include tab-focus();
|
199
|
+
@include box-shadow(none); // override for file inputs
|
200
200
|
}
|
201
201
|
|
202
202
|
|
@@ -213,7 +213,9 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
|
|
213
213
|
.input-xxlarge { width: 530px; }
|
214
214
|
|
215
215
|
// Grid style input sizes
|
216
|
-
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input
|
216
|
+
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
|
217
|
+
// Redeclare since the fluid row class is more specific
|
218
|
+
.row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
|
217
219
|
float: none;
|
218
220
|
margin-left: 0;
|
219
221
|
}
|
@@ -233,9 +235,13 @@ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditabl
|
|
233
235
|
|
234
236
|
// Disabled and read-only inputs
|
235
237
|
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
|
238
|
+
cursor: not-allowed;
|
236
239
|
background-color: $inputDisabledBackground;
|
237
240
|
border-color: #ddd;
|
238
|
-
|
241
|
+
}
|
242
|
+
// Explicitly reset the colors here
|
243
|
+
input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
|
244
|
+
background-color: transparent;
|
239
245
|
}
|
240
246
|
|
241
247
|
|
@@ -277,18 +283,19 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
277
283
|
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
|
278
284
|
margin-top: $baseLineHeight;
|
279
285
|
margin-bottom: $baseLineHeight;
|
280
|
-
background-color: $
|
286
|
+
background-color: $formActionsBackground;
|
281
287
|
border-top: 1px solid #ddd;
|
282
288
|
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
|
283
289
|
}
|
284
290
|
|
285
291
|
// For text that needs to appear as an input but should not be an input
|
286
292
|
.uneditable-input {
|
287
|
-
|
293
|
+
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
294
|
+
white-space: nowrap;
|
295
|
+
cursor: not-allowed;
|
288
296
|
background-color: $inputBackground;
|
289
297
|
border-color: #eee;
|
290
298
|
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
291
|
-
cursor: not-allowed;
|
292
299
|
}
|
293
300
|
|
294
301
|
// Placeholder text gets special styles; can't be bundled together though for some reason
|
@@ -300,7 +307,7 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
300
307
|
// ---------
|
301
308
|
|
302
309
|
.help-block, .help-inline {
|
303
|
-
color: $gray; // lighten the text for
|
310
|
+
color: $gray; // lighten the text some for contrast
|
304
311
|
}
|
305
312
|
|
306
313
|
.help-block {
|
@@ -324,22 +331,24 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
324
331
|
.input-prepend, .input-append {
|
325
332
|
margin-bottom: 5px;
|
326
333
|
input, select, .uneditable-input {
|
334
|
+
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
|
335
|
+
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
327
336
|
*margin-left: 0;
|
328
|
-
|
337
|
+
vertical-align: middle;
|
338
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
339
|
+
// Make input on top when focused so blue border and shadow always show
|
329
340
|
&:focus {
|
330
|
-
position: relative;
|
331
341
|
z-index: 2;
|
332
342
|
}
|
333
343
|
}
|
334
344
|
.uneditable-input {
|
335
|
-
border-left-color: #
|
336
|
-
border-right-color: #ccc;
|
345
|
+
border-left-color: #ccc;
|
337
346
|
}
|
338
347
|
.add-on {
|
339
348
|
display: inline-block;
|
340
349
|
width: auto;
|
341
|
-
min-width: 16px;
|
342
350
|
height: $baseLineHeight;
|
351
|
+
min-width: 16px;
|
343
352
|
padding: 4px 5px;
|
344
353
|
font-weight: normal;
|
345
354
|
line-height: $baseLineHeight;
|
@@ -350,7 +359,8 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
350
359
|
border: 1px solid #ccc;
|
351
360
|
}
|
352
361
|
.add-on, .btn {
|
353
|
-
|
362
|
+
margin-left: -1px;
|
363
|
+
@include border-radius(0);
|
354
364
|
}
|
355
365
|
.active {
|
356
366
|
background-color: lighten($green, 30);
|
@@ -361,17 +371,20 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
361
371
|
.add-on, .btn {
|
362
372
|
margin-right: -1px;
|
363
373
|
}
|
374
|
+
.add-on:first-child, .btn:first-child {
|
375
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
376
|
+
}
|
364
377
|
}
|
365
378
|
.input-append {
|
366
379
|
input, select, .uneditable-input {
|
367
|
-
@include border-radius(
|
380
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
368
381
|
}
|
369
382
|
.uneditable-input {
|
370
383
|
border-right-color: #ccc;
|
384
|
+
border-left-color: #eee;
|
371
385
|
}
|
372
|
-
.add-on, .btn {
|
373
|
-
|
374
|
-
@include border-radius(0 3px 3px 0);
|
386
|
+
.add-on:last-child, .btn:last-child {
|
387
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
375
388
|
}
|
376
389
|
}
|
377
390
|
// Remove all border-radius for inputs with both prepend and append
|
@@ -381,11 +394,11 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
381
394
|
}
|
382
395
|
.add-on:first-child, .btn:first-child {
|
383
396
|
margin-right: -1px;
|
384
|
-
@include border-radius(
|
397
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
385
398
|
}
|
386
399
|
.add-on:last-child, .btn:last-child {
|
387
400
|
margin-left: -1px;
|
388
|
-
@include border-radius(0
|
401
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
389
402
|
}
|
390
403
|
}
|
391
404
|
|
@@ -395,8 +408,10 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
395
408
|
// -----------
|
396
409
|
|
397
410
|
.search-query {
|
398
|
-
padding-left: 14px;
|
399
411
|
padding-right: 14px;
|
412
|
+
padding-right: 4px \9;
|
413
|
+
padding-left: 14px;
|
414
|
+
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
400
415
|
margin-bottom: 0; // remove the default margin on all inputs
|
401
416
|
@include border-radius(14px);
|
402
417
|
}
|
@@ -412,10 +427,13 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
412
427
|
.form-search, .form-inline, .form-horizontal {
|
413
428
|
input, textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
|
414
429
|
display: inline-block;
|
430
|
+
@include ie7-inline-block();
|
415
431
|
margin-bottom: 0;
|
416
432
|
}
|
417
|
-
// Re-hide
|
418
|
-
.hide {
|
433
|
+
// Re-hide hidden elements due to specifity
|
434
|
+
.hide {
|
435
|
+
display: none;
|
436
|
+
}
|
419
437
|
}
|
420
438
|
.form-search label, .form-inline label {
|
421
439
|
display: inline-block;
|
@@ -433,18 +451,17 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
433
451
|
// Remove float and margin, set to inline-block
|
434
452
|
.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
|
435
453
|
float: left;
|
436
|
-
margin-left: 0;
|
437
454
|
margin-right: 3px;
|
455
|
+
margin-left: 0;
|
438
456
|
}
|
439
457
|
|
440
458
|
|
441
|
-
|
442
459
|
// Margin to space out fieldsets
|
443
460
|
.control-group {
|
444
461
|
margin-bottom: $baseLineHeight / 2;
|
445
462
|
}
|
446
463
|
|
447
|
-
// Legend collapses margin, so next
|
464
|
+
// Legend collapses margin, so next element is responsible for spacing
|
448
465
|
legend + .control-group {
|
449
466
|
margin-top: $baseLineHeight;
|
450
467
|
-webkit-margin-top-collapse: separate;
|
@@ -468,11 +485,15 @@ legend + .control-group {
|
|
468
485
|
}
|
469
486
|
// Move over all input controls and content
|
470
487
|
.controls {
|
471
|
-
|
472
|
-
|
488
|
+
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
489
|
+
// don't inherit the margin of the parent, in this case .controls
|
473
490
|
*display: inline-block;
|
474
|
-
*margin-left: 0;
|
475
491
|
*padding-left: 20px;
|
492
|
+
margin-left: 160px;
|
493
|
+
*margin-left: 0;
|
494
|
+
&:first-child {
|
495
|
+
*padding-left: 160px;
|
496
|
+
}
|
476
497
|
}
|
477
498
|
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
478
499
|
.help-block {
|
@@ -483,4 +504,4 @@ legend + .control-group {
|
|
483
504
|
.form-actions {
|
484
505
|
padding-left: 160px;
|
485
506
|
}
|
486
|
-
}
|
507
|
+
}
|