compass_twitter_bootstrap 0.1.4 → 0.1.5
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 +1 -0
- data/README.md +23 -0
- data/lib/compass_twitter_bootstrap/version.rb +1 -1
- data/lib/compass_twitter_bootstrap.rb +1 -1
- data/stylesheets/_compass_twitter_bootstrap.scss +7 -3
- data/stylesheets/compass_twitter_bootstrap/_forms.scss +135 -63
- data/stylesheets/compass_twitter_bootstrap/{_preboot.scss → _mixins.scss} +69 -109
- data/stylesheets/compass_twitter_bootstrap/_patterns.scss +277 -93
- data/stylesheets/compass_twitter_bootstrap/_reset.scss +5 -0
- data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss +88 -64
- data/stylesheets/compass_twitter_bootstrap/_tables.scss +30 -7
- data/stylesheets/compass_twitter_bootstrap/_type.scss +3 -3
- data/stylesheets/compass_twitter_bootstrap/_variables.scss +60 -0
- metadata +8 -7
@@ -23,8 +23,10 @@
|
|
23
23
|
}
|
24
24
|
|
25
25
|
// Hover and active states
|
26
|
-
|
27
|
-
|
26
|
+
// h3 for backwards compatibility
|
27
|
+
h3 a:hover,
|
28
|
+
.brand a:hover,
|
29
|
+
ul .active > a {
|
28
30
|
background-color: #333;
|
29
31
|
background-color: rgba(255,255,255,.05);
|
30
32
|
color: $white;
|
@@ -32,17 +34,29 @@
|
|
32
34
|
}
|
33
35
|
|
34
36
|
// Website name
|
37
|
+
// h3 left for backwards compatibility
|
35
38
|
h3 {
|
36
39
|
position: relative;
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
40
|
+
}
|
41
|
+
h3 a,
|
42
|
+
.brand {
|
43
|
+
float: left;
|
44
|
+
display: block;
|
45
|
+
padding: 8px 20px 12px;
|
46
|
+
margin-left: -20px; // negative indent to left-align the text down the page
|
47
|
+
color: $white;
|
48
|
+
font-size: 20px;
|
49
|
+
font-weight: 200;
|
50
|
+
line-height: 1;
|
51
|
+
}
|
52
|
+
|
53
|
+
// Plain text in topbar
|
54
|
+
p {
|
55
|
+
margin: 0;
|
56
|
+
line-height: 40px;
|
57
|
+
a:hover {
|
58
|
+
background-color: transparent;
|
42
59
|
color: $white;
|
43
|
-
font-size: 20px;
|
44
|
-
font-weight: 200;
|
45
|
-
line-height: 1;
|
46
60
|
}
|
47
61
|
}
|
48
62
|
|
@@ -53,12 +67,16 @@
|
|
53
67
|
position: relative;
|
54
68
|
@include opacity(100);
|
55
69
|
}
|
70
|
+
// Todo: remove from v2.0 when ready, added for legacy
|
71
|
+
form.pull-right {
|
72
|
+
float: right;
|
73
|
+
}
|
56
74
|
input {
|
57
75
|
background-color: #444;
|
58
76
|
background-color: rgba(255,255,255,.3);
|
59
77
|
@include sans-serif(13px, normal, 1);
|
60
78
|
padding: 4px 9px;
|
61
|
-
color:
|
79
|
+
color: $white;
|
62
80
|
color: rgba(255,255,255,.75);
|
63
81
|
border: 1px solid #111;
|
64
82
|
@include border-radius(4px);
|
@@ -77,15 +95,15 @@
|
|
77
95
|
&:hover {
|
78
96
|
background-color: $grayLight;
|
79
97
|
background-color: rgba(255,255,255,.5);
|
80
|
-
color:
|
98
|
+
color: $white;
|
81
99
|
}
|
82
100
|
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
83
101
|
&:focus,
|
84
102
|
&.focused {
|
85
|
-
outline:
|
86
|
-
background-color:
|
103
|
+
outline: 0;
|
104
|
+
background-color: $white;
|
87
105
|
color: $grayDark;
|
88
|
-
text-shadow: 0 1px 0
|
106
|
+
text-shadow: 0 1px 0 $white;
|
89
107
|
border: 0;
|
90
108
|
padding: 5px 10px;
|
91
109
|
@include box-shadow(0 0 3px rgba(0,0,0,.15));
|
@@ -94,11 +112,11 @@
|
|
94
112
|
}
|
95
113
|
|
96
114
|
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
97
|
-
// For backwards
|
115
|
+
// For backwards compatibility, include .topbar .fill
|
98
116
|
.topbar-inner,
|
99
117
|
.topbar .fill {
|
100
118
|
background-color: #222;
|
101
|
-
@include vertical(#333, #222);
|
119
|
+
@include gradient-vertical(#333, #222);
|
102
120
|
$shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
103
121
|
@include box-shadow($shadow);
|
104
122
|
}
|
@@ -128,11 +146,11 @@
|
|
128
146
|
line-height: 19px;
|
129
147
|
text-decoration: none;
|
130
148
|
&:hover {
|
131
|
-
color:
|
149
|
+
color: $white;
|
132
150
|
text-decoration: none;
|
133
151
|
}
|
134
152
|
}
|
135
|
-
.active a {
|
153
|
+
.active > a {
|
136
154
|
background-color: #222;
|
137
155
|
background-color: rgba(0,0,0,.5);
|
138
156
|
}
|
@@ -146,6 +164,7 @@
|
|
146
164
|
.menu-dropdown,
|
147
165
|
.dropdown-menu {
|
148
166
|
right: 0;
|
167
|
+
border: 0;
|
149
168
|
}
|
150
169
|
}
|
151
170
|
// Dropdowns within the .nav
|
@@ -164,7 +183,7 @@
|
|
164
183
|
// a.menu for backwards compatibility
|
165
184
|
a.menu,
|
166
185
|
.dropdown-toggle {
|
167
|
-
color:
|
186
|
+
color: $white;
|
168
187
|
&.open {
|
169
188
|
background: #444;
|
170
189
|
background: rgba(255,255,255,.05);
|
@@ -174,10 +193,13 @@
|
|
174
193
|
color: #999;
|
175
194
|
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
176
195
|
&:hover {
|
177
|
-
@include vertical(#292929,#191919);
|
178
|
-
color:
|
196
|
+
@include gradient-vertical(#292929,#191919);
|
197
|
+
color: $white;
|
179
198
|
}
|
180
199
|
}
|
200
|
+
.active a {
|
201
|
+
color: $white;
|
202
|
+
}
|
181
203
|
.divider {
|
182
204
|
background-color: #222;
|
183
205
|
border-color: #444;
|
@@ -185,7 +207,7 @@
|
|
185
207
|
}
|
186
208
|
}
|
187
209
|
|
188
|
-
// For backwards
|
210
|
+
// For backwards compatibility with new dropdowns, redeclare dropdown link padding
|
189
211
|
.topbar ul .menu-dropdown li a,
|
190
212
|
.topbar ul .dropdown-menu li a {
|
191
213
|
padding: 4px 15px;
|
@@ -212,18 +234,19 @@ a.menu:after,
|
|
212
234
|
margin-left: 4px;
|
213
235
|
border-left: 4px solid transparent;
|
214
236
|
border-right: 4px solid transparent;
|
215
|
-
border-top: 4px solid
|
237
|
+
border-top: 4px solid $white;
|
216
238
|
@include opacity(50);
|
217
239
|
}
|
218
240
|
// The dropdown menu (ul)
|
219
241
|
// .menu-dropdown for backwards compatibility
|
220
242
|
.menu-dropdown,
|
221
243
|
.dropdown-menu {
|
222
|
-
background-color:
|
244
|
+
background-color: $white;
|
223
245
|
float: left;
|
224
246
|
display: none; // None by default, but block on "open" of the menu
|
225
247
|
position: absolute;
|
226
248
|
top: 40px;
|
249
|
+
z-index: 900;
|
227
250
|
min-width: 160px;
|
228
251
|
max-width: 220px;
|
229
252
|
_width: 160px;
|
@@ -251,7 +274,7 @@ a.menu:after,
|
|
251
274
|
margin: 5px 0;
|
252
275
|
overflow: hidden;
|
253
276
|
background-color: #eee;
|
254
|
-
border-bottom: 1px solid
|
277
|
+
border-bottom: 1px solid $white;
|
255
278
|
}
|
256
279
|
}
|
257
280
|
|
@@ -264,10 +287,10 @@ a.menu:after,
|
|
264
287
|
font-weight: normal;
|
265
288
|
line-height: 18px;
|
266
289
|
color: $gray;
|
267
|
-
text-shadow: 0 1px 0
|
290
|
+
text-shadow: 0 1px 0 $white;
|
268
291
|
// Hover state
|
269
292
|
&:hover {
|
270
|
-
@include vertical(#eeeeee, #dddddd);
|
293
|
+
@include gradient-vertical(#eeeeee, #dddddd);
|
271
294
|
color: $grayDark;
|
272
295
|
text-decoration: none;
|
273
296
|
$shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
|
@@ -283,7 +306,7 @@ a.menu:after,
|
|
283
306
|
// .menu for backwards compatibility
|
284
307
|
.menu,
|
285
308
|
.dropdown-toggle {
|
286
|
-
color:
|
309
|
+
color: $white;
|
287
310
|
background: #ccc;
|
288
311
|
background: rgba(0,0,0,.3);
|
289
312
|
}
|
@@ -301,7 +324,7 @@ a.menu:after,
|
|
301
324
|
margin: 0 0 20px;
|
302
325
|
padding: 0;
|
303
326
|
list-style: none;
|
304
|
-
@include
|
327
|
+
@include clearfix();
|
305
328
|
> li {
|
306
329
|
float: left;
|
307
330
|
> a {
|
@@ -312,28 +335,29 @@ a.menu:after,
|
|
312
335
|
|
313
336
|
// Basic Tabs
|
314
337
|
.tabs {
|
338
|
+
float: left;
|
315
339
|
width: 100%;
|
316
340
|
border-bottom: 1px solid #ddd;
|
317
341
|
> li {
|
318
342
|
position: relative; // For the dropdowns mostly
|
319
343
|
top: 1px;
|
320
344
|
> a {
|
321
|
-
margin-right: 2px;
|
322
345
|
padding: 0 15px;
|
323
|
-
|
346
|
+
margin-right: 2px;
|
347
|
+
line-height: $baseline * 2;
|
348
|
+
border: 1px solid transparent;
|
324
349
|
@include border-radius(4px 4px 0 0);
|
325
350
|
&:hover {
|
326
|
-
background-color: #eee;
|
327
|
-
border-bottom: 1px solid #ddd;
|
328
351
|
text-decoration: none;
|
352
|
+
background-color: #eee;
|
353
|
+
border-color: #eee #eee #ddd;
|
329
354
|
}
|
330
355
|
}
|
331
356
|
&.active > a {
|
332
|
-
background-color: #fff;
|
333
|
-
padding: 0 14px;
|
334
|
-
border: 1px solid #ddd;
|
335
|
-
border-bottom: 0;
|
336
357
|
color: $gray;
|
358
|
+
background-color: $white;
|
359
|
+
border: 1px solid #ddd;
|
360
|
+
border-bottom-color: transparent;
|
337
361
|
}
|
338
362
|
}
|
339
363
|
// first one for backwards compatibility
|
@@ -351,41 +375,84 @@ a.menu:after,
|
|
351
375
|
margin-left: 5px;
|
352
376
|
}
|
353
377
|
// first one for backwards compatibility
|
378
|
+
li.open.menu .menu,
|
379
|
+
.open.dropdown .dropdown-toggle {
|
380
|
+
border-color: #999;
|
381
|
+
}
|
382
|
+
// first one for backwards compatibility
|
354
383
|
li.open a.menu:after,
|
355
384
|
.dropdown.open .dropdown-toggle:after {
|
356
385
|
border-top-color: #555;
|
357
386
|
}
|
358
387
|
}
|
388
|
+
.tab-content {
|
389
|
+
clear: both;
|
390
|
+
}
|
359
391
|
|
360
392
|
// Basic pill nav
|
361
393
|
.pills {
|
362
394
|
a {
|
363
|
-
|
395
|
+
margin: 5px 3px 5px 0;
|
364
396
|
padding: 0 15px;
|
365
|
-
text-shadow: 0 1px 1px
|
397
|
+
text-shadow: 0 1px 1px $white;
|
366
398
|
line-height: 30px;
|
367
399
|
@include border-radius(15px);
|
368
400
|
&:hover {
|
369
401
|
background: $linkColorHover;
|
370
|
-
color:
|
402
|
+
color: $white;
|
371
403
|
text-decoration: none;
|
372
404
|
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
373
405
|
}
|
374
406
|
}
|
375
407
|
.active a {
|
376
408
|
background: $linkColor;
|
377
|
-
color:
|
409
|
+
color: $white;
|
378
410
|
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
379
411
|
}
|
380
412
|
}
|
381
413
|
|
414
|
+
.tab-content > *,
|
415
|
+
.pill-content > * {
|
416
|
+
display: none;
|
417
|
+
}
|
418
|
+
|
419
|
+
.tab-content > .active,
|
420
|
+
.pill-content > .active {
|
421
|
+
display:block;
|
422
|
+
}
|
423
|
+
|
424
|
+
|
425
|
+
// BREADCRUMBS
|
426
|
+
// -----------
|
427
|
+
|
428
|
+
.breadcrumb {
|
429
|
+
margin: 0 0 $baseline;
|
430
|
+
padding: 7px 14px;
|
431
|
+
@include gradient-vertical(#ffffff, #f5f5f5);
|
432
|
+
border: 1px solid #ddd;
|
433
|
+
@include border-radius(3px);
|
434
|
+
@include box-shadow(inset 0 1px 0 $white);
|
435
|
+
li {
|
436
|
+
display: inline;
|
437
|
+
text-shadow: 0 1px 0 $white;
|
438
|
+
}
|
439
|
+
.divider {
|
440
|
+
padding: 0 5px;
|
441
|
+
color: $grayLight;
|
442
|
+
}
|
443
|
+
a {
|
444
|
+
}
|
445
|
+
.active a {
|
446
|
+
color: $grayDark;
|
447
|
+
}
|
448
|
+
}
|
449
|
+
|
382
450
|
|
383
451
|
// PAGE HEADERS
|
384
452
|
// ------------
|
385
453
|
|
386
454
|
.hero-unit {
|
387
455
|
background-color: #f5f5f5;
|
388
|
-
margin-top: 60px;
|
389
456
|
margin-bottom: 30px;
|
390
457
|
padding: 60px;
|
391
458
|
@include border-radius(6px);
|
@@ -424,16 +491,45 @@ footer {
|
|
424
491
|
// BUTTON STYLES
|
425
492
|
// -------------
|
426
493
|
|
494
|
+
// Shared colors for buttons and alerts
|
495
|
+
.btn,
|
496
|
+
.alert-message {
|
497
|
+
// Set text color
|
498
|
+
&.danger,
|
499
|
+
&.danger:hover,
|
500
|
+
&.error,
|
501
|
+
&.error:hover,
|
502
|
+
&.success,
|
503
|
+
&.success:hover,
|
504
|
+
&.info,
|
505
|
+
&.info:hover {
|
506
|
+
color: $white
|
507
|
+
}
|
508
|
+
// Danger and error appear as red
|
509
|
+
&.danger,
|
510
|
+
&.error {
|
511
|
+
@include gradientBar(#ee5f5b, #c43c35);
|
512
|
+
}
|
513
|
+
// Success appears as green
|
514
|
+
&.success {
|
515
|
+
@include gradientBar(#62c462, #57a957);
|
516
|
+
}
|
517
|
+
// Info appears as a neutral blue
|
518
|
+
&.info {
|
519
|
+
@include gradientBar(#5bc0de, #339bb9);
|
520
|
+
}
|
521
|
+
}
|
522
|
+
|
427
523
|
// Base .btn styles
|
428
524
|
.btn {
|
429
525
|
// Button Base
|
430
526
|
cursor: pointer;
|
431
527
|
display: inline-block;
|
432
|
-
@include vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use
|
528
|
+
@include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use @include gradientbar(); here since it does a three-color gradient
|
433
529
|
padding: 5px 14px 6px;
|
434
530
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
435
531
|
color: #333;
|
436
|
-
font-size:
|
532
|
+
font-size: $basefont;
|
437
533
|
line-height: normal;
|
438
534
|
border: 1px solid #ccc;
|
439
535
|
border-bottom-color: #bbb;
|
@@ -447,10 +543,15 @@ footer {
|
|
447
543
|
text-decoration: none;
|
448
544
|
}
|
449
545
|
|
546
|
+
// Focus state for keyboard and accessibility
|
547
|
+
&:focus {
|
548
|
+
outline: 1px dotted #666;
|
549
|
+
}
|
550
|
+
|
450
551
|
// Primary Button Type
|
451
552
|
&.primary {
|
452
|
-
color
|
453
|
-
@include gradientBar($blue, $blueDark)
|
553
|
+
color: $white;
|
554
|
+
@include gradientBar($blue, $blueDark);
|
454
555
|
}
|
455
556
|
|
456
557
|
// Transitions
|
@@ -464,7 +565,7 @@ footer {
|
|
464
565
|
&.disabled {
|
465
566
|
cursor: default;
|
466
567
|
background-image: none;
|
467
|
-
@include reset-filter;
|
568
|
+
@include reset-filter();
|
468
569
|
@include opacity(65);
|
469
570
|
@include box-shadow(none);
|
470
571
|
}
|
@@ -473,21 +574,21 @@ footer {
|
|
473
574
|
// def because IE8 and below will drop it ;_;
|
474
575
|
cursor: default;
|
475
576
|
background-image: none;
|
476
|
-
@include reset-filter;
|
577
|
+
@include reset-filter();
|
477
578
|
@include opacity(65);
|
478
579
|
@include box-shadow(none);
|
479
580
|
}
|
480
581
|
|
481
582
|
// Button Sizes
|
482
583
|
&.large {
|
483
|
-
font-size:
|
584
|
+
font-size: $basefont + 2px;
|
484
585
|
line-height: normal;
|
485
586
|
padding: 9px 14px 9px;
|
486
587
|
@include border-radius(6px);
|
487
588
|
}
|
488
589
|
&.small {
|
489
590
|
padding: 7px 9px 7px;
|
490
|
-
font-size:
|
591
|
+
font-size: $basefont - 2px;
|
491
592
|
}
|
492
593
|
}
|
493
594
|
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
|
@@ -506,21 +607,45 @@ input[type=submit].btn {
|
|
506
607
|
}
|
507
608
|
|
508
609
|
|
610
|
+
// CLOSE ICONS
|
611
|
+
// -----------
|
612
|
+
.close {
|
613
|
+
float: right;
|
614
|
+
color: $black;
|
615
|
+
font-size: 20px;
|
616
|
+
font-weight: bold;
|
617
|
+
line-height: $baseline * .75;
|
618
|
+
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
619
|
+
@include opacity(20);
|
620
|
+
&:hover {
|
621
|
+
color: $black;
|
622
|
+
text-decoration: none;
|
623
|
+
@include opacity(40);
|
624
|
+
}
|
625
|
+
}
|
626
|
+
|
627
|
+
|
509
628
|
// ERROR STYLES
|
510
629
|
// ------------
|
511
630
|
|
512
631
|
// Base alert styles
|
513
632
|
.alert-message {
|
514
|
-
|
633
|
+
position: relative;
|
634
|
+
padding: 7px 15px;
|
515
635
|
margin-bottom: $baseline;
|
516
|
-
padding: 7px 14px;
|
517
636
|
color: $grayDark;
|
637
|
+
@include gradientBar(#fceec1, #eedc94); // warning by default
|
518
638
|
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
519
639
|
border-width: 1px;
|
520
640
|
border-style: solid;
|
521
641
|
@include border-radius(4px);
|
522
642
|
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
523
643
|
|
644
|
+
// Adjust close icon
|
645
|
+
.close {
|
646
|
+
*margin-top: 3px; /* IE7 spacing */
|
647
|
+
}
|
648
|
+
|
524
649
|
// Remove extra margin from content
|
525
650
|
h5 {
|
526
651
|
line-height: $baseline;
|
@@ -537,32 +662,23 @@ input[type=submit].btn {
|
|
537
662
|
// Provide actions with buttons
|
538
663
|
@include box-shadow(0 1px 0 rgba(255,255,255,.25));
|
539
664
|
}
|
540
|
-
.close {
|
541
|
-
float: right;
|
542
|
-
margin-top: -2px;
|
543
|
-
color: $black;
|
544
|
-
font-size: 20px;
|
545
|
-
font-weight: bold;
|
546
|
-
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
547
|
-
@include opacity(20);
|
548
|
-
&:hover {
|
549
|
-
color: $black;
|
550
|
-
text-decoration: none;
|
551
|
-
@include opacity(40);
|
552
|
-
}
|
553
|
-
}
|
554
665
|
|
555
666
|
&.block-message {
|
556
667
|
background-image: none;
|
557
668
|
background-color: lighten(#fceec1, 5%);
|
558
|
-
@include reset-filter;
|
669
|
+
@include reset-filter();
|
559
670
|
padding: 14px;
|
560
671
|
border-color: #fceec1;
|
561
672
|
@include box-shadow(none);
|
562
|
-
|
563
|
-
p {
|
673
|
+
ul, p {
|
564
674
|
margin-right: 30px;
|
565
675
|
}
|
676
|
+
ul {
|
677
|
+
margin-bottom: 0;
|
678
|
+
}
|
679
|
+
li {
|
680
|
+
color: $grayDark;
|
681
|
+
}
|
566
682
|
.alert-actions {
|
567
683
|
margin-top: 5px;
|
568
684
|
}
|
@@ -642,6 +758,10 @@ input[type=submit].btn {
|
|
642
758
|
border: 1px solid rgba(0,0,0,.05);
|
643
759
|
@include border-radius(4px);
|
644
760
|
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
761
|
+
blockquote {
|
762
|
+
border-color: #ddd;
|
763
|
+
border-color: rgba(0,0,0,.15);
|
764
|
+
}
|
645
765
|
}
|
646
766
|
|
647
767
|
|
@@ -649,21 +769,28 @@ input[type=submit].btn {
|
|
649
769
|
// ------
|
650
770
|
|
651
771
|
.modal-backdrop {
|
652
|
-
background-color:
|
772
|
+
background-color: $black;
|
653
773
|
position: fixed;
|
654
774
|
top: 0;
|
655
775
|
left: 0;
|
656
776
|
right: 0;
|
657
777
|
bottom: 0;
|
658
|
-
z-index:
|
778
|
+
z-index: 10000;
|
779
|
+
// Fade for backdrop
|
780
|
+
&.fade { opacity: 0; }
|
659
781
|
}
|
782
|
+
|
783
|
+
.modal-backdrop, .modal-backdrop.fade.in {
|
784
|
+
@include opacity(80);
|
785
|
+
}
|
786
|
+
|
660
787
|
.modal {
|
661
788
|
position: fixed;
|
662
789
|
top: 50%;
|
663
790
|
left: 50%;
|
664
|
-
z-index:
|
791
|
+
z-index: 11000;
|
665
792
|
width: 560px;
|
666
|
-
margin: -
|
793
|
+
margin: -250px 0 0 -250px;
|
667
794
|
background-color: $white;
|
668
795
|
border: 1px solid #999;
|
669
796
|
border: 1px solid rgba(0,0,0,.3);
|
@@ -671,33 +798,31 @@ input[type=submit].btn {
|
|
671
798
|
@include border-radius(6px);
|
672
799
|
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
673
800
|
@include background-clip(padding-box);
|
801
|
+
.close { margin-top: 7px; }
|
802
|
+
&.fade {
|
803
|
+
@include transition(e('opacity .3s linear, top .3s ease-out'));
|
804
|
+
top: -25%;
|
805
|
+
}
|
806
|
+
&.fade.in { top: 50%; }
|
674
807
|
}
|
675
808
|
.modal-header {
|
676
809
|
border-bottom: 1px solid #eee;
|
677
|
-
padding: 5px
|
678
|
-
.close {
|
679
|
-
position: absolute;
|
680
|
-
right: 10px;
|
681
|
-
top: 10px;
|
682
|
-
color: #999;
|
683
|
-
line-height:10px;
|
684
|
-
font-size: 18px;
|
685
|
-
}
|
810
|
+
padding: 5px 15px;
|
686
811
|
}
|
687
812
|
.modal-body {
|
688
|
-
padding:
|
813
|
+
padding: 15px;
|
689
814
|
}
|
690
815
|
.modal-footer {
|
691
816
|
background-color: #f5f5f5;
|
692
|
-
padding: 14px
|
817
|
+
padding: 14px 15px 15px;
|
693
818
|
border-top: 1px solid #ddd;
|
694
819
|
@include border-radius(0 0 6px 6px);
|
695
|
-
@include box-shadow(inset 0 1px 0
|
820
|
+
@include box-shadow(inset 0 1px 0 $white);
|
696
821
|
@include clearfix();
|
697
822
|
margin-bottom: 0;
|
698
823
|
.btn {
|
699
824
|
float: right;
|
700
|
-
margin-left:
|
825
|
+
margin-left: 5px;
|
701
826
|
}
|
702
827
|
}
|
703
828
|
|
@@ -705,7 +830,6 @@ input[type=submit].btn {
|
|
705
830
|
// POPOVER ARROWS
|
706
831
|
// --------------
|
707
832
|
|
708
|
-
|
709
833
|
@mixin popover-arrow-above($arrowWidth: 5px) {
|
710
834
|
bottom: 0;
|
711
835
|
left: 50%;
|
@@ -739,7 +863,6 @@ input[type=submit].btn {
|
|
739
863
|
border-right: $arrowWidth solid #000;
|
740
864
|
}
|
741
865
|
|
742
|
-
|
743
866
|
// TWIPSY
|
744
867
|
// ------
|
745
868
|
|
@@ -751,6 +874,9 @@ input[type=submit].btn {
|
|
751
874
|
font-size: 11px;
|
752
875
|
z-index: 1000;
|
753
876
|
@include opacity(80);
|
877
|
+
&.fade.in {
|
878
|
+
@include opacity(80);
|
879
|
+
}
|
754
880
|
&.above .twipsy-arrow { @include popover-arrow-above(); }
|
755
881
|
&.left .twipsy-arrow { @include popover-arrow-left(); }
|
756
882
|
&.below .twipsy-arrow { @include popover-arrow-below(); }
|
@@ -758,7 +884,7 @@ input[type=submit].btn {
|
|
758
884
|
}
|
759
885
|
.twipsy-inner {
|
760
886
|
padding: 3px 8px;
|
761
|
-
background-color:
|
887
|
+
background-color: $black;
|
762
888
|
color: white;
|
763
889
|
text-align: center;
|
764
890
|
max-width: 200px;
|
@@ -792,8 +918,8 @@ input[type=submit].btn {
|
|
792
918
|
height: 0;
|
793
919
|
}
|
794
920
|
.inner {
|
795
|
-
background:
|
796
|
-
background: rgba(0,0,0,.8);
|
921
|
+
background-color: $black;
|
922
|
+
background-color: rgba(0,0,0,.8);
|
797
923
|
padding: 3px;
|
798
924
|
overflow: hidden;
|
799
925
|
width: 280px;
|
@@ -816,4 +942,62 @@ input[type=submit].btn {
|
|
816
942
|
margin-bottom: 0;
|
817
943
|
}
|
818
944
|
}
|
819
|
-
}
|
945
|
+
}
|
946
|
+
|
947
|
+
|
948
|
+
// PATTERN ANIMATIONS
|
949
|
+
// ------------------
|
950
|
+
|
951
|
+
.fade {
|
952
|
+
@include transition(opacity .15s linear);
|
953
|
+
opacity: 0;
|
954
|
+
&.in {
|
955
|
+
opacity: 1;
|
956
|
+
}
|
957
|
+
}
|
958
|
+
|
959
|
+
|
960
|
+
// LABELS
|
961
|
+
// ------
|
962
|
+
|
963
|
+
.label {
|
964
|
+
padding: 1px 3px 2px;
|
965
|
+
background-color: $grayLight;
|
966
|
+
font-size: $basefont * .75;
|
967
|
+
font-weight: bold;
|
968
|
+
color: $white;
|
969
|
+
text-transform: uppercase;
|
970
|
+
@include border-radius(3px);
|
971
|
+
&.important { background-color: #c43c35; }
|
972
|
+
&.warning { background-color: $orange; }
|
973
|
+
&.success { background-color: $green; }
|
974
|
+
&.notice { background-color: lighten($blue, 25%); }
|
975
|
+
}
|
976
|
+
|
977
|
+
|
978
|
+
// MEDIA GRIDS
|
979
|
+
// -----------
|
980
|
+
|
981
|
+
.media-grid {
|
982
|
+
margin-left: -20px;
|
983
|
+
margin-bottom: 0;
|
984
|
+
@include clearfix();
|
985
|
+
li {
|
986
|
+
display: inline;
|
987
|
+
}
|
988
|
+
a {
|
989
|
+
float: left;
|
990
|
+
padding: 4px;
|
991
|
+
margin: 0 0 20px 20px;
|
992
|
+
border: 1px solid #ddd;
|
993
|
+
@include border-radius(4px);
|
994
|
+
@include box-shadow(0 1px 1px rgba(0,0,0,.075));
|
995
|
+
img {
|
996
|
+
display: block;
|
997
|
+
}
|
998
|
+
&:hover {
|
999
|
+
border-color: $linkColor;
|
1000
|
+
@include box-shadow(0 1px 4px rgba(0,105,214,.25));
|
1001
|
+
}
|
1002
|
+
}
|
1003
|
+
}
|