anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. data/Rakefile +11 -15
  2. data/bootstrap-rails.gemspec +4 -4
  3. data/lib/bootstrap-rails/version.rb +1 -1
  4. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  5. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  6. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  7. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  8. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  9. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  10. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  11. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  12. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  13. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  14. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  15. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  16. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  17. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  18. data/vendor/assets/javascripts/bootstrap.js +8 -5
  19. data/vendor/assets/stylesheets/accordion.scss +28 -0
  20. data/vendor/assets/stylesheets/alerts.scss +70 -0
  21. data/vendor/assets/stylesheets/bootstrap.scss +44 -8
  22. data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
  23. data/vendor/assets/stylesheets/button-groups.scss +147 -0
  24. data/vendor/assets/stylesheets/buttons.scss +165 -0
  25. data/vendor/assets/stylesheets/carousel.scss +121 -0
  26. data/vendor/assets/stylesheets/close.scss +18 -0
  27. data/vendor/assets/stylesheets/code.scss +44 -0
  28. data/vendor/assets/stylesheets/component-animations.scss +18 -0
  29. data/vendor/assets/stylesheets/dropdowns.scss +131 -0
  30. data/vendor/assets/stylesheets/forms.scss +337 -287
  31. data/vendor/assets/stylesheets/grid.scss +8 -0
  32. data/vendor/assets/stylesheets/hero-unit.scss +20 -0
  33. data/vendor/assets/stylesheets/labels.scss +16 -0
  34. data/vendor/assets/stylesheets/layouts.scss +17 -0
  35. data/vendor/assets/stylesheets/mixins.scss +375 -111
  36. data/vendor/assets/stylesheets/modals.scss +72 -0
  37. data/vendor/assets/stylesheets/navbar.scss +292 -0
  38. data/vendor/assets/stylesheets/navs.scss +344 -0
  39. data/vendor/assets/stylesheets/pager.scss +30 -0
  40. data/vendor/assets/stylesheets/pagination.scss +55 -0
  41. data/vendor/assets/stylesheets/popovers.scss +49 -0
  42. data/vendor/assets/stylesheets/progress-bars.scss +95 -0
  43. data/vendor/assets/stylesheets/reset.scss +37 -52
  44. data/vendor/assets/stylesheets/responsive.scss +323 -0
  45. data/vendor/assets/stylesheets/scaffolding.scss +13 -96
  46. data/vendor/assets/stylesheets/sprites.scss +158 -0
  47. data/vendor/assets/stylesheets/tables.scss +68 -149
  48. data/vendor/assets/stylesheets/thumbnails.scss +35 -0
  49. data/vendor/assets/stylesheets/tooltip.scss +35 -0
  50. data/vendor/assets/stylesheets/type.scss +100 -70
  51. data/vendor/assets/stylesheets/utilities.scss +23 -0
  52. data/vendor/assets/stylesheets/variables.scss +94 -55
  53. data/vendor/assets/stylesheets/wells.scss +17 -0
  54. metadata +51 -30
  55. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  56. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  57. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  58. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
  59. data/vendor/assets/stylesheets/patterns.scss +0 -1060
@@ -1,1060 +0,0 @@
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: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 #fff;
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
- // NAVIGATION
125
- // ----------
126
-
127
- // Topbar Nav
128
- // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
129
- // For backwards compatibility, leave in .topbar div > ul
130
- .topbar div > ul,
131
- .nav {
132
- display: block;
133
- float: left;
134
- margin: 0 10px 0 0;
135
- position: relative;
136
- left: 0;
137
- > li {
138
- display: block;
139
- float: left;
140
- }
141
- a {
142
- display: block;
143
- float: none;
144
- padding: 10px 10px 11px;
145
- line-height: 19px;
146
- text-decoration: none;
147
- &:hover {
148
- color: $white;
149
- text-decoration: none;
150
- }
151
- }
152
- .active > a {
153
- background-color: #222;
154
- background-color: rgba(0,0,0,.5);
155
- }
156
-
157
- // Secondary (floated right) nav in topbar
158
- &.secondary-nav {
159
- float: right;
160
- margin-left: 10px;
161
- margin-right: 0;
162
- // backwards compatibility
163
- .menu-dropdown,
164
- .dropdown-menu {
165
- right: 0;
166
- border: 0;
167
- }
168
- }
169
- // Dropdowns within the .nav
170
- // a.menu:hover and li.open .menu for backwards compatibility
171
- a.menu:hover,
172
- li.open .menu,
173
- .dropdown-toggle:hover,
174
- .dropdown.open .dropdown-toggle {
175
- background: #444;
176
- background: rgba(255,255,255,.05);
177
- }
178
- // .menu-dropdown for backwards compatibility
179
- .menu-dropdown,
180
- .dropdown-menu {
181
- background-color: #333;
182
- // a.menu for backwards compatibility
183
- a.menu,
184
- .dropdown-toggle {
185
- color: $white;
186
- &.open {
187
- background: #444;
188
- background: rgba(255,255,255,.05);
189
- }
190
- }
191
- li a {
192
- color: #999;
193
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
194
- &:hover {
195
- @include gradient-vertical(#292929,#191919);
196
- color: $white;
197
- }
198
- }
199
- .active a {
200
- color: $white;
201
- }
202
- .divider {
203
- background-color: #222;
204
- border-color: #444;
205
- }
206
- }
207
- }
208
-
209
- // For backwards compatibility with new dropdowns, redeclare dropdown link padding
210
- .topbar ul .menu-dropdown li a,
211
- .topbar ul .dropdown-menu li a {
212
- padding: 4px 15px;
213
- }
214
-
215
- // Dropdown Menus
216
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
217
- // li.menu for backwards compatibility
218
- li.menu,
219
- .dropdown {
220
- position: relative;
221
- }
222
- // The link that is clicked to toggle the dropdown
223
- // a.menu for backwards compatibility
224
- a.menu:after,
225
- .dropdown-toggle:after {
226
- width: 0;
227
- height: 0;
228
- display: inline-block;
229
- content: "&darr;";
230
- text-indent: -99999px;
231
- vertical-align: top;
232
- margin-top: 8px;
233
- margin-left: 4px;
234
- border-left: 4px solid transparent;
235
- border-right: 4px solid transparent;
236
- border-top: 4px solid $white;
237
- @include opacity(50);
238
- }
239
- // The dropdown menu (ul)
240
- // .menu-dropdown for backwards compatibility
241
- .menu-dropdown,
242
- .dropdown-menu {
243
- background-color: $white;
244
- float: left;
245
- display: none; // None by default, but block on "open" of the menu
246
- position: absolute;
247
- top: 40px;
248
- z-index: 900;
249
- min-width: 160px;
250
- max-width: 220px;
251
- _width: 160px;
252
- margin-left: 0; // override default ul styles
253
- margin-right: 0;
254
- padding: 6px 0;
255
- zoom: 1; // do we need this?
256
- border-color: #999;
257
- border-color: rgba(0,0,0,.2);
258
- border-style: solid;
259
- border-width: 0 1px 1px;
260
- @include border-radius(0 0 6px 6px);
261
- @include box-shadow(0 2px 4px rgba(0,0,0,.2));
262
- @include background-clip(padding-box);
263
-
264
- // Unfloat any li's to make them stack
265
- li {
266
- float: none;
267
- display: block;
268
- background-color: none;
269
- }
270
- // Dividers (basically an hr) within the dropdown
271
- .divider {
272
- height: 1px;
273
- margin: 5px 0;
274
- overflow: hidden;
275
- background-color: #eee;
276
- border-bottom: 1px solid $white;
277
- }
278
- }
279
-
280
- .topbar .dropdown-menu,
281
- .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
- &.hover {
294
- @include gradient-vertical(#eeeeee, #dddddd);
295
- color: $grayDark;
296
- text-decoration: none;
297
- $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
298
- @include box-shadow($shadow);
299
- }
300
- }
301
- }
302
-
303
- // Open state for the dropdown
304
- // .open for backwards compatibility
305
- .open,
306
- .dropdown.open {
307
- // .menu for backwards compatibility
308
- .menu,
309
- .dropdown-toggle {
310
- color: $white;
311
- background: #ccc;
312
- background: rgba(0,0,0,.3);
313
- }
314
- // .menu-dropdown for backwards compatibility
315
- .menu-dropdown,
316
- .dropdown-menu {
317
- display: block;
318
- }
319
- }
320
-
321
-
322
- // TABS AND PILLS
323
- // --------------
324
-
325
- // Common styles
326
- .tabs,
327
- .pills {
328
- margin: 0 0 $baseline;
329
- padding: 0;
330
- list-style: none;
331
- @include clearfix;
332
- > li {
333
- float: left;
334
- > a {
335
- display: block;
336
- }
337
- }
338
- }
339
-
340
- // Tabs
341
- .tabs {
342
- border-color: #ddd;
343
- border-style: solid;
344
- border-width: 0 0 1px;
345
- > li {
346
- position: relative; // For the dropdowns mostly
347
- margin-bottom: -1px;
348
- > a {
349
- padding: 0 15px;
350
- margin-right: 2px;
351
- line-height: ($baseline * 2) - 2;
352
- border: 1px solid transparent;
353
- @include border-radius(4px 4px 0 0);
354
- &:hover {
355
- text-decoration: none;
356
- background-color: #eee;
357
- border-color: #eee #eee #ddd;
358
- }
359
- }
360
- }
361
- // Active state, and it's :hover to override normal :hover
362
- .active > a,
363
- .active > a:hover {
364
- color: $gray;
365
- background-color: $white;
366
- border: 1px solid #ddd;
367
- border-bottom-color: transparent;
368
- cursor: default;
369
- }
370
- }
371
-
372
- // Dropdowns in tabs
373
- .tabs {
374
- // first one for backwards compatibility
375
- .menu-dropdown,
376
- .dropdown-menu {
377
- top: 35px;
378
- border-width: 1px;
379
- @include border-radius(0 6px 6px 6px);
380
- }
381
- // first one for backwards compatibility
382
- a.menu:after,
383
- .dropdown-toggle:after {
384
- border-top-color: #999;
385
- margin-top: 15px;
386
- margin-left: 5px;
387
- }
388
- // first one for backwards compatibility
389
- li.open.menu .menu,
390
- .open.dropdown .dropdown-toggle {
391
- border-color: #999;
392
- }
393
- // first one for backwards compatibility
394
- li.open a.menu:after,
395
- .dropdown.open .dropdown-toggle:after {
396
- border-top-color: #555;
397
- }
398
- }
399
-
400
- // Pills
401
- .pills {
402
- a {
403
- margin: 5px 3px 5px 0;
404
- padding: 0 15px;
405
- line-height: 30px;
406
- text-shadow: 0 1px 1px $white;
407
- @include border-radius(15px);
408
- &:hover {
409
- color: $white;
410
- text-decoration: none;
411
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
412
- background-color: $linkColorHover;
413
- }
414
- }
415
- .active a {
416
- color: $white;
417
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
418
- background-color: $linkColor;
419
- }
420
- }
421
-
422
- // Stacked pills
423
- .pills-vertical > li {
424
- float: none;
425
- }
426
-
427
- // Tabbable areas
428
- .tab-content,
429
- .pill-content {
430
- }
431
- .tab-content > .tab-pane,
432
- .pill-content > .pill-pane,
433
- .tab-content > div,
434
- .pill-content > div {
435
- display: none;
436
- }
437
- .tab-content > .active,
438
- .pill-content > .active {
439
- display: block;
440
- }
441
-
442
-
443
- // BREADCRUMBS
444
- // -----------
445
-
446
- .breadcrumb {
447
- padding: 7px 14px;
448
- margin: 0 0 $baseline;
449
- @include gradient-vertical(#ffffff, #f5f5f5);
450
- border: 1px solid #ddd;
451
- @include border-radius(3px);
452
- @include box-shadow(inset 0 1px 0 $white);
453
- li {
454
- display: inline;
455
- text-shadow: 0 1px 0 $white;
456
- }
457
- .divider {
458
- padding: 0 5px;
459
- color: $grayLight;
460
- }
461
- .active a {
462
- color: $grayDark;
463
- }
464
- }
465
-
466
-
467
- // PAGE HEADERS
468
- // ------------
469
-
470
- .hero-unit {
471
- background-color: #f5f5f5;
472
- margin-bottom: 30px;
473
- padding: 60px;
474
- @include border-radius(6px);
475
- h1 {
476
- margin-bottom: 0;
477
- font-size: 60px;
478
- line-height: 1;
479
- letter-spacing: -1px;
480
- }
481
- p {
482
- font-size: 18px;
483
- font-weight: 200;
484
- line-height: $baseline * 1.5;
485
- }
486
- }
487
- footer {
488
- margin-top: $baseline - 1;
489
- padding-top: $baseline - 1;
490
- border-top: 1px solid #eee;
491
- }
492
-
493
-
494
- // PAGE HEADERS
495
- // ------------
496
-
497
- .page-header {
498
- margin-bottom: $baseline - 1;
499
- border-bottom: 1px solid #ddd;
500
- @include box-shadow(0 1px 0 rgba(255,255,255,.5));
501
- h1 {
502
- margin-bottom: ($baseline / 2) - 1px;
503
- }
504
- }
505
-
506
-
507
- // BUTTON STYLES
508
- // -------------
509
-
510
- // Shared colors for buttons and alerts
511
- .btn,
512
- .alert-message {
513
- // Set text color
514
- &.danger,
515
- &.danger:hover,
516
- &.error,
517
- &.error:hover,
518
- &.success,
519
- &.success:hover,
520
- &.info,
521
- &.info:hover {
522
- color: $white
523
- }
524
- // Sets the close button to the middle of message
525
- .close{
526
- font-family: Arial, sans-serif;
527
- line-height: 18px;
528
- }
529
- // Danger and error appear as red
530
- &.danger,
531
- &.error {
532
- @include gradient-bar(#ee5f5b, #c43c35);
533
- }
534
- // Success appears as green
535
- &.success {
536
- @include gradient-bar(#62c462, #57a957);
537
- }
538
- // Info appears as a neutral blue
539
- &.info {
540
- @include gradient-bar(#5bc0de, #339bb9);
541
- }
542
- }
543
-
544
- // Base .btn styles
545
- .btn {
546
- // Button Base
547
- cursor: pointer;
548
- display: inline-block;
549
- @include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
550
- padding: 5px 14px 6px;
551
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
552
- color: #333;
553
- font-size: $basefont;
554
- line-height: normal;
555
- border: 1px solid #ccc;
556
- border-bottom-color: #bbb;
557
- @include border-radius(4px);
558
- $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
559
- @include box-shadow($shadow);
560
-
561
- &:hover {
562
- background-position: 0 -15px;
563
- color: #333;
564
- text-decoration: none;
565
- }
566
-
567
- // Focus state for keyboard and accessibility
568
- &:focus {
569
- outline: 1px dotted #666;
570
- }
571
-
572
- // Primary Button Type
573
- &.primary {
574
- color:$white;
575
- @include gradient-bar($blue, $blueDark)
576
- }
577
-
578
- // Transitions
579
- @include transition(.1s linear all);
580
-
581
- // Active and Disabled states
582
- &.active,
583
- &:active {
584
- $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
585
- @include box-shadow($shadow);
586
- }
587
- &.disabled {
588
- cursor: default;
589
- background-image: none;
590
- @include reset-filter;
591
- @include opacity(65);
592
- @include box-shadow(none);
593
- }
594
- &[disabled] {
595
- // disabled pseudo can't be included with .disabled
596
- // def because IE8 and below will drop it ;_;
597
- cursor: default;
598
- background-image: none;
599
- @include reset-filter;
600
- @include opacity(65);
601
- @include box-shadow(none);
602
- }
603
-
604
- // Button Sizes
605
- &.large {
606
- font-size: $basefont + 2px;
607
- line-height: normal;
608
- padding: 9px 14px 9px;
609
- @include border-radius(6px);
610
- }
611
- &.small {
612
- padding: 7px 9px 7px;
613
- font-size: $basefont - 2px;
614
- }
615
- }
616
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
617
- :root .alert-message,
618
- :root .btn {
619
- border-radius: 0 \0;
620
- }
621
-
622
- // Help Firefox not be a jerk about adding extra padding to buttons
623
- button.btn,
624
- input[type=submit].btn {
625
- &::-moz-focus-inner {
626
- padding: 0;
627
- border: 0;
628
- }
629
- }
630
-
631
-
632
- // CLOSE ICONS
633
- // -----------
634
- .close {
635
- float: right;
636
- color: $black;
637
- font-size: 20px;
638
- font-weight: bold;
639
- line-height: $baseline * .75;
640
- text-shadow: 0 1px 0 rgba(255,255,255,1);
641
- @include opacity(25);
642
- &:hover {
643
- color: $black;
644
- text-decoration: none;
645
- @include opacity(40);
646
- }
647
- }
648
-
649
-
650
- // ERROR STYLES
651
- // ------------
652
-
653
- // Base alert styles
654
- .alert-message {
655
- position: relative;
656
- padding: 7px 15px;
657
- margin-bottom: $baseline;
658
- color: $grayDark;
659
- @include gradient-bar(#fceec1, #eedc94); // warning by default
660
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
661
- border-width: 1px;
662
- border-style: solid;
663
- @include border-radius(4px);
664
- @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
665
-
666
- // Adjust close icon
667
- .close {
668
- margin-top: 1px;
669
- *margin-top: 0; // For IE7
670
- }
671
-
672
- // Make links same color as text and stand out more
673
- a {
674
- font-weight: bold;
675
- color: $grayDark;
676
- }
677
- &.danger p a,
678
- &.error p a,
679
- &.success p a,
680
- &.info p a {
681
- color: $white;
682
- }
683
-
684
- // Remove extra margin from content
685
- h5 {
686
- line-height: $baseline;
687
- }
688
- p {
689
- margin-bottom: 0;
690
- }
691
- div {
692
- margin-top: 5px;
693
- margin-bottom: 2px;
694
- line-height: 28px;
695
- }
696
- .btn {
697
- // Provide actions with buttons
698
- @include box-shadow(0 1px 0 rgba(255,255,255,.25));
699
- }
700
-
701
- &.block-message {
702
- background-image: none;
703
- background-color: lighten(#fceec1, 5%);
704
- @include reset-filter;
705
- padding: 14px;
706
- border-color: #fceec1;
707
- @include box-shadow(none);
708
- ul, p {
709
- margin-right: 30px;
710
- }
711
- ul {
712
- margin-bottom: 0;
713
- }
714
- li {
715
- color: $grayDark;
716
- }
717
- .alert-actions {
718
- margin-top: 5px;
719
- }
720
- &.error,
721
- &.success,
722
- &.info {
723
- color: $grayDark;
724
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
725
- }
726
- &.error {
727
- background-color: lighten(#f56a66, 25%);
728
- border-color: lighten(#f56a66, 20%);
729
- }
730
- &.success {
731
- background-color: lighten(#62c462, 30%);
732
- border-color: lighten(#62c462, 25%);
733
- }
734
- &.info {
735
- background-color: lighten(#6bd0ee, 25%);
736
- border-color: lighten(#6bd0ee, 20%);
737
- }
738
- // Change link color back
739
- &.danger p a,
740
- &.error p a,
741
- &.success p a,
742
- &.info p a {
743
- color: $grayDark;
744
- }
745
-
746
- }
747
- }
748
-
749
-
750
- // PAGINATION
751
- // ----------
752
-
753
- .pagination {
754
- height: $baseline * 2;
755
- margin: $baseline 0;
756
- ul {
757
- float: left;
758
- margin: 0;
759
- border: 1px solid #ddd;
760
- border: 1px solid rgba(0,0,0,.15);
761
- @include border-radius(3px);
762
- @include box-shadow(0 1px 2px rgba(0,0,0,.05));
763
- }
764
- li {
765
- display: inline;
766
- }
767
- a {
768
- float: left;
769
- padding: 0 14px;
770
- line-height: ($baseline * 2) - 2;
771
- border-right: 1px solid;
772
- border-right-color: #ddd;
773
- border-right-color: rgba(0,0,0,.15);
774
- *border-right-color: #ddd; /* IE6-7 */
775
- text-decoration: none;
776
- }
777
- a:hover,
778
- .active a {
779
- background-color: lighten($blue, 45%);
780
- }
781
- .disabled a,
782
- .disabled a:hover {
783
- background-color: transparent;
784
- color: $grayLight;
785
- }
786
- .next a {
787
- border: 0;
788
- }
789
- }
790
-
791
-
792
- // WELLS
793
- // -----
794
-
795
- .well {
796
- background-color: #f5f5f5;
797
- margin-bottom: 20px;
798
- padding: 19px;
799
- min-height: 20px;
800
- border: 1px solid #eee;
801
- border: 1px solid rgba(0,0,0,.05);
802
- @include border-radius(4px);
803
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
804
- blockquote {
805
- border-color: #ddd;
806
- border-color: rgba(0,0,0,.15);
807
- }
808
- }
809
-
810
-
811
- // MODALS
812
- // ------
813
-
814
- .modal-backdrop {
815
- background-color: $black;
816
- position: fixed;
817
- top: 0;
818
- left: 0;
819
- right: 0;
820
- bottom: 0;
821
- z-index: 10000;
822
- // Fade for backdrop
823
- &.fade { opacity: 0; }
824
- }
825
-
826
- .modal-backdrop,
827
- .modal-backdrop.fade.in {
828
- @include opacity(80);
829
- }
830
-
831
- .modal {
832
- position: fixed;
833
- top: 50%;
834
- left: 50%;
835
- z-index: 11000;
836
- max-height: 500px;
837
- overflow: auto;
838
- width: 560px;
839
- margin: -250px 0 0 -280px;
840
- background-color: $white;
841
- border: 1px solid #999;
842
- border: 1px solid rgba(0,0,0,.3);
843
- *border: 1px solid #999; /* IE6-7 */
844
- @include border-radius(6px);
845
- @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
846
- @include background-clip(padding-box);
847
- .close { margin-top: 7px; }
848
- &.fade {
849
- @include transition((opacity .3s linear, top .3s ease-out));
850
- top: -25%;
851
- }
852
- &.fade.in { top: 50%; }
853
- }
854
- .modal-header {
855
- border-bottom: 1px solid #eee;
856
- padding: 5px 15px;
857
- }
858
- .modal-body {
859
- padding: 15px;
860
- }
861
- .modal-body form {
862
- margin-bottom: 0;
863
- }
864
- .modal-footer {
865
- background-color: #f5f5f5;
866
- padding: 14px 15px 15px;
867
- border-top: 1px solid #ddd;
868
- @include border-radius(0 0 6px 6px);
869
- @include box-shadow(inset 0 1px 0 $white);
870
- @include clearfix;
871
- margin-bottom: 0;
872
- .btn {
873
- float: right;
874
- margin-left: 5px;
875
- }
876
- }
877
-
878
- // Fix the stacking of these components when in modals
879
- .modal .popover,
880
- .modal .twipsy {
881
- z-index: 12000;
882
- }
883
-
884
-
885
- // POPOVER ARROWS
886
- // --------------
887
-
888
- @mixin popover-arrow-above($arrowWidth: 5px) {
889
- bottom: 0;
890
- left: 50%;
891
- margin-left: -$arrowWidth;
892
- border-left: $arrowWidth solid transparent;
893
- border-right: $arrowWidth solid transparent;
894
- border-top: $arrowWidth solid $black;
895
- }
896
- @mixin popover-arrow-left($arrowWidth: 5px) {
897
- top: 50%;
898
- right: 0;
899
- margin-top: -$arrowWidth;
900
- border-top: $arrowWidth solid transparent;
901
- border-bottom: $arrowWidth solid transparent;
902
- border-left: $arrowWidth solid $black;
903
- }
904
- @mixin popover-arrow-below($arrowWidth: 5px) {
905
- top: 0;
906
- left: 50%;
907
- margin-left: -$arrowWidth;
908
- border-left: $arrowWidth solid transparent;
909
- border-right: $arrowWidth solid transparent;
910
- border-bottom: $arrowWidth solid $black;
911
- }
912
- @mixin popover-arrow-right($arrowWidth: 5px) {
913
- top: 50%;
914
- left: 0;
915
- margin-top: -$arrowWidth;
916
- border-top: $arrowWidth solid transparent;
917
- border-bottom: $arrowWidth solid transparent;
918
- border-right: $arrowWidth solid $black;
919
- }
920
-
921
- // TWIPSY
922
- // ------
923
-
924
- .twipsy {
925
- display: block;
926
- position: absolute;
927
- visibility: visible;
928
- padding: 5px;
929
- font-size: 11px;
930
- z-index: 1000;
931
- @include opacity(80);
932
- &.fade.in {
933
- @include opacity(80);
934
- }
935
- &.above .twipsy-arrow { @include popover-arrow-above; }
936
- &.left .twipsy-arrow { @include popover-arrow-left; }
937
- &.below .twipsy-arrow { @include popover-arrow-below; }
938
- &.right .twipsy-arrow { @include popover-arrow-right; }
939
- }
940
- .twipsy-inner {
941
- padding: 3px 8px;
942
- background-color: $black;
943
- color: white;
944
- text-align: center;
945
- max-width: 200px;
946
- text-decoration: none;
947
- @include border-radius(4px);
948
- }
949
- .twipsy-arrow {
950
- position: absolute;
951
- width: 0;
952
- height: 0;
953
- }
954
-
955
-
956
- // POPOVERS
957
- // --------
958
-
959
- .popover {
960
- position: absolute;
961
- top: 0;
962
- left: 0;
963
- z-index: 1000;
964
- padding: 5px;
965
- display: none;
966
- &.above .arrow { @include popover-arrow-above; }
967
- &.right .arrow { @include popover-arrow-right; }
968
- &.below .arrow { @include popover-arrow-below; }
969
- &.left .arrow { @include popover-arrow-left; }
970
- .arrow {
971
- position: absolute;
972
- width: 0;
973
- height: 0;
974
- }
975
- .inner {
976
- background: $black;
977
- background: rgba(0,0,0,.8);
978
- padding: 3px;
979
- overflow: hidden;
980
- width: 280px;
981
- @include border-radius(6px);
982
- @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
983
- }
984
- .title {
985
- background-color: #f5f5f5;
986
- padding: 9px 15px;
987
- line-height: 1;
988
- @include border-radius(3px 3px 0 0);
989
- border-bottom:1px solid #eee;
990
- }
991
- .content {
992
- background-color: $white;
993
- padding: 14px;
994
- @include border-radius(0 0 3px 3px);
995
- @include background-clip(padding-box);
996
- p, ul, ol {
997
- margin-bottom: 0;
998
- }
999
- }
1000
- }
1001
-
1002
-
1003
- // PATTERN ANIMATIONS
1004
- // ------------------
1005
-
1006
- .fade {
1007
- @include transition(opacity .15s linear);
1008
- opacity: 0;
1009
- &.in {
1010
- opacity: 1;
1011
- }
1012
- }
1013
-
1014
-
1015
- // LABELS
1016
- // ------
1017
-
1018
- .label {
1019
- padding: 1px 3px 2px;
1020
- font-size: $basefont * .75;
1021
- font-weight: bold;
1022
- color: $white;
1023
- text-transform: uppercase;
1024
- white-space: nowrap;
1025
- background-color: $grayLight;
1026
- @include border-radius(3px);
1027
- text-shadow: none;
1028
- &.important { background-color: #c43c35; }
1029
- &.warning { background-color: $orange; }
1030
- &.success { background-color: $green; }
1031
- &.notice { background-color: lighten($blue, 25%); }
1032
- }
1033
-
1034
-
1035
- // MEDIA GRIDS
1036
- // -----------
1037
-
1038
- .media-grid {
1039
- margin-left: -$gridGutterWidth;
1040
- margin-bottom: 0;
1041
- @include clearfix;
1042
- li {
1043
- display: inline;
1044
- }
1045
- a {
1046
- float: left;
1047
- padding: 4px;
1048
- margin: 0 0 $baseline $gridGutterWidth;
1049
- border: 1px solid #ddd;
1050
- @include border-radius(4px);
1051
- @include box-shadow(0 1px 1px rgba(0,0,0,.075));
1052
- img {
1053
- display: block;
1054
- }
1055
- &:hover {
1056
- border-color: $linkColor;
1057
- @include box-shadow(0 1px 4px rgba(0,105,214,.25));
1058
- }
1059
- }
1060
- }