anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1
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/Rakefile +11 -15
- data/bootstrap-rails.gemspec +4 -4
- data/lib/bootstrap-rails/version.rb +1 -1
- 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 +91 -0
- data/vendor/assets/javascripts/bootstrap-button.js +98 -0
- data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
- data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
- data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
- data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
- data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
- data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
- data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
- data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
- data/vendor/assets/javascripts/bootstrap.js +8 -5
- data/vendor/assets/stylesheets/accordion.scss +28 -0
- data/vendor/assets/stylesheets/alerts.scss +70 -0
- data/vendor/assets/stylesheets/bootstrap.scss +44 -8
- data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
- data/vendor/assets/stylesheets/button-groups.scss +147 -0
- data/vendor/assets/stylesheets/buttons.scss +165 -0
- data/vendor/assets/stylesheets/carousel.scss +121 -0
- data/vendor/assets/stylesheets/close.scss +18 -0
- data/vendor/assets/stylesheets/code.scss +44 -0
- data/vendor/assets/stylesheets/component-animations.scss +18 -0
- data/vendor/assets/stylesheets/dropdowns.scss +131 -0
- data/vendor/assets/stylesheets/forms.scss +337 -287
- data/vendor/assets/stylesheets/grid.scss +8 -0
- data/vendor/assets/stylesheets/hero-unit.scss +20 -0
- data/vendor/assets/stylesheets/labels.scss +16 -0
- data/vendor/assets/stylesheets/layouts.scss +17 -0
- data/vendor/assets/stylesheets/mixins.scss +375 -111
- data/vendor/assets/stylesheets/modals.scss +72 -0
- data/vendor/assets/stylesheets/navbar.scss +292 -0
- data/vendor/assets/stylesheets/navs.scss +344 -0
- data/vendor/assets/stylesheets/pager.scss +30 -0
- data/vendor/assets/stylesheets/pagination.scss +55 -0
- data/vendor/assets/stylesheets/popovers.scss +49 -0
- data/vendor/assets/stylesheets/progress-bars.scss +95 -0
- data/vendor/assets/stylesheets/reset.scss +37 -52
- data/vendor/assets/stylesheets/responsive.scss +323 -0
- data/vendor/assets/stylesheets/scaffolding.scss +13 -96
- data/vendor/assets/stylesheets/sprites.scss +158 -0
- data/vendor/assets/stylesheets/tables.scss +68 -149
- data/vendor/assets/stylesheets/thumbnails.scss +35 -0
- data/vendor/assets/stylesheets/tooltip.scss +35 -0
- data/vendor/assets/stylesheets/type.scss +100 -70
- data/vendor/assets/stylesheets/utilities.scss +23 -0
- data/vendor/assets/stylesheets/variables.scss +94 -55
- data/vendor/assets/stylesheets/wells.scss +17 -0
- metadata +51 -30
- data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
- data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
- data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
- data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
- data/vendor/assets/stylesheets/patterns.scss +0 -1060
@@ -0,0 +1,18 @@
|
|
1
|
+
// CLOSE ICONS
|
2
|
+
// -----------
|
3
|
+
|
4
|
+
.close {
|
5
|
+
float: right;
|
6
|
+
font-size: 20px;
|
7
|
+
font-weight: bold;
|
8
|
+
line-height: $baseLineHeight;
|
9
|
+
color: $black;
|
10
|
+
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
11
|
+
@include opacity(20);
|
12
|
+
&:hover {
|
13
|
+
color: $black;
|
14
|
+
text-decoration: none;
|
15
|
+
@include opacity(40);
|
16
|
+
cursor: pointer;
|
17
|
+
}
|
18
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
// Code.less
|
2
|
+
// Code typography styles for the <code> and <pre> elements
|
3
|
+
// --------------------------------------------------------
|
4
|
+
|
5
|
+
// Inline and block code styles
|
6
|
+
code,
|
7
|
+
pre {
|
8
|
+
padding: 0 3px 2px;
|
9
|
+
@include font-family-monospace;
|
10
|
+
font-size: $baseFontSize - 1;
|
11
|
+
color: $grayDark;
|
12
|
+
@include border-radius(3px);
|
13
|
+
}
|
14
|
+
code {
|
15
|
+
padding: 3px 4px;
|
16
|
+
color: #d14;
|
17
|
+
background-color: #f7f7f9;
|
18
|
+
border: 1px solid #e1e1e8;
|
19
|
+
}
|
20
|
+
pre {
|
21
|
+
display: block;
|
22
|
+
padding: ($baseLineHeight - 1) / 2;
|
23
|
+
margin: 0 0 $baseLineHeight / 2;
|
24
|
+
font-size: 12px;
|
25
|
+
line-height: $baseLineHeight;
|
26
|
+
background-color: #f5f5f5;
|
27
|
+
border: 1px solid #ccc; // fallback for IE7-8
|
28
|
+
border: 1px solid rgba(0,0,0,.15);
|
29
|
+
@include border-radius(4px);
|
30
|
+
white-space: pre;
|
31
|
+
white-space: pre-wrap;
|
32
|
+
word-break: break-all;
|
33
|
+
|
34
|
+
// Make prettyprint styles more spaced out for readability
|
35
|
+
&.prettyprint {
|
36
|
+
margin-bottom: $baseLineHeight;
|
37
|
+
}
|
38
|
+
|
39
|
+
// Account for some code outputs that place code tags in pre tags
|
40
|
+
code {
|
41
|
+
padding: 0;
|
42
|
+
background-color: transparent;
|
43
|
+
}
|
44
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// COMPONENT ANIMATIONS
|
2
|
+
// --------------------
|
3
|
+
|
4
|
+
.fade {
|
5
|
+
@include transition(opacity .15s linear);
|
6
|
+
opacity: 0;
|
7
|
+
&.in {
|
8
|
+
opacity: 1;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
.collapse {
|
13
|
+
@include transition(height .35s ease);
|
14
|
+
position:relative;
|
15
|
+
overflow:hidden;
|
16
|
+
height: 0;
|
17
|
+
&.in { height: auto; }
|
18
|
+
}
|
@@ -0,0 +1,131 @@
|
|
1
|
+
// DROPDOWN MENUS
|
2
|
+
// --------------
|
3
|
+
|
4
|
+
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
5
|
+
.dropdown {
|
6
|
+
position: relative;
|
7
|
+
}
|
8
|
+
.dropdown-toggle {
|
9
|
+
// The caret makes the toggle a bit too tall in IE7
|
10
|
+
*margin-bottom: -3px;
|
11
|
+
}
|
12
|
+
.dropdown-toggle:active,
|
13
|
+
.open .dropdown-toggle {
|
14
|
+
outline: 0;
|
15
|
+
}
|
16
|
+
// Dropdown arrow/caret
|
17
|
+
.caret {
|
18
|
+
display: inline-block;
|
19
|
+
width: 0;
|
20
|
+
height: 0;
|
21
|
+
text-indent: -99999px;
|
22
|
+
// IE7 won't do the border trick if there's a text indent, but it doesn't
|
23
|
+
// do the content that text-indent is hiding, either, so we're ok.
|
24
|
+
*text-indent: 0;
|
25
|
+
vertical-align: top;
|
26
|
+
border-left: 4px solid transparent;
|
27
|
+
border-right: 4px solid transparent;
|
28
|
+
border-top: 4px solid $black;
|
29
|
+
@include opacity(30);
|
30
|
+
content: "\2193";
|
31
|
+
}
|
32
|
+
.dropdown .caret {
|
33
|
+
margin-top: 8px;
|
34
|
+
margin-left: 2px;
|
35
|
+
}
|
36
|
+
.dropdown:hover .caret,
|
37
|
+
.open.dropdown .caret {
|
38
|
+
@include opacity(100);
|
39
|
+
}
|
40
|
+
// The dropdown menu (ul)
|
41
|
+
.dropdown-menu {
|
42
|
+
position: absolute;
|
43
|
+
top: 100%;
|
44
|
+
left: 0;
|
45
|
+
z-index: $zindexDropdown;
|
46
|
+
float: left;
|
47
|
+
display: none; // none by default, but block on "open" of the menu
|
48
|
+
min-width: 160px;
|
49
|
+
max-width: 220px;
|
50
|
+
_width: 160px;
|
51
|
+
padding: 4px 0;
|
52
|
+
margin: 0; // override default ul
|
53
|
+
list-style: none;
|
54
|
+
background-color: $white;
|
55
|
+
border-color: #ccc;
|
56
|
+
border-color: rgba(0,0,0,.2);
|
57
|
+
border-style: solid;
|
58
|
+
border-width: 1px;
|
59
|
+
@include border-radius(0 0 5px 5px);
|
60
|
+
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
61
|
+
-webkit-background-clip: padding-box;
|
62
|
+
-moz-background-clip: padding;
|
63
|
+
background-clip: padding-box;
|
64
|
+
*border-right-width: 2px;
|
65
|
+
*border-bottom-width: 2px;
|
66
|
+
|
67
|
+
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
68
|
+
&.bottom-up {
|
69
|
+
top: auto;
|
70
|
+
bottom: 100%;
|
71
|
+
margin-bottom: 2px;
|
72
|
+
}
|
73
|
+
|
74
|
+
// Dividers (basically an hr) within the dropdown
|
75
|
+
.divider {
|
76
|
+
height: 1px;
|
77
|
+
margin: 5px 1px;
|
78
|
+
overflow: hidden;
|
79
|
+
background-color: #e5e5e5;
|
80
|
+
border-bottom: 1px solid $white;
|
81
|
+
|
82
|
+
// IE7 needs a set width since we gave a height. Restricting just
|
83
|
+
// to IE7 to keep the 1px left/right space in other browsers.
|
84
|
+
// It is unclear where IE is getting the extra space that we need
|
85
|
+
// to negative-margin away, but so it goes.
|
86
|
+
*width: 100%;
|
87
|
+
*margin: -5px 0 5px;
|
88
|
+
}
|
89
|
+
|
90
|
+
// Links within the dropdown menu
|
91
|
+
a {
|
92
|
+
display: block;
|
93
|
+
padding: 3px 15px;
|
94
|
+
clear: both;
|
95
|
+
font-weight: normal;
|
96
|
+
line-height: 18px;
|
97
|
+
color: $gray;
|
98
|
+
white-space: nowrap;
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
// Hover state
|
103
|
+
.dropdown-menu li > a:hover,
|
104
|
+
.dropdown-menu .active > a,
|
105
|
+
.dropdown-menu .active > a:hover {
|
106
|
+
color: $white;
|
107
|
+
text-decoration: none;
|
108
|
+
background-color: $linkColor;
|
109
|
+
}
|
110
|
+
|
111
|
+
// Open state for the dropdown
|
112
|
+
.dropdown.open {
|
113
|
+
// IE7's z-index only goes to the nearest positioned ancestor, which would
|
114
|
+
// make the menu appear below buttons that appeared later on the page
|
115
|
+
*z-index: $zindexDropdown;
|
116
|
+
|
117
|
+
.dropdown-toggle {
|
118
|
+
color: $white;
|
119
|
+
background: #ccc;
|
120
|
+
background: rgba(0,0,0,.3);
|
121
|
+
}
|
122
|
+
.dropdown-menu {
|
123
|
+
display: block;
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
// Typeahead
|
128
|
+
.typeahead {
|
129
|
+
margin-top: 2px; // give it some space to breathe
|
130
|
+
@include border-radius(4px);
|
131
|
+
}
|
@@ -1,66 +1,51 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
// Forms.less
|
2
|
+
// Base styles for various input types, form layouts, and states
|
3
|
+
// -------------------------------------------------------------
|
4
4
|
|
5
5
|
|
6
|
-
//
|
7
|
-
//
|
6
|
+
// GENERAL STYLES
|
7
|
+
// --------------
|
8
8
|
|
9
|
+
// Make all forms have space below them
|
9
10
|
form {
|
10
|
-
margin
|
11
|
+
margin: 0 0 $baseLineHeight;
|
11
12
|
}
|
12
13
|
|
13
|
-
// Groups of fields with labels on top (legends)
|
14
14
|
fieldset {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
display: block;
|
19
|
-
padding-left: 150px;
|
20
|
-
font-size: $basefont * 1.5;
|
21
|
-
line-height: 1;
|
22
|
-
color: $grayDark;
|
23
|
-
*padding: 0 0 5px 145px; /* IE6-7 */
|
24
|
-
*line-height: 1.5; /* IE6-7 */
|
25
|
-
}
|
15
|
+
padding: 0;
|
16
|
+
margin: 0;
|
17
|
+
border: 0;
|
26
18
|
}
|
27
19
|
|
28
|
-
//
|
29
|
-
|
30
|
-
|
31
|
-
|
20
|
+
// Groups of fields with labels on top (legends)
|
21
|
+
legend {
|
22
|
+
display: block;
|
23
|
+
width: 100%;
|
24
|
+
padding: 0;
|
25
|
+
margin-bottom: $baseLineHeight * 1.5;
|
26
|
+
font-size: $baseFontSize * 1.5;
|
27
|
+
line-height: $baseLineHeight * 2;
|
28
|
+
color: $grayDark;
|
29
|
+
border: 0;
|
30
|
+
border-bottom: 1px solid #eee;
|
32
31
|
}
|
33
32
|
|
34
33
|
// Set font for forms
|
35
34
|
label,
|
36
35
|
input,
|
36
|
+
button,
|
37
37
|
select,
|
38
38
|
textarea {
|
39
|
-
@include font-sans-serif(
|
39
|
+
@include font-sans-serif($baseFontSize,normal,$baseLineHeight);
|
40
40
|
}
|
41
41
|
|
42
|
-
//
|
42
|
+
// Identify controls by their labels
|
43
43
|
label {
|
44
|
-
|
45
|
-
|
46
|
-
line-height: $baseline;
|
47
|
-
float: left;
|
48
|
-
width: 130px;
|
49
|
-
text-align: right;
|
44
|
+
display: block;
|
45
|
+
margin-bottom: 5px;
|
50
46
|
color: $grayDark;
|
51
47
|
}
|
52
48
|
|
53
|
-
// Shift over the inside div to align all label's relevant content
|
54
|
-
form .input {
|
55
|
-
margin-left: 150px;
|
56
|
-
}
|
57
|
-
|
58
|
-
// Checkboxs and radio buttons
|
59
|
-
input[type=checkbox],
|
60
|
-
input[type=radio] {
|
61
|
-
cursor: pointer;
|
62
|
-
}
|
63
|
-
|
64
49
|
// Inputs, Textareas, Selects
|
65
50
|
input,
|
66
51
|
textarea,
|
@@ -68,109 +53,216 @@ select,
|
|
68
53
|
.uneditable-input {
|
69
54
|
display: inline-block;
|
70
55
|
width: 210px;
|
71
|
-
height: $
|
56
|
+
height: $baseLineHeight;
|
72
57
|
padding: 4px;
|
73
|
-
|
74
|
-
|
58
|
+
margin-bottom: 9px;
|
59
|
+
font-size: $baseFontSize;
|
60
|
+
line-height: $baseLineHeight;
|
75
61
|
color: $gray;
|
76
62
|
border: 1px solid #ccc;
|
77
63
|
@include border-radius(3px);
|
78
64
|
}
|
65
|
+
.uneditable-textarea {
|
66
|
+
width: auto;
|
67
|
+
height: auto;
|
68
|
+
}
|
79
69
|
|
80
|
-
//
|
81
|
-
|
82
|
-
|
70
|
+
// Inputs within a label
|
71
|
+
label input,
|
72
|
+
label textarea,
|
73
|
+
label select {
|
74
|
+
display: block;
|
83
75
|
}
|
84
76
|
|
85
|
-
//
|
86
|
-
input[type=
|
87
|
-
input[type=
|
77
|
+
// Mini reset for unique input types
|
78
|
+
input[type="image"],
|
79
|
+
input[type="checkbox"],
|
80
|
+
input[type="radio"] {
|
88
81
|
width: auto;
|
89
82
|
height: auto;
|
90
83
|
padding: 0;
|
91
84
|
margin: 3px 0;
|
92
|
-
*margin-top: 0; /*
|
85
|
+
*margin-top: 0; /* IE7 */
|
93
86
|
line-height: normal;
|
94
|
-
border:
|
87
|
+
border: 0;
|
88
|
+
cursor: pointer;
|
89
|
+
@include border-radius(0);
|
95
90
|
}
|
96
91
|
|
97
|
-
|
98
|
-
|
92
|
+
// Reset the file input to browser defaults
|
93
|
+
input[type="file"] {
|
99
94
|
padding: initial;
|
100
|
-
border: initial;
|
101
95
|
line-height: initial;
|
96
|
+
border: initial;
|
97
|
+
background-color: $white;
|
98
|
+
background-color: initial;
|
102
99
|
@include box-shadow(none);
|
103
100
|
}
|
104
101
|
|
105
|
-
input
|
106
|
-
input[type=
|
107
|
-
input[type=
|
102
|
+
// Help out input buttons
|
103
|
+
input[type="button"],
|
104
|
+
input[type="reset"],
|
105
|
+
input[type="submit"] {
|
108
106
|
width: auto;
|
109
107
|
height: auto;
|
110
108
|
}
|
111
109
|
|
110
|
+
// Set the height of select and file controls to match text inputs
|
112
111
|
select,
|
113
|
-
input[type=file] {
|
114
|
-
height:
|
115
|
-
*height: auto; // Reset for IE7
|
116
|
-
line-height: $baseline * 1.5;
|
112
|
+
input[type="file"] {
|
113
|
+
height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
117
114
|
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
115
|
+
line-height: 28px;
|
116
|
+
}
|
117
|
+
|
118
|
+
// Chrome on Linux and Mobile Safari need background-color
|
119
|
+
select {
|
120
|
+
width: 220px; // default input width + 10px of padding that doesn't get applied
|
121
|
+
background-color: $white;
|
118
122
|
}
|
119
123
|
|
120
124
|
// Make multiple select elements height not fixed
|
121
|
-
select[multiple]
|
122
|
-
|
123
|
-
|
125
|
+
select[multiple],
|
126
|
+
select[size] {
|
127
|
+
height: auto;
|
128
|
+
}
|
129
|
+
|
130
|
+
// Remove shadow from image inputs
|
131
|
+
input[type="image"] {
|
132
|
+
@include box-shadow(none);
|
124
133
|
}
|
125
134
|
|
135
|
+
// Make textarea height behave
|
126
136
|
textarea {
|
127
137
|
height: auto;
|
128
138
|
}
|
129
139
|
|
130
|
-
//
|
131
|
-
|
132
|
-
|
133
|
-
display: block;
|
134
|
-
border-color: #eee;
|
135
|
-
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
136
|
-
cursor: not-allowed;
|
140
|
+
// Hidden inputs
|
141
|
+
input[type="hidden"] {
|
142
|
+
display: none;
|
137
143
|
}
|
138
144
|
|
139
|
-
|
140
|
-
|
141
|
-
|
145
|
+
|
146
|
+
|
147
|
+
// CHECKBOXES & RADIOS
|
148
|
+
// -------------------
|
149
|
+
|
150
|
+
// Indent the labels to position radios/checkboxes as hanging
|
151
|
+
.radio,
|
152
|
+
.checkbox {
|
153
|
+
padding-left: 18px;
|
142
154
|
}
|
143
|
-
|
144
|
-
|
155
|
+
.radio input[type="radio"],
|
156
|
+
.checkbox input[type="checkbox"] {
|
157
|
+
float: left;
|
158
|
+
margin-left: -18px;
|
145
159
|
}
|
146
160
|
|
147
|
-
//
|
161
|
+
// Move the options list down to align with labels
|
162
|
+
.controls > .radio:first-child,
|
163
|
+
.controls > .checkbox:first-child {
|
164
|
+
padding-top: 5px; // has to be padding because margin collaspes
|
165
|
+
}
|
166
|
+
|
167
|
+
// Radios and checkboxes on same line
|
168
|
+
.radio.inline,
|
169
|
+
.checkbox.inline {
|
170
|
+
display: inline-block;
|
171
|
+
margin-bottom: 0;
|
172
|
+
vertical-align: middle;
|
173
|
+
}
|
174
|
+
.radio.inline + .radio.inline,
|
175
|
+
.checkbox.inline + .checkbox.inline {
|
176
|
+
margin-left: 10px; // space out consecutive inline controls
|
177
|
+
}
|
178
|
+
// But don't forget to remove their padding on first-child
|
179
|
+
.controls > .radio.inline:first-child,
|
180
|
+
.controls > .checkbox.inline:first-child {
|
181
|
+
padding-top: 0;
|
182
|
+
}
|
183
|
+
|
184
|
+
|
185
|
+
|
186
|
+
// FOCUS STATE
|
187
|
+
// -----------
|
188
|
+
|
148
189
|
input,
|
149
190
|
textarea {
|
191
|
+
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
150
192
|
$transition: border linear .2s, box-shadow linear .2s;
|
151
193
|
@include transition($transition);
|
152
|
-
@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
153
194
|
}
|
154
195
|
input:focus,
|
155
196
|
textarea:focus {
|
156
|
-
outline: 0;
|
157
197
|
border-color: rgba(82,168,236,.8);
|
158
|
-
$shadow: inset 0 1px
|
198
|
+
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
|
159
199
|
@include box-shadow($shadow);
|
200
|
+
outline: 0;
|
201
|
+
outline: thin dotted \9; /* IE6-8 */
|
160
202
|
}
|
161
|
-
input[type=file]:focus,
|
162
|
-
input[type=checkbox]:focus,
|
203
|
+
input[type="file"]:focus,
|
204
|
+
input[type="checkbox"]:focus,
|
163
205
|
select:focus {
|
164
206
|
@include box-shadow(none); // override for file inputs
|
165
|
-
|
207
|
+
@include tab-focus();
|
208
|
+
}
|
209
|
+
|
210
|
+
|
211
|
+
|
212
|
+
// INPUT SIZES
|
213
|
+
// -----------
|
214
|
+
|
215
|
+
// General classes for quick sizes
|
216
|
+
.input-mini { width: 60px; }
|
217
|
+
.input-small { width: 90px; }
|
218
|
+
.input-medium { width: 150px; }
|
219
|
+
.input-large { width: 210px; }
|
220
|
+
.input-xlarge { width: 270px; }
|
221
|
+
.input-xxlarge { width: 530px; }
|
222
|
+
|
223
|
+
// Grid style input sizes
|
224
|
+
input[class*="span"],
|
225
|
+
select[class*="span"],
|
226
|
+
textarea[class*="span"],
|
227
|
+
.uneditable-input {
|
228
|
+
float: none;
|
229
|
+
margin-left: 0;
|
230
|
+
}
|
231
|
+
|
232
|
+
|
233
|
+
|
234
|
+
// GRID SIZING FOR INPUTS
|
235
|
+
// ----------------------
|
236
|
+
|
237
|
+
@include input-grid-system-generate($gridColumns, $gridColumnWidth, $gridGutterWidth);
|
238
|
+
|
239
|
+
|
240
|
+
|
241
|
+
|
242
|
+
|
243
|
+
// DISABLED STATE
|
244
|
+
// --------------
|
245
|
+
|
246
|
+
// Disabled and read-only inputs
|
247
|
+
input[disabled],
|
248
|
+
select[disabled],
|
249
|
+
textarea[disabled],
|
250
|
+
input[readonly],
|
251
|
+
select[readonly],
|
252
|
+
textarea[readonly] {
|
253
|
+
background-color: #f5f5f5;
|
254
|
+
border-color: #ddd;
|
255
|
+
cursor: not-allowed;
|
166
256
|
}
|
167
257
|
|
168
258
|
|
259
|
+
|
260
|
+
|
169
261
|
// FORM FIELD FEEDBACK STATES
|
170
262
|
// --------------------------
|
171
263
|
|
172
264
|
// Mixin for form field states
|
173
|
-
@mixin
|
265
|
+
@mixin form-field-state($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
174
266
|
// Set the text color
|
175
267
|
> label,
|
176
268
|
.help-block,
|
@@ -179,6 +271,7 @@ select:focus {
|
|
179
271
|
}
|
180
272
|
// Style inputs accordingly
|
181
273
|
input,
|
274
|
+
select,
|
182
275
|
textarea {
|
183
276
|
color: $textColor;
|
184
277
|
border-color: $borderColor;
|
@@ -195,164 +288,116 @@ select:focus {
|
|
195
288
|
border-color: $textColor;
|
196
289
|
}
|
197
290
|
}
|
198
|
-
// Error
|
199
|
-
form .clearfix.error {
|
200
|
-
@include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
|
201
|
-
}
|
202
291
|
// Warning
|
203
|
-
|
204
|
-
@include
|
205
|
-
}
|
206
|
-
// Success
|
207
|
-
form .clearfix.success {
|
208
|
-
@include formFieldState(#468847, #57a957, lighten(#57a957, 30%));
|
209
|
-
}
|
210
|
-
|
211
|
-
|
212
|
-
// Form element sizes
|
213
|
-
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
|
214
|
-
.input-mini,
|
215
|
-
input.mini,
|
216
|
-
textarea.mini,
|
217
|
-
select.mini {
|
218
|
-
width: 60px;
|
219
|
-
}
|
220
|
-
.input-small,
|
221
|
-
input.small,
|
222
|
-
textarea.small,
|
223
|
-
select.small {
|
224
|
-
width: 90px;
|
225
|
-
}
|
226
|
-
.input-medium,
|
227
|
-
input.medium,
|
228
|
-
textarea.medium,
|
229
|
-
select.medium {
|
230
|
-
width: 150px;
|
231
|
-
}
|
232
|
-
.input-large,
|
233
|
-
input.large,
|
234
|
-
textarea.large,
|
235
|
-
select.large {
|
236
|
-
width: 210px;
|
237
|
-
}
|
238
|
-
.input-xlarge,
|
239
|
-
input.xlarge,
|
240
|
-
textarea.xlarge,
|
241
|
-
select.xlarge {
|
242
|
-
width: 270px;
|
243
|
-
}
|
244
|
-
.input-xxlarge,
|
245
|
-
input.xxlarge,
|
246
|
-
textarea.xxlarge,
|
247
|
-
select.xxlarge {
|
248
|
-
width: 530px;
|
292
|
+
.control-group.warning {
|
293
|
+
@include form-field-state($warningText, $warningText, $warningBackground);
|
249
294
|
}
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
// Grid style input sizes
|
255
|
-
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
|
256
|
-
@mixin form-columns($columnSpan: 1) {
|
257
|
-
display: inline-block;
|
258
|
-
float: none;
|
259
|
-
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10;
|
260
|
-
margin-left: 0;
|
295
|
+
// Error
|
296
|
+
.control-group.error {
|
297
|
+
@include form-field-state($errorText, $errorText, $errorBackground);
|
261
298
|
}
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
299
|
+
// Success
|
300
|
+
.control-group.success {
|
301
|
+
@include form-field-state($successText, $successText, $successBackground);
|
302
|
+
}
|
303
|
+
|
304
|
+
// HTML5 invalid states
|
305
|
+
// Shares styles with the .control-group.error above
|
306
|
+
input:focus:required:invalid,
|
307
|
+
textarea:focus:required:invalid,
|
308
|
+
select:focus:required:invalid {
|
309
|
+
color: #b94a48;
|
310
|
+
border-color: #ee5f5b;
|
311
|
+
&:focus {
|
312
|
+
border-color: darken(#ee5f5b, 10%);
|
313
|
+
@include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
|
267
314
|
}
|
268
315
|
}
|
269
316
|
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
317
|
+
|
318
|
+
|
319
|
+
// FORM ACTIONS
|
320
|
+
// ------------
|
321
|
+
|
322
|
+
.form-actions {
|
323
|
+
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
|
324
|
+
margin-top: $baseLineHeight;
|
325
|
+
margin-bottom: $baseLineHeight;
|
277
326
|
background-color: #f5f5f5;
|
278
|
-
border-
|
279
|
-
cursor: not-allowed;
|
327
|
+
border-top: 1px solid #ddd;
|
280
328
|
}
|
281
329
|
|
282
|
-
//
|
283
|
-
.
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
@include border-radius(0 0 3px 3px);
|
290
|
-
.secondary-action {
|
291
|
-
float: right;
|
292
|
-
a {
|
293
|
-
line-height: 30px;
|
294
|
-
&:hover {
|
295
|
-
text-decoration: underline;
|
296
|
-
}
|
297
|
-
}
|
298
|
-
}
|
330
|
+
// For text that needs to appear as an input but should not be an input
|
331
|
+
.uneditable-input {
|
332
|
+
display: block;
|
333
|
+
background-color: $white;
|
334
|
+
border-color: #eee;
|
335
|
+
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
336
|
+
cursor: not-allowed;
|
299
337
|
}
|
300
338
|
|
301
|
-
//
|
302
|
-
|
303
|
-
|
339
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
340
|
+
@include placeholder($grayLight);
|
341
|
+
|
342
|
+
|
343
|
+
|
344
|
+
// HELP TEXT
|
345
|
+
// ---------
|
346
|
+
|
304
347
|
.help-block {
|
305
|
-
|
306
|
-
|
348
|
+
margin-top: 5px;
|
349
|
+
margin-bottom: 0;
|
307
350
|
color: $grayLight;
|
308
351
|
}
|
352
|
+
|
309
353
|
.help-inline {
|
354
|
+
display: inline-block;
|
355
|
+
@include ie7-inline-block();
|
356
|
+
margin-bottom: 9px;
|
357
|
+
vertical-align: middle;
|
310
358
|
padding-left: 5px;
|
311
|
-
*position: relative; /* IE6-7 */
|
312
|
-
*top: -5px; /* IE6-7 */
|
313
359
|
}
|
314
360
|
|
315
|
-
// Big blocks of help text
|
316
|
-
.help-block {
|
317
|
-
display: block;
|
318
|
-
max-width: 600px;
|
319
|
-
}
|
320
361
|
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
span {
|
325
|
-
padding: 0 2px 0 1px;
|
326
|
-
}
|
327
|
-
}
|
362
|
+
|
363
|
+
// INPUT GROUPS
|
364
|
+
// ------------
|
328
365
|
|
329
366
|
// Allow us to put symbols and text within the input field for a cleaner look
|
330
367
|
.input-prepend,
|
331
368
|
.input-append {
|
332
|
-
|
369
|
+
margin-bottom: 5px;
|
370
|
+
@include clearfix(); // Clear the float to prevent wrapping
|
371
|
+
input,
|
372
|
+
.uneditable-input {
|
333
373
|
@include border-radius(0 3px 3px 0);
|
374
|
+
&:focus {
|
375
|
+
position: relative;
|
376
|
+
z-index: 2;
|
377
|
+
}
|
378
|
+
}
|
379
|
+
.uneditable-input {
|
380
|
+
border-left-color: #ccc;
|
334
381
|
}
|
335
382
|
.add-on {
|
336
|
-
position: relative;
|
337
|
-
background: #f5f5f5;
|
338
|
-
border: 1px solid #ccc;
|
339
|
-
z-index: 2;
|
340
383
|
float: left;
|
341
384
|
display: block;
|
342
385
|
width: auto;
|
343
386
|
min-width: 16px;
|
344
|
-
height:
|
345
|
-
padding: 4px 4px 4px 5px;
|
387
|
+
height: $baseLineHeight;
|
346
388
|
margin-right: -1px;
|
389
|
+
padding: 4px 5px;
|
347
390
|
font-weight: normal;
|
348
|
-
line-height:
|
391
|
+
line-height: $baseLineHeight;
|
349
392
|
color: $grayLight;
|
350
393
|
text-align: center;
|
351
394
|
text-shadow: 0 1px 0 $white;
|
395
|
+
background-color: #f5f5f5;
|
396
|
+
border: 1px solid #ccc;
|
352
397
|
@include border-radius(3px 0 0 3px);
|
353
398
|
}
|
354
399
|
.active {
|
355
|
-
background: lighten($green, 30);
|
400
|
+
background-color: lighten($green, 30);
|
356
401
|
border-color: $green;
|
357
402
|
}
|
358
403
|
}
|
@@ -362,105 +407,110 @@ textarea[readonly] {
|
|
362
407
|
}
|
363
408
|
}
|
364
409
|
.input-append {
|
365
|
-
input
|
410
|
+
input,
|
411
|
+
.uneditable-input {
|
366
412
|
float: left;
|
367
413
|
@include border-radius(3px 0 0 3px);
|
368
414
|
}
|
415
|
+
.uneditable-input {
|
416
|
+
border-right-color: #ccc;
|
417
|
+
}
|
369
418
|
.add-on {
|
370
|
-
@include border-radius(0 3px 3px 0);
|
371
419
|
margin-right: 0;
|
372
420
|
margin-left: -1px;
|
421
|
+
@include border-radius(0 3px 3px 0);
|
373
422
|
}
|
374
|
-
|
423
|
+
input:first-child {
|
424
|
+
// In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
|
425
|
+
// inherit the sum of its ancestors' margins.
|
426
|
+
*margin-left: -160px;
|
375
427
|
|
376
|
-
|
377
|
-
|
378
|
-
margin: 0 0 5px;
|
379
|
-
width: 100%;
|
380
|
-
li {
|
381
|
-
display: block;
|
382
|
-
padding: 0;
|
383
|
-
width: 100%;
|
384
|
-
}
|
385
|
-
label {
|
386
|
-
display: block;
|
387
|
-
float: none;
|
388
|
-
width: auto;
|
389
|
-
padding: 0;
|
390
|
-
margin-left: 20px;
|
391
|
-
line-height: $baseline;
|
392
|
-
text-align: left;
|
393
|
-
white-space: normal;
|
394
|
-
strong {
|
395
|
-
color: $gray;
|
396
|
-
}
|
397
|
-
small {
|
398
|
-
font-size: $basefont - 2;
|
399
|
-
font-weight: normal;
|
428
|
+
&+.add-on {
|
429
|
+
*margin-left: -21px;
|
400
430
|
}
|
401
431
|
}
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
432
|
+
}
|
433
|
+
|
434
|
+
|
435
|
+
|
436
|
+
// SEARCH FORM
|
437
|
+
// -----------
|
438
|
+
|
439
|
+
.search-query {
|
440
|
+
padding-left: 14px;
|
441
|
+
padding-right: 14px;
|
442
|
+
margin-bottom: 0; // remove the default margin on all inputs
|
443
|
+
@include border-radius(14px);
|
444
|
+
}
|
445
|
+
|
446
|
+
|
447
|
+
|
448
|
+
// HORIZONTAL & VERTICAL FORMS
|
449
|
+
// ---------------------------
|
450
|
+
|
451
|
+
// Common properties
|
452
|
+
// -----------------
|
453
|
+
|
454
|
+
.form-search,
|
455
|
+
.form-inline,
|
456
|
+
.form-horizontal {
|
457
|
+
input,
|
458
|
+
textarea,
|
459
|
+
select,
|
460
|
+
.help-inline,
|
461
|
+
.uneditable-input {
|
462
|
+
display: inline-block;
|
415
463
|
margin-bottom: 0;
|
416
|
-
margin-left: -20px;
|
417
|
-
float: left;
|
418
464
|
}
|
419
465
|
}
|
466
|
+
.form-search label,
|
467
|
+
.form-inline label,
|
468
|
+
.form-search .input-append,
|
469
|
+
.form-inline .input-append,
|
470
|
+
.form-search .input-prepend,
|
471
|
+
.form-inline .input-prepend {
|
472
|
+
display: inline-block;
|
473
|
+
}
|
474
|
+
// Make the prepend and append add-on vertical-align: middle;
|
475
|
+
.form-search .input-append .add-on,
|
476
|
+
.form-inline .input-prepend .add-on,
|
477
|
+
.form-search .input-append .add-on,
|
478
|
+
.form-inline .input-prepend .add-on {
|
479
|
+
vertical-align: middle;
|
480
|
+
}
|
420
481
|
|
421
|
-
//
|
422
|
-
.
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
font-weight: bold;
|
435
|
-
text-align: left;
|
436
|
-
line-height: 20px;
|
437
|
-
padding-top: 0;
|
482
|
+
// Margin to space out fieldsets
|
483
|
+
.control-group {
|
484
|
+
margin-bottom: $baseLineHeight / 2;
|
485
|
+
}
|
486
|
+
|
487
|
+
// Horizontal-specific styles
|
488
|
+
// --------------------------
|
489
|
+
|
490
|
+
.form-horizontal {
|
491
|
+
// Legend collapses margin, so we're relegated to padding
|
492
|
+
legend + .control-group {
|
493
|
+
margin-top: $baseLineHeight;
|
494
|
+
-webkit-margin-top-collapse: separate;
|
438
495
|
}
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
}
|
496
|
+
// Increase spacing between groups
|
497
|
+
.control-group {
|
498
|
+
margin-bottom: $baseLineHeight;
|
499
|
+
@include clearfix();
|
444
500
|
}
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
padding-top: 0;
|
452
|
-
}
|
453
|
-
}
|
501
|
+
// Float the labels left
|
502
|
+
.control-group > label {
|
503
|
+
float: left;
|
504
|
+
width: 140px;
|
505
|
+
padding-top: 5px;
|
506
|
+
text-align: right;
|
454
507
|
}
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
padding-left: 10px;
|
459
|
-
margin-top: 0;
|
460
|
-
margin-left: -10px;
|
508
|
+
// Move over all input controls and content
|
509
|
+
.controls {
|
510
|
+
margin-left: 160px;
|
461
511
|
}
|
462
|
-
.actions
|
463
|
-
|
464
|
-
padding-left:
|
512
|
+
// Move over buttons in .form-actions to align with .controls
|
513
|
+
.form-actions {
|
514
|
+
padding-left: 160px;
|
465
515
|
}
|
466
516
|
}
|