diff --git a/dist/css/ionic.css b/dist/css/ionic.css index e69de29bb2..39ef0dbccf 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -0,0 +1,5527 @@ +@charset "UTF-8"; +/** + * Copyright 2013 Drifty Co. + * http://drifty.com/ + + * Ionic - a powerful HTML5 mobile app framework. + * http://ionicframework.com/ + * + * + * By @maxlynch, @helloimben, @adamdbradley <3 + * + * Licensed under the MIT license. Please see LICENSE for more information. + * + */ +/** + * Resets + * -------------------------------------------------- + * Adapted from normalize.css and some reset.css. We don't care even one + * bit about old IE, so we don't need any hacks for that in here. + * + * There are probably other things we could remove here, as well. + * + * normalize.css v2.1.2 | MIT License | git.io/normalize + + * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) + * http://cssreset.com + */ +html, body, div, span, applet, object, 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, i, u, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, fieldset, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; + font: inherit; + font-size: 100%; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +script { + display: none !important; } + +/* ========================================================================== + Base + ========================================================================== */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ +html { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + font-family: sans-serif; + /* 1 */ + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; + line-height: 1; } + +/* * + * Remove tap highlight color on Safari + */ +a { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ +a:focus { + outline: thin dotted; } + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ +a:active, +a:hover { + outline: 0; } + +/* ========================================================================== + Typography + ========================================================================== */ +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari 5 and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ +code, +kbd, +pre, +samp { + font-size: 1em; + font-family: monospace, serif; } + +/** + * Improve readability of pre-formatted text in all browsers. + */ +pre { + white-space: pre-wrap; } + +/** + * Set consistent quote types. + */ +q { + quotes: "\201C" "\201D" "\2018" "\2019"; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + position: relative; + vertical-align: baseline; + font-size: 75%; + line-height: 0; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; } + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + padding: 0; + /* 2 */ + border: 0; + /* 1 */ } + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + * 4. Remove any default :focus styles + * 5. Make sure webkit font smoothing is being inherited + */ +button, +input, +select, +textarea { + margin: 0; + /* 3 */ + font-size: 100%; + /* 2 */ + font-family: inherit; + /* 1 */ + outline-offset: 0; + /* 4 */ + outline-style: none; + /* 4 */ + outline-width: 0; + /* 4 */ + -webkit-font-smoothing: inherit; + /* 5 */ } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +button, +input { + line-height: normal; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + /* 3 */ + -webkit-appearance: button; + /* 2 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ +input[type="search"] { + -webkit-box-sizing: content-box; + /* 2 */ + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; + /* 1 */ } + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; } + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ +textarea { + overflow: auto; + /* 1 */ + vertical-align: top; + /* 2 */ } + +/* ========================================================================== + Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-spacing: 0; + border-collapse: collapse; } + +/** + * Scaffolding + * -------------------------------------------------- + */ +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +a { + -webkit-user-drag: none; + -webkit-tap-highlight-color: transparent; } + +img { + -webkit-user-drag: none; } + +a:focus, button:focus { + outline: 0; } + +body, .ionic-body { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + margin: 0; + padding: 0; + color: black; + word-wrap: break-word; + font-size: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 20px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: none; + text-size-adjust: none; + -webkit-tap-highlight-color: transparent; + -webkit-user-drag: none; + -webkit-user-select: none; } + +.content:before, +.content:after { + display: block; + overflow: hidden; + height: 0; + content: "\00a0"; + /* No-break space character */ } + +/* Force all relatively and absolutely positioned elements still render while scrolling + Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */ +.content > * { + -webkit-transform: translateZ(0px); + transform: translateZ(0px); } + +.content { + position: absolute; + width: 100%; + height: 100%; } + +.scroll-content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; } + +/** + * Scroll is the scroll view component available for complex and custom + * scroll view functionality. + */ +.scroll { + position: absolute; + z-index: 1; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + width: 100%; + height: 100%; + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; + -ms-text-size-adjust: none; + -o-text-size-adjust: none; + text-size-adjust: none; } + +.scroll-refresher { + display: none; + overflow: hidden; + height: 100px; + margin-top: -100px; } + +.scroll-refresher-content { + height: 100%; + width: 100%; + text-align: center; + position: relative; } + +.ionic-refresher-content { + height: 100%; + width: 100%; + text-align: center; + position: relative; } + +.ionic-refresher { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #4a87ee; + position: absolute; + left: 50%; + margin-left: -5px; + bottom: 25px; } + +.scroll-refreshing { + -webkit-transition: height 0.1s ease-in-out; } + .scroll-refreshing .ionic-refresher { + -webkit-animation: refresher-pulsate 1.5s linear; + -webkit-animation-iteration-count: infinite; } + +@-webkit-keyframes refresher-pulsate { + 0% { + -webkit-transform: scale(2, 2); } + + 50% { + -webkit-transform: scale(1.5, 1.5); } + + 100% { + -webkit-transform: scale(2, 2); } } + +.overflow-scroll { + overflow: auto; + -webkit-overflow-scrolling: touch; } + +.has-header { + top: 44px; } + +.has-subheader { + top: 88px; } + +.has-footer { + bottom: 44px; } + +.has-tabs { + bottom: 44px; } + +.pane { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + background-color: #fff; } + +/** + * Typography + * -------------------------------------------------- + */ +p { + margin: 0 0 10px; } + +small { + font-size: 85%; } + +cite { + font-style: normal; } + +.text-left { + text-align: left; } + +.text-right { + text-align: right; } + +.text-center { + text-align: center; } + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + color: black; + font-weight: 500; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1.1; } + h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, + .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { + font-weight: normal; + line-height: 1; } + +h1, .h1, +h2, .h2, +h3, .h3 { + margin-top: 20px; + margin-bottom: 10px; } + h1:first-child, .h1:first-child, + h2:first-child, .h2:first-child, + h3:first-child, .h3:first-child { + margin-top: 0; } + h1 + h1, h1 + .h1, + h1 + h2, h1 + .h2, + h1 + h3, h1 + .h3, .h1 + h1, .h1 + .h1, + .h1 + h2, .h1 + .h2, + .h1 + h3, .h1 + .h3, + h2 + h1, + h2 + .h1, + h2 + h2, + h2 + .h2, + h2 + h3, + h2 + .h3, .h2 + h1, .h2 + .h1, + .h2 + h2, .h2 + .h2, + .h2 + h3, .h2 + .h3, + h3 + h1, + h3 + .h1, + h3 + h2, + h3 + .h2, + h3 + h3, + h3 + .h3, .h3 + h1, .h3 + .h1, + .h3 + h2, .h3 + .h2, + .h3 + h3, .h3 + .h3 { + margin-top: 10px; } + +h4, .h4, +h5, .h5, +h6, .h6 { + margin-top: 10px; + margin-bottom: 10px; } + +h1, .h1 { + font-size: 36px; } + +h2, .h2 { + font-size: 30px; } + +h3, .h3 { + font-size: 24px; } + +h4, .h4 { + font-size: 18px; } + +h5, .h5 { + font-size: 14px; } + +h6, .h6 { + font-size: 12px; } + +h1 small, .h1 small { + font-size: 24px; } + +h2 small, .h2 small { + font-size: 18px; } + +h3 small, .h3 small, +h4 small, .h4 small { + font-size: 14px; } + +dl { + margin-bottom: 20px; } + +dt, +dd { + line-height: 1.42857; } + +dt { + font-weight: bold; } + +blockquote { + margin: 0 0 20px; + padding: 10px 20px; + border-left: 5px solid gray; } + blockquote p { + font-weight: 300; + font-size: 17.5px; + line-height: 1.25; } + blockquote p:last-child { + margin-bottom: 0; } + blockquote small { + display: block; + line-height: 1.42857; } + blockquote small:before { + content: '\2014 \00A0'; } + blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid gray; + border-left: 0; } + blockquote.pull-right p, + blockquote.pull-right small { + text-align: right; } + blockquote.pull-right small:before { + content: ''; } + blockquote.pull-right small:after { + content: '\00A0 \2014'; } + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; } + +address { + display: block; + margin-bottom: 20px; + font-style: normal; + line-height: 1.42857; } + +a.subdued { + padding-right: 10px; + color: #888; + text-decoration: none; } + a.subdued:hover { + text-decoration: none; } + a.subdued:last-child { + padding-right: 0; } + +/** + * Action Sheets + * -------------------------------------------------- + */ +@-webkit-keyframes fadeInHalf { + from { + background-color: rgba(0, 0, 0, 0); } + + to { + background-color: rgba(0, 0, 0, 0.5); } } + +@keyframes fadeInHalf { + from { + background-color: rgba(0, 0, 0, 0); } + + to { + background-color: rgba(0, 0, 0, 0.5); } } + +@-webkit-keyframes fadeOutHalf { + from { + background-color: rgba(0, 0, 0, 0.5); } + + to { + background-color: rgba(0, 0, 0, 0); } } + +@keyframes fadeOutHalf { + from { + background-color: rgba(0, 0, 0, 0.5); } + + to { + background-color: rgba(0, 0, 0, 0); } } + +.action-sheet-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); } + .action-sheet-backdrop.active { + -webkit-animation: fadeInHalf 0.3s; + animation: fadeInHalf 0.3s; + -webkit-animation-fill-mode: forwards; } + .action-sheet-backdrop.active-remove { + -webkit-animation: fadeOutHalf 0.3s; + animation: fadeOutHalf 0.3s; + -webkit-animation-fill-mode: forwards; } + +@-webkit-keyframes actionSheetUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + opacity: 0; } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } } + +@-webkit-keyframes actionSheetOut { + 0% { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } + + 100% { + -webkit-transform: translate3d(0, 100%, 0); + opacity: 0; } } + +.action-sheet-up { + opacity: 1; + -webkit-transform: translate3d(0, 0%, 0); } + .action-sheet-up.ng-enter, .action-sheet-up .ng-enter { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + -webkit-animation-duration: 400ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } + .action-sheet-up.ng-enter-active, .action-sheet-up .ng-enter-active { + -webkit-animation-name: actionSheetUp; } + .action-sheet-up.ng-leave, .action-sheet-up .ng-leave { + -webkit-animation-duration: 400ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } + .action-sheet-up.ng-leave-active, .action-sheet-up .ng-leave { + -webkit-animation-name: actionSheetOut; } + +.action-sheet { + position: fixed; + bottom: 0; + left: 15px; + z-index: 10; + overflow: hidden; + width: calc(100% - 30px); } + .action-sheet .button { + display: block; + padding: 1px; + width: 100%; + border-radius: 0; + background-color: transparent; + color: #4a87ee; + font-size: 18px; } + .action-sheet .button.destructive { + color: #ef4e3a; } + +.action-sheet-title { + padding: 10px; + text-align: center; + font-size: 12px; + color: #666666; } + +.action-sheet-group { + background-color: #fff; + margin-bottom: 5px; + border-radius: 3px 3px 3px 3px; } + .action-sheet-group .button { + border-radius: 0; + border-width: 1px 0px 0px 0px; } + .action-sheet-group .button.active, .action-sheet-group .button:active { + background-color: transparent; + color: inherit; } + .action-sheet-group .button:first-child:last-child { + border-width: 0; } + +/** + * Bar (Headers and Footers) + * -------------------------------------------------- + */ +.bar { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + position: absolute; + right: 0; + left: 0; + z-index: 10; + display: -webkit-box; + display: box; + box-sizing: border-box; + padding: 5px; + width: 100%; + height: 44px; + border-width: 0; + border-style: solid; + border-top: 1px solid transparent; + border-bottom: 1px solid #dddddd; + background-color: white; + background-size: 0; } + @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { + .bar { + border-top: none !important; + border-bottom: none !important; + background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); + background-position: bottom; + background-size: 100% 1px; + background-repeat: no-repeat; } } + .bar.bar-clear { + border: none; + background: none; + color: #fff; } + .bar.bar-clear .button { + color: #fff; } + .bar.bar-clear .title { + color: #fff; } + .bar.bar-light { + background-color: white; + border-color: #dddddd; + background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); + color: #444444; } + .bar.bar-light .title { + color: #444444; } + .bar.bar-stable { + background-color: #f8f8f8; + border-color: #b2b2b2; + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + color: #444444; } + .bar.bar-stable .title { + color: #444444; } + .bar.bar-positive { + background-color: #4a87ee; + border-color: #145dd7; + background-image: linear-gradient(0deg, #145dd7, #145dd7 50%, transparent 50%); + color: white; } + .bar.bar-positive .title { + color: white; } + .bar.bar-calm { + background-color: #43cee6; + border-color: #1aaac3; + background-image: linear-gradient(0deg, #1aaac3, #1aaac3 50%, transparent 50%); + color: white; } + .bar.bar-calm .title { + color: white; } + .bar.bar-assertive { + background-color: #ef4e3a; + border-color: #cc2511; + background-image: linear-gradient(0deg, #cc2511, #cc2511 50%, transparent 50%); + color: white; } + .bar.bar-assertive .title { + color: white; } + .bar.bar-balanced { + background-color: #66cc33; + border-color: #478f24; + background-image: linear-gradient(0deg, #478f24, #478f24 50%, transparent 50%); + color: white; } + .bar.bar-balanced .title { + color: white; } + .bar.bar-energized { + background-color: #f0b840; + border-color: #d39511; + background-image: linear-gradient(0deg, #d39511, #d39511 50%, transparent 50%); + color: white; } + .bar.bar-energized .title { + color: white; } + .bar.bar-royal { + background-color: #8a6de9; + border-color: #552bdf; + background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%); + color: white; } + .bar.bar-royal .title { + color: white; } + .bar.bar-dark { + background-color: #444444; + border-color: #111111; + background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%); + color: white; } + .bar.bar-dark .title { + color: white; } + .bar .title { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 0; + overflow: hidden; + margin: 0; + min-width: 30px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 18px; + line-height: 44px; } + .bar .title.title-left { + text-align: left; } + .bar .title a { + color: inherit; } + .bar .button { + z-index: 1; + padding: 0 8px; + min-width: initial; + min-height: 31px; + height: 32px; + font-size: 12px; + line-height: 30px; } + .bar .button .icon { + padding-left: 2px; + padding-right: 2px; + font-size: 24px; + line-height: 30px; } + .bar .button-bar > .button, .bar .buttons > .button { + min-height: 31px; + height: 32px; + line-height: 30px; } + .bar .button-bar + .button, .bar .button + .button-bar { + margin-left: 5px; } + .bar .title + .button:last-child, + .bar > .button + .button:last-child, + .bar > .button.pull-right, + .bar .title + .buttons { + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; } + +.bar-light .button { + color: #444444; + background-color: white; + border-color: #dddddd; } + .bar-light .button:hover { + color: #444444; + text-decoration: none; } + .bar-light .button.active, .bar-light .button:active { + background-color: #fafafa; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #cccccc; } + .bar-light .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-stable .button { + color: #444444; + background-color: #f8f8f8; + border-color: #b2b2b2; } + .bar-stable .button:hover { + color: #444444; + text-decoration: none; } + .bar-stable .button.active, .bar-stable .button:active { + background-color: #e5e5e5; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #a2a2a2; } + .bar-stable .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-positive .button { + color: white; + background-color: #4a87ee; + border-color: #145dd7; } + .bar-positive .button:hover { + color: white; + text-decoration: none; } + .bar-positive .button.active, .bar-positive .button:active { + background-color: #145dd7; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #145dd7; } + .bar-positive .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-calm .button { + color: white; + background-color: #43cee6; + border-color: #1aaac3; } + .bar-calm .button:hover { + color: white; + text-decoration: none; } + .bar-calm .button.active, .bar-calm .button:active { + background-color: #1aaac3; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #1aaac3; } + .bar-calm .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-assertive .button { + color: white; + background-color: #ef4e3a; + border-color: #cc2511; } + .bar-assertive .button:hover { + color: white; + text-decoration: none; } + .bar-assertive .button.active, .bar-assertive .button:active { + background-color: #cc2511; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #cc2511; } + .bar-assertive .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-balanced .button { + color: white; + background-color: #66cc33; + border-color: #478f24; } + .bar-balanced .button:hover { + color: white; + text-decoration: none; } + .bar-balanced .button.active, .bar-balanced .button:active { + background-color: #478f24; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #478f24; } + .bar-balanced .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-energized .button { + color: white; + background-color: #f0b840; + border-color: #d39511; } + .bar-energized .button:hover { + color: white; + text-decoration: none; } + .bar-energized .button.active, .bar-energized .button:active { + background-color: #d39511; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #d39511; } + .bar-energized .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-royal .button { + color: white; + background-color: #8a6de9; + border-color: #552bdf; } + .bar-royal .button:hover { + color: white; + text-decoration: none; } + .bar-royal .button.active, .bar-royal .button:active { + background-color: #552bdf; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: #552bdf; } + .bar-royal .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-dark .button { + color: white; + background-color: #444444; + border-color: #111111; } + .bar-dark .button:hover { + color: white; + text-decoration: none; } + .bar-dark .button.active, .bar-dark .button:active { + background-color: #262626; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + border-color: black; } + .bar-dark .button.button-clear { + color: white; + background: none; + box-shadow: none; + font-size: 18px; } + +.bar-header { + top: 0; + border-top-width: 0; + border-bottom-width: 1px; } + +.bar-footer { + bottom: 0; + border-top-width: 1px; + border-bottom-width: 0; + background-position: top; } + +.bar-tabs { + padding: 0; } + +.bar-subheader { + top: 44px; + display: block; } + +.bar-subfooter { + bottom: 44px; + display: block; } + +/** + * Tabs + * -------------------------------------------------- + * A navigation bar with any number of tab items supported. + */ +.tabs { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: horizontal; + -moz-flex-direction: horizontal; + -ms-flex-direction: horizontal; + flex-direction: horizontal; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + -moz-justify-content: center; + justify-content: center; + background-color: #f8f8f8; + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + border-color: #b2b2b2; + color: #444444; + position: absolute; + bottom: 0; + z-index: 5; + width: 100%; + height: 49px; + border-style: solid; + border-top-width: 1px; + background-size: 0; + line-height: 49px; } + .tabs.tabs-light { + background-color: white; + background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); + border-color: #dddddd; + color: #444444; } + .tabs.tabs-stable { + background-color: #f8f8f8; + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + border-color: #b2b2b2; + color: #444444; } + .tabs.tabs-positive { + background-color: #4a87ee; + background-image: linear-gradient(0deg, #145dd7, #145dd7 50%, transparent 50%); + border-color: #145dd7; + color: white; } + .tabs.tabs-calm { + background-color: #43cee6; + background-image: linear-gradient(0deg, #1aaac3, #1aaac3 50%, transparent 50%); + border-color: #1aaac3; + color: white; } + .tabs.tabs-assertive { + background-color: #ef4e3a; + background-image: linear-gradient(0deg, #cc2511, #cc2511 50%, transparent 50%); + border-color: #cc2511; + color: white; } + .tabs.tabs-balanced { + background-color: #66cc33; + background-image: linear-gradient(0deg, #478f24, #478f24 50%, transparent 50%); + border-color: #478f24; + color: white; } + .tabs.tabs-energized { + background-color: #f0b840; + background-image: linear-gradient(0deg, #d39511, #d39511 50%, transparent 50%); + border-color: #d39511; + color: white; } + .tabs.tabs-royal { + background-color: #8a6de9; + background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%); + border-color: #552bdf; + color: white; } + .tabs.tabs-dark { + background-color: #444444; + background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%); + border-color: #111111; + color: white; } + @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { + .tabs { + padding-top: 2px; + border-top: none !important; + border-bottom: none !important; + background-position: top; + background-size: 100% 1px; + background-repeat: no-repeat; } } + +.tabs-top { + top: 44px; } + +.tab-item { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: block; + overflow: hidden; + max-width: 150px; + height: 100%; + color: inherit; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 400; + font-size: 14px; + font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; + opacity: 0.7; } + +.tabs-icon-top .tab-item, +.tabs-icon-bottom .tab-item { + font-size: 12px; + line-height: 14px; } + +.tab-item .icon { + display: block; + margin: 0 auto; + height: 32px; + font-size: 32px; } + +.tabs-icon-left .tab-item, +.tabs-icon-right .tab-item { + font-size: 12px; } + .tabs-icon-left .tab-item .icon, + .tabs-icon-right .tab-item .icon { + display: inline-block; + vertical-align: top; + font-size: 24px; + line-height: 49px; } + +.tabs-icon-only .icon { + line-height: inherit; } + +/* Navigational tab */ +/* Active state for tab */ +.tab-item.active, .tab-item:active { + opacity: 1; } + .tab-item.active.tab-item-light, .tab-item:active.tab-item-light { + color: white; } + .tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable { + color: #f8f8f8; } + .tab-item.active.tab-item-positive, .tab-item:active.tab-item-positive { + color: #4a87ee; } + .tab-item.active.tab-item-calm, .tab-item:active.tab-item-calm { + color: #43cee6; } + .tab-item.active.tab-item-assertive, .tab-item:active.tab-item-assertive { + color: #ef4e3a; } + .tab-item.active.tab-item-balanced, .tab-item:active.tab-item-balanced { + color: #66cc33; } + .tab-item.active.tab-item-energized, .tab-item:active.tab-item-energized { + color: #f0b840; } + .tab-item.active.tab-item-royal, .tab-item:active.tab-item-royal { + color: #8a6de9; } + .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { + color: #444444; } + +.item.tabs { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + padding: 0; } + .item.tabs .icon { + position: relative; } + +/** + * Menus + * -------------------------------------------------- + * Side panel structure + */ +.menu { + position: absolute; + top: 0; + bottom: 0; + z-index: 0; + overflow: hidden; + min-height: 100%; + max-height: 100%; + width: 270px; + background-color: #fff; } + +.menu-content { + box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0, 0, 0, 0.2); } + +.menu-left { + left: 0; } + +.menu-right { + right: 0; } + +.menu-animated { + -webkit-transition: -webkit-transform 200ms ease; + -moz-transition: -moz-transform 200ms ease; + transition: transform 200ms ease; } + +/** + * Modals + * -------------------------------------------------- + * Modals are independent windows that slide in from off-screen. + */ +.modal { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + position: fixed; + top: 0; + z-index: 10; + overflow: hidden; + min-height: 100%; + width: 100%; + background-color: white; + opacity: 0; } + .modal.active { + height: 100%; } + +/** + * Popups + * -------------------------------------------------- + */ +.popup { + position: fixed; } + +.popup-content { + padding: 10px; } + +.loading-backdrop { + position: fixed; + top: 0; + left: 0; + visibility: hidden; + width: 100%; + height: 100%; + -webkit-transition: visibility 0s linear 0.3s; } + .loading-backdrop.enabled { + background-color: rgba(0, 0, 0, 0.7); } + .loading-backdrop.active { + visibility: visible; + -webkit-transition-delay: 0s; } + +.loading { + position: fixed; + top: 50%; + left: 50%; + padding: 20px; + border-radius: 5px; + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + text-align: center; + text-overflow: ellipsis; + font-size: 15px; } + .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 { + color: #fff; } + +/** + * Items + * -------------------------------------------------- + */ +.item { + color: #444444; + background-color: white; + border-color: #dddddd; + position: relative; + z-index: 2; + display: block; + margin: -1px; + padding: 15px; + border-width: 1px; + border-style: solid; + font-size: 16px; + -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } + .item.active, .ionic-pseudo .item:active { + background-color: #d9d9d9; + border-color: #cccccc; } + .item h2 { + margin: 0 0 4px 0; + font-size: 16px; } + .item h3 { + margin: 0 0 4px 0; + font-size: 14px; } + .item h4 { + margin: 0 0 4px 0; + font-size: 12px; } + .item h5, .item h6 { + margin: 0 0 3px 0; + font-size: 10px; } + .item p { + color: #666; + font-size: 14px; } + .item h1:last-child, + .item h2:last-child, + .item h3:last-child, + .item h4:last-child, + .item h5:last-child, + .item h6:last-child, + .item p:last-child { + margin-bottom: 0; } + .item .badge { + float: right; } + .item .badge + .badge { + margin-right: 5px; } + .item.item-light { + color: #444444; + background-color: white; + border-color: #dddddd; } + .item.item-light.active, .ionic-pseudo .item.item-light:active { + background-color: #fafafa; + border-color: #cccccc; } + .item.item-stable { + color: #444444; + background-color: #f8f8f8; + border-color: #b2b2b2; } + .item.item-stable.active, .ionic-pseudo .item.item-stable:active { + background-color: #e5e5e5; + border-color: #a2a2a2; } + .item.item-positive { + color: white; + background-color: #4a87ee; + border-color: #145dd7; } + .item.item-positive.active, .ionic-pseudo .item.item-positive:active { + background-color: #145dd7; + border-color: #145dd7; } + .item.item-calm { + color: white; + background-color: #43cee6; + border-color: #1aaac3; } + .item.item-calm.active, .ionic-pseudo .item.item-calm:active { + background-color: #1aaac3; + border-color: #1aaac3; } + .item.item-assertive { + color: white; + background-color: #ef4e3a; + border-color: #cc2511; } + .item.item-assertive.active, .ionic-pseudo .item.item-assertive:active { + background-color: #cc2511; + border-color: #cc2511; } + .item.item-balanced { + color: white; + background-color: #66cc33; + border-color: #478f24; } + .item.item-balanced.active, .ionic-pseudo .item.item-balanced:active { + background-color: #478f24; + border-color: #478f24; } + .item.item-energized { + color: white; + background-color: #f0b840; + border-color: #d39511; } + .item.item-energized.active, .ionic-pseudo .item.item-energized:active { + background-color: #d39511; + border-color: #d39511; } + .item.item-royal { + color: white; + background-color: #8a6de9; + border-color: #552bdf; } + .item.item-royal.active, .ionic-pseudo .item.item-royal:active { + background-color: #552bdf; + border-color: #552bdf; } + .item.item-dark { + color: white; + background-color: #444444; + border-color: #111111; } + .item.item-dark.active, .ionic-pseudo .item.item-dark:active { + background-color: #262626; + border-color: black; } + +.item, +.item h1, +.item h2, +.item h3, +.item h4, +.item h5, +.item h6, +.item p, +.item-content, +.item-content h1, +.item-content h2, +.item-content h3, +.item-content h4, +.item-content h5, +.item-content h6, +.item-content p { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +a.item { + color: inherit; + text-decoration: none; } + a.item:hover, a.item:focus { + text-decoration: none; } + +/** + * Complex Items + * -------------------------------------------------- + * Adding .item-complex allows the .item to be slidable and + * have options underneath the button, but also requires an + * additional .item-content element inside .item. + * Basically .item-complex removes any default settings which + * .item added, so that .item-content looks them as just .item. + */ +.item-complex, +a.item.item-complex, +button.item.item-complex { + padding: 0; } + +.item-complex .item-content, +.item-radio .item-content { + /** + * The content area of a complex list item. This area can + * Slide left and right and be dragged to support different + * UI interactions. + */ + position: relative; + background-color: white; + z-index: 2; + padding: 15px 40px 15px 15px; + border: none; + -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; } + +.item-text-wrap, +.item-text-wrap h1, +.item-text-wrap h2, +.item-text-wrap h3, +.item-text-wrap h4, +.item-text-wrap h5, +.item-text-wrap h6, +.item-text-wrap p, +.item-complex.item-text-wrap .item-content, +.item-body h1, +.item-body h2, +.item-body h3, +.item-body h4, +.item-body h5, +.item-body h6, +.item-body p { + overflow: hidden; + white-space: normal; } + +.item-complex.item-text-wrap, +.item-complex.item-text-wrap h1, +.item-complex.item-text-wrap h2, +.item-complex.item-text-wrap h3, +.item-complex.item-text-wrap h4, +.item-complex.item-text-wrap h5, +.item-complex.item-text-wrap h6, +.item-complex.item-text-wrap p { + overflow: hidden; + white-space: nowrap; } + +/** + * Item Icons + * -------------------------------------------------- + */ +.item-icon-left .icon, +.item-icon-right .icon { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; + position: absolute; + top: 0; + height: 100%; + font-size: 32px; } + .item-icon-left .icon:before, + .item-icon-right .icon:before { + display: block; + width: 28px; + text-align: center; } + +.item .fill-icon { + min-width: 30px; + min-height: 30px; + font-size: 28px; } + +.item-icon-left { + padding-left: 45px; } + .item-icon-left .icon { + left: 7.5px; } + +.item-complex.item-icon-left { + padding-left: 0; } + .item-complex.item-icon-left .item-content { + padding-left: 45px; } + +.item-icon-right .icon { + right: 7.5px; } + +.item-icon-left.item-icon-right .icon:first-child { + right: auto; } + +.item-icon-left.item-icon-right .icon:last-child { + left: auto; } + +/** + * Item Button + * -------------------------------------------------- + * An item button is a child button inside an .item (not the entire .item) + */ +.item-button-left { + padding-left: 67.5px; } + +.item-button-left > .button, +.item-button-left .item-content > .button { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; + position: absolute; + top: 7.5px; + left: 7.5px; + min-width: initial; + min-height: 32px; + font-size: 32px; } + .item-button-left > .button .icon, + .item-button-left .item-content > .button .icon { + position: relative; + left: auto; + width: auto; + line-height: 31px; } + +.item-button-right, +a.item.item-button-right, +button.item.item-button-right { + padding-right: 75px; } + +.item-button-right > .button, +.item-button-right .item-content > .button { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; + position: absolute; + top: 7.5px; + right: 15px; + min-width: initial; + min-height: 32px; + font-size: 32px; } + .item-button-right > .button .icon, + .item-button-right .item-content > .button .icon { + position: relative; + left: auto; + width: auto; + line-height: 31px; } + +/** + * Auto Right Arrow Icon + * -------------------------------------------------- + * By default, if an .item is created out of an or