compass_twitter_bootstrap 0.1.3 → 0.1.4
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/lib/compass_twitter_bootstrap/version.rb +1 -1
- data/stylesheets/compass_twitter_bootstrap/_forms.scss +39 -15
- data/stylesheets/compass_twitter_bootstrap/_patterns.scss +396 -329
- data/stylesheets/compass_twitter_bootstrap/_preboot.scss +48 -56
- data/stylesheets/compass_twitter_bootstrap/_reset.scss +1 -11
- data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss +17 -116
- metadata +6 -6
|
@@ -61,29 +61,58 @@ input[type=radio] {
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
// Inputs, Textareas, Selects
|
|
64
|
-
input
|
|
65
|
-
input[type=password],
|
|
64
|
+
input,
|
|
66
65
|
textarea,
|
|
67
66
|
select,
|
|
68
67
|
.uneditable-input {
|
|
69
68
|
display: inline-block;
|
|
70
69
|
width: 210px;
|
|
70
|
+
height: $baseline;
|
|
71
71
|
padding: 4px;
|
|
72
72
|
font-size: 13px;
|
|
73
73
|
line-height: $baseline;
|
|
74
|
-
height: $baseline;
|
|
75
74
|
color: $gray;
|
|
76
75
|
border: 1px solid #ccc;
|
|
77
76
|
@include border-radius(3px);
|
|
78
77
|
}
|
|
78
|
+
|
|
79
|
+
/* mini reset for non-html5 file types */
|
|
80
|
+
input[type=checkbox],
|
|
81
|
+
input[type=radio] {
|
|
82
|
+
width: auto;
|
|
83
|
+
height: auto;
|
|
84
|
+
padding: 0;
|
|
85
|
+
margin: 3px 0;
|
|
86
|
+
*margin-top: 0; /* IE6-7 */
|
|
87
|
+
line-height: normal;
|
|
88
|
+
border: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
input[type=file] {
|
|
92
|
+
background-color: #fff;
|
|
93
|
+
padding: initial;
|
|
94
|
+
border: initial;
|
|
95
|
+
line-height: initial;
|
|
96
|
+
@include box-shadow(none);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
input[type=button],
|
|
100
|
+
input[type=reset],
|
|
101
|
+
input[type=submit] {
|
|
102
|
+
width: auto;
|
|
103
|
+
height: auto;
|
|
104
|
+
}
|
|
105
|
+
|
|
79
106
|
select,
|
|
80
107
|
input[type=file] {
|
|
81
108
|
height: $baseline * 1.5;
|
|
82
109
|
line-height: $baseline * 1.5;
|
|
83
110
|
}
|
|
111
|
+
|
|
84
112
|
textarea {
|
|
85
113
|
height: auto;
|
|
86
114
|
}
|
|
115
|
+
|
|
87
116
|
.uneditable-input {
|
|
88
117
|
background-color: #eee;
|
|
89
118
|
display: block;
|
|
@@ -100,15 +129,13 @@ textarea {
|
|
|
100
129
|
}
|
|
101
130
|
|
|
102
131
|
// Focus states
|
|
103
|
-
input
|
|
104
|
-
input[type=password],
|
|
132
|
+
input,
|
|
105
133
|
select, textarea {
|
|
106
134
|
$transition: border linear .2s, box-shadow linear .2s;
|
|
107
135
|
@include transition($transition);
|
|
108
136
|
@include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
|
109
137
|
}
|
|
110
|
-
input
|
|
111
|
-
input[type=password]:focus,
|
|
138
|
+
input:focus,
|
|
112
139
|
textarea:focus {
|
|
113
140
|
outline: none;
|
|
114
141
|
border-color: rgba(82,168,236,.8);
|
|
@@ -128,8 +155,7 @@ form div.error {
|
|
|
128
155
|
span.help-block {
|
|
129
156
|
color: $red;
|
|
130
157
|
}
|
|
131
|
-
input
|
|
132
|
-
input[type=password],
|
|
158
|
+
input,
|
|
133
159
|
textarea {
|
|
134
160
|
border-color: $error-text;
|
|
135
161
|
@include box-shadow(0 0 3px rgba(171,41,32,.25));
|
|
@@ -221,7 +247,7 @@ input.disabled {
|
|
|
221
247
|
// Inline Fields (input fields that appear as inline objects
|
|
222
248
|
.inline-inputs {
|
|
223
249
|
color: $gray;
|
|
224
|
-
span, input
|
|
250
|
+
span, input {
|
|
225
251
|
display: inline-block;
|
|
226
252
|
}
|
|
227
253
|
input.mini {
|
|
@@ -238,8 +264,7 @@ input.disabled {
|
|
|
238
264
|
// Allow us to put symbols and text within the input field for a cleaner look
|
|
239
265
|
.input-prepend,
|
|
240
266
|
.input-append {
|
|
241
|
-
input
|
|
242
|
-
input[type=password] {
|
|
267
|
+
input {
|
|
243
268
|
@include border-radius(0 3px 3px 0);
|
|
244
269
|
}
|
|
245
270
|
.add-on {
|
|
@@ -270,8 +295,7 @@ input.disabled {
|
|
|
270
295
|
}
|
|
271
296
|
}
|
|
272
297
|
.input-append {
|
|
273
|
-
input
|
|
274
|
-
input[type=password] {
|
|
298
|
+
input {
|
|
275
299
|
float: left;
|
|
276
300
|
@include border-radius(3px 0 0 3px);
|
|
277
301
|
}
|
|
@@ -366,4 +390,4 @@ input.disabled {
|
|
|
366
390
|
margin-left: -20px;
|
|
367
391
|
padding-left: 20px;
|
|
368
392
|
}
|
|
369
|
-
}
|
|
393
|
+
}
|
|
@@ -16,14 +16,6 @@
|
|
|
16
16
|
z-index: 10000;
|
|
17
17
|
overflow: visible;
|
|
18
18
|
|
|
19
|
-
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
|
20
|
-
.fill {
|
|
21
|
-
background:#222;
|
|
22
|
-
@include vertical(#333, #222);
|
|
23
|
-
$shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
|
24
|
-
@include box-shadow($shadow);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
19
|
// Links get text shadow
|
|
28
20
|
a {
|
|
29
21
|
color: $grayLight;
|
|
@@ -32,7 +24,7 @@
|
|
|
32
24
|
|
|
33
25
|
// Hover and active states
|
|
34
26
|
a:hover,
|
|
35
|
-
ul
|
|
27
|
+
ul .active a {
|
|
36
28
|
background-color: #333;
|
|
37
29
|
background-color: rgba(255,255,255,.05);
|
|
38
30
|
color: $white;
|
|
@@ -41,7 +33,7 @@
|
|
|
41
33
|
|
|
42
34
|
// Website name
|
|
43
35
|
h3 {
|
|
44
|
-
position:relative;
|
|
36
|
+
position: relative;
|
|
45
37
|
a {
|
|
46
38
|
float: left;
|
|
47
39
|
display: block;
|
|
@@ -60,192 +52,331 @@
|
|
|
60
52
|
margin: 5px 0 0 0;
|
|
61
53
|
position: relative;
|
|
62
54
|
@include opacity(100);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
55
|
+
}
|
|
56
|
+
input {
|
|
57
|
+
background-color: #444;
|
|
58
|
+
background-color: rgba(255,255,255,.3);
|
|
59
|
+
@include sans-serif(13px, normal, 1);
|
|
60
|
+
padding: 4px 9px;
|
|
61
|
+
color: #fff;
|
|
62
|
+
color: rgba(255,255,255,.75);
|
|
63
|
+
border: 1px solid #111;
|
|
64
|
+
@include border-radius(4px);
|
|
65
|
+
$shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
|
|
66
|
+
@include box-shadow($shadow);
|
|
67
|
+
@include transition(none);
|
|
68
|
+
|
|
69
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
|
70
|
+
&:-moz-placeholder {
|
|
71
|
+
color: $grayLighter;
|
|
72
|
+
}
|
|
73
|
+
&::-webkit-input-placeholder {
|
|
74
|
+
color: $grayLighter;
|
|
75
|
+
}
|
|
76
|
+
// Hover states
|
|
77
|
+
&:hover {
|
|
78
|
+
background-color: $grayLight;
|
|
79
|
+
background-color: rgba(255,255,255,.5);
|
|
69
80
|
color: #fff;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
81
|
+
}
|
|
82
|
+
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
|
83
|
+
&:focus,
|
|
84
|
+
&.focused {
|
|
85
|
+
outline: none;
|
|
86
|
+
background-color: #fff;
|
|
87
|
+
color: $grayDark;
|
|
88
|
+
text-shadow: 0 1px 0 #fff;
|
|
89
|
+
border: 0;
|
|
90
|
+
padding: 5px 10px;
|
|
91
|
+
@include box-shadow(0 0 3px rgba(0,0,0,.15));
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
76
95
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
96
|
+
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
|
97
|
+
// For backwards compatability, include .topbar .fill
|
|
98
|
+
.topbar-inner,
|
|
99
|
+
.topbar .fill {
|
|
100
|
+
background-color: #222;
|
|
101
|
+
@include vertical(#333, #222);
|
|
102
|
+
$shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
|
103
|
+
@include box-shadow($shadow);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
// NAVIGATION
|
|
108
|
+
// ----------
|
|
109
|
+
|
|
110
|
+
// Topbar Nav
|
|
111
|
+
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
|
|
112
|
+
// For backwards compatibility, leave in .topbar div > ul
|
|
113
|
+
.topbar div > ul,
|
|
114
|
+
.nav {
|
|
115
|
+
display: block;
|
|
116
|
+
float: left;
|
|
117
|
+
margin: 0 10px 0 0;
|
|
118
|
+
position: relative;
|
|
119
|
+
left: 0;
|
|
120
|
+
> li {
|
|
121
|
+
display: block;
|
|
122
|
+
float: left;
|
|
123
|
+
}
|
|
124
|
+
a {
|
|
125
|
+
display: block;
|
|
126
|
+
float: none;
|
|
127
|
+
padding: 10px 10px 11px;
|
|
128
|
+
line-height: 19px;
|
|
129
|
+
text-decoration: none;
|
|
130
|
+
&:hover {
|
|
131
|
+
color: #fff;
|
|
132
|
+
text-decoration: none;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
.active a {
|
|
136
|
+
background-color: #222;
|
|
137
|
+
background-color: rgba(0,0,0,.5);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Secondary (floated right) nav in topbar
|
|
141
|
+
&.secondary-nav {
|
|
142
|
+
float: right;
|
|
143
|
+
margin-left: 10px;
|
|
144
|
+
margin-right: 0;
|
|
145
|
+
// backwards compatibility
|
|
146
|
+
.menu-dropdown,
|
|
147
|
+
.dropdown-menu {
|
|
148
|
+
right: 0;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
// Dropdowns within the .nav
|
|
152
|
+
// a.menu:hover and li.open .menu for backwards compatibility
|
|
153
|
+
a.menu:hover,
|
|
154
|
+
li.open .menu,
|
|
155
|
+
.dropdown-toggle:hover,
|
|
156
|
+
.dropdown.open .dropdown-toggle {
|
|
157
|
+
background: #444;
|
|
158
|
+
background: rgba(255,255,255,.05);
|
|
159
|
+
}
|
|
160
|
+
// .menu-dropdown for backwards compatibility
|
|
161
|
+
.menu-dropdown,
|
|
162
|
+
.dropdown-menu {
|
|
163
|
+
background-color: #333;
|
|
164
|
+
// a.menu for backwards compatibility
|
|
165
|
+
a.menu,
|
|
166
|
+
.dropdown-toggle {
|
|
167
|
+
color: #fff;
|
|
168
|
+
&.open {
|
|
169
|
+
background: #444;
|
|
170
|
+
background: rgba(255,255,255,.05);
|
|
83
171
|
}
|
|
84
|
-
|
|
172
|
+
}
|
|
173
|
+
li a {
|
|
174
|
+
color: #999;
|
|
175
|
+
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
|
85
176
|
&:hover {
|
|
86
|
-
|
|
87
|
-
background-color: rgba(255,255,255,.5);
|
|
177
|
+
@include vertical(#292929,#191919);
|
|
88
178
|
color: #fff;
|
|
89
179
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
background-color: #fff;
|
|
95
|
-
color: $grayDark;
|
|
96
|
-
text-shadow: 0 1px 0 #fff;
|
|
97
|
-
border: 0;
|
|
98
|
-
padding: 5px 10px;
|
|
99
|
-
@include box-shadow(0 0 3px rgba(0,0,0,.15));
|
|
100
|
-
}
|
|
180
|
+
}
|
|
181
|
+
.divider {
|
|
182
|
+
background-color: #222;
|
|
183
|
+
border-color: #444;
|
|
101
184
|
}
|
|
102
185
|
}
|
|
186
|
+
}
|
|
103
187
|
|
|
104
|
-
|
|
105
|
-
|
|
188
|
+
// For backwards compatability with new dropdowns, redeclare dropdown link padding
|
|
189
|
+
.topbar ul .menu-dropdown li a,
|
|
190
|
+
.topbar ul .dropdown-menu li a {
|
|
191
|
+
padding: 4px 15px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// Dropdown Menus
|
|
195
|
+
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
|
|
196
|
+
// li.menu for backwards compatibility
|
|
197
|
+
li.menu,
|
|
198
|
+
.dropdown {
|
|
199
|
+
position: relative;
|
|
200
|
+
}
|
|
201
|
+
// The link that is clicked to toggle the dropdown
|
|
202
|
+
// a.menu for backwards compatibility
|
|
203
|
+
a.menu:after,
|
|
204
|
+
.dropdown-toggle:after {
|
|
205
|
+
width: 0;
|
|
206
|
+
height: 0;
|
|
207
|
+
display: inline-block;
|
|
208
|
+
content: "↓";
|
|
209
|
+
text-indent: -99999px;
|
|
210
|
+
vertical-align: top;
|
|
211
|
+
margin-top: 8px;
|
|
212
|
+
margin-left: 4px;
|
|
213
|
+
border-left: 4px solid transparent;
|
|
214
|
+
border-right: 4px solid transparent;
|
|
215
|
+
border-top: 4px solid #fff;
|
|
216
|
+
@include opacity(50);
|
|
217
|
+
}
|
|
218
|
+
// The dropdown menu (ul)
|
|
219
|
+
// .menu-dropdown for backwards compatibility
|
|
220
|
+
.menu-dropdown,
|
|
221
|
+
.dropdown-menu {
|
|
222
|
+
background-color: #fff;
|
|
223
|
+
float: left;
|
|
224
|
+
display: none; // None by default, but block on "open" of the menu
|
|
225
|
+
position: absolute;
|
|
226
|
+
top: 40px;
|
|
227
|
+
min-width: 160px;
|
|
228
|
+
max-width: 220px;
|
|
229
|
+
_width: 160px;
|
|
230
|
+
margin-left: 0; // override default ul styles
|
|
231
|
+
margin-right: 0;
|
|
232
|
+
padding: 6px 0;
|
|
233
|
+
zoom: 1; // do we need this?
|
|
234
|
+
border-color: #999;
|
|
235
|
+
border-color: rgba(0,0,0,.2);
|
|
236
|
+
border-style: solid;
|
|
237
|
+
border-width: 0 1px 1px;
|
|
238
|
+
@include border-radius(0 0 6px 6px);
|
|
239
|
+
@include box-shadow(0 2px 4px rgba(0,0,0,.2));
|
|
240
|
+
@include background-clip(padding-box);
|
|
241
|
+
|
|
242
|
+
// Unfloat any li's to make them stack
|
|
243
|
+
li {
|
|
244
|
+
float: none;
|
|
106
245
|
display: block;
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
246
|
+
background-color: none;
|
|
247
|
+
}
|
|
248
|
+
// Dividers (basically an hr) within the dropdown
|
|
249
|
+
.divider {
|
|
250
|
+
height: 1px;
|
|
251
|
+
margin: 5px 0;
|
|
252
|
+
overflow: hidden;
|
|
253
|
+
background-color: #eee;
|
|
254
|
+
border-bottom: 1px solid #fff;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.topbar .dropdown-menu, .dropdown-menu {
|
|
259
|
+
// Links within the dropdown menu
|
|
260
|
+
a {
|
|
261
|
+
display: block;
|
|
262
|
+
padding: 4px 15px;
|
|
263
|
+
clear: both;
|
|
264
|
+
font-weight: normal;
|
|
265
|
+
line-height: 18px;
|
|
266
|
+
color: $gray;
|
|
267
|
+
text-shadow: 0 1px 0 #fff;
|
|
268
|
+
// Hover state
|
|
269
|
+
&:hover {
|
|
270
|
+
@include vertical(#eeeeee, #dddddd);
|
|
271
|
+
color: $grayDark;
|
|
272
|
+
text-decoration: none;
|
|
273
|
+
$shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
|
|
274
|
+
@include box-shadow($shadow);
|
|
114
275
|
}
|
|
115
|
-
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// Open state for the dropdown
|
|
280
|
+
// .open for backwards compatibility
|
|
281
|
+
.open,
|
|
282
|
+
.dropdown.open {
|
|
283
|
+
// .menu for backwards compatibility
|
|
284
|
+
.menu,
|
|
285
|
+
.dropdown-toggle {
|
|
286
|
+
color: #fff;
|
|
287
|
+
background: #ccc;
|
|
288
|
+
background: rgba(0,0,0,.3);
|
|
289
|
+
}
|
|
290
|
+
// .menu-dropdown for backwards compatibility
|
|
291
|
+
.menu-dropdown,
|
|
292
|
+
.dropdown-menu {
|
|
293
|
+
display: block;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
// Tabs and Pills
|
|
299
|
+
.tabs,
|
|
300
|
+
.pills {
|
|
301
|
+
margin: 0 0 20px;
|
|
302
|
+
padding: 0;
|
|
303
|
+
list-style: none;
|
|
304
|
+
@include cft();
|
|
305
|
+
> li {
|
|
306
|
+
float: left;
|
|
307
|
+
> a {
|
|
116
308
|
display: block;
|
|
117
|
-
float: left;
|
|
118
|
-
font-size: 13px;
|
|
119
|
-
a {
|
|
120
|
-
display: block;
|
|
121
|
-
float: none;
|
|
122
|
-
padding: 10px 10px 11px;
|
|
123
|
-
line-height: 19px;
|
|
124
|
-
text-decoration: none;
|
|
125
|
-
&:hover {
|
|
126
|
-
color: #fff;
|
|
127
|
-
text-decoration: none;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
&.active a {
|
|
131
|
-
background-color: #222;
|
|
132
|
-
background-color: rgba(0,0,0,.5);
|
|
133
|
-
}
|
|
134
309
|
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
135
312
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
vertical-align: top;
|
|
153
|
-
margin-top: 8px;
|
|
154
|
-
margin-left: 4px;
|
|
155
|
-
border-left: 4px solid transparent;
|
|
156
|
-
border-right: 4px solid transparent;
|
|
157
|
-
border-top: 4px solid #fff;
|
|
158
|
-
@include opacity(50);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
&.open {
|
|
162
|
-
a.menu,
|
|
163
|
-
a:hover {
|
|
164
|
-
background-color: #444;
|
|
165
|
-
background-color: rgba(255,255,255,.1);
|
|
166
|
-
*background-color: #444; /* IE6-7 */
|
|
167
|
-
color: #fff;
|
|
168
|
-
}
|
|
169
|
-
ul {
|
|
170
|
-
display: block;
|
|
171
|
-
li {
|
|
172
|
-
a {
|
|
173
|
-
background-color: transparent;
|
|
174
|
-
font-weight: normal;
|
|
175
|
-
&:hover {
|
|
176
|
-
background-color: rgba(255,255,255,.1);
|
|
177
|
-
*background-color: #444; /* IE6-7 */
|
|
178
|
-
color: #fff;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
&.active a {
|
|
182
|
-
background-color: rgba(255,255,255,.1);
|
|
183
|
-
font-weight: bold;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
}
|
|
313
|
+
// Basic Tabs
|
|
314
|
+
.tabs {
|
|
315
|
+
width: 100%;
|
|
316
|
+
border-bottom: 1px solid #ddd;
|
|
317
|
+
> li {
|
|
318
|
+
position: relative; // For the dropdowns mostly
|
|
319
|
+
top: 1px;
|
|
320
|
+
> a {
|
|
321
|
+
margin-right: 2px;
|
|
322
|
+
padding: 0 15px;
|
|
323
|
+
line-height: ($baseline * 2) - 1;
|
|
324
|
+
@include border-radius(4px 4px 0 0);
|
|
325
|
+
&:hover {
|
|
326
|
+
background-color: #eee;
|
|
327
|
+
border-bottom: 1px solid #ddd;
|
|
328
|
+
text-decoration: none;
|
|
187
329
|
}
|
|
188
330
|
}
|
|
189
|
-
|
|
190
|
-
background-color: #
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
min-width: 160px;
|
|
196
|
-
max-width: 220px;
|
|
197
|
-
_width: 160px;
|
|
198
|
-
margin-left: 0;
|
|
199
|
-
margin-right: 0;
|
|
200
|
-
padding: 0;
|
|
201
|
-
text-align: left;
|
|
202
|
-
border: 0;
|
|
203
|
-
zoom: 1;
|
|
204
|
-
@include border-radius(0 0 5px 5px);
|
|
205
|
-
@include box-shadow(0 1px 2px rgba(0,0,0,0.6));
|
|
206
|
-
li {
|
|
207
|
-
float: none;
|
|
208
|
-
clear: both;
|
|
209
|
-
display: block;
|
|
210
|
-
background: none;
|
|
211
|
-
font-size: 12px;
|
|
212
|
-
a {
|
|
213
|
-
display: block;
|
|
214
|
-
padding: 6px 15px;
|
|
215
|
-
clear: both;
|
|
216
|
-
font-weight: normal;
|
|
217
|
-
line-height: 19px;
|
|
218
|
-
color: #bbb;
|
|
219
|
-
&:hover {
|
|
220
|
-
background-color: #333;
|
|
221
|
-
background-color: rgba(255,255,255,.25);
|
|
222
|
-
color: #fff;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
// Dividers (basically an hr)
|
|
227
|
-
&.divider {
|
|
228
|
-
height: 1px;
|
|
229
|
-
overflow: hidden;
|
|
230
|
-
background: #222;
|
|
231
|
-
background: rgba(0,0,0,.2);
|
|
232
|
-
border-bottom: 1px solid rgba(255,255,255,.1);
|
|
233
|
-
margin: 5px 0;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
// Section separaters
|
|
237
|
-
span {
|
|
238
|
-
clear: both;
|
|
239
|
-
display: block;
|
|
240
|
-
background: rgba(0,0,0,.2);
|
|
241
|
-
padding: 6px 15px;
|
|
242
|
-
cursor: default;
|
|
243
|
-
color: $gray;
|
|
244
|
-
border-top: 1px solid rgba(0,0,0,.2);
|
|
245
|
-
}
|
|
246
|
-
}
|
|
331
|
+
&.active > a {
|
|
332
|
+
background-color: #fff;
|
|
333
|
+
padding: 0 14px;
|
|
334
|
+
border: 1px solid #ddd;
|
|
335
|
+
border-bottom: 0;
|
|
336
|
+
color: $gray;
|
|
247
337
|
}
|
|
248
338
|
}
|
|
339
|
+
// first one for backwards compatibility
|
|
340
|
+
.menu-dropdown,
|
|
341
|
+
.dropdown-menu {
|
|
342
|
+
top: 35px;
|
|
343
|
+
border-width: 1px;
|
|
344
|
+
@include border-radius(0 6px 6px 6px);
|
|
345
|
+
}
|
|
346
|
+
// first one for backwards compatibility
|
|
347
|
+
a.menu:after,
|
|
348
|
+
.dropdown-toggle:after {
|
|
349
|
+
border-top-color: #999;
|
|
350
|
+
margin-top: 15px;
|
|
351
|
+
margin-left: 5px;
|
|
352
|
+
}
|
|
353
|
+
// first one for backwards compatibility
|
|
354
|
+
li.open a.menu:after,
|
|
355
|
+
.dropdown.open .dropdown-toggle:after {
|
|
356
|
+
border-top-color: #555;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
// Basic pill nav
|
|
361
|
+
.pills {
|
|
362
|
+
a {
|
|
363
|
+
margin: 5px 3px 5px 0;
|
|
364
|
+
padding: 0 15px;
|
|
365
|
+
text-shadow: 0 1px 1px #fff;
|
|
366
|
+
line-height: 30px;
|
|
367
|
+
@include border-radius(15px);
|
|
368
|
+
&:hover {
|
|
369
|
+
background: $linkColorHover;
|
|
370
|
+
color: #fff;
|
|
371
|
+
text-decoration: none;
|
|
372
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
.active a {
|
|
376
|
+
background: $linkColor;
|
|
377
|
+
color: #fff;
|
|
378
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
379
|
+
}
|
|
249
380
|
}
|
|
250
381
|
|
|
251
382
|
|
|
@@ -276,6 +407,7 @@ footer {
|
|
|
276
407
|
border-top: 1px solid #eee;
|
|
277
408
|
}
|
|
278
409
|
|
|
410
|
+
|
|
279
411
|
// PAGE HEADERS
|
|
280
412
|
// ------------
|
|
281
413
|
|
|
@@ -288,16 +420,16 @@ footer {
|
|
|
288
420
|
}
|
|
289
421
|
}
|
|
290
422
|
|
|
423
|
+
|
|
291
424
|
// BUTTON STYLES
|
|
292
425
|
// -------------
|
|
293
426
|
|
|
294
|
-
|
|
295
427
|
// Base .btn styles
|
|
296
428
|
.btn {
|
|
297
429
|
// Button Base
|
|
298
430
|
cursor: pointer;
|
|
299
431
|
display: inline-block;
|
|
300
|
-
@include vertical-three-colors(#
|
|
432
|
+
@include vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
|
|
301
433
|
padding: 5px 14px 6px;
|
|
302
434
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
|
303
435
|
color: #333;
|
|
@@ -322,27 +454,28 @@ footer {
|
|
|
322
454
|
}
|
|
323
455
|
|
|
324
456
|
// Transitions
|
|
325
|
-
|
|
326
|
-
@include single-transition(all, .1s, linear);
|
|
457
|
+
@include transition(.1s linear all);
|
|
327
458
|
|
|
328
459
|
// Active and Disabled states
|
|
460
|
+
&:active {
|
|
461
|
+
$shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
|
|
462
|
+
@include box-shadow($shadow);
|
|
463
|
+
}
|
|
329
464
|
&.disabled {
|
|
330
465
|
cursor: default;
|
|
331
466
|
background-image: none;
|
|
467
|
+
@include reset-filter;
|
|
332
468
|
@include opacity(65);
|
|
469
|
+
@include box-shadow(none);
|
|
333
470
|
}
|
|
334
|
-
|
|
335
|
-
&:disabled {
|
|
471
|
+
&[disabled] {
|
|
336
472
|
// disabled pseudo can't be included with .disabled
|
|
337
473
|
// def because IE8 and below will drop it ;_;
|
|
338
474
|
cursor: default;
|
|
339
475
|
background-image: none;
|
|
476
|
+
@include reset-filter;
|
|
340
477
|
@include opacity(65);
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
&:active {
|
|
344
|
-
$shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
|
|
345
|
-
@include box-shadow($shadow);
|
|
478
|
+
@include box-shadow(none);
|
|
346
479
|
}
|
|
347
480
|
|
|
348
481
|
// Button Sizes
|
|
@@ -352,12 +485,15 @@ footer {
|
|
|
352
485
|
padding: 9px 14px 9px;
|
|
353
486
|
@include border-radius(6px);
|
|
354
487
|
}
|
|
355
|
-
|
|
356
488
|
&.small {
|
|
357
489
|
padding: 7px 9px 7px;
|
|
358
490
|
font-size: 11px;
|
|
359
491
|
}
|
|
360
|
-
|
|
492
|
+
}
|
|
493
|
+
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
|
|
494
|
+
:root .alert-message,
|
|
495
|
+
:root .btn {
|
|
496
|
+
border-radius: 0 \0;
|
|
361
497
|
}
|
|
362
498
|
|
|
363
499
|
// Help Firefox not be a jerk about adding extra padding to buttons
|
|
@@ -370,7 +506,6 @@ input[type=submit].btn {
|
|
|
370
506
|
}
|
|
371
507
|
|
|
372
508
|
|
|
373
|
-
|
|
374
509
|
// ERROR STYLES
|
|
375
510
|
// ------------
|
|
376
511
|
|
|
@@ -420,6 +555,7 @@ input[type=submit].btn {
|
|
|
420
555
|
&.block-message {
|
|
421
556
|
background-image: none;
|
|
422
557
|
background-color: lighten(#fceec1, 5%);
|
|
558
|
+
@include reset-filter;
|
|
423
559
|
padding: 14px;
|
|
424
560
|
border-color: #fceec1;
|
|
425
561
|
@include box-shadow(none);
|
|
@@ -451,74 +587,6 @@ input[type=submit].btn {
|
|
|
451
587
|
}
|
|
452
588
|
}
|
|
453
589
|
|
|
454
|
-
// NAVIGATION
|
|
455
|
-
// ----------
|
|
456
|
-
|
|
457
|
-
// Common tab and pill styles
|
|
458
|
-
.tabs,
|
|
459
|
-
.pills {
|
|
460
|
-
margin: 0 0 20px;
|
|
461
|
-
padding: 0;
|
|
462
|
-
@include clearfix();
|
|
463
|
-
li {
|
|
464
|
-
display: inline;
|
|
465
|
-
a {
|
|
466
|
-
float: left;
|
|
467
|
-
width: auto;
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
|
|
472
|
-
// Basic Tabs
|
|
473
|
-
.tabs {
|
|
474
|
-
width: 100%;
|
|
475
|
-
border-bottom: 1px solid $grayLight;
|
|
476
|
-
li {
|
|
477
|
-
a {
|
|
478
|
-
margin-bottom: -1px;
|
|
479
|
-
margin-right: 2px;
|
|
480
|
-
padding: 0 15px;
|
|
481
|
-
line-height: ($baseline * 2) - 1;
|
|
482
|
-
@include border-radius(3px 3px 0 0);
|
|
483
|
-
&:hover {
|
|
484
|
-
background-color: $grayLighter;
|
|
485
|
-
border-bottom: 1px solid $grayLight;
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
|
-
&.active a {
|
|
489
|
-
background-color: #fff;
|
|
490
|
-
padding: 0 14px;
|
|
491
|
-
border: 1px solid #ccc;
|
|
492
|
-
border-bottom: 0;
|
|
493
|
-
color: $gray;
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
// Basic pill nav
|
|
499
|
-
.pills {
|
|
500
|
-
li {
|
|
501
|
-
a {
|
|
502
|
-
margin: 5px 3px 5px 0;
|
|
503
|
-
padding: 0 15px;
|
|
504
|
-
text-shadow: 0 1px 1px #fff;
|
|
505
|
-
line-height: 30px;
|
|
506
|
-
@include border-radius(15px);
|
|
507
|
-
&:hover {
|
|
508
|
-
background: $linkColorHover;
|
|
509
|
-
color: #fff;
|
|
510
|
-
text-decoration: none;
|
|
511
|
-
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
512
|
-
}
|
|
513
|
-
}
|
|
514
|
-
&.active a {
|
|
515
|
-
background: $linkColor;
|
|
516
|
-
color: #fff;
|
|
517
|
-
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
518
|
-
}
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
|
|
522
590
|
|
|
523
591
|
// PAGINATION
|
|
524
592
|
// ----------
|
|
@@ -533,31 +601,31 @@ input[type=submit].btn {
|
|
|
533
601
|
border: 1px solid rgba(0,0,0,.15);
|
|
534
602
|
@include border-radius(3px);
|
|
535
603
|
@include box-shadow(0 1px 2px rgba(0,0,0,.05));
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
604
|
+
}
|
|
605
|
+
li {
|
|
606
|
+
display: inline;
|
|
607
|
+
}
|
|
608
|
+
a {
|
|
609
|
+
float: left;
|
|
610
|
+
padding: 0 14px;
|
|
611
|
+
line-height: ($baseline * 2) - 2;
|
|
612
|
+
border-right: 1px solid;
|
|
613
|
+
border-right-color: #ddd;
|
|
614
|
+
border-right-color: rgba(0,0,0,.15);
|
|
615
|
+
*border-right-color: #ddd; /* IE6-7 */
|
|
616
|
+
text-decoration: none;
|
|
617
|
+
}
|
|
618
|
+
a:hover,
|
|
619
|
+
.active a {
|
|
620
|
+
background-color: lighten($blue, 45%);
|
|
621
|
+
}
|
|
622
|
+
.disabled a,
|
|
623
|
+
.disabled a:hover {
|
|
624
|
+
background-color: transparent;
|
|
625
|
+
color: $grayLight;
|
|
626
|
+
}
|
|
627
|
+
.next a {
|
|
628
|
+
border: 0;
|
|
561
629
|
}
|
|
562
630
|
}
|
|
563
631
|
|
|
@@ -603,33 +671,33 @@ input[type=submit].btn {
|
|
|
603
671
|
@include border-radius(6px);
|
|
604
672
|
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
|
605
673
|
@include background-clip(padding-box);
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
}
|
|
618
|
-
.modal-body {
|
|
619
|
-
padding: 20px;
|
|
674
|
+
}
|
|
675
|
+
.modal-header {
|
|
676
|
+
border-bottom: 1px solid #eee;
|
|
677
|
+
padding: 5px 20px;
|
|
678
|
+
.close {
|
|
679
|
+
position: absolute;
|
|
680
|
+
right: 10px;
|
|
681
|
+
top: 10px;
|
|
682
|
+
color: #999;
|
|
683
|
+
line-height:10px;
|
|
684
|
+
font-size: 18px;
|
|
620
685
|
}
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
686
|
+
}
|
|
687
|
+
.modal-body {
|
|
688
|
+
padding: 20px;
|
|
689
|
+
}
|
|
690
|
+
.modal-footer {
|
|
691
|
+
background-color: #f5f5f5;
|
|
692
|
+
padding: 14px 20px 15px;
|
|
693
|
+
border-top: 1px solid #ddd;
|
|
694
|
+
@include border-radius(0 0 6px 6px);
|
|
695
|
+
@include box-shadow(inset 0 1px 0 #fff);
|
|
696
|
+
@include clearfix();
|
|
697
|
+
margin-bottom: 0;
|
|
698
|
+
.btn {
|
|
699
|
+
float: right;
|
|
700
|
+
margin-left: 10px;
|
|
633
701
|
}
|
|
634
702
|
}
|
|
635
703
|
|
|
@@ -687,20 +755,20 @@ input[type=submit].btn {
|
|
|
687
755
|
&.left .twipsy-arrow { @include popover-arrow-left(); }
|
|
688
756
|
&.below .twipsy-arrow { @include popover-arrow-below(); }
|
|
689
757
|
&.right .twipsy-arrow { @include popover-arrow-right(); }
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
758
|
+
}
|
|
759
|
+
.twipsy-inner {
|
|
760
|
+
padding: 3px 8px;
|
|
761
|
+
background-color: #000;
|
|
762
|
+
color: white;
|
|
763
|
+
text-align: center;
|
|
764
|
+
max-width: 200px;
|
|
765
|
+
text-decoration: none;
|
|
766
|
+
@include border-radius(4px);
|
|
767
|
+
}
|
|
768
|
+
.twipsy-arrow {
|
|
769
|
+
position: absolute;
|
|
770
|
+
width: 0;
|
|
771
|
+
height: 0;
|
|
704
772
|
}
|
|
705
773
|
|
|
706
774
|
|
|
@@ -724,9 +792,8 @@ input[type=submit].btn {
|
|
|
724
792
|
height: 0;
|
|
725
793
|
}
|
|
726
794
|
.inner {
|
|
727
|
-
background
|
|
728
|
-
background
|
|
729
|
-
*background-color: #333; /* IE 6-7 */
|
|
795
|
+
background: #333;
|
|
796
|
+
background: rgba(0,0,0,.8);
|
|
730
797
|
padding: 3px;
|
|
731
798
|
overflow: hidden;
|
|
732
799
|
width: 280px;
|
|
@@ -749,4 +816,4 @@ input[type=submit].btn {
|
|
|
749
816
|
margin-bottom: 0;
|
|
750
817
|
}
|
|
751
818
|
}
|
|
752
|
-
}
|
|
819
|
+
}
|