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 /* Modal example */
 652 .iphone .iphone-content .modal { position: absolute; }
 653 .iphone .iphone-content .modal .content { margin-top: 44px; }
 654 #myModal.active { background: #cecece; }
 655 #modalsInPhone #iwindow > .button { margin: 10px; }; /* Gives the button some room so it isn't right up against the edge of the iPhone */
 656
 657 /* Slider examples */
 658 .component-example-fullbleed .slider,
 659 .component-example-fullbleed .slider li,
 660 .component-example-fullbleed .slider li img,
 661 #slidersInPhone .slider,
 662 #slidersInPhone .slider li,
 663 #slidersInPhone .slider li img {
 664   width: 100%;
 665 }
 666
 667 #slidersInPhone .slider {
 668   position: absolute;
 669   top: 0;
 670   left: 0;
 671 }
 672
 673 .slider .slide-text {
 674   position: absolute;
 675   top: 45%;
 676   left: 0;
 677   width: 100%;
 678   color: #fff;
 679   text-align: center;
 680   font-size: 24px;
 681   font-weight: 300;
 682   text-shadow: 0 0 10px rgba(0,0,0,.5);
 683 }
 684
 685 /* Give inset components in the iphone correct margin */
 686 .iphone .list.inset,
 687 #segmentedControllersInPhone .segmented-controller,
 688 #formsInPhone form,
 689 #formsWithInputGroupInPhone form,
 690 #formsWithInputGroupAndLabelsInPhone form {
 691   margin: 10px;
 692 }
 693
 694 #pushInPhone .list {
 695   margin-top: 44px;
 696 }
 697
 698 /* Footer
 699 -------------------------------------------------- */
 700
 701 .docs-footer {
 702   padding-bottom: 100px;
 703   overflow: hidden;
 704   color: #fff;
 705   background-color: #151515;
 706 }
 707
 708 .docs-footer .docs-inner-wrapper {
 709   text-align: center
 710 }
 711
 712 .docs-footer h3 {
 713   font-size: 24px;
 714   color: #fefefe;
 715   font-weight: 700;
 716 }
 717
 718 .docs-footer p {
 719   font-size: 18px;
 720   color: #777;
 721 }
 722
 723 .avatars {
 724   display: block;
 725   width: 590px;
 726   margin: 30px auto 0;
 727 }
 728
 729 .avatars li {
 730   float: left;
 731   height: 170px;
 732   width: 170px;
 733   margin-right: 40px;
 734   list-style: none;
 735 }
 736
 737 .avatars .avatar {
 738   display: block;
 739   height: 100%;
 740   width: 100%;
 741   margin-bottom: 15px;
 742   overflow: hidden;
 743   border-radius: 100%;
 744 }
 745
 746 .avatars li:last-child {
 747   margin-right: 0;
 748 }
 749
 750 .avatars img {
 751   width: 170px;
 752   height: 170px;
 753 }
 754
 755 /* Banner for Mozilla and IE about component rendering poorly
 756 ------------------------------------------------------------- */
 757 .notice-banner {
 758   cursor: pointer;
 759   height: 0;
 760   opacity: 0;
 761   padding: 0;
 762   color: #333;
 763   font-size: 16px;
 764   text-align: center;
 765   background-color: #fff9c4; /* Old browsers */
 766   background-image: -moz-linear-gradient(top,  #fff9c4 0%, #fff38d 100%); /* FF3.6+ */
 767   background-image: -ms-linear-gradient(top,  #fff9c4 0%,#fff38d 100%); /* IE10+ */
 768   background-image: linear-gradient(to bottom,  #fff9c4 0%,#fff38d 100%); /* W3C */
 769   box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
 770   -moz-animation: shownotice 1s infinite;
 771 }
 772
 773 /* Media queries
 774 -------------------------------------------------- */
 775
 776 @media only screen and (max-width: 1039px) {
 777   .docs-inner-wrapper  {
 778     width: 920px;
 779   }
 780
 781   .docs-header-text {
 782     width: 700px;
 783   }
 784
 785   .steps .step {
 786     width: 280px;
 787   }
 788
 789   .component {
 790     width: 500px;
 791   }
 792
 793   .iphone-fixed,
 794   .iphone-bottom {
 795     margin-left: 85px;
 796   }
 797 }
 798 @media only screen and (min-width: 768px) and (max-width: 959px) {
 799   .docs-header-text,
 800   .docs-inner-wrapper  {
 801     width: 700px;
 802   }
 803
 804   .docs-header {
 805     height: 400px;
 806   }
 807
 808   .docs-header-text {
 809     top: 75px;
 810   }
 811
 812   .steps .step {
 813     width: 205px;
 814   }
 815
 816   .component {
 817     width: 300px;
 818   }
 819
 820   .iphone-fixed,
 821   .iphone-bottom {
 822     margin-left: -25px;
 823   }
 824 }
 825 @media only screen and (max-width: 767px) {
 826   .docs-outer-wrapper,
 827   .docs-inner-wrapper,
 828   .docs-header-text,
 829   .docs-content,
 830   .component {
 831     width: auto;
 832   }
 833
 834   .docs-inner-wrapper {
 835     padding-right: 20px;
 836     padding-left: 20px;
 837   }
 838
 839   /* Have the masthead scroll away instead of being fixed */
 840   .docs-masthead {
 841     position: absolute;
 842     padding: 2px 0 1px;
 843   }
 844
 845   .docs-masthead-title {
 846     font-size: 18px;
 847     text-align: center;
 848   }
 849
 850   /* Hide the navigation on mobile. Scroll away! */
 851   .docs-navigation {
 852     display: none;
 853   }
 854
 855   .docs-header {
 856     height: 320px;
 857     margin-top: 44px;
 858   }
 859
 860   .docs-header-text {
 861     top: 50px;
 862   }
 863
 864   .docs-header-subtitle {
 865     margin-bottom: 18px;
 866     font-size: 24px;
 867     line-height: 30px;
 868   }
 869
 870   .docs-btn {
 871     width: 100%;
 872     padding: 15px 0;
 873     font-size: 18px;
 874   }
 875
 876   .docs-btn:active {
 877     padding: 16px 0 14px;
 878   }
 879
 880   .social ul {
 881     height: auto;
 882   }
 883
 884   .social li {
 885     padding-bottom: 15px;
 886   }
 887
 888   .social li:last-child {
 889     padding-bottom : 0;
 890   }
 891
 892   .content-section {
 893     padding-top: 50px;
 894   }
 895
 896   .section-header {
 897     padding-bottom: 50px;
 898   }
 899
 900   .section-title {
 901     margin-bottom: 5px;
 902     font-size: 40px;
 903   }
 904
 905   .section-description {
 906     font-size: 18px;
 907     line-height: 24px;
 908   }
 909
 910   .section-components {
 911     padding-bottom: 0px;
 912   }
 913
 914   .section-informational {
 915     padding-bottom: 70px;
 916   }
 917
 918   .steps .step {
 919     float: none;
 920     width: auto;
 921     margin: 0 0 30px 0;
 922   }
 923
 924   .steps .step:last-child {
 925     margin: 0;
 926   }
 927
 928   .notice-banner {
 929     position: relative;
 930     top: 0;
 931     font-size: 14px;
 932     line-height: 18px;
 933   }
 934
 935   .notice-banner:after {
 936     display: none;
 937   }
 938
 939   .component {
 940     padding: 50px 20px;
 941     margin-left: -20px;
 942     margin-right: -20px;
 943     opacity: 1;
 944     border-bottom: 1px solid #ddd;
 945   }
 946
 947   .component:last-child {
 948     margin-bottom: 80px;
 949   }
 950
 951   .component-example {
 952     display: block;
 953   }
 954
 955   /* Hacky way to get parent of slider position absolute for smooth sliding */
 956   #sliders .slider {
 957     position: absolute;
 958     top: 0;
 959     left: 0;
 960     z-index: 10000;
 961   }
 962   #sliders .prettyprint:not(.js) {
 963     margin-top: 230px;
 964   }
 965
 966   .avatars {
 967     overflow: hidden;
 968     width: 280px;
 969     margin: 10px auto 0;
 970   }
 971
 972   .avatars li {
 973     height: 86px;
 974     width: 86px;
 975     margin-right: 10px;
 976   }
 977
 978   .avatars li:last-child {
 979     margin-right: 0;
 980   }
 981
 982   .avatars img {
 983     width: 86px;
 984     height: 86px;
 985   }
 986
 987   /* Hide the iPhone on mobile */
 988   .iphone {
 989     display: none;
 990   }
 991 }
 992
 993 @media only screen and (max-width: 320px) {
 994   .docs-header-text {
 995     top: 30px;
 996   }
 997 }
 998
 999 /* Animations
1000 -------------------------------------------------- */
1001
1002 @-webkit-keyframes fadeintext {
1003   0% {
1004    opacity: 0;
1005    -webkit-transform: translateY(20px);
1006   }
1007   50% {
1008    opacity: 0;
1009    -webkit-transform: translateY(20px);
1010   }
1011   100% {
1012    opacity: 1;
1013    -webkit-transform: translateY(0);
1014   }
1015 }
1016
1017 @-webkit-keyframes fadeinsocial {
1018   0% {
1019    opacity: 0;
1020   }
1021   85% {
1022    opacity: 0;
1023   }
1024   100% {
1025    opacity: 1;
1026   }
1027 }
1028
1029 @-moz-keyframes fadeintext {
1030   0% {
1031    opacity: 0;
1032    -moz-transform: translateY(20px);
1033   }
1034   50% {
1035    opacity: 0;
1036    -moz-transform: translateY(20px);
1037   }
1038   100% {
1039    opacity: 1;
1040    -moz-transform: translateY(0);
1041   }
1042 }
1043
1044 @-moz-keyframes fadeinsocial {
1045   0% {
1046    opacity: 0;
1047   }
1048   85% {
1049    opacity: 0;
1050   }
1051   100% {
1052    opacity: 1;
1053   }
1054 }
1055
1056 @-moz-keyframes shownotice {
1057   0% {
1058     min-height: 30px;
1059     padding: 20px 0;
1060     opacity: 1;
1061   }
1062   100% {
1063     min-height: 30px;
1064     padding: 20px 0;
1065     opacity: 1;
1066   }
1067 }
1068
1069 /* Add Firefox support for CSS to docs since Ratchet framework doesn't natively support Mozilla
1070 -------------------------------------------------- */
1071
1072 /* Bars.css */
1073 [class*="bar-"] {
1074   -moz-box-sizing: border-box;
1075 }
1076 .bar-title,
1077 .tab-inner {
1078   display: -moz-box;
1079   -moz-box-orient: horizontal;
1080 }
1081 .tab-item {
1082   -moz-box-sizing: border-box;
1083   -moz-box-flex: 1;
1084 }
1085 .bar-title [class*="button"] {
1086   -moz-box-flex: 0;
1087 }
1088 .bar-title .segmented-controller {
1089   -moz-box-flex: 1;
1090 }
1091
1092  /* forms.css */
1093 select,
1094 textarea,
1095 input[type="text"],
1096 input[type=search],
1097 input[type="password"],
1098 input[type="datetime"],
1099 input[type="datetime-local"],
1100 input[type="date"],
1101 input[type="month"],
1102 input[type="time"],
1103 input[type="week"],
1104 input[type="number"],
1105 input[type="email"],
1106 input[type="url"],
1107 input[type="tel"],
1108 input[type="color"],
1109 .input-group {
1110   -moz-box-sizing: border-box;
1111 }
1112
1113 /* lists.css */
1114 .list.inset  {
1115   -moz-box-sizing: border-box;
1116 }
1117
1118 /* popovers.css */
1119 .popover-header {
1120   display: -moz-box;
1121 }
1122
1123 /* segmented-controller.css*/
1124 .segmented-controller {
1125   display: -moz-box;
1126   -moz-box-orient: horizontal;
1127 }
1128 .segmented-controller li {
1129   -moz-box-flex: 1;
1130 }
1131
1132 /* Get tab-bar to look 1/2way decent */
1133 .iphone .tab-item {
1134   min-width: 64px;
1135 }