/static/css/docs.css
CSS | 1064 lines | 845 code | 109 blank | 110 comment | 0 complexity | e2cae95009522783f7ac072a5203abab MD5 | raw file
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 10/* Body and structure 11-------------------------------------------------- */ 12 13body { 14 position: relative; 15 padding-top: 40px; 16} 17 18/* Code in headings */ 19h3 code { 20 font-size: 14px; 21 font-weight: normal; 22} 23 24 25 26/* Tweak navbar brand link to be super sleek 27-------------------------------------------------- */ 28 29body > .navbar { 30 font-size: 13px; 31} 32 33/* Change the docs' brand */ 34body > .navbar .brand { 35 padding-right: 0; 36 padding-left: 0; 37 margin-left: 20px; 38 float: right; 39 font-weight: bold; 40 color: #000; 41 text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); 42 -webkit-transition: all .2s linear; 43 -moz-transition: all .2s linear; 44 transition: all .2s linear; 45} 46body > .navbar .brand:hover { 47 text-decoration: none; 48 text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4); 49} 50 51 52/* Sections 53-------------------------------------------------- */ 54 55/* padding for in-page bookmarks and fixed navbar */ 56section { 57 padding-top: 30px; 58} 59section > .page-header, 60section > .lead { 61 color: #5a5a5a; 62} 63section > ul li { 64 margin-bottom: 5px; 65} 66 67/* Separators (hr) */ 68.bs-docs-separator { 69 margin: 40px 0 39px; 70} 71 72/* Faded out hr */ 73hr.soften { 74 height: 1px; 75 margin: 70px 0; 76 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 77 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 78 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 79 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); 80 border: 0; 81} 82 83 84 85/* Jumbotrons 86-------------------------------------------------- */ 87 88/* Base class 89------------------------- */ 90.jumbotron { 91 position: relative; 92 padding: 40px 0; 93 color: #fff; 94 text-align: center; 95 text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); 96 background: #020031; /* Old browsers */ 97 background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ 98 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ 99 background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */ 100 background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */ 101 background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */ 102 background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */ 103 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 104 -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); 105 -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); 106 box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); 107} 108.jumbotron h1 { 109 font-size: 80px; 110 font-weight: bold; 111 letter-spacing: -1px; 112 line-height: 1; 113} 114.jumbotron p { 115 font-size: 24px; 116 font-weight: 300; 117 line-height: 1.25; 118 margin-bottom: 30px; 119} 120 121/* Link styles (used on .masthead-links as well) */ 122.jumbotron a { 123 color: #fff; 124 color: rgba(255,255,255,.5); 125 -webkit-transition: all .2s ease-in-out; 126 -moz-transition: all .2s ease-in-out; 127 transition: all .2s ease-in-out; 128} 129.jumbotron a:hover { 130 color: #fff; 131 text-shadow: 0 0 10px rgba(255,255,255,.25); 132} 133 134/* Download button */ 135.masthead .btn { 136 padding: 19px 24px; 137 font-size: 24px; 138 font-weight: 200; 139 color: #fff; /* redeclare to override the `.jumbotron a` */ 140 border: 0; 141 -webkit-border-radius: 6px; 142 -moz-border-radius: 6px; 143 border-radius: 6px; 144 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); 145 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); 146 box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); 147 -webkit-transition: none; 148 -moz-transition: none; 149 transition: none; 150} 151.masthead .btn:hover { 152 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); 153 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); 154 box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); 155} 156.masthead .btn:active { 157 -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); 158 -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); 159 box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); 160} 161 162 163/* Pattern overlay 164------------------------- */ 165.jumbotron .container { 166 position: relative; 167 z-index: 2; 168} 169.jumbotron:after { 170 content: ''; 171 display: block; 172 position: absolute; 173 top: 0; 174 right: 0; 175 bottom: 0; 176 left: 0; 177 background: url(../img/bs-docs-masthead-pattern.png) repeat center center; 178 opacity: .4; 179} 180@media 181only screen and (-webkit-min-device-pixel-ratio: 2), 182only screen and ( min--moz-device-pixel-ratio: 2), 183only screen and ( -o-min-device-pixel-ratio: 2/1) { 184 185 .jumbotron:after { 186 background-size: 150px 150px; 187 } 188 189} 190 191/* Masthead (docs home) 192------------------------- */ 193.masthead { 194 padding: 70px 0 80px; 195 margin-bottom: 0; 196 color: #fff; 197} 198.masthead h1 { 199 font-size: 120px; 200 line-height: 1; 201 letter-spacing: -2px; 202} 203.masthead p { 204 font-size: 40px; 205 font-weight: 200; 206 line-height: 1.25; 207} 208 209/* Textual links in masthead */ 210.masthead-links { 211 margin: 0; 212 list-style: none; 213} 214.masthead-links li { 215 display: inline; 216 padding: 0 10px; 217 color: rgba(255,255,255,.25); 218} 219 220/* Social proof buttons from GitHub & Twitter */ 221.bs-docs-social { 222 padding: 15px 0; 223 text-align: center; 224 background-color: #f5f5f5; 225 border-top: 1px solid #fff; 226 border-bottom: 1px solid #ddd; 227} 228 229/* Quick links on Home */ 230.bs-docs-social-buttons { 231 margin-left: 0; 232 margin-bottom: 0; 233 padding-left: 0; 234 list-style: none; 235} 236.bs-docs-social-buttons li { 237 display: inline-block; 238 padding: 5px 8px; 239 line-height: 1; 240 *display: inline; 241 *zoom: 1; 242} 243 244/* Subhead (other pages) 245------------------------- */ 246.subhead { 247 text-align: left; 248 border-bottom: 1px solid #ddd; 249} 250.subhead h1 { 251 font-size: 60px; 252} 253.subhead p { 254 margin-bottom: 20px; 255} 256.subhead .navbar { 257 display: none; 258} 259 260 261 262/* Marketing section of Overview 263-------------------------------------------------- */ 264 265.marketing { 266 text-align: center; 267 color: #5a5a5a; 268} 269.marketing h1 { 270 margin: 60px 0 10px; 271 font-size: 60px; 272 font-weight: 200; 273 line-height: 1; 274 letter-spacing: -1px; 275} 276.marketing h2 { 277 font-weight: 200; 278 margin-bottom: 5px; 279} 280.marketing p { 281 font-size: 16px; 282 line-height: 1.5; 283} 284.marketing .marketing-byline { 285 margin-bottom: 40px; 286 font-size: 20px; 287 font-weight: 300; 288 line-height: 1.25; 289 color: #999; 290} 291.marketing-img { 292 display: block; 293 margin: 0 auto 30px; 294 max-height: 145px; 295} 296 297 298 299/* Footer 300-------------------------------------------------- */ 301 302.footer { 303 text-align: center; 304 padding: 30px 0; 305 margin-top: 70px; 306 border-top: 1px solid #e5e5e5; 307 background-color: #f5f5f5; 308} 309.footer p { 310 margin-bottom: 0; 311 color: #777; 312} 313.footer-links { 314 margin: 10px 0; 315} 316.footer-links li { 317 display: inline; 318 padding: 0 2px; 319} 320.footer-links li:first-child { 321 padding-left: 0; 322} 323 324 325 326/* Special grid styles 327-------------------------------------------------- */ 328 329.show-grid { 330 margin-top: 10px; 331 margin-bottom: 20px; 332} 333.show-grid [class*="span"] { 334 background-color: #eee; 335 text-align: center; 336 -webkit-border-radius: 3px; 337 -moz-border-radius: 3px; 338 border-radius: 3px; 339 min-height: 40px; 340 line-height: 40px; 341} 342.show-grid:hover [class*="span"] { 343 background: #ddd; 344} 345.show-grid .show-grid { 346 margin-top: 0; 347 margin-bottom: 0; 348} 349.show-grid .show-grid [class*="span"] { 350 margin-top: 5px; 351} 352.show-grid [class*="span"] [class*="span"] { 353 background-color: #ccc; 354} 355.show-grid [class*="span"] [class*="span"] [class*="span"] { 356 background-color: #999; 357} 358 359 360 361/* Mini layout previews 362-------------------------------------------------- */ 363.mini-layout { 364 border: 1px solid #ddd; 365 -webkit-border-radius: 6px; 366 -moz-border-radius: 6px; 367 border-radius: 6px; 368 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075); 369 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); 370 box-shadow: 0 1px 2px rgba(0,0,0,.075); 371} 372.mini-layout, 373.mini-layout .mini-layout-body, 374.mini-layout.fluid .mini-layout-sidebar { 375 height: 300px; 376} 377.mini-layout { 378 margin-bottom: 20px; 379 padding: 9px; 380} 381.mini-layout div { 382 -webkit-border-radius: 3px; 383 -moz-border-radius: 3px; 384 border-radius: 3px; 385} 386.mini-layout .mini-layout-body { 387 background-color: #dceaf4; 388 margin: 0 auto; 389 width: 70%; 390} 391.mini-layout.fluid .mini-layout-sidebar, 392.mini-layout.fluid .mini-layout-header, 393.mini-layout.fluid .mini-layout-body { 394 float: left; 395} 396.mini-layout.fluid .mini-layout-sidebar { 397 background-color: #bbd8e9; 398 width: 20%; 399} 400.mini-layout.fluid .mini-layout-body { 401 width: 77.5%; 402 margin-left: 2.5%; 403} 404 405 406 407/* Download page 408-------------------------------------------------- */ 409 410.download .page-header { 411 margin-top: 36px; 412} 413.page-header .toggle-all { 414 margin-top: 5px; 415} 416 417/* Space out h3s when following a section */ 418.download h3 { 419 margin-bottom: 5px; 420} 421.download-builder input + h3, 422.download-builder .checkbox + h3 { 423 margin-top: 9px; 424} 425 426/* Fields for variables */ 427.download-builder input[type=text] { 428 margin-bottom: 9px; 429 font-family: Menlo, Monaco, "Courier New", monospace; 430 font-size: 12px; 431 color: #d14; 432} 433.download-builder input[type=text]:focus { 434 background-color: #fff; 435} 436 437/* Custom, larger checkbox labels */ 438.download .checkbox { 439 padding: 6px 10px 6px 25px; 440 font-size: 13px; 441 line-height: 18px; 442 color: #555; 443 background-color: #f9f9f9; 444 -webkit-border-radius: 3px; 445 -moz-border-radius: 3px; 446 border-radius: 3px; 447 cursor: pointer; 448} 449.download .checkbox:hover { 450 color: #333; 451 background-color: #f5f5f5; 452} 453.download .checkbox small { 454 font-size: 12px; 455 color: #777; 456} 457 458/* Variables section */ 459#variables label { 460 margin-bottom: 0; 461} 462 463/* Giant download button */ 464.download-btn { 465 margin: 36px 0 108px; 466} 467#download p, 468#download h4 { 469 max-width: 50%; 470 margin: 0 auto; 471 color: #999; 472 text-align: center; 473} 474#download h4 { 475 margin-bottom: 0; 476} 477#download p { 478 margin-bottom: 18px; 479} 480.download-btn .btn { 481 display: block; 482 width: auto; 483 padding: 19px 24px; 484 margin-bottom: 27px; 485 font-size: 30px; 486 line-height: 1; 487 text-align: center; 488 -webkit-border-radius: 6px; 489 -moz-border-radius: 6px; 490 border-radius: 6px; 491} 492 493 494 495/* Misc 496-------------------------------------------------- */ 497 498/* Make tables spaced out a bit more */ 499h2 + table, 500h3 + table, 501h4 + table, 502h2 + .row { 503 margin-top: 5px; 504} 505 506/* Example sites showcase */ 507.example-sites { 508 xmargin-left: 20px; 509} 510.example-sites img { 511 max-width: 100%; 512 margin: 0 auto; 513} 514 515.scrollspy-example { 516 height: 200px; 517 overflow: auto; 518 position: relative; 519} 520 521 522/* Fake the :focus state to demo it */ 523.focused { 524 border-color: rgba(82,168,236,.8); 525 -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); 526 -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); 527 box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); 528 outline: 0; 529} 530 531/* For input sizes, make them display block */ 532.docs-input-sizes select, 533.docs-input-sizes input[type=text] { 534 display: block; 535 margin-bottom: 9px; 536} 537 538/* Icons 539------------------------- */ 540.the-icons { 541 margin-left: 0; 542 list-style: none; 543} 544.the-icons li { 545 float: left; 546 width: 25%; 547 line-height: 25px; 548} 549.the-icons i:hover { 550 background-color: rgba(255,0,0,.25); 551} 552 553/* Example page 554------------------------- */ 555.bootstrap-examples p { 556 font-size: 13px; 557 line-height: 18px; 558} 559.bootstrap-examples .thumbnail { 560 margin-bottom: 9px; 561 background-color: #fff; 562} 563 564 565 566/* Bootstrap code examples 567-------------------------------------------------- */ 568 569/* Base class */ 570.bs-docs-example { 571 position: relative; 572 margin: 15px 0; 573 padding: 39px 19px 14px; 574 *padding-top: 19px; 575 background-color: #fff; 576 border: 1px solid #ddd; 577 -webkit-border-radius: 4px; 578 -moz-border-radius: 4px; 579 border-radius: 4px; 580} 581 582/* Echo out a label for the example */ 583.bs-docs-example:after { 584 content: "Example"; 585 position: absolute; 586 top: -1px; 587 left: -1px; 588 padding: 3px 7px; 589 font-size: 12px; 590 font-weight: bold; 591 background-color: #f5f5f5; 592 border: 1px solid #ddd; 593 color: #9da0a4; 594 -webkit-border-radius: 4px 0 4px 0; 595 -moz-border-radius: 4px 0 4px 0; 596 border-radius: 4px 0 4px 0; 597} 598 599/* Remove spacing between an example and it's code */ 600.bs-docs-example + .prettyprint { 601 margin-top: -20px; 602 padding-top: 15px; 603} 604 605/* Tweak examples 606------------------------- */ 607.bs-docs-example > p:last-child { 608 margin-bottom: 0; 609} 610.bs-docs-example .table, 611.bs-docs-example .progress, 612.bs-docs-example .well, 613.bs-docs-example .alert, 614.bs-docs-example .hero-unit, 615.bs-docs-example .pagination, 616.bs-docs-example .navbar, 617.bs-docs-example > .nav, 618.bs-docs-example blockquote { 619 margin-bottom: 5px; 620} 621.bs-docs-example .pagination { 622 margin-top: 0; 623} 624.bs-navbar-top-example, 625.bs-navbar-bottom-example { 626 z-index: 1; 627 padding: 0; 628 height: 90px; 629 overflow: hidden; /* cut the drop shadows off */ 630} 631.bs-navbar-top-example .navbar-fixed-top, 632.bs-navbar-bottom-example .navbar-fixed-bottom { 633 margin-left: 0; 634 margin-right: 0; 635} 636.bs-navbar-top-example { 637 -webkit-border-radius: 0 0 4px 4px; 638 -moz-border-radius: 0 0 4px 4px; 639 border-radius: 0 0 4px 4px; 640} 641.bs-navbar-top-example:after { 642 top: auto; 643 bottom: -1px; 644 -webkit-border-radius: 0 4px 0 4px; 645 -moz-border-radius: 0 4px 0 4px; 646 border-radius: 0 4px 0 4px; 647} 648.bs-navbar-bottom-example { 649 -webkit-border-radius: 4px 4px 0 0; 650 -moz-border-radius: 4px 4px 0 0; 651 border-radius: 4px 4px 0 0; 652} 653.bs-navbar-bottom-example .navbar { 654 margin-bottom: 0; 655} 656form.bs-docs-example { 657 padding-bottom: 19px; 658} 659 660/* Images */ 661.bs-docs-example-images img { 662 margin: 10px; 663 display: inline-block; 664} 665 666/* Tooltips */ 667.bs-docs-tooltip-examples { 668 text-align: center; 669 margin: 0 0 10px; 670 list-style: none; 671} 672.bs-docs-tooltip-examples li { 673 display: inline; 674 padding: 0 10px; 675} 676 677/* Popovers */ 678.bs-docs-example-popover { 679 padding-bottom: 24px; 680 background-color: #f9f9f9; 681} 682.bs-docs-example-popover .popover { 683 position: relative; 684 display: block; 685 float: left; 686 width: 260px; 687 margin: 20px; 688} 689 690/* Dropdowns */ 691.bs-docs-example-submenus { 692 min-height: 180px; 693} 694.bs-docs-example-submenus > .pull-left + .pull-left { 695 margin-left: 20px; 696} 697.bs-docs-example-submenus .dropup > .dropdown-menu, 698.bs-docs-example-submenus .dropdown > .dropdown-menu { 699 display: block; 700 position: static; 701 margin-bottom: 5px; 702 *width: 180px; 703} 704 705 706 707/* Responsive docs 708-------------------------------------------------- */ 709 710/* Utility classes table 711------------------------- */ 712.responsive-utilities th small { 713 display: block; 714 font-weight: normal; 715 color: #999; 716} 717.responsive-utilities tbody th { 718 font-weight: normal; 719} 720.responsive-utilities td { 721 text-align: center; 722} 723.responsive-utilities td.is-visible { 724 color: #468847; 725 background-color: #dff0d8 !important; 726} 727.responsive-utilities td.is-hidden { 728 color: #ccc; 729 background-color: #f9f9f9 !important; 730} 731 732/* Responsive tests 733------------------------- */ 734.responsive-utilities-test { 735 margin-top: 5px; 736 margin-left: 0; 737 list-style: none; 738 overflow: hidden; /* clear floats */ 739} 740.responsive-utilities-test li { 741 position: relative; 742 float: left; 743 width: 25%; 744 height: 43px; 745 font-size: 14px; 746 font-weight: bold; 747 line-height: 43px; 748 color: #999; 749 text-align: center; 750 border: 1px solid #ddd; 751 -webkit-border-radius: 4px; 752 -moz-border-radius: 4px; 753 border-radius: 4px; 754} 755.responsive-utilities-test li + li { 756 margin-left: 10px; 757} 758.responsive-utilities-test span { 759 position: absolute; 760 top: -1px; 761 left: -1px; 762 right: -1px; 763 bottom: -1px; 764 -webkit-border-radius: 4px; 765 -moz-border-radius: 4px; 766 border-radius: 4px; 767} 768.responsive-utilities-test span { 769 color: #468847; 770 background-color: #dff0d8; 771 border: 1px solid #d6e9c6; 772} 773 774 775 776/* Sidenav for Docs 777-------------------------------------------------- */ 778 779.bs-docs-sidenav { 780 width: 228px; 781 margin: 30px 0 0; 782 padding: 0; 783 background-color: #fff; 784 -webkit-border-radius: 6px; 785 -moz-border-radius: 6px; 786 border-radius: 6px; 787 -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); 788 -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); 789 box-shadow: 0 1px 4px rgba(0,0,0,.065); 790} 791.bs-docs-sidenav > li > a { 792 display: block; 793 width: 190px \9; 794 margin: 0 0 -1px; 795 padding: 8px 14px; 796 border: 1px solid #e5e5e5; 797} 798.bs-docs-sidenav > li:first-child > a { 799 -webkit-border-radius: 6px 6px 0 0; 800 -moz-border-radius: 6px 6px 0 0; 801 border-radius: 6px 6px 0 0; 802} 803.bs-docs-sidenav > li:last-child > a { 804 -webkit-border-radius: 0 0 6px 6px; 805 -moz-border-radius: 0 0 6px 6px; 806 border-radius: 0 0 6px 6px; 807} 808.bs-docs-sidenav > .active > a { 809 position: relative; 810 z-index: 2; 811 padding: 9px 15px; 812 border: 0; 813 text-shadow: 0 1px 0 rgba(0,0,0,.15); 814 -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 815 -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 816 box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 817} 818/* Chevrons */ 819.bs-docs-sidenav .icon-chevron-right { 820 float: right; 821 margin-top: 2px; 822 margin-right: -6px; 823 opacity: .25; 824} 825.bs-docs-sidenav > li > a:hover { 826 background-color: #f5f5f5; 827} 828.bs-docs-sidenav a:hover .icon-chevron-right { 829 opacity: .5; 830} 831.bs-docs-sidenav .active .icon-chevron-right, 832.bs-docs-sidenav .active a:hover .icon-chevron-right { 833 background-image: url(../img/glyphicons-halflings-white.png); 834 opacity: 1; 835} 836.bs-docs-sidenav.affix { 837 top: 40px; 838} 839.bs-docs-sidenav.affix-bottom { 840 position: absolute; 841 top: auto; 842 bottom: 270px; 843} 844 845 846 847 848/* Responsive 849-------------------------------------------------- */ 850 851/* Desktop large 852------------------------- */ 853@media (min-width: 1200px) { 854 .bs-docs-container { 855 max-width: 970px; 856 } 857 .bs-docs-sidenav { 858 width: 258px; 859 } 860 .bs-docs-sidenav > li > a { 861 width: 230px \9; /* Override the previous IE8-9 hack */ 862 } 863} 864 865/* Desktop 866------------------------- */ 867@media (max-width: 980px) { 868 /* Unfloat brand */ 869 body > .navbar-fixed-top .brand { 870 float: left; 871 margin-left: 0; 872 padding-left: 10px; 873 padding-right: 10px; 874 } 875 876 /* Inline-block quick links for more spacing */ 877 .quick-links li { 878 display: inline-block; 879 margin: 5px; 880 } 881 882 /* When affixed, space properly */ 883 .bs-docs-sidenav { 884 top: 0; 885 width: 218px; 886 margin-top: 30px; 887 margin-right: 0; 888 } 889} 890 891/* Tablet to desktop 892------------------------- */ 893@media (min-width: 768px) and (max-width: 979px) { 894 /* Remove any padding from the body */ 895 body { 896 padding-top: 0; 897 } 898 /* Widen masthead and social buttons to fill body padding */ 899 .jumbotron { 900 margin-top: -20px; /* Offset bottom margin on .navbar */ 901 } 902 /* Adjust sidenav width */ 903 .bs-docs-sidenav { 904 width: 166px; 905 margin-top: 20px; 906 } 907 .bs-docs-sidenav.affix { 908 top: 0; 909 } 910} 911 912/* Tablet 913------------------------- */ 914@media (max-width: 767px) { 915 /* Remove any padding from the body */ 916 body { 917 padding-top: 0; 918 } 919 920 /* Widen masthead and social buttons to fill body padding */ 921 .jumbotron { 922 padding: 40px 20px; 923 margin-top: -20px; /* Offset bottom margin on .navbar */ 924 margin-right: -20px; 925 margin-left: -20px; 926 } 927 .masthead h1 { 928 font-size: 90px; 929 } 930 .masthead p, 931 .masthead .btn { 932 font-size: 24px; 933 } 934 .marketing .span4 { 935 margin-bottom: 40px; 936 } 937 .bs-docs-social { 938 margin: 0 -20px; 939 } 940 941 /* Space out the show-grid examples */ 942 .show-grid [class*="span"] { 943 margin-bottom: 5px; 944 } 945 946 /* Sidenav */ 947 .bs-docs-sidenav { 948 width: auto; 949 margin-bottom: 20px; 950 } 951 .bs-docs-sidenav.affix { 952 position: static; 953 width: auto; 954 top: 0; 955 } 956 957 /* Unfloat the back to top link in footer */ 958 .footer { 959 margin-left: -20px; 960 margin-right: -20px; 961 padding-left: 20px; 962 padding-right: 20px; 963 } 964 .footer p { 965 margin-bottom: 9px; 966 } 967} 968 969/* Landscape phones 970------------------------- */ 971@media (max-width: 480px) { 972 /* Remove padding above jumbotron */ 973 body { 974 padding-top: 0; 975 } 976 977 /* Change up some type stuff */ 978 h2 small { 979 display: block; 980 } 981 982 /* Downsize the jumbotrons */ 983 .jumbotron h1 { 984 font-size: 45px; 985 } 986 .jumbotron p, 987 .jumbotron .btn { 988 font-size: 18px; 989 } 990 .jumbotron .btn { 991 display: block; 992 margin: 0 auto; 993 } 994 995 /* center align subhead text like the masthead */ 996 .subhead h1, 997 .subhead p { 998 text-align: center; 999 } 1000 1001 /* Marketing on home */ 1002 .marketing h1 { 1003 font-size: 30px; 1004 } 1005 .marketing-byline { 1006 font-size: 18px; 1007 } 1008 1009 /* center example sites */ 1010 .example-sites { 1011 margin-left: 0; 1012 } 1013 .example-sites > li { 1014 float: none; 1015 display: block; 1016 max-width: 280px; 1017 margin: 0 auto 18px; 1018 text-align: center; 1019 } 1020 .example-sites .thumbnail > img { 1021 max-width: 270px; 1022 } 1023 1024 /* Do our best to make tables work in narrow viewports */ 1025 table code { 1026 white-space: normal; 1027 word-wrap: break-word; 1028 word-break: break-all; 1029 } 1030 1031 /* Examples: dropdowns */ 1032 .bs-docs-example-submenus > .pull-left { 1033 float: none; 1034 clear: both; 1035 } 1036 .bs-docs-example-submenus > .pull-left, 1037 .bs-docs-example-submenus > .pull-left + .pull-left { 1038 margin-left: 0; 1039 } 1040 .bs-docs-example-submenus p { 1041 margin-bottom: 0; 1042 } 1043 .bs-docs-example-submenus .dropup > .dropdown-menu, 1044 .bs-docs-example-submenus .dropdown > .dropdown-menu { 1045 margin-bottom: 10px; 1046 float: none; 1047 max-width: 180px; 1048 } 1049 1050 /* Examples: modal */ 1051 .modal-example .modal { 1052 position: relative; 1053 top: auto; 1054 right: auto; 1055 bottom: auto; 1056 left: auto; 1057 } 1058 1059 /* Tighten up footer */ 1060 .footer { 1061 padding-top: 20px; 1062 padding-bottom: 20px; 1063 } 1064}