bootstrap-sass 2.0.2 → 2.0.3
Sign up to get free protection for your applications and to get access to all the features.
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
|
+
}
|