bootstrap-sass-rtl 2.3.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.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/bootstrap-sass-rtl.gemspec +24 -0
- data/lib/bootstrap/sass/rtl.rb +10 -0
- data/lib/bootstrap/sass/rtl/version.rb +7 -0
- data/vendor/assets/stylesheets/bootstrap-responsive-rtl.scss +1 -0
- data/vendor/assets/stylesheets/bootstrap-rtl.scss +1 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_accordion.scss +34 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_alerts.scss +79 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_breadcrumbs.scss +24 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_button-groups.scss +229 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_buttons.scss +228 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_carousel.scss +158 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_close.scss +32 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_code.scss +61 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_component-animations.scss +22 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_dropdowns.scss +237 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_forms.scss +689 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_grid.scss +21 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_hero-unit.scss +25 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_labels-badges.scss +83 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_layouts.scss +16 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_media.scss +55 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_mixins.scss +690 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_modals.scss +95 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_navbar.scss +497 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_navs.scss +409 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_pager.scss +43 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_pagination.scss +123 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_popovers.scss +133 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_progress-bars.scss +122 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_reset.scss +216 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-1200px-min.scss +28 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-767px-max.scss +193 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-768px-979px.scss +19 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-navbar.scss +189 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_responsive-utilities.scss +74 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_scaffolding.scss +53 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_sprites.scss +197 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_tables.scss +235 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_thumbnails.scss +53 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_tooltip.scss +70 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_type.scss +247 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_utilities.scss +45 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_variables.scss +301 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/_wells.scss +29 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/bootstrap.scss +63 -0
- data/vendor/assets/stylesheets/bootstrap-rtl/responsive.scss +48 -0
- metadata +137 -0
@@ -0,0 +1,22 @@
|
|
1
|
+
//
|
2
|
+
// Component animations
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
.fade {
|
7
|
+
opacity: 0;
|
8
|
+
@include transition(opacity .15s linear);
|
9
|
+
&.in {
|
10
|
+
opacity: 1;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
.collapse {
|
15
|
+
position: relative;
|
16
|
+
height: 0;
|
17
|
+
overflow: hidden;
|
18
|
+
@include transition(height .35s ease);
|
19
|
+
&.in {
|
20
|
+
height: auto;
|
21
|
+
}
|
22
|
+
}
|
@@ -0,0 +1,237 @@
|
|
1
|
+
//
|
2
|
+
// Dropdown menus
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
7
|
+
.dropup,
|
8
|
+
.dropdown {
|
9
|
+
position: relative;
|
10
|
+
}
|
11
|
+
.dropdown-toggle {
|
12
|
+
// The caret makes the toggle a bit too tall in IE7
|
13
|
+
*margin-bottom: -3px;
|
14
|
+
}
|
15
|
+
.dropdown-toggle:active,
|
16
|
+
.open .dropdown-toggle {
|
17
|
+
outline: 0;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Dropdown arrow/caret
|
21
|
+
// --------------------
|
22
|
+
.caret {
|
23
|
+
display: inline-block;
|
24
|
+
width: 0;
|
25
|
+
height: 0;
|
26
|
+
vertical-align: top;
|
27
|
+
border-top: 4px solid $black;
|
28
|
+
border-left: 4px solid transparent;
|
29
|
+
border-right: 4px solid transparent;
|
30
|
+
content: "";
|
31
|
+
}
|
32
|
+
|
33
|
+
// Place the caret
|
34
|
+
.dropdown .caret {
|
35
|
+
margin-top: 8px;
|
36
|
+
margin-right: 2px;
|
37
|
+
}
|
38
|
+
|
39
|
+
// The dropdown menu (ul)
|
40
|
+
// ----------------------
|
41
|
+
.dropdown-menu {
|
42
|
+
position: absolute;
|
43
|
+
top: 100%;
|
44
|
+
right: 0;
|
45
|
+
z-index: $zindexDropdown;
|
46
|
+
display: none; // none by default, but block on "open" of the menu
|
47
|
+
float: right;
|
48
|
+
min-width: 160px;
|
49
|
+
padding: 5px 0;
|
50
|
+
margin: 2px 0 0; // override default ul
|
51
|
+
list-style: none;
|
52
|
+
background-color: $dropdownBackground;
|
53
|
+
border: 1px solid #ccc; // Fallback for IE7-8
|
54
|
+
border: 1px solid $dropdownBorder;
|
55
|
+
*border-left-width: 2px;
|
56
|
+
*border-bottom-width: 2px;
|
57
|
+
@include border-radius(6px);
|
58
|
+
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
59
|
+
-webkit-background-clip: padding-box;
|
60
|
+
-moz-background-clip: padding;
|
61
|
+
background-clip: padding-box;
|
62
|
+
|
63
|
+
// Aligns the dropdown menu to left
|
64
|
+
&.pull-right {
|
65
|
+
left: 0;
|
66
|
+
right: auto;
|
67
|
+
}
|
68
|
+
|
69
|
+
// Dividers (basically an hr) within the dropdown
|
70
|
+
.divider {
|
71
|
+
@include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
|
72
|
+
}
|
73
|
+
|
74
|
+
// Links within the dropdown menu
|
75
|
+
> li > a {
|
76
|
+
display: block;
|
77
|
+
padding: 3px 20px;
|
78
|
+
clear: both;
|
79
|
+
font-weight: normal;
|
80
|
+
line-height: $baseLineHeight;
|
81
|
+
color: $dropdownLinkColor;
|
82
|
+
white-space: nowrap;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
// Hover/Focus state
|
87
|
+
// -----------
|
88
|
+
.dropdown-menu > li > a:hover,
|
89
|
+
.dropdown-menu > li > a:focus,
|
90
|
+
.dropdown-submenu:hover > a,
|
91
|
+
.dropdown-submenu:focus > a {
|
92
|
+
text-decoration: none;
|
93
|
+
color: $dropdownLinkColorHover;
|
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
|
+
.dropdown-menu > .active > a:focus {
|
102
|
+
color: $dropdownLinkColorActive;
|
103
|
+
text-decoration: none;
|
104
|
+
outline: 0;
|
105
|
+
@include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
|
106
|
+
}
|
107
|
+
|
108
|
+
// Disabled state
|
109
|
+
// --------------
|
110
|
+
// Gray out text and ensure the hover/focus state remains gray
|
111
|
+
.dropdown-menu > .disabled > a,
|
112
|
+
.dropdown-menu > .disabled > a:hover,
|
113
|
+
.dropdown-menu > .disabled > a:focus {
|
114
|
+
color: $grayLight;
|
115
|
+
}
|
116
|
+
// Nuke hover/focus effects
|
117
|
+
.dropdown-menu > .disabled > a:hover,
|
118
|
+
.dropdown-menu > .disabled > a:focus {
|
119
|
+
text-decoration: none;
|
120
|
+
background-color: transparent;
|
121
|
+
background-image: none; // Remove CSS gradient
|
122
|
+
@include reset-filter();
|
123
|
+
cursor: default;
|
124
|
+
}
|
125
|
+
|
126
|
+
// Open state for the dropdown
|
127
|
+
// ---------------------------
|
128
|
+
.open {
|
129
|
+
// IE7's z-index only goes to the nearest positioned ancestor, which would
|
130
|
+
// make the menu appear below buttons that appeared later on the page
|
131
|
+
*z-index: $zindexDropdown;
|
132
|
+
|
133
|
+
& > .dropdown-menu {
|
134
|
+
display: block;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
// left aligned dropdowns
|
139
|
+
// ---------------------------
|
140
|
+
.pull-right > .dropdown-menu {
|
141
|
+
left: 0;
|
142
|
+
right: auto;
|
143
|
+
}
|
144
|
+
|
145
|
+
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
146
|
+
// ------------------------------------------------------
|
147
|
+
// Just add .dropup after the standard .dropdown class and you're set, bro.
|
148
|
+
// TODO: abstract this so that the navbar fixed styles are not placed here?
|
149
|
+
.dropup,
|
150
|
+
.navbar-fixed-bottom .dropdown {
|
151
|
+
// Reverse the caret
|
152
|
+
.caret {
|
153
|
+
border-top: 0;
|
154
|
+
border-bottom: 4px solid $black;
|
155
|
+
content: "";
|
156
|
+
}
|
157
|
+
// Different positioning for bottom up menu
|
158
|
+
.dropdown-menu {
|
159
|
+
top: auto;
|
160
|
+
bottom: 100%;
|
161
|
+
margin-bottom: 1px;
|
162
|
+
}
|
163
|
+
}
|
164
|
+
|
165
|
+
// Sub menus
|
166
|
+
// ---------------------------
|
167
|
+
.dropdown-submenu {
|
168
|
+
position: relative;
|
169
|
+
}
|
170
|
+
// Default dropdowns
|
171
|
+
.dropdown-submenu > .dropdown-menu {
|
172
|
+
top: 0;
|
173
|
+
right: 100%;
|
174
|
+
margin-top: -6px;
|
175
|
+
margin-right: -1px;
|
176
|
+
@include border-radius(0 6px 6px 6px);
|
177
|
+
}
|
178
|
+
.dropdown-submenu:hover > .dropdown-menu {
|
179
|
+
display: block;
|
180
|
+
}
|
181
|
+
|
182
|
+
// Dropups
|
183
|
+
.dropup .dropdown-submenu > .dropdown-menu {
|
184
|
+
top: auto;
|
185
|
+
bottom: 0;
|
186
|
+
margin-top: 0;
|
187
|
+
margin-bottom: -2px;
|
188
|
+
@include border-radius(5px 0 5px 5px);
|
189
|
+
}
|
190
|
+
|
191
|
+
// Caret to indicate there is a submenu
|
192
|
+
.dropdown-submenu > a:after {
|
193
|
+
display: block;
|
194
|
+
content: " ";
|
195
|
+
float: left;
|
196
|
+
width: 0;
|
197
|
+
height: 0;
|
198
|
+
border-color: transparent;
|
199
|
+
border-style: solid;
|
200
|
+
border-width: 5px 5px 5px 0;
|
201
|
+
border-right-color: darken($dropdownBackground, 20%);
|
202
|
+
margin-top: 5px;
|
203
|
+
margin-left: -10px;
|
204
|
+
}
|
205
|
+
.dropdown-submenu:hover > a:after {
|
206
|
+
border-right-color: $dropdownLinkColorHover;
|
207
|
+
}
|
208
|
+
|
209
|
+
// Left aligned submenus
|
210
|
+
.dropdown-submenu.pull-left {
|
211
|
+
// Undo the float
|
212
|
+
// Yes, this is awkward since .pull-right adds a float, but it sticks to our conventions elsewhere.
|
213
|
+
float: none;
|
214
|
+
|
215
|
+
// Positioning the submenu
|
216
|
+
> .dropdown-menu {
|
217
|
+
right: -100%;
|
218
|
+
margin-right: 10px;
|
219
|
+
@include border-radius(6px 6px 6px 0);
|
220
|
+
}
|
221
|
+
}
|
222
|
+
|
223
|
+
// Tweak nav headers
|
224
|
+
// -----------------
|
225
|
+
// Increase padding from 15px to 20px on sides
|
226
|
+
.dropdown .dropdown-menu .nav-header {
|
227
|
+
padding-right: 20px;
|
228
|
+
padding-left: 20px;
|
229
|
+
}
|
230
|
+
|
231
|
+
// Typeahead
|
232
|
+
// ---------
|
233
|
+
.typeahead {
|
234
|
+
z-index: 1051;
|
235
|
+
margin-top: 2px; // give it some space to breathe
|
236
|
+
@include border-radius($baseBorderRadius);
|
237
|
+
}
|
@@ -0,0 +1,689 @@
|
|
1
|
+
//
|
2
|
+
// Forms
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// GENERAL STYLES
|
7
|
+
// --------------
|
8
|
+
|
9
|
+
// Make all forms have space below them
|
10
|
+
form {
|
11
|
+
margin: 0 0 $baseLineHeight;
|
12
|
+
}
|
13
|
+
|
14
|
+
fieldset {
|
15
|
+
padding: 0;
|
16
|
+
margin: 0;
|
17
|
+
border: 0;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Groups of fields with labels on top (legends)
|
21
|
+
legend {
|
22
|
+
display: block;
|
23
|
+
width: 100%;
|
24
|
+
padding: 0;
|
25
|
+
margin-bottom: $baseLineHeight;
|
26
|
+
font-size: $baseFontSize * 1.5;
|
27
|
+
line-height: $baseLineHeight * 2;
|
28
|
+
color: $grayDark;
|
29
|
+
border: 0;
|
30
|
+
border-bottom: 1px solid #e5e5e5;
|
31
|
+
|
32
|
+
// Small
|
33
|
+
small {
|
34
|
+
font-size: $baseLineHeight * .75;
|
35
|
+
color: $grayLight;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
// Set font for forms
|
40
|
+
label,
|
41
|
+
input,
|
42
|
+
button,
|
43
|
+
select,
|
44
|
+
textarea {
|
45
|
+
@include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
|
46
|
+
}
|
47
|
+
input,
|
48
|
+
button,
|
49
|
+
select,
|
50
|
+
textarea {
|
51
|
+
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
52
|
+
}
|
53
|
+
|
54
|
+
// Identify controls by their labels
|
55
|
+
label {
|
56
|
+
display: block;
|
57
|
+
margin-bottom: 5px;
|
58
|
+
}
|
59
|
+
|
60
|
+
// Form controls
|
61
|
+
// -------------------------
|
62
|
+
|
63
|
+
// Shared size and type resets
|
64
|
+
select,
|
65
|
+
textarea,
|
66
|
+
input[type="text"],
|
67
|
+
input[type="password"],
|
68
|
+
input[type="datetime"],
|
69
|
+
input[type="datetime-local"],
|
70
|
+
input[type="date"],
|
71
|
+
input[type="month"],
|
72
|
+
input[type="time"],
|
73
|
+
input[type="week"],
|
74
|
+
input[type="number"],
|
75
|
+
input[type="email"],
|
76
|
+
input[type="url"],
|
77
|
+
input[type="search"],
|
78
|
+
input[type="tel"],
|
79
|
+
input[type="color"],
|
80
|
+
.uneditable-input {
|
81
|
+
display: inline-block;
|
82
|
+
height: $baseLineHeight;
|
83
|
+
padding: 4px 6px;
|
84
|
+
margin-bottom: $baseLineHeight / 2;;
|
85
|
+
font-size: $baseFontSize;
|
86
|
+
line-height: $baseLineHeight;
|
87
|
+
color: $gray;
|
88
|
+
@include border-radius($inputBorderRadius);
|
89
|
+
vertical-align: middle;
|
90
|
+
}
|
91
|
+
|
92
|
+
// Reset appearance properties for textual inputs and textarea
|
93
|
+
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
94
|
+
input,
|
95
|
+
textarea,
|
96
|
+
.uneditable-input {
|
97
|
+
width: 206px; // plus 12px padding and 2px border
|
98
|
+
}
|
99
|
+
// Reset height since textareas have rows
|
100
|
+
textarea {
|
101
|
+
height: auto;
|
102
|
+
}
|
103
|
+
// Everything else
|
104
|
+
textarea,
|
105
|
+
input[type="text"],
|
106
|
+
input[type="password"],
|
107
|
+
input[type="datetime"],
|
108
|
+
input[type="datetime-local"],
|
109
|
+
input[type="date"],
|
110
|
+
input[type="month"],
|
111
|
+
input[type="time"],
|
112
|
+
input[type="week"],
|
113
|
+
input[type="number"],
|
114
|
+
input[type="email"],
|
115
|
+
input[type="url"],
|
116
|
+
input[type="search"],
|
117
|
+
input[type="tel"],
|
118
|
+
input[type="color"],
|
119
|
+
.uneditable-input {
|
120
|
+
background-color: $inputBackground;
|
121
|
+
border: 1px solid $inputBorder;
|
122
|
+
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
123
|
+
@include transition(border linear .2s, box-shadow linear .2s);
|
124
|
+
|
125
|
+
// Focus state
|
126
|
+
&:focus {
|
127
|
+
border-color: rgba(82,168,236,.8);
|
128
|
+
outline: 0;
|
129
|
+
outline: thin dotted \9; /* IE6-9 */
|
130
|
+
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
|
131
|
+
}
|
132
|
+
}
|
133
|
+
|
134
|
+
// Position radios and checkboxes better
|
135
|
+
input[type="radio"],
|
136
|
+
input[type="checkbox"] {
|
137
|
+
margin: 4px 0 0;
|
138
|
+
*margin-top: 0; /* IE7 */
|
139
|
+
margin-top: 1px \9; /* IE8-9 */
|
140
|
+
line-height: normal;
|
141
|
+
}
|
142
|
+
|
143
|
+
// Reset width of input images, buttons, radios, checkboxes
|
144
|
+
input[type="file"],
|
145
|
+
input[type="image"],
|
146
|
+
input[type="submit"],
|
147
|
+
input[type="reset"],
|
148
|
+
input[type="button"],
|
149
|
+
input[type="radio"],
|
150
|
+
input[type="checkbox"] {
|
151
|
+
width: auto; // Override of generic input selector
|
152
|
+
}
|
153
|
+
|
154
|
+
// Set the height of select and file controls to match text inputs
|
155
|
+
select,
|
156
|
+
input[type="file"] {
|
157
|
+
height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
158
|
+
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
159
|
+
line-height: $inputHeight;
|
160
|
+
}
|
161
|
+
|
162
|
+
// Make select elements obey height by applying a border
|
163
|
+
select {
|
164
|
+
width: 220px; // default input width + 10px of padding that doesn't get applied
|
165
|
+
border: 1px solid $inputBorder;
|
166
|
+
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
167
|
+
}
|
168
|
+
|
169
|
+
// Make multiple select elements height not fixed
|
170
|
+
select[multiple],
|
171
|
+
select[size] {
|
172
|
+
height: auto;
|
173
|
+
}
|
174
|
+
|
175
|
+
// Focus for select, file, radio, and checkbox
|
176
|
+
select:focus,
|
177
|
+
input[type="file"]:focus,
|
178
|
+
input[type="radio"]:focus,
|
179
|
+
input[type="checkbox"]:focus {
|
180
|
+
@include tab-focus();
|
181
|
+
}
|
182
|
+
|
183
|
+
|
184
|
+
// Uneditable inputs
|
185
|
+
// -------------------------
|
186
|
+
|
187
|
+
// Make uneditable inputs look inactive
|
188
|
+
.uneditable-input,
|
189
|
+
.uneditable-textarea {
|
190
|
+
color: $grayLight;
|
191
|
+
background-color: darken($inputBackground, 1%);
|
192
|
+
border-color: $inputBorder;
|
193
|
+
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
194
|
+
cursor: not-allowed;
|
195
|
+
}
|
196
|
+
|
197
|
+
// For text that needs to appear as an input but should not be an input
|
198
|
+
.uneditable-input {
|
199
|
+
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
200
|
+
white-space: nowrap;
|
201
|
+
}
|
202
|
+
|
203
|
+
// Make uneditable textareas behave like a textarea
|
204
|
+
.uneditable-textarea {
|
205
|
+
width: auto;
|
206
|
+
height: auto;
|
207
|
+
}
|
208
|
+
|
209
|
+
|
210
|
+
// Placeholder
|
211
|
+
// -------------------------
|
212
|
+
|
213
|
+
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
|
214
|
+
input,
|
215
|
+
textarea {
|
216
|
+
@include placeholder();
|
217
|
+
}
|
218
|
+
|
219
|
+
|
220
|
+
// CHECKBOXES & RADIOS
|
221
|
+
// -------------------
|
222
|
+
|
223
|
+
// Indent the labels to position radios/checkboxes as hanging
|
224
|
+
.radio,
|
225
|
+
.checkbox {
|
226
|
+
min-height: $baseLineHeight; // clear the floating input if there is no label text
|
227
|
+
padding-right: 20px;
|
228
|
+
}
|
229
|
+
.radio input[type="radio"],
|
230
|
+
.checkbox input[type="checkbox"] {
|
231
|
+
float: right;
|
232
|
+
margin-right: -20px;
|
233
|
+
}
|
234
|
+
|
235
|
+
// Move the options list down to align with labels
|
236
|
+
.controls > .radio:first-child,
|
237
|
+
.controls > .checkbox:first-child {
|
238
|
+
padding-top: 5px; // has to be padding because margin collaspes
|
239
|
+
}
|
240
|
+
|
241
|
+
// Radios and checkboxes on same line
|
242
|
+
// TODO v3: Convert .inline to .control-inline
|
243
|
+
.radio.inline,
|
244
|
+
.checkbox.inline {
|
245
|
+
display: inline-block;
|
246
|
+
padding-top: 5px;
|
247
|
+
margin-bottom: 0;
|
248
|
+
vertical-align: middle;
|
249
|
+
}
|
250
|
+
.radio.inline + .radio.inline,
|
251
|
+
.checkbox.inline + .checkbox.inline {
|
252
|
+
margin-right: 10px; // space out consecutive inline controls
|
253
|
+
}
|
254
|
+
|
255
|
+
|
256
|
+
|
257
|
+
// INPUT SIZES
|
258
|
+
// -----------
|
259
|
+
|
260
|
+
// General classes for quick sizes
|
261
|
+
.input-mini { width: 60px; }
|
262
|
+
.input-small { width: 90px; }
|
263
|
+
.input-medium { width: 150px; }
|
264
|
+
.input-large { width: 210px; }
|
265
|
+
.input-xlarge { width: 270px; }
|
266
|
+
.input-xxlarge { width: 530px; }
|
267
|
+
|
268
|
+
// Grid style input sizes
|
269
|
+
input[class*="span"],
|
270
|
+
select[class*="span"],
|
271
|
+
textarea[class*="span"],
|
272
|
+
.uneditable-input[class*="span"],
|
273
|
+
// Redeclare since the fluid row class is more specific
|
274
|
+
.row-fluid input[class*="span"],
|
275
|
+
.row-fluid select[class*="span"],
|
276
|
+
.row-fluid textarea[class*="span"],
|
277
|
+
.row-fluid .uneditable-input[class*="span"] {
|
278
|
+
float: none;
|
279
|
+
margin-right: 0;
|
280
|
+
}
|
281
|
+
// Ensure input-prepend/append never wraps
|
282
|
+
.input-append input[class*="span"],
|
283
|
+
.input-append .uneditable-input[class*="span"],
|
284
|
+
.input-prepend input[class*="span"],
|
285
|
+
.input-prepend .uneditable-input[class*="span"],
|
286
|
+
.row-fluid input[class*="span"],
|
287
|
+
.row-fluid select[class*="span"],
|
288
|
+
.row-fluid textarea[class*="span"],
|
289
|
+
.row-fluid .uneditable-input[class*="span"],
|
290
|
+
.row-fluid .input-prepend [class*="span"],
|
291
|
+
.row-fluid .input-append [class*="span"] {
|
292
|
+
display: inline-block;
|
293
|
+
}
|
294
|
+
|
295
|
+
|
296
|
+
|
297
|
+
// GRID SIZING FOR INPUTS
|
298
|
+
// ----------------------
|
299
|
+
|
300
|
+
// Grid sizes
|
301
|
+
@include grid-input($gridColumnWidth, $gridGutterWidth);
|
302
|
+
|
303
|
+
// Control row for multiple inputs per line
|
304
|
+
.controls-row {
|
305
|
+
@include clearfix(); // Clear the float from controls
|
306
|
+
}
|
307
|
+
|
308
|
+
// Float to collapse white-space for proper grid alignment
|
309
|
+
.controls-row [class*="span"],
|
310
|
+
// Redeclare the fluid grid collapse since we undo the float for inputs
|
311
|
+
.row-fluid .controls-row [class*="span"] {
|
312
|
+
float: right;
|
313
|
+
}
|
314
|
+
// Explicity set top padding on all checkboxes/radios, not just first-child
|
315
|
+
.controls-row .checkbox[class*="span"],
|
316
|
+
.controls-row .radio[class*="span"] {
|
317
|
+
padding-top: 5px;
|
318
|
+
}
|
319
|
+
|
320
|
+
|
321
|
+
|
322
|
+
|
323
|
+
// DISABLED STATE
|
324
|
+
// --------------
|
325
|
+
|
326
|
+
// Disabled and read-only inputs
|
327
|
+
input[disabled],
|
328
|
+
select[disabled],
|
329
|
+
textarea[disabled],
|
330
|
+
input[readonly],
|
331
|
+
select[readonly],
|
332
|
+
textarea[readonly] {
|
333
|
+
cursor: not-allowed;
|
334
|
+
background-color: $inputDisabledBackground;
|
335
|
+
}
|
336
|
+
// Explicitly reset the colors here
|
337
|
+
input[type="radio"][disabled],
|
338
|
+
input[type="checkbox"][disabled],
|
339
|
+
input[type="radio"][readonly],
|
340
|
+
input[type="checkbox"][readonly] {
|
341
|
+
background-color: transparent;
|
342
|
+
}
|
343
|
+
|
344
|
+
|
345
|
+
|
346
|
+
|
347
|
+
// FORM FIELD FEEDBACK STATES
|
348
|
+
// --------------------------
|
349
|
+
|
350
|
+
// Warning
|
351
|
+
.control-group.warning {
|
352
|
+
@include formFieldState($warningText, $warningText, $warningBackground);
|
353
|
+
}
|
354
|
+
// Error
|
355
|
+
.control-group.error {
|
356
|
+
@include formFieldState($errorText, $errorText, $errorBackground);
|
357
|
+
}
|
358
|
+
// Success
|
359
|
+
.control-group.success {
|
360
|
+
@include formFieldState($successText, $successText, $successBackground);
|
361
|
+
}
|
362
|
+
// Info
|
363
|
+
.control-group.info {
|
364
|
+
@include formFieldState($infoText, $infoText, $infoBackground);
|
365
|
+
}
|
366
|
+
|
367
|
+
// HTML5 invalid states
|
368
|
+
// Shares styles with the .control-group.error above
|
369
|
+
input:focus:invalid,
|
370
|
+
textarea:focus:invalid,
|
371
|
+
select:focus:invalid {
|
372
|
+
color: #b94a48;
|
373
|
+
border-color: #ee5f5b;
|
374
|
+
&:focus {
|
375
|
+
border-color: darken(#ee5f5b, 10%);
|
376
|
+
@include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
|
377
|
+
}
|
378
|
+
}
|
379
|
+
|
380
|
+
|
381
|
+
|
382
|
+
// FORM ACTIONS
|
383
|
+
// ------------
|
384
|
+
|
385
|
+
.form-actions {
|
386
|
+
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
|
387
|
+
margin-top: $baseLineHeight;
|
388
|
+
margin-bottom: $baseLineHeight;
|
389
|
+
background-color: $formActionsBackground;
|
390
|
+
border-top: 1px solid #e5e5e5;
|
391
|
+
@include clearfix(); // Adding clearfix to allow for .pull-left button containers
|
392
|
+
}
|
393
|
+
|
394
|
+
|
395
|
+
|
396
|
+
// HELP TEXT
|
397
|
+
// ---------
|
398
|
+
|
399
|
+
.help-block,
|
400
|
+
.help-inline {
|
401
|
+
color: lighten($textColor, 15%); // lighten the text some for contrast
|
402
|
+
}
|
403
|
+
|
404
|
+
.help-block {
|
405
|
+
display: block; // account for any element using help-block
|
406
|
+
margin-bottom: $baseLineHeight / 2;
|
407
|
+
}
|
408
|
+
|
409
|
+
.help-inline {
|
410
|
+
display: inline-block;
|
411
|
+
@include ie7-inline-block();
|
412
|
+
vertical-align: middle;
|
413
|
+
padding-right: 5px;
|
414
|
+
}
|
415
|
+
|
416
|
+
|
417
|
+
|
418
|
+
// INPUT GROUPS
|
419
|
+
// ------------
|
420
|
+
|
421
|
+
// Allow us to put symbols and text within the input field for a cleaner look
|
422
|
+
.input-append,
|
423
|
+
.input-prepend {
|
424
|
+
display: inline-block;
|
425
|
+
margin-bottom: $baseLineHeight / 2;
|
426
|
+
vertical-align: middle;
|
427
|
+
font-size: 0; // white space collapse hack
|
428
|
+
white-space: nowrap; // Prevent span and input from separating
|
429
|
+
|
430
|
+
// Reset the white space collapse hack
|
431
|
+
input,
|
432
|
+
select,
|
433
|
+
.uneditable-input,
|
434
|
+
.dropdown-menu,
|
435
|
+
.popover {
|
436
|
+
font-size: $baseFontSize;
|
437
|
+
}
|
438
|
+
|
439
|
+
input,
|
440
|
+
select,
|
441
|
+
.uneditable-input {
|
442
|
+
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
|
443
|
+
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
444
|
+
*margin-right: 0;
|
445
|
+
vertical-align: top;
|
446
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
447
|
+
// Make input on top when focused so blue border and shadow always show
|
448
|
+
&:focus {
|
449
|
+
z-index: 2;
|
450
|
+
}
|
451
|
+
}
|
452
|
+
.add-on {
|
453
|
+
display: inline-block;
|
454
|
+
width: auto;
|
455
|
+
height: $baseLineHeight;
|
456
|
+
min-width: 16px;
|
457
|
+
padding: 4px 5px;
|
458
|
+
font-size: $baseFontSize;
|
459
|
+
font-weight: normal;
|
460
|
+
line-height: $baseLineHeight;
|
461
|
+
text-align: center;
|
462
|
+
text-shadow: 0 1px 0 $white;
|
463
|
+
background-color: $grayLighter;
|
464
|
+
border: 1px solid #ccc;
|
465
|
+
}
|
466
|
+
.add-on,
|
467
|
+
.btn,
|
468
|
+
.btn-group > .dropdown-toggle {
|
469
|
+
vertical-align: top;
|
470
|
+
@include border-radius(0);
|
471
|
+
}
|
472
|
+
.active {
|
473
|
+
background-color: lighten($green, 30);
|
474
|
+
border-color: $green;
|
475
|
+
}
|
476
|
+
}
|
477
|
+
|
478
|
+
.input-prepend {
|
479
|
+
.add-on,
|
480
|
+
.btn {
|
481
|
+
margin-left: -1px;
|
482
|
+
}
|
483
|
+
.add-on:first-child,
|
484
|
+
.btn:first-child {
|
485
|
+
// FYI, `.btn:first-child` accounts for a button group that's prepended
|
486
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
487
|
+
}
|
488
|
+
}
|
489
|
+
|
490
|
+
.input-append {
|
491
|
+
input,
|
492
|
+
select,
|
493
|
+
.uneditable-input {
|
494
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
495
|
+
+ .btn-group .btn:last-child {
|
496
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
497
|
+
}
|
498
|
+
}
|
499
|
+
.add-on,
|
500
|
+
.btn,
|
501
|
+
.btn-group {
|
502
|
+
margin-right: -1px;
|
503
|
+
}
|
504
|
+
.add-on:last-child,
|
505
|
+
.btn:last-child,
|
506
|
+
.btn-group:last-child > .dropdown-toggle {
|
507
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
508
|
+
}
|
509
|
+
}
|
510
|
+
|
511
|
+
// Remove all border-radius for inputs with both prepend and append
|
512
|
+
.input-prepend.input-append {
|
513
|
+
input,
|
514
|
+
select,
|
515
|
+
.uneditable-input {
|
516
|
+
@include border-radius(0);
|
517
|
+
+ .btn-group .btn {
|
518
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
519
|
+
}
|
520
|
+
}
|
521
|
+
.add-on:first-child,
|
522
|
+
.btn:first-child {
|
523
|
+
margin-left: -1px;
|
524
|
+
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
525
|
+
}
|
526
|
+
.add-on:last-child,
|
527
|
+
.btn:last-child {
|
528
|
+
margin-right: -1px;
|
529
|
+
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
530
|
+
}
|
531
|
+
.btn-group:first-child {
|
532
|
+
margin-right: 0;
|
533
|
+
}
|
534
|
+
}
|
535
|
+
|
536
|
+
|
537
|
+
|
538
|
+
|
539
|
+
// SEARCH FORM
|
540
|
+
// -----------
|
541
|
+
|
542
|
+
input.search-query {
|
543
|
+
padding-left: 14px;
|
544
|
+
padding-left: 4px \9;
|
545
|
+
padding-right: 14px;
|
546
|
+
padding-right: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
547
|
+
margin-bottom: 0; // Remove the default margin on all inputs
|
548
|
+
@include border-radius(15px);
|
549
|
+
}
|
550
|
+
|
551
|
+
/* Allow for input prepend/append in search forms */
|
552
|
+
.form-search .input-append .search-query,
|
553
|
+
.form-search .input-prepend .search-query {
|
554
|
+
@include border-radius(0); // Override due to specificity
|
555
|
+
}
|
556
|
+
.form-search .input-append .search-query {
|
557
|
+
@include border-radius(14px 14px 0 0);
|
558
|
+
}
|
559
|
+
.form-search .input-append .btn {
|
560
|
+
@include border-radius(0 0 14px 14px);
|
561
|
+
}
|
562
|
+
.form-search .input-prepend .search-query {
|
563
|
+
@include border-radius(0 0 14px 14px);
|
564
|
+
}
|
565
|
+
.form-search .input-prepend .btn {
|
566
|
+
@include border-radius(14px 14px 0 0);
|
567
|
+
}
|
568
|
+
|
569
|
+
|
570
|
+
|
571
|
+
|
572
|
+
// HORIZONTAL & VERTICAL FORMS
|
573
|
+
// ---------------------------
|
574
|
+
|
575
|
+
// Common properties
|
576
|
+
// -----------------
|
577
|
+
|
578
|
+
.form-search,
|
579
|
+
.form-inline,
|
580
|
+
.form-horizontal {
|
581
|
+
input,
|
582
|
+
textarea,
|
583
|
+
select,
|
584
|
+
.help-inline,
|
585
|
+
.uneditable-input,
|
586
|
+
.input-prepend,
|
587
|
+
.input-append {
|
588
|
+
display: inline-block;
|
589
|
+
@include ie7-inline-block();
|
590
|
+
margin-bottom: 0;
|
591
|
+
vertical-align: middle;
|
592
|
+
}
|
593
|
+
// Re-hide hidden elements due to specifity
|
594
|
+
.hide {
|
595
|
+
display: none;
|
596
|
+
}
|
597
|
+
}
|
598
|
+
.form-search label,
|
599
|
+
.form-inline label,
|
600
|
+
.form-search .btn-group,
|
601
|
+
.form-inline .btn-group {
|
602
|
+
display: inline-block;
|
603
|
+
}
|
604
|
+
// Remove margin for input-prepend/-append
|
605
|
+
.form-search .input-append,
|
606
|
+
.form-inline .input-append,
|
607
|
+
.form-search .input-prepend,
|
608
|
+
.form-inline .input-prepend {
|
609
|
+
margin-bottom: 0;
|
610
|
+
}
|
611
|
+
// Inline checkbox/radio labels (remove padding on left)
|
612
|
+
.form-search .radio,
|
613
|
+
.form-search .checkbox,
|
614
|
+
.form-inline .radio,
|
615
|
+
.form-inline .checkbox {
|
616
|
+
padding-right: 0;
|
617
|
+
margin-bottom: 0;
|
618
|
+
vertical-align: middle;
|
619
|
+
}
|
620
|
+
// Remove float and margin, set to inline-block
|
621
|
+
.form-search .radio input[type="radio"],
|
622
|
+
.form-search .checkbox input[type="checkbox"],
|
623
|
+
.form-inline .radio input[type="radio"],
|
624
|
+
.form-inline .checkbox input[type="checkbox"] {
|
625
|
+
float: right;
|
626
|
+
margin-left: 3px;
|
627
|
+
margin-right: 0;
|
628
|
+
}
|
629
|
+
|
630
|
+
|
631
|
+
// Margin to space out fieldsets
|
632
|
+
.control-group {
|
633
|
+
margin-bottom: $baseLineHeight / 2;
|
634
|
+
}
|
635
|
+
|
636
|
+
// Legend collapses margin, so next element is responsible for spacing
|
637
|
+
legend + .control-group {
|
638
|
+
margin-top: $baseLineHeight;
|
639
|
+
-webkit-margin-top-collapse: separate;
|
640
|
+
}
|
641
|
+
|
642
|
+
// Horizontal-specific styles
|
643
|
+
// --------------------------
|
644
|
+
|
645
|
+
.form-horizontal {
|
646
|
+
// Increase spacing between groups
|
647
|
+
.control-group {
|
648
|
+
margin-bottom: $baseLineHeight;
|
649
|
+
@include clearfix();
|
650
|
+
}
|
651
|
+
// Float the labels left
|
652
|
+
.control-label {
|
653
|
+
float: right;
|
654
|
+
width: $horizontalComponentOffset - 20;
|
655
|
+
padding-top: 5px;
|
656
|
+
text-align: left;
|
657
|
+
}
|
658
|
+
// Move over all input controls and content
|
659
|
+
.controls {
|
660
|
+
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
661
|
+
// don't inherit the margin of the parent, in this case .controls
|
662
|
+
*display: inline-block;
|
663
|
+
*padding-right: 20px;
|
664
|
+
margin-right: $horizontalComponentOffset;
|
665
|
+
*margin-right: 0;
|
666
|
+
&:first-child {
|
667
|
+
*padding-right: $horizontalComponentOffset;
|
668
|
+
}
|
669
|
+
}
|
670
|
+
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
671
|
+
.help-block {
|
672
|
+
margin-bottom: 0;
|
673
|
+
}
|
674
|
+
// And apply it only to .help-block instances that follow a form control
|
675
|
+
input,
|
676
|
+
select,
|
677
|
+
textarea,
|
678
|
+
.uneditable-input,
|
679
|
+
.input-prepend,
|
680
|
+
.input-append {
|
681
|
+
+ .help-block {
|
682
|
+
margin-top: $baseLineHeight / 2;
|
683
|
+
}
|
684
|
+
}
|
685
|
+
// Move over buttons in .form-actions to align with .controls
|
686
|
+
.form-actions {
|
687
|
+
padding-right: $horizontalComponentOffset;
|
688
|
+
}
|
689
|
+
}
|