compass_twitter_bootstrap 0.1.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/.gitignore +18 -0
- data/Gemfile +6 -0
- data/Rakefile +2 -0
- data/compass_twitter_bootstrap.gemspec +19 -0
- data/lib/compass_twitter_bootstrap.rb +7 -0
- data/lib/compass_twitter_bootstrap/version.rb +3 -0
- data/stylesheets/_compass_twitter_bootstrap.scss +24 -0
- data/stylesheets/compass_twitter_bootstrap/_forms.scss +369 -0
- data/stylesheets/compass_twitter_bootstrap/_patterns.scss +751 -0
- data/stylesheets/compass_twitter_bootstrap/_preboot.scss +230 -0
- data/stylesheets/compass_twitter_bootstrap/_reset.scss +146 -0
- data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss +211 -0
- data/stylesheets/compass_twitter_bootstrap/_tables.scss +148 -0
- data/stylesheets/compass_twitter_bootstrap/_type.scss +187 -0
- metadata +76 -0
|
@@ -0,0 +1,751 @@
|
|
|
1
|
+
/* Patterns.less
|
|
2
|
+
* Repeatable UI elements outside the base styles provided from the scaffolding
|
|
3
|
+
* ---------------------------------------------------------------------------- */
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// TOPBAR
|
|
7
|
+
// ------
|
|
8
|
+
|
|
9
|
+
// Topbar for Branding and Nav
|
|
10
|
+
.topbar {
|
|
11
|
+
height: 40px;
|
|
12
|
+
position: fixed;
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
z-index: 10000;
|
|
17
|
+
overflow: visible;
|
|
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
|
+
// Links get text shadow
|
|
28
|
+
a {
|
|
29
|
+
color: $grayLight;
|
|
30
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Hover and active states
|
|
34
|
+
a:hover,
|
|
35
|
+
ul li.active a {
|
|
36
|
+
background-color: #333;
|
|
37
|
+
background-color: rgba(255,255,255,.05);
|
|
38
|
+
color: $white;
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Website name
|
|
43
|
+
h3 {
|
|
44
|
+
position:relative;
|
|
45
|
+
a {
|
|
46
|
+
float: left;
|
|
47
|
+
display: block;
|
|
48
|
+
padding: 8px 20px 12px;
|
|
49
|
+
margin-left: -20px; // negative indent to left-align the text down the page
|
|
50
|
+
color: $white;
|
|
51
|
+
font-size: 20px;
|
|
52
|
+
font-weight: 200;
|
|
53
|
+
line-height: 1;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Search Form
|
|
58
|
+
form {
|
|
59
|
+
float: left;
|
|
60
|
+
margin: 5px 0 0 0;
|
|
61
|
+
position: relative;
|
|
62
|
+
@include opacity(100);
|
|
63
|
+
input {
|
|
64
|
+
background-color: #444;
|
|
65
|
+
background-color: rgba(255,255,255,.3);
|
|
66
|
+
@include sans-serif(13px, normal, 1);
|
|
67
|
+
width: 220px;
|
|
68
|
+
padding: 4px 9px;
|
|
69
|
+
color: #fff;
|
|
70
|
+
color: rgba(255,255,255,.75);
|
|
71
|
+
border: 1px solid #111;
|
|
72
|
+
@include border-radius(4px);
|
|
73
|
+
$shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
|
|
74
|
+
@include box-shadow($shadow);
|
|
75
|
+
@include transition(none);
|
|
76
|
+
|
|
77
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
|
78
|
+
&:-moz-placeholder {
|
|
79
|
+
color: $grayLighter;
|
|
80
|
+
}
|
|
81
|
+
&::-webkit-input-placeholder {
|
|
82
|
+
color: $grayLighter;
|
|
83
|
+
}
|
|
84
|
+
// Hover states
|
|
85
|
+
&:hover {
|
|
86
|
+
background-color: $grayLight;
|
|
87
|
+
background-color: rgba(255,255,255,.5);
|
|
88
|
+
color: #fff;
|
|
89
|
+
}
|
|
90
|
+
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
|
91
|
+
&:focus,
|
|
92
|
+
&.focused {
|
|
93
|
+
outline: none;
|
|
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
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Navigation
|
|
105
|
+
ul {
|
|
106
|
+
display: block;
|
|
107
|
+
float: left;
|
|
108
|
+
margin: 0 10px 0 0;
|
|
109
|
+
position: relative;
|
|
110
|
+
&.secondary-nav {
|
|
111
|
+
float: right;
|
|
112
|
+
margin-left: 10px;
|
|
113
|
+
margin-right: 0;
|
|
114
|
+
}
|
|
115
|
+
li {
|
|
116
|
+
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
|
+
}
|
|
135
|
+
|
|
136
|
+
// Dropdowns
|
|
137
|
+
&.primary-nav li ul {
|
|
138
|
+
left: 0;
|
|
139
|
+
}
|
|
140
|
+
&.secondary-nav li ul {
|
|
141
|
+
right: 0;
|
|
142
|
+
}
|
|
143
|
+
li.menu {
|
|
144
|
+
position: relative;
|
|
145
|
+
a.menu {
|
|
146
|
+
&:after {
|
|
147
|
+
width: 0px;
|
|
148
|
+
height: 0px;
|
|
149
|
+
display: inline-block;
|
|
150
|
+
content: "↓";
|
|
151
|
+
text-indent: -99999px;
|
|
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
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
li ul {
|
|
190
|
+
background-color: #333;
|
|
191
|
+
float: left;
|
|
192
|
+
display: none;
|
|
193
|
+
position: absolute;
|
|
194
|
+
top: 40px;
|
|
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
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
// PAGE HEADERS
|
|
253
|
+
// ------------
|
|
254
|
+
|
|
255
|
+
.hero-unit {
|
|
256
|
+
background-color: #f5f5f5;
|
|
257
|
+
margin-top: 60px;
|
|
258
|
+
margin-bottom: 30px;
|
|
259
|
+
padding: 60px;
|
|
260
|
+
@include border-radius(6px);
|
|
261
|
+
h1 {
|
|
262
|
+
margin-bottom: 0;
|
|
263
|
+
font-size: 60px;
|
|
264
|
+
line-height: 1;
|
|
265
|
+
letter-spacing: -1px;
|
|
266
|
+
}
|
|
267
|
+
p {
|
|
268
|
+
font-size: 18px;
|
|
269
|
+
font-weight: 200;
|
|
270
|
+
line-height: $baseline * 1.5;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
footer {
|
|
274
|
+
margin-top: $baseline - 1;
|
|
275
|
+
padding-top: $baseline - 1;
|
|
276
|
+
border-top: 1px solid #eee;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
// PAGE HEADERS
|
|
280
|
+
// ------------
|
|
281
|
+
|
|
282
|
+
.page-header {
|
|
283
|
+
margin-bottom: $baseline - 1;
|
|
284
|
+
border-bottom: 1px solid #ddd;
|
|
285
|
+
@include box-shadow(0 1px 0 rgba(255,255,255,.5));
|
|
286
|
+
h1 {
|
|
287
|
+
margin-bottom: ($baseline / 2) - 1px;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
// BUTTON STYLES
|
|
292
|
+
// -------------
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
// Base .btn styles
|
|
296
|
+
.btn {
|
|
297
|
+
// Button Base
|
|
298
|
+
cursor: pointer;
|
|
299
|
+
display: inline-block;
|
|
300
|
+
@include vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
|
|
301
|
+
padding: 5px 14px 6px;
|
|
302
|
+
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
|
303
|
+
color: #333;
|
|
304
|
+
font-size: 13px;
|
|
305
|
+
line-height: normal;
|
|
306
|
+
border: 1px solid #ccc;
|
|
307
|
+
border-bottom-color: #bbb;
|
|
308
|
+
@include border-radius(4px);
|
|
309
|
+
$shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
|
310
|
+
@include box-shadow($shadow);
|
|
311
|
+
|
|
312
|
+
&:hover {
|
|
313
|
+
background-position: 0 -15px;
|
|
314
|
+
color: #333;
|
|
315
|
+
text-decoration: none;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
// Primary Button Type
|
|
319
|
+
&.primary {
|
|
320
|
+
color:#fff;
|
|
321
|
+
@include gradientBar($blue, $blueDark)
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
// Transitions
|
|
325
|
+
@include transition(.1s linear all);
|
|
326
|
+
|
|
327
|
+
// Active and Disabled states
|
|
328
|
+
&.disabled {
|
|
329
|
+
cursor: default;
|
|
330
|
+
background-image: none;
|
|
331
|
+
@include opacity(65);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
&:disabled {
|
|
335
|
+
// disabled pseudo can't be included with .disabled
|
|
336
|
+
// def because IE8 and below will drop it ;_;
|
|
337
|
+
cursor: default;
|
|
338
|
+
background-image: none;
|
|
339
|
+
@include opacity(65);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
&:active {
|
|
343
|
+
$shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
|
|
344
|
+
@include box-shadow($shadow);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
// Button Sizes
|
|
348
|
+
&.large {
|
|
349
|
+
font-size: 16px;
|
|
350
|
+
line-height: normal;
|
|
351
|
+
padding: 9px 14px 9px;
|
|
352
|
+
@include border-radius(6px);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
&.small {
|
|
356
|
+
padding: 7px 9px 7px;
|
|
357
|
+
font-size: 11px;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
// Help Firefox not be a jerk about adding extra padding to buttons
|
|
363
|
+
button.btn,
|
|
364
|
+
input[type=submit].btn {
|
|
365
|
+
&::-moz-focus-inner {
|
|
366
|
+
padding: 0;
|
|
367
|
+
border: 0;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
// ERROR STYLES
|
|
374
|
+
// ------------
|
|
375
|
+
|
|
376
|
+
// Base alert styles
|
|
377
|
+
.alert-message {
|
|
378
|
+
@include gradientBar(#fceec1, #eedc94); // warning by default
|
|
379
|
+
margin-bottom: $baseline;
|
|
380
|
+
padding: 7px 14px;
|
|
381
|
+
color: $grayDark;
|
|
382
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
|
383
|
+
border-width: 1px;
|
|
384
|
+
border-style: solid;
|
|
385
|
+
@include border-radius(4px);
|
|
386
|
+
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
|
387
|
+
|
|
388
|
+
// Remove extra margin from content
|
|
389
|
+
h5 {
|
|
390
|
+
line-height: $baseline;
|
|
391
|
+
}
|
|
392
|
+
p {
|
|
393
|
+
margin-bottom: 0;
|
|
394
|
+
}
|
|
395
|
+
div {
|
|
396
|
+
margin-top: 5px;
|
|
397
|
+
margin-bottom: 2px;
|
|
398
|
+
line-height: 28px;
|
|
399
|
+
}
|
|
400
|
+
.btn {
|
|
401
|
+
// Provide actions with buttons
|
|
402
|
+
@include box-shadow(0 1px 0 rgba(255,255,255,.25));
|
|
403
|
+
}
|
|
404
|
+
.close {
|
|
405
|
+
float: right;
|
|
406
|
+
margin-top: -2px;
|
|
407
|
+
color: $black;
|
|
408
|
+
font-size: 20px;
|
|
409
|
+
font-weight: bold;
|
|
410
|
+
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
|
411
|
+
@include opacity(20);
|
|
412
|
+
&:hover {
|
|
413
|
+
color: $black;
|
|
414
|
+
text-decoration: none;
|
|
415
|
+
@include opacity(40);
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
&.block-message {
|
|
420
|
+
background-image: none;
|
|
421
|
+
background-color: lighten(#fceec1, 5%);
|
|
422
|
+
padding: 14px;
|
|
423
|
+
border-color: #fceec1;
|
|
424
|
+
@include box-shadow(none);
|
|
425
|
+
|
|
426
|
+
p {
|
|
427
|
+
margin-right: 30px;
|
|
428
|
+
}
|
|
429
|
+
.alert-actions {
|
|
430
|
+
margin-top: 5px;
|
|
431
|
+
}
|
|
432
|
+
&.error,
|
|
433
|
+
&.success,
|
|
434
|
+
&.info {
|
|
435
|
+
color: $grayDark;
|
|
436
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
|
437
|
+
}
|
|
438
|
+
&.error {
|
|
439
|
+
background-color: lighten(#f56a66, 25%);
|
|
440
|
+
border-color: lighten(#f56a66, 20%);
|
|
441
|
+
}
|
|
442
|
+
&.success {
|
|
443
|
+
background-color: lighten(#62c462, 30%);
|
|
444
|
+
border-color: lighten(#62c462, 25%);
|
|
445
|
+
}
|
|
446
|
+
&.info {
|
|
447
|
+
background-color: lighten(#6bd0ee, 25%);
|
|
448
|
+
border-color: lighten(#6bd0ee, 20%);
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
// NAVIGATION
|
|
454
|
+
// ----------
|
|
455
|
+
|
|
456
|
+
// Common tab and pill styles
|
|
457
|
+
.tabs,
|
|
458
|
+
.pills {
|
|
459
|
+
margin: 0 0 20px;
|
|
460
|
+
padding: 0;
|
|
461
|
+
@include clearfix();
|
|
462
|
+
li {
|
|
463
|
+
display: inline;
|
|
464
|
+
a {
|
|
465
|
+
float: left;
|
|
466
|
+
width: auto;
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
// Basic Tabs
|
|
472
|
+
.tabs {
|
|
473
|
+
width: 100%;
|
|
474
|
+
border-bottom: 1px solid $grayLight;
|
|
475
|
+
li {
|
|
476
|
+
a {
|
|
477
|
+
margin-bottom: -1px;
|
|
478
|
+
margin-right: 2px;
|
|
479
|
+
padding: 0 15px;
|
|
480
|
+
line-height: ($baseline * 2) - 1;
|
|
481
|
+
@include border-radius(3px 3px 0 0);
|
|
482
|
+
&:hover {
|
|
483
|
+
background-color: $grayLighter;
|
|
484
|
+
border-bottom: 1px solid $grayLight;
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
&.active a {
|
|
488
|
+
background-color: #fff;
|
|
489
|
+
padding: 0 14px;
|
|
490
|
+
border: 1px solid #ccc;
|
|
491
|
+
border-bottom: 0;
|
|
492
|
+
color: $gray;
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
// Basic pill nav
|
|
498
|
+
.pills {
|
|
499
|
+
li {
|
|
500
|
+
a {
|
|
501
|
+
margin: 5px 3px 5px 0;
|
|
502
|
+
padding: 0 15px;
|
|
503
|
+
text-shadow: 0 1px 1px #fff;
|
|
504
|
+
line-height: 30px;
|
|
505
|
+
@include border-radius(15px);
|
|
506
|
+
&:hover {
|
|
507
|
+
background: $linkColorHover;
|
|
508
|
+
color: #fff;
|
|
509
|
+
text-decoration: none;
|
|
510
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
&.active a {
|
|
514
|
+
background: $linkColor;
|
|
515
|
+
color: #fff;
|
|
516
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
|
517
|
+
}
|
|
518
|
+
}
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
|
|
522
|
+
// PAGINATION
|
|
523
|
+
// ----------
|
|
524
|
+
|
|
525
|
+
.pagination {
|
|
526
|
+
height: $baseline * 2;
|
|
527
|
+
margin: $baseline 0;
|
|
528
|
+
ul {
|
|
529
|
+
float: left;
|
|
530
|
+
margin: 0;
|
|
531
|
+
border: 1px solid #ddd;
|
|
532
|
+
border: 1px solid rgba(0,0,0,.15);
|
|
533
|
+
@include border-radius(3px);
|
|
534
|
+
@include box-shadow(0 1px 2px rgba(0,0,0,.05));
|
|
535
|
+
li {
|
|
536
|
+
display: inline;
|
|
537
|
+
a {
|
|
538
|
+
float: left;
|
|
539
|
+
padding: 0 14px;
|
|
540
|
+
line-height: ($baseline * 2) - 2;
|
|
541
|
+
border-right: 1px solid;
|
|
542
|
+
border-right-color: #ddd;
|
|
543
|
+
border-right-color: rgba(0,0,0,.15);
|
|
544
|
+
*border-right-color: #ddd; /* IE6-7 */
|
|
545
|
+
text-decoration: none;
|
|
546
|
+
}
|
|
547
|
+
a:hover,
|
|
548
|
+
&.active a {
|
|
549
|
+
background-color: lighten($blue, 45%);
|
|
550
|
+
}
|
|
551
|
+
&.disabled a,
|
|
552
|
+
&.disabled a:hover {
|
|
553
|
+
background-color: transparent;
|
|
554
|
+
color: $grayLight;
|
|
555
|
+
}
|
|
556
|
+
&.next a {
|
|
557
|
+
border: 0;
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
|
|
564
|
+
// WELLS
|
|
565
|
+
// -----
|
|
566
|
+
|
|
567
|
+
.well {
|
|
568
|
+
background-color: #f5f5f5;
|
|
569
|
+
margin-bottom: 20px;
|
|
570
|
+
padding: 19px;
|
|
571
|
+
min-height: 20px;
|
|
572
|
+
border: 1px solid #eee;
|
|
573
|
+
border: 1px solid rgba(0,0,0,.05);
|
|
574
|
+
@include border-radius(4px);
|
|
575
|
+
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
|
|
579
|
+
// MODALS
|
|
580
|
+
// ------
|
|
581
|
+
|
|
582
|
+
.modal-backdrop {
|
|
583
|
+
background-color: rgba(0,0,0,.5);
|
|
584
|
+
position: fixed;
|
|
585
|
+
top: 0;
|
|
586
|
+
left: 0;
|
|
587
|
+
right: 0;
|
|
588
|
+
bottom: 0;
|
|
589
|
+
z-index: 1000;
|
|
590
|
+
}
|
|
591
|
+
.modal {
|
|
592
|
+
position: fixed;
|
|
593
|
+
top: 50%;
|
|
594
|
+
left: 50%;
|
|
595
|
+
z-index: 2000;
|
|
596
|
+
width: 560px;
|
|
597
|
+
margin: -280px 0 0 -250px;
|
|
598
|
+
background-color: $white;
|
|
599
|
+
border: 1px solid #999;
|
|
600
|
+
border: 1px solid rgba(0,0,0,.3);
|
|
601
|
+
*border: 1px solid #999; /* IE6-7 */
|
|
602
|
+
@include border-radius(6px);
|
|
603
|
+
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
|
604
|
+
@include background-clip(padding-box);
|
|
605
|
+
.modal-header {
|
|
606
|
+
border-bottom: 1px solid #eee;
|
|
607
|
+
padding: 5px 20px;
|
|
608
|
+
.close {
|
|
609
|
+
position: absolute;
|
|
610
|
+
right: 10px;
|
|
611
|
+
top: 10px;
|
|
612
|
+
color: #999;
|
|
613
|
+
line-height:10px;
|
|
614
|
+
font-size: 18px;
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
.modal-body {
|
|
618
|
+
padding: 20px;
|
|
619
|
+
}
|
|
620
|
+
.modal-footer {
|
|
621
|
+
background-color: #f5f5f5;
|
|
622
|
+
padding: 14px 20px 15px;
|
|
623
|
+
border-top: 1px solid #ddd;
|
|
624
|
+
@include border-radius(0 0 6px 6px);
|
|
625
|
+
@include box-shadow(inset 0 1px 0 #fff);
|
|
626
|
+
@include clearfix();
|
|
627
|
+
margin-bottom: 0;
|
|
628
|
+
.btn {
|
|
629
|
+
float: right;
|
|
630
|
+
margin-left: 10px;
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
|
|
636
|
+
// POPOVER ARROWS
|
|
637
|
+
// --------------
|
|
638
|
+
|
|
639
|
+
|
|
640
|
+
@mixin popover-arrow-above($arrowWidth: 5px) {
|
|
641
|
+
bottom: 0;
|
|
642
|
+
left: 50%;
|
|
643
|
+
margin-left: -$arrowWidth;
|
|
644
|
+
border-left: $arrowWidth solid transparent;
|
|
645
|
+
border-right: $arrowWidth solid transparent;
|
|
646
|
+
border-top: $arrowWidth solid #000;
|
|
647
|
+
}
|
|
648
|
+
@mixin popover-arrow-left($arrowWidth: 5px) {
|
|
649
|
+
top: 50%;
|
|
650
|
+
right: 0;
|
|
651
|
+
margin-top: -$arrowWidth;
|
|
652
|
+
border-top: $arrowWidth solid transparent;
|
|
653
|
+
border-bottom: $arrowWidth solid transparent;
|
|
654
|
+
border-left: $arrowWidth solid #000;
|
|
655
|
+
}
|
|
656
|
+
@mixin popover-arrow-below($arrowWidth: 5px) {
|
|
657
|
+
top: 0;
|
|
658
|
+
left: 50%;
|
|
659
|
+
margin-left: -$arrowWidth;
|
|
660
|
+
border-left: $arrowWidth solid transparent;
|
|
661
|
+
border-right: $arrowWidth solid transparent;
|
|
662
|
+
border-bottom: $arrowWidth solid #000;
|
|
663
|
+
}
|
|
664
|
+
@mixin popover-arrow-right($arrowWidth: 5px) {
|
|
665
|
+
top: 50%;
|
|
666
|
+
left: 0;
|
|
667
|
+
margin-top: -$arrowWidth;
|
|
668
|
+
border-top: $arrowWidth solid transparent;
|
|
669
|
+
border-bottom: $arrowWidth solid transparent;
|
|
670
|
+
border-right: $arrowWidth solid #000;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
|
|
674
|
+
// TWIPSY
|
|
675
|
+
// ------
|
|
676
|
+
|
|
677
|
+
.twipsy {
|
|
678
|
+
display: block;
|
|
679
|
+
position: absolute;
|
|
680
|
+
visibility: visible;
|
|
681
|
+
padding: 5px;
|
|
682
|
+
font-size: 11px;
|
|
683
|
+
z-index: 1000;
|
|
684
|
+
@include opacity(80);
|
|
685
|
+
&.above .twipsy-arrow { @include popover-arrow-above(); }
|
|
686
|
+
&.left .twipsy-arrow { @include popover-arrow-left(); }
|
|
687
|
+
&.below .twipsy-arrow { @include popover-arrow-below(); }
|
|
688
|
+
&.right .twipsy-arrow { @include popover-arrow-right(); }
|
|
689
|
+
.twipsy-inner {
|
|
690
|
+
padding: 3px 8px;
|
|
691
|
+
background-color: #000;
|
|
692
|
+
color: white;
|
|
693
|
+
text-align: center;
|
|
694
|
+
max-width: 200px;
|
|
695
|
+
text-decoration: none;
|
|
696
|
+
@include border-radius(4px);
|
|
697
|
+
}
|
|
698
|
+
.twipsy-arrow {
|
|
699
|
+
position: absolute;
|
|
700
|
+
width: 0;
|
|
701
|
+
height: 0;
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
|
|
706
|
+
// POPOVERS
|
|
707
|
+
// --------
|
|
708
|
+
|
|
709
|
+
.popover {
|
|
710
|
+
position: absolute;
|
|
711
|
+
top: 0;
|
|
712
|
+
left: 0;
|
|
713
|
+
z-index: 1000;
|
|
714
|
+
padding: 5px;
|
|
715
|
+
display: none;
|
|
716
|
+
&.above .arrow { @include popover-arrow-above(); }
|
|
717
|
+
&.right .arrow { @include popover-arrow-right(); }
|
|
718
|
+
&.below .arrow { @include popover-arrow-below(); }
|
|
719
|
+
&.left .arrow { @include popover-arrow-left(); }
|
|
720
|
+
.arrow {
|
|
721
|
+
position: absolute;
|
|
722
|
+
width: 0;
|
|
723
|
+
height: 0;
|
|
724
|
+
}
|
|
725
|
+
.inner {
|
|
726
|
+
background-color: #333;
|
|
727
|
+
background-color: rgba(0,0,0,.8);
|
|
728
|
+
*background-color: #333; /* IE 6-7 */
|
|
729
|
+
padding: 3px;
|
|
730
|
+
overflow: hidden;
|
|
731
|
+
width: 280px;
|
|
732
|
+
@include border-radius(6px);
|
|
733
|
+
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
|
734
|
+
}
|
|
735
|
+
.title {
|
|
736
|
+
background-color: #f5f5f5;
|
|
737
|
+
padding: 9px 15px;
|
|
738
|
+
line-height: 1;
|
|
739
|
+
@include border-radius(3px 3px 0 0);
|
|
740
|
+
border-bottom:1px solid #eee;
|
|
741
|
+
}
|
|
742
|
+
.content {
|
|
743
|
+
background-color: $white;
|
|
744
|
+
padding: 14px;
|
|
745
|
+
@include border-radius(0 0 3px 3px);
|
|
746
|
+
@include background-clip(padding-box);
|
|
747
|
+
p, ul, ol {
|
|
748
|
+
margin-bottom: 0;
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
}
|