compass-bootstrap-rails 0.1.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. data/.gitignore +8 -0
  2. data/Gemfile +4 -0
  3. data/README.mkdn +151 -0
  4. data/Rakefile +1 -0
  5. data/compass-bootstrap.gemspec +25 -0
  6. data/lib/compass-bootstrap/rails/engine.rb +7 -0
  7. data/lib/compass-bootstrap/rails.rb +7 -0
  8. data/lib/compass-bootstrap/version.rb +5 -0
  9. data/lib/compass-bootstrap.rb +9 -0
  10. data/stylesheets/compass-bootstrap/_compass_bootstrap.scss +29 -0
  11. data/stylesheets/compass-bootstrap/_forms.scss +465 -0
  12. data/stylesheets/compass-bootstrap/_mixins.scss +210 -0
  13. data/stylesheets/compass-bootstrap/_patterns.scss +1003 -0
  14. data/stylesheets/compass-bootstrap/_reset.scss +141 -0
  15. data/stylesheets/compass-bootstrap/_scaffolding.scss +137 -0
  16. data/stylesheets/compass-bootstrap/_tables.scss +171 -0
  17. data/stylesheets/compass-bootstrap/_type.scss +187 -0
  18. data/stylesheets/compass-bootstrap/_variables.scss +60 -0
  19. data/vendor/assets/javascripts/bootstrap-alerts.js +104 -0
  20. data/vendor/assets/javascripts/bootstrap-dropdown.js +50 -0
  21. data/vendor/assets/javascripts/bootstrap-modal.js +227 -0
  22. data/vendor/assets/javascripts/bootstrap-popover.js +77 -0
  23. data/vendor/assets/javascripts/bootstrap-scrollspy.js +105 -0
  24. data/vendor/assets/javascripts/bootstrap-tabs.js +62 -0
  25. data/vendor/assets/javascripts/bootstrap-twipsy.js +307 -0
  26. data/vendor/assets/stylesheets/compass-bootstrap/_compass_bootstrap.scss +29 -0
  27. data/vendor/assets/stylesheets/compass-bootstrap/_forms.scss +465 -0
  28. data/vendor/assets/stylesheets/compass-bootstrap/_mixins.scss +210 -0
  29. data/vendor/assets/stylesheets/compass-bootstrap/_patterns.scss +1003 -0
  30. data/vendor/assets/stylesheets/compass-bootstrap/_reset.scss +141 -0
  31. data/vendor/assets/stylesheets/compass-bootstrap/_scaffolding.scss +137 -0
  32. data/vendor/assets/stylesheets/compass-bootstrap/_tables.scss +171 -0
  33. data/vendor/assets/stylesheets/compass-bootstrap/_type.scss +187 -0
  34. data/vendor/assets/stylesheets/compass-bootstrap/_variables.scss +60 -0
  35. data/vendor/assets/stylesheets/compass-bootstrap/compass_bootstrap.scss +29 -0
  36. data/vendor/assets/stylesheets/compass-bootstrap/manifest.rb +20 -0
  37. metadata +94 -0
@@ -0,0 +1,1003 @@
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
+ // Links get text shadow
20
+ a {
21
+ color: $grayLight;
22
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
+ }
24
+
25
+ // Hover and active states
26
+ // h3 for backwards compatibility
27
+ h3 a:hover,
28
+ .brand a:hover,
29
+ ul .active > a {
30
+ background-color: #333;
31
+ background-color: rgba(255,255,255,.05);
32
+ color: $white;
33
+ text-decoration: none;
34
+ }
35
+
36
+ // Website name
37
+ // h3 left for backwards compatibility
38
+ h3 {
39
+ position: relative;
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;
59
+ color: $white;
60
+ }
61
+ }
62
+
63
+ // Search Form
64
+ form {
65
+ float: left;
66
+ margin: 5px 0 0 0;
67
+ position: relative;
68
+ @include opacity(100);
69
+ }
70
+ // Todo: remove from v2.0 when ready, added for legacy
71
+ form.pull-right {
72
+ float: right;
73
+ }
74
+ input {
75
+ background-color: #444;
76
+ background-color: rgba(255,255,255,.3);
77
+ @include font-sans-serif(13px, normal, 1);
78
+ padding: 4px 9px;
79
+ color: $white;
80
+ color: rgba(255,255,255,.75);
81
+ border: 1px solid #111;
82
+ @include border-radius(4px);
83
+ $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
+ @include box-shadow($shadow);
85
+ @include transition(none);
86
+
87
+ // Placeholder text gets special styles; can't be bundled together though for some reason
88
+ &:-moz-placeholder {
89
+ color: $grayLighter;
90
+ }
91
+ &::-webkit-input-placeholder {
92
+ color: $grayLighter;
93
+ }
94
+ // Hover states
95
+ &:hover {
96
+ background-color: $grayLight;
97
+ background-color: rgba(255,255,255,.5);
98
+ color: $white;
99
+ }
100
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
+ &:focus,
102
+ &.focused {
103
+ outline: 0;
104
+ background-color: $white;
105
+ color: $grayDark;
106
+ text-shadow: 0 1px 0 $white;
107
+ border: 0;
108
+ padding: 5px 10px;
109
+ @include box-shadow(0 0 3px rgba(0,0,0,.15));
110
+ }
111
+ }
112
+ }
113
+
114
+ // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
+ // For backwards compatibility, include .topbar .fill
116
+ .topbar-inner,
117
+ .topbar .fill {
118
+ background-color: #222;
119
+ @include gradient-vertical(#333, #222);
120
+ $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
+ @include box-shadow($shadow);
122
+ }
123
+
124
+
125
+ // NAVIGATION
126
+ // ----------
127
+
128
+ // Topbar Nav
129
+ // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
+ // For backwards compatibility, leave in .topbar div > ul
131
+ .topbar div > ul,
132
+ .nav {
133
+ display: block;
134
+ float: left;
135
+ margin: 0 10px 0 0;
136
+ position: relative;
137
+ left: 0;
138
+ > li {
139
+ display: block;
140
+ float: left;
141
+ }
142
+ a {
143
+ display: block;
144
+ float: none;
145
+ padding: 10px 10px 11px;
146
+ line-height: 19px;
147
+ text-decoration: none;
148
+ &:hover {
149
+ color: $white;
150
+ text-decoration: none;
151
+ }
152
+ }
153
+ .active > a {
154
+ background-color: #222;
155
+ background-color: rgba(0,0,0,.5);
156
+ }
157
+
158
+ // Secondary (floated right) nav in topbar
159
+ &.secondary-nav {
160
+ float: right;
161
+ margin-left: 10px;
162
+ margin-right: 0;
163
+ // backwards compatibility
164
+ .menu-dropdown,
165
+ .dropdown-menu {
166
+ right: 0;
167
+ border: 0;
168
+ }
169
+ }
170
+ // Dropdowns within the .nav
171
+ // a.menu:hover and li.open .menu for backwards compatibility
172
+ a.menu:hover,
173
+ li.open .menu,
174
+ .dropdown-toggle:hover,
175
+ .dropdown.open .dropdown-toggle {
176
+ background: #444;
177
+ background: rgba(255,255,255,.05);
178
+ }
179
+ // .menu-dropdown for backwards compatibility
180
+ .menu-dropdown,
181
+ .dropdown-menu {
182
+ background-color: #333;
183
+ // a.menu for backwards compatibility
184
+ a.menu,
185
+ .dropdown-toggle {
186
+ color: $white;
187
+ &.open {
188
+ background: #444;
189
+ background: rgba(255,255,255,.05);
190
+ }
191
+ }
192
+ li a {
193
+ color: #999;
194
+ text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
+ &:hover {
196
+ @include gradient-vertical(#292929,#191919);
197
+ color: $white;
198
+ }
199
+ }
200
+ .active a {
201
+ color: $white;
202
+ }
203
+ .divider {
204
+ background-color: #222;
205
+ border-color: #444;
206
+ }
207
+ }
208
+ }
209
+
210
+ // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
+ .topbar ul .menu-dropdown li a,
212
+ .topbar ul .dropdown-menu li a {
213
+ padding: 4px 15px;
214
+ }
215
+
216
+ // Dropdown Menus
217
+ // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
+ // li.menu for backwards compatibility
219
+ li.menu,
220
+ .dropdown {
221
+ position: relative;
222
+ }
223
+ // The link that is clicked to toggle the dropdown
224
+ // a.menu for backwards compatibility
225
+ a.menu:after,
226
+ .dropdown-toggle:after {
227
+ width: 0;
228
+ height: 0;
229
+ display: inline-block;
230
+ content: "&darr;";
231
+ text-indent: -99999px;
232
+ vertical-align: top;
233
+ margin-top: 8px;
234
+ margin-left: 4px;
235
+ border-left: 4px solid transparent;
236
+ border-right: 4px solid transparent;
237
+ border-top: 4px solid $white;
238
+ @include opacity(50);
239
+ }
240
+ // The dropdown menu (ul)
241
+ // .menu-dropdown for backwards compatibility
242
+ .menu-dropdown,
243
+ .dropdown-menu {
244
+ background-color: $white;
245
+ float: left;
246
+ display: none; // None by default, but block on "open" of the menu
247
+ position: absolute;
248
+ top: 40px;
249
+ z-index: 900;
250
+ min-width: 160px;
251
+ max-width: 220px;
252
+ _width: 160px;
253
+ margin-left: 0; // override default ul styles
254
+ margin-right: 0;
255
+ padding: 6px 0;
256
+ zoom: 1; // do we need this?
257
+ border-color: #999;
258
+ border-color: rgba(0,0,0,.2);
259
+ border-style: solid;
260
+ border-width: 0 1px 1px;
261
+ @include border-radius(0 0 6px 6px);
262
+ @include box-shadow(0 2px 4px rgba(0,0,0,.2));
263
+ @include background-clip(padding-box);
264
+
265
+ // Unfloat any li's to make them stack
266
+ li {
267
+ float: none;
268
+ display: block;
269
+ background-color: none;
270
+ }
271
+ // Dividers (basically an hr) within the dropdown
272
+ .divider {
273
+ height: 1px;
274
+ margin: 5px 0;
275
+ overflow: hidden;
276
+ background-color: #eee;
277
+ border-bottom: 1px solid $white;
278
+ }
279
+ }
280
+
281
+ .topbar .dropdown-menu, .dropdown-menu {
282
+ // Links within the dropdown menu
283
+ a {
284
+ display: block;
285
+ padding: 4px 15px;
286
+ clear: both;
287
+ font-weight: normal;
288
+ line-height: 18px;
289
+ color: $gray;
290
+ text-shadow: 0 1px 0 $white;
291
+ // Hover state
292
+ &:hover {
293
+ @include gradient-vertical(#eeeeee, #dddddd);
294
+ color: $grayDark;
295
+ text-decoration: none;
296
+ $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
297
+ @include box-shadow($shadow);
298
+ }
299
+ }
300
+ }
301
+
302
+ // Open state for the dropdown
303
+ // .open for backwards compatibility
304
+ .open,
305
+ .dropdown.open {
306
+ // .menu for backwards compatibility
307
+ .menu,
308
+ .dropdown-toggle {
309
+ color: $white;
310
+ background: #ccc;
311
+ background: rgba(0,0,0,.3);
312
+ }
313
+ // .menu-dropdown for backwards compatibility
314
+ .menu-dropdown,
315
+ .dropdown-menu {
316
+ display: block;
317
+ }
318
+ }
319
+
320
+
321
+ // Tabs and Pills
322
+ .tabs,
323
+ .pills {
324
+ margin: 0 0 20px;
325
+ padding: 0;
326
+ list-style: none;
327
+ @include clearfix();
328
+ > li {
329
+ float: left;
330
+ > a {
331
+ display: block;
332
+ }
333
+ }
334
+ }
335
+
336
+ // Basic Tabs
337
+ .tabs {
338
+ float: left;
339
+ width: 100%;
340
+ border-bottom: 1px solid #ddd;
341
+ > li {
342
+ position: relative; // For the dropdowns mostly
343
+ top: 1px;
344
+ > a {
345
+ padding: 0 15px;
346
+ margin-right: 2px;
347
+ line-height: $baseline * 2;
348
+ border: 1px solid transparent;
349
+ @include border-radius(4px 4px 0 0);
350
+ &:hover {
351
+ text-decoration: none;
352
+ background-color: #eee;
353
+ border-color: #eee #eee #ddd;
354
+ }
355
+ }
356
+ &.active > a {
357
+ color: $gray;
358
+ background-color: $white;
359
+ border: 1px solid #ddd;
360
+ border-bottom-color: transparent;
361
+ }
362
+ }
363
+ // first one for backwards compatibility
364
+ .menu-dropdown,
365
+ .dropdown-menu {
366
+ top: 35px;
367
+ border-width: 1px;
368
+ @include border-radius(0 6px 6px 6px);
369
+ }
370
+ // first one for backwards compatibility
371
+ a.menu:after,
372
+ .dropdown-toggle:after {
373
+ border-top-color: #999;
374
+ margin-top: 15px;
375
+ margin-left: 5px;
376
+ }
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
383
+ li.open a.menu:after,
384
+ .dropdown.open .dropdown-toggle:after {
385
+ border-top-color: #555;
386
+ }
387
+ }
388
+ .tab-content {
389
+ clear: both;
390
+ }
391
+
392
+ // Basic pill nav
393
+ .pills {
394
+ a {
395
+ margin: 5px 3px 5px 0;
396
+ padding: 0 15px;
397
+ text-shadow: 0 1px 1px $white;
398
+ line-height: 30px;
399
+ @include border-radius(15px);
400
+ &:hover {
401
+ background: $linkColorHover;
402
+ color: $white;
403
+ text-decoration: none;
404
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
405
+ }
406
+ }
407
+ .active a {
408
+ background: $linkColor;
409
+ color: $white;
410
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
411
+ }
412
+ }
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
+
450
+
451
+ // PAGE HEADERS
452
+ // ------------
453
+
454
+ .hero-unit {
455
+ background-color: #f5f5f5;
456
+ margin-bottom: 30px;
457
+ padding: 60px;
458
+ @include border-radius(6px);
459
+ h1 {
460
+ margin-bottom: 0;
461
+ font-size: 60px;
462
+ line-height: 1;
463
+ letter-spacing: -1px;
464
+ }
465
+ p {
466
+ font-size: 18px;
467
+ font-weight: 200;
468
+ line-height: $baseline * 1.5;
469
+ }
470
+ }
471
+ footer {
472
+ margin-top: $baseline - 1;
473
+ padding-top: $baseline - 1;
474
+ border-top: 1px solid #eee;
475
+ }
476
+
477
+
478
+ // PAGE HEADERS
479
+ // ------------
480
+
481
+ .page-header {
482
+ margin-bottom: $baseline - 1;
483
+ border-bottom: 1px solid #ddd;
484
+ @include box-shadow(0 1px 0 rgba(255,255,255,.5));
485
+ h1 {
486
+ margin-bottom: ($baseline / 2) - 1px;
487
+ }
488
+ }
489
+
490
+
491
+ // BUTTON STYLES
492
+ // -------------
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
+
523
+ // Base .btn styles
524
+ .btn {
525
+ // Button Base
526
+ cursor: pointer;
527
+ display: inline-block;
528
+ @include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
529
+ padding: 5px 14px 6px;
530
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
531
+ color: #333;
532
+ font-size: $basefont;
533
+ line-height: normal;
534
+ border: 1px solid #ccc;
535
+ border-bottom-color: #bbb;
536
+ @include border-radius(4px);
537
+ $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
538
+ @include box-shadow($shadow);
539
+
540
+ &:hover {
541
+ background-position: 0 -15px;
542
+ color: #333;
543
+ text-decoration: none;
544
+ }
545
+
546
+ // Focus state for keyboard and accessibility
547
+ &:focus {
548
+ outline: 1px dotted #666;
549
+ }
550
+
551
+ // Primary Button Type
552
+ &.primary {
553
+ color: $white;
554
+ @include gradientBar($blue, $blueDark)
555
+ }
556
+
557
+ // Transitions
558
+ @include transition(.1s linear all);
559
+
560
+ // Active and Disabled states
561
+ &:active {
562
+ $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
563
+ @include box-shadow($shadow);
564
+ }
565
+ &.disabled {
566
+ cursor: default;
567
+ background-image: none;
568
+ @include reset-filter();
569
+ @include opacity(65);
570
+ @include box-shadow(none);
571
+ }
572
+ &[disabled] {
573
+ // disabled pseudo can't be included with .disabled
574
+ // def because IE8 and below will drop it ;_;
575
+ cursor: default;
576
+ background-image: none;
577
+ @include reset-filter();
578
+ @include opacity(65);
579
+ @include box-shadow(none);
580
+ }
581
+
582
+ // Button Sizes
583
+ &.large {
584
+ font-size: $basefont + 2px;
585
+ line-height: normal;
586
+ padding: 9px 14px 9px;
587
+ @include border-radius(6px);
588
+ }
589
+ &.small {
590
+ padding: 7px 9px 7px;
591
+ font-size: $basefont - 2px;
592
+ }
593
+ }
594
+ // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
595
+ :root .alert-message,
596
+ :root .btn {
597
+ border-radius: 0 \0;
598
+ }
599
+
600
+ // Help Firefox not be a jerk about adding extra padding to buttons
601
+ button.btn,
602
+ input[type=submit].btn {
603
+ &::-moz-focus-inner {
604
+ padding: 0;
605
+ border: 0;
606
+ }
607
+ }
608
+
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
+
628
+ // ERROR STYLES
629
+ // ------------
630
+
631
+ // Base alert styles
632
+ .alert-message {
633
+ position: relative;
634
+ padding: 7px 15px;
635
+ margin-bottom: $baseline;
636
+ color: $grayDark;
637
+ @include gradientBar(#fceec1, #eedc94); // warning by default
638
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
639
+ border-width: 1px;
640
+ border-style: solid;
641
+ @include border-radius(4px);
642
+ @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
643
+
644
+ // Adjust close icon
645
+ .close {
646
+ *margin-top: 3px; /* IE7 spacing */
647
+ }
648
+
649
+ // Remove extra margin from content
650
+ h5 {
651
+ line-height: $baseline;
652
+ }
653
+ p {
654
+ margin-bottom: 0;
655
+ }
656
+ div {
657
+ margin-top: 5px;
658
+ margin-bottom: 2px;
659
+ line-height: 28px;
660
+ }
661
+ .btn {
662
+ // Provide actions with buttons
663
+ @include box-shadow(0 1px 0 rgba(255,255,255,.25));
664
+ }
665
+
666
+ &.block-message {
667
+ background-image: none;
668
+ background-color: lighten(#fceec1, 5%);
669
+ @include reset-filter();
670
+ padding: 14px;
671
+ border-color: #fceec1;
672
+ @include box-shadow(none);
673
+ ul, p {
674
+ margin-right: 30px;
675
+ }
676
+ ul {
677
+ margin-bottom: 0;
678
+ }
679
+ li {
680
+ color: $grayDark;
681
+ }
682
+ .alert-actions {
683
+ margin-top: 5px;
684
+ }
685
+ &.error,
686
+ &.success,
687
+ &.info {
688
+ color: $grayDark;
689
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
690
+ }
691
+ &.error {
692
+ background-color: lighten(#f56a66, 25%);
693
+ border-color: lighten(#f56a66, 20%);
694
+ }
695
+ &.success {
696
+ background-color: lighten(#62c462, 30%);
697
+ border-color: lighten(#62c462, 25%);
698
+ }
699
+ &.info {
700
+ background-color: lighten(#6bd0ee, 25%);
701
+ border-color: lighten(#6bd0ee, 20%);
702
+ }
703
+ }
704
+ }
705
+
706
+
707
+ // PAGINATION
708
+ // ----------
709
+
710
+ .pagination {
711
+ height: $baseline * 2;
712
+ margin: $baseline 0;
713
+ ul {
714
+ float: left;
715
+ margin: 0;
716
+ border: 1px solid #ddd;
717
+ border: 1px solid rgba(0,0,0,.15);
718
+ @include border-radius(3px);
719
+ @include box-shadow(0 1px 2px rgba(0,0,0,.05));
720
+ }
721
+ li {
722
+ display: inline;
723
+ }
724
+ a {
725
+ float: left;
726
+ padding: 0 14px;
727
+ line-height: ($baseline * 2) - 2;
728
+ border-right: 1px solid;
729
+ border-right-color: #ddd;
730
+ border-right-color: rgba(0,0,0,.15);
731
+ *border-right-color: #ddd; /* IE6-7 */
732
+ text-decoration: none;
733
+ }
734
+ a:hover,
735
+ .active a {
736
+ background-color: lighten($blue, 45%);
737
+ }
738
+ .disabled a,
739
+ .disabled a:hover {
740
+ background-color: transparent;
741
+ color: $grayLight;
742
+ }
743
+ .next a {
744
+ border: 0;
745
+ }
746
+ }
747
+
748
+
749
+ // WELLS
750
+ // -----
751
+
752
+ .well {
753
+ background-color: #f5f5f5;
754
+ margin-bottom: 20px;
755
+ padding: 19px;
756
+ min-height: 20px;
757
+ border: 1px solid #eee;
758
+ border: 1px solid rgba(0,0,0,.05);
759
+ @include border-radius(4px);
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
+ }
765
+ }
766
+
767
+
768
+ // MODALS
769
+ // ------
770
+
771
+ .modal-backdrop {
772
+ background-color: $black;
773
+ position: fixed;
774
+ top: 0;
775
+ left: 0;
776
+ right: 0;
777
+ bottom: 0;
778
+ z-index: 10000;
779
+ // Fade for backdrop
780
+ &.fade { opacity: 0; }
781
+ }
782
+
783
+ .modal-backdrop, .modal-backdrop.fade.in {
784
+ @include opacity(80);
785
+ }
786
+
787
+ .modal {
788
+ position: fixed;
789
+ top: 50%;
790
+ left: 50%;
791
+ z-index: 11000;
792
+ width: 560px;
793
+ margin: -250px 0 0 -250px;
794
+ background-color: $white;
795
+ border: 1px solid #999;
796
+ border: 1px solid rgba(0,0,0,.3);
797
+ *border: 1px solid #999; /* IE6-7 */
798
+ @include border-radius(6px);
799
+ @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
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%; }
807
+ }
808
+ .modal-header {
809
+ border-bottom: 1px solid #eee;
810
+ padding: 5px 15px;
811
+ }
812
+ .modal-body {
813
+ padding: 15px;
814
+ }
815
+ .modal-footer {
816
+ background-color: #f5f5f5;
817
+ padding: 14px 15px 15px;
818
+ border-top: 1px solid #ddd;
819
+ @include border-radius(0 0 6px 6px);
820
+ @include box-shadow(inset 0 1px 0 $white);
821
+ @include clearfix();
822
+ margin-bottom: 0;
823
+ .btn {
824
+ float: right;
825
+ margin-left: 5px;
826
+ }
827
+ }
828
+
829
+
830
+ // POPOVER ARROWS
831
+ // --------------
832
+
833
+ @mixin popoverArrow-above($arrowWidth: 5px) {
834
+ bottom: 0;
835
+ left: 50%;
836
+ margin-left: -$arrowWidth;
837
+ border-left: $arrowWidth solid transparent;
838
+ border-right: $arrowWidth solid transparent;
839
+ border-top: $arrowWidth solid $black;
840
+ }
841
+ @mixin popoverArrow-left($arrowWidth: 5px) {
842
+ top: 50%;
843
+ right: 0;
844
+ margin-top: -$arrowWidth;
845
+ border-top: $arrowWidth solid transparent;
846
+ border-bottom: $arrowWidth solid transparent;
847
+ border-left: $arrowWidth solid $black;
848
+ }
849
+ @mixin popoverArrow-below($arrowWidth: 5px) {
850
+ top: 0;
851
+ left: 50%;
852
+ margin-left: -$arrowWidth;
853
+ border-left: $arrowWidth solid transparent;
854
+ border-right: $arrowWidth solid transparent;
855
+ border-bottom: $arrowWidth solid $black;
856
+ }
857
+ @mixin popoverArrow-right($arrowWidth: 5px) {
858
+ top: 50%;
859
+ left: 0;
860
+ margin-top: -$arrowWidth;
861
+ border-top: $arrowWidth solid transparent;
862
+ border-bottom: $arrowWidth solid transparent;
863
+ border-right: $arrowWidth solid $black;
864
+ }
865
+
866
+ // TWIPSY
867
+ // ------
868
+
869
+ .twipsy {
870
+ display: block;
871
+ position: absolute;
872
+ visibility: visible;
873
+ padding: 5px;
874
+ font-size: 11px;
875
+ z-index: 1000;
876
+ @include opacity(80);
877
+ &.fade.in {
878
+ @include opacity(80);
879
+ }
880
+ &.above .twipsy-arrow { @include popoverArrow-above(); }
881
+ &.left .twipsy-arrow { @include popoverArrow-left(); }
882
+ &.below .twipsy-arrow { @include popoverArrow-below(); }
883
+ &.right .twipsy-arrow { @include popoverArrow-right(); }
884
+ }
885
+ .twipsy-inner {
886
+ padding: 3px 8px;
887
+ background-color: $black;
888
+ color: white;
889
+ text-align: center;
890
+ max-width: 200px;
891
+ text-decoration: none;
892
+ @include border-radius(4px);
893
+ }
894
+ .twipsy-arrow {
895
+ position: absolute;
896
+ width: 0;
897
+ height: 0;
898
+ }
899
+
900
+
901
+ // POPOVERS
902
+ // --------
903
+
904
+ .popover {
905
+ position: absolute;
906
+ top: 0;
907
+ left: 0;
908
+ z-index: 1000;
909
+ padding: 5px;
910
+ display: none;
911
+ &.above .arrow { @include popoverArrow-above(); }
912
+ &.right .arrow { @include popoverArrow-right(); }
913
+ &.below .arrow { @include popoverArrow-below(); }
914
+ &.left .arrow { @include popoverArrow-left(); }
915
+ .arrow {
916
+ position: absolute;
917
+ width: 0;
918
+ height: 0;
919
+ }
920
+ .inner {
921
+ background-color: $black;
922
+ background-color: rgba(0,0,0,.8);
923
+ padding: 3px;
924
+ overflow: hidden;
925
+ width: 280px;
926
+ @include border-radius(6px);
927
+ @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
928
+ }
929
+ .title {
930
+ background-color: #f5f5f5;
931
+ padding: 9px 15px;
932
+ line-height: 1;
933
+ @include border-radius(3px 3px 0 0);
934
+ border-bottom:1px solid #eee;
935
+ }
936
+ .content {
937
+ background-color: $white;
938
+ padding: 14px;
939
+ @include border-radius(0 0 3px 3px);
940
+ @include background-clip(padding-box);
941
+ p, ul, ol {
942
+ margin-bottom: 0;
943
+ }
944
+ }
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
+ }