anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1

Sign up to get free protection for your applications and to get access to all the features.
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
- }