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;
10 background-color: #fff;
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 -------------------------------------------------- */
49 /* Masthead (navigation)
50 -------------------------------------------------- */
59 background-color: #fff;
60 border-bottom: 1px solid #ddd;
61 box-shadow: 0 0 5px rgba(0,0,0,.1);
64 .docs-masthead .docs-inner-wrapper {
68 .docs-masthead-title {
71 text-transform: uppercase;
87 .nav-item:last-child {
94 text-decoration: none;
101 /* Give the components link a bit more room to fit the caret */
102 .nav-item.nav-components {
106 /* Give the components link a down caret */
107 .nav-components-link:after {
116 border-right: 4px solid transparent;
117 border-top: 4px solid #777;
118 border-left: 4px solid transparent;
121 /* The components list dropdown */
130 background-color: #fff;
131 background-clip: padding-box;
132 border: 1px solid rgba(0,0,0,.2);
134 box-shadow: 0 0 8px rgba(0,0,0,.05);
137 .components-list.active {
142 .components-list:before,
143 .components-list:after {
151 .components-list:before {
154 border-right: 11px solid transparent;
155 border-bottom: 11px solid rgba(0,0,0,.3);
156 border-left: 11px solid transparent;
159 .components-list:after {
162 border-right: 10px solid transparent;
163 border-bottom: 10px solid #fff;
164 border-left: 10px solid transparent;
167 .components-list li {
171 .components-list li:last-child {
175 .components-list li a {
181 .components-list li a:hover {
183 background-color: #1eb0e9;
187 -------------------------------------------------- */
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);
206 text-shadow: 0 0 5px #000;
207 -webkit-animation: fadeintext 2s;
208 -moz-animation: fadeintext 2s;
211 .docs-header-subtitle {
219 display: inline-block;
224 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
225 text-decoration: none;
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 */
235 box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 5px rgba(0,0,0,.2);
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 */
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);
256 /* Styles for the social media buttons */
263 background-color: rgba(0,0,0,.3);
264 -webkit-animation: fadeinsocial 2.5s;
265 -moz-animation: fadeinsocial 2.5s;
276 display: inline-block;
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 {
298 -------------------------------------------------- */
306 font-family: "Helvetica Neue", sans-serif;
307 background-image: url("../img/iphone.png");
327 .iphone .iphone-content {
334 background-color: white;
338 .component-example .content {
346 .component-example .content {
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"] {
360 -------------------------------------------------- */
368 -------------------------------------------------- */
371 padding-bottom: 30px;
373 border-bottom: 1px solid #ddd;
383 .section-description {
389 .section-informational {
390 border-top: 1px solid #ddd;
391 border-bottom: 1px solid #ddd;
392 background-color: #fafafa;
393 padding-bottom: 70px;
396 /* Getting started & page setup
397 -------------------------------------------------- */
421 .steps .step:last-child {
426 -------------------------------------------------- */
428 .section-components {
429 padding-bottom: 350px;
430 background-color: #fff;
438 font-family: "proxima-nova", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
440 opacity: .3; /* Fade content back until the user scrolls to it. */
441 -webkit-transition: opacity .2s ease-in-out;
444 .component:last-child {
445 margin-bottom: 320px;
448 /* Active class applied when the specific component is in focus */
459 .component-description {
475 .component-title + .component-example {
479 .content-section .prettyprint,
480 .content-section .instruction-code {
485 font-family: monaco, menlo, monospace;
487 background-color: #fafafa;
488 border: 1px solid #ddd;
492 .prettyprint + .component-description,
493 .component-note + .component-description {
497 /* Content specific styles
498 -------------------------------------------------- */
500 /* Make the example bars stay put in the docs */
501 .iphone [class*="bar"] {
505 /* Component examples on mobile */
510 font-family: "Helvetica Neue", sans-serif;
514 .component-example-fullbleed {
520 .component-example [class*="bar"] {
524 .component-example .bar-header-secondary {
529 .component-example .list {
532 background-color: #fff;
535 .component-example .list li {
540 .component-example .list.inset {
544 .iphone .list .segmented-controller-item,
545 .component-example .list .segmented-controller-item {
546 border-bottom-width: 0;
554 /* Button examples */
555 #buttons [class*="button"],
556 #buttonsCounts [class*="button"],
557 #blockButtons [class*="button"] {
561 #buttons [class*="button"]:last-child,
562 #buttonsCounts [class*="button"]:last-child,
563 #blockButtons [class*="button"]:last-child {
567 #blockButtonsInPhone .button-block {
572 #push .component-example {
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);
582 .iphone .btn-section .button {
587 .iphone .block-btn-section .block-button {
591 .iphone .block-btn-section .block-button:first-child {
596 #buttonsCountsInPhone {
600 #buttonsInPhone [class*="button"],
601 #buttonsCountsInPhone [class*="button"] {
605 #blockButtonsInPhone [class*="button"] {
609 /* Counts examples */
614 #countsInPhone [class*="count"] {
619 .component-example form [class*="button"] {
623 .component .input-group label {
624 padding: 9px 10px 9px 13px;
627 /* Toggle examples */
629 display: inline-block;
632 #togglesInPhone .toggle {
636 /* Popover examples */
637 .component-example .popover {
644 #popoversInPhone .popover {
646 display: block !important;
648 opacity: 1 !important;
652 .iphone .iphone-content .modal { position: absolute; }
653 .iphone .iphone-content .modal .content { margin-top: 44px; }
654 .iphone .iphone-content #myModal.active { background: #cecece; }
656 /* Slider examples */
657 .component-example-fullbleed .slider,
658 .component-example-fullbleed .slider li,
659 .component-example-fullbleed .slider li img,
660 #slidersInPhone .slider,
661 #slidersInPhone .slider li,
662 #slidersInPhone .slider li img {
666 #slidersInPhone .slider {
672 .slider .slide-text {
681 text-shadow: 0 0 10px rgba(0,0,0,.5);
684 /* Give inset components in the iphone correct margin */
686 #segmentedControllersInPhone .segmented-controller,
688 #formsWithInputGroupInPhone form,
689 #formsWithInputGroupAndLabelsInPhone form {
698 -------------------------------------------------- */
701 padding-bottom: 100px;
704 background-color: #151515;
707 .docs-footer .docs-inner-wrapper {
745 .avatars li:last-child {
754 /* Banner for Mozilla and IE about component rendering poorly
755 ------------------------------------------------------------- */
764 background-color: #fff9c4; /* Old browsers */
765 background-image: -moz-linear-gradient(top, #fff9c4 0%, #fff38d 100%); /* FF3.6+ */
766 background-image: -ms-linear-gradient(top, #fff9c4 0%,#fff38d 100%); /* IE10+ */
767 background-image: linear-gradient(to bottom, #fff9c4 0%,#fff38d 100%); /* W3C */
768 box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
769 -moz-animation: shownotice 1s infinite;
773 -------------------------------------------------- */
775 @media only screen and (max-width: 1039px) {
776 .docs-inner-wrapper {
797 @media only screen and (min-width: 768px) and (max-width: 959px) {
799 .docs-inner-wrapper {
824 @media only screen and (max-width: 767px) {
833 .docs-inner-wrapper {
838 /* Have the masthead scroll away instead of being fixed */
844 .docs-masthead-title {
849 /* Hide the navigation on mobile. Scroll away! */
863 .docs-header-subtitle {
876 padding: 16px 0 14px;
884 padding-bottom: 15px;
887 .social li:last-child {
896 padding-bottom: 50px;
904 .section-description {
909 .section-components {
913 .section-informational {
914 padding-bottom: 70px;
923 .steps .step:last-child {
934 .notice-banner:after {
943 border-bottom: 1px solid #ddd;
946 .component:last-child {
954 /* Hacky way to get parent of slider position absolute for smooth sliding */
961 #sliders .prettyprint:not(.js) {
977 .avatars li:last-child {
986 /* Hide the iPhone on mobile */
992 @media only screen and (max-width: 320px) {
999 -------------------------------------------------- */
1001 @-webkit-keyframes fadeintext {
1004 -webkit-transform: translateY(20px);
1008 -webkit-transform: translateY(20px);
1012 -webkit-transform: translateY(0);
1016 @-webkit-keyframes fadeinsocial {
1028 @-moz-keyframes fadeintext {
1031 -moz-transform: translateY(20px);
1035 -moz-transform: translateY(20px);
1039 -moz-transform: translateY(0);
1043 @-moz-keyframes fadeinsocial {
1055 @-moz-keyframes shownotice {
1068 /* Add Firefox support for CSS to docs since Ratchet framework doesn't natively support Mozilla
1069 -------------------------------------------------- */
1073 -moz-box-sizing: border-box;
1078 -moz-box-orient: horizontal;
1081 -moz-box-sizing: border-box;
1084 .bar-title [class*="button"] {
1087 .bar-title .segmented-controller {
1096 input[type="password"],
1097 input[type="datetime"],
1098 input[type="datetime-local"],
1100 input[type="month"],
1103 input[type="number"],
1104 input[type="email"],
1107 input[type="color"],
1109 -moz-box-sizing: border-box;
1114 -moz-box-sizing: border-box;
1122 /* segmented-controller.css*/
1123 .segmented-controller {
1125 -moz-box-orient: horizontal;
1127 .segmented-controller li {
1131 /* Get tab-bar to look 1/2way decent */