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 -------------------------------------------------- */ 11 body { 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 -------------------------------------------------- */ 42 section { 43 padding-top: 60px; 44 } 45 46 /* Faded out hr */ 47 hr.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 */ 496 h2 + table, 497 h3 + table, 498 h4 + table, 499 h2 + .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 */ 524 form.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
