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 {
161 }/* General bar styles
162 -------------------------------------------------- */
171 box-sizing: border-box;
174 /* Modifier class to dock any bar below .bar-title */
175 .bar-header-secondary {
179 /* Modifier class to dock any bar to bottom of viewport */
184 /* Generic bar for wrapping buttons, segmented controllers, etc. */
186 background-color: #f2f2f2;
187 background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%);
188 background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%);
189 border-bottom: 1px solid #aaa;
190 box-shadow: inset 0 1px 1px -1px #fff;
193 /* Flip border position to top for footer bars */
194 .bar-footer.bar-standard,
195 .bar-footer-secondary.bar-standard {
196 border-top: 1px solid #aaa;
197 border-bottom-width: 0;
201 -------------------------------------------------- */
203 /* Bar docked to top of viewport for showing page title and actions */
206 display: -webkit-box;
208 background-color: #1eb0e9;
209 background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%);
210 background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%);
211 border-bottom: 1px solid #0e5895;
212 box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
213 -webkit-box-orient: horizontal;
214 box-orient: horizontal;
217 /* Centered text in the .bar-title */
229 text-shadow: 0 -1px rgba(0, 0, 0, .5);
233 .bar-title > a:not([class*="button"]) {
239 /* Retain specified title color */
240 .bar-title .title a {
245 -------------------------------------------------- */
247 /* Bar docked to bottom used for primary app navigation */
252 background-color: #393939;
253 background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
254 background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%);
255 border-top: 1px solid #000;
256 border-bottom-width: 0;
257 box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
260 /* Wrapper for individual tab */
262 display: -webkit-box;
266 -webkit-box-orient: horizontal;
267 box-orient: horizontal;
270 /* Navigational tab */
275 box-sizing: border-box;
280 /* Active state for tab */
282 box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
298 text-shadow: 0 1px rgba(0, 0, 0, .3);
301 /* Buttons in title bars
302 -------------------------------------------------- */
304 /* Generic style for all buttons in .bar-title */
305 .bar-title [class*="button"] {
307 z-index: 10; /* Places buttons over full width title */
311 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
312 background-color: #1eb0e9;
313 background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
314 background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
315 border: 1px solid #0e5895;
316 box-shadow: 0 1px rgba(255, 255, 255, .25);
322 /* Hacky way to right align buttons outside of flex-box system
323 Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
324 .bar-title .title + [class*="button"]:last-child,
325 .bar-title .button + [class*="button"]:last-child,
326 .bar-title [class*="button"].pull-right {
332 /* Override standard button active states */
333 .bar-title .button:active {
335 background-color: #0876b1;
338 /* 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/)
339 -------------------------------------------------- */
341 /* Add relative positioning so :before content is positioned properly */
342 .bar-title .button-prev,
343 .bar-title .button-next {
347 /* Prev/next button base styles */
348 .bar-title .button-prev {
349 margin-left: 7px; /* Push over to make room for :before content */
351 border-bottom-left-radius: 10px 15px;
352 border-top-left-radius: 10px 15px;
354 .bar-title .button-next {
355 margin-right: 7px; /* Push over to make room for :before content */
357 border-top-right-radius: 10px 15px;
358 border-bottom-right-radius: 10px 15px;
361 /* Pointed part of directional button */
362 .bar-title .button-prev:before,
363 .bar-title .button-next:before {
368 border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px;
370 box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895;
371 -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
372 mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
374 .bar-title .button-prev:before {
376 background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
377 background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
378 border-left: 1.5px solid rgba(255, 255, 255, .25);
379 -webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
380 transform: rotate(-45deg) skew(-10deg, -10deg);
382 .bar-title .button-next:before {
384 background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
385 background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
386 border-top: 1.5px solid rgba(255, 255, 255, .25);
387 -webkit-transform: rotate(135deg) skew(-10deg, -10deg);
388 transform: rotate(135deg) skew(-10deg, -10deg);
391 /* Active states for the directional buttons */
392 .bar-title .button-prev:active,
393 .bar-title .button-next:active,
394 .bar-title .button-prev:active:before,
395 .bar-title .button-next:active:before {
397 background-color: #0876b1;
398 background-image: none;
400 .bar-title .button-prev:active:before,
401 .bar-title .button-next:active:before {
404 .bar-title .button-prev:active:before {
405 box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
407 .bar-title .button-next:active:before {
408 box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
411 /* Block buttons in any bar
412 -------------------------------------------------- */
414 /* Add proper padding and replace buttons normal dropshadow with a shine from bar */
415 [class*="bar"] .button-block {
418 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8);
421 /* Override standard padding changes for .button-blocks */
422 [class*="bar"] .button-block:active {
426 /* Segmented controller in any bar
427 -------------------------------------------------- */
429 /* Remove standard segmented bottom margin */
430 [class*="bar-"] .segmented-controller {
434 /* Add margins between segmented controllers and buttons */
435 [class*="bar-"] .segmented-controller + [class*="button"],
436 [class*="bar-"] [class*="button"] + .segmented-controller {
440 /* Segmented controller in a title bar
441 -------------------------------------------------- */
443 .bar-title .segmented-controller {
445 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
446 background-color: #1eb0e9;
447 background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%);
448 background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
449 border: 1px solid #0e5895;
451 box-shadow: 0 1px rgba(255, 255, 255, .25);
456 /* Set color for tab border and highlight */
457 .bar-title .segmented-controller li {
458 border-left: 1px solid #0e5895;
459 box-shadow: inset 1px 0 rgba(255, 255, 255, .25);
462 /* Remove inset shadow from first tab or one to the right of the active tab */
463 .bar-title .segmented-controller .active + li,
464 .bar-title .segmented-controller li:first-child {
468 /* Remove left-hand border from first tab */
469 .bar-title .segmented-controller li:first-child {
470 border-left-width: 0;
473 /* Depressed state (active) */
474 .bar-title .segmented-controller li.active {
475 background-color: #0082c4;
476 box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3);
479 /* Set color of links to white */
480 .bar-title .segmented-controller li > a {
485 /* Search forms in standard bar
486 -------------------------------------------------- */
488 /* Position/size search bar within the bar */
489 .bar-standard input[type=search] {
493 -------------------------------------------------- */
495 /* Remove usual bullet styles from list */
499 background-color: #fff;
502 /* Pad each list item and add dividers */
505 padding: 20px 60px 20px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */
506 border-bottom: 1px solid rgba(0, 0, 0, .1);
509 /* Give top border to first list items */
510 .list li:first-child {
511 border-top: 1px solid rgba(0, 0, 0, .1);
514 /* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
515 .list li > a:not([class*="button"]) {
519 margin: -20px -60px -20px -10px;
524 -------------------------------------------------- */
530 border: 1px solid rgba(0, 0, 0, .1);
532 box-sizing: border-box;
535 /* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
536 .list.inset li:first-child {
539 .list.inset li:last-child {
540 border-bottom-width: 0;
545 -------------------------------------------------- */
547 .list .list-divider {
555 text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
556 background-color: #f8f8f8;
557 background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%);
558 background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%);
559 border-top: 1px solid rgba(0, 0, 0, .1);
560 border-bottom: 1px solid rgba(0, 0, 0, .1);
561 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
564 /* Rounding first divider on inset lists and remove border on the top */
565 .list.inset .list-divider:first-child {
568 border-radius: 6px 6px 0 0;
571 /* Rounding last divider on inset lists */
572 .list.inset .list-divider:last-child {
573 border-radius: 0 0 6px 6px;
576 /* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles)
577 -------------------------------------------------- */
579 .list [class*="button"],
580 .list [class*="count"],
587 /* Position chevrons/counts vertically centered on the right in list items */
589 .list [class*="count"] {
590 margin-top: -10px; /* Half height of chevron */
593 /* Push count over if there's a sibling chevron */
594 .list .chevron + [class*="count"] {
598 /* Position buttons vertically centered on the right in list items */
599 .list [class*="button"] {
601 margin-top: -14px; /* Half height of button */
605 margin-top: -15px; /* Half height of toggle */
607 -------------------------------------------------- */
609 /* Force form elements to inherit font styles */
614 font-family: inherit;
618 /* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
623 input[type="password"],
624 input[type="datetime"],
625 input[type="datetime-local"],
630 input[type="number"],
641 border: 1px solid rgba(0, 0, 0, .2);
643 box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
644 -webkit-appearance: none;
645 box-sizing: border-box;
648 /* Fully round search input */
655 /* Allow text area's height to grow larger than a normal input */
660 /* Style select button to look like part of the Ratchet's style */
664 background-color: #f8f8f8;
665 background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
666 background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
667 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
671 /* Input groups (cluster multiple inputs together into a single group)
672 -------------------------------------------------- */
674 /* Reset from initial form setup styles */
681 /* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
684 background-color: transparent;
686 border-bottom: 1px solid rgba(0, 0, 0, .2);
691 /* Remove bottom border on last input to avoid double bottom border */
692 .input-group input:last-child {
693 border-bottom-width: 0;
696 /* Input groups with labels
697 -------------------------------------------------- */
699 /* To use labels with input groups, wrap a label and an input in an .input-row */
702 border-bottom: 1px solid rgba(0, 0, 0, .2);
705 /* Remove bottom border on last input-row to avoid double bottom border */
706 .input-row:last-child {
707 border-bottom-width: 0;
710 /* Labels get floated left with a set percentage width */
714 padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
718 /* Actual inputs float to right of labels and also have a set percentage */
719 .input-row label + input {
725 }/* General button styles
726 -------------------------------------------------- */
730 display: inline-block;
737 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
740 background-color: #f8f8f8;
741 background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
742 background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
743 border: 1px solid rgba(0, 0, 0, .3);
745 box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05);
749 [class*="button"]:active {
753 background-color: #ccc;
754 background-image: none;
755 box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
759 -------------------------------------------------- */
761 /* Overriding styles for buttons with modifiers */
766 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
771 background-color: #1eafe7;
772 background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
773 background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
774 border: 1px solid #117aaa;
777 /* Positive button */
779 background-color: #34ba15;
780 background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
781 background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
782 border: 1px solid #278f0f;
785 /* Negative button */
787 background-color: #e71e1e;
788 background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
789 background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
790 border: 1px solid #b51a1a;
793 /* Active state for buttons with modifiers */
795 .button-positive:active,
796 .button-negative:active {
799 .button-main:active {
800 background-color: #0876b1;
802 .button-positive:active {
803 background-color: #298f11;
805 .button-negative:active {
806 background-color: #b21a1a;
809 /* Block level buttons (full width buttons) */
812 padding: 11px 0 13px;
817 /* Active state for block level buttons */
818 .button-block:active {
823 -------------------------------------------------- */
825 /* Generic styles for all counts within buttons */
826 [class*="button"] [class*="count"] {
832 background-color: rgba(0, 0, 0, .2);
833 box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff;
836 /* Position counts within block level buttons
837 Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
838 stays at true center of button */
839 .button-block [class*="count"] {
846 -------------------------------------------------- */
853 /* Base styles for both 1/2's of the chevron */
860 background-color: #999;
864 /* Position and rotate respective 1/2's of the chevron */
867 -webkit-transform: rotate(45deg);
868 transform: rotate(45deg);
872 -webkit-transform: rotate(-45deg);
873 transform: rotate(-45deg);
874 }/* General count styles
875 -------------------------------------------------- */
878 display: inline-block;
884 background-color: rgba(0, 0, 0, .3);
885 border-radius: 100px;
889 -------------------------------------------------- */
891 /* Overriding styles for counts with modifiers */
896 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
901 background-color: #1eafe7;
902 background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%);
903 background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%);
908 background-color: #34ba15;
909 background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%);
910 background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%);
915 background-color: #e71e1e;
916 background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%);
917 background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
918 }/* Segmented controllers
919 -------------------------------------------------- */
921 .segmented-controller {
922 display: -webkit-box;
928 text-shadow: 0 1px rgba(255, 255, 255, .5);
930 background-color: #f8f8f8;
931 background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%);
932 background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%);
933 border: 1px solid #aaa;
935 box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8);
936 -webkit-box-orient: horizontal;
937 box-orient: horizontal;
940 /* Section within controller */
941 .segmented-controller li {
945 border-left: 1px solid #aaa;
946 box-shadow: inset 1px 0 rgba(255, 255, 255, .5);
951 /* Link that fills each section */
952 .segmented-controller li > a {
958 text-overflow: ellipsis;
961 /* Remove border-left and shadow from first section */
962 .segmented-controller li:first-child {
963 border-left-width: 0;
967 /* Active segment of controller */
968 .segmented-controller li.active {
969 background-color: #ccc;
970 box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3);
973 .segmented-controller-item {
977 .segmented-controller-item.active {
979 }/* Popovers (to be used with popovers.js)
980 -------------------------------------------------- */
991 background-color: #555;
992 background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%);
993 background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%);
994 border: 1px solid #111;
997 box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3);
998 -webkit-transform: translate3d(0, -15px, 0);
999 transform: translate3d(0, -15px, 0);
1000 -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
1001 transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
1004 /* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
1016 border-right: 21px solid transparent;
1017 border-bottom: 21px solid #111;
1018 border-left: 21px solid transparent;
1023 border-right: 20px solid transparent;
1024 border-bottom: 20px solid #555;
1025 border-left: 20px solid transparent;
1028 /* Wrapper for a title and buttons */
1030 display: -webkit-box;
1036 /* Centered title for popover */
1037 .popover-header .title {
1048 text-shadow: 0 -1px rgba(0, 0, 0, .5);
1051 /* Generic style for all buttons in .popover-header */
1052 .popover-header [class*="button"] {
1057 text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
1058 background-color: #454545;
1059 background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%);
1060 background-image: linear-gradient(to bottom, #454545 0, #353535 100%);
1061 border: 1px solid #111;
1062 -webkit-box-flex: 0;
1066 /* Hacky way to right align buttons outside of flex-box system
1067 Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
1068 .popover-header .title + [class*="button"]:last-child,
1069 .popover-header .button + [class*="button"]:last-child,
1070 .popover-header [class*="button"].pull-right {
1076 /* Active state for popover header buttons */
1077 .popover-header .button:active {
1079 background-color: #0876b1;
1082 /* Popover animation
1083 -------------------------------------------------- */
1087 -webkit-transform: translate3d(0, 0, 0);
1088 transform: translate3d(0, 0, 0);
1091 /* Backdrop (used as invisible touch escape)
1092 -------------------------------------------------- */
1103 /* Block level buttons in popovers
1104 -------------------------------------------------- */
1106 /* Positioning and giving darker border to look sharp against dark popover */
1107 .popover .button-block {
1109 border: 1px solid #111;
1112 /* Remove extra margin on bottom of last button */
1113 .popover .button-block:last-child {
1117 /* Lists in popovers
1118 -------------------------------------------------- */
1127 background-color: #fff;
1128 border: 1px solid #000;
1130 -webkit-overflow-scrolling: touch;
1131 }/* Slider styles (to be used with sliders.js)
1132 -------------------------------------------------- */
1134 /* Width/height of slider */
1141 /* Outer wrapper for slider */
1144 background-color: #000;
1147 /* Inner wrapper for slider (width of all slides together) */
1150 font-size: 0; /* Remove spaces from inline-block children */
1151 white-space: nowrap;
1152 -webkit-transition: all 0 linear;
1153 transition: all 0 linear;
1156 /* Individual slide */
1158 display: inline-block;
1159 vertical-align: top; /* Ensure that li always aligns to top */
1164 /* Required reset of font-size to same as standard body */
1165 .slider > ul > li > * {
1167 }/* Toggle styles (to be used with toggles.js)
1168 -------------------------------------------------- */
1174 background-color: #eee;
1175 border: 1px solid #bbb;
1176 border-radius: 20px;
1177 box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
1180 /* Text indicating "on" or "off". Default is "off" */
1187 text-shadow: 0 1px #fff;
1188 text-transform: uppercase;
1192 /* Sliding handle */
1200 background-color: #fff;
1201 background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
1202 background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
1203 border: 1px solid rgba(0, 0, 0, .2);
1204 border-radius: 100px;
1205 -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
1206 transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
1209 /* Active state for toggle */
1211 background-color: #19a8e4;
1212 background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%);
1213 background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%);
1214 border: 1px solid #096c9d;
1215 box-shadow: inset 0 0 15px rgba(255, 255, 255, .25);
1218 /* Active state for toggle handle */
1219 .toggle.active .toggle-handle {
1220 border-color: #0a76ad;
1221 -webkit-transform: translate3d(48px,0,0);
1222 transform: translate3d(48px,0,0);
1225 /* Change "off" to "on" for active state */
1226 .toggle.active:before {
1230 text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
1232 }/* Push styles (to be used with push.js)
1233 -------------------------------------------------- */
1235 /* Fade animation */
1239 -webkit-transition: opacity .2s ease-in-out;
1240 transition: opacity .2s ease-in-out;
1246 /* Slide animation */
1248 -webkit-transform: translate3d(0, 0, 0);
1249 transform: translate3d(0, 0, 0);
1250 -webkit-transition: -webkit-transform .25s ease-in-out;
1251 transition: transform .25s ease-in-out;
1253 .content.slide.left {
1254 -webkit-transform: translate3d(-100%, 0, 0);
1255 transform: translate3d(-100%, 0, 0);
1257 .content.slide.right {
1258 -webkit-transform: translate3d(100%, 0, 0);
1259 transform: translate3d(100%, 0, 0);