diff options
Diffstat (limited to 'dist/ratchet.css')
| -rw-r--r-- | dist/ratchet.css | 2008 |
1 files changed, 1065 insertions, 943 deletions
diff --git a/dist/ratchet.css b/dist/ratchet.css index 93421b8..b83e3bc 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1,104 +1,238 @@ -/** - * ================================== - * Ratchet v1.0.2 - * Licensed under The MIT License - * http://opensource.org/licenses/MIT - * ================================== +/* + * ===================================================== + * Ratchet v2.0.0 + * Copyright 2014 Connor Sears + * Licensed under http://www.opensource.org/licenses/MIT + * + * V2.0.0 designed by @connors. + * ===================================================== */ -/* Hard reset --------------------------------------------------- */ - -html, -body, -div, -span, -iframe, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, +/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + article, aside, -canvas, details, -embed, -figure, figcaption, +figure, footer, header, hgroup, -menu, +main, nav, -output, section, -summary, -time, +summary { + display: block; +} + audio, +canvas, +progress, video { - padding: 0; + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +a { + background: transparent; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 1em 40px; +} + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; margin: 0; +} + +button { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { border: 0; + padding: 0; } -/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ -html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; +input { + line-height: normal; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; +} + +optgroup { + font-weight: bold; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; } -/* Base styles --------------------------------------------------- */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} body { position: fixed; @@ -106,19 +240,22 @@ body { right: 0; bottom: 0; left: 0; - font: 14px/1.25 "Helvetica Neue", sans-serif; - color: #222; + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 17px; + line-height: 21px; + color: #000; background-color: #fff; } -/* Universal link styling */ a { - color: #0882f0; + color: #428bca; text-decoration: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +a:active { + color: #3071a9; } -/* Wrapper to be used around all content not in .bar-title and .bar-tab */ .content { position: fixed; top: 0; @@ -127,499 +264,558 @@ a { left: 0; overflow: auto; background-color: #fff; - -webkit-transition-property: top, bottom; - transition-property: top, bottom; - -webkit-transition-duration: .2s, .2s; - transition-duration: .2s, .2s; - -webkit-transition-timing-function: linear, linear; - transition-timing-function: linear, linear; -webkit-overflow-scrolling: touch; } -/* Hack to force all relatively and absolutely positioned elements still render while scrolling - Note: This is a bug for "-webkit-overflow-scrolling: touch" */ .content > * { - -webkit-transform: translateZ(0px); - transform: translateZ(0px); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); } -/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ -.content-padded { - padding: 10px; +.bar-nav ~ .content { + padding-top: 44px; } -/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. - Note: For these to work, content must come after both bars in the markup */ -.bar-title ~ .content { - top: 44px; -} -.bar-tab ~ .content { - bottom: 51px; -} .bar-header-secondary ~ .content { - top: 88px; -}/* General bar styles --------------------------------------------------- */ + padding-top: 88px; +} -[class*="bar-"] { - position: fixed; - right: 0; - left: 0; - z-index: 10; - height: 44px; - padding: 5px; - box-sizing: border-box; +.bar-footer ~ .content { + padding-bottom: 44px; } -/* Modifier class to dock any bar below .bar-title */ -.bar-header-secondary { - top: 45px; +.bar-footer-secondary ~ .content { + padding-bottom: 88px; } -/* Modifier class to dock any bar to bottom of viewport */ -.bar-footer { - bottom: 0; +.bar-tab ~ .content { + padding-bottom: 50px; } -/* Generic bar for wrapping buttons, segmented controllers, etc. */ -.bar-standard { - background-color: #f2f2f2; - background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%); - background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%); - border-bottom: 1px solid #aaa; - box-shadow: inset 0 1px 1px -1px #fff; +.bar-footer-secondary-tab ~ .content { + padding-bottom: 94px; } -/* Flip border position to top for footer bars */ -.bar-footer.bar-standard, -.bar-footer-secondary.bar-standard { - border-top: 1px solid #aaa; - border-bottom-width: 0; +.content-padded { + margin: 10px; } -/* Title bar --------------------------------------------------- */ +.pull-left { + float: left; +} -/* Bar docked to top of viewport for showing page title and actions */ -.bar-title { - top: 0; - display: -webkit-box; - display: box; - background-color: #1eb0e9; - background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%); - background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%); - border-bottom: 1px solid #0e5895; - box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8); - -webkit-box-orient: horizontal; - box-orient: horizontal; -} - -/* Centered text in the .bar-title */ -.bar-title .title { - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - font-size: 20px; - font-weight: bold; - line-height: 44px; - color: #fff; - text-align: center; - text-shadow: 0 -1px rgba(0, 0, 0, .5); - white-space: nowrap; +.pull-right { + float: right; } -.bar-title > a:not([class*="button"]) { - display: block; - width: 100%; - height: 100%; +.clearfix:before, .clearfix:after { + content: " "; + display: table; +} +.clearfix:after { + clear: both; } -/* Retain specified title color */ -.bar-title .title a { - color: inherit; +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 10px; + line-height: 1; } -/* Tab bar --------------------------------------------------- */ +h1, .h1 { + font-size: 36px; +} -/* Bar docked to bottom used for primary app navigation */ -.bar-tab { - bottom: 0; - height: 50px; - padding: 0; - background-color: #393939; - background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%); - background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%); - border-top: 1px solid #000; - border-bottom-width: 0; - box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6); -} - -/* Wrapper for individual tab */ -.tab-inner { - display: -webkit-box; - display: box; - height: 100%; - list-style: none; - -webkit-box-orient: horizontal; - box-orient: horizontal; +h2, .h2 { + font-size: 30px; } -/* Navigational tab */ -.tab-item { - height: 100%; - padding-top: 9px; - text-align: center; - box-sizing: border-box; - -webkit-box-flex: 1; - box-flex: 1; +h3, .h3 { + font-size: 24px; } -/* Active state for tab */ -.tab-item.active { - box-shadow: inset 0 0 20px rgba(0, 0, 0, .5); +h4, .h4 { + font-size: 18px; } -/* Icon for tab */ -.tab-icon { - display: block; - height: 18px; - margin: 0 auto; +h5, .h5 { + font-size: 14px; + margin-top: 20px; } -/* Label for tab */ -.tab-label { - margin-top: 1px; - font-size: 10px; - font-weight: bold; - color: #fff; - text-shadow: 0 1px rgba(0, 0, 0, .3); +h6, .h6 { + font-size: 12px; + margin-top: 20px; } -/* Buttons in title bars --------------------------------------------------- */ +p { + margin-top: 0; + margin-bottom: 10px; + font-size: 14px; + color: #777; +} -/* Generic style for all buttons in .bar-title */ -.bar-title [class*="button"] { +.btn { position: relative; - z-index: 10; /* Places buttons over full width title */ + display: inline-block; + padding: 6px 8px 7px; + margin-bottom: 0; font-size: 12px; - line-height: 23px; - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); - background-color: #1eb0e9; - background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); - background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); - border: 1px solid #0e5895; - box-shadow: 0 1px rgba(255, 255, 255, .25); - -webkit-box-flex: 0; - box-flex: 0; -} - - -/* Hacky way to right align buttons outside of flex-box system - Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ -.bar-title .title + [class*="button"]:last-child, -.bar-title .button + [class*="button"]:last-child, -.bar-title [class*="button"].pull-right { - position: absolute; - top: 5px; - right: 5px; + font-weight: 400; + line-height: 1; + color: #333; + text-align: center; + vertical-align: top; + cursor: pointer; + background-color: white; + border: 1px solid #ccc; + border-radius: 3px; +} +.btn:active, .btn.active { + color: inherit; + background-color: #ccc; +} +.btn:disabled, .btn.disabled { + opacity: .6; } -/* Override standard button active states */ -.bar-title .button:active { +.btn-primary { color: #fff; - background-color: #0876b1; + border: 1px solid #428bca; + background-color: #428bca; } - -/* 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/) --------------------------------------------------- */ - -/* Add relative positioning so :before content is positioned properly */ -.bar-title .button-prev, -.bar-title .button-next { - position: relative; +.btn-primary:active, .btn-primary.active { + color: #fff; + border: 1px solid #3071a9; + background-color: #3071a9; } -/* Prev/next button base styles */ -.bar-title .button-prev { - margin-left: 7px; /* Push over to make room for :before content */ - border-left: 0; - border-bottom-left-radius: 10px 15px; - border-top-left-radius: 10px 15px; +.btn-positive { + color: #fff; + border: 1px solid #5cb85c; + background-color: #5cb85c; } -.bar-title .button-next { - margin-right: 7px; /* Push over to make room for :before content */ - border-right: 0; - border-top-right-radius: 10px 15px; - border-bottom-right-radius: 10px 15px; +.btn-positive:active, .btn-positive.active { + color: #fff; + border: 1px solid #449d44; + background-color: #449d44; } -/* Pointed part of directional button */ -.bar-title .button-prev:before, -.bar-title .button-next:before { - position: absolute; - top: 2px; - width: 27px; - height: 27px; - border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px; - content: ''; - box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895; - -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); - mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); -} -.bar-title .button-prev:before { - left: -5px; - background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); - background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); - border-left: 1.5px solid rgba(255, 255, 255, .25); - -webkit-transform: rotate(-45deg) skew(-10deg, -10deg); - transform: rotate(-45deg) skew(-10deg, -10deg); -} -.bar-title .button-next:before { - right: -5px; - background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); - background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); - border-top: 1.5px solid rgba(255, 255, 255, .25); - -webkit-transform: rotate(135deg) skew(-10deg, -10deg); - transform: rotate(135deg) skew(-10deg, -10deg); -} - -/* Active states for the directional buttons */ -.bar-title .button-prev:active, -.bar-title .button-next:active, -.bar-title .button-prev:active:before, -.bar-title .button-next:active:before { +.btn-negative { color: #fff; - background-color: #0876b1; - background-image: none; + border: 1px solid #d9534f; + background-color: #d9534f; } -.bar-title .button-prev:active:before, -.bar-title .button-next:active:before { - content: ''; +.btn-negative:active, .btn-negative.active { + color: #fff; + border: 1px solid #c9302c; + background-color: #c9302c; +} + +.btn-outlined { + background-color: transparent; +} +.btn-outlined.btn-primary { + color: #428bca; } -.bar-title .button-prev:active:before { - box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2); +.btn-outlined.btn-positive { + color: #5cb85c; } -.bar-title .button-next:active:before { - box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2); +.btn-outlined.btn-negative { + color: #d9534f; +} +.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active { + color: #fff; } -/* Block buttons in any bar --------------------------------------------------- */ +.btn-link { + padding-top: 6px; + padding-bottom: 6px; + color: #428bca; + background-color: transparent; + border: 0; +} +.btn-link:active, .btn-link.active { + color: #3071a9; + background-color: transparent; +} -/* Add proper padding and replace buttons normal dropshadow with a shine from bar */ -[class*="bar"] .button-block { - padding: 7px 0; - margin-bottom: 0; - box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8); +.btn-block { + display: block; + padding: 15px 0; + margin-bottom: 10px; + font-size: 18px; } -/* Override standard padding changes for .button-blocks */ -[class*="bar"] .button-block:active { - padding: 7px 0; +input[type="submit"], +input[type="reset"], +input[type="button"] { + width: 100%; } -/* Segmented controller in any bar --------------------------------------------------- */ +.btn .badge { + font-size: 12px; + margin: -2px -4px -2px 4px; + background-color: rgba(0, 0, 0, 0.15); +} -/* Remove standard segmented bottom margin */ -[class*="bar-"] .segmented-controller { - margin-bottom: 0; +.btn .badge-inverted, +.btn:active .badge-inverted { + background-color: transparent; } -/* Add margins between segmented controllers and buttons */ -[class*="bar-"] .segmented-controller + [class*="button"], -[class*="bar-"] [class*="button"] + .segmented-controller { - margin-left: 5px; +.btn-primary:active .badge-inverted, +.btn-positive:active .badge-inverted, +.btn-negative:active .badge-inverted { + color: #fff; } -/* Segmented controller in a title bar --------------------------------------------------- */ +.btn-block .badge { + position: absolute; + right: 0; + margin-right: 10px; +} -.bar-title .segmented-controller { - line-height: 18px; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); - background-color: #1eb0e9; - background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); - background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); - border: 1px solid #0e5895; - border-radius: 3px; - box-shadow: 0 1px rgba(255, 255, 255, .25); - -webkit-box-flex: 1; - box-flex: 1; +.btn .icon { + font-size: inherit; } -/* Set color for tab border and highlight */ -.bar-title .segmented-controller li { - border-left: 1px solid #0e5895; - box-shadow: inset 1px 0 rgba(255, 255, 255, .25); +.bar { + position: fixed; + right: 0; + left: 0; + z-index: 10; + height: 44px; + padding-right: 10px; + padding-left: 10px; + border-bottom: 1px solid #dddddd; + background-color: white; } -/* Remove inset shadow from first tab or one to the right of the active tab */ -.bar-title .segmented-controller .active + li, -.bar-title .segmented-controller li:first-child { - box-shadow: none; +.bar-header-secondary { + top: 44px; } -/* Remove left-hand border from first tab */ -.bar-title .segmented-controller li:first-child { - border-left-width: 0; +.bar-footer { + bottom: 0; } -/* Depressed state (active) */ -.bar-title .segmented-controller li.active { - background-color: #0082c4; - box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3); +.bar-footer-secondary { + bottom: 44px; } -/* Set color of links to white */ -.bar-title .segmented-controller li > a { - color: #fff; +.bar-footer-secondary-tab { + bottom: 50px; } +.bar-footer, +.bar-footer-secondary, +.bar-footer-secondary-tab { + border-bottom: 0; + border-top: 1px solid #dddddd; +} -/* Search forms in standard bar --------------------------------------------------- */ +.bar-nav { + top: 0; +} -/* Position/size search bar within the bar */ -.bar-standard input[type=search] { - height: 32px; - margin: 0; -}/* Lists --------------------------------------------------- */ +.title { + position: absolute; + display: block; + width: 100%; + padding: 0; + margin: 0 -10px; + font-size: 17px; + font-weight: 500; + line-height: 44px; + color: #000; + text-align: center; + white-space: nowrap; +} -/* Remove usual bullet styles from list */ -.list { - margin-bottom: 10px; - list-style: none; - background-color: #fff; +.title a { + color: inherit; } -/* Pad each list item and add dividers */ -.list li { +.bar-tab { + display: table; + bottom: 0; + width: 100%; + height: 50px; + padding: 0; + border-top: 1px solid #dddddd; + border-bottom: 0; + table-layout: fixed; +} +.bar-tab .tab-item { + display: table-cell; + width: 1%; + height: 50px; + vertical-align: middle; + color: #929292; + text-align: center; +} +.bar-tab .tab-item.active, .bar-tab .tab-item:active { + color: #428bca; +} +.bar-tab .tab-item .icon { + top: 3px; + width: 24px; + height: 24px; + padding-top: 0; + padding-bottom: 0; +} +.bar-tab .tab-item .icon ~ .tab-label { + display: block; + font-size: 11px; +} + +.bar .btn { position: relative; - padding: 11px 60px 11px 10px; /* Given extra right padding to accomodate counts, chevrons or buttons */ - border-bottom: 1px solid rgba(0, 0, 0, .1); + top: 7px; + z-index: 20; + padding: 6px 12px 7px; + margin-top: 0; + font-weight: 400; +} +.bar .btn.pull-right { + margin-left: 10px; +} +.bar .btn.pull-left { + margin-right: 10px; } -/* Give top border to first list items */ -.list li:first-child { - border-top: 1px solid rgba(0, 0, 0, .1); +.bar .btn-link { + top: 0; + padding: 0; + font-size: 16px; + color: #428bca; + line-height: 44px; + border: 0; +} +.bar .btn-link:active, .bar .btn-link.active { + color: #3071a9; +} + +.bar .btn-block { + top: 6px; + padding: 7px 0; + margin-bottom: 0; + font-size: 16px; +} + +.bar .btn-nav.pull-left { + margin-left: -5px; +} +.bar .btn-nav.pull-left .icon-left-nav { + margin-right: -3px; +} +.bar .btn-nav.pull-right { + margin-right: -5px; +} +.bar .btn-nav.pull-right .icon-right-nav { + margin-left: -3px; } -/* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */ -.list li > a:not([class*="button"]) { +.bar .icon { position: relative; - display: block; - padding: inherit; - margin: -11px -60px -11px -10px; - color: inherit; + z-index: 20; + padding-top: 10px; + padding-bottom: 10px; + font-size: 24px; +} +.bar .btn .icon { + top: 3px; + padding: 0; +} +.bar .title .icon { + padding: 0; +} +.bar .title .icon.icon-caret { + top: 4px; + margin-left: -5px; } -/* Inset list --------------------------------------------------- */ +.bar input[type="search"] { + height: 29px; + margin: 6px 0; +} -.list.inset { - width: auto; - margin-right: 10px; - margin-left: 10px; - border: 1px solid rgba(0, 0, 0, .1); - border-radius: 6px; - box-sizing: border-box; +.bar .segmented-control { + top: 7px; + margin: 0 auto; } -/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */ -.list.inset li:first-child { - border-top-width: 0; +.badge { + display: inline-block; + padding: 2px 9px 3px; + font-size: 12px; + line-height: 1; + color: #333; + background-color: rgba(0, 0, 0, 0.15); + border-radius: 100px; } -.list.inset li:last-child { - border-bottom-width: 0; +.badge.badge-inverted { + padding: 0 5px 0 0; + background-color: transparent; } +.badge-primary { + color: #fff; + background-color: #428bca; +} +.badge-primary.badge-inverted { + color: #428bca; +} -/* List dividers --------------------------------------------------- */ +.badge-positive { + color: #fff; + background-color: #5cb85c; +} +.badge-positive.badge-inverted { + color: #5cb85c; +} -.list .list-divider { - position: relative; - top: -1px; - padding-top: 6px; - padding-bottom: 6px; - font-size: 12px; - font-weight: bold; - line-height: 18px; - text-shadow: 0 1px 0 rgba(255, 255, 255, .5); - background-color: #f8f8f8; - background-image: -webkit-linear-gradient(top, #f8f8f8 0, #eee 100%); - background-image: linear-gradient(to bottom, #f8f8f8 0, #eee 100%); - border-top: 1px solid rgba(0, 0, 0, .1); - border-bottom: 1px solid rgba(0, 0, 0, .1); - box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4); +.badge-negative { + color: #fff; + background-color: #d9534f; +} +.badge-negative.badge-inverted { + color: #d9534f; } -/* Rounding first divider on inset lists and remove border on the top */ -.list.inset .list-divider:first-child { +.card { + overflow: hidden; + margin: 10px; + background-color: white; + border: 1px solid #dddddd; + border-radius: 6px; +} + +.card .table-view { + margin-bottom: 0; + border-top: 0; + border-bottom: 0; +} +.card .table-view .table-view-divider:first-child { top: 0; - border-top-width: 0; - border-radius: 6px 6px 0 0; + border-top-right-radius: 6px; + border-top-left-radius: 6px; +} +.card .table-view .table-view-divider:last-child { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; } -/* Rounding last divider on inset lists */ -.list.inset .list-divider:last-child { - border-radius: 0 0 6px 6px; +.card .table-view-cell:last-child { + border-bottom: 0; } -/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles) --------------------------------------------------- */ -.list .chevron, -.list [class*="button"], -.list [class*="count"], -.list .toggle { - position: absolute; - top: 50%; - right: 10px; +.table-view { + padding-left: 0; + margin-top: 0; + margin-bottom: 15px; + list-style: none; + background-color: #fff; + border-top: 1px solid #dddddd; + border-bottom: 1px solid #dddddd; } - /* Position chevrons/counts vertically centered on the right in list items */ -.list .chevron, -.list [class*="count"] { - margin-top: -10px; /* Half height of chevron */ +.table-view-cell { + position: relative; + overflow: hidden; + padding: 11px 65px 11px 15px; + border-bottom: 1px solid #dddddd; +} +.table-view-cell:last-child { + border-bottom: 0; +} +.table-view-cell > a:not(.btn) { + position: relative; + display: block; + overflow: hidden; + padding: inherit; + margin: -11px -65px -11px -15px; + color: inherit; +} +.table-view-cell > a:not(.btn):active { + background-color: #eee; +} +.table-view-cell p { + margin-bottom: 0; } -/* Push count over if there's a sibling chevron */ -.list .chevron + [class*="count"] { - right: 30px; +.table-view-divider { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 15px; + margin-top: -1px; + margin-left: 0; + color: #999; + font-weight: 500; + border-top: 1px solid #dddddd; + border-bottom: 1px solid #dddddd; + background-color: #fafafa; +} + +.table-view .media, +.table-view .media-body { + overflow: hidden; + zoom: 1; } -/* Position buttons vertically centered on the right in list items */ -.list [class*="button"] { - left: auto; - margin-top: -14px; /* Half height of button */ +.table-view .media-object.pull-left { + margin-right: 10px; +} +.table-view .media-object.pull-right { + margin-left: 10px; } -.list .toggle { - margin-top: -15px; /* Half height of toggle */ -}/* Forms --------------------------------------------------- */ +.table-view-cell > .btn, +.table-view-cell > .badge, +.table-view-cell > .toggle, +.table-view-cell > a > .btn, +.table-view-cell > a > .badge, +.table-view-cell > a > .toggle { + position: absolute; + top: 50%; + right: 15px; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.table-view-cell .push-left > .btn, +.table-view-cell .push-left > .badge, +.table-view-cell .push-left > .toggle, +.table-view-cell .push-right > .btn, +.table-view-cell .push-right > .badge, +.table-view-cell .push-right > .toggle, +.table-view-cell > a .push-left > .btn, +.table-view-cell > a .push-left > .badge, +.table-view-cell > a .push-left > .toggle, +.table-view-cell > a .push-right > .btn, +.table-view-cell > a .push-right > .badge, +.table-view-cell > a .push-right > .toggle { + right: 35px; +} + +.content > .table-view:first-child { + margin-top: 15px; +} -/* Force form elements to inherit font styles */ input, textarea, button, select { - font-family: inherit; - font-size: inherit; + font-family: "Helvetica Neue", Helvetica, sans-serif; + font-size: 17px; } -/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */ select, textarea, input[type="text"], -input[type=search], +input[type="search"], input[type="password"], input[type="datetime"], input[type="datetime-local"], @@ -631,359 +827,163 @@ input[type="number"], input[type="email"], input[type="url"], input[type="tel"], -input[type="color"], -.input-group { +input[type="color"] { width: 100%; - height: 40px; - padding: 10px; - margin-bottom: 10px; + height: 35px; + padding: 0 15px; + margin-bottom: 15px; + line-height: 21px; background-color: #fff; - border: 1px solid rgba(0, 0, 0, .2); + border: 1px solid #dddddd; border-radius: 3px; - box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1); + outline: none; -webkit-appearance: none; +} + +input[type="search"] { + padding: 0 10px; + font-size: 16px; + border-radius: 20px; box-sizing: border-box; - outline: none; } -/* Fully round search input */ -input[type=search] { - height: 34px; - font-size: 14px; - border-radius: 30px; +input[type="search"]:focus { + text-align: left; } -/* Allow text area's height to grow larger than a normal input */ textarea { height: auto; } -/* Style select button to look like part of the Ratchet's style */ select { height: auto; font-size: 14px; background-color: #f8f8f8; - background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%); - background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } - -/* Input groups (cluster multiple inputs together into a single group) --------------------------------------------------- */ - -/* Reset from initial form setup styles */ .input-group { - width: auto; - height: auto; - padding: 0; + background-color: #fff; } -/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */ -.input-group input { +.input-group input, +.input-group textarea { margin-bottom: 0; background-color: transparent; - border: 0; - border-bottom: 1px solid rgba(0, 0, 0, .2); + border-top: 0; + border-left: 0; + border-right: 0; border-radius: 0; + -webkit-box-shadow: none; box-shadow: none; } -/* Remove bottom border on last input to avoid double bottom border */ -.input-group input:last-child { - border-bottom-width: 0; -} - -/* Input groups with labels --------------------------------------------------- */ - -/* To use labels with input groups, wrap a label and an input in an .input-row */ .input-row { overflow: hidden; - border-bottom: 1px solid rgba(0, 0, 0, .2); -} - -/* Remove bottom border on last input-row to avoid double bottom border */ -.input-row:last-child { - border-bottom-width: 0; + border-bottom: 1px solid #dddddd; } -/* Labels get floated left with a set percentage width */ .input-row label { float: left; - width: 25%; - padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */ - font-weight: bold; + width: 35%; + padding: 10px 15px; + font-family: "Helvetica Neue", Helvetica, sans-serif; + line-height: 1.1; } -/* Actual inputs float to right of labels and also have a set percentage */ -.input-row label + input { +.input-row input { float: right; width: 65%; padding-left: 0; margin-bottom: 0; - border-bottom: 0; -}/* General button styles --------------------------------------------------- */ + border: 0; +} -[class*="button"] { +.segmented-control { position: relative; - display: inline-block; - padding: 4px 12px; - margin: 0; - font-weight: bold; - line-height: 18px; - color: #333; - text-align: center; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - vertical-align: top; - cursor: pointer; - background-color: #f8f8f8; - background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%); - background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%); - border: 1px solid rgba(0, 0, 0, .3); + display: table; + overflow: hidden; + font-size: 12px; + font-weight: 400; + background-color: white; + border: 1px solid #ccc; border-radius: 3px; - box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .05); } - -/* Active */ -[class*="button"]:active { - padding-top: 5px; - padding-bottom: 3px; +.segmented-control .control-item { + display: table-cell; + overflow: hidden; + width: 1%; + padding-top: 6px; + padding-bottom: 7px; + line-height: 1; color: #333; - background-color: #ccc; - background-image: none; - box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2); -} - -/* Button modifiers --------------------------------------------------- */ - -/* Overriding styles for buttons with modifiers */ -.button-main, -.button-positive, -.button-negative { - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); -} - -/* Main button */ -.button-main { - background-color: #1eafe7; - background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%); - background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%); - border: 1px solid #117aaa; -} - -/* Positive button */ -.button-positive { - background-color: #34ba15; - background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%); - background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%); - border: 1px solid #278f0f; -} - -/* Negative button */ -.button-negative { - background-color: #e71e1e; - background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%); - background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%); - border: 1px solid #b51a1a; -} - -/* Active state for buttons with modifiers */ -.button-main:active, -.button-positive:active, -.button-negative:active { - color: #fff; -} -.button-main:active { - background-color: #0876b1; -} -.button-positive:active { - background-color: #298f11; -} -.button-negative:active { - background-color: #b21a1a; -} - -/* Block level buttons (full width buttons) */ -.button-block { - display: block; - padding: 11px 0 13px; - margin-bottom: 10px; - font-size: 16px; + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + border-left: 1px solid #ccc; } - -/* Active state for block level buttons */ -.button-block:active { - padding: 12px 0; +.segmented-control .control-item:first-child { + border-left-width: 0; } - -/* Make button elements go full width when given .button-block class */ -button.button-block { - width: 100%; +.segmented-control .control-item:active { + background-color: #eee; } - -/* Counts in buttons --------------------------------------------------- */ - -/* Generic styles for all counts within buttons */ -[class*="button"] [class*="count"] { - padding-top: 2px; - padding-bottom: 2px; - margin-right: -4px; - margin-left: 4px; - text-shadow: none; - background-color: rgba(0, 0, 0, .2); - box-shadow: inset 0 1px 1px -1px #000000, 0 1px 1px -1px #fff; +.segmented-control .control-item.active { + background-color: #ccc; } -/* Position counts within block level buttons - Note: These are absolutely positioned so that text of button isn't "pushed" by count and always - stays at true center of button */ -.button-block [class*="count"] { - position: absolute; - right: 0; - padding-top: 4px; - padding-bottom: 4px; - margin-right: 10px; -}/* Chevrons --------------------------------------------------- */ - -.chevron { - display: block; - height: 20px; +.segmented-control-primary { + border-color: #428bca; } - -/* Base styles for both 1/2's of the chevron */ -.chevron:before, -.chevron:after { - position: relative; - display: block; - width: 12px; - height: 4px; - background-color: #999; - content: ''; +.segmented-control-primary .control-item { + color: #428bca; + border-color: inherit; } - -/* Position and rotate respective 1/2's of the chevron */ -.chevron:before { - top: 5px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); +.segmented-control-primary .control-item:active { + background-color: #cde1f1; } -.chevron:after { - top: 7px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -}/* General count styles --------------------------------------------------- */ - -[class*="count"] { - display: inline-block; - padding: 4px 9px; - font-size: 12px; - font-weight: bold; - line-height: 13px; +.segmented-control-primary .control-item.active { color: #fff; - background-color: rgba(0, 0, 0, .3); - border-radius: 100px; + background-color: #428bca; } -/* Count modifiers --------------------------------------------------- */ - -/* Overriding styles for counts with modifiers */ -.count-main, -.count-positive, -.count-negative { - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); +.segmented-control-positive { + border-color: #5cb85c; } - -/* Main count */ -.count-main { - background-color: #1eafe7; - background-image: -webkit-linear-gradient(top, #1eafe7 0, #1a97c8 100%); - background-image: linear-gradient(to bottom, #1eafe7 0, #1a97c8 100%); +.segmented-control-positive .control-item { + color: #5cb85c; + border-color: inherit; } - -/* Positive count */ -.count-positive { - background-color: #34ba15; - background-image: -webkit-linear-gradient(top, #34ba15 0, #2da012 100%); - background-image: linear-gradient(to bottom, #34ba15 0, #2da012 100%); +.segmented-control-positive .control-item:active { + background-color: #d8eed8; } - -/* Negative count */ -.count-negative { - background-color: #e71e1e; - background-image: -webkit-linear-gradient(top, #e71e1e 0,#c71a1a 100%); - background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%); -}/* Segmented controllers --------------------------------------------------- */ - -.segmented-controller { - display: -webkit-box; - display: box; - margin-bottom: 10px; - overflow: hidden; - font-size: 12px; - font-weight: bold; - text-shadow: 0 1px rgba(255, 255, 255, .5); - list-style: none; - background-color: #f8f8f8; - background-image: -webkit-linear-gradient(top, #f8f8f8 0, #d4d4d4 100%); - background-image: linear-gradient(to bottom, #f8f8f8 0, #d4d4d4 100%); - border: 1px solid #aaa; - border-radius: 3px; - box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, .8); - -webkit-box-orient: horizontal; - box-orient: horizontal; +.segmented-control-positive .control-item.active { + color: #fff; + background-color: #5cb85c; } -/* Section within controller */ -.segmented-controller li { - overflow: hidden; - text-align: center; - white-space: nowrap; - border-left: 1px solid #aaa; - box-shadow: inset 1px 0 rgba(255, 255, 255, .5); - -webkit-box-flex: 1; - box-flex: 1; +.segmented-control-negative { + border-color: #d9534f; } - -/* Link that fills each section */ -.segmented-controller li > a { - display: block; - padding: 8px 16px; - overflow: hidden; - line-height: 15px; - color: #333; - text-overflow: ellipsis; +.segmented-control-negative .control-item { + color: #d9534f; + border-color: inherit; } - -/* Remove border-left and shadow from first section */ -.segmented-controller li:first-child { - border-left-width: 0; - box-shadow: none; +.segmented-control-negative .control-item:active { + background-color: #f9e2e2; } - -/* Active segment of controller */ -.segmented-controller li.active { - background-color: #ccc; - box-shadow: inset 0 1px 5px rgba(0, 0, 0, .3); +.segmented-control-negative .control-item.active { + color: #fff; + background-color: #d9534f; } -.segmented-controller-item { +.control-content { display: none; } - -.segmented-controller-item.active { +.control-content.active { display: block; -}/* Popovers (to be used with popovers.js) --------------------------------------------------- */ +} .popover { position: fixed; @@ -992,110 +992,40 @@ button.button-block { z-index: 20; display: none; width: 280px; - padding: 5px; - margin-left: -146px; - background-color: #555; - background-image: -webkit-linear-gradient(top, #555 5%, #555 6%, #111 30%); - background-image: linear-gradient(to bottom, #555 5%, #555 6%,#111 30%); - border: 1px solid #111; + margin-left: -140px; + background-color: white; border-radius: 6px; opacity: 0; - box-shadow: inset 0 1px 1px -1px #fff, 0 3px 10px rgba(0, 0, 0, .3); + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); - -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; - transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; + -ms-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + transition: all 0.25s linear; } - -/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */ -.popover:before, -.popover:after { +.popover:before { position: absolute; + top: -15px; left: 50%; width: 0; height: 0; + margin-left: -15px; + border-right: 15px solid transparent; + border-bottom: 15px solid white; + border-left: 15px solid transparent; content: ''; } -.popover:before { - top: -20px; - margin-left: -21px; - border-right: 21px solid transparent; - border-bottom: 21px solid #111; - border-left: 21px solid transparent; -} -.popover:after { - top: -19px; - margin-left: -20px; - border-right: 20px solid transparent; - border-bottom: 20px solid #555; - border-left: 20px solid transparent; -} - -/* Wrapper for a title and buttons */ -.popover-header { - display: -webkit-box; - display: box; - height: 34px; - margin-bottom: 5px; -} - -/* Centered title for popover */ -.popover-header .title { - position: absolute; - top: 0; - left: 0; - width: 100%; - margin: 15px 0; - font-size: 16px; - font-weight: bold; - line-height: 12px; - color: #fff; - text-align: center; - text-shadow: 0 -1px rgba(0, 0, 0, .5); -} - -/* Generic style for all buttons in .popover-header */ -.popover-header [class*="button"] { - z-index: 25; - font-size: 12px; - line-height: 22px; - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); - background-color: #454545; - background-image: -webkit-linear-gradient(top, #454545 0, #353535 100%); - background-image: linear-gradient(to bottom, #454545 0, #353535 100%); - border: 1px solid #111; - -webkit-box-flex: 0; - box-flex: 0; -} - -/* Hacky way to right align buttons outside of flex-box system - Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ -.popover-header .title + [class*="button"]:last-child, -.popover-header .button + [class*="button"]:last-child, -.popover-header [class*="button"].pull-right { - position: absolute; - top: 5px; - right: 5px; -} - -/* Active state for popover header buttons */ -.popover-header .button:active { - color: #fff; - background-color: #0876b1; -} - -/* Popover animation --------------------------------------------------- */ - .popover.visible { opacity: 1; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.popover .bar ~ .table-view { + padding-top: 44px; } - -/* Backdrop (used as invisible touch escape) --------------------------------------------------- */ .backdrop { position: fixed; @@ -1103,126 +1033,103 @@ button.button-block { right: 0; bottom: 0; left: 0; - z-index: 10; + z-index: 15; + background-color: rgba(0, 0, 0, 0.3); } -/* Block level buttons in popovers --------------------------------------------------- */ - -/* Positioning and giving darker border to look sharp against dark popover */ -.popover .button-block { +.popover .btn-block { margin-bottom: 5px; - border: 1px solid #111; } - -/* Remove extra margin on bottom of last button */ -.popover .button-block:last-child { +.popover .btn-block:last-child { margin-bottom: 0; } -/* Lists in popovers --------------------------------------------------- */ +.popover .bar-nav { + border-bottom: 1px solid #dddddd; + border-top-right-radius: 12px; + border-top-left-radius: 12px; + -webkit-box-shadow: none; + box-shadow: none; +} -.popover .list { - width: auto; - max-height: 250px; - margin-right: 0; +.popover .table-view { + max-height: 300px; margin-bottom: 0; - margin-left: 0; overflow: auto; background-color: #fff; - border: 1px solid #000; - border-radius: 3px; + border-top: 0; + border-bottom: 0; + border-radius: 6px; -webkit-overflow-scrolling: touch; -}/* Modals --------------------------------------------------- */ +} + .modal { - position: fixed; + position: fixed; top: 0; opacity: 0; - z-index: 11; + z-index: 11; width: 100%; min-height: 100%; overflow: hidden; - background-color: #fff; + background-color: #fff; + -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; + -moz-transition: -moz-transform .25s, opacity 1ms .25s; + transition: transform .25s, opacity 1ms .25s; -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; - transition: transform .25s ease-in-out, opacity 1ms .25s; + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } - -/* Modal - When active --------------------------------------------------- */ .modal.active { opacity: 1; height: 100%; - -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform .25 ease-in-out; + -webkit-transition: -webkit-transform .25s; + -moz-transition: -moz-transform .25s; + transition: transform .25s; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -}/* Slider styles (to be used with sliders.js) --------------------------------------------------- */ + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} -/* Width/height of slider */ -.slider, -.slider > li { +.slider { width: 100%; - height: 200px; } -/* Outer wrapper for slider */ .slider { overflow: hidden; background-color: #000; } - -/* Inner wrapper for slider (width of all slides together) */ -.slider > ul { +.slider .slide-group { position: relative; - font-size: 0; /* Remove spaces from inline-block children */ + font-size: 0; white-space: nowrap; -webkit-transition: all 0 linear; - transition: all 0 linear; + -moz-transition: all 0 linear; + transition: all 0 linear; } - -/* Individual slide */ -.slider > ul > li { +.slider .slide-group .slide { display: inline-block; - vertical-align: top; /* Ensure that li always aligns to top */ - width: 100%; + vertical-align: top; + width: 100%; height: 100%; -} - -/* Required reset of font-size to same as standard body */ -.slider > ul > li > * { font-size: 14px; -}/* Toggle styles (to be used with toggles.js) --------------------------------------------------- */ +} .toggle { + display: block; position: relative; - width: 75px; - height: 28px; - background-color: #eee; - border: 1px solid #bbb; + width: 74px; + height: 30px; + background-color: #fff; + border: 2px solid #ddd; border-radius: 20px; - box-shadow: inset 0 0 4px rgba(0, 0, 0, .1); -} - -/* Text indicating "on" or "off". Default is "off" */ -.toggle:before { - position: absolute; - right: 13px; - font-weight: bold; - line-height: 28px; - color: #777; - text-shadow: 0 1px #fff; - text-transform: uppercase; - content: "Off"; -} - -/* Sliding handle */ -.toggle-handle { + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.toggle .toggle-handle { position: absolute; top: -1px; left: -1px; @@ -1230,63 +1137,278 @@ button.button-block { width: 28px; height: 28px; background-color: #fff; - background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%); - background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%); - border: 1px solid rgba(0, 0, 0, .2); + border: 1px solid #ddd; border-radius: 100px; - -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out; - transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; + -webkit-transition-property: -webkit-transform, border, width; + -moz-transition-property: -moz-transform, border, width; + transition-property: transform, border, width; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.toggle:before { + position: absolute; + top: 3px; + right: 11px; + color: #999; + font-size: 13px; + text-transform: uppercase; + content: "Off"; } - -/* Active state for toggle */ .toggle.active { - background-color: #19a8e4; - background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%); - background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%); - border: 1px solid #096c9d; - box-shadow: inset 0 0 15px rgba(255, 255, 255, .25); + border: 2px solid #5cb85c; + background-color: #5cb85c; } - -/* Active state for toggle handle */ .toggle.active .toggle-handle { - border-color: #0a76ad; - -webkit-transform: translate3d(48px,0,0); - transform: translate3d(48px,0,0); + border-color: #5cb85c; + -webkit-transform: translate3d(44px, 0, 0); + -ms-transform: translate3d(44px, 0, 0); + transform: translate3d(44px, 0, 0); } - -/* Change "off" to "on" for active state */ .toggle.active:before { right: auto; left: 15px; color: #fff; - text-shadow: 0 -1px rgba(0, 0, 0, 0.25); content: "On"; -}/* Push styles (to be used with push.js) --------------------------------------------------- */ +} +.toggle input[type="checkbox"] { + display: none; +} -/* Fade animation */ .content.fade { left: 0; opacity: 0; - -webkit-transition: opacity .2s ease-in-out; - transition: opacity .2s ease-in-out; } .content.fade.in { opacity: 1; } - -/* Slide animation */ -.content.slide { +.content.sliding { + z-index: 2; + -webkit-transition: -webkit-transform .4s; + -moz-transition: -moz-transform .4s; + transition: transform .4s; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform .25s ease-in-out; + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } -.content.slide.left { +.content.sliding.left { + z-index: 1; -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } -.content.slide.right { +.content.sliding.right { + z-index: 3; -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); -}
\ No newline at end of file + -ms-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} + +.push-left:after, +.push-right:after { + position: absolute; + top: 50%; + display: inline-block; + color: #bbb; + font-family: Ratchicons; + font-size: inherit; + text-decoration: none; + line-height: 1; + cursor: default; + -webkit-font-smoothing: antialiased; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +.push-left:after { + left: 15px; + content: '\e822'; +} + +.push-right:after { + right: 15px; + content: '\e826'; +} + +@font-face { + font-family: Ratchicons; + src: url("ratchicons/ratchicons.eot"); + src: url("ratchicons/ratchicons.eot?#iefix") format("embedded-opentype"), url("ratchicons/ratchicons.woff") format("woff"), url("ratchicons/ratchicons.ttf") format("truetype"), url("ratchicons/ratchicons.svg#svgFontName") format("svg"); + font-weight: normal; + font-style: normal; +} + +.icon { + display: inline-block; + font-family: Ratchicons; + font-size: 24px; + text-decoration: none; + line-height: 1; + cursor: default; + -webkit-font-smoothing: antialiased; +} + +.icon-and-up:before { + content: '\e809'; +} + +.icon-back:before { + content: '\e80a'; +} + +.icon-bars:before { + content: '\e80e'; +} + +.icon-caret:before { + content: '\e80f'; +} + +.icon-check:before { + content: '\e810'; +} + +.icon-close:before { + content: '\e811'; +} + +.icon-code:before { + content: '\e812'; +} + +.icon-compose:before { + content: '\e813'; +} + +.icon-down-nav:before { + content: '\e814'; +} + +.icon-down:before { + content: '\e820'; +} + +.icon-download:before { + content: '\e815'; +} + +.icon-edit:before { + content: '\e829'; +} + +.icon-forward:before { + content: '\e82a'; +} + +.icon-gear:before { + content: '\e821'; +} + +.icon-home:before { + content: '\e82b'; +} + +.icon-info:before { + content: '\e82c'; +} + +.icon-left-nav:before { + content: '\e82d'; +} + +.icon-left:before { + content: '\e822'; +} + +.icon-list:before { + content: '\e823'; +} + +.icon-more-vertical:before { + content: '\e82e'; +} + +.icon-more:before { + content: '\e82f'; +} + +.icon-pages:before { + content: '\e824'; +} + +.icon-pause:before { + content: '\e830'; +} + +.icon-person:before { + content: '\e832'; +} + +.icon-play:before { + content: '\e816'; +} + +.icon-plus:before { + content: '\e817'; +} + +.icon-refresh:before { + content: '\e825'; +} + +.icon-right-nav:before { + content: '\e818'; +} + +.icon-right:before { + content: '\e826'; +} + +.icon-search:before { + content: '\e819'; +} + +.icon-share:before { + content: '\e81a'; +} + +.icon-sound2:before { + content: '\e828'; +} + +.icon-sound3:before { + content: '\e80b'; +} + +.icon-sound4:before { + content: '\e80c'; +} + +.icon-sound:before { + content: '\e827'; +} + +.icon-star-filled:before { + content: '\e81b'; +} + +.icon-star:before { + content: '\e81c'; +} + +.icon-stop:before { + content: '\e81d'; +} + +.icon-trash:before { + content: '\e81e'; +} + +.icon-up-nav:before { + content: '\e81f'; +} + +.icon-up:before { + content: '\e80d'; +} |