2 * ==================================
4 * Licensed under The MIT License
5 * http://opensource.org/licenses/MIT
6 * ==================================
10 -------------------------------------------------- */
94 /* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */
96 -webkit-text-size-adjust: 100%;
97 -ms-text-size-adjust: 100%;
101 -------------------------------------------------- */
109 font: 14px/1.25 "Helvetica Neue", sans-serif;
111 background-color: #fff;
114 /* Universal link styling */
117 text-decoration: none;
118 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */
121 /* Wrapper to be used around all content not in .bar-title and .bar-tab */
130 -webkit-transition-property: top, bottom;
131 transition-property: top, bottom;
132 -webkit-transition-duration: .2s, .2s;
133 transition-duration: .2s, .2s;
134 -webkit-transition-timing-function: linear, linear;
135 transition-timing-function: linear, linear;
136 -webkit-overflow-scrolling: touch;
139 /* Hack to force all relatively and absolutely positioned elements still render while scrolling
140 Note: This is a bug for "-webkit-overflow-scrolling: touch" */
142 -webkit-transform: translateZ(0px);
143 transform: translateZ(0px);
146 /* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */
151 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
152 Note: For these to work, content must come after both bars in the markup */
153 .bar-title ~ .content {
156 .bar-tab ~ .content {
159 .bar-header-secondary ~ .content {
163 /* General bar styles
164 -------------------------------------------------- */
173 box-sizing: border-box;
176 /* Modifier class to dock any bar below .bar-title */
177 .bar-header-secondary {
181 /* Modifier class to dock any bar to bottom of viewport */
186 /* Generic bar for wrapping buttons, segmented controllers, etc. */
188 background-color: #f2f2f2;
189 background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%);
190 background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%);
191 border-bottom: 1px solid #aaa;
192 box-shadow: inset 0 1px 1px -1px #fff;
195 /* Flip border position to top for footer bars */
196 .bar-footer.bar-standard,
197 .bar-footer-secondary.bar-standard {
198 border-top: 1px solid #aaa;
199 border-bottom-width: 0;
203 -------------------------------------------------- */
205 /* Bar docked to top of viewport for showing page title and actions */
208 display: -webkit-box;
210 background-color: #1eb0e9;
211 background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%);
212 background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%);
213 border-bottom: 1px solid #0e5895;
214 box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
215 -webkit-box-orient: horizontal;
216 box-orient: horizontal;
219 /* Centered text in the .bar-title */
231 text-shadow: 0 -1px rgba(0, 0, 0, .5);
235 .bar-title > a:not([class*="button"]) {
241 /* Retain specified title color */
242 .bar-title .title a {
247 -------------------------------------------------- */
249 /* Bar docked to bottom used for primary app navigation */
254 background-color: #393939;
255 background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
256 background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%);
257 border-top: 1px solid #000;
258 border-bottom-width: 0;
259 box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
262 /* Wrapper for individual tab */
264 display: -webkit-box;
268 -webkit-box-orient: horizontal;
269 box-orient: horizontal;
272 /* Navigational tab */
277 box-sizing: border-box;
282 /* Active state for tab */
284 box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
300 text-shadow: 0 1px rgba(0, 0, 0, .3);
303 /* Buttons in title bars
304 -------------------------------------------------- */
306 /* Generic style for all buttons in .bar-title */
307 .bar-title [class*="button"] {
309 z-index: 10; /* Places buttons over full width title */
313 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
314 background-color: #1eb0e9;
315 background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
316 background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
317 border: 1px solid #0e5895;
318 box-shadow: 0 1px rgba(255, 255, 255, .25);
324 /* Hacky way to right align buttons outside of flex-box system
325 Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
326 .bar-title .title + [class*="button"]:last-child,
327 .bar-title .button + [class*="button"]:last-child,
328 .bar-title [class*="button"].pull-right {
334 /* Override standard button active states */
335 .bar-title .button:active {
337 background-color: #0876b1;
340 /* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/)
341 -------------------------------------------------- */
343 /* Add relative positioning so :before content is positioned properly */
344 .bar-title .button-prev,
345 .bar-title .button-next {
349 /* Prev/next button base styles */
350 .bar-title .button-prev {
351 margin-left: 7px; /* Push over to make room for :before content */
353 border-bottom-left-radius: 10px 15px;
354 border-top-left-radius: 10px 15px;
356 .bar-title .button-next {
357 margin-right: 7px; /* Push over to make room for :before content */
359 border-top-right-radius: 10px 15px;
360 border-bottom-right-radius: 10px 15px;
363 /* Pointed part of directional button */
364 .bar-title .button-prev:before,
365 .bar-title .button-next:before {
370 border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px;
372 box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895;
373 -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
374 mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
376 .bar-title .button-prev:before {
378 background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
379 background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
380 border-left: 1.5px solid rgba(255, 255, 255, .25);
381 -webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
382 transform: rotate(-45deg) skew(-10deg, -10deg);
384 .bar-title .button-next:before {
386 background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
387 background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
388 border-top: 1.5px solid rgba(255, 255, 255, .25);
389 -webkit-transform: rotate(135deg) skew(-10deg, -10deg);
390 transform: rotate(135deg) skew(-10deg, -10deg);
393 /* Active states for the directional buttons */
394 .bar-title .button-prev:active,
395 .bar-title .button-next:active,
396 .bar-title .button-prev:active:before,
397 .bar-title .button-next:active:before {
399 background-color: #0876b1;
400 background-image: none;
402 .bar-title .button-prev:active:before,
403 .bar-title .button-next:active:before {
406 .bar-title .button-prev:active:before {
407 box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
409 .bar-title .button-next:active:before {
410 box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
413 /* Block buttons in any bar
414 -------------------------------------------------- */
416 /* Add proper padding and replace buttons normal dropshadow with a shine from bar */
417 [class*="bar"] .button-block {
420 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8);
423 /* Override standard padding changes for .button-blocks */
424 [class*="bar"] .button-block:active {
428 /* Segmented controller in any bar
429 -------------------------------------------------- */
431 /* Remove standard segmented bottom margin */
432 [class*="bar-"] .segmented-controller {
436 /* Add margins between segmented controllers and buttons */
437 [class*="bar-"] .segmented-controller + [class*="button"],
438 [class*="bar-"] [class*="button"] + .segmented-controller {
442 /* Segmented controller in a title bar
443 -------------------------------------------------- */
445 .bar-title .segmented-controller {
447 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
448 background-color: #1eb0e9;
449 background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
450 background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
451 border: 1px solid #0e5895;
453 box-shadow: 0 1px rgba(255, 255, 255, .25);
458 /* Set color for tab border and highlight */
459 .bar-title .segmented-controller li {
460 border-left: 1px solid #0e5895;
461 box-shadow: inset 1px 0 rgba(255, 255, 255, .25);
464 /* Remove inset shadow from first tab or one to the right of the active tab */
465 .bar-title .segmented-controller .active + li,
466 .bar-title .segmented-controller li:first-child {
470 /* Remove left-hand border from first tab */
471 .bar-title .segmented-controller li:first-child {
472 border-left-width: 0;
475 /* Depressed state (active) */
476 .bar-title .segmented-controller li.active {
477 background-color: #0082c4;
478 box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
481 /* Set color of links to white */
482 .bar-title .segmented-controller li > a {
487 /* Search forms in standard bar
488 -------------------------------------------------- */
490 /* Position/size search bar within the bar */
491 .bar-standard input[type=search] {
495 -------------------------------------------------- */
497 /* Remove usual bullet styles from list */
501 background-color: #fff;
504 /* Pad each list item and add dividers */
507 padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
508 border-bottom: 1px solid rgba(0, 0, 0, .1);
511 /* Give top border to first list items */
512 .list li:first-child {
513 border-top: 1px solid rgba(0, 0, 0, .1);
516 /* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
517 .list li > a:not([class*="button"]) {
521 margin: -20px -60px -20px -10px;
526 -------------------------------------------------- */
532 border: 1px solid rgba(0, 0, 0, .1);
534 box-sizing: border-box;
537 /* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
538 .list.inset li:first-child {
541 .list.inset li:last-child {
542 border-bottom-width: 0;
546 -------------------------------------------------- */
548 .list .list-divider {
556 text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
557 background-color: #f8f8f8;
558 background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%);
559 background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%);
560 border-top: 1px solid rgba(0, 0, 0, .1);
561 border-bottom: 1px solid rgba(0, 0, 0, .1);
562 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
565 /* Rounding first divider on inset lists and remove border on the top */
566 .list.inset .list-divider:first-child {
569 border-radius: 6px 6px 0 0;
572 /* Rounding last divider on inset lists */
573 .list.inset .list-divider:last-child {
574 border-radius: 0 0 6px 6px;
577 /* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
578 -------------------------------------------------- */
580 .list [class*="button"],
581 .list [class*="count"],
588 /* Position chevrons/counts vertically centered on the right in list items */
590 .list [class*="count"] {
591 margin-top: -10px; /* Half height of chevron */
594 /* Push count over if there's a sibling chevron */
595 .list .chevron + [class*="count"] {
599 /* Position buttons vertically centered on the right in list items */
600 .list [class*="button"] {
602 margin-top: -14px; /* Half height of button */
606 margin-top: -15px; /* Half height of toggle */
610 -------------------------------------------------- */
612 /* Force form elements to inherit font styles */
617 font-family: inherit;
621 /* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
626 input[type="password"],
627 input[type="datetime"],
628 input[type="datetime-local"],
633 input[type="number"],
644 border: 1px solid rgba(0, 0, 0, .2);
646 box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
647 -webkit-appearance: none;
648 box-sizing: border-box;
651 /* Fully round search input */
658 /* Allow text area's height to grow larger than a normal input */
663 /* Style select button to look like part of the Ratchet's style */
667 background-color: #f8f8f8;
668 background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
669 background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
670 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
674 /* Input groups (cluster multiple inputs together into a single group)
675 -------------------------------------------------- */
677 /* Reset from initial form setup styles */
684 /* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
687 background-color: transparent;
689 border-bottom: 1px solid rgba(0, 0, 0, .2);
694 /* Remove bottom border on last input to avoid double bottom border */
695 .input-group input:last-child {
696 border-bottom-width: 0;
699 /* Input groups with labels
700 -------------------------------------------------- */
702 /* To use labels with input groups, wrap a label and an input in an .input-row */
705 border-bottom: 1px solid rgba(0, 0, 0, .2);
708 /* Remove bottom border on last input-row to avoid double bottom border */
709 .input-row:last-child {
710 border-bottom-width: 0;
713 /* Labels get floated left with a set percentage width */
717 padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
721 /* Actual inputs float to right of labels and also have a set percentage */
722 .input-row label + input {
730 /* General button styles
731 -------------------------------------------------- */
735 display: inline-block;
742 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
745 background-color: #f8f8f8;
746 background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
747 background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
748 border: 1px solid rgba(0, 0, 0, .3);
750 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05);
754 [class*="button"]:active {
758 background-color: #ccc;
759 background-image: none;
760 box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
764 -------------------------------------------------- */
766 /* Overriding styles for buttons with modifiers */
771 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
776 background-color: #1eafe7;
777 background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
778 background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
779 border: 1px solid #117aaa;
782 /* Positive button */
784 background-color: #34ba15;
785 background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
786 background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
787 border: 1px solid #278f0f;
790 /* Negative button */
792 background-color: #e71e1e;
793 background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
794 background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
795 border: 1px solid #b51a1a;
798 /* Active state for buttons with modifiers */
800 .button-positive:active,
801 .button-negative:active {
804 .button-main:active {
805 background-color: #0876b1;
807 .button-positive:active {
808 background-color: #298f11;
810 .button-negative:active {
811 background-color: #b21a1a;
814 /* Block level buttons (full width buttons) */
817 padding: 11px 0 13px;
822 /* Active state for block level buttons */
823 .button-block:active {
828 -------------------------------------------------- */
830 /* Generic styles for all counts within buttons */
831 [class*="button"] [class*="count"] {
837 background-color: rgba(0, 0, 0, .2);
838 box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff;
841 /* Position counts within block level buttons
842 Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
843 stays at true center of button */
844 .button-block [class*="count"] {
853 -------------------------------------------------- */
860 /* Base styles for both 1/2's of the chevron */
867 background-color: #999;
871 /* Position and rotate respective 1/2's of the chevron */
874 -webkit-transform: rotate(45deg);
875 transform: rotate(45deg);
879 -webkit-transform: rotate(-45deg);
880 transform: rotate(-45deg);
883 /* General count styles
884 -------------------------------------------------- */
887 display: inline-block;
893 background-color: rgba(0, 0, 0, .3);
894 border-radius: 100px;
898 -------------------------------------------------- */
900 /* Overriding styles for counts with modifiers */
905 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
910 background-color: #1eafe7;
911 background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
912 background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
917 background-color: #34ba15;
918 background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
919 background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
924 background-color: #e71e1e;
925 background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
926 background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
929 /* Segmented controllers
930 -------------------------------------------------- */
932 .segmented-controller {
933 display: -webkit-box;
939 text-shadow: 0 1px rgba(255, 255, 255, .5);
941 background-color: #f8f8f8;
942 background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
943 background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
944 border: 1px solid #aaa;
946 box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8);
947 -webkit-box-orient: horizontal;
948 box-orient: horizontal;
951 /* Section within controller */
952 .segmented-controller li {
956 border-left: 1px solid #aaa;
957 box-shadow: inset 1px 0 rgba(255, 255, 255, .5);
962 /* Link that fills each section */
963 .segmented-controller li > a {
969 text-overflow: ellipsis;
972 /* Remove border-left and shadow from first section */
973 .segmented-controller li:first-child {
974 border-left-width: 0;
978 /* Active segment of controller */
979 .segmented-controller li.active {
980 background-color: #ccc;
981 box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
984 .segmented-controller-item {
988 .segmented-controller-item.active {
992 /* Popovers (to be used with popovers.js)
993 -------------------------------------------------- */
1003 margin-left: -146px;
1004 background-color: #555;
1005 background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%);
1006 background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%);
1007 border: 1px solid #111;
1010 box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3);
1011 -webkit-transform: translate3d(0, -15px, 0);
1012 transform: translate3d(0, -15px, 0);
1013 -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
1014 transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
1017 /* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
1029 border-right: 21px solid transparent;
1030 border-bottom: 21px solid #111;
1031 border-left: 21px solid transparent;
1036 border-right: 20px solid transparent;
1037 border-bottom: 20px solid #555;
1038 border-left: 20px solid transparent;
1041 /* Wrapper for a title and buttons */
1043 display: -webkit-box;
1049 /* Centered title for popover */
1050 .popover-header .title {
1061 text-shadow: 0 -1px rgba(0, 0, 0, .5);
1064 /* Generic style for all buttons in .popover-header */
1065 .popover-header [class*="button"] {
1070 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
1071 background-color: #454545;
1072 background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
1073 background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
1074 border: 1px solid #111;
1075 -webkit-box-flex: 0;
1079 /* Hacky way to right align buttons outside of flex-box system
1080 Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
1081 .popover-header .title + [class*="button"]:last-child,
1082 .popover-header .button + [class*="button"]:last-child,
1083 .popover-header [class*="button"].pull-right {
1089 /* Active state for popover header buttons */
1090 .popover-header .button:active {
1092 background-color: #0876b1;
1095 /* Popover animation
1096 -------------------------------------------------- */
1100 -webkit-transform: translate3d(0, 0, 0);
1101 transform: translate3d(0, 0, 0);
1104 /* Backdrop (used as invisible touch escape)
1105 -------------------------------------------------- */
1116 /* Block level buttons in popovers
1117 -------------------------------------------------- */
1119 /* Positioning and giving darker border to look sharp against dark popover */
1120 .popover .button-block {
1122 border: 1px solid #111;
1125 /* Remove extra margin on bottom of last button */
1126 .popover .button-block:last-child {
1130 /* Lists in popovers
1131 -------------------------------------------------- */
1140 background-color: #fff;
1141 border: 1px solid #000;
1143 -webkit-overflow-scrolling: touch;
1146 /* Slider styles (to be used with sliders.js)
1147 -------------------------------------------------- */
1149 /* Width/height of slider */
1156 /* Outer wrapper for slider */
1159 background-color: #000;
1162 /* Inner wrapper for slider (width of all slides together) */
1165 font-size: 0; /* Remove spaces from inline-block children */
1166 white-space: nowrap;
1167 -webkit-transition: all 0 linear;
1168 transition: all 0 linear;
1171 /* Individual slide */
1173 display: inline-block;
1174 vertical-align: top; /* Ensure that li always aligns to top */
1179 /* Required reset of font-size to same as standard body */
1180 .slider > ul > li > * {
1184 /* Toggle styles (to be used with toggles.js)
1185 -------------------------------------------------- */
1191 background-color: #eee;
1192 border: 1px solid #bbb;
1193 border-radius: 20px;
1194 box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
1197 /* Text indicating "on" or "off". Default is "off" */
1204 text-shadow: 0 1px #fff;
1205 text-transform: uppercase;
1209 /* Sliding handle */
1217 background-color: #fff;
1218 background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
1219 background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
1220 border: 1px solid rgba(0, 0, 0, .2);
1221 border-radius: 100px;
1222 -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
1223 transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
1226 /* Active state for toggle */
1228 background-color: #19a8e4;
1229 background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%);
1230 background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%);
1231 border: 1px solid #096c9d;
1232 box-shadow: inset 0 0 15px rgba(255, 255, 255, .25);
1235 /* Active state for toggle handle */
1236 .toggle.active .toggle-handle {
1237 border-color: #0a76ad;
1238 -webkit-transform: translate3d(48px,0,0);
1239 transform: translate3d(48px,0,0);
1242 /* Change "off" to "on" for active state */
1243 .toggle.active:before {
1247 text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
1251 /* Push styles (to be used with push.js)
1252 -------------------------------------------------- */
1254 /* Fade animation */
1258 -webkit-transition: opacity .2s ease-in-out;
1259 transition: opacity .2s ease-in-out;
1265 /* Slide animation */
1267 -webkit-transform: translate3d(0, 0, 0);
1268 transform: translate3d(0, 0, 0);
1269 -webkit-transition: -webkit-transform .25s ease-in-out;
1270 transition: transform .25s ease-in-out;
1272 .content.slide.left {
1273 -webkit-transform: translate3d(-100%, 0, 0);
1274 transform: translate3d(-100%, 0, 0);
1276 .content.slide.right {
1277 -webkit-transform: translate3d(100%, 0, 0);
1278 transform: translate3d(100%, 0, 0);