git.roojs.org Git - ratchet/blob - docs/css/docs.css

   1 /* Base styles
   2 -------------------------------------------------- */
   3
   4 body {
   5   position: static !important; /* Overrides the fixed positioning of body in Ratchet */
   6   font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
   7   font-size: 14px;
   8   line-height: 1.6;
   9   color: #333;
  10   background-color: #fff;
  11   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
  12   -webkit-text-size-adjust: 100%;
  13 }
  14
  15
  16 /* Typography
  17 -------------------------------------------------- */
  18
  19 hr {
  20   height: 0;
  21   margin: 10px 0 30px;
  22   border: solid #ddd;
  23   border-width: 1px 0 0;
  24   clear: both;
  25 }
  26
  27 h1,
  28 h2,
  29 h3,
  30 h4,
  31 h5,
  32 h6 {
  33   text-rendering: optimizeLegibility;
  34 }
  35
  36
  37 /* Docs structural styles
  38 -------------------------------------------------- */
  39
  40 .docs-outer-wrapper {
  41   position: relative;
  42 }
  43
  44 .docs-inner-wrapper {
  45   width: 1000px;
  46   margin: 0 auto;
  47 }
  48
  49 /* Masthead (navigation)
  50 -------------------------------------------------- */
  51
  52 .docs-masthead {
  53   position: fixed;
  54   top: 0;
  55   right: 0;
  56   left: 0;
  57   z-index: 100;
  58   padding: 10px 0;
  59   background-color: #fff;
  60   border-bottom: 1px solid #ddd;
  61   box-shadow: 0 0 5px rgba(0,0,0,.1);
  62 }
  63
  64 .docs-masthead .docs-inner-wrapper {
  65   line-height: 40px;
  66 }
  67
  68 .docs-masthead-title {
  69   font-weight: 700;
  70   font-size: 21px;
  71   text-transform: uppercase;
  72   letter-spacing: 5px;
  73 }
  74
  75 .docs-navigation {
  76   float: right;
  77   font-size: 15px;
  78 }
  79
  80 .nav-item {
  81   position: relative;
  82   float: left;
  83   margin-right: 30px;
  84   list-style: none;
  85 }
  86
  87 .nav-item:last-child {
  88   margin-right: 0;
  89 }
  90
  91 .nav-item a {
  92   position: relative;
  93   color: #777;
  94   text-decoration: none;
  95 }
  96
  97 .nav-item a:hover {
  98   color: #555;
  99 }
 100
 101 /* Give the components link a bit more room to fit the caret */
 102 .nav-item.nav-components {
 103   margin-right: 45px;
 104 }
 105
 106 /* Give the  components link a down caret */
 107 .nav-components-link:after {
 108   content: '';
 109   position: absolute;
 110   right: 0;
 111   width: 0;
 112   height: 0;
 113   top: 8px;
 114   right: -15px;
 115   margin-left: -4px;
 116   border-right: 4px solid transparent;
 117   border-top: 4px solid #777;
 118   border-left: 4px solid transparent;
 119 }
 120
 121 /* The components list dropdown */
 122 .components-list {
 123   position: absolute;
 124   display: none;
 125   top: 45px;
 126   left: -20px;
 127   z-index: -1;
 128   padding: 10px 0;
 129   line-height: 1.1;
 130   background-color: #fff;
 131   background-clip: padding-box;
 132   border: 1px solid rgba(0,0,0,.2);
 133   border-radius: 3px;
 134   box-shadow: 0 0 8px rgba(0,0,0,.05);
 135 }
 136
 137 .components-list.active {
 138   z-index: 100;
 139   display: block;
 140 }
 141
 142 .components-list:before,
 143 .components-list:after {
 144   content: '';
 145   position: absolute;
 146   left: 30px;
 147   width: 0;
 148   height: 0;
 149 }
 150
 151 .components-list:before {
 152   top: -11px;
 153   margin-left: -11px;
 154   border-right: 11px solid transparent;
 155   border-bottom: 11px solid rgba(0,0,0,.3);
 156   border-left: 11px solid transparent;
 157 }
 158
 159 .components-list:after {
 160   top: -10px;
 161   margin-left: -10px;
 162   border-right: 10px solid transparent;
 163   border-bottom: 10px solid #fff;
 164   border-left: 10px solid transparent;
 165 }
 166
 167 .components-list li {
 168   list-style: none;
 169 }
 170
 171 .components-list li:last-child {
 172   padding-bottom: 0;
 173 }
 174
 175 .components-list li a {
 176   display: block;
 177   width: 150px;
 178   padding: 10px 20px;
 179 }
 180
 181 .components-list li a:hover {
 182   color: #fff;
 183   background-color: #1eb0e9;
 184 }
 185
 186 /* Jumbo header
 187 -------------------------------------------------- */
 188
 189 .docs-header {
 190   height: 530px;
 191   margin-top: 60px;
 192   background-color: #02122b;
 193   background-image: url(../img/header-bg.jpg);
 194   background-size: cover;
 195   box-shadow: inset 0 0 10px rgba(0,0,0,.6);
 196 }
 197
 198 .docs-header-text {
 199   position: relative;
 200   z-index: 3;
 201   top: 140px;
 202   width: 800px;
 203   margin: 0 auto;
 204   color: #fff;
 205   text-align: center;
 206   text-shadow: 0 0 5px #000;
 207   -webkit-animation: fadeintext 2s;
 208      -moz-animation: fadeintext 2s;
 209 }
 210
 211 .docs-header-subtitle {
 212   margin-bottom: 35px;
 213   font-size: 45px;
 214   font-weight: 300;
 215   line-height: 55px;
 216 }
 217
 218 .docs-btn {
 219   display: inline-block;
 220   padding: 18px 40px;
 221   color: #fff;
 222   font-size: 24px;
 223   font-weight: 700;
 224   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
 225   text-decoration: none;
 226   line-height: 1;
 227   background-color: #f26629; /* Old browsers */
 228   background-image: -moz-linear-gradient(top,  #f95e0c 0%, #e53003 100%); /* FF3.6+ */
 229   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#e53003)); /* Chrome,Safari4+ */
 230   background-image: -webkit-linear-gradient(top,  #f95e0c 0%,#e53003 100%); /* Chrome10+,Safari5.1+ */
 231   background-image: -o-linear-gradient(top,  #f95e0c 0%,#e53003 100%); /* Opera 11.10+ */
 232   background-image: -ms-linear-gradient(top,  #f95e0c 0%,#e53003 100%); /* IE10+ */
 233   background-image: linear-gradient(to bottom,  #f95e0c 0%,#e53003 100%); /* W3C */
 234   border-radius: 3px;
 235   box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 5px rgba(0,0,0,.2);
 236 }
 237
 238 .docs-btn:hover {
 239   color: #fff;
 240   background-color: #ff7234; /* Old browsers */
 241   background-image: -moz-linear-gradient(top,  #f95e0c 0%, #cd2a02 100%); /* FF3.6+ */
 242   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#cd2a02)); /* Chrome,Safari4+ */
 243   background-image: -webkit-linear-gradient(top,  #f95e0c 0%,#cd2a02 100%); /* Chrome10+,Safari5.1+ */
 244   background-image: -o-linear-gradient(top,  #f95e0c 0%,#cd2a02 100%); /* Opera 11.10+ */
 245   background-image: -ms-linear-gradient(top,  #f95e0c 0%,#cd2a02 100%); /* IE10+ */
 246   background-image: linear-gradient(to bottom,  #f95e0c 0%,#cd2a02 100%); /* W3C */
 247 }
 248
 249 .docs-btn:active {
 250   padding: 19px 40px 17px;
 251   background-color: #cd2a02;
 252   background-image: none;
 253   box-shadow: inset 0 0 5px rgba(0,0,0,.4);
 254 }
 255
 256 /* Styles for the social media buttons */
 257 .social {
 258   position: absolute;
 259   bottom: 0;
 260   left: 0;
 261   right: 0;
 262   padding: 20px 0;
 263   background-color: rgba(0,0,0,.3);
 264   -webkit-animation: fadeinsocial 2.5s;
 265      -moz-animation: fadeinsocial 2.5s;
 266 }
 267
 268 .social ul {
 269   height: 20px;
 270   padding-left: 20px;
 271   list-style: none;
 272   text-align: center;
 273 }
 274
 275 .social li {
 276   display: inline-block;
 277   height: 20px;
 278   padding: 0;
 279   vertical-align: top;
 280 }
 281
 282 /* Overiding our framework button styles so our social buttons aren't messed up */
 283 .twitter-follow-button,
 284 .twitter-follow-button:hover,
 285 .twitter-follow-button:active,
 286 .twitter-share-button,
 287 .twitter-share-button:hover,
 288 .twitter-share-button:active {
 289   padding: 0;
 290   border: none;
 291   border-radius: 0;
 292   background: none;
 293   box-shadow: none;
 294 }
 295
 296
 297 /* iPhone previewer
 298 -------------------------------------------------- */
 299
 300 .iphone {
 301   position: relative;
 302   top: 50px;
 303   float: right;
 304   width: 375px;
 305   height: 806px;
 306   font-family: "Helvetica Neue", sans-serif;
 307   background-image: url("../img/iphone.png");
 308 }
 309
 310 .iphone-fixed,
 311 .iphone-bottom {
 312   left: 50%;
 313   margin-left: 125px;
 314 }
 315
 316 .iphone-fixed {
 317   position: fixed;
 318   top: 30px;
 319 }
 320
 321 .iphone-bottom {
 322   position: absolute;
 323   top: auto;
 324   bottom: 130px;
 325 }
 326
 327 .iphone .iphone-content {
 328   position: absolute;
 329   top: 147px;
 330   left: 27px;
 331   width: 320px;
 332   height: 548px;
 333   overflow: hidden;
 334   background-color: white;
 335 }
 336
 337 .iphone .content,
 338 .component-example .content {
 339   position: absolute;
 340   top: 0;
 341   left: 0;
 342   right: 0;
 343   bottom: 0;
 344 }
 345
 346 .component-example .content {
 347   position: relative;
 348 }
 349
 350 /* Mad override to avoid it being styled like the block level link */
 351 .component-example .list a[data-transition="slide-out"],
 352 .iphone .list a[data-transition="slide-out"] {
 353   padding: 0;
 354   display: inline;
 355   margin: 0;
 356   color: #0882f0;
 357 }
 358
 359 /* Content layout
 360 -------------------------------------------------- */
 361
 362 .content-section {
 363   position: relative;
 364   padding-top: 80px;
 365 }
 366
 367 /* Section header
 368 -------------------------------------------------- */
 369
 370 .section-header {
 371   padding-bottom: 30px;
 372   text-align: center;
 373   border-bottom: 1px solid #ddd;
 374 }
 375
 376 .section-title {
 377   font-size: 60px;
 378   font-weight: 700;
 379   line-height: 1;
 380   color: #333;
 381 }
 382
 383 .section-description {
 384   font-weight: 300;
 385   font-size: 24px;
 386   color: #777;
 387 }
 388
 389 .section-informational {
 390   border-top: 1px solid #ddd;
 391   border-bottom: 1px solid #ddd;
 392   background-color: #fafafa;
 393   padding-bottom: 70px;
 394 }
 395
 396 /* Getting started & page setup
 397 -------------------------------------------------- */
 398
 399 .steps {
 400   overflow: hidden;
 401   padding-top: 40px;
 402 }
 403
 404 .steps .step {
 405   float: left;
 406   width: 306px;
 407   margin-right: 40px;
 408   list-style: none;
 409 }
 410
 411 .step-title {
 412   font-size: 18px;
 413   font-weight: 700;
 414 }
 415
 416 .step-description {
 417   color: #777;
 418   margin-bottom: 10px;
 419 }
 420
 421 .steps .step:last-child {
 422   margin-right: 0;
 423 }
 424
 425 /* Components
 426 -------------------------------------------------- */
 427
 428 .section-components {
 429   padding-bottom: 350px;
 430   background-color: #fff;
 431 }
 432
 433 .component {
 434   position: relative;
 435   padding-top: 80px;
 436   width: 550px;
 437   margin-top: 1px;
 438   font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
 439   font-weight: 300;
 440   opacity: .3; /* Fade content back until the user scrolls to it. */
 441   -webkit-transition: opacity .2s ease-in-out;
 442 }
 443
 444 .component:last-child {
 445   margin-bottom: 320px;
 446 }
 447
 448 /* Active class applied when the specific component is in focus */
 449 .component.active {
 450   opacity: 1;
 451 }
 452
 453 .component-title {
 454   font-size: 28px;
 455   font-weight: 300;
 456   line-height: 35px;
 457 }
 458
 459 .component-description {
 460   margin-bottom: 13px;
 461   color: #777;
 462   font-size: 18px;
 463   line-height: 26px;
 464   font-weight: 300;
 465 }
 466
 467 .component-note {
 468   margin-top: 10px;
 469   color: #999;
 470   font-size: 14px;
 471   line-height: 18px;
 472   font-style: italic;
 473 }
 474
 475 .component-title + .component-example {
 476   margin-top: 13px;
 477 }
 478
 479 .content-section .prettyprint,
 480 .content-section .instruction-code {
 481   margin-top: 10px;
 482   padding: 10px;
 483   overflow-x: auto;
 484   font-size: 13px;
 485   font-family: monaco, menlo, monospace;
 486   color: #777;
 487   background-color: #fafafa;
 488   border: 1px solid #ddd;
 489   border-radius: 3px;
 490 }
 491
 492 .prettyprint + .component-description,
 493 .component-note + .component-description {
 494   margin-top: 36px;
 495 }
 496
 497 /* Content specific styles
 498 -------------------------------------------------- */
 499
 500 /* Make the example bars stay put in the docs */
 501 .iphone [class*="bar"] {
 502   position: absolute;
 503 }
 504
 505 /* Component examples on mobile */
 506 .component-example {
 507   position: relative;
 508   display: none;
 509   margin-bottom: 20px;
 510   font-family: "Helvetica Neue", sans-serif;
 511   font-weight: normal;
 512 }
 513
 514 .component-example-fullbleed {
 515   margin-right: -20px;
 516   margin-left: -20px;
 517 }
 518
 519 /* Bar examples */
 520 .component-example [class*="bar"] {
 521   position: relative;
 522 }
 523
 524 .component-example .bar-header-secondary {
 525   top: 0;
 526 }
 527
 528 /* List examples */
 529 .component-example .list {
 530   margin-left: 0;
 531   margin-right: 0;
 532   background-color: #fff;
 533 }
 534
 535 .component-example .list li {
 536   padding-right: 70px;
 537   padding-left: 20px;
 538 }
 539
 540 .component-example .list.inset {
 541   margin: 0;
 542 }
 543
 544 .iphone .list .segmented-controller-item,
 545 .component-example .list .segmented-controller-item {
 546   border-bottom-width: 0;
 547 }
 548
 549 .iphone .list {
 550   margin-left: 0;
 551   margin-right: 0;
 552 }
 553
 554 /* Button examples */
 555 #buttons [class*="button"],
 556 #buttonsCounts [class*="button"],
 557 #blockButtons [class*="button"] {
 558   margin-bottom: 10px;
 559 }
 560
 561 #buttons [class*="button"]:last-child,
 562 #buttonsCounts [class*="button"]:last-child,
 563 #blockButtons [class*="button"]:last-child {
 564   margin-bottom: 0;
 565 }
 566
 567 #blockButtonsInPhone .button-block {
 568   margin-left: 5px;
 569   margin-right: 5px;
 570 }
 571
 572 #push .component-example {
 573   height: 108px;
 574   overflow: hidden;
 575 }
 576
 577 #push .component-example .list {
 578   border-left: 1px solid rgba(0, 0, 0, .1);
 579   border-right: 1px solid rgba(0, 0, 0, .1);
 580 }
 581
 582 .iphone .btn-section .button {
 583   display: block;
 584   margin: 0 auto;
 585 }
 586
 587 .iphone .block-btn-section .block-button {
 588   margin-top: 10px;
 589 }
 590
 591 .iphone .block-btn-section .block-button:first-child {
 592   margin-top: 100px;
 593 }
 594
 595 #buttonsInPhone,
 596 #buttonsCountsInPhone {
 597   text-align: center;
 598 }
 599
 600 #buttonsInPhone [class*="button"],
 601 #buttonsCountsInPhone [class*="button"] {
 602   margin-top: 10px;
 603 }
 604
 605 #blockButtonsInPhone [class*="button"] {
 606   margin-top: 5px;
 607 }
 608
 609 /* Counts examples */
 610 #countsInPhone {
 611   text-align: center;
 612 }
 613
 614 #countsInPhone [class*="count"] {
 615   margin-top: 10px;
 616 }
 617
 618 /* Form examples */
 619 .component-example form [class*="button"] {
 620   margin-bottom: 0;
 621 }
 622
 623 .component .input-group label {
 624   padding: 9px 10px 9px 13px;
 625 }
 626
 627 /* Toggle examples */
 628 #toggles .toggle {
 629   display: inline-block;
 630   margin-right: 10px;
 631 }
 632 #togglesInPhone .toggle {
 633   margin: 10px auto 0;
 634 }
 635
 636 /* Popover examples */
 637 .component-example .popover {
 638   position: relative;
 639   display: block;
 640   top: 0;
 641   margin-top: 50px;
 642   opacity: 1;
 643 }
 644 #popoversInPhone .popover {
 645   position: absolute;
 646   display: block !important;
 647   top: 72px;
 648   opacity: 1 !important;
 649 }
 650
 651 /* Slider examples */
 652 .component-example-fullbleed .slider,
 653 .component-example-fullbleed .slider li,
 654 .component-example-fullbleed .slider li img,
 655 #slidersInPhone .slider,
 656 #slidersInPhone .slider li,
 657 #slidersInPhone .slider li img {
 658   width: 100%;
 659 }
 660
 661 #slidersInPhone .slider {
 662   position: absolute;
 663   top: 0;
 664   left: 0;
 665 }
 666
 667 .slider .slide-text {
 668   position: absolute;
 669   top: 45%;
 670   left: 0;
 671   width: 100%;
 672   color: #fff;
 673   text-align: center;
 674   font-size: 24px;
 675   font-weight: 300;
 676   text-shadow: 0 0 10px rgba(0,0,0,.5);
 677 }
 678
 679 /* Give inset components in the iphone correct margin */
 680 .iphone .list.inset,
 681 #segmentedControllersInPhone .segmented-controller,
 682 #formsInPhone form,
 683 #formsWithInputGroupInPhone form,
 684 #formsWithInputGroupAndLabelsInPhone form {
 685   margin: 10px;
 686 }
 687
 688 #pushInPhone .list {
 689   margin-top: 44px;
 690 }
 691
 692 /* Footer
 693 -------------------------------------------------- */
 694
 695 .docs-footer {
 696   padding-bottom: 100px;
 697   overflow: hidden;
 698   color: #fff;
 699   background-color: #151515;
 700 }
 701
 702 .docs-footer .docs-inner-wrapper {
 703   text-align: center
 704 }
 705
 706 .docs-footer h3 {
 707   font-size: 24px;
 708   color: #fefefe;
 709   font-weight: 700;
 710 }
 711
 712 .docs-footer p {
 713   font-size: 18px;
 714   color: #777;
 715 }
 716
 717 .avatars {
 718   display: block;
 719   width: 590px;
 720   margin: 30px auto 0;
 721 }
 722
 723 .avatars li {
 724   float: left;
 725   height: 170px;
 726   width: 170px;
 727   margin-right: 40px;
 728   list-style: none;
 729 }
 730
 731 .avatars .avatar {
 732   display: block;
 733   height: 100%;
 734   width: 100%;
 735   margin-bottom: 15px;
 736   overflow: hidden;
 737   border-radius: 100%;
 738 }
 739
 740 .avatars li:last-child {
 741   margin-right: 0;
 742 }
 743
 744 .avatars img {
 745   width: 170px;
 746   height: 170px;
 747 }
 748
 749 /* Banner for Mozilla and IE about component rendering poorly
 750 ------------------------------------------------------------- */
 751 .notice-banner {
 752   cursor: pointer;
 753   height: 0;
 754   opacity: 0;
 755   padding: 0;
 756   color: #333;
 757   font-size: 16px;
 758   text-align: center;
 759   background-color: #fff9c4; /* Old browsers */
 760   background-image: -moz-linear-gradient(top,  #fff9c4 0%, #fff38d 100%); /* FF3.6+ */
 761   background-image: -ms-linear-gradient(top,  #fff9c4 0%,#fff38d 100%); /* IE10+ */
 762   background-image: linear-gradient(to bottom,  #fff9c4 0%,#fff38d 100%); /* W3C */
 763   box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
 764   -moz-animation: shownotice 1s infinite;
 765 }
 766
 767 /* Media queries
 768 -------------------------------------------------- */
 769
 770 @media only screen and (max-width: 1039px) {
 771   .docs-inner-wrapper  {
 772     width: 920px;
 773   }
 774
 775   .docs-header-text {
 776     width: 700px;
 777   }
 778
 779   .steps .step {
 780     width: 280px;
 781   }
 782
 783   .component {
 784     width: 500px;
 785   }
 786
 787   .iphone-fixed,
 788   .iphone-bottom {
 789     margin-left: 85px;
 790   }
 791 }
 792 @media only screen and (min-width: 768px) and (max-width: 959px) {
 793   .docs-header-text,
 794   .docs-inner-wrapper  {
 795     width: 700px;
 796   }
 797
 798   .docs-header {
 799     height: 400px;
 800   }
 801
 802   .docs-header-text {
 803     top: 75px;
 804   }
 805
 806   .steps .step {
 807     width: 205px;
 808   }
 809
 810   .component {
 811     width: 300px;
 812   }
 813
 814   .iphone-fixed,
 815   .iphone-bottom {
 816     margin-left: -25px;
 817   }
 818 }
 819 @media only screen and (max-width: 767px) {
 820   .docs-outer-wrapper,
 821   .docs-inner-wrapper,
 822   .docs-header-text,
 823   .docs-content,
 824   .component {
 825     width: auto;
 826   }
 827
 828   .docs-inner-wrapper {
 829     padding-right: 20px;
 830     padding-left: 20px;
 831   }
 832
 833   /* Have the masthead scroll away instead of being fixed */
 834   .docs-masthead {
 835     position: absolute;
 836     padding: 2px 0 1px;
 837   }
 838
 839   .docs-masthead-title {
 840     font-size: 18px;
 841     text-align: center;
 842   }
 843
 844   /* Hide the navigation on mobile. Scroll away! */
 845   .docs-navigation {
 846     display: none;
 847   }
 848
 849   .docs-header {
 850     height: 320px;
 851     margin-top: 44px;
 852   }
 853
 854   .docs-header-text {
 855     top: 50px;
 856   }
 857
 858   .docs-header-subtitle {
 859     margin-bottom: 18px;
 860     font-size: 24px;
 861     line-height: 30px;
 862   }
 863
 864   .docs-btn {
 865     width: 100%;
 866     padding: 15px 0;
 867     font-size: 18px;
 868   }
 869
 870   .docs-btn:active {
 871     padding: 16px 0 14px;
 872   }
 873
 874   .social ul {
 875     height: auto;
 876   }
 877
 878   .social li {
 879     padding-bottom: 15px;
 880   }
 881
 882   .social li:last-child {
 883     padding-bottom : 0;
 884   }
 885
 886   .content-section {
 887     padding-top: 50px;
 888   }
 889
 890   .section-header {
 891     padding-bottom: 50px;
 892   }
 893
 894   .section-title {
 895     margin-bottom: 5px;
 896     font-size: 40px;
 897   }
 898
 899   .section-description {
 900     font-size: 18px;
 901     line-height: 24px;
 902   }
 903
 904   .section-components {
 905     padding-bottom: 0px;
 906   }
 907
 908   .section-informational {
 909     padding-bottom: 70px;
 910   }
 911
 912   .steps .step {
 913     float: none;
 914     width: auto;
 915     margin: 0 0 30px 0;
 916   }
 917
 918   .steps .step:last-child {
 919     margin: 0;
 920   }
 921
 922   .notice-banner {
 923     position: relative;
 924     top: 0;
 925     font-size: 14px;
 926     line-height: 18px;
 927   }
 928
 929   .notice-banner:after {
 930     display: none;
 931   }
 932
 933   .component {
 934     padding: 50px 20px;
 935     margin-left: -20px;
 936     margin-right: -20px;
 937     opacity: 1;
 938     border-bottom: 1px solid #ddd;
 939   }
 940
 941   .component:last-child {
 942     margin-bottom: 80px;
 943   }
 944
 945   .component-example {
 946     display: block;
 947   }
 948
 949   /* Hacky way to get parent of slider position absolute for smooth sliding */
 950   #sliders .slider {
 951     position: absolute;
 952     top: 0;
 953     left: 0;
 954     z-index: 10000;
 955   }
 956   #sliders .prettyprint:not(.js) {
 957     margin-top: 230px;
 958   }
 959
 960   .avatars {
 961     overflow: hidden;
 962     width: 280px;
 963     margin: 10px auto 0;
 964   }
 965
 966   .avatars li {
 967     height: 86px;
 968     width: 86px;
 969     margin-right: 10px;
 970   }
 971
 972   .avatars li:last-child {
 973     margin-right: 0;
 974   }
 975
 976   .avatars img {
 977     width: 86px;
 978     height: 86px;
 979   }
 980
 981   /* Hide the iPhone on mobile */
 982   .iphone {
 983     display: none;
 984   }
 985 }
 986
 987 @media only screen and (max-width: 320px) {
 988   .docs-header-text {
 989     top: 30px;
 990   }
 991 }
 992
 993 /* Animations
 994 -------------------------------------------------- */
 995
 996 @-webkit-keyframes fadeintext {
 997   0% {
 998    opacity: 0;
 999    -webkit-transform: translateY(20px);
1000   }
1001   50% {
1002    opacity: 0;
1003    -webkit-transform: translateY(20px);
1004   }
1005   100% {
1006    opacity: 1;
1007    -webkit-transform: translateY(0);
1008   }
1009 }
1010
1011 @-webkit-keyframes fadeinsocial {
1012   0% {
1013    opacity: 0;
1014   }
1015   85% {
1016    opacity: 0;
1017   }
1018   100% {
1019    opacity: 1;
1020   }
1021 }
1022
1023 @-moz-keyframes fadeintext {
1024   0% {
1025    opacity: 0;
1026    -moz-transform: translateY(20px);
1027   }
1028   50% {
1029    opacity: 0;
1030    -moz-transform: translateY(20px);
1031   }
1032   100% {
1033    opacity: 1;
1034    -moz-transform: translateY(0);
1035   }
1036 }
1037
1038 @-moz-keyframes fadeinsocial {
1039   0% {
1040    opacity: 0;
1041   }
1042   85% {
1043    opacity: 0;
1044   }
1045   100% {
1046    opacity: 1;
1047   }
1048 }
1049
1050 @-moz-keyframes shownotice {
1051   0% {
1052     min-height: 30px;
1053     padding: 20px 0;
1054     opacity: 1;
1055   }
1056   100% {
1057     min-height: 30px;
1058     padding: 20px 0;
1059     opacity: 1;
1060   }
1061 }
1062
1063 /* Add Firefox support for CSS to docs since Ratchet framework doesn't natively support Mozilla
1064 -------------------------------------------------- */
1065
1066 /* Bars.css */
1067 [class*="bar-"] {
1068   -moz-box-sizing: border-box;
1069 }
1070 .bar-title,
1071 .tab-inner {
1072   display: -moz-box;
1073   -moz-box-orient: horizontal;
1074 }
1075 .tab-item {
1076   -moz-box-sizing: border-box;
1077   -moz-box-flex: 1;
1078 }
1079 .bar-title [class*="button"] {
1080   -moz-box-flex: 0;
1081 }
1082 .bar-title .segmented-controller {
1083   -moz-box-flex: 1;
1084 }
1085
1086  /* forms.css */
1087 select,
1088 textarea,
1089 input[type="text"],
1090 input[type=search],
1091 input[type="password"],
1092 input[type="datetime"],
1093 input[type="datetime-local"],
1094 input[type="date"],
1095 input[type="month"],
1096 input[type="time"],
1097 input[type="week"],
1098 input[type="number"],
1099 input[type="email"],
1100 input[type="url"],
1101 input[type="tel"],
1102 input[type="color"],
1103 .input-group {
1104   -moz-box-sizing: border-box;
1105 }
1106
1107 /* lists.css */
1108 .list.inset  {
1109   -moz-box-sizing: border-box;
1110 }
1111
1112 /* popovers.css */
1113 .popover-header {
1114   display: -moz-box;
1115 }
1116
1117 /* segmented-controller.css*/
1118 .segmented-controller {
1119   display: -moz-box;
1120   -moz-box-orient: horizontal;
1121 }
1122 .segmented-controller li {
1123   -moz-box-flex: 1;
1124 }
1125
1126 /* Get tab-bar to look 1/2way decent */
1127 .iphone .tab-item {
1128   min-width: 64px;
1129 }