2 -------------------------------------------------- */
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;
11 -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
12 -webkit-text-size-adjust: 100%;
17 -------------------------------------------------- */
23 border-width: 1px 0 0;
33 text-rendering: optimizeLegibility;
37 /* Docs structural styles
38 -------------------------------------------------- */
48 /* Masthead (navigation)
49 -------------------------------------------------- */
58 background-color: #fff;
59 border-bottom: 1px solid #ddd;
60 box-shadow: 0 0 5px rgba(0,0,0,.1);
63 .docs-masthead .docs-inner-wrapper {
67 .docs-masthead-title {
70 text-transform: uppercase;
86 .nav-item:last-child {
93 text-decoration: none;
100 /* Give the components link a bit more room to fit the caret */
101 .nav-item.nav-components {
105 /* Give the components link a down caret */
106 .nav-components-link:after {
115 border-right: 4px solid transparent;
116 border-top: 4px solid #777;
117 border-left: 4px solid transparent;
120 /* The components list dropdown */
129 background-color: #fff;
130 background-clip: padding-box;
131 border: 1px solid rgba(0,0,0,.2);
133 box-shadow: 0 0 8px rgba(0,0,0,.05);
136 .components-list.active {
141 .components-list:before,
142 .components-list:after {
150 .components-list:before {
153 border-right: 11px solid transparent;
154 border-bottom: 11px solid rgba(0,0,0,.3);
155 border-left: 11px solid transparent;
158 .components-list:after {
161 border-right: 10px solid transparent;
162 border-bottom: 10px solid #fff;
163 border-left: 10px solid transparent;
166 .components-list li {
170 .components-list li:last-child {
174 .components-list li a {
180 .components-list li a:hover {
182 background-color: #1eb0e9;
186 -------------------------------------------------- */
191 background-color: #02122b;
192 background-image: url(../img/header-bg.jpg);
193 background-size: cover;
194 box-shadow: inset 0 0 10px rgba(0,0,0,.6);
205 text-shadow: 0 0 5px #000;
206 -webkit-animation: fadeintext 2s;
207 -moz-animation: fadeintext 2s;
210 .docs-header-subtitle {
218 display: inline-block;
223 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
224 text-decoration: none;
226 background-color: #f26629; /* Old browsers */
227 background-image: -moz-linear-gradient(top, #f95e0c 0%, #e53003 100%); /* FF3.6+ */
228 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#e53003)); /* Chrome,Safari4+ */
229 background-image: -webkit-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* Chrome10+,Safari5.1+ */
230 background-image: -o-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* Opera 11.10+ */
231 background-image: -ms-linear-gradient(top, #f95e0c 0%,#e53003 100%); /* IE10+ */
232 background-image: linear-gradient(to bottom, #f95e0c 0%,#e53003 100%); /* W3C */
234 box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 5px rgba(0,0,0,.2);
239 background-color: #ff7234; /* Old browsers */
240 background-image: -moz-linear-gradient(top, #f95e0c 0%, #cd2a02 100%); /* FF3.6+ */
241 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f95e0c), color-stop(100%,#cd2a02)); /* Chrome,Safari4+ */
242 background-image: -webkit-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* Chrome10+,Safari5.1+ */
243 background-image: -o-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* Opera 11.10+ */
244 background-image: -ms-linear-gradient(top, #f95e0c 0%,#cd2a02 100%); /* IE10+ */
245 background-image: linear-gradient(to bottom, #f95e0c 0%,#cd2a02 100%); /* W3C */
249 padding: 19px 40px 17px;
250 background-color: #cd2a02;
251 background-image: none;
252 box-shadow: inset 0 0 5px rgba(0,0,0,.4);
255 /* Styles for the social media buttons */
262 background-color: rgba(0,0,0,.3);
263 -webkit-animation: fadeinsocial 2.5s;
264 -moz-animation: fadeinsocial 2.5s;
275 display: inline-block;
281 /* Overiding our framework button styles so our social buttons aren't messed up */
282 .twitter-follow-button,
283 .twitter-follow-button:hover,
284 .twitter-follow-button:active,
285 .twitter-share-button,
286 .twitter-share-button:hover,
287 .twitter-share-button:active {
297 -------------------------------------------------- */
305 font-family: "Helvetica Neue", sans-serif;
306 background-image: url("../img/iphone.png");
326 .iphone .iphone-content {
333 background-color: white;
337 .component-example .content {
345 .component-example .content {
349 /* Mad override to avoid it being styled like the block level link */
350 .component-example .list a[data-transition="slide-out"],
351 .iphone .list a[data-transition="slide-out"] {
359 -------------------------------------------------- */
367 -------------------------------------------------- */
370 padding-bottom: 30px;
372 border-bottom: 1px solid #ddd;
382 .section-description {
388 .section-informational {
389 border-top: 1px solid #ddd;
390 border-bottom: 1px solid #ddd;
391 background-color: #fafafa;
392 padding-bottom: 70px;
395 /* Getting started & page setup
396 -------------------------------------------------- */
420 .steps .step:last-child {
425 -------------------------------------------------- */
427 .section-components {
428 padding-bottom: 350px;
429 background-color: #fff;
437 font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
439 opacity: .3; /* Fade content back until the user scrolls to it. */
440 -webkit-transition: opacity .2s ease-in-out;
443 .component:last-child {
444 margin-bottom: 320px;
447 /* Active class applied when the specific component is in focus */
458 .component-description {
474 .component-title + .component-example {
478 .content-section .prettyprint,
479 .content-section .instruction-code {
484 font-family: monaco, menlo, monospace;
486 background-color: #fafafa;
487 border: 1px solid #ddd;
491 .prettyprint + .component-description,
492 .component-note + .component-description {
496 /* Content specific styles
497 -------------------------------------------------- */
499 /* Make the example bars stay put in the docs */
500 .iphone [class*="bar"] {
504 /* Component examples on mobile */
509 font-family: "Helvetica Neue", sans-serif;
513 .component-example-fullbleed {
519 .component-example [class*="bar"] {
523 .component-example .bar-header-secondary {
528 .component-example .list {
531 background-color: #fff;
534 .component-example .list li {
539 .component-example .list.inset {
543 .iphone .list .segmented-controller-item,
544 .component-example .list .segmented-controller-item {
545 border-bottom-width: 0;
553 /* Button examples */
554 #buttons [class*="button"],
555 #buttonsCounts [class*="button"],
556 #blockButtons [class*="button"] {
560 #buttons [class*="button"]:last-child,
561 #buttonsCounts [class*="button"]:last-child,
562 #blockButtons [class*="button"]:last-child {
566 #blockButtonsInPhone .button-block {
571 #push .component-example {
576 #push .component-example .list {
577 border-left: 1px solid rgba(0, 0, 0, .1);
578 border-right: 1px solid rgba(0, 0, 0, .1);
581 .iphone .btn-section .button {
586 .iphone .block-btn-section .block-button {
590 .iphone .block-btn-section .block-button:first-child {
595 #buttonsCountsInPhone {
599 #buttonsInPhone [class*="button"],
600 #buttonsCountsInPhone [class*="button"] {
604 #blockButtonsInPhone [class*="button"] {
608 /* Counts examples */
613 #countsInPhone [class*="count"] {
618 .component-example form [class*="button"] {
622 .component .input-group label {
623 padding: 9px 10px 9px 13px;
626 /* Toggle examples */
628 display: inline-block;
631 #togglesInPhone .toggle {
635 /* Popover examples */
636 .component-example .popover {
643 #popoversInPhone .popover {
645 display: block !important;
647 opacity: 1 !important;
650 /* Slider examples */
651 .component-example-fullbleed .slider,
652 .component-example-fullbleed .slider li,
653 .component-example-fullbleed .slider li img,
654 #slidersInPhone .slider,
655 #slidersInPhone .slider li,
656 #slidersInPhone .slider li img {
660 #slidersInPhone .slider {
666 .slider .slide-text {
675 text-shadow: 0 0 10px rgba(0,0,0,.5);
678 /* Give inset components in the iphone correct margin */
680 #segmentedControllersInPhone .segmented-controller,
682 #formsWithInputGroupInPhone form,
683 #formsWithInputGroupAndLabelsInPhone form {
692 -------------------------------------------------- */
695 padding-bottom: 100px;
698 background-color: #151515;
701 .docs-footer .docs-inner-wrapper {
739 .avatars li:last-child {
748 /* Banner for Mozilla and IE about component rendering poorly
749 ------------------------------------------------------------- */
758 background-color: #fff9c4; /* Old browsers */
759 background-image: -moz-linear-gradient(top, #fff9c4 0%, #fff38d 100%); /* FF3.6+ */
760 background-image: -ms-linear-gradient(top, #fff9c4 0%,#fff38d 100%); /* IE10+ */
761 background-image: linear-gradient(to bottom, #fff9c4 0%,#fff38d 100%); /* W3C */
762 box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
763 -moz-animation: shownotice 1s infinite;
767 -------------------------------------------------- */
769 @media only screen and (max-width: 1039px) {
770 .docs-inner-wrapper {
791 @media only screen and (min-width: 768px) and (max-width: 959px) {
793 .docs-inner-wrapper {
818 @media only screen and (max-width: 767px) {
827 .docs-inner-wrapper {
832 /* Have the masthead scroll away instead of being fixed */
838 .docs-masthead-title {
843 /* Hide the navigation on mobile. Scroll away! */
857 .docs-header-subtitle {
870 padding: 16px 0 14px;
878 padding-bottom: 15px;
881 .social li:last-child {
890 padding-bottom: 50px;
898 .section-description {
903 .section-components {
907 .section-informational {
908 padding-bottom: 70px;
917 .steps .step:last-child {
928 .notice-banner:after {
937 border-bottom: 1px solid #ddd;
940 .component:last-child {
948 /* Hacky way to get parent of slider position absolute for smooth sliding */
955 #sliders .prettyprint:not(.js) {
971 .avatars li:last-child {
980 /* Hide the iPhone on mobile */
986 @media only screen and (max-width: 320px) {
993 -------------------------------------------------- */
995 @-webkit-keyframes fadeintext {
998 -webkit-transform: translateY(20px);
1002 -webkit-transform: translateY(20px);
1006 -webkit-transform: translateY(0);
1010 @-webkit-keyframes fadeinsocial {
1022 @-moz-keyframes fadeintext {
1025 -moz-transform: translateY(20px);
1029 -moz-transform: translateY(20px);
1033 -moz-transform: translateY(0);
1037 @-moz-keyframes fadeinsocial {
1049 @-moz-keyframes shownotice {
1062 /* Add Firefox support for CSS to docs since Ratchet framework doesn't natively support Mozilla
1063 -------------------------------------------------- */
1067 -moz-box-sizing: border-box;
1072 -moz-box-orient: horizontal;
1075 -moz-box-sizing: border-box;
1078 .bar-title [class*="button"] {
1081 .bar-title .segmented-controller {
1090 input[type="password"],
1091 input[type="datetime"],
1092 input[type="datetime-local"],
1094 input[type="month"],
1097 input[type="number"],
1098 input[type="email"],
1101 input[type="color"],
1103 -moz-box-sizing: border-box;
1108 -moz-box-sizing: border-box;
1116 /* segmented-controller.css*/
1117 .segmented-controller {
1119 -moz-box-orient: horizontal;
1121 .segmented-controller li {
1125 /* Get tab-bar to look 1/2way decent */