1/* Add additional stylesheets below 2-------------------------------------------------- */ 3/* 4 Bootstrap's documentation styles 5 Special styles for presenting Bootstrap's documentation and examples 6*/ 7 8 9/* Body and structure 10-------------------------------------------------- */ 11body { 12 position: relative; 13 padding-top: 90px; 14 background-color: #fff; 15 background-image: url(../img/grid-18px-masked.png); 16 background-repeat: repeat-x; 17 background-position: 0 40px; 18} 19 20 21/* Tweak navbar brand link to be super sleek 22-------------------------------------------------- */ 23.navbar-fixed-top .brand { 24 padding-right: 0; 25 padding-left: 0; 26 margin-left: 20px; 27 float: right; 28 font-weight: bold; 29 color: #000; 30 text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); 31 -webkit-transition: all .2s linear; 32 -moz-transition: all .2s linear; 33 transition: all .2s linear; 34} 35.navbar-fixed-top .brand:hover { 36 text-decoration: none; 37} 38 39 40/* Space out sub-sections more 41-------------------------------------------------- */ 42section { 43 padding-top: 60px; 44} 45 46/* Faded out hr */ 47hr.soften { 48 height: 1px; 49 margin: 54px 0; 50 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 51 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 52 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 53 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 54 border: 0; 55} 56 57 58/* Jumbotrons 59-------------------------------------------------- */ 60.jumbotron { 61 position: relative; 62} 63.jumbotron h1 { 64 margin-bottom: 9px; 65 font-size: 81px; 66 font-weight: bold; 67 letter-spacing: -1px; 68 line-height: 1; 69} 70.jumbotron p { 71 margin-bottom: 18px; 72 font-weight: 300; 73} 74.jumbotron .btn-large { 75 font-size: 20px; 76 font-weight: normal; 77 padding: 14px 24px; 78 margin-right: 10px; 79 -webkit-border-radius: 6px; 80 -moz-border-radius: 6px; 81 border-radius: 6px; 82} 83.jumbotron .btn-large small { 84 font-size: 14px; 85} 86 87/* Masthead (docs home) */ 88.masthead { 89 padding-top: 36px; 90 margin-bottom: 72px; 91} 92.masthead h1, 93.masthead p { 94 text-align: center; 95} 96.masthead h1 { 97 margin-bottom: 18px; 98} 99.masthead p { 100 margin-left: 5%; 101 margin-right: 5%; 102 font-size: 30px; 103 line-height: 36px; 104} 105 106 107/* Specific jumbotrons 108------------------------- */ 109/* supporting docs pages */ 110.subhead { 111 padding-bottom: 0; 112 margin-bottom: 9px; 113} 114.subhead h1 { 115 font-size: 54px; 116} 117 118/* Subnav */ 119.subnav { 120 width: 100%; 121 height: 36px; 122 background-color: #eeeeee; /* Old browsers */ 123 background-repeat: repeat-x; /* Repeat the gradient */ 124 background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ 125 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ 126 background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */ 127 background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */ 128 background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */ 129 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ 130 background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */ 131 border: 1px solid #e5e5e5; 132 -webkit-border-radius: 4px; 133 -moz-border-radius: 4px; 134 border-radius: 4px; 135} 136.subnav .nav { 137 margin-bottom: 0; 138} 139.subnav .nav > li > a { 140 margin: 0; 141 padding-top: 11px; 142 padding-bottom: 11px; 143 border-left: 1px solid #f5f5f5; 144 border-right: 1px solid #e5e5e5; 145 -webkit-border-radius: 0; 146 -moz-border-radius: 0; 147 border-radius: 0; 148} 149.subnav .nav > .active > a, 150.subnav .nav > .active > a:hover { 151 padding-left: 13px; 152 color: #777; 153 background-color: #e9e9e9; 154 border-right-color: #ddd; 155 border-left: 0; 156 -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); 157 -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); 158 box-shadow: inset 0 3px 5px rgba(0,0,0,.05); 159} 160.subnav .nav > .active > a .caret, 161.subnav .nav > .active > a:hover .caret { 162 border-top-color: #777; 163} 164.subnav .nav > li:first-child > a, 165.subnav .nav > li:first-child > a:hover { 166 border-left: 0; 167 padding-left: 12px; 168 -webkit-border-radius: 4px 0 0 4px; 169 -moz-border-radius: 4px 0 0 4px; 170 border-radius: 4px 0 0 4px; 171} 172.subnav .nav > li:last-child > a { 173 border-right: 0; 174} 175.subnav .dropdown-menu { 176 -webkit-border-radius: 0 0 4px 4px; 177 -moz-border-radius: 0 0 4px 4px; 178 border-radius: 0 0 4px 4px; 179} 180 181/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ 182@media (min-width: 980px) { 183 .subnav-fixed { 184 position: fixed; 185 top: 40px; 186 left: 0; 187 right: 0; 188 z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ 189 border-color: #d5d5d5; 190 border-width: 0 0 1px; /* drop the border on the fixed edges */ 191 -webkit-border-radius: 0; 192 -moz-border-radius: 0; 193 border-radius: 0; 194 -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 195 -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 196 box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 197 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ 198 } 199 .subnav-fixed .nav { 200 width: 938px; 201 margin: 0 auto; 202 padding: 0 1px; 203 } 204 .subnav .nav > li:first-child > a, 205 .subnav .nav > li:first-child > a:hover { 206 -webkit-border-radius: 0; 207 -moz-border-radius: 0; 208 border-radius: 0; 209 } 210} 211 212 213/* Quick links 214-------------------------------------------------- */ 215.bs-links { 216 margin: 36px 0; 217} 218.quick-links { 219 min-height: 30px; 220 margin: 0; 221 padding: 5px 20px; 222 list-style: none; 223 text-align: center; 224 overflow: hidden; 225} 226.quick-links:first-child { 227 min-height: 0; 228} 229.quick-links li { 230 display: inline; 231 margin: 0 8px; 232 color: #999; 233} 234.quick-links .github-btn, 235.quick-links .tweet-btn, 236.quick-links .follow-btn { 237 position: relative; 238 top: 5px; 239} 240 241 242/* Marketing section of Overview 243-------------------------------------------------- */ 244.marketing .row { 245 margin-bottom: 9px; 246} 247.marketing h1 { 248 margin: 36px 0 27px; 249 font-size: 40px; 250 font-weight: 300; 251 text-align: center; 252} 253.marketing h2, 254.marketing h3 { 255 font-weight: 300; 256} 257.marketing h2 { 258 font-size: 22px; 259} 260.marketing p { 261 margin-right: 10px; 262} 263.marketing .bs-icon { 264 float: left; 265 margin: 7px 10px 0 0; 266 opacity: .8; 267} 268.marketing .small-bs-icon { 269 float: left; 270 margin: 4px 5px 0 0; 271} 272 273 274 275/* Footer 276-------------------------------------------------- */ 277.footer { 278 margin-top: 45px; 279 padding: 35px 0 36px; 280 border-top: 1px solid #e5e5e5; 281} 282.footer p { 283 margin-bottom: 0; 284 color: #555; 285} 286 287 288 289/* Special grid styles 290-------------------------------------------------- */ 291.show-grid { 292 margin-top: 10px; 293 margin-bottom: 20px; 294} 295.show-grid [class*="span"] { 296 background-color: #eee; 297 text-align: center; 298 -webkit-border-radius: 3px; 299 -moz-border-radius: 3px; 300 border-radius: 3px; 301 min-height: 30px; 302 line-height: 30px; 303} 304.show-grid:hover [class*="span"] { 305 background: #ddd; 306} 307.show-grid .show-grid { 308 margin-top: 0; 309 margin-bottom: 0; 310} 311.show-grid .show-grid [class*="span"] { 312 background-color: #ccc; 313} 314 315 316/* Render mini layout previews 317-------------------------------------------------- */ 318.mini-layout { 319 border: 1px solid #ddd; 320 -webkit-border-radius: 6px; 321 -moz-border-radius: 6px; 322 border-radius: 6px; 323 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075); 324 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); 325 box-shadow: 0 1px 2px rgba(0,0,0,.075); 326} 327.mini-layout { 328 height: 240px; 329 margin-bottom: 20px; 330 padding: 9px; 331} 332.mini-layout div { 333 -webkit-border-radius: 3px; 334 -moz-border-radius: 3px; 335 border-radius: 3px; 336} 337.mini-layout .mini-layout-body { 338 background-color: #dceaf4; 339 margin: 0 auto; 340 width: 70%; 341 height: 240px; 342} 343.mini-layout.fluid .mini-layout-sidebar, 344.mini-layout.fluid .mini-layout-header, 345.mini-layout.fluid .mini-layout-body { 346 float: left; 347} 348.mini-layout.fluid .mini-layout-sidebar { 349 background-color: #bbd8e9; 350 width: 20%; 351 height: 240px; 352} 353.mini-layout.fluid .mini-layout-body { 354 width: 77.5%; 355 margin-left: 2.5%; 356} 357 358 359/* Popover docs 360-------------------------------------------------- */ 361.popover-well { 362 min-height: 160px; 363} 364.popover-well .popover { 365 display: block; 366} 367.popover-well .popover-wrapper { 368 width: 50%; 369 height: 160px; 370 float: left; 371 margin-left: 55px; 372 position: relative; 373} 374.popover-well .popover-menu-wrapper { 375 height: 80px; 376} 377.large-bird { 378 margin: 5px 0 0 310px; 379 opacity: .1; 380} 381 382 383/* Download page 384-------------------------------------------------- */ 385.download .page-header { 386 margin-top: 36px; 387} 388.page-header .toggle-all { 389 margin-top: 5px; 390} 391 392/* Space out h3s when following a section */ 393.download h3 { 394 margin-bottom: 5px; 395} 396.download-builder input + h3, 397.download-builder .checkbox + h3 { 398 margin-top: 9px; 399} 400 401/* Fields for variables */ 402.download-builder input[type=text] { 403 margin-bottom: 9px; 404 font-family: Menlo, Monaco, "Courier New", monospace; 405 font-size: 12px; 406 color: #d14; 407} 408.download-builder input[type=text]:focus { 409 background-color: #fff; 410} 411 412/* Custom, larger checkbox labels */ 413.download .checkbox { 414 padding: 6px 10px 6px 25px; 415 color: #555; 416 background-color: #f9f9f9; 417 -webkit-border-radius: 3px; 418 -moz-border-radius: 3px; 419 border-radius: 3px; 420 cursor: pointer; 421} 422.download .checkbox:hover { 423 color: #333; 424 background-color: #f5f5f5; 425} 426.download .checkbox small { 427 font-size: 12px; 428 color: #777; 429} 430 431/* Variables section */ 432#variables label { 433 margin-bottom: 0; 434} 435 436/* Giant download button */ 437.download-btn { 438 margin: 36px 0 108px; 439} 440#download p, 441#download h4 { 442 max-width: 50%; 443 margin: 0 auto; 444 color: #999; 445 text-align: center; 446} 447#download h4 { 448 margin-bottom: 0; 449} 450#download p { 451 margin-bottom: 18px; 452} 453.download-btn .btn { 454 display: block; 455 width: auto; 456 padding: 19px 24px; 457 margin-bottom: 27px; 458 font-size: 30px; 459 line-height: 1; 460 text-align: center; 461 -webkit-border-radius: 6px; 462 -moz-border-radius: 6px; 463 border-radius: 6px; 464} 465 466 467 468/* Color swatches on LESS docs page 469-------------------------------------------------- */ 470/* Sets the width of the td */ 471.swatch-col { 472 width: 30px; 473} 474/* Le swatch */ 475.swatch { 476 display: inline-block; 477 width: 30px; 478 height: 20px; 479 margin: -6px 0; 480 -webkit-border-radius: 3px; 481 -moz-border-radius: 3px; 482 border-radius: 3px; 483} 484/* For white swatches, give a border */ 485.swatch-bordered { 486 width: 28px; 487 height: 18px; 488 border: 1px solid #eee; 489} 490 491 492/* Misc 493-------------------------------------------------- */ 494 495/* Make tables spaced out a bit more */ 496h2 + table, 497h3 + table, 498h4 + table, 499h2 + .row { 500 margin-top: 5px; 501} 502 503/* Example sites showcase */ 504.example-sites img { 505 max-width: 100%; 506 margin: 0 auto; 507} 508.marketing-byline { 509 margin: -18px 0 27px; 510 font-size: 18px; 511 font-weight: 300; 512 line-height: 24px; 513 color: #999; 514 text-align: center; 515} 516 517.scrollspy-example { 518 height: 200px; 519 overflow: auto; 520 position: relative; 521} 522 523/* Remove bottom margin on example forms in wells */ 524form.well { 525 padding: 14px; 526} 527 528/* Tighten up spacing */ 529.well hr { 530 margin: 18px 0; 531} 532 533/* Fake the :focus state to demo it */ 534.focused { 535 border-color: rgba(82,168,236,.8); 536 -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); 537 -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); 538 box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); 539 outline: 0; 540} 541 542/* For input sizes, make them display block */ 543.docs-input-sizes select, 544.docs-input-sizes input[type=text] { 545 display: block; 546 margin-bottom: 9px; 547} 548 549/* Icons 550------------------------- */ 551.the-icons { 552 margin-left: 0; 553 list-style: none; 554} 555.the-icons i:hover { 556 background-color: rgba(255,0,0,.25); 557} 558 559/* Eaxmples page 560------------------------- */ 561.bootstrap-examples .thumbnail { 562 margin-bottom: 9px; 563 background-color: #fff; 564} 565 566/* Responsive table 567------------------------- */ 568.responsive-utilities th small { 569 display: block; 570 font-weight: normal; 571 color: #999; 572} 573.responsive-utilities tbody th { 574 font-weight: normal; 575} 576.responsive-utilities td { 577 text-align: center; 578} 579.responsive-utilities td.is-visible { 580 color: #468847; 581 background-color: #dff0d8 !important; 582} 583.responsive-utilities td.is-hidden { 584 color: #ccc; 585 background-color: #f9f9f9 !important; 586} 587 588/* Responsive tests 589------------------------- */ 590.responsive-utilities-test { 591 margin-top: 5px; 592 margin-left: 0; 593 list-style: none; 594 overflow: hidden; /* clear floats */ 595} 596.responsive-utilities-test li { 597 position: relative; 598 float: left; 599 width: 25%; 600 height: 43px; 601 font-size: 14px; 602 font-weight: bold; 603 line-height: 43px; 604 color: #999; 605 text-align: center; 606 border: 1px solid #ddd; 607 -webkit-border-radius: 4px; 608 -moz-border-radius: 4px; 609 border-radius: 4px; 610} 611.responsive-utilities-test li + li { 612 margin-left: 10px; 613} 614.responsive-utilities-test span { 615 position: absolute; 616 top: -1px; 617 left: -1px; 618 right: -1px; 619 bottom: -1px; 620 -webkit-border-radius: 4px; 621 -moz-border-radius: 4px; 622 border-radius: 4px; 623} 624.responsive-utilities-test span { 625 color: #468847; 626 background-color: #dff0d8; 627 border: 1px solid #d6e9c6; 628} 629 630 631/* Responsive Docs 632-------------------------------------------------- */ 633@media (max-width: 480px) { 634 635 /* Reduce padding above jumbotron */ 636 body { 637 padding-top: 70px; 638 } 639 640 /* Change up some type stuff */ 641 h2 { 642 margin-top: 27px; 643 } 644 h2 small { 645 display: block; 646 line-height: 18px; 647 } 648 h3 { 649 margin-top: 18px; 650 } 651 652 /* icons */ 653 .marketing .bs-icon { 654 margin: 0; 655 } 656 657 /* Adjust the jumbotron */ 658 .jumbotron h1, 659 .jumbotron p { 660 text-align: center; 661 margin-right: 0; 662 } 663 .jumbotron h1 { 664 font-size: 45px; 665 margin-right: 0; 666 } 667 .jumbotron p { 668 margin-right: 0; 669 margin-left: 0; 670 font-size: 18px; 671 line-height: 24px; 672 } 673 .jumbotron .btn { 674 display: block; 675 font-size: 18px; 676 padding: 10px 14px; 677 margin: 0 auto 10px; 678 } 679 /* Masthead (home page jumbotron) */ 680 .masthead { 681 padding-top: 0; 682 } 683 684 /* Don't space out quick links so much */ 685 .quick-links { 686 margin: 40px 0 0; 687 } 688 /* hide the bullets on mobile since our horizontal space is limited */ 689 .quick-links .divider { 690 display: none; 691 } 692 693 /* center example sites */ 694 .example-sites { 695 margin-left: 0; 696 } 697 .example-sites > li { 698 float: none; 699 display: block; 700 max-width: 280px; 701 margin: 0 auto 18px; 702 text-align: center; 703 } 704 .example-sites .thumbnail > img { 705 max-width: 270px; 706 } 707 708 table code { 709 white-space: normal; 710 word-wrap: break-word; 711 word-break: break-all; 712 } 713 714 /* Modal example */ 715 .modal-example .modal { 716 position: relative; 717 top: auto; 718 right: auto; 719 bottom: auto; 720 left: auto; 721 } 722 723} 724 725 726@media (max-width: 768px) { 727 728 /* Remove any padding from the body */ 729 body { 730 padding-top: 0; 731 } 732 733 /* Jumbotron buttons */ 734 .jumbotron .btn { 735 margin-bottom: 10px; 736 } 737 738 /* Subnav */ 739 .subnav { 740 position: static; 741 top: auto; 742 z-index: auto; 743 width: auto; 744 height: auto; 745 background: #fff; /* whole background property since we use a background-image for gradient */ 746 -webkit-box-shadow: none; 747 -moz-box-shadow: none; 748 box-shadow: none; 749 } 750 .subnav .nav > li { 751 float: none; 752 } 753 .subnav .nav > li > a { 754 border: 0; 755 } 756 .subnav .nav > li + li > a { 757 border-top: 1px solid #e5e5e5; 758 } 759 .subnav .nav > li:first-child > a, 760 .subnav .nav > li:first-child > a:hover { 761 -webkit-border-radius: 4px 4px 0 0; 762 -moz-border-radius: 4px 4px 0 0; 763 border-radius: 4px 4px 0 0; 764 } 765 766 /* Popovers */ 767 .large-bird { 768 display: none; 769 } 770 .popover-well .popover-wrapper { 771 margin-left: 0; 772 } 773 774 /* Space out the show-grid examples */ 775 .show-grid [class*="span"] { 776 margin-bottom: 5px; 777 } 778 779 /* Unfloat the back to top link in footer */ 780 .footer .pull-right { 781 float: none; 782 } 783 .footer p { 784 margin-bottom: 9px; 785 } 786 787} 788 789 790@media (min-width: 480px) and (max-width: 768px) { 791 792 /* Scale down the jumbotron content */ 793 .jumbotron h1 { 794 font-size: 54px; 795 } 796 .jumbotron p { 797 margin-right: 0; 798 margin-left: 0; 799 } 800 801} 802 803 804@media (min-width: 768px) and (max-width: 980px) { 805 806 /* Remove any padding from the body */ 807 body { 808 padding-top: 0; 809 } 810 811 /* Scale down the jumbotron content */ 812 .jumbotron h1 { 813 font-size: 72px; 814 } 815 816} 817 818 819@media (max-width: 980px) { 820 821 /* Unfloat brand */ 822 .navbar-fixed-top .brand { 823 float: left; 824 margin-left: 0; 825 padding-left: 10px; 826 padding-right: 10px; 827 } 828 829 /* Inline-block quick links for more spacing */ 830 .quick-links li { 831 display: inline-block; 832 margin: 5px; 833 } 834 835} 836 837 838/* LARGE DESKTOP SCREENS */ 839@media (min-width: 1210px) { 840 841 /* Update subnav container */ 842 .subnav-fixed .nav { 843 width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ 844 } 845 846} 847
