bootstrap-sass 2.0.4.2 → 2.1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of bootstrap-sass might be problematic. Click here for more details.
- data/README.md +3 -6
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/bootstrap-affix.js +104 -0
- data/vendor/assets/javascripts/bootstrap-alert.js +1 -1
- data/vendor/assets/javascripts/bootstrap-button.js +1 -1
- data/vendor/assets/javascripts/bootstrap-carousel.js +12 -5
- data/vendor/assets/javascripts/bootstrap-collapse.js +4 -3
- data/vendor/assets/javascripts/bootstrap-dropdown.js +66 -16
- data/vendor/assets/javascripts/bootstrap-modal.js +95 -74
- data/vendor/assets/javascripts/bootstrap-popover.js +9 -4
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +9 -9
- data/vendor/assets/javascripts/bootstrap-tab.js +2 -2
- data/vendor/assets/javascripts/bootstrap-tooltip.js +15 -15
- data/vendor/assets/javascripts/bootstrap-transition.js +2 -3
- data/vendor/assets/javascripts/bootstrap-typeahead.js +51 -36
- data/vendor/assets/javascripts/bootstrap.js +1 -0
- data/vendor/assets/stylesheets/_bootstrap-responsive.scss +15 -8
- data/vendor/assets/stylesheets/_bootstrap.scss +2 -2
- data/vendor/assets/stylesheets/bootstrap/_accordion.scss +3 -2
- data/vendor/assets/stylesheets/bootstrap/_alerts.scss +19 -10
- data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +11 -11
- data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +94 -28
- data/vendor/assets/stylesheets/bootstrap/_buttons.scss +94 -54
- data/vendor/assets/stylesheets/bootstrap/_carousel.scss +22 -7
- data/vendor/assets/stylesheets/bootstrap/_close.scss +5 -3
- data/vendor/assets/stylesheets/bootstrap/_code.scss +8 -6
- data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +7 -4
- data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +90 -17
- data/vendor/assets/stylesheets/bootstrap/_forms.scss +243 -90
- data/vendor/assets/stylesheets/bootstrap/_grid.scss +17 -2
- data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +4 -2
- data/vendor/assets/stylesheets/bootstrap/_labels-badges.scss +25 -5
- data/vendor/assets/stylesheets/bootstrap/_layouts.scss +1 -2
- data/vendor/assets/stylesheets/bootstrap/_mixins.scss +143 -134
- data/vendor/assets/stylesheets/bootstrap/_modals.scss +13 -6
- data/vendor/assets/stylesheets/bootstrap/_navbar.scss +263 -141
- data/vendor/assets/stylesheets/bootstrap/_navs.scss +75 -31
- data/vendor/assets/stylesheets/bootstrap/_pager.scss +7 -5
- data/vendor/assets/stylesheets/bootstrap/_pagination.scss +22 -11
- data/vendor/assets/stylesheets/bootstrap/_popovers.scss +101 -33
- data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +23 -19
- data/vendor/assets/stylesheets/bootstrap/_reset.scss +35 -11
- data/vendor/assets/stylesheets/bootstrap/_responsive-1200px-min.scss +9 -7
- data/vendor/assets/stylesheets/bootstrap/_responsive-767px-max.scss +103 -72
- data/vendor/assets/stylesheets/bootstrap/_responsive-768px-979px.scss +8 -5
- data/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss +26 -9
- data/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss +17 -15
- data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +26 -4
- data/vendor/assets/stylesheets/bootstrap/_sprites.scss +19 -9
- data/vendor/assets/stylesheets/bootstrap/_tables.scss +94 -23
- data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +10 -7
- data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +47 -12
- data/vendor/assets/stylesheets/bootstrap/_type.scss +71 -89
- data/vendor/assets/stylesheets/bootstrap/_utilities.scss +9 -2
- data/vendor/assets/stylesheets/bootstrap/_variables.scss +108 -68
- data/vendor/assets/stylesheets/bootstrap/_wells.scss +8 -6
- metadata +3 -2
@@ -1,5 +1,7 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
//
|
2
|
+
// Carousel
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
3
5
|
|
4
6
|
.carousel {
|
5
7
|
position: relative;
|
@@ -27,13 +29,16 @@
|
|
27
29
|
line-height: 1;
|
28
30
|
}
|
29
31
|
|
30
|
-
.active,
|
32
|
+
.active,
|
33
|
+
.next,
|
34
|
+
.prev { display: block; }
|
31
35
|
|
32
36
|
.active {
|
33
37
|
left: 0;
|
34
38
|
}
|
35
39
|
|
36
|
-
.next,
|
40
|
+
.next,
|
41
|
+
.prev {
|
37
42
|
position: absolute;
|
38
43
|
top: 0;
|
39
44
|
width: 100%;
|
@@ -45,7 +50,8 @@
|
|
45
50
|
.prev {
|
46
51
|
left: -100%;
|
47
52
|
}
|
48
|
-
.next.left,
|
53
|
+
.next.left,
|
54
|
+
.prev.right {
|
49
55
|
left: 0;
|
50
56
|
}
|
51
57
|
|
@@ -99,6 +105,7 @@
|
|
99
105
|
}
|
100
106
|
}
|
101
107
|
|
108
|
+
|
102
109
|
// Caption for text below images
|
103
110
|
// -----------------------------
|
104
111
|
|
@@ -107,10 +114,18 @@
|
|
107
114
|
left: 0;
|
108
115
|
right: 0;
|
109
116
|
bottom: 0;
|
110
|
-
padding:
|
117
|
+
padding: 15px;
|
111
118
|
background: $grayDark;
|
112
119
|
background: rgba(0,0,0,.75);
|
113
120
|
}
|
114
|
-
.carousel-caption h4,
|
121
|
+
.carousel-caption h4,
|
122
|
+
.carousel-caption p {
|
115
123
|
color: $white;
|
124
|
+
line-height: $baseLineHeight;
|
125
|
+
}
|
126
|
+
.carousel-caption h4 {
|
127
|
+
margin: 0 0 5px;
|
116
128
|
}
|
129
|
+
.carousel-caption p {
|
130
|
+
margin-bottom: 0;
|
131
|
+
}
|
@@ -1,5 +1,7 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
//
|
2
|
+
// Close icons
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
3
5
|
|
4
6
|
.close {
|
5
7
|
float: right;
|
@@ -23,7 +25,7 @@
|
|
23
25
|
button.close {
|
24
26
|
padding: 0;
|
25
27
|
cursor: pointer;
|
26
|
-
background
|
28
|
+
background: transparent;
|
27
29
|
border: 0;
|
28
30
|
-webkit-appearance: none;
|
29
31
|
}
|
@@ -1,12 +1,14 @@
|
|
1
|
-
//
|
2
|
-
// Code
|
3
|
-
//
|
1
|
+
//
|
2
|
+
// Code (inline and blocK)
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
4
5
|
|
5
6
|
// Inline and block code styles
|
6
|
-
code,
|
7
|
+
code,
|
8
|
+
pre {
|
7
9
|
padding: 0 3px 2px;
|
8
10
|
@include font-family-monospace();
|
9
|
-
font-size: $baseFontSize -
|
11
|
+
font-size: $baseFontSize - 2;
|
10
12
|
color: $grayDark;
|
11
13
|
@include border-radius(3px);
|
12
14
|
}
|
@@ -24,7 +26,7 @@ pre {
|
|
24
26
|
display: block;
|
25
27
|
padding: ($baseLineHeight - 1) / 2;
|
26
28
|
margin: 0 0 $baseLineHeight / 2;
|
27
|
-
font-size: $baseFontSize
|
29
|
+
font-size: $baseFontSize - 1; // 14px to 13px
|
28
30
|
line-height: $baseLineHeight;
|
29
31
|
word-break: break-all;
|
30
32
|
word-wrap: break-word;
|
@@ -1,5 +1,7 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
//
|
2
|
+
// Component animations
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
3
5
|
|
4
6
|
.fade {
|
5
7
|
opacity: 0;
|
@@ -10,9 +12,10 @@
|
|
10
12
|
}
|
11
13
|
|
12
14
|
.collapse {
|
13
|
-
position:relative;
|
15
|
+
position: relative;
|
14
16
|
height: 0;
|
15
|
-
overflow:hidden;
|
17
|
+
overflow: hidden;
|
18
|
+
overflow: visible \9;
|
16
19
|
@include transition(height .35s ease);
|
17
20
|
&.in {
|
18
21
|
height: auto;
|
@@ -1,15 +1,19 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
//
|
2
|
+
// Dropdown menus
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
3
5
|
|
4
6
|
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
5
|
-
.dropup,
|
7
|
+
.dropup,
|
8
|
+
.dropdown {
|
6
9
|
position: relative;
|
7
10
|
}
|
8
11
|
.dropdown-toggle {
|
9
12
|
// The caret makes the toggle a bit too tall in IE7
|
10
13
|
*margin-bottom: -3px;
|
11
14
|
}
|
12
|
-
.dropdown-toggle:active,
|
15
|
+
.dropdown-toggle:active,
|
16
|
+
.open .dropdown-toggle {
|
13
17
|
outline: 0;
|
14
18
|
}
|
15
19
|
|
@@ -24,7 +28,6 @@
|
|
24
28
|
border-right: 4px solid transparent;
|
25
29
|
border-left: 4px solid transparent;
|
26
30
|
content: "";
|
27
|
-
@include opacity(0.3);
|
28
31
|
}
|
29
32
|
|
30
33
|
// Place the caret
|
@@ -32,9 +35,6 @@
|
|
32
35
|
margin-top: 8px;
|
33
36
|
margin-left: 2px;
|
34
37
|
}
|
35
|
-
.dropdown:hover .caret, .open .caret {
|
36
|
-
@include opacity(1);
|
37
|
-
}
|
38
38
|
|
39
39
|
// The dropdown menu (ul)
|
40
40
|
// ----------------------
|
@@ -46,15 +46,15 @@
|
|
46
46
|
display: none; // none by default, but block on "open" of the menu
|
47
47
|
float: left;
|
48
48
|
min-width: 160px;
|
49
|
-
padding:
|
50
|
-
margin:
|
49
|
+
padding: 5px 0;
|
50
|
+
margin: 2px 0 0; // override default ul
|
51
51
|
list-style: none;
|
52
52
|
background-color: $dropdownBackground;
|
53
|
-
border: 1px solid #ccc;
|
54
|
-
border: 1px solid
|
53
|
+
border: 1px solid #ccc; // Fallback for IE7-8
|
54
|
+
border: 1px solid $dropdownBorder;
|
55
55
|
*border-right-width: 2px;
|
56
56
|
*border-bottom-width: 2px;
|
57
|
-
@include border-radius(
|
57
|
+
@include border-radius(6px);
|
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;
|
@@ -74,7 +74,7 @@
|
|
74
74
|
// Links within the dropdown menu
|
75
75
|
a {
|
76
76
|
display: block;
|
77
|
-
padding: 3px
|
77
|
+
padding: 3px 20px;
|
78
78
|
clear: both;
|
79
79
|
font-weight: normal;
|
80
80
|
line-height: $baseLineHeight;
|
@@ -85,10 +85,38 @@
|
|
85
85
|
|
86
86
|
// Hover state
|
87
87
|
// -----------
|
88
|
-
.dropdown-menu li > a:hover,
|
89
|
-
|
88
|
+
.dropdown-menu li > a:hover,
|
89
|
+
.dropdown-menu li > a:focus,
|
90
|
+
.dropdown-submenu:hover > a {
|
90
91
|
text-decoration: none;
|
92
|
+
color: $dropdownLinkColorHover;
|
91
93
|
background-color: $dropdownLinkBackgroundHover;
|
94
|
+
@include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
|
95
|
+
}
|
96
|
+
|
97
|
+
// Active state
|
98
|
+
// ------------
|
99
|
+
.dropdown-menu .active > a,
|
100
|
+
.dropdown-menu .active > a:hover {
|
101
|
+
color: $dropdownLinkColorHover;
|
102
|
+
text-decoration: none;
|
103
|
+
outline: 0;
|
104
|
+
background-color: $dropdownLinkBackgroundActive;
|
105
|
+
@include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
|
106
|
+
}
|
107
|
+
|
108
|
+
// Disabled state
|
109
|
+
// --------------
|
110
|
+
// Gray out text and ensure the hover state remains gray
|
111
|
+
.dropdown-menu .disabled > a,
|
112
|
+
.dropdown-menu .disabled > a:hover {
|
113
|
+
color: $grayLight;
|
114
|
+
}
|
115
|
+
// Nuke hover effects
|
116
|
+
.dropdown-menu .disabled > a:hover {
|
117
|
+
text-decoration: none;
|
118
|
+
background-color: transparent;
|
119
|
+
cursor: default;
|
92
120
|
}
|
93
121
|
|
94
122
|
// Open state for the dropdown
|
@@ -114,7 +142,8 @@
|
|
114
142
|
// ------------------------------------------------------
|
115
143
|
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
116
144
|
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
117
|
-
.dropup,
|
145
|
+
.dropup,
|
146
|
+
.navbar-fixed-bottom .dropdown {
|
118
147
|
// Reverse the caret
|
119
148
|
.caret {
|
120
149
|
border-top: 0;
|
@@ -129,6 +158,50 @@
|
|
129
158
|
}
|
130
159
|
}
|
131
160
|
|
161
|
+
// Sub menus
|
162
|
+
// ---------------------------
|
163
|
+
.dropdown-submenu {
|
164
|
+
position: relative;
|
165
|
+
}
|
166
|
+
.dropdown-submenu > .dropdown-menu {
|
167
|
+
top: 0;
|
168
|
+
left: 100%;
|
169
|
+
margin-top: -6px;
|
170
|
+
margin-left: -1px;
|
171
|
+
-webkit-border-radius: 0 6px 6px 6px;
|
172
|
+
-moz-border-radius: 0 6px 6px 6px;
|
173
|
+
border-radius: 0 6px 6px 6px;
|
174
|
+
}
|
175
|
+
.dropdown-submenu:hover .dropdown-menu {
|
176
|
+
display: block;
|
177
|
+
}
|
178
|
+
|
179
|
+
.dropdown-submenu > a:after {
|
180
|
+
display: block;
|
181
|
+
content: " ";
|
182
|
+
float: right;
|
183
|
+
width: 0;
|
184
|
+
height: 0;
|
185
|
+
border-color: transparent;
|
186
|
+
border-style: solid;
|
187
|
+
border-width: 5px 0 5px 5px;
|
188
|
+
border-left-color: darken($dropdownBackground, 20%);
|
189
|
+
margin-top: 5px;
|
190
|
+
margin-right: -10px;
|
191
|
+
}
|
192
|
+
.dropdown-submenu:hover > a:after {
|
193
|
+
border-left-color: $dropdownLinkColorHover;
|
194
|
+
}
|
195
|
+
|
196
|
+
|
197
|
+
// Tweak nav headers
|
198
|
+
// -----------------
|
199
|
+
// Increase padding from 15px to 20px on sides
|
200
|
+
.dropdown .dropdown-menu .nav-header {
|
201
|
+
padding-left: 20px;
|
202
|
+
padding-right: 20px;
|
203
|
+
}
|
204
|
+
|
132
205
|
// Typeahead
|
133
206
|
// ---------
|
134
207
|
.typeahead {
|
@@ -1,6 +1,6 @@
|
|
1
|
-
//
|
2
|
-
//
|
3
|
-
//
|
1
|
+
//
|
2
|
+
// Forms
|
3
|
+
// --------------------------------------------------
|
4
4
|
|
5
5
|
|
6
6
|
// GENERAL STYLES
|
@@ -22,7 +22,7 @@ legend {
|
|
22
22
|
display: block;
|
23
23
|
width: 100%;
|
24
24
|
padding: 0;
|
25
|
-
margin-bottom: $baseLineHeight
|
25
|
+
margin-bottom: $baseLineHeight;
|
26
26
|
font-size: $baseFontSize * 1.5;
|
27
27
|
line-height: $baseLineHeight * 2;
|
28
28
|
color: $grayDark;
|
@@ -37,10 +37,17 @@ legend {
|
|
37
37
|
}
|
38
38
|
|
39
39
|
// Set font for forms
|
40
|
-
label,
|
41
|
-
|
40
|
+
label,
|
41
|
+
input,
|
42
|
+
button,
|
43
|
+
select,
|
44
|
+
textarea {
|
45
|
+
@include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here
|
42
46
|
}
|
43
|
-
input,
|
47
|
+
input,
|
48
|
+
button,
|
49
|
+
select,
|
50
|
+
textarea {
|
44
51
|
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
45
52
|
}
|
46
53
|
|
@@ -54,21 +61,37 @@ label {
|
|
54
61
|
// -------------------------
|
55
62
|
|
56
63
|
// Shared size and type resets
|
57
|
-
select,
|
58
|
-
|
59
|
-
input[type="
|
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 {
|
60
81
|
display: inline-block;
|
61
82
|
height: $baseLineHeight;
|
62
|
-
padding: 4px;
|
83
|
+
padding: 4px 6px;
|
63
84
|
margin-bottom: 9px;
|
64
85
|
font-size: $baseFontSize;
|
65
86
|
line-height: $baseLineHeight;
|
66
87
|
color: $gray;
|
88
|
+
@include border-radius($inputBorderRadius);
|
67
89
|
}
|
68
90
|
|
69
91
|
// Reset appearance properties for textual inputs and textarea
|
70
92
|
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
71
|
-
input,
|
93
|
+
input,
|
94
|
+
textarea {
|
72
95
|
width: 210px;
|
73
96
|
}
|
74
97
|
// Reset height since textareas have rows
|
@@ -76,12 +99,24 @@ textarea {
|
|
76
99
|
height: auto;
|
77
100
|
}
|
78
101
|
// Everything else
|
79
|
-
textarea,
|
80
|
-
input[type="
|
81
|
-
input[type="
|
102
|
+
textarea,
|
103
|
+
input[type="text"],
|
104
|
+
input[type="password"],
|
105
|
+
input[type="datetime"],
|
106
|
+
input[type="datetime-local"],
|
107
|
+
input[type="date"],
|
108
|
+
input[type="month"],
|
109
|
+
input[type="time"],
|
110
|
+
input[type="week"],
|
111
|
+
input[type="number"],
|
112
|
+
input[type="email"],
|
113
|
+
input[type="url"],
|
114
|
+
input[type="search"],
|
115
|
+
input[type="tel"],
|
116
|
+
input[type="color"],
|
117
|
+
.uneditable-input {
|
82
118
|
background-color: $inputBackground;
|
83
119
|
border: 1px solid $inputBorder;
|
84
|
-
@include border-radius($inputBorderRadius);
|
85
120
|
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
86
121
|
@include transition(#{border linear .2s, box-shadow linear .2s});
|
87
122
|
|
@@ -95,76 +130,124 @@ input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
|
|
95
130
|
}
|
96
131
|
|
97
132
|
// Position radios and checkboxes better
|
98
|
-
input[type="radio"],
|
99
|
-
|
133
|
+
input[type="radio"],
|
134
|
+
input[type="checkbox"] {
|
135
|
+
margin: 4px 0 0;
|
100
136
|
*margin-top: 0; /* IE7 */
|
137
|
+
margin-top: 1px \9; /* IE8-9 */
|
101
138
|
line-height: normal;
|
102
139
|
cursor: pointer;
|
103
140
|
}
|
104
141
|
|
105
|
-
// Reset width of input buttons, radios, checkboxes
|
106
|
-
input[type="
|
142
|
+
// Reset width of input images, buttons, radios, checkboxes
|
143
|
+
input[type="file"],
|
144
|
+
input[type="image"],
|
145
|
+
input[type="submit"],
|
146
|
+
input[type="reset"],
|
147
|
+
input[type="button"],
|
148
|
+
input[type="radio"],
|
149
|
+
input[type="checkbox"] {
|
107
150
|
width: auto; // Override of generic input selector
|
108
151
|
}
|
109
152
|
|
110
|
-
// Make uneditable textareas behave like a textarea
|
111
|
-
.uneditable-textarea {
|
112
|
-
width: auto;
|
113
|
-
height: auto;
|
114
|
-
}
|
115
|
-
|
116
153
|
// Set the height of select and file controls to match text inputs
|
117
|
-
select,
|
118
|
-
|
154
|
+
select,
|
155
|
+
input[type="file"] {
|
156
|
+
height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
119
157
|
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
120
|
-
line-height:
|
158
|
+
line-height: 30px;
|
121
159
|
}
|
122
160
|
|
123
161
|
// Make select elements obey height by applying a border
|
124
162
|
select {
|
125
163
|
width: 220px; // default input width + 10px of padding that doesn't get applied
|
126
164
|
border: 1px solid #bbb;
|
165
|
+
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
127
166
|
}
|
128
167
|
|
129
168
|
// Make multiple select elements height not fixed
|
130
|
-
select[multiple],
|
169
|
+
select[multiple],
|
170
|
+
select[size] {
|
131
171
|
height: auto;
|
132
172
|
}
|
133
173
|
|
134
174
|
// Focus for select, file, radio, and checkbox
|
135
|
-
select:focus,
|
175
|
+
select:focus,
|
176
|
+
input[type="file"]:focus,
|
177
|
+
input[type="radio"]:focus,
|
178
|
+
input[type="checkbox"]:focus {
|
136
179
|
@include tab-focus();
|
137
180
|
}
|
138
181
|
|
139
182
|
|
183
|
+
// Uneditable inputs
|
184
|
+
// -------------------------
|
185
|
+
|
186
|
+
// Make uneditable inputs look inactive
|
187
|
+
.uneditable-input,
|
188
|
+
.uneditable-textarea {
|
189
|
+
color: $grayLight;
|
190
|
+
background-color: darken($inputBackground, 1%);
|
191
|
+
border-color: $inputBorder;
|
192
|
+
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
193
|
+
cursor: not-allowed;
|
194
|
+
}
|
195
|
+
|
196
|
+
// For text that needs to appear as an input but should not be an input
|
197
|
+
.uneditable-input {
|
198
|
+
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
199
|
+
white-space: nowrap;
|
200
|
+
}
|
201
|
+
|
202
|
+
// Make uneditable textareas behave like a textarea
|
203
|
+
.uneditable-textarea {
|
204
|
+
width: auto;
|
205
|
+
height: auto;
|
206
|
+
}
|
207
|
+
|
208
|
+
|
209
|
+
// Placeholder
|
210
|
+
// -------------------------
|
211
|
+
|
212
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
213
|
+
input,
|
214
|
+
textarea {
|
215
|
+
@include placeholder();
|
216
|
+
}
|
217
|
+
|
140
218
|
|
141
219
|
// CHECKBOXES & RADIOS
|
142
220
|
// -------------------
|
143
221
|
|
144
222
|
// Indent the labels to position radios/checkboxes as hanging
|
145
|
-
.radio,
|
223
|
+
.radio,
|
224
|
+
.checkbox {
|
146
225
|
min-height: 18px; // clear the floating input if there is no label text
|
147
226
|
padding-left: 18px;
|
148
227
|
}
|
149
|
-
.radio input[type="radio"],
|
228
|
+
.radio input[type="radio"],
|
229
|
+
.checkbox input[type="checkbox"] {
|
150
230
|
float: left;
|
151
231
|
margin-left: -18px;
|
152
232
|
}
|
153
233
|
|
154
234
|
// Move the options list down to align with labels
|
155
|
-
.controls > .radio:first-child,
|
235
|
+
.controls > .radio:first-child,
|
236
|
+
.controls > .checkbox:first-child {
|
156
237
|
padding-top: 5px; // has to be padding because margin collaspes
|
157
238
|
}
|
158
239
|
|
159
240
|
// Radios and checkboxes on same line
|
160
241
|
// TODO v3: Convert .inline to .control-inline
|
161
|
-
.radio.inline,
|
242
|
+
.radio.inline,
|
243
|
+
.checkbox.inline {
|
162
244
|
display: inline-block;
|
163
245
|
padding-top: 5px;
|
164
246
|
margin-bottom: 0;
|
165
247
|
vertical-align: middle;
|
166
248
|
}
|
167
|
-
.radio.inline + .radio.inline,
|
249
|
+
.radio.inline + .radio.inline,
|
250
|
+
.checkbox.inline + .checkbox.inline {
|
168
251
|
margin-left: 10px; // space out consecutive inline controls
|
169
252
|
}
|
170
253
|
|
@@ -182,15 +265,29 @@ select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="c
|
|
182
265
|
.input-xxlarge { width: 530px; }
|
183
266
|
|
184
267
|
// Grid style input sizes
|
185
|
-
input[class*="span"],
|
268
|
+
input[class*="span"],
|
269
|
+
select[class*="span"],
|
270
|
+
textarea[class*="span"],
|
271
|
+
.uneditable-input[class*="span"],
|
186
272
|
// Redeclare since the fluid row class is more specific
|
187
|
-
.row-fluid input[class*="span"],
|
273
|
+
.row-fluid input[class*="span"],
|
274
|
+
.row-fluid select[class*="span"],
|
275
|
+
.row-fluid textarea[class*="span"],
|
276
|
+
.row-fluid .uneditable-input[class*="span"] {
|
188
277
|
float: none;
|
189
278
|
margin-left: 0;
|
190
279
|
}
|
191
280
|
// Ensure input-prepend/append never wraps
|
192
|
-
.input-append input[class*="span"],
|
193
|
-
.input-
|
281
|
+
.input-append input[class*="span"],
|
282
|
+
.input-append .uneditable-input[class*="span"],
|
283
|
+
.input-prepend input[class*="span"],
|
284
|
+
.input-prepend .uneditable-input[class*="span"],
|
285
|
+
.row-fluid input[class*="span"],
|
286
|
+
.row-fluid select[class*="span"],
|
287
|
+
.row-fluid textarea[class*="span"],
|
288
|
+
.row-fluid .uneditable-input[class*="span"],
|
289
|
+
.row-fluid .input-prepend [class*="span"],
|
290
|
+
.row-fluid .input-append [class*="span"] {
|
194
291
|
display: inline-block;
|
195
292
|
}
|
196
293
|
|
@@ -199,7 +296,17 @@ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditabl
|
|
199
296
|
// GRID SIZING FOR INPUTS
|
200
297
|
// ----------------------
|
201
298
|
|
202
|
-
|
299
|
+
// Grid sizes
|
300
|
+
@include grid-input($gridColumnWidth, $gridGutterWidth);
|
301
|
+
|
302
|
+
// Control row for multiple inputs per line
|
303
|
+
.controls-row {
|
304
|
+
@include clearfix(); // Clear the float from controls
|
305
|
+
}
|
306
|
+
.controls-row [class*="span"] {
|
307
|
+
float: left; // Float to collapse white-space for proper grid alignment
|
308
|
+
}
|
309
|
+
|
203
310
|
|
204
311
|
|
205
312
|
|
@@ -207,13 +314,20 @@ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditabl
|
|
207
314
|
// --------------
|
208
315
|
|
209
316
|
// Disabled and read-only inputs
|
210
|
-
input[disabled],
|
317
|
+
input[disabled],
|
318
|
+
select[disabled],
|
319
|
+
textarea[disabled],
|
320
|
+
input[readonly],
|
321
|
+
select[readonly],
|
322
|
+
textarea[readonly] {
|
211
323
|
cursor: not-allowed;
|
212
324
|
background-color: $inputDisabledBackground;
|
213
|
-
border-color: #ddd;
|
214
325
|
}
|
215
326
|
// Explicitly reset the colors here
|
216
|
-
input[type="radio"][disabled],
|
327
|
+
input[type="radio"][disabled],
|
328
|
+
input[type="checkbox"][disabled],
|
329
|
+
input[type="radio"][readonly],
|
330
|
+
input[type="checkbox"][readonly] {
|
217
331
|
background-color: transparent;
|
218
332
|
}
|
219
333
|
|
@@ -238,7 +352,9 @@ input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="rad
|
|
238
352
|
|
239
353
|
// HTML5 invalid states
|
240
354
|
// Shares styles with the .control-group.error above
|
241
|
-
input:focus:required:invalid,
|
355
|
+
input:focus:required:invalid,
|
356
|
+
textarea:focus:required:invalid,
|
357
|
+
select:focus:required:invalid {
|
242
358
|
color: #b94a48;
|
243
359
|
border-color: #ee5f5b;
|
244
360
|
&:focus {
|
@@ -261,27 +377,14 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
261
377
|
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
|
262
378
|
}
|
263
379
|
|
264
|
-
// For text that needs to appear as an input but should not be an input
|
265
|
-
.uneditable-input {
|
266
|
-
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
267
|
-
white-space: nowrap;
|
268
|
-
cursor: not-allowed;
|
269
|
-
background-color: $inputBackground;
|
270
|
-
border-color: #eee;
|
271
|
-
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
272
|
-
}
|
273
|
-
|
274
|
-
// Placeholder text gets special styles; can't be bundled together though for some reason
|
275
|
-
// (sass-edit) - need special mixin
|
276
|
-
@include rootPlaceholder();
|
277
|
-
|
278
380
|
|
279
381
|
|
280
382
|
// HELP TEXT
|
281
383
|
// ---------
|
282
384
|
|
283
|
-
.help-block,
|
284
|
-
|
385
|
+
.help-block,
|
386
|
+
.help-inline {
|
387
|
+
color: lighten($textColor, 15%); // lighten the text some for contrast
|
285
388
|
}
|
286
389
|
|
287
390
|
.help-block {
|
@@ -302,38 +405,44 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
302
405
|
// ------------
|
303
406
|
|
304
407
|
// Allow us to put symbols and text within the input field for a cleaner look
|
305
|
-
.input-
|
408
|
+
.input-append,
|
409
|
+
.input-prepend {
|
306
410
|
margin-bottom: 5px;
|
307
|
-
|
411
|
+
font-size: 0;
|
412
|
+
white-space: nowrap; // Prevent span and input from separating
|
413
|
+
|
414
|
+
input,
|
415
|
+
select,
|
416
|
+
.uneditable-input {
|
308
417
|
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
309
418
|
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
310
419
|
*margin-left: 0;
|
311
|
-
|
420
|
+
font-size: $baseFontSize;
|
421
|
+
vertical-align: top;
|
312
422
|
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
313
423
|
// Make input on top when focused so blue border and shadow always show
|
314
424
|
&:focus {
|
315
425
|
z-index: 2;
|
316
426
|
}
|
317
427
|
}
|
318
|
-
.uneditable-input {
|
319
|
-
border-left-color: #ccc;
|
320
|
-
}
|
321
428
|
.add-on {
|
322
429
|
display: inline-block;
|
323
430
|
width: auto;
|
324
431
|
height: $baseLineHeight;
|
325
432
|
min-width: 16px;
|
326
433
|
padding: 4px 5px;
|
434
|
+
font-size: $baseFontSize;
|
327
435
|
font-weight: normal;
|
328
436
|
line-height: $baseLineHeight;
|
329
437
|
text-align: center;
|
330
438
|
text-shadow: 0 1px 0 $white;
|
331
|
-
vertical-align: middle;
|
332
439
|
background-color: $grayLighter;
|
333
440
|
border: 1px solid #ccc;
|
334
441
|
}
|
335
|
-
.add-on,
|
442
|
+
.add-on,
|
443
|
+
.btn {
|
336
444
|
margin-left: -1px;
|
445
|
+
vertical-align: top;
|
337
446
|
@include border-radius(0);
|
338
447
|
}
|
339
448
|
.active {
|
@@ -342,35 +451,40 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
342
451
|
}
|
343
452
|
}
|
344
453
|
.input-prepend {
|
345
|
-
.add-on,
|
454
|
+
.add-on,
|
455
|
+
.btn {
|
346
456
|
margin-right: -1px;
|
347
457
|
}
|
348
|
-
.add-on:first-child,
|
458
|
+
.add-on:first-child,
|
459
|
+
.btn:first-child {
|
349
460
|
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
350
461
|
}
|
351
462
|
}
|
352
463
|
.input-append {
|
353
|
-
input,
|
354
|
-
|
355
|
-
}
|
464
|
+
input,
|
465
|
+
select,
|
356
466
|
.uneditable-input {
|
357
|
-
border-
|
358
|
-
border-left-color: #eee;
|
467
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
359
468
|
}
|
360
|
-
.add-on:last-child,
|
469
|
+
.add-on:last-child,
|
470
|
+
.btn:last-child {
|
361
471
|
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
362
472
|
}
|
363
473
|
}
|
364
474
|
// Remove all border-radius for inputs with both prepend and append
|
365
475
|
.input-prepend.input-append {
|
366
|
-
input,
|
476
|
+
input,
|
477
|
+
select,
|
478
|
+
.uneditable-input {
|
367
479
|
@include border-radius(0);
|
368
480
|
}
|
369
|
-
.add-on:first-child,
|
481
|
+
.add-on:first-child,
|
482
|
+
.btn:first-child {
|
370
483
|
margin-right: -1px;
|
371
484
|
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
372
485
|
}
|
373
|
-
.add-on:last-child,
|
486
|
+
.add-on:last-child,
|
487
|
+
.btn:last-child {
|
374
488
|
margin-left: -1px;
|
375
489
|
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
376
490
|
}
|
@@ -381,15 +495,34 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
|
|
381
495
|
// SEARCH FORM
|
382
496
|
// -----------
|
383
497
|
|
384
|
-
input.search-query {
|
498
|
+
input.search-query {
|
385
499
|
padding-right: 14px;
|
386
500
|
padding-right: 4px \9;
|
387
501
|
padding-left: 14px;
|
388
502
|
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
389
|
-
margin-bottom: 0; //
|
390
|
-
@include border-radius(
|
503
|
+
margin-bottom: 0; // Remove the default margin on all inputs
|
504
|
+
@include border-radius(15px);
|
391
505
|
}
|
392
506
|
|
507
|
+
/* Allow for input prepend/append in search forms */
|
508
|
+
.form-search .input-append .search-query,
|
509
|
+
.form-search .input-prepend .search-query {
|
510
|
+
@include border-radius(0); // Override due to specificity
|
511
|
+
}
|
512
|
+
.form-search .input-append .search-query {
|
513
|
+
@include border-radius(14px 0 0 14px)
|
514
|
+
}
|
515
|
+
.form-search .input-append .btn {
|
516
|
+
@include border-radius(0 14px 14px 0)
|
517
|
+
}
|
518
|
+
.form-search .input-prepend .search-query {
|
519
|
+
@include border-radius(0 14px 14px 0)
|
520
|
+
}
|
521
|
+
.form-search .input-prepend .btn {
|
522
|
+
@include border-radius(14px 0 0 14px)
|
523
|
+
}
|
524
|
+
|
525
|
+
|
393
526
|
|
394
527
|
|
395
528
|
// HORIZONTAL & VERTICAL FORMS
|
@@ -398,33 +531,53 @@ input.search-query { // input. fix the overwriting of the search-query and allow
|
|
398
531
|
// Common properties
|
399
532
|
// -----------------
|
400
533
|
|
401
|
-
.form-search,
|
402
|
-
|
534
|
+
.form-search,
|
535
|
+
.form-inline,
|
536
|
+
.form-horizontal {
|
537
|
+
input,
|
538
|
+
textarea,
|
539
|
+
select,
|
540
|
+
.help-inline,
|
541
|
+
.uneditable-input,
|
542
|
+
.input-prepend,
|
543
|
+
.input-append {
|
403
544
|
display: inline-block;
|
404
545
|
@include ie7-inline-block();
|
405
546
|
margin-bottom: 0;
|
547
|
+
vertical-align: middle;
|
406
548
|
}
|
407
549
|
// Re-hide hidden elements due to specifity
|
408
550
|
.hide {
|
409
551
|
display: none;
|
410
552
|
}
|
411
553
|
}
|
412
|
-
.form-search label,
|
554
|
+
.form-search label,
|
555
|
+
.form-inline label,
|
556
|
+
.form-search .btn-group,
|
557
|
+
.form-inline .btn-group {
|
413
558
|
display: inline-block;
|
414
559
|
}
|
415
560
|
// Remove margin for input-prepend/-append
|
416
|
-
.form-search .input-append,
|
561
|
+
.form-search .input-append,
|
562
|
+
.form-inline .input-append,
|
563
|
+
.form-search .input-prepend,
|
564
|
+
.form-inline .input-prepend {
|
417
565
|
margin-bottom: 0;
|
418
566
|
}
|
419
567
|
// Inline checkbox/radio labels (remove padding on left)
|
420
|
-
.form-search .radio,
|
568
|
+
.form-search .radio,
|
569
|
+
.form-search .checkbox,
|
570
|
+
.form-inline .radio,
|
571
|
+
.form-inline .checkbox {
|
421
572
|
padding-left: 0;
|
422
573
|
margin-bottom: 0;
|
423
574
|
vertical-align: middle;
|
424
575
|
}
|
425
576
|
// Remove float and margin, set to inline-block
|
426
|
-
.form-search .radio input[type="radio"],
|
427
|
-
.form-
|
577
|
+
.form-search .radio input[type="radio"],
|
578
|
+
.form-search .checkbox input[type="checkbox"],
|
579
|
+
.form-inline .radio input[type="radio"],
|
580
|
+
.form-inline .checkbox input[type="checkbox"] {
|
428
581
|
float: left;
|
429
582
|
margin-right: 3px;
|
430
583
|
margin-left: 0;
|