diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2019-04-02 10:49:25 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2019-04-02 10:49:25 -0400 |
| commit | 54a54a2907cbf8f07cab2c05dd478570c78cf3f1 (patch) | |
| tree | 18dd08033f2d96ab48f7634480bf306a82f68203 /etc/css | |
| parent | 29ac5329274d129b3c85eeda480048c6c7687cc5 (diff) | |
#801 final cleanups, some test aut stuff too
Diffstat (limited to 'etc/css')
| -rwxr-xr-x | etc/css/angular-carousel.css | 64 | ||||
| -rw-r--r-- | etc/css/angular-circular-navigation.css | 296 | ||||
| -rw-r--r-- | etc/css/custommfb.scss | 404 | ||||
| -rw-r--r-- | etc/css/ionic.app.css | 9864 |
4 files changed, 10628 insertions, 0 deletions
diff --git a/etc/css/angular-carousel.css b/etc/css/angular-carousel.css new file mode 100755 index 00000000..a11d8523 --- /dev/null +++ b/etc/css/angular-carousel.css @@ -0,0 +1,64 @@ +input[type=range] { + width: 300px; } + +ul[rn-carousel] { + overflow: hidden; + padding: 0; + white-space: nowrap; + position: relative; + -webkit-perspective: 1000px; + -ms-perspective: 1000px; + perspective: 1000px; + -ms-touch-action: pan-y; + touch-action: pan-y; } + ul[rn-carousel] > li { + color: black; + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + overflow: visible; + vertical-align: top; + position: absolute; + left: 0; + right: 0; + white-space: normal; + padding: 0; + margin: 0; + list-style-type: none; + width: 100%; + height: 100%; + display: inline-block; } + +/* prevent flickering when moving buffer */ +ul[rn-carousel-buffered] > li { + display: none; } + +ul[rn-carousel-transition="hexagon"] { + overflow: visible; } + +/* indicators */ +div.rn-carousel-indicator span { + cursor: pointer; + color: #666; } + div.rn-carousel-indicator span.active { + color: white; } + +/* prev/next controls */ +.rn-carousel-control { + -webkit-transition: opacity 0.2s ease-out; + transition: opacity 0.2s ease-out; + font-size: 2rem; + position: absolute; + top: 40%; + opacity: 0.75; + cursor: pointer; } + .rn-carousel-control:hover { + opacity: 1; } + .rn-carousel-control.rn-carousel-control-prev { + left: 0.5em; } + .rn-carousel-control.rn-carousel-control-prev:before { + content: "<"; } + .rn-carousel-control.rn-carousel-control-next { + right: 0.5em; } + .rn-carousel-control.rn-carousel-control-next:before { + content: ">"; } diff --git a/etc/css/angular-circular-navigation.css b/etc/css/angular-circular-navigation.css new file mode 100644 index 00000000..b2143741 --- /dev/null +++ b/etc/css/angular-circular-navigation.css @@ -0,0 +1,296 @@ +.cn-button { + margin-top: -1.5em; + margin-left: -1.5em; + width: 3em; + height: 3em; } + +.cn-button.small { + margin-top: -1em; + margin-left: -1em; + width: 2em; + height: 2em; } + +.cn-button.big { + margin-top: -2em; + margin-left: -2em; + width: 4em; + height: 4em; } + +.cn-wrapper { + margin-top: -7em; + margin-left: -7em; + width: 14em; + height: 14em; } + +.cn-wrapper.small { + margin-top: -5.25em; + margin-left: -5.25em; + width: 10.5em; + height: 10.5em; } + +.cn-wrapper.big { + margin-top: -8.75em; + margin-left: -8.75em; + width: 17.5em; + height: 17.5em; } + +.cn-wrapper li { + margin-top: -2.6em; + margin-left: -8em; + width: 8em; + height: 8em; } + +.cn-wrapper.small li { + margin-top: -1.6em; + margin-left: -6em; + width: 6em; + height: 6em; } + +.cn-wrapper.big li { + margin-top: -3.5em; + margin-left: -10em; + width: 10em; + height: 10em; } + +.cn-wrapper li a { + right: -4em; + bottom: -4em; + width: 8em; + height: 8em; } + +.cn-wrapper.small li a { + right: -3.4em; + bottom: -3em; + width: 7.2em; + height: 6.2em; } + +.cn-wrapper.big li a { + right: -5em; + bottom: -5em; + width: 10em; + height: 10em; } + +circular *, .circular * { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + list-style: none; + position: relative; } + +circular, .circular { + position: absolute; + top: 100%; + left: 50%; } + +.cn-button { + position: absolute; + top: 100%; + left: 50%; + z-index: 11; + padding-top: 0em; + border: none; + border-radius: 50%; + background: none; + background-color: #0A833D; + color: #ffffff; + text-align: center; + font-weight: 700; + font-size: 1.3em; + text-transform: uppercase; + cursor: pointer; + -webkit-backface-visibility: hidden; + outline: 0; } + +.cn-wrapper { + position: absolute; + top: 100%; + left: 50%; + z-index: 10; + border-radius: 50%; + background: transparent; + opacity: 0; + -webkit-transition: all .3s ease 0.3s; + -moz-transition: all .3s ease 0.3s; + transition: all .3s ease 0.3s; + -webkit-transform: scale(0.1); + -ms-transform: scale(0.1); + transform: scale(0.1); + pointer-events: none; + overflow: hidden; } + +.opened-nav { + border-radius: 50%; + opacity: 1; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + transition: all .3s ease; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + pointer-events: auto; } + +.cn-wrapper li { + position: absolute; + top: 50%; + left: 50%; + overflow: hidden; + font-size: 1.3em; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + transition: all .3s ease; + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + pointer-events: none; } + +.cn-wrapper li a { + position: absolute; + display: block; + border-radius: 50%; + background: #0A833D; + opacity: 0.7; + color: #ffffff; + text-align: center; + text-decoration: none; + font-size: 1.2em; + line-height: 2.5; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: auto; + cursor: pointer; } + +.cn-wrapper li a.is-active { + opacity: 1; } + +.cn-wrapper li a:hover, +.cn-wrapper li a:active, +.cn-wrapper li a:focus { + opacity: 0.9; } + +.cn-wrapper li a.is-active:hover, +.cn-wrapper li a.is-active:active, +.cn-wrapper li a.is-active:focus { + opacity: 0.9; } + +.cn-wrapper li a span { + position: relative; + top: 1.8em; + display: block; + font-size: .5em; + font-weight: 700; + text-transform: uppercase; } + +.opened-nav li { + -webkit-transition: all .3s ease .3s; + -moz-transition: all .3s ease .3s; + transition: all .3s ease .3s; } + +.item-odd-left-5, .opened-nav.items-11 li:first-child { + -webkit-transform: rotate(-105deg) skew(60deg); + -ms-transform: rotate(-105deg) skew(60deg); + transform: rotate(-105deg) skew(60deg); } + +.item-odd-left-4, .opened-nav.items-9 li:first-child, .opened-nav.items-11 li:nth-child(2) { + -webkit-transform: rotate(-63deg) skew(60deg); + -ms-transform: rotate(-63deg) skew(60deg); + transform: rotate(-63deg) skew(60deg); } + +.item-odd-left-3, .opened-nav.items-7 li:first-child, .opened-nav.items-9 li:nth-child(2), .opened-nav.items-11 li:nth-child(3) { + -webkit-transform: rotate(-21deg) skew(60deg); + -ms-transform: rotate(-21deg) skew(60deg); + transform: rotate(-21deg) skew(60deg); } + +.item-odd-left-2, .opened-nav.items-5 li:first-child, .opened-nav.items-7 li:nth-child(2), .opened-nav.items-9 li:nth-child(3), .opened-nav.items-11 li:nth-child(4) { + -webkit-transform: rotate(11deg) skew(60deg); + -ms-transform: rotate(11deg) skew(60deg); + transform: rotate(11deg) skew(60deg); } + +.item-odd-left-1, .opened-nav.items-3 li:first-child, .opened-nav.items-5 li:nth-child(2), .opened-nav.items-7 li:nth-child(3), .opened-nav.items-9 li:nth-child(4), .opened-nav.items-11 li:nth-child(5) { + -webkit-transform: rotate(23deg) skew(60deg); + -ms-transform: rotate(23deg) skew(60deg); + transform: rotate(23deg) skew(60deg); } + +.item-odd-center, .cn-wrapper li, .opened-nav.items-1 li:first-child, .opened-nav.items-3 li:nth-child(2), .opened-nav.items-5 li:nth-child(3), .opened-nav.items-7 li:nth-child(4), .opened-nav.items-9 li:nth-child(5), .opened-nav.items-11 li:nth-child(6) { + -webkit-transform: rotate(75deg) skew(60deg); + -ms-transform: rotate(75deg) skew(60deg); + transform: rotate(75deg) skew(60deg); } + +.item-odd-right-1, .opened-nav.items-3 li:nth-child(3), .opened-nav.items-5 li:nth-child(4), .opened-nav.items-7 li:nth-child(5), .opened-nav.items-9 li:nth-child(6), .opened-nav.items-11 li:nth-child(7) { + -webkit-transform: rotate(127deg) skew(60deg); + -ms-transform: rotate(127deg) skew(60deg); + transform: rotate(127deg) skew(60deg); } + +.item-odd-right-2, .opened-nav.items-5 li:nth-child(5), .opened-nav.items-7 li:nth-child(6), .opened-nav.items-9 li:nth-child(7), .opened-nav.items-11 li:nth-child(8) { + -webkit-transform: rotate(139deg) skew(60deg); + -ms-transform: rotate(139deg) skew(60deg); + transform: rotate(139deg) skew(60deg); } + +.item-odd-right-3, .opened-nav.items-7 li:nth-child(7), .opened-nav.items-9 li:nth-child(8), .opened-nav.items-11 li:nth-child(9) { + -webkit-transform: rotate(171deg) skew(60deg); + -ms-transform: rotate(171deg) skew(60deg); + transform: rotate(171deg) skew(60deg); } + +.item-odd-right-4, .opened-nav.items-9 li:nth-child(9), .opened-nav.items-11 li:nth-child(10) { + -webkit-transform: rotate(213deg) skew(60deg); + -ms-transform: rotate(213deg) skew(60deg); + transform: rotate(213deg) skew(60deg); } + +.item-odd-right-5, .opened-nav.items-11 li:nth-child(11) { + -webkit-transform: rotate(235deg) skew(60deg); + -ms-transform: rotate(235deg) skew(60deg); + transform: rotate(235deg) skew(60deg); } + +.item-even-left-5, .opened-nav.items-10 li:first-child { + -webkit-transform: rotate(-69deg) skew(60deg); + -ms-transform: rotate(-69deg) skew(60deg); + transform: rotate(-69deg) skew(60deg); } + +.item-even-left-4, .opened-nav.items-8 li:first-child, .opened-nav.items-10 li:nth-child(2) { + -webkit-transform: rotate(-37deg) skew(60deg); + -ms-transform: rotate(-37deg) skew(60deg); + transform: rotate(-37deg) skew(60deg); } + +.item-even-left-3, .opened-nav.items-6 li:first-child, .opened-nav.items-8 li:nth-child(2), .opened-nav.items-10 li:nth-child(3) { + -webkit-transform: rotate(-5deg) skew(60deg); + -ms-transform: rotate(-5deg) skew(60deg); + transform: rotate(-5deg) skew(60deg); } + +.item-even-left-2, .opened-nav.items-4 li:first-child, .opened-nav.items-6 li:nth-child(2), .opened-nav.items-8 li:nth-child(3), .opened-nav.items-10 li:nth-child(4) { + -webkit-transform: rotate(27deg) skew(60deg); + -ms-transform: rotate(27deg) skew(60deg); + transform: rotate(27deg) skew(60deg); } + +.item-even-left-1, .opened-nav.items-2 li:first-child, .opened-nav.items-4 li:nth-child(2), .opened-nav.items-6 li:nth-child(3), .opened-nav.items-8 li:nth-child(4), .opened-nav.items-10 li:nth-child(5) { + -webkit-transform: rotate(59deg) skew(60deg); + -ms-transform: rotate(59deg) skew(60deg); + transform: rotate(59deg) skew(60deg); } + +.item-even-right-1, .opened-nav.items-2 li:nth-child(2), .opened-nav.items-4 li:nth-child(3), .opened-nav.items-6 li:nth-child(4), .opened-nav.items-8 li:nth-child(5), .opened-nav.items-10 li:nth-child(6) { + -webkit-transform: rotate(91deg) skew(60deg); + -ms-transform: rotate(91deg) skew(60deg); + transform: rotate(91deg) skew(60deg); } + +.item-even-right-2, .opened-nav.items-4 li:nth-child(4), .opened-nav.items-6 li:nth-child(5), .opened-nav.items-8 li:nth-child(6), .opened-nav.items-10 li:nth-child(7) { + -webkit-transform: rotate(123deg) skew(60deg); + -ms-transform: rotate(123deg) skew(60deg); + transform: rotate(123deg) skew(60deg); } + +.item-even-right-3, .opened-nav.items-6 li:nth-child(6), .opened-nav.items-8 li:nth-child(7), .opened-nav.items-10 li:nth-child(8) { + -webkit-transform: rotate(155deg) skew(60deg); + -ms-transform: rotate(155deg) skew(60deg); + transform: rotate(155deg) skew(60deg); } + +.item-even-right-4, .opened-nav.items-8 li:nth-child(8), .opened-nav.items-10 li:nth-child(9) { + -webkit-transform: rotate(187deg) skew(60deg); + -ms-transform: rotate(187deg) skew(60deg); + transform: rotate(187deg) skew(60deg); } + +.item-even-right-5, .opened-nav.items-10 li:nth-child(10) { + -webkit-transform: rotate(219deg) skew(60deg); + -ms-transform: rotate(219deg) skew(60deg); + transform: rotate(219deg) skew(60deg); } + +.cn-wrapper li a { + -webkit-transform: skew(-60deg) rotate(-75deg) scale(1); + -ms-transform: skew(-60deg) rotate(-75deg) scale(1); + transform: skew(-60deg) rotate(-75deg) scale(1); } diff --git a/etc/css/custommfb.scss b/etc/css/custommfb.scss new file mode 100644 index 00000000..20dbeb58 --- /dev/null +++ b/etc/css/custommfb.scss @@ -0,0 +1,404 @@ +/** + * CONTENTS + * + * #Introduction........Naming conventions used throughout the code. + * + * #SETTINGS + * Variables............Globally-available variables and config. + * + * #TOOLS + * Mixins...............Useful mixins. + * + * #GENERIC + * Demo styles..........Styles for demo only (consider removing these). + * + * #BASE + * Raw styles...........The very basic component wrapper. + * Modifiers............The basic styles dependant on component placement. + * Debuggers............The basic styles dependant on component placement. + * + * #BUTTONS + * Base..................Wrapping and constraining every button. + * Modifiers.............Styles that depends on state and settings. + * Animations............Main animations of the component. + * Debuggers.............Styles for development. + * + * #LABELS + * Base..................Wrapping and constraining every label. + * Modifiers.............Styles that depends on state and settings. + * Debuggers.............Styles for development. + * + * #DEVELOPMENT + * In development........These styles are in development and not yet finalised + * Debuggers.............Helper styles and flags for development. + */ + +/*------------------------------------*\ + #Introduction +\*------------------------------------*/ +/** + * The code AND the comments use naming conventions to refer to each part of + * the UI put in place by this component. If you see that somewhere they are + * not followed please consider a Pull Request. The naming conventions are: + * + * "Component" : the widget itself as a whole. This is the last time it will be + * called anything different than "component". So, stay away from + * "widget", "button" or anything else when referring to the + * Component in general. + * + * "Main Button" : the button that is always in view. Hovering or clicking on it + * will reveal the child buttons. + * + * "Child buttons" : if you've read the previous point you know what they are. + * Did you read the previous point? :) + * + * "Label(s)" : the tooltip that fades in when hovering over a button. + +/*------------------------------------*\ + #SETTINGS | Variables +\*------------------------------------*/ + +/** + * These variables are the default styles that serve as fallback and can be + * easily customised at compile time. + * Consider overriding them in your own style sheets rather than editing them + * here. Refer to the docs for more info. + */ + +/* COLORS ----------------------------*/ + +// the main/primary color +$main-color: #E40A5D !default; +// aka the white text +$bright-text: rgba(255, 255, 255, 0.8) !default; + +/* EFFECTS ---------------------------*/ + +// which effects must be made available in the css +$effects-zoomin: true !default; +$effects-slidein: true !default; +$effects-fountain: true !default; + +/* SPEEDS ----------------------------*/ + +// the speed of the inflation of each button after hovering on the main button +$delay-staggering-inflate: 0.1s !default; +// when hovering on the main button the child buttons slide into view +$slide-speed: .5s !default; +// the labels disappear at this speed on mouse out +$label-hover-off: .5s !default; +// the labels appear at this speed on mouse over +$label-hover-on: .3s !default; + +/* SIZES -----------------------------*/ + +// main button diameter +$main_button_size: 45px !default; +// main button diameter +$child_button_size: 45px !default; +// the distance of the main button from the closest corners of the screen +$border-distance: 20px !default; +// font-size for labels +$labels-font-size: 12px !default; +// top & bottom padding for the labels +$labels-padding-vertical: 4px !default; +// left & right padding for the labels +$labels-padding-horizontal: 10px !default; + +/* SPACING ---------------------------*/ + +// space between buttons +$button-space: 50px !default; + +// space between button and label +$button-label-space: 50px !default; + +/* OTHER VARIABLES -------------------*/ + +// how many child buttons does the component have +$number-of-child-buttons: 4 !default; + +/*------------------------------------*\ + #BASE | Raw styles +\*------------------------------------*/ + +/** + * The very core styling of the button. + * These styles are shared by every instance of the button. + * Styles placed here should NOT care about placement in the screen, + * options chosen by the user or state of the button. + */ + +%mfb-component{ + box-sizing: border-box; // A better box-sizing + margin: $border-distance; + position: fixed; + white-space: nowrap; + z-index: 30; + // this padding is really needed only if the element is an <ul> + // otherwise it can probably be ditched. + padding-left: 0; + list-style: none; + + // make sure that everything inside this component + // inherits the same box-sizing + *, *:before, *:after { + box-sizing: inherit; + } +} + + +/*------------------------------------*\ + #BASE | Modifiers +\*------------------------------------*/ +/** + * These styles depends on the placement of the button. + * Styles can be: + * 1. Top-left: modified by the " --tl " suffix. + * 2. Top-right: modified by the " --tr " suffix. + * 3. Bottom-left: modified by the " --bl " suffix. + * 4. Bottom-right: modified by the " --br " suffix. + */ + +.mfb-component--tl{ + @extend %mfb-component; + left: 0; top: 0; +} +.mfb-component--tr{ + @extend %mfb-component; + right: 0; top: 0; +} +.mfb-component--bl{ + @extend %mfb-component; + left: 0; bottom: 0; +} +.mfb-component--br{ + @extend %mfb-component; + right: 0; bottom: 0; +} + + +/*------------------------------------*\ + #BUTTONS | Base +\*------------------------------------*/ + +%mfb-component__button{ + background-color: $main-color; + display: inline-block; + position: relative; + border: none; + border-radius: 50%; + /* box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); - PP */ + opacity:0.8; /* PP */ + cursor: pointer; + outline: none; + padding: 0; + position: relative; + -webkit-user-drag: none; + font-weight: bold; + color: #f1f1f1; +} + +/** + * This is the unordered list for the list items that contain + * the child buttons. + * + */ +.mfb-component__list{ + list-style: none; + margin: 0; + padding: 0; + &>li{ + display: block; + position: absolute; + top: 0; + right: ($main_button_size - $child_button_size + 2) / 2; + padding: 10px + ($main_button_size - $child_button_size) / 2 0; + margin: -(10px + ($main_button_size - $child_button_size) / 2) 0; + } +} + +/** + * These are the basic styles for all the icons inside the main button + */ +.mfb-component__icon{ + position: absolute; + font-size: 18px; + text-align: center; + line-height: 45px; + width: 100%; +} + +.mfb-component__wrap{ + // this double declaration adds some padding to the main button + // to expand the area that triggers the hover state. The equal, negative + // margin evens out the distance form the borders so that the button + // does not shift out of position. + padding: $border-distance; + margin: -$border-distance; +} + +[data-mfb-toggle="hover"]:hover, +[data-mfb-state="open"]{ + .mfb-component__icon { + -webkit-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } +} + + +/*------------------------------------*\ + #BUTTONS | Modifiers +\*------------------------------------*/ + +.mfb-component__button--main{ + @extend %mfb-component__button; + height: $main_button_size; + width: $main_button_size; + z-index: 20; +} +.mfb-component__button--child{ + @extend %mfb-component__button; + height: $child_button_size; + width: $child_button_size; +} +// the icons for the main button +.mfb-component__main-icon--active, +.mfb-component__main-icon--resting{ + @extend .mfb-component__icon; + -webkit-transform: scale(1) rotate(360deg); + transform: scale(1) rotate(360deg); + -webkit-transition: -webkit-transform 150ms cubic-bezier(.4,0,1,1); + transition: transform 150ms cubic-bezier(.4,0,1,1); +} +// the icons for the main button +.mfb-component__child-icon, +.mfb-component__child-icon{ + @extend .mfb-component__icon; + line-height: $child_button_size; + font-size: 18 / 56 * $child_button_size; +} +.mfb-component__main-icon--active{ + opacity: 0; +} +[data-mfb-toggle="hover"]:hover, +[data-mfb-state="open"]{ + .mfb-component__main-icon{ + -webkit-transform: scale(1) rotate(0deg); + transform: scale(1) rotate(0deg); + } + .mfb-component__main-icon--resting{ + opacity: 0; + // don't remove this, needed for ng-mfb downstream repo! + position: absolute !important; + } + .mfb-component__main-icon--active{ + opacity: 1; + } +} + +/*------------------------------------*\ + #BUTTONS | Animations +\*------------------------------------*/ + +@import "_/_slidein"; +@import "_/_slidein-spring"; +@import "_/_zoomin"; +@import "_/_fountain"; + +// Ugly work-around for this https://github.com/sass/sass/issues/451 +@if $effects-slidein == true { + @include effects-slidein; +} +@if $effects-slidein == true { + @include effects-slidein-spring; +} +@if $effects-zoomin == true { + @include effects-zoomin; +} +@if $effects-fountain == true { + @include effects-fountain; +} + +/*------------------------------------*\ + #LABELS | base +\*------------------------------------*/ + +/** + * These are the labels associated to each button, + * exposed only when hovering the related button. + * They are called labels but are in fact data-attributes of + * each button (an anchor tag). + */ + +[data-mfb-label]:after { + content: attr(data-mfb-label); + opacity: 0; + transition: all $label-hover-off; + background: rgba(0,0,0, .4); + padding: $labels-padding-vertical $labels-padding-horizontal; + border-radius: 3px; + color: $bright-text; + font-size: $labels-font-size; + pointer-events: none; + position: absolute; + top: 50%; + margin-top: - ($labels-padding-vertical + $labels-font-size / 2); + transition: all $label-hover-off; // the label disappears at this speed +} +[data-mfb-toggle="hover"] [data-mfb-label]:hover:after, +[data-mfb-state="open"] [data-mfb-label]:after{ + content: attr(data-mfb-label); + opacity: 1; + transition: all $label-hover-on; // the label appears at this speed +} +/*------------------------------------*\ + #LABELS | Modifiers +\*------------------------------------*/ +.mfb-component--br, .mfb-component--tr{ + [data-mfb-label]:after { + content: attr(data-mfb-label); + right: $button-label-space; + } +} +.mfb-component--br .mfb-component__list, .mfb-component--tr .mfb-component__list { + [data-mfb-label]:after { + content: attr(data-mfb-label); + right: $button-label-space - ($main_button_size - $child_button_size) / 2; + } +} +.mfb-component--tl, .mfb-component--bl{ + [data-mfb-label]:after { + content: attr(data-mfb-label); + left: $button-label-space; + } +} +.mfb-component--tl .mfb-component__list, .mfb-component--bl .mfb-component__list{ + [data-mfb-label]:after { + content: attr(data-mfb-label); + left: $button-label-space - ($main_button_size - $child_button_size) / 2; + } +} +/*------------------------------------*\ + #DEVELOPMENT | In development +\*------------------------------------*/ +/** + * This part is where unfinished code should stay. + * When a feature is ready(sh) move these styles to their proper place. + */ + + + +/*------------------------------------*\ + #DEVELOPMENT | Debuggers +\*------------------------------------*/ + +/** + * These are mainly helpers for development. They do not have to end up + * in production but it's handy to keep them when developing. + */ + + +/** + * Apply this class to the html tag when developing the slide-in button + */ diff --git a/etc/css/ionic.app.css b/etc/css/ionic.app.css new file mode 100644 index 00000000..c3bf964b --- /dev/null +++ b/etc/css/ionic.app.css @@ -0,0 +1,9864 @@ +@charset "UTF-8"; +/* +To customize the look and feel of Ionic, you can override the variables +in ionic's _variables.scss file. + +For example, you might change some of the default colors: */ +/*! + Ionicons, v2.0.1 + Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ + https://twitter.com/benjsperry https://twitter.com/ionicframework + MIT License: https://github.com/ionic-team/ionicons + + Android-style icons originally built by Google’s + Material Design Icons: https://github.com/google/material-design-icons + used under CC BY http://creativecommons.org/licenses/by/4.0/ + Modified icons to fit ionicon’s grid from original. +*/ +@font-face { + font-family: "Ionicons"; + src: url("../lib/ionic/fonts/ionicons.eot?v=2.0.1"); + src: url("../lib/ionic/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../lib/ionic/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("../lib/ionic/fonts/ionicons.woff?v=2.0.1") format("woff"), url("../lib/ionic/fonts/ionicons.woff") format("woff"), url("../lib/ionic/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg"); + font-weight: normal; + font-style: normal; } + +.ion, .ionicons, +.ion-alert:before, +.ion-alert-circled:before, +.ion-android-add:before, +.ion-android-add-circle:before, +.ion-android-alarm-clock:before, +.ion-android-alert:before, +.ion-android-apps:before, +.ion-android-archive:before, +.ion-android-arrow-back:before, +.ion-android-arrow-down:before, +.ion-android-arrow-dropdown:before, +.ion-android-arrow-dropdown-circle:before, +.ion-android-arrow-dropleft:before, +.ion-android-arrow-dropleft-circle:before, +.ion-android-arrow-dropright:before, +.ion-android-arrow-dropright-circle:before, +.ion-android-arrow-dropup:before, +.ion-android-arrow-dropup-circle:before, +.ion-android-arrow-forward:before, +.ion-android-arrow-up:before, +.ion-android-attach:before, +.ion-android-bar:before, +.ion-android-bicycle:before, +.ion-android-boat:before, +.ion-android-bookmark:before, +.ion-android-bulb:before, +.ion-android-bus:before, +.ion-android-calendar:before, +.ion-android-call:before, +.ion-android-camera:before, +.ion-android-cancel:before, +.ion-android-car:before, +.ion-android-cart:before, +.ion-android-chat:before, +.ion-android-checkbox:before, +.ion-android-checkbox-blank:before, +.ion-android-checkbox-outline:before, +.ion-android-checkbox-outline-blank:before, +.ion-android-checkmark-circle:before, +.ion-android-clipboard:before, +.ion-android-close:before, +.ion-android-cloud:before, +.ion-android-cloud-circle:before, +.ion-android-cloud-done:before, +.ion-android-cloud-outline:before, +.ion-android-color-palette:before, +.ion-android-compass:before, +.ion-android-contact:before, +.ion-android-contacts:before, +.ion-android-contract:before, +.ion-android-create:before, +.ion-android-delete:before, +.ion-android-desktop:before, +.ion-android-document:before, +.ion-android-done:before, +.ion-android-done-all:before, +.ion-android-download:before, +.ion-android-drafts:before, +.ion-android-exit:before, +.ion-android-expand:before, +.ion-android-favorite:before, +.ion-android-favorite-outline:before, +.ion-android-film:before, +.ion-android-folder:before, +.ion-android-folder-open:before, +.ion-android-funnel:before, +.ion-android-globe:before, +.ion-android-hand:before, +.ion-android-hangout:before, +.ion-android-happy:before, +.ion-android-home:before, +.ion-android-image:before, +.ion-android-laptop:before, +.ion-android-list:before, +.ion-android-locate:before, +.ion-android-lock:before, +.ion-android-mail:before, +.ion-android-map:before, +.ion-android-menu:before, +.ion-android-microphone:before, +.ion-android-microphone-off:before, +.ion-android-more-horizontal:before, +.ion-android-more-vertical:before, +.ion-android-navigate:before, +.ion-android-notifications:before, +.ion-android-notifications-none:before, +.ion-android-notifications-off:before, +.ion-android-open:before, +.ion-android-options:before, +.ion-android-people:before, +.ion-android-person:before, +.ion-android-person-add:before, +.ion-android-phone-landscape:before, +.ion-android-phone-portrait:before, +.ion-android-pin:before, +.ion-android-plane:before, +.ion-android-playstore:before, +.ion-android-print:before, +.ion-android-radio-button-off:before, +.ion-android-radio-button-on:before, +.ion-android-refresh:before, +.ion-android-remove:before, +.ion-android-remove-circle:before, +.ion-android-restaurant:before, +.ion-android-sad:before, +.ion-android-search:before, +.ion-android-send:before, +.ion-android-settings:before, +.ion-android-share:before, +.ion-android-share-alt:before, +.ion-android-star:before, +.ion-android-star-half:before, +.ion-android-star-outline:before, +.ion-android-stopwatch:before, +.ion-android-subway:before, +.ion-android-sunny:before, +.ion-android-sync:before, +.ion-android-textsms:before, +.ion-android-time:before, +.ion-android-train:before, +.ion-android-unlock:before, +.ion-android-upload:before, +.ion-android-volume-down:before, +.ion-android-volume-mute:before, +.ion-android-volume-off:before, +.ion-android-volume-up:before, +.ion-android-walk:before, +.ion-android-warning:before, +.ion-android-watch:before, +.ion-android-wifi:before, +.ion-aperture:before, +.ion-archive:before, +.ion-arrow-down-a:before, +.ion-arrow-down-b:before, +.ion-arrow-down-c:before, +.ion-arrow-expand:before, +.ion-arrow-graph-down-left:before, +.ion-arrow-graph-down-right:before, +.ion-arrow-graph-up-left:before, +.ion-arrow-graph-up-right:before, +.ion-arrow-left-a:before, +.ion-arrow-left-b:before, +.ion-arrow-left-c:before, +.ion-arrow-move:before, +.ion-arrow-resize:before, +.ion-arrow-return-left:before, +.ion-arrow-return-right:before, +.ion-arrow-right-a:before, +.ion-arrow-right-b:before, +.ion-arrow-right-c:before, +.ion-arrow-shrink:before, +.ion-arrow-swap:before, +.ion-arrow-up-a:before, +.ion-arrow-up-b:before, +.ion-arrow-up-c:before, +.ion-asterisk:before, +.ion-at:before, +.ion-backspace:before, +.ion-backspace-outline:before, +.ion-bag:before, +.ion-battery-charging:before, +.ion-battery-empty:before, +.ion-battery-full:before, +.ion-battery-half:before, +.ion-battery-low:before, +.ion-beaker:before, +.ion-beer:before, +.ion-bluetooth:before, +.ion-bonfire:before, +.ion-bookmark:before, +.ion-bowtie:before, +.ion-briefcase:before, +.ion-bug:before, +.ion-calculator:before, +.ion-calendar:before, +.ion-camera:before, +.ion-card:before, +.ion-cash:before, +.ion-chatbox:before, +.ion-chatbox-working:before, +.ion-chatboxes:before, +.ion-chatbubble:before, +.ion-chatbubble-working:before, +.ion-chatbubbles:before, +.ion-checkmark:before, +.ion-checkmark-circled:before, +.ion-checkmark-round:before, +.ion-chevron-down:before, +.ion-chevron-left:before, +.ion-chevron-right:before, +.ion-chevron-up:before, +.ion-clipboard:before, +.ion-clock:before, +.ion-close:before, +.ion-close-circled:before, +.ion-close-round:before, +.ion-closed-captioning:before, +.ion-cloud:before, +.ion-code:before, +.ion-code-download:before, +.ion-code-working:before, +.ion-coffee:before, +.ion-compass:before, +.ion-compose:before, +.ion-connection-bars:before, +.ion-contrast:before, +.ion-crop:before, +.ion-cube:before, +.ion-disc:before, +.ion-document:before, +.ion-document-text:before, +.ion-drag:before, +.ion-earth:before, +.ion-easel:before, +.ion-edit:before, +.ion-egg:before, +.ion-eject:before, +.ion-email:before, +.ion-email-unread:before, +.ion-erlenmeyer-flask:before, +.ion-erlenmeyer-flask-bubbles:before, +.ion-eye:before, +.ion-eye-disabled:before, +.ion-female:before, +.ion-filing:before, +.ion-film-marker:before, +.ion-fireball:before, +.ion-flag:before, +.ion-flame:before, +.ion-flash:before, +.ion-flash-off:before, +.ion-folder:before, +.ion-fork:before, +.ion-fork-repo:before, +.ion-forward:before, +.ion-funnel:before, +.ion-gear-a:before, +.ion-gear-b:before, +.ion-grid:before, +.ion-hammer:before, +.ion-happy:before, +.ion-happy-outline:before, +.ion-headphone:before, +.ion-heart:before, +.ion-heart-broken:before, +.ion-help:before, +.ion-help-buoy:before, +.ion-help-circled:before, +.ion-home:before, +.ion-icecream:before, +.ion-image:before, +.ion-images:before, +.ion-information:before, +.ion-information-circled:before, +.ion-ionic:before, +.ion-ios-alarm:before, +.ion-ios-alarm-outline:before, +.ion-ios-albums:before, +.ion-ios-albums-outline:before, +.ion-ios-americanfootball:before, +.ion-ios-americanfootball-outline:before, +.ion-ios-analytics:before, +.ion-ios-analytics-outline:before, +.ion-ios-arrow-back:before, +.ion-ios-arrow-down:before, +.ion-ios-arrow-forward:before, +.ion-ios-arrow-left:before, +.ion-ios-arrow-right:before, +.ion-ios-arrow-thin-down:before, +.ion-ios-arrow-thin-left:before, +.ion-ios-arrow-thin-right:before, +.ion-ios-arrow-thin-up:before, +.ion-ios-arrow-up:before, +.ion-ios-at:before, +.ion-ios-at-outline:before, +.ion-ios-barcode:before, +.ion-ios-barcode-outline:before, +.ion-ios-baseball:before, +.ion-ios-baseball-outline:before, +.ion-ios-basketball:before, +.ion-ios-basketball-outline:before, +.ion-ios-bell:before, +.ion-ios-bell-outline:before, +.ion-ios-body:before, +.ion-ios-body-outline:before, +.ion-ios-bolt:before, +.ion-ios-bolt-outline:before, +.ion-ios-book:before, +.ion-ios-book-outline:before, +.ion-ios-bookmarks:before, +.ion-ios-bookmarks-outline:before, +.ion-ios-box:before, +.ion-ios-box-outline:before, +.ion-ios-briefcase:before, +.ion-ios-briefcase-outline:before, +.ion-ios-browsers:before, +.ion-ios-browsers-outline:before, +.ion-ios-calculator:before, +.ion-ios-calculator-outline:before, +.ion-ios-calendar:before, +.ion-ios-calendar-outline:before, +.ion-ios-camera:before, +.ion-ios-camera-outline:before, +.ion-ios-cart:before, +.ion-ios-cart-outline:before, +.ion-ios-chatboxes:before, +.ion-ios-chatboxes-outline:before, +.ion-ios-chatbubble:before, +.ion-ios-chatbubble-outline:before, +.ion-ios-checkmark:before, +.ion-ios-checkmark-empty:before, +.ion-ios-checkmark-outline:before, +.ion-ios-circle-filled:before, +.ion-ios-circle-outline:before, +.ion-ios-clock:before, +.ion-ios-clock-outline:before, +.ion-ios-close:before, +.ion-ios-close-empty:before, +.ion-ios-close-outline:before, +.ion-ios-cloud:before, +.ion-ios-cloud-download:before, +.ion-ios-cloud-download-outline:before, +.ion-ios-cloud-outline:before, +.ion-ios-cloud-upload:before, +.ion-ios-cloud-upload-outline:before, +.ion-ios-cloudy:before, +.ion-ios-cloudy-night:before, +.ion-ios-cloudy-night-outline:before, +.ion-ios-cloudy-outline:before, +.ion-ios-cog:before, +.ion-ios-cog-outline:before, +.ion-ios-color-filter:before, +.ion-ios-color-filter-outline:before, +.ion-ios-color-wand:before, +.ion-ios-color-wand-outline:before, +.ion-ios-compose:before, +.ion-ios-compose-outline:before, +.ion-ios-contact:before, +.ion-ios-contact-outline:before, +.ion-ios-copy:before, +.ion-ios-copy-outline:before, +.ion-ios-crop:before, +.ion-ios-crop-strong:before, +.ion-ios-download:before, +.ion-ios-download-outline:before, +.ion-ios-drag:before, +.ion-ios-email:before, +.ion-ios-email-outline:before, +.ion-ios-eye:before, +.ion-ios-eye-outline:before, +.ion-ios-fastforward:before, +.ion-ios-fastforward-outline:before, +.ion-ios-filing:before, +.ion-ios-filing-outline:before, +.ion-ios-film:before, +.ion-ios-film-outline:before, +.ion-ios-flag:before, +.ion-ios-flag-outline:before, +.ion-ios-flame:before, +.ion-ios-flame-outline:before, +.ion-ios-flask:before, +.ion-ios-flask-outline:before, +.ion-ios-flower:before, +.ion-ios-flower-outline:before, +.ion-ios-folder:before, +.ion-ios-folder-outline:before, +.ion-ios-football:before, +.ion-ios-football-outline:before, +.ion-ios-game-controller-a:before, +.ion-ios-game-controller-a-outline:before, +.ion-ios-game-controller-b:before, +.ion-ios-game-controller-b-outline:before, +.ion-ios-gear:before, +.ion-ios-gear-outline:before, +.ion-ios-glasses:before, +.ion-ios-glasses-outline:before, +.ion-ios-grid-view:before, +.ion-ios-grid-view-outline:before, +.ion-ios-heart:before, +.ion-ios-heart-outline:before, +.ion-ios-help:before, +.ion-ios-help-empty:before, +.ion-ios-help-outline:before, +.ion-ios-home:before, +.ion-ios-home-outline:before, +.ion-ios-infinite:before, +.ion-ios-infinite-outline:before, +.ion-ios-information:before, +.ion-ios-information-empty:before, +.ion-ios-information-outline:before, +.ion-ios-ionic-outline:before, +.ion-ios-keypad:before, +.ion-ios-keypad-outline:before, +.ion-ios-lightbulb:before, +.ion-ios-lightbulb-outline:before, +.ion-ios-list:before, +.ion-ios-list-outline:before, +.ion-ios-location:before, +.ion-ios-location-outline:before, +.ion-ios-locked:before, +.ion-ios-locked-outline:before, +.ion-ios-loop:before, +.ion-ios-loop-strong:before, +.ion-ios-medical:before, +.ion-ios-medical-outline:before, +.ion-ios-medkit:before, +.ion-ios-medkit-outline:before, +.ion-ios-mic:before, +.ion-ios-mic-off:before, +.ion-ios-mic-outline:before, +.ion-ios-minus:before, +.ion-ios-minus-empty:before, +.ion-ios-minus-outline:before, +.ion-ios-monitor:before, +.ion-ios-monitor-outline:before, +.ion-ios-moon:before, +.ion-ios-moon-outline:before, +.ion-ios-more:before, +.ion-ios-more-outline:before, +.ion-ios-musical-note:before, +.ion-ios-musical-notes:before, +.ion-ios-navigate:before, +.ion-ios-navigate-outline:before, +.ion-ios-nutrition:before, +.ion-ios-nutrition-outline:before, +.ion-ios-paper:before, +.ion-ios-paper-outline:before, +.ion-ios-paperplane:before, +.ion-ios-paperplane-outline:before, +.ion-ios-partlysunny:before, +.ion-ios-partlysunny-outline:before, +.ion-ios-pause:before, +.ion-ios-pause-outline:before, +.ion-ios-paw:before, +.ion-ios-paw-outline:before, +.ion-ios-people:before, +.ion-ios-people-outline:before, +.ion-ios-person:before, +.ion-ios-person-outline:before, +.ion-ios-personadd:before, +.ion-ios-personadd-outline:before, +.ion-ios-photos:before, +.ion-ios-photos-outline:before, +.ion-ios-pie:before, +.ion-ios-pie-outline:before, +.ion-ios-pint:before, +.ion-ios-pint-outline:before, +.ion-ios-play:before, +.ion-ios-play-outline:before, +.ion-ios-plus:before, +.ion-ios-plus-empty:before, +.ion-ios-plus-outline:before, +.ion-ios-pricetag:before, +.ion-ios-pricetag-outline:before, +.ion-ios-pricetags:before, +.ion-ios-pricetags-outline:before, +.ion-ios-printer:before, +.ion-ios-printer-outline:before, +.ion-ios-pulse:before, +.ion-ios-pulse-strong:before, +.ion-ios-rainy:before, +.ion-ios-rainy-outline:before, +.ion-ios-recording:before, +.ion-ios-recording-outline:before, +.ion-ios-redo:before, +.ion-ios-redo-outline:before, +.ion-ios-refresh:before, +.ion-ios-refresh-empty:before, +.ion-ios-refresh-outline:before, +.ion-ios-reload:before, +.ion-ios-reverse-camera:before, +.ion-ios-reverse-camera-outline:before, +.ion-ios-rewind:before, +.ion-ios-rewind-outline:before, +.ion-ios-rose:before, +.ion-ios-rose-outline:before, +.ion-ios-search:before, +.ion-ios-search-strong:before, +.ion-ios-settings:before, +.ion-ios-settings-strong:before, +.ion-ios-shuffle:before, +.ion-ios-shuffle-strong:before, +.ion-ios-skipbackward:before, +.ion-ios-skipbackward-outline:before, +.ion-ios-skipforward:before, +.ion-ios-skipforward-outline:before, +.ion-ios-snowy:before, +.ion-ios-speedometer:before, +.ion-ios-speedometer-outline:before, +.ion-ios-star:before, +.ion-ios-star-half:before, +.ion-ios-star-outline:before, +.ion-ios-stopwatch:before, +.ion-ios-stopwatch-outline:before, +.ion-ios-sunny:before, +.ion-ios-sunny-outline:before, +.ion-ios-telephone:before, +.ion-ios-telephone-outline:before, +.ion-ios-tennisball:before, +.ion-ios-tennisball-outline:before, +.ion-ios-thunderstorm:before, +.ion-ios-thunderstorm-outline:before, +.ion-ios-time:before, +.ion-ios-time-outline:before, +.ion-ios-timer:before, +.ion-ios-timer-outline:before, +.ion-ios-toggle:before, +.ion-ios-toggle-outline:before, +.ion-ios-trash:before, +.ion-ios-trash-outline:before, +.ion-ios-undo:before, +.ion-ios-undo-outline:before, +.ion-ios-unlocked:before, +.ion-ios-unlocked-outline:before, +.ion-ios-upload:before, +.ion-ios-upload-outline:before, +.ion-ios-videocam:before, +.ion-ios-videocam-outline:before, +.ion-ios-volume-high:before, +.ion-ios-volume-low:before, +.ion-ios-wineglass:before, +.ion-ios-wineglass-outline:before, +.ion-ios-world:before, +.ion-ios-world-outline:before, +.ion-ipad:before, +.ion-iphone:before, +.ion-ipod:before, +.ion-jet:before, +.ion-key:before, +.ion-knife:before, +.ion-laptop:before, +.ion-leaf:before, +.ion-levels:before, +.ion-lightbulb:before, +.ion-link:before, +.ion-load-a:before, +.ion-load-b:before, +.ion-load-c:before, +.ion-load-d:before, +.ion-location:before, +.ion-lock-combination:before, +.ion-locked:before, +.ion-log-in:before, +.ion-log-out:before, +.ion-loop:before, +.ion-magnet:before, +.ion-male:before, +.ion-man:before, +.ion-map:before, +.ion-medkit:before, +.ion-merge:before, +.ion-mic-a:before, +.ion-mic-b:before, +.ion-mic-c:before, +.ion-minus:before, +.ion-minus-circled:before, +.ion-minus-round:before, +.ion-model-s:before, +.ion-monitor:before, +.ion-more:before, +.ion-mouse:before, +.ion-music-note:before, +.ion-navicon:before, +.ion-navicon-round:before, +.ion-navigate:before, +.ion-network:before, +.ion-no-smoking:before, +.ion-nuclear:before, +.ion-outlet:before, +.ion-paintbrush:before, +.ion-paintbucket:before, +.ion-paper-airplane:before, +.ion-paperclip:before, +.ion-pause:before, +.ion-person:before, +.ion-person-add:before, +.ion-person-stalker:before, +.ion-pie-graph:before, +.ion-pin:before, +.ion-pinpoint:before, +.ion-pizza:before, +.ion-plane:before, +.ion-planet:before, +.ion-play:before, +.ion-playstation:before, +.ion-plus:before, +.ion-plus-circled:before, +.ion-plus-round:before, +.ion-podium:before, +.ion-pound:before, +.ion-power:before, +.ion-pricetag:before, +.ion-pricetags:before, +.ion-printer:before, +.ion-pull-request:before, +.ion-qr-scanner:before, +.ion-quote:before, +.ion-radio-waves:before, +.ion-record:before, +.ion-refresh:before, +.ion-reply:before, +.ion-reply-all:before, +.ion-ribbon-a:before, +.ion-ribbon-b:before, +.ion-sad:before, +.ion-sad-outline:before, +.ion-scissors:before, +.ion-search:before, +.ion-settings:before, +.ion-share:before, +.ion-shuffle:before, +.ion-skip-backward:before, +.ion-skip-forward:before, +.ion-social-android:before, +.ion-social-android-outline:before, +.ion-social-angular:before, +.ion-social-angular-outline:before, +.ion-social-apple:before, +.ion-social-apple-outline:before, +.ion-social-bitcoin:before, +.ion-social-bitcoin-outline:before, +.ion-social-buffer:before, +.ion-social-buffer-outline:before, +.ion-social-chrome:before, +.ion-social-chrome-outline:before, +.ion-social-codepen:before, +.ion-social-codepen-outline:before, +.ion-social-css3:before, +.ion-social-css3-outline:before, +.ion-social-designernews:before, +.ion-social-designernews-outline:before, +.ion-social-dribbble:before, +.ion-social-dribbble-outline:before, +.ion-social-dropbox:before, +.ion-social-dropbox-outline:before, +.ion-social-euro:before, +.ion-social-euro-outline:before, +.ion-social-facebook:before, +.ion-social-facebook-outline:before, +.ion-social-foursquare:before, +.ion-social-foursquare-outline:before, +.ion-social-freebsd-devil:before, +.ion-social-github:before, +.ion-social-github-outline:before, +.ion-social-google:before, +.ion-social-google-outline:before, +.ion-social-googleplus:before, +.ion-social-googleplus-outline:before, +.ion-social-hackernews:before, +.ion-social-hackernews-outline:before, +.ion-social-html5:before, +.ion-social-html5-outline:before, +.ion-social-instagram:before, +.ion-social-instagram-outline:before, +.ion-social-javascript:before, +.ion-social-javascript-outline:before, +.ion-social-linkedin:before, +.ion-social-linkedin-outline:before, +.ion-social-markdown:before, +.ion-social-nodejs:before, +.ion-social-octocat:before, +.ion-social-pinterest:before, +.ion-social-pinterest-outline:before, +.ion-social-python:before, +.ion-social-reddit:before, +.ion-social-reddit-outline:before, +.ion-social-rss:before, +.ion-social-rss-outline:before, +.ion-social-sass:before, +.ion-social-skype:before, +.ion-social-skype-outline:before, +.ion-social-snapchat:before, +.ion-social-snapchat-outline:before, +.ion-social-tumblr:before, +.ion-social-tumblr-outline:before, +.ion-social-tux:before, +.ion-social-twitch:before, +.ion-social-twitch-outline:before, +.ion-social-twitter:before, +.ion-social-twitter-outline:before, +.ion-social-usd:before, +.ion-social-usd-outline:before, +.ion-social-vimeo:before, +.ion-social-vimeo-outline:before, +.ion-social-whatsapp:before, +.ion-social-whatsapp-outline:before, +.ion-social-windows:before, +.ion-social-windows-outline:before, +.ion-social-wordpress:before, +.ion-social-wordpress-outline:before, +.ion-social-yahoo:before, +.ion-social-yahoo-outline:before, +.ion-social-yen:before, +.ion-social-yen-outline:before, +.ion-social-youtube:before, +.ion-social-youtube-outline:before, +.ion-soup-can:before, +.ion-soup-can-outline:before, +.ion-speakerphone:before, +.ion-speedometer:before, +.ion-spoon:before, +.ion-star:before, +.ion-stats-bars:before, +.ion-steam:before, +.ion-stop:before, +.ion-thermometer:before, +.ion-thumbsdown:before, +.ion-thumbsup:before, +.ion-toggle:before, +.ion-toggle-filled:before, +.ion-transgender:before, +.ion-trash-a:before, +.ion-trash-b:before, +.ion-trophy:before, +.ion-tshirt:before, +.ion-tshirt-outline:before, +.ion-umbrella:before, +.ion-university:before, +.ion-unlocked:before, +.ion-upload:before, +.ion-usb:before, +.ion-videocamera:before, +.ion-volume-high:before, +.ion-volume-low:before, +.ion-volume-medium:before, +.ion-volume-mute:before, +.ion-wand:before, +.ion-waterdrop:before, +.ion-wifi:before, +.ion-wineglass:before, +.ion-woman:before, +.ion-wrench:before, +.ion-xbox:before { + display: inline-block; + font-family: "Ionicons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + text-rendering: auto; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.ion-alert:before { + content: ""; } + +.ion-alert-circled:before { + content: ""; } + +.ion-android-add:before { + content: ""; } + +.ion-android-add-circle:before { + content: ""; } + +.ion-android-alarm-clock:before { + content: ""; } + +.ion-android-alert:before { + content: ""; } + +.ion-android-apps:before { + content: ""; } + +.ion-android-archive:before { + content: ""; } + +.ion-android-arrow-back:before { + content: ""; } + +.ion-android-arrow-down:before { + content: ""; } + +.ion-android-arrow-dropdown:before { + content: ""; } + +.ion-android-arrow-dropdown-circle:before { + content: ""; } + +.ion-android-arrow-dropleft:before { + content: ""; } + +.ion-android-arrow-dropleft-circle:before { + content: ""; } + +.ion-android-arrow-dropright:before { + content: ""; } + +.ion-android-arrow-dropright-circle:before { + content: ""; } + +.ion-android-arrow-dropup:before { + content: ""; } + +.ion-android-arrow-dropup-circle:before { + content: ""; } + +.ion-android-arrow-forward:before { + content: ""; } + +.ion-android-arrow-up:before { + content: ""; } + +.ion-android-attach:before { + content: ""; } + +.ion-android-bar:before { + content: ""; } + +.ion-android-bicycle:before { + content: ""; } + +.ion-android-boat:before { + content: ""; } + +.ion-android-bookmark:before { + content: ""; } + +.ion-android-bulb:before { + content: ""; } + +.ion-android-bus:before { + content: ""; } + +.ion-android-calendar:before { + content: ""; } + +.ion-android-call:before { + content: ""; } + +.ion-android-camera:before { + content: ""; } + +.ion-android-cancel:before { + content: ""; } + +.ion-android-car:before { + content: ""; } + +.ion-android-cart:before { + content: ""; } + +.ion-android-chat:before { + content: ""; } + +.ion-android-checkbox:before { + content: ""; } + +.ion-android-checkbox-blank:before { + content: ""; } + +.ion-android-checkbox-outline:before { + content: ""; } + +.ion-android-checkbox-outline-blank:before { + content: ""; } + +.ion-android-checkmark-circle:before { + content: ""; } + +.ion-android-clipboard:before { + content: ""; } + +.ion-android-close:before { + content: ""; } + +.ion-android-cloud:before { + content: ""; } + +.ion-android-cloud-circle:before { + content: ""; } + +.ion-android-cloud-done:before { + content: ""; } + +.ion-android-cloud-outline:before { + content: ""; } + +.ion-android-color-palette:before { + content: ""; } + +.ion-android-compass:before { + content: ""; } + +.ion-android-contact:before { + content: ""; } + +.ion-android-contacts:before { + content: ""; } + +.ion-android-contract:before { + content: ""; } + +.ion-android-create:before { + content: ""; } + +.ion-android-delete:before { + content: ""; } + +.ion-android-desktop:before { + content: ""; } + +.ion-android-document:before { + content: ""; } + +.ion-android-done:before { + content: ""; } + +.ion-android-done-all:before { + content: ""; } + +.ion-android-download:before { + content: ""; } + +.ion-android-drafts:before { + content: ""; } + +.ion-android-exit:before { + content: ""; } + +.ion-android-expand:before { + content: ""; } + +.ion-android-favorite:before { + content: ""; } + +.ion-android-favorite-outline:before { + content: ""; } + +.ion-android-film:before { + content: ""; } + +.ion-android-folder:before { + content: ""; } + +.ion-android-folder-open:before { + content: ""; } + +.ion-android-funnel:before { + content: ""; } + +.ion-android-globe:before { + content: ""; } + +.ion-android-hand:before { + content: ""; } + +.ion-android-hangout:before { + content: ""; } + +.ion-android-happy:before { + content: ""; } + +.ion-android-home:before { + content: ""; } + +.ion-android-image:before { + content: ""; } + +.ion-android-laptop:before { + content: ""; } + +.ion-android-list:before { + content: ""; } + +.ion-android-locate:before { + content: ""; } + +.ion-android-lock:before { + content: ""; } + +.ion-android-mail:before { + content: ""; } + +.ion-android-map:before { + content: ""; } + +.ion-android-menu:before { + content: ""; } + +.ion-android-microphone:before { + content: ""; } + +.ion-android-microphone-off:before { + content: ""; } + +.ion-android-more-horizontal:before { + content: ""; } + +.ion-android-more-vertical:before { + content: ""; } + +.ion-android-navigate:before { + content: ""; } + +.ion-android-notifications:before { + content: ""; } + +.ion-android-notifications-none:before { + content: ""; } + +.ion-android-notifications-off:before { + content: ""; } + +.ion-android-open:before { + content: ""; } + +.ion-android-options:before { + content: ""; } + +.ion-android-people:before { + content: ""; } + +.ion-android-person:before { + content: ""; } + +.ion-android-person-add:before { + content: ""; } + +.ion-android-phone-landscape:before { + content: ""; } + +.ion-android-phone-portrait:before { + content: ""; } + +.ion-android-pin:before { + content: ""; } + +.ion-android-plane:before { + content: ""; } + +.ion-android-playstore:before { + content: ""; } + +.ion-android-print:before { + content: ""; } + +.ion-android-radio-button-off:before { + content: ""; } + +.ion-android-radio-button-on:before { + content: ""; } + +.ion-android-refresh:before { + content: ""; } + +.ion-android-remove:before { + content: ""; } + +.ion-android-remove-circle:before { + content: ""; } + +.ion-android-restaurant:before { + content: ""; } + +.ion-android-sad:before { + content: ""; } + +.ion-android-search:before { + content: ""; } + +.ion-android-send:before { + content: ""; } + +.ion-android-settings:before { + content: ""; } + +.ion-android-share:before { + content: ""; } + +.ion-android-share-alt:before { + content: ""; } + +.ion-android-star:before { + content: ""; } + +.ion-android-star-half:before { + content: ""; } + +.ion-android-star-outline:before { + content: ""; } + +.ion-android-stopwatch:before { + content: ""; } + +.ion-android-subway:before { + content: ""; } + +.ion-android-sunny:before { + content: ""; } + +.ion-android-sync:before { + content: ""; } + +.ion-android-textsms:before { + content: ""; } + +.ion-android-time:before { + content: ""; } + +.ion-android-train:before { + content: ""; } + +.ion-android-unlock:before { + content: ""; } + +.ion-android-upload:before { + content: ""; } + +.ion-android-volume-down:before { + content: ""; } + +.ion-android-volume-mute:before { + content: ""; } + +.ion-android-volume-off:before { + content: ""; } + +.ion-android-volume-up:before { + content: ""; } + +.ion-android-walk:before { + content: ""; } + +.ion-android-warning:before { + content: ""; } + +.ion-android-watch:before { + content: ""; } + +.ion-android-wifi:before { + content: ""; } + +.ion-aperture:before { + content: ""; } + +.ion-archive:before { + content: ""; } + +.ion-arrow-down-a:before { + content: ""; } + +.ion-arrow-down-b:before { + content: ""; } + +.ion-arrow-down-c:before { + content: ""; } + +.ion-arrow-expand:before { + content: ""; } + +.ion-arrow-graph-down-left:before { + content: ""; } + +.ion-arrow-graph-down-right:before { + content: ""; } + +.ion-arrow-graph-up-left:before { + content: ""; } + +.ion-arrow-graph-up-right:before { + content: ""; } + +.ion-arrow-left-a:before { + content: ""; } + +.ion-arrow-left-b:before { + content: ""; } + +.ion-arrow-left-c:before { + content: ""; } + +.ion-arrow-move:before { + content: ""; } + +.ion-arrow-resize:before { + content: ""; } + +.ion-arrow-return-left:before { + content: ""; } + +.ion-arrow-return-right:before { + content: ""; } + +.ion-arrow-right-a:before { + content: ""; } + +.ion-arrow-right-b:before { + content: ""; } + +.ion-arrow-right-c:before { + content: ""; } + +.ion-arrow-shrink:before { + content: ""; } + +.ion-arrow-swap:before { + content: ""; } + +.ion-arrow-up-a:before { + content: ""; } + +.ion-arrow-up-b:before { + content: ""; } + +.ion-arrow-up-c:before { + content: ""; } + +.ion-asterisk:before { + content: ""; } + +.ion-at:before { + content: ""; } + +.ion-backspace:before { + content: ""; } + +.ion-backspace-outline:before { + content: ""; } + +.ion-bag:before { + content: ""; } + +.ion-battery-charging:before { + content: ""; } + +.ion-battery-empty:before { + content: ""; } + +.ion-battery-full:before { + content: ""; } + +.ion-battery-half:before { + content: ""; } + +.ion-battery-low:before { + content: ""; } + +.ion-beaker:before { + content: ""; } + +.ion-beer:before { + content: ""; } + +.ion-bluetooth:before { + content: ""; } + +.ion-bonfire:before { + content: ""; } + +.ion-bookmark:before { + content: ""; } + +.ion-bowtie:before { + content: ""; } + +.ion-briefcase:before { + content: ""; } + +.ion-bug:before { + content: ""; } + +.ion-calculator:before { + content: ""; } + +.ion-calendar:before { + content: ""; } + +.ion-camera:before { + content: ""; } + +.ion-card:before { + content: ""; } + +.ion-cash:before { + content: ""; } + +.ion-chatbox:before { + content: ""; } + +.ion-chatbox-working:before { + content: ""; } + +.ion-chatboxes:before { + content: ""; } + +.ion-chatbubble:before { + content: ""; } + +.ion-chatbubble-working:before { + content: ""; } + +.ion-chatbubbles:before { + content: ""; } + +.ion-checkmark:before { + content: ""; } + +.ion-checkmark-circled:before { + content: ""; } + +.ion-checkmark-round:before { + content: ""; } + +.ion-chevron-down:before { + content: ""; } + +.ion-chevron-left:before { + content: ""; } + +.ion-chevron-right:before { + content: ""; } + +.ion-chevron-up:before { + content: ""; } + +.ion-clipboard:before { + content: ""; } + +.ion-clock:before { + content: ""; } + +.ion-close:before { + content: ""; } + +.ion-close-circled:before { + content: ""; } + +.ion-close-round:before { + content: ""; } + +.ion-closed-captioning:before { + content: ""; } + +.ion-cloud:before { + content: ""; } + +.ion-code:before { + content: ""; } + +.ion-code-download:before { + content: ""; } + +.ion-code-working:before { + content: ""; } + +.ion-coffee:before { + content: ""; } + +.ion-compass:before { + content: ""; } + +.ion-compose:before { + content: ""; } + +.ion-connection-bars:before { + content: ""; } + +.ion-contrast:before { + content: ""; } + +.ion-crop:before { + content: ""; } + +.ion-cube:before { + content: ""; } + +.ion-disc:before { + content: ""; } + +.ion-document:before { + content: ""; } + +.ion-document-text:before { + content: ""; } + +.ion-drag:before { + content: ""; } + +.ion-earth:before { + content: ""; } + +.ion-easel:before { + content: ""; } + +.ion-edit:before { + content: ""; } + +.ion-egg:before { + content: ""; } + +.ion-eject:before { + content: ""; } + +.ion-email:before { + content: ""; } + +.ion-email-unread:before { + content: ""; } + +.ion-erlenmeyer-flask:before { + content: ""; } + +.ion-erlenmeyer-flask-bubbles:before { + content: ""; } + +.ion-eye:before { + content: ""; } + +.ion-eye-disabled:before { + content: ""; } + +.ion-female:before { + content: ""; } + +.ion-filing:before { + content: ""; } + +.ion-film-marker:before { + content: ""; } + +.ion-fireball:before { + content: ""; } + +.ion-flag:before { + content: ""; } + +.ion-flame:before { + content: ""; } + +.ion-flash:before { + content: ""; } + +.ion-flash-off:before { + content: ""; } + +.ion-folder:before { + content: ""; } + +.ion-fork:before { + content: ""; } + +.ion-fork-repo:before { + content: ""; } + +.ion-forward:before { + content: ""; } + +.ion-funnel:before { + content: ""; } + +.ion-gear-a:before { + content: ""; } + +.ion-gear-b:before { + content: ""; } + +.ion-grid:before { + content: ""; } + +.ion-hammer:before { + content: ""; } + +.ion-happy:before { + content: ""; } + +.ion-happy-outline:before { + content: ""; } + +.ion-headphone:before { + content: ""; } + +.ion-heart:before { + content: ""; } + +.ion-heart-broken:before { + content: ""; } + +.ion-help:before { + content: ""; } + +.ion-help-buoy:before { + content: ""; } + +.ion-help-circled:before { + content: ""; } + +.ion-home:before { + content: ""; } + +.ion-icecream:before { + content: ""; } + +.ion-image:before { + content: ""; } + +.ion-images:before { + content: ""; } + +.ion-information:before { + content: ""; } + +.ion-information-circled:before { + content: ""; } + +.ion-ionic:before { + content: ""; } + +.ion-ios-alarm:before { + content: ""; } + +.ion-ios-alarm-outline:before { + content: ""; } + +.ion-ios-albums:before { + content: ""; } + +.ion-ios-albums-outline:before { + content: ""; } + +.ion-ios-americanfootball:before { + content: ""; } + +.ion-ios-americanfootball-outline:before { + content: ""; } + +.ion-ios-analytics:before { + content: ""; } + +.ion-ios-analytics-outline:before { + content: ""; } + +.ion-ios-arrow-back:before { + content: ""; } + +.ion-ios-arrow-down:before { + content: ""; } + +.ion-ios-arrow-forward:before { + content: ""; } + +.ion-ios-arrow-left:before { + content: ""; } + +.ion-ios-arrow-right:before { + content: ""; } + +.ion-ios-arrow-thin-down:before { + content: ""; } + +.ion-ios-arrow-thin-left:before { + content: ""; } + +.ion-ios-arrow-thin-right:before { + content: ""; } + +.ion-ios-arrow-thin-up:before { + content: ""; } + +.ion-ios-arrow-up:before { + content: ""; } + +.ion-ios-at:before { + content: ""; } + +.ion-ios-at-outline:before { + content: ""; } + +.ion-ios-barcode:before { + content: ""; } + +.ion-ios-barcode-outline:before { + content: ""; } + +.ion-ios-baseball:before { + content: ""; } + +.ion-ios-baseball-outline:before { + content: ""; } + +.ion-ios-basketball:before { + content: ""; } + +.ion-ios-basketball-outline:before { + content: ""; } + +.ion-ios-bell:before { + content: ""; } + +.ion-ios-bell-outline:before { + content: ""; } + +.ion-ios-body:before { + content: ""; } + +.ion-ios-body-outline:before { + content: ""; } + +.ion-ios-bolt:before { + content: ""; } + +.ion-ios-bolt-outline:before { + content: ""; } + +.ion-ios-book:before { + content: ""; } + +.ion-ios-book-outline:before { + content: ""; } + +.ion-ios-bookmarks:before { + content: ""; } + +.ion-ios-bookmarks-outline:before { + content: ""; } + +.ion-ios-box:before { + content: ""; } + +.ion-ios-box-outline:before { + content: ""; } + +.ion-ios-briefcase:before { + content: ""; } + +.ion-ios-briefcase-outline:before { + content: ""; } + +.ion-ios-browsers:before { + content: ""; } + +.ion-ios-browsers-outline:before { + content: ""; } + +.ion-ios-calculator:before { + content: ""; } + +.ion-ios-calculator-outline:before { + content: ""; } + +.ion-ios-calendar:before { + content: ""; } + +.ion-ios-calendar-outline:before { + content: ""; } + +.ion-ios-camera:before { + content: ""; } + +.ion-ios-camera-outline:before { + content: ""; } + +.ion-ios-cart:before { + content: ""; } + +.ion-ios-cart-outline:before { + content: ""; } + +.ion-ios-chatboxes:before { + content: ""; } + +.ion-ios-chatboxes-outline:before { + content: ""; } + +.ion-ios-chatbubble:before { + content: ""; } + +.ion-ios-chatbubble-outline:before { + content: ""; } + +.ion-ios-checkmark:before { + content: ""; } + +.ion-ios-checkmark-empty:before { + content: ""; } + +.ion-ios-checkmark-outline:before { + content: ""; } + +.ion-ios-circle-filled:before { + content: ""; } + +.ion-ios-circle-outline:before { + content: ""; } + +.ion-ios-clock:before { + content: ""; } + +.ion-ios-clock-outline:before { + content: ""; } + +.ion-ios-close:before { + content: ""; } + +.ion-ios-close-empty:before { + content: ""; } + +.ion-ios-close-outline:before { + content: ""; } + +.ion-ios-cloud:before { + content: ""; } + +.ion-ios-cloud-download:before { + content: ""; } + +.ion-ios-cloud-download-outline:before { + content: ""; } + +.ion-ios-cloud-outline:before { + content: ""; } + +.ion-ios-cloud-upload:before { + content: ""; } + +.ion-ios-cloud-upload-outline:before { + content: ""; } + +.ion-ios-cloudy:before { + content: ""; } + +.ion-ios-cloudy-night:before { + content: ""; } + +.ion-ios-cloudy-night-outline:before { + content: ""; } + +.ion-ios-cloudy-outline:before { + content: ""; } + +.ion-ios-cog:before { + content: ""; } + +.ion-ios-cog-outline:before { + content: ""; } + +.ion-ios-color-filter:before { + content: ""; } + +.ion-ios-color-filter-outline:before { + content: ""; } + +.ion-ios-color-wand:before { + content: ""; } + +.ion-ios-color-wand-outline:before { + content: ""; } + +.ion-ios-compose:before { + content: ""; } + +.ion-ios-compose-outline:before { + content: ""; } + +.ion-ios-contact:before { + content: ""; } + +.ion-ios-contact-outline:before { + content: ""; } + +.ion-ios-copy:before { + content: ""; } + +.ion-ios-copy-outline:before { + content: ""; } + +.ion-ios-crop:before { + content: ""; } + +.ion-ios-crop-strong:before { + content: ""; } + +.ion-ios-download:before { + content: ""; } + +.ion-ios-download-outline:before { + content: ""; } + +.ion-ios-drag:before { + content: ""; } + +.ion-ios-email:before { + content: ""; } + +.ion-ios-email-outline:before { + content: ""; } + +.ion-ios-eye:before { + content: ""; } + +.ion-ios-eye-outline:before { + content: ""; } + +.ion-ios-fastforward:before { + content: ""; } + +.ion-ios-fastforward-outline:before { + content: ""; } + +.ion-ios-filing:before { + content: ""; } + +.ion-ios-filing-outline:before { + content: ""; } + +.ion-ios-film:before { + content: ""; } + +.ion-ios-film-outline:before { + content: ""; } + +.ion-ios-flag:before { + content: ""; } + +.ion-ios-flag-outline:before { + content: ""; } + +.ion-ios-flame:before { + content: ""; } + +.ion-ios-flame-outline:before { + content: ""; } + +.ion-ios-flask:before { + content: ""; } + +.ion-ios-flask-outline:before { + content: ""; } + +.ion-ios-flower:before { + content: ""; } + +.ion-ios-flower-outline:before { + content: ""; } + +.ion-ios-folder:before { + content: ""; } + +.ion-ios-folder-outline:before { + content: ""; } + +.ion-ios-football:before { + content: ""; } + +.ion-ios-football-outline:before { + content: ""; } + +.ion-ios-game-controller-a:before { + content: ""; } + +.ion-ios-game-controller-a-outline:before { + content: ""; } + +.ion-ios-game-controller-b:before { + content: ""; } + +.ion-ios-game-controller-b-outline:before { + content: ""; } + +.ion-ios-gear:before { + content: ""; } + +.ion-ios-gear-outline:before { + content: ""; } + +.ion-ios-glasses:before { + content: ""; } + +.ion-ios-glasses-outline:before { + content: ""; } + +.ion-ios-grid-view:before { + content: ""; } + +.ion-ios-grid-view-outline:before { + content: ""; } + +.ion-ios-heart:before { + content: ""; } + +.ion-ios-heart-outline:before { + content: ""; } + +.ion-ios-help:before { + content: ""; } + +.ion-ios-help-empty:before { + content: ""; } + +.ion-ios-help-outline:before { + content: ""; } + +.ion-ios-home:before { + content: ""; } + +.ion-ios-home-outline:before { + content: ""; } + +.ion-ios-infinite:before { + content: ""; } + +.ion-ios-infinite-outline:before { + content: ""; } + +.ion-ios-information:before { + content: ""; } + +.ion-ios-information-empty:before { + content: ""; } + +.ion-ios-information-outline:before { + content: ""; } + +.ion-ios-ionic-outline:before { + content: ""; } + +.ion-ios-keypad:before { + content: ""; } + +.ion-ios-keypad-outline:before { + content: ""; } + +.ion-ios-lightbulb:before { + content: ""; } + +.ion-ios-lightbulb-outline:before { + content: ""; } + +.ion-ios-list:before { + content: ""; } + +.ion-ios-list-outline:before { + content: ""; } + +.ion-ios-location:before { + content: ""; } + +.ion-ios-location-outline:before { + content: ""; } + +.ion-ios-locked:before { + content: ""; } + +.ion-ios-locked-outline:before { + content: ""; } + +.ion-ios-loop:before { + content: ""; } + +.ion-ios-loop-strong:before { + content: ""; } + +.ion-ios-medical:before { + content: ""; } + +.ion-ios-medical-outline:before { + content: ""; } + +.ion-ios-medkit:before { + content: ""; } + +.ion-ios-medkit-outline:before { + content: ""; } + +.ion-ios-mic:before { + content: ""; } + +.ion-ios-mic-off:before { + content: ""; } + +.ion-ios-mic-outline:before { + content: ""; } + +.ion-ios-minus:before { + content: ""; } + +.ion-ios-minus-empty:before { + content: ""; } + +.ion-ios-minus-outline:before { + content: ""; } + +.ion-ios-monitor:before { + content: ""; } + +.ion-ios-monitor-outline:before { + content: ""; } + +.ion-ios-moon:before { + content: ""; } + +.ion-ios-moon-outline:before { + content: ""; } + +.ion-ios-more:before { + content: ""; } + +.ion-ios-more-outline:before { + content: ""; } + +.ion-ios-musical-note:before { + content: ""; } + +.ion-ios-musical-notes:before { + content: ""; } + +.ion-ios-navigate:before { + content: ""; } + +.ion-ios-navigate-outline:before { + content: ""; } + +.ion-ios-nutrition:before { + content: ""; } + +.ion-ios-nutrition-outline:before { + content: ""; } + +.ion-ios-paper:before { + content: ""; } + +.ion-ios-paper-outline:before { + content: ""; } + +.ion-ios-paperplane:before { + content: ""; } + +.ion-ios-paperplane-outline:before { + content: ""; } + +.ion-ios-partlysunny:before { + content: ""; } + +.ion-ios-partlysunny-outline:before { + content: ""; } + +.ion-ios-pause:before { + content: ""; } + +.ion-ios-pause-outline:before { + content: ""; } + +.ion-ios-paw:before { + content: ""; } + +.ion-ios-paw-outline:before { + content: ""; } + +.ion-ios-people:before { + content: ""; } + +.ion-ios-people-outline:before { + content: ""; } + +.ion-ios-person:before { + content: ""; } + +.ion-ios-person-outline:before { + content: ""; } + +.ion-ios-personadd:before { + content: ""; } + +.ion-ios-personadd-outline:before { + content: ""; } + +.ion-ios-photos:before { + content: ""; } + +.ion-ios-photos-outline:before { + content: ""; } + +.ion-ios-pie:before { + content: ""; } + +.ion-ios-pie-outline:before { + content: ""; } + +.ion-ios-pint:before { + content: ""; } + +.ion-ios-pint-outline:before { + content: ""; } + +.ion-ios-play:before { + content: ""; } + +.ion-ios-play-outline:before { + content: ""; } + +.ion-ios-plus:before { + content: ""; } + +.ion-ios-plus-empty:before { + content: ""; } + +.ion-ios-plus-outline:before { + content: ""; } + +.ion-ios-pricetag:before { + content: ""; } + +.ion-ios-pricetag-outline:before { + content: ""; } + +.ion-ios-pricetags:before { + content: ""; } + +.ion-ios-pricetags-outline:before { + content: ""; } + +.ion-ios-printer:before { + content: ""; } + +.ion-ios-printer-outline:before { + content: ""; } + +.ion-ios-pulse:before { + content: ""; } + +.ion-ios-pulse-strong:before { + content: ""; } + +.ion-ios-rainy:before { + content: ""; } + +.ion-ios-rainy-outline:before { + content: ""; } + +.ion-ios-recording:before { + content: ""; } + +.ion-ios-recording-outline:before { + content: ""; } + +.ion-ios-redo:before { + content: ""; } + +.ion-ios-redo-outline:before { + content: ""; } + +.ion-ios-refresh:before { + content: ""; } + +.ion-ios-refresh-empty:before { + content: ""; } + +.ion-ios-refresh-outline:before { + content: ""; } + +.ion-ios-reload:before { + content: ""; } + +.ion-ios-reverse-camera:before { + content: ""; } + +.ion-ios-reverse-camera-outline:before { + content: ""; } + +.ion-ios-rewind:before { + content: ""; } + +.ion-ios-rewind-outline:before { + content: ""; } + +.ion-ios-rose:before { + content: ""; } + +.ion-ios-rose-outline:before { + content: ""; } + +.ion-ios-search:before { + content: ""; } + +.ion-ios-search-strong:before { + content: ""; } + +.ion-ios-settings:before { + content: ""; } + +.ion-ios-settings-strong:before { + content: ""; } + +.ion-ios-shuffle:before { + content: ""; } + +.ion-ios-shuffle-strong:before { + content: ""; } + +.ion-ios-skipbackward:before { + content: ""; } + +.ion-ios-skipbackward-outline:before { + content: ""; } + +.ion-ios-skipforward:before { + content: ""; } + +.ion-ios-skipforward-outline:before { + content: ""; } + +.ion-ios-snowy:before { + content: ""; } + +.ion-ios-speedometer:before { + content: ""; } + +.ion-ios-speedometer-outline:before { + content: ""; } + +.ion-ios-star:before { + content: ""; } + +.ion-ios-star-half:before { + content: ""; } + +.ion-ios-star-outline:before { + content: ""; } + +.ion-ios-stopwatch:before { + content: ""; } + +.ion-ios-stopwatch-outline:before { + content: ""; } + +.ion-ios-sunny:before { + content: ""; } + +.ion-ios-sunny-outline:before { + content: ""; } + +.ion-ios-telephone:before { + content: ""; } + +.ion-ios-telephone-outline:before { + content: ""; } + +.ion-ios-tennisball:before { + content: ""; } + +.ion-ios-tennisball-outline:before { + content: ""; } + +.ion-ios-thunderstorm:before { + content: ""; } + +.ion-ios-thunderstorm-outline:before { + content: ""; } + +.ion-ios-time:before { + content: ""; } + +.ion-ios-time-outline:before { + content: ""; } + +.ion-ios-timer:before { + content: ""; } + +.ion-ios-timer-outline:before { + content: ""; } + +.ion-ios-toggle:before { + content: ""; } + +.ion-ios-toggle-outline:before { + content: ""; } + +.ion-ios-trash:before { + content: ""; } + +.ion-ios-trash-outline:before { + content: ""; } + +.ion-ios-undo:before { + content: ""; } + +.ion-ios-undo-outline:before { + content: ""; } + +.ion-ios-unlocked:before { + content: ""; } + +.ion-ios-unlocked-outline:before { + content: ""; } + +.ion-ios-upload:before { + content: ""; } + +.ion-ios-upload-outline:before { + content: ""; } + +.ion-ios-videocam:before { + content: ""; } + +.ion-ios-videocam-outline:before { + content: ""; } + +.ion-ios-volume-high:before { + content: ""; } + +.ion-ios-volume-low:before { + content: ""; } + +.ion-ios-wineglass:before { + content: ""; } + +.ion-ios-wineglass-outline:before { + content: ""; } + +.ion-ios-world:before { + content: ""; } + +.ion-ios-world-outline:before { + content: ""; } + +.ion-ipad:before { + content: ""; } + +.ion-iphone:before { + content: ""; } + +.ion-ipod:before { + content: ""; } + +.ion-jet:before { + content: ""; } + +.ion-key:before { + content: ""; } + +.ion-knife:before { + content: ""; } + +.ion-laptop:before { + content: ""; } + +.ion-leaf:before { + content: ""; } + +.ion-levels:before { + content: ""; } + +.ion-lightbulb:before { + content: ""; } + +.ion-link:before { + content: ""; } + +.ion-load-a:before { + content: ""; } + +.ion-load-b:before { + content: ""; } + +.ion-load-c:before { + content: ""; } + +.ion-load-d:before { + content: ""; } + +.ion-location:before { + content: ""; } + +.ion-lock-combination:before { + content: ""; } + +.ion-locked:before { + content: ""; } + +.ion-log-in:before { + content: ""; } + +.ion-log-out:before { + content: ""; } + +.ion-loop:before { + content: ""; } + +.ion-magnet:before { + content: ""; } + +.ion-male:before { + content: ""; } + +.ion-man:before { + content: ""; } + +.ion-map:before { + content: ""; } + +.ion-medkit:before { + content: ""; } + +.ion-merge:before { + content: ""; } + +.ion-mic-a:before { + content: ""; } + +.ion-mic-b:before { + content: ""; } + +.ion-mic-c:before { + content: ""; } + +.ion-minus:before { + content: ""; } + +.ion-minus-circled:before { + content: ""; } + +.ion-minus-round:before { + content: ""; } + +.ion-model-s:before { + content: ""; } + +.ion-monitor:before { + content: ""; } + +.ion-more:before { + content: ""; } + +.ion-mouse:before { + content: ""; } + +.ion-music-note:before { + content: ""; } + +.ion-navicon:before { + content: ""; } + +.ion-navicon-round:before { + content: ""; } + +.ion-navigate:before { + content: ""; } + +.ion-network:before { + content: ""; } + +.ion-no-smoking:before { + content: ""; } + +.ion-nuclear:before { + content: ""; } + +.ion-outlet:before { + content: ""; } + +.ion-paintbrush:before { + content: ""; } + +.ion-paintbucket:before { + content: ""; } + +.ion-paper-airplane:before { + content: ""; } + +.ion-paperclip:before { + content: ""; } + +.ion-pause:before { + content: ""; } + +.ion-person:before { + content: ""; } + +.ion-person-add:before { + content: ""; } + +.ion-person-stalker:before { + content: ""; } + +.ion-pie-graph:before { + content: ""; } + +.ion-pin:before { + content: ""; } + +.ion-pinpoint:before { + content: ""; } + +.ion-pizza:before { + content: ""; } + +.ion-plane:before { + content: ""; } + +.ion-planet:before { + content: ""; } + +.ion-play:before { + content: ""; } + +.ion-playstation:before { + content: ""; } + +.ion-plus:before { + content: ""; } + +.ion-plus-circled:before { + content: ""; } + +.ion-plus-round:before { + content: ""; } + +.ion-podium:before { + content: ""; } + +.ion-pound:before { + content: ""; } + +.ion-power:before { + content: ""; } + +.ion-pricetag:before { + content: ""; } + +.ion-pricetags:before { + content: ""; } + +.ion-printer:before { + content: ""; } + +.ion-pull-request:before { + content: ""; } + +.ion-qr-scanner:before { + content: ""; } + +.ion-quote:before { + content: ""; } + +.ion-radio-waves:before { + content: ""; } + +.ion-record:before { + content: ""; } + +.ion-refresh:before { + content: ""; } + +.ion-reply:before { + content: ""; } + +.ion-reply-all:before { + content: ""; } + +.ion-ribbon-a:before { + content: ""; } + +.ion-ribbon-b:before { + content: ""; } + +.ion-sad:before { + content: ""; } + +.ion-sad-outline:before { + content: ""; } + +.ion-scissors:before { + content: ""; } + +.ion-search:before { + content: ""; } + +.ion-settings:before { + content: ""; } + +.ion-share:before { + content: ""; } + +.ion-shuffle:before { + content: ""; } + +.ion-skip-backward:before { + content: ""; } + +.ion-skip-forward:before { + content: ""; } + +.ion-social-android:before { + content: ""; } + +.ion-social-android-outline:before { + content: ""; } + +.ion-social-angular:before { + content: ""; } + +.ion-social-angular-outline:before { + content: ""; } + +.ion-social-apple:before { + content: ""; } + +.ion-social-apple-outline:before { + content: ""; } + +.ion-social-bitcoin:before { + content: ""; } + +.ion-social-bitcoin-outline:before { + content: ""; } + +.ion-social-buffer:before { + content: ""; } + +.ion-social-buffer-outline:before { + content: ""; } + +.ion-social-chrome:before { + content: ""; } + +.ion-social-chrome-outline:before { + content: ""; } + +.ion-social-codepen:before { + content: ""; } + +.ion-social-codepen-outline:before { + content: ""; } + +.ion-social-css3:before { + content: ""; } + +.ion-social-css3-outline:before { + content: ""; } + +.ion-social-designernews:before { + content: ""; } + +.ion-social-designernews-outline:before { + content: ""; } + +.ion-social-dribbble:before { + content: ""; } + +.ion-social-dribbble-outline:before { + content: ""; } + +.ion-social-dropbox:before { + content: ""; } + +.ion-social-dropbox-outline:before { + content: ""; } + +.ion-social-euro:before { + content: ""; } + +.ion-social-euro-outline:before { + content: ""; } + +.ion-social-facebook:before { + content: ""; } + +.ion-social-facebook-outline:before { + content: ""; } + +.ion-social-foursquare:before { + content: ""; } + +.ion-social-foursquare-outline:before { + content: ""; } + +.ion-social-freebsd-devil:before { + content: ""; } + +.ion-social-github:before { + content: ""; } + +.ion-social-github-outline:before { + content: ""; } + +.ion-social-google:before { + content: ""; } + +.ion-social-google-outline:before { + content: ""; } + +.ion-social-googleplus:before { + content: ""; } + +.ion-social-googleplus-outline:before { + content: ""; } + +.ion-social-hackernews:before { + content: ""; } + +.ion-social-hackernews-outline:before { + content: ""; } + +.ion-social-html5:before { + content: ""; } + +.ion-social-html5-outline:before { + content: ""; } + +.ion-social-instagram:before { + content: ""; } + +.ion-social-instagram-outline:before { + content: ""; } + +.ion-social-javascript:before { + content: ""; } + +.ion-social-javascript-outline:before { + content: ""; } + +.ion-social-linkedin:before { + content: ""; } + +.ion-social-linkedin-outline:before { + content: ""; } + +.ion-social-markdown:before { + content: ""; } + +.ion-social-nodejs:before { + content: ""; } + +.ion-social-octocat:before { + content: ""; } + +.ion-social-pinterest:before { + content: ""; } + +.ion-social-pinterest-outline:before { + content: ""; } + +.ion-social-python:before { + content: ""; } + +.ion-social-reddit:before { + content: ""; } + +.ion-social-reddit-outline:before { + content: ""; } + +.ion-social-rss:before { + content: ""; } + +.ion-social-rss-outline:before { + content: ""; } + +.ion-social-sass:before { + content: ""; } + +.ion-social-skype:before { + content: ""; } + +.ion-social-skype-outline:before { + content: ""; } + +.ion-social-snapchat:before { + content: ""; } + +.ion-social-snapchat-outline:before { + content: ""; } + +.ion-social-tumblr:before { + content: ""; } + +.ion-social-tumblr-outline:before { + content: ""; } + +.ion-social-tux:before { + content: ""; } + +.ion-social-twitch:before { + content: ""; } + +.ion-social-twitch-outline:before { + content: ""; } + +.ion-social-twitter:before { + content: ""; } + +.ion-social-twitter-outline:before { + content: ""; } + +.ion-social-usd:before { + content: ""; } + +.ion-social-usd-outline:before { + content: ""; } + +.ion-social-vimeo:before { + content: ""; } + +.ion-social-vimeo-outline:before { + content: ""; } + +.ion-social-whatsapp:before { + content: ""; } + +.ion-social-whatsapp-outline:before { + content: ""; } + +.ion-social-windows:before { + content: ""; } + +.ion-social-windows-outline:before { + content: ""; } + +.ion-social-wordpress:before { + content: ""; } + +.ion-social-wordpress-outline:before { + content: ""; } + +.ion-social-yahoo:before { + content: ""; } + +.ion-social-yahoo-outline:before { + content: ""; } + +.ion-social-yen:before { + content: ""; } + +.ion-social-yen-outline:before { + content: ""; } + +.ion-social-youtube:before { + content: ""; } + +.ion-social-youtube-outline:before { + content: ""; } + +.ion-soup-can:before { + content: ""; } + +.ion-soup-can-outline:before { + content: ""; } + +.ion-speakerphone:before { + content: ""; } + +.ion-speedometer:before { + content: ""; } + +.ion-spoon:before { + content: ""; } + +.ion-star:before { + content: ""; } + +.ion-stats-bars:before { + content: ""; } + +.ion-steam:before { + content: ""; } + +.ion-stop:before { + content: ""; } + +.ion-thermometer:before { + content: ""; } + +.ion-thumbsdown:before { + content: ""; } + +.ion-thumbsup:before { + content: ""; } + +.ion-toggle:before { + content: ""; } + +.ion-toggle-filled:before { + content: ""; } + +.ion-transgender:before { + content: ""; } + +.ion-trash-a:before { + content: ""; } + +.ion-trash-b:before { + content: ""; } + +.ion-trophy:before { + content: ""; } + +.ion-tshirt:before { + content: ""; } + +.ion-tshirt-outline:before { + content: ""; } + +.ion-umbrella:before { + content: ""; } + +.ion-university:before { + content: ""; } + +.ion-unlocked:before { + content: ""; } + +.ion-upload:before { + content: ""; } + +.ion-usb:before { + content: ""; } + +.ion-videocamera:before { + content: ""; } + +.ion-volume-high:before { + content: ""; } + +.ion-volume-low:before { + content: ""; } + +.ion-volume-medium:before { + content: ""; } + +.ion-volume-mute:before { + content: ""; } + +.ion-wand:before { + content: ""; } + +.ion-waterdrop:before { + content: ""; } + +.ion-wifi:before { + content: ""; } + +.ion-wineglass:before { + content: ""; } + +.ion-woman:before { + content: ""; } + +.ion-wrench:before { + content: ""; } + +.ion-xbox:before { + content: ""; } + +/** + * 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; + 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 default outlines. + */ +a, +button, +:focus, +a:focus, +button:focus, +a:active, +a:hover { + outline: 0; } + +/* * + * Remove tap highlight color + */ +a { + -webkit-user-drag: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; } + a[href]:hover { + cursor: pointer; } + +/* ========================================================================== + 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 + * 6. Remove default gradient in Android Firefox / FirefoxOS + */ +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 */ + background-image: none; + /* 6 */ } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `importnt` 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 */ } + +img { + -webkit-user-drag: none; } + +/* ========================================================================== + 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; } + +html { + overflow: hidden; + -ms-touch-action: pan-y; + touch-action: pan-y; } + +body, +.ionic-body { + -webkit-touch-callout: none; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; + text-size-adjust: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + margin: 0; + padding: 0; + color: #000; + word-wrap: break-word; + font-size: 14px; + font-family: -apple-system; + font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif; + line-height: 20px; + text-rendering: optimizeLegibility; + -webkit-backface-visibility: hidden; + -webkit-user-drag: none; + -ms-content-zooming: none; } + +body.grade-b, +body.grade-c { + text-rendering: auto; } + +.content { + position: relative; } + +.scroll-content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + margin-top: -1px; + padding-top: 1px; + margin-bottom: -1px; + width: auto; + height: auto; } + +.menu .scroll-content.scroll-content-false { + z-index: 11; } + +.scroll-view { + position: relative; + display: block; + overflow: hidden; + margin-top: -1px; } + .scroll-view.overflow-scroll { + position: relative; } + .scroll-view.scroll-x { + overflow-x: scroll; + overflow-y: hidden; } + .scroll-view.scroll-y { + overflow-x: hidden; + overflow-y: scroll; } + .scroll-view.scroll-xy { + overflow-x: scroll; + overflow-y: scroll; } + +/** + * Scroll is the scroll view component available for complex and custom + * scroll view functionality. + */ +.scroll { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; + text-size-adjust: none; + -webkit-transform-origin: left top; + transform-origin: left top; } + +/** + * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling + * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx + */ +@-ms-viewport { + width: device-width; } + +.scroll-bar { + position: absolute; + z-index: 9999; } + +.ng-animate .scroll-bar { + visibility: hidden; } + +.scroll-bar-h { + right: 2px; + bottom: 3px; + left: 2px; + height: 3px; } + .scroll-bar-h .scroll-bar-indicator { + height: 100%; } + +.scroll-bar-v { + top: 2px; + right: 3px; + bottom: 2px; + width: 3px; } + .scroll-bar-v .scroll-bar-indicator { + width: 100%; } + +.scroll-bar-indicator { + position: absolute; + border-radius: 4px; + background: rgba(0, 0, 0, 0.3); + opacity: 1; + -webkit-transition: opacity 0.3s linear; + transition: opacity 0.3s linear; } + .scroll-bar-indicator.scroll-bar-fade-out { + opacity: 0; } + +.platform-android .scroll-bar-indicator { + border-radius: 0; } + +.grade-b .scroll-bar-indicator, +.grade-c .scroll-bar-indicator { + background: #aaa; } + .grade-b .scroll-bar-indicator.scroll-bar-fade-out, + .grade-c .scroll-bar-indicator.scroll-bar-fade-out { + -webkit-transition: none; + transition: none; } + +ion-infinite-scroll { + height: 60px; + width: 100%; + display: block; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + -moz-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; } + ion-infinite-scroll .icon { + color: #666666; + font-size: 30px; + color: #666666; } + ion-infinite-scroll:not(.active) .spinner, + ion-infinite-scroll:not(.active) .icon:before { + display: none; } + +.overflow-scroll { + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; } + .overflow-scroll.pane { + overflow-x: hidden; + overflow-y: scroll; } + .overflow-scroll .scroll { + position: static; + height: 100%; + -webkit-transform: translate3d(0, 0, 0); } + +/* If you change these, change platform.scss as well */ +.has-header { + top: 44px; } + +.no-header { + top: 0; } + +.has-subheader { + top: 88px; } + +.has-tabs-top { + top: 93px; } + +.has-header.has-subheader.has-tabs-top { + top: 137px; } + +.has-footer { + bottom: 44px; } + +.has-subfooter { + bottom: 88px; } + +.has-tabs, +.bar-footer.has-tabs { + bottom: 49px; } + .has-tabs.pane, + .bar-footer.has-tabs.pane { + bottom: 49px; + height: auto; } + +.bar-subfooter.has-tabs { + bottom: 93px; } + +.has-footer.has-tabs { + bottom: 93px; } + +.pane { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-duration: 0; + transition-duration: 0; + z-index: 1; } + +.view { + z-index: 1; } + +.pane, +.view { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #fff; + overflow: hidden; } + +.view-container { + position: absolute; + display: block; + width: 100%; + height: 100%; } + +/** + * 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: #000; + font-weight: 500; + font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif; + line-height: 1.2; } + 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'; } + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; } + +address { + display: block; + margin-bottom: 20px; + font-style: normal; + line-height: 1.42857; } + +a { + color: #2F81B7; } + +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 + * -------------------------------------------------- + */ +.action-sheet-backdrop { + -webkit-transition: background-color 150ms ease-in-out; + transition: background-color 150ms ease-in-out; + position: fixed; + top: 0; + left: 0; + z-index: 11; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); } + .action-sheet-backdrop.active { + background-color: rgba(0, 0, 0, 0.4); } + +.action-sheet-wrapper { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms; + transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms; + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + max-width: 500px; + margin: auto; } + +.action-sheet-up { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.action-sheet { + margin-left: 8px; + margin-right: 8px; + width: auto; + z-index: 11; + overflow: hidden; } + .action-sheet .button { + display: block; + padding: 1px; + width: 100%; + border-radius: 0; + border-color: #d1d3d6; + background-color: transparent; + color: #007aff; + font-size: 21px; } + .action-sheet .button:hover { + color: #007aff; } + .action-sheet .button.destructive { + color: #ff3b30; } + .action-sheet .button.destructive:hover { + color: #ff3b30; } + .action-sheet .button.active, .action-sheet .button.activated { + box-shadow: none; + border-color: #d1d3d6; + color: #007aff; + background: #e4e5e7; } + +.action-sheet-has-icons .icon { + position: absolute; + left: 16px; } + +.action-sheet-title { + padding: 16px; + color: #8f8f8f; + text-align: center; + font-size: 13px; } + +.action-sheet-group { + margin-bottom: 8px; + border-radius: 4px; + background-color: #fff; + overflow: hidden; } + .action-sheet-group .button { + border-width: 1px 0px 0px 0px; } + .action-sheet-group .button:first-child:last-child { + border-width: 0; } + +.action-sheet-options { + background: #f1f2f3; } + +.action-sheet-cancel .button { + font-weight: 500; } + +.action-sheet-open { + pointer-events: none; } + .action-sheet-open.modal-open .modal { + pointer-events: none; } + .action-sheet-open .action-sheet-backdrop { + pointer-events: auto; } + +.platform-android .action-sheet-backdrop.active { + background-color: rgba(0, 0, 0, 0.2); } + +.platform-android .action-sheet { + margin: 0; } + .platform-android .action-sheet .action-sheet-title, + .platform-android .action-sheet .button { + text-align: left; + border-color: transparent; + font-size: 16px; + color: inherit; } + .platform-android .action-sheet .action-sheet-title { + font-size: 14px; + padding: 16px; + color: #666; } + .platform-android .action-sheet .button.active, + .platform-android .action-sheet .button.activated { + background: #e8e8e8; } + +.platform-android .action-sheet-group { + margin: 0; + border-radius: 0; + background-color: #fafafa; } + +.platform-android .action-sheet-cancel { + display: none; } + +.platform-android .action-sheet-has-icons .button { + padding-left: 56px; } + +.backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 11; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + visibility: hidden; + opacity: 0; + -webkit-transition: 0.1s opacity linear; + transition: 0.1s opacity linear; } + .backdrop.visible { + visibility: visible; } + .backdrop.active { + opacity: 1; } + +/** + * Bar (Headers and Footers) + * -------------------------------------------------- + */ +.bar { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + position: absolute; + right: 0; + left: 0; + z-index: 9; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-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 #ddd; + background-color: white; + /* border-width: 1px will actually create 2 device pixels on retina */ + /* this nifty trick sets an actual 1px border on hi-res displays */ + 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: none; + background-image: linear-gradient(0deg, #ddd, #ddd 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.item-input-inset .item-input-wrapper { + margin-top: -1px; } + .bar.item-input-inset .item-input-wrapper input { + padding-left: 8px; + width: 94%; + height: 28px; + background: transparent; } + .bar.bar-light { + border-color: #ddd; + background-color: white; + background-image: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%); + color: #444; } + .bar.bar-light .title { + color: #444; } + .bar.bar-light.bar-footer { + background-image: linear-gradient(180deg, #ddd, #ddd 50%, transparent 50%); } + .bar.bar-stable { + border-color: #2F81B7; + background-color: #2f81b7; + background-image: linear-gradient(0deg, #2F81B7, #2F81B7 50%, transparent 50%); + color: #fff; } + .bar.bar-stable .title { + color: #fff; } + .bar.bar-stable.bar-footer { + background-image: linear-gradient(180deg, #2F81B7, #2F81B7 50%, transparent 50%); } + .bar.bar-positive { + border-color: #2F81B7; + background-color: #2f81b7; + background-image: linear-gradient(0deg, #2F81B7, #2F81B7 50%, transparent 50%); + color: #fff; } + .bar.bar-positive .title { + color: #fff; } + .bar.bar-positive.bar-footer { + background-image: linear-gradient(180deg, #2F81B7, #2F81B7 50%, transparent 50%); } + .bar.bar-calm { + border-color: #0a9dc7; + background-color: #11c1f3; + background-image: linear-gradient(0deg, #0a9dc7, #0a9dc7 50%, transparent 50%); + color: #fff; } + .bar.bar-calm .title { + color: #fff; } + .bar.bar-calm.bar-footer { + background-image: linear-gradient(180deg, #0a9dc7, #0a9dc7 50%, transparent 50%); } + .bar.bar-assertive { + border-color: #e42112; + background-color: #ef473a; + background-image: linear-gradient(0deg, #e42112, #e42112 50%, transparent 50%); + color: #fff; } + .bar.bar-assertive .title { + color: #fff; } + .bar.bar-assertive.bar-footer { + background-image: linear-gradient(180deg, #e42112, #e42112 50%, transparent 50%); } + .bar.bar-balanced { + border-color: #28a54c; + background-color: #33cd5f; + background-image: linear-gradient(0deg, #28a54c, #28a54c 50%, transparent 50%); + color: #fff; } + .bar.bar-balanced .title { + color: #fff; } + .bar.bar-balanced.bar-footer { + background-image: linear-gradient(180deg, #28a54c, #28a54c 50%, transparent 50%); } + .bar.bar-energized { + border-color: #e6b500; + background-color: #ffc900; + background-image: linear-gradient(0deg, #e6b500, #e6b500 50%, transparent 50%); + color: #fff; } + .bar.bar-energized .title { + color: #fff; } + .bar.bar-energized.bar-footer { + background-image: linear-gradient(180deg, #e6b500, #e6b500 50%, transparent 50%); } + .bar.bar-royal { + border-color: #6b46e5; + background-color: #886aea; + background-image: linear-gradient(0deg, #6b46e5, #6b46e5 50%, transparent 50%); + color: #fff; } + .bar.bar-royal .title { + color: #fff; } + .bar.bar-royal.bar-footer { + background-image: linear-gradient(180deg, #6b46e5, #6b46e5 50%, transparent 50%); } + .bar.bar-dark { + border-color: #111; + background-color: #444444; + background-image: linear-gradient(0deg, #111, #111 50%, transparent 50%); + color: #fff; } + .bar.bar-dark .title { + color: #fff; } + .bar.bar-dark.bar-footer { + background-image: linear-gradient(180deg, #111, #111 50%, transparent 50%); } + .bar .title { + display: block; + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 0; + overflow: hidden; + margin: 0 10px; + min-width: 30px; + height: 43px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 17px; + font-weight: 500; + line-height: 44px; } + .bar .title.title-left { + text-align: left; } + .bar .title.title-right { + text-align: right; } + .bar .title a { + color: inherit; } + .bar .button, .bar button { + z-index: 1; + padding: 0 8px; + min-width: initial; + min-height: 31px; + font-weight: 400; + font-size: 13px; + line-height: 32px; } + .bar .button.button-icon:before, + .bar .button .icon:before, .bar .button.icon:before, .bar .button.icon-left:before, .bar .button.icon-right:before, .bar button.button-icon:before, + .bar button .icon:before, .bar button.icon:before, .bar button.icon-left:before, .bar button.icon-right:before { + padding-right: 2px; + padding-left: 2px; + font-size: 20px; + line-height: 32px; } + .bar .button.button-icon, .bar button.button-icon { + font-size: 17px; } + .bar .button.button-icon .icon:before, .bar .button.button-icon:before, .bar .button.button-icon.icon-left:before, .bar .button.button-icon.icon-right:before, .bar button.button-icon .icon:before, .bar button.button-icon:before, .bar button.button-icon.icon-left:before, .bar button.button-icon.icon-right:before { + vertical-align: top; + font-size: 32px; + line-height: 32px; } + .bar .button.button-clear, .bar button.button-clear { + padding-right: 2px; + padding-left: 2px; + font-weight: 300; + font-size: 17px; } + .bar .button.button-clear .icon:before, .bar .button.button-clear.icon:before, .bar .button.button-clear.icon-left:before, .bar .button.button-clear.icon-right:before, .bar button.button-clear .icon:before, .bar button.button-clear.icon:before, .bar button.button-clear.icon-left:before, .bar button.button-clear.icon-right:before { + font-size: 32px; + line-height: 32px; } + .bar .button.back-button, .bar button.back-button { + display: block; + margin-right: 5px; + padding: 0; + white-space: nowrap; + font-weight: 400; } + .bar .button.back-button.active, .bar .button.back-button.activated, .bar button.back-button.active, .bar button.back-button.activated { + opacity: 0.2; } + .bar .button-bar > .button, + .bar .buttons > .button { + min-height: 31px; + line-height: 32px; } + .bar .button-bar + .button, + .bar .button + .button-bar { + margin-left: 5px; } + .bar .buttons, + .bar .buttons.primary-buttons, + .bar .buttons.secondary-buttons { + display: inherit; } + .bar .buttons span { + display: inline-block; } + .bar .buttons-left span { + margin-right: 5px; + display: inherit; } + .bar .buttons-right span { + margin-left: 5px; + display: inherit; } + .bar .title + .button:last-child, + .bar > .button + .button:last-child, + .bar > .button.pull-right, + .bar .buttons.pull-right, + .bar .title + .buttons { + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; } + +.platform-android .nav-bar-has-subheader .bar { + background-image: none; } + +.platform-android .bar .back-button .icon:before { + font-size: 24px; } + +.platform-android .bar .title { + font-size: 19px; + line-height: 44px; } + +.bar-light .button { + border-color: #ddd; + background-color: white; + color: #444; } + .bar-light .button:hover { + color: #444; + text-decoration: none; } + .bar-light .button.active, .bar-light .button.activated { + border-color: #ccc; + background-color: #fafafa; } + .bar-light .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #444; + font-size: 17px; } + .bar-light .button.button-icon { + border-color: transparent; + background: none; } + +.bar-stable .button { + border-color: #2F81B7; + background-color: #2f81b7; + color: #fff; } + .bar-stable .button:hover { + color: #fff; + text-decoration: none; } + .bar-stable .button.active, .bar-stable .button.activated { + border-color: #2F81B7; + background-color: #25648e; } + .bar-stable .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-stable .button.button-icon { + border-color: transparent; + background: none; } + +.bar-positive .button { + border-color: #2F81B7; + background-color: #2f81b7; + color: #fff; } + .bar-positive .button:hover { + color: #fff; + text-decoration: none; } + .bar-positive .button.active, .bar-positive .button.activated { + border-color: #2F81B7; + background-color: #25648e; } + .bar-positive .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-positive .button.button-icon { + border-color: transparent; + background: none; } + +.bar-calm .button { + border-color: #0a9dc7; + background-color: #11c1f3; + color: #fff; } + .bar-calm .button:hover { + color: #fff; + text-decoration: none; } + .bar-calm .button.active, .bar-calm .button.activated { + border-color: #0a9dc7; + background-color: #0a9dc7; } + .bar-calm .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-calm .button.button-icon { + border-color: transparent; + background: none; } + +.bar-assertive .button { + border-color: #e42112; + background-color: #ef473a; + color: #fff; } + .bar-assertive .button:hover { + color: #fff; + text-decoration: none; } + .bar-assertive .button.active, .bar-assertive .button.activated { + border-color: #e42112; + background-color: #e42112; } + .bar-assertive .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-assertive .button.button-icon { + border-color: transparent; + background: none; } + +.bar-balanced .button { + border-color: #28a54c; + background-color: #33cd5f; + color: #fff; } + .bar-balanced .button:hover { + color: #fff; + text-decoration: none; } + .bar-balanced .button.active, .bar-balanced .button.activated { + border-color: #28a54c; + background-color: #28a54c; } + .bar-balanced .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-balanced .button.button-icon { + border-color: transparent; + background: none; } + +.bar-energized .button { + border-color: #e6b500; + background-color: #ffc900; + color: #fff; } + .bar-energized .button:hover { + color: #fff; + text-decoration: none; } + .bar-energized .button.active, .bar-energized .button.activated { + border-color: #e6b500; + background-color: #e6b500; } + .bar-energized .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-energized .button.button-icon { + border-color: transparent; + background: none; } + +.bar-royal .button { + border-color: #6b46e5; + background-color: #886aea; + color: #fff; } + .bar-royal .button:hover { + color: #fff; + text-decoration: none; } + .bar-royal .button.active, .bar-royal .button.activated { + border-color: #6b46e5; + background-color: #6b46e5; } + .bar-royal .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-royal .button.button-icon { + border-color: transparent; + background: none; } + +.bar-dark .button { + border-color: #111; + background-color: #444444; + color: #fff; } + .bar-dark .button:hover { + color: #fff; + text-decoration: none; } + .bar-dark .button.active, .bar-dark .button.activated { + border-color: #000; + background-color: #262626; } + .bar-dark .button.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #fff; + font-size: 17px; } + .bar-dark .button.button-icon { + border-color: transparent; + background: none; } + +.bar-header { + top: 0; + border-top-width: 0; + border-bottom-width: 1px; } + .bar-header.has-tabs-top { + border-bottom-width: 0px; + background-image: none; } + +.tabs-top .bar-header { + border-bottom-width: 0px; + background-image: none; } + +.bar-footer { + bottom: 0; + border-top-width: 1px; + border-bottom-width: 0; + background-position: top; + height: 44px; } + .bar-footer.item-input-inset { + position: absolute; } + .bar-footer .title { + height: 43px; + line-height: 44px; } + +.bar-tabs { + padding: 0; } + +.bar-subheader { + top: 44px; + height: 44px; } + .bar-subheader .title { + height: 43px; + line-height: 44px; } + +.bar-subfooter { + bottom: 44px; + height: 44px; } + .bar-subfooter .title { + height: 43px; + line-height: 44px; } + +.nav-bar-block { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 9; } + +.bar .back-button.hide, +.bar .buttons .hide { + display: none; } + +.nav-bar-tabs-top .bar { + background-image: none; } + +/** + * Tabs + * -------------------------------------------------- + * A navigation bar with any number of tab items supported. + */ +.tabs { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + border-color: #2F81B7; + background-color: #2F81B7; + background-image: linear-gradient(0deg, #2F81B7, #2F81B7 50%, transparent 50%); + color: #fff; + 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 .tab-item .badge { + background-color: #fff; + color: #2F81B7; } + @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; + background-position: top; + background-size: 100% 1px; + background-repeat: no-repeat; } } + +/* Allow parent element of tabs to define color, or just the tab itself */ +.tabs-light > .tabs, +.tabs.tabs-light { + border-color: #ddd; + background-color: #fff; + background-image: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%); + color: #444; } + .tabs-light > .tabs .tab-item .badge, + .tabs.tabs-light .tab-item .badge { + background-color: #444; + color: #fff; } + +.tabs-stable > .tabs, +.tabs.tabs-stable { + border-color: #2F81B7; + background-color: #2F81B7; + background-image: linear-gradient(0deg, #2F81B7, #2F81B7 50%, transparent 50%); + color: #fff; } + .tabs-stable > .tabs .tab-item .badge, + .tabs.tabs-stable .tab-item .badge { + background-color: #fff; + color: #2F81B7; } + +.tabs-positive > .tabs, +.tabs.tabs-positive { + border-color: #2F81B7; + background-color: #2F81B7; + background-image: linear-gradient(0deg, #2F81B7, #2F81B7 50%, transparent 50%); + color: #fff; } + .tabs-positive > .tabs .tab-item .badge, + .tabs.tabs-positive .tab-item .badge { + background-color: #fff; + color: #2F81B7; } + +.tabs-calm > .tabs, +.tabs.tabs-calm { + border-color: #0a9dc7; + background-color: #11c1f3; + background-image: linear-gradient(0deg, #0a9dc7, #0a9dc7 50%, transparent 50%); + color: #fff; } + .tabs-calm > .tabs .tab-item .badge, + .tabs.tabs-calm .tab-item .badge { + background-color: #fff; + color: #11c1f3; } + +.tabs-assertive > .tabs, +.tabs.tabs-assertive { + border-color: #e42112; + background-color: #ef473a; + background-image: linear-gradient(0deg, #e42112, #e42112 50%, transparent 50%); + color: #fff; } + .tabs-assertive > .tabs .tab-item .badge, + .tabs.tabs-assertive .tab-item .badge { + background-color: #fff; + color: #ef473a; } + +.tabs-balanced > .tabs, +.tabs.tabs-balanced { + border-color: #28a54c; + background-color: #33cd5f; + background-image: linear-gradient(0deg, #28a54c, #28a54c 50%, transparent 50%); + color: #fff; } + .tabs-balanced > .tabs .tab-item .badge, + .tabs.tabs-balanced .tab-item .badge { + background-color: #fff; + color: #33cd5f; } + +.tabs-energized > .tabs, +.tabs.tabs-energized { + border-color: #e6b500; + background-color: #ffc900; + background-image: linear-gradient(0deg, #e6b500, #e6b500 50%, transparent 50%); + color: #fff; } + .tabs-energized > .tabs .tab-item .badge, + .tabs.tabs-energized .tab-item .badge { + background-color: #fff; + color: #ffc900; } + +.tabs-royal > .tabs, +.tabs.tabs-royal { + border-color: #6b46e5; + background-color: #886aea; + background-image: linear-gradient(0deg, #6b46e5, #6b46e5 50%, transparent 50%); + color: #fff; } + .tabs-royal > .tabs .tab-item .badge, + .tabs.tabs-royal .tab-item .badge { + background-color: #fff; + color: #886aea; } + +.tabs-dark > .tabs, +.tabs.tabs-dark { + border-color: #111; + background-color: #444; + background-image: linear-gradient(0deg, #111, #111 50%, transparent 50%); + color: #fff; } + .tabs-dark > .tabs .tab-item .badge, + .tabs.tabs-dark .tab-item .badge { + background-color: #fff; + color: #444; } + +.tabs-striped .tabs { + background-color: white; + background-image: none; + border: none; + border-bottom: 1px solid #ddd; + padding-top: 2px; } + +.tabs-striped .tab-item.tab-item-active, .tabs-striped .tab-item.active, .tabs-striped .tab-item.activated { + margin-top: -2px; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #444; } + .tabs-striped .tab-item.tab-item-active .badge, .tabs-striped .tab-item.active .badge, .tabs-striped .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-light .tabs { + background-color: #fff; } + +.tabs-striped.tabs-light .tab-item { + color: rgba(68, 68, 68, 0.4); + opacity: 1; } + .tabs-striped.tabs-light .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-light .tab-item.tab-item-active, .tabs-striped.tabs-light .tab-item.active, .tabs-striped.tabs-light .tab-item.activated { + margin-top: -2px; + color: #444; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #444; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-stable .tabs { + background-color: #2F81B7; } + +.tabs-striped.tabs-stable .tab-item { + color: rgba(68, 68, 68, 0.4); + opacity: 1; } + .tabs-striped.tabs-stable .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-stable .tab-item.tab-item-active, .tabs-striped.tabs-stable .tab-item.active, .tabs-striped.tabs-stable .tab-item.activated { + margin-top: -2px; + color: #444; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #444; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-positive .tabs { + background-color: #2F81B7; } + +.tabs-striped.tabs-positive .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-positive .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-positive .tab-item.tab-item-active, .tabs-striped.tabs-positive .tab-item.active, .tabs-striped.tabs-positive .tab-item.activated { + margin-top: -2px; + color: #fff; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #fff; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-calm .tabs { + background-color: #11c1f3; } + +.tabs-striped.tabs-calm .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-calm .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-calm .tab-item.tab-item-active, .tabs-striped.tabs-calm .tab-item.active, .tabs-striped.tabs-calm .tab-item.activated { + margin-top: -2px; + color: #fff; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #fff; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-assertive .tabs { + background-color: #ef473a; } + +.tabs-striped.tabs-assertive .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-assertive .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-assertive .tab-item.tab-item-active, .tabs-striped.tabs-assertive .tab-item.active, .tabs-striped.tabs-assertive .tab-item.activated { + margin-top: -2px; + color: #fff; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #fff; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-balanced .tabs { + background-color: #33cd5f; } + +.tabs-striped.tabs-balanced .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-balanced .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-balanced .tab-item.tab-item-active, .tabs-striped.tabs-balanced .tab-item.active, .tabs-striped.tabs-balanced .tab-item.activated { + margin-top: -2px; + color: #fff; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #fff; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-energized .tabs { + background-color: #ffc900; } + +.tabs-striped.tabs-energized .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-energized .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-energized .tab-item.tab-item-active, .tabs-striped.tabs-energized .tab-item.active, .tabs-striped.tabs-energized .tab-item.activated { + margin-top: -2px; + color: #fff; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #fff; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-royal .tabs { + background-color: #886aea; } + +.tabs-striped.tabs-royal .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-royal .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-royal .tab-item.tab-item-active, .tabs-striped.tabs-royal .tab-item.active, .tabs-striped.tabs-royal .tab-item.activated { + margin-top: -2px; + color: #fff; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #fff; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-dark .tabs { + background-color: #444; } + +.tabs-striped.tabs-dark .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-dark .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-dark .tab-item.tab-item-active, .tabs-striped.tabs-dark .tab-item.active, .tabs-striped.tabs-dark .tab-item.activated { + margin-top: -2px; + color: #fff; + border-style: solid; + border-width: 2px 0 0 0; + border-color: #fff; } + +.tabs-striped.tabs-top .tab-item.tab-item-active .badge, .tabs-striped.tabs-top .tab-item.active .badge, .tabs-striped.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-striped.tabs-background-light .tabs { + background-color: #fff; + background-image: none; } + +.tabs-striped.tabs-background-stable .tabs { + background-color: #2F81B7; + background-image: none; } + +.tabs-striped.tabs-background-positive .tabs { + background-color: #2F81B7; + background-image: none; } + +.tabs-striped.tabs-background-calm .tabs { + background-color: #11c1f3; + background-image: none; } + +.tabs-striped.tabs-background-assertive .tabs { + background-color: #ef473a; + background-image: none; } + +.tabs-striped.tabs-background-balanced .tabs { + background-color: #33cd5f; + background-image: none; } + +.tabs-striped.tabs-background-energized .tabs { + background-color: #ffc900; + background-image: none; } + +.tabs-striped.tabs-background-royal .tabs { + background-color: #886aea; + background-image: none; } + +.tabs-striped.tabs-background-dark .tabs { + background-color: #444; + background-image: none; } + +.tabs-striped.tabs-color-light .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-light .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-light .tab-item.tab-item-active, .tabs-striped.tabs-color-light .tab-item.active, .tabs-striped.tabs-color-light .tab-item.activated { + margin-top: -2px; + color: #fff; + border: 0 solid #fff; + border-top-width: 2px; } + .tabs-striped.tabs-color-light .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-light .tab-item.active .badge, .tabs-striped.tabs-color-light .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-stable .tab-item { + color: rgba(47, 129, 183, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-stable .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-stable .tab-item.tab-item-active, .tabs-striped.tabs-color-stable .tab-item.active, .tabs-striped.tabs-color-stable .tab-item.activated { + margin-top: -2px; + color: #2F81B7; + border: 0 solid #2F81B7; + border-top-width: 2px; } + .tabs-striped.tabs-color-stable .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-stable .tab-item.active .badge, .tabs-striped.tabs-color-stable .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-positive .tab-item { + color: rgba(47, 129, 183, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-positive .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-positive .tab-item.tab-item-active, .tabs-striped.tabs-color-positive .tab-item.active, .tabs-striped.tabs-color-positive .tab-item.activated { + margin-top: -2px; + color: #2F81B7; + border: 0 solid #2F81B7; + border-top-width: 2px; } + .tabs-striped.tabs-color-positive .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-positive .tab-item.active .badge, .tabs-striped.tabs-color-positive .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-calm .tab-item { + color: rgba(17, 193, 243, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-calm .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-calm .tab-item.tab-item-active, .tabs-striped.tabs-color-calm .tab-item.active, .tabs-striped.tabs-color-calm .tab-item.activated { + margin-top: -2px; + color: #11c1f3; + border: 0 solid #11c1f3; + border-top-width: 2px; } + .tabs-striped.tabs-color-calm .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-calm .tab-item.active .badge, .tabs-striped.tabs-color-calm .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-assertive .tab-item { + color: rgba(239, 71, 58, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-assertive .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-assertive .tab-item.tab-item-active, .tabs-striped.tabs-color-assertive .tab-item.active, .tabs-striped.tabs-color-assertive .tab-item.activated { + margin-top: -2px; + color: #ef473a; + border: 0 solid #ef473a; + border-top-width: 2px; } + .tabs-striped.tabs-color-assertive .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-assertive .tab-item.active .badge, .tabs-striped.tabs-color-assertive .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-balanced .tab-item { + color: rgba(51, 205, 95, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-balanced .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-balanced .tab-item.tab-item-active, .tabs-striped.tabs-color-balanced .tab-item.active, .tabs-striped.tabs-color-balanced .tab-item.activated { + margin-top: -2px; + color: #33cd5f; + border: 0 solid #33cd5f; + border-top-width: 2px; } + .tabs-striped.tabs-color-balanced .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-balanced .tab-item.active .badge, .tabs-striped.tabs-color-balanced .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-energized .tab-item { + color: rgba(255, 201, 0, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-energized .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-energized .tab-item.tab-item-active, .tabs-striped.tabs-color-energized .tab-item.active, .tabs-striped.tabs-color-energized .tab-item.activated { + margin-top: -2px; + color: #ffc900; + border: 0 solid #ffc900; + border-top-width: 2px; } + .tabs-striped.tabs-color-energized .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-energized .tab-item.active .badge, .tabs-striped.tabs-color-energized .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-royal .tab-item { + color: rgba(136, 106, 234, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-royal .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-royal .tab-item.tab-item-active, .tabs-striped.tabs-color-royal .tab-item.active, .tabs-striped.tabs-color-royal .tab-item.activated { + margin-top: -2px; + color: #886aea; + border: 0 solid #886aea; + border-top-width: 2px; } + .tabs-striped.tabs-color-royal .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-royal .tab-item.active .badge, .tabs-striped.tabs-color-royal .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-striped.tabs-color-dark .tab-item { + color: rgba(68, 68, 68, 0.4); + opacity: 1; } + .tabs-striped.tabs-color-dark .tab-item .badge { + opacity: 0.4; } + .tabs-striped.tabs-color-dark .tab-item.tab-item-active, .tabs-striped.tabs-color-dark .tab-item.active, .tabs-striped.tabs-color-dark .tab-item.activated { + margin-top: -2px; + color: #444; + border: 0 solid #444; + border-top-width: 2px; } + .tabs-striped.tabs-color-dark .tab-item.tab-item-active .badge, .tabs-striped.tabs-color-dark .tab-item.active .badge, .tabs-striped.tabs-color-dark .tab-item.activated .badge { + top: 2px; + opacity: 1; } + +.tabs-background-light .tabs, +.tabs-background-light > .tabs { + background-color: #fff; + background-image: linear-gradient(0deg, #ddd, #ddd 50%, transparent 50%); + border-color: #ddd; } + +.tabs-background-stable .tabs, +.tabs-background-stable > .tabs { + background-color: #2F81B7; + background-image: linear-gradient(0deg, #2F81B7, #2F81B7 50%, transparent 50%); + border-color: #2F81B7; } + +.tabs-background-positive .tabs, +.tabs-background-positive > .tabs { + background-color: #2F81B7; + background-image: linear-gradient(0deg, #2F81B7, #2F81B7 50%, transparent 50%); + border-color: #2F81B7; } + +.tabs-background-calm .tabs, +.tabs-background-calm > .tabs { + background-color: #11c1f3; + background-image: linear-gradient(0deg, #0a9dc7, #0a9dc7 50%, transparent 50%); + border-color: #0a9dc7; } + +.tabs-background-assertive .tabs, +.tabs-background-assertive > .tabs { + background-color: #ef473a; + background-image: linear-gradient(0deg, #e42112, #e42112 50%, transparent 50%); + border-color: #e42112; } + +.tabs-background-balanced .tabs, +.tabs-background-balanced > .tabs { + background-color: #33cd5f; + background-image: linear-gradient(0deg, #28a54c, #28a54c 50%, transparent 50%); + border-color: #28a54c; } + +.tabs-background-energized .tabs, +.tabs-background-energized > .tabs { + background-color: #ffc900; + background-image: linear-gradient(0deg, #e6b500, #e6b500 50%, transparent 50%); + border-color: #e6b500; } + +.tabs-background-royal .tabs, +.tabs-background-royal > .tabs { + background-color: #886aea; + background-image: linear-gradient(0deg, #6b46e5, #6b46e5 50%, transparent 50%); + border-color: #6b46e5; } + +.tabs-background-dark .tabs, +.tabs-background-dark > .tabs { + background-color: #444; + background-image: linear-gradient(0deg, #111, #111 50%, transparent 50%); + border-color: #111; } + +.tabs-color-light .tab-item { + color: rgba(255, 255, 255, 0.4); + opacity: 1; } + .tabs-color-light .tab-item .badge { + opacity: 0.4; } + .tabs-color-light .tab-item.tab-item-active, .tabs-color-light .tab-item.active, .tabs-color-light .tab-item.activated { + color: #fff; + border: 0 solid #fff; } + .tabs-color-light .tab-item.tab-item-active .badge, .tabs-color-light .tab-item.active .badge, .tabs-color-light .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-stable .tab-item { + color: rgba(47, 129, 183, 0.4); + opacity: 1; } + .tabs-color-stable .tab-item .badge { + opacity: 0.4; } + .tabs-color-stable .tab-item.tab-item-active, .tabs-color-stable .tab-item.active, .tabs-color-stable .tab-item.activated { + color: #2F81B7; + border: 0 solid #2F81B7; } + .tabs-color-stable .tab-item.tab-item-active .badge, .tabs-color-stable .tab-item.active .badge, .tabs-color-stable .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-positive .tab-item { + color: rgba(47, 129, 183, 0.4); + opacity: 1; } + .tabs-color-positive .tab-item .badge { + opacity: 0.4; } + .tabs-color-positive .tab-item.tab-item-active, .tabs-color-positive .tab-item.active, .tabs-color-positive .tab-item.activated { + color: #2F81B7; + border: 0 solid #2F81B7; } + .tabs-color-positive .tab-item.tab-item-active .badge, .tabs-color-positive .tab-item.active .badge, .tabs-color-positive .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-calm .tab-item { + color: rgba(17, 193, 243, 0.4); + opacity: 1; } + .tabs-color-calm .tab-item .badge { + opacity: 0.4; } + .tabs-color-calm .tab-item.tab-item-active, .tabs-color-calm .tab-item.active, .tabs-color-calm .tab-item.activated { + color: #11c1f3; + border: 0 solid #11c1f3; } + .tabs-color-calm .tab-item.tab-item-active .badge, .tabs-color-calm .tab-item.active .badge, .tabs-color-calm .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-assertive .tab-item { + color: rgba(239, 71, 58, 0.4); + opacity: 1; } + .tabs-color-assertive .tab-item .badge { + opacity: 0.4; } + .tabs-color-assertive .tab-item.tab-item-active, .tabs-color-assertive .tab-item.active, .tabs-color-assertive .tab-item.activated { + color: #ef473a; + border: 0 solid #ef473a; } + .tabs-color-assertive .tab-item.tab-item-active .badge, .tabs-color-assertive .tab-item.active .badge, .tabs-color-assertive .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-balanced .tab-item { + color: rgba(51, 205, 95, 0.4); + opacity: 1; } + .tabs-color-balanced .tab-item .badge { + opacity: 0.4; } + .tabs-color-balanced .tab-item.tab-item-active, .tabs-color-balanced .tab-item.active, .tabs-color-balanced .tab-item.activated { + color: #33cd5f; + border: 0 solid #33cd5f; } + .tabs-color-balanced .tab-item.tab-item-active .badge, .tabs-color-balanced .tab-item.active .badge, .tabs-color-balanced .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-energized .tab-item { + color: rgba(255, 201, 0, 0.4); + opacity: 1; } + .tabs-color-energized .tab-item .badge { + opacity: 0.4; } + .tabs-color-energized .tab-item.tab-item-active, .tabs-color-energized .tab-item.active, .tabs-color-energized .tab-item.activated { + color: #ffc900; + border: 0 solid #ffc900; } + .tabs-color-energized .tab-item.tab-item-active .badge, .tabs-color-energized .tab-item.active .badge, .tabs-color-energized .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-royal .tab-item { + color: rgba(136, 106, 234, 0.4); + opacity: 1; } + .tabs-color-royal .tab-item .badge { + opacity: 0.4; } + .tabs-color-royal .tab-item.tab-item-active, .tabs-color-royal .tab-item.active, .tabs-color-royal .tab-item.activated { + color: #886aea; + border: 0 solid #886aea; } + .tabs-color-royal .tab-item.tab-item-active .badge, .tabs-color-royal .tab-item.active .badge, .tabs-color-royal .tab-item.activated .badge { + opacity: 1; } + +.tabs-color-dark .tab-item { + color: rgba(68, 68, 68, 0.4); + opacity: 1; } + .tabs-color-dark .tab-item .badge { + opacity: 0.4; } + .tabs-color-dark .tab-item.tab-item-active, .tabs-color-dark .tab-item.active, .tabs-color-dark .tab-item.activated { + color: #444; + border: 0 solid #444; } + .tabs-color-dark .tab-item.tab-item-active .badge, .tabs-color-dark .tab-item.active .badge, .tabs-color-dark .tab-item.activated .badge { + opacity: 1; } + +ion-tabs.tabs-color-active-light .tab-item { + color: #444; } + ion-tabs.tabs-color-active-light .tab-item.tab-item-active, ion-tabs.tabs-color-active-light .tab-item.active, ion-tabs.tabs-color-active-light .tab-item.activated { + color: #fff; } + +ion-tabs.tabs-striped.tabs-color-active-light .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-light .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-light .tab-item.activated { + border-color: #fff; + color: #fff; } + +ion-tabs.tabs-color-active-stable .tab-item { + color: #444; } + ion-tabs.tabs-color-active-stable .tab-item.tab-item-active, ion-tabs.tabs-color-active-stable .tab-item.active, ion-tabs.tabs-color-active-stable .tab-item.activated { + color: #2F81B7; } + +ion-tabs.tabs-striped.tabs-color-active-stable .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-stable .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-stable .tab-item.activated { + border-color: #2F81B7; + color: #2F81B7; } + +ion-tabs.tabs-color-active-positive .tab-item { + color: #444; } + ion-tabs.tabs-color-active-positive .tab-item.tab-item-active, ion-tabs.tabs-color-active-positive .tab-item.active, ion-tabs.tabs-color-active-positive .tab-item.activated { + color: #2F81B7; } + +ion-tabs.tabs-striped.tabs-color-active-positive .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-positive .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-positive .tab-item.activated { + border-color: #2F81B7; + color: #2F81B7; } + +ion-tabs.tabs-color-active-calm .tab-item { + color: #444; } + ion-tabs.tabs-color-active-calm .tab-item.tab-item-active, ion-tabs.tabs-color-active-calm .tab-item.active, ion-tabs.tabs-color-active-calm .tab-item.activated { + color: #11c1f3; } + +ion-tabs.tabs-striped.tabs-color-active-calm .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-calm .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-calm .tab-item.activated { + border-color: #11c1f3; + color: #11c1f3; } + +ion-tabs.tabs-color-active-assertive .tab-item { + color: #444; } + ion-tabs.tabs-color-active-assertive .tab-item.tab-item-active, ion-tabs.tabs-color-active-assertive .tab-item.active, ion-tabs.tabs-color-active-assertive .tab-item.activated { + color: #ef473a; } + +ion-tabs.tabs-striped.tabs-color-active-assertive .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-assertive .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-assertive .tab-item.activated { + border-color: #ef473a; + color: #ef473a; } + +ion-tabs.tabs-color-active-balanced .tab-item { + color: #444; } + ion-tabs.tabs-color-active-balanced .tab-item.tab-item-active, ion-tabs.tabs-color-active-balanced .tab-item.active, ion-tabs.tabs-color-active-balanced .tab-item.activated { + color: #33cd5f; } + +ion-tabs.tabs-striped.tabs-color-active-balanced .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-balanced .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-balanced .tab-item.activated { + border-color: #33cd5f; + color: #33cd5f; } + +ion-tabs.tabs-color-active-energized .tab-item { + color: #444; } + ion-tabs.tabs-color-active-energized .tab-item.tab-item-active, ion-tabs.tabs-color-active-energized .tab-item.active, ion-tabs.tabs-color-active-energized .tab-item.activated { + color: #ffc900; } + +ion-tabs.tabs-striped.tabs-color-active-energized .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-energized .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-energized .tab-item.activated { + border-color: #ffc900; + color: #ffc900; } + +ion-tabs.tabs-color-active-royal .tab-item { + color: #444; } + ion-tabs.tabs-color-active-royal .tab-item.tab-item-active, ion-tabs.tabs-color-active-royal .tab-item.active, ion-tabs.tabs-color-active-royal .tab-item.activated { + color: #886aea; } + +ion-tabs.tabs-striped.tabs-color-active-royal .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-royal .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-royal .tab-item.activated { + border-color: #886aea; + color: #886aea; } + +ion-tabs.tabs-color-active-dark .tab-item { + color: #fff; } + ion-tabs.tabs-color-active-dark .tab-item.tab-item-active, ion-tabs.tabs-color-active-dark .tab-item.active, ion-tabs.tabs-color-active-dark .tab-item.activated { + color: #444; } + +ion-tabs.tabs-striped.tabs-color-active-dark .tab-item.tab-item-active, ion-tabs.tabs-striped.tabs-color-active-dark .tab-item.active, ion-tabs.tabs-striped.tabs-color-active-dark .tab-item.activated { + border-color: #444; + color: #444; } + +.tabs-top.tabs-striped { + padding-bottom: 0; } + .tabs-top.tabs-striped .tab-item { + background: transparent; + -webkit-transition: color .1s ease; + -moz-transition: color .1s ease; + -ms-transition: color .1s ease; + -o-transition: color .1s ease; + transition: color .1s ease; } + .tabs-top.tabs-striped .tab-item.tab-item-active, .tabs-top.tabs-striped .tab-item.active, .tabs-top.tabs-striped .tab-item.activated { + margin-top: 1px; + border-width: 0px 0px 2px 0px !important; + border-style: solid; } + .tabs-top.tabs-striped .tab-item.tab-item-active > .badge, .tabs-top.tabs-striped .tab-item.tab-item-active > i, .tabs-top.tabs-striped .tab-item.active > .badge, .tabs-top.tabs-striped .tab-item.active > i, .tabs-top.tabs-striped .tab-item.activated > .badge, .tabs-top.tabs-striped .tab-item.activated > i { + margin-top: -1px; } + .tabs-top.tabs-striped .tab-item .badge { + -webkit-transition: color .2s ease; + -moz-transition: color .2s ease; + -ms-transition: color .2s ease; + -o-transition: color .2s ease; + transition: color .2s ease; } + .tabs-top.tabs-striped:not(.tabs-icon-left):not(.tabs-icon-top) .tab-item.tab-item-active .tab-title, .tabs-top.tabs-striped:not(.tabs-icon-left):not(.tabs-icon-top) .tab-item.tab-item-active i, .tabs-top.tabs-striped:not(.tabs-icon-left):not(.tabs-icon-top) .tab-item.active .tab-title, .tabs-top.tabs-striped:not(.tabs-icon-left):not(.tabs-icon-top) .tab-item.active i, .tabs-top.tabs-striped:not(.tabs-icon-left):not(.tabs-icon-top) .tab-item.activated .tab-title, .tabs-top.tabs-striped:not(.tabs-icon-left):not(.tabs-icon-top) .tab-item.activated i { + display: block; + margin-top: -1px; } + .tabs-top.tabs-striped.tabs-icon-left .tab-item { + margin-top: 1px; } + .tabs-top.tabs-striped.tabs-icon-left .tab-item.tab-item-active .tab-title, .tabs-top.tabs-striped.tabs-icon-left .tab-item.tab-item-active i, .tabs-top.tabs-striped.tabs-icon-left .tab-item.active .tab-title, .tabs-top.tabs-striped.tabs-icon-left .tab-item.active i, .tabs-top.tabs-striped.tabs-icon-left .tab-item.activated .tab-title, .tabs-top.tabs-striped.tabs-icon-left .tab-item.activated i { + margin-top: -0.1em; } + +/* Allow parent element to have tabs-top */ +/* If you change this, change platform.scss as well */ +.tabs-top > .tabs, +.tabs.tabs-top { + top: 44px; + padding-top: 0; + background-position: bottom; + border-top-width: 0; + border-bottom-width: 1px; } + .tabs-top > .tabs .tab-item.tab-item-active .badge, .tabs-top > .tabs .tab-item.active .badge, .tabs-top > .tabs .tab-item.activated .badge, + .tabs.tabs-top .tab-item.tab-item-active .badge, + .tabs.tabs-top .tab-item.active .badge, + .tabs.tabs-top .tab-item.activated .badge { + top: 4%; } + +.tabs-top ~ .bar-header { + border-bottom-width: 0; } + +.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: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif; + opacity: 0.7; } + .tab-item:hover { + cursor: pointer; } + .tab-item.tab-hidden { + display: none; } + +.tabs-item-hide > .tabs, +.tabs.tabs-item-hide { + display: none; } + +.tabs-icon-top > .tabs .tab-item, +.tabs-icon-top.tabs .tab-item, +.tabs-icon-bottom > .tabs .tab-item, +.tabs-icon-bottom.tabs .tab-item { + font-size: 10px; + line-height: 14px; } + +.tab-item .icon { + display: block; + margin: 0 auto; + height: 32px; + font-size: 32px; } + +.tabs-icon-left.tabs .tab-item, +.tabs-icon-left > .tabs .tab-item, +.tabs-icon-right.tabs .tab-item, +.tabs-icon-right > .tabs .tab-item { + font-size: 10px; } + .tabs-icon-left.tabs .tab-item .icon, .tabs-icon-left.tabs .tab-item .tab-title, + .tabs-icon-left > .tabs .tab-item .icon, + .tabs-icon-left > .tabs .tab-item .tab-title, + .tabs-icon-right.tabs .tab-item .icon, + .tabs-icon-right.tabs .tab-item .tab-title, + .tabs-icon-right > .tabs .tab-item .icon, + .tabs-icon-right > .tabs .tab-item .tab-title { + display: inline-block; + vertical-align: top; + margin-top: -.1em; } + .tabs-icon-left.tabs .tab-item .icon:before, .tabs-icon-left.tabs .tab-item .tab-title:before, + .tabs-icon-left > .tabs .tab-item .icon:before, + .tabs-icon-left > .tabs .tab-item .tab-title:before, + .tabs-icon-right.tabs .tab-item .icon:before, + .tabs-icon-right.tabs .tab-item .tab-title:before, + .tabs-icon-right > .tabs .tab-item .icon:before, + .tabs-icon-right > .tabs .tab-item .tab-title:before { + font-size: 24px; + line-height: 49px; } + +.tabs-icon-left > .tabs .tab-item .icon, +.tabs-icon-left.tabs .tab-item .icon { + padding-right: 3px; } + +.tabs-icon-right > .tabs .tab-item .icon, +.tabs-icon-right.tabs .tab-item .icon { + padding-left: 3px; } + +.tabs-icon-only > .tabs .icon, +.tabs-icon-only.tabs .icon { + line-height: inherit; } + +.tab-item.has-badge { + position: relative; } + +.tab-item .badge { + position: absolute; + top: 4%; + right: 33%; + right: calc(50% - 26px); + padding: 1px 6px; + height: auto; + font-size: 12px; + line-height: 16px; } + +/* Navigational tab */ +/* Active state for tab */ +.tab-item.tab-item-active, +.tab-item.active, +.tab-item.activated { + opacity: 1; } + .tab-item.tab-item-active.tab-item-light, + .tab-item.active.tab-item-light, + .tab-item.activated.tab-item-light { + color: #fff; } + .tab-item.tab-item-active.tab-item-stable, + .tab-item.active.tab-item-stable, + .tab-item.activated.tab-item-stable { + color: #2F81B7; } + .tab-item.tab-item-active.tab-item-positive, + .tab-item.active.tab-item-positive, + .tab-item.activated.tab-item-positive { + color: #2F81B7; } + .tab-item.tab-item-active.tab-item-calm, + .tab-item.active.tab-item-calm, + .tab-item.activated.tab-item-calm { + color: #11c1f3; } + .tab-item.tab-item-active.tab-item-assertive, + .tab-item.active.tab-item-assertive, + .tab-item.activated.tab-item-assertive { + color: #ef473a; } + .tab-item.tab-item-active.tab-item-balanced, + .tab-item.active.tab-item-balanced, + .tab-item.activated.tab-item-balanced { + color: #33cd5f; } + .tab-item.tab-item-active.tab-item-energized, + .tab-item.active.tab-item-energized, + .tab-item.activated.tab-item-energized { + color: #ffc900; } + .tab-item.tab-item-active.tab-item-royal, + .tab-item.active.tab-item-royal, + .tab-item.activated.tab-item-royal { + color: #886aea; } + .tab-item.tab-item-active.tab-item-dark, + .tab-item.active.tab-item-dark, + .tab-item.activated.tab-item-dark { + color: #444; } + +.item.tabs { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + padding: 0; } + .item.tabs .icon:before { + position: relative; } + +.tab-item.disabled, +.tab-item[disabled] { + opacity: .4; + cursor: default; + pointer-events: none; } + +.nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs { + top: 0; } + +.pane[hide-nav-bar="true"] .has-tabs-top { + top: 49px; } + +/** + * Menus + * -------------------------------------------------- + * Side panel structure + */ +.menu { + position: absolute; + top: 0; + bottom: 0; + z-index: 0; + overflow: hidden; + min-height: 100%; + max-height: 100%; + width: 275px; + background-color: #fff; } + .menu .scroll-content { + z-index: 10; } + .menu .bar-header { + z-index: 11; } + +.menu-content { + -webkit-transform: none; + transform: none; + box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0, 0, 0, 0.2); } + +.menu-open .menu-content .pane, +.menu-open .menu-content .scroll-content { + pointer-events: none; } + +.menu-open .menu-content .scroll-content .scroll { + pointer-events: none; } + +.menu-open .menu-content .scroll-content:not(.overflow-scroll) { + overflow: hidden; } + +.grade-b .menu-content, +.grade-c .menu-content { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + right: -1px; + left: -1px; + border-right: 1px solid #ccc; + border-left: 1px solid #ccc; + box-shadow: none; } + +.menu-left { + left: 0; } + +.menu-right { + right: 0; } + +.aside-open.aside-resizing .menu-right { + display: none; } + +.menu-animated { + -webkit-transition: -webkit-transform 200ms ease; + transition: transform 200ms ease; } + +/** + * Modals + * -------------------------------------------------- + * Modals are independent windows that slide in from off-screen. + */ +.modal-backdrop, +.modal-backdrop-bg { + position: fixed; + top: 0; + left: 0; + z-index: 10; + width: 100%; + height: 100%; } + +.modal-backdrop-bg { + pointer-events: none; } + +.modal { + display: block; + position: absolute; + top: 0; + z-index: 10; + overflow: hidden; + min-height: 100%; + width: 100%; + background-color: #fff; } + +@media (min-width: 680px) { + .modal { + top: 20%; + right: 20%; + bottom: 20%; + left: 20%; + min-height: 240px; + width: 60%; } + .modal.ng-leave-active { + bottom: 0; } + .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) { + height: 44px; } + .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) > * { + margin-top: 0; } + .platform-ios.platform-cordova .modal-wrapper .modal .tabs-top > .tabs, + .platform-ios.platform-cordova .modal-wrapper .modal .tabs.tabs-top { + top: 44px; } + .platform-ios.platform-cordova .modal-wrapper .modal .has-header, + .platform-ios.platform-cordova .modal-wrapper .modal .bar-subheader { + top: 44px; } + .platform-ios.platform-cordova .modal-wrapper .modal .has-subheader { + top: 88px; } + .platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-tabs-top { + top: 93px; } + .platform-ios.platform-cordova .modal-wrapper .modal .has-header.has-subheader.has-tabs-top { + top: 137px; } + .modal-backdrop-bg { + -webkit-transition: opacity 300ms ease-in-out; + transition: opacity 300ms ease-in-out; + background-color: #000; + opacity: 0; } + .active .modal-backdrop-bg { + opacity: 0.5; } } + +.modal-open { + pointer-events: none; } + .modal-open .modal, + .modal-open .modal-backdrop { + pointer-events: auto; } + .modal-open.loading-active .modal, + .modal-open.loading-active .modal-backdrop { + pointer-events: none; } + +/** + * Popovers + * -------------------------------------------------- + * Popovers are independent views which float over content + */ +.popover-backdrop { + position: fixed; + top: 0; + left: 0; + z-index: 10; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); } + .popover-backdrop.active { + background-color: rgba(0, 0, 0, 0.1); } + +.popover { + position: absolute; + top: 25%; + left: 50%; + z-index: 10; + display: block; + margin-top: 12px; + margin-left: -110px; + height: 280px; + width: 220px; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); + opacity: 0; } + .popover .item:first-child { + border-top: 0; } + .popover .item:last-child { + border-bottom: 0; } + .popover.popover-bottom { + margin-top: -12px; } + +.popover, +.popover .bar-header { + border-radius: 2px; } + +.popover .scroll-content { + z-index: 1; + margin: 2px 0; } + +.popover .bar-header { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } + +.popover .has-header { + border-top-right-radius: 0; + border-top-left-radius: 0; } + +.popover-arrow { + display: none; } + +.platform-ios .popover { + box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); + border-radius: 10px; } + +.platform-ios .popover .bar-header { + -webkit-border-top-right-radius: 10px; + border-top-right-radius: 10px; + -webkit-border-top-left-radius: 10px; + border-top-left-radius: 10px; } + +.platform-ios .popover .scroll-content { + margin: 8px 0; + border-radius: 10px; } + +.platform-ios .popover .scroll-content.has-header { + margin-top: 0; } + +.platform-ios .popover-arrow { + position: absolute; + display: block; + top: -17px; + width: 30px; + height: 19px; + overflow: hidden; } + .platform-ios .popover-arrow:after { + position: absolute; + top: 12px; + left: 5px; + width: 20px; + height: 20px; + background-color: #fff; + border-radius: 3px; + content: ''; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); } + +.platform-ios .popover-bottom .popover-arrow { + top: auto; + bottom: -10px; } + .platform-ios .popover-bottom .popover-arrow:after { + top: -6px; } + +.platform-android .popover { + margin-top: -32px; + background-color: #fafafa; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } + .platform-android .popover .item { + border-color: #fafafa; + background-color: #fafafa; + color: #4d4d4d; } + .platform-android .popover.popover-bottom { + margin-top: 32px; } + +.platform-android .popover-backdrop, +.platform-android .popover-backdrop.active { + background-color: transparent; } + +.popover-open { + pointer-events: none; } + .popover-open .popover, + .popover-open .popover-backdrop { + pointer-events: auto; } + .popover-open.loading-active .popover, + .popover-open.loading-active .popover-backdrop { + pointer-events: none; } + +@media (min-width: 680px) { + .popover { + width: 360px; + margin-left: -180px; } } + +/** + * Popups + * -------------------------------------------------- + */ +.popup-container { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(0, 0, 0, 0); + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + -moz-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; + z-index: 12; + visibility: hidden; } + .popup-container.popup-showing { + visibility: visible; } + .popup-container.popup-hidden .popup { + -webkit-animation-name: scaleOut; + animation-name: scaleOut; + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .popup-container.active .popup { + -webkit-animation-name: superScaleIn; + animation-name: superScaleIn; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .popup-container .popup { + width: 250px; + max-width: 100%; + max-height: 90%; + border-radius: 0px; + background-color: rgba(255, 255, 255, 0.9); + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + -webkit-flex-direction: column; + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + .popup-container input, + .popup-container textarea { + width: 100%; } + +.popup-head { + padding: 15px 10px; + border-bottom: 1px solid #eee; + text-align: center; } + +.popup-title { + margin: 0; + padding: 0; + font-size: 15px; } + +.popup-sub-title { + margin: 5px 0 0 0; + padding: 0; + font-weight: normal; + font-size: 11px; } + +.popup-body { + padding: 10px; + overflow: auto; } + +.popup-buttons { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -webkit-flex-direction: row; + -moz-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 10px; + min-height: 65px; } + .popup-buttons .button { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: block; + min-height: 45px; + border-radius: 2px; + line-height: 20px; + margin-right: 5px; } + .popup-buttons .button:last-child { + margin-right: 0px; } + +.popup-open { + pointer-events: none; } + .popup-open.modal-open .modal { + pointer-events: none; } + .popup-open .popup-backdrop, .popup-open .popup { + pointer-events: auto; } + +/** + * Loading + * -------------------------------------------------- + */ +.loading-container { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 13; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + -moz-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; + -webkit-transition: 0.2s opacity linear; + transition: 0.2s opacity linear; + visibility: hidden; + opacity: 0; } + .loading-container:not(.visible) .icon, + .loading-container:not(.visible) .spinner { + display: none; } + .loading-container.visible { + visibility: visible; } + .loading-container.active { + opacity: 1; } + .loading-container .loading { + 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-container .loading h1, .loading-container .loading h2, .loading-container .loading h3, .loading-container .loading h4, .loading-container .loading h5, .loading-container .loading h6 { + color: #fff; } + +/** + * Items + * -------------------------------------------------- + */ +.item { + border-color: #ddd; + background-color: #fff; + color: #444; + position: relative; + z-index: 2; + display: block; + margin: -1px; + padding: 16px; + border-width: 1px; + border-style: solid; + font-size: 16px; } + .item h2 { + margin: 0 0 2px 0; + font-size: 16px; + font-weight: normal; } + .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; + margin-bottom: 2px; } + .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 { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + position: absolute; + top: 16px; + right: 32px; } + .item.item-button-right .badge { + right: 67px; } + .item.item-divider .badge { + top: 8px; } + .item .badge + .badge { + margin-right: 5px; } + .item.item-light { + border-color: #ddd; + background-color: #fff; + color: #444; } + .item.item-stable { + border-color: #2F81B7; + background-color: #2F81B7; + color: #fff; } + .item.item-positive { + border-color: #2F81B7; + background-color: #2F81B7; + color: #fff; } + .item.item-calm { + border-color: #0a9dc7; + background-color: #11c1f3; + color: #fff; } + .item.item-assertive { + border-color: #e42112; + background-color: #ef473a; + color: #fff; } + .item.item-balanced { + border-color: #28a54c; + background-color: #33cd5f; + color: #fff; } + .item.item-energized { + border-color: #e6b500; + background-color: #ffc900; + color: #fff; } + .item.item-royal { + border-color: #6b46e5; + background-color: #886aea; + color: #fff; } + .item.item-dark { + border-color: #111; + background-color: #444; + color: #fff; } + .item[ng-click]:hover { + cursor: pointer; } + +.list-borderless .item, +.item-borderless { + border-width: 0; } + +.item.active, +.item.activated, +.item-complex.active .item-content, +.item-complex.activated .item-content, +.item .item-content.active, +.item .item-content.activated { + border-color: #ccc; + background-color: #D9D9D9; } + .item.active.item-complex > .item-content, + .item.activated.item-complex > .item-content, + .item-complex.active .item-content.item-complex > .item-content, + .item-complex.activated .item-content.item-complex > .item-content, + .item .item-content.active.item-complex > .item-content, + .item .item-content.activated.item-complex > .item-content { + border-color: #ccc; + background-color: #D9D9D9; } + .item.active.item-light, + .item.activated.item-light, + .item-complex.active .item-content.item-light, + .item-complex.activated .item-content.item-light, + .item .item-content.active.item-light, + .item .item-content.activated.item-light { + border-color: #ccc; + background-color: #fafafa; } + .item.active.item-light.item-complex > .item-content, + .item.activated.item-light.item-complex > .item-content, + .item-complex.active .item-content.item-light.item-complex > .item-content, + .item-complex.activated .item-content.item-light.item-complex > .item-content, + .item .item-content.active.item-light.item-complex > .item-content, + .item .item-content.activated.item-light.item-complex > .item-content { + border-color: #ccc; + background-color: #fafafa; } + .item.active.item-stable, + .item.activated.item-stable, + .item-complex.active .item-content.item-stable, + .item-complex.activated .item-content.item-stable, + .item .item-content.active.item-stable, + .item .item-content.activated.item-stable { + border-color: #2F81B7; + background-color: #25648e; } + .item.active.item-stable.item-complex > .item-content, + .item.activated.item-stable.item-complex > .item-content, + .item-complex.active .item-content.item-stable.item-complex > .item-content, + .item-complex.activated .item-content.item-stable.item-complex > .item-content, + .item .item-content.active.item-stable.item-complex > .item-content, + .item .item-content.activated.item-stable.item-complex > .item-content { + border-color: #2F81B7; + background-color: #25648e; } + .item.active.item-positive, + .item.activated.item-positive, + .item-complex.active .item-content.item-positive, + .item-complex.activated .item-content.item-positive, + .item .item-content.active.item-positive, + .item .item-content.activated.item-positive { + border-color: #2F81B7; + background-color: #25648e; } + .item.active.item-positive.item-complex > .item-content, + .item.activated.item-positive.item-complex > .item-content, + .item-complex.active .item-content.item-positive.item-complex > .item-content, + .item-complex.activated .item-content.item-positive.item-complex > .item-content, + .item .item-content.active.item-positive.item-complex > .item-content, + .item .item-content.activated.item-positive.item-complex > .item-content { + border-color: #2F81B7; + background-color: #25648e; } + .item.active.item-calm, + .item.activated.item-calm, + .item-complex.active .item-content.item-calm, + .item-complex.activated .item-content.item-calm, + .item .item-content.active.item-calm, + .item .item-content.activated.item-calm { + border-color: #0a9dc7; + background-color: #0a9dc7; } + .item.active.item-calm.item-complex > .item-content, + .item.activated.item-calm.item-complex > .item-content, + .item-complex.active .item-content.item-calm.item-complex > .item-content, + .item-complex.activated .item-content.item-calm.item-complex > .item-content, + .item .item-content.active.item-calm.item-complex > .item-content, + .item .item-content.activated.item-calm.item-complex > .item-content { + border-color: #0a9dc7; + background-color: #0a9dc7; } + .item.active.item-assertive, + .item.activated.item-assertive, + .item-complex.active .item-content.item-assertive, + .item-complex.activated .item-content.item-assertive, + .item .item-content.active.item-assertive, + .item .item-content.activated.item-assertive { + border-color: #e42112; + background-color: #e42112; } + .item.active.item-assertive.item-complex > .item-content, + .item.activated.item-assertive.item-complex > .item-content, + .item-complex.active .item-content.item-assertive.item-complex > .item-content, + .item-complex.activated .item-content.item-assertive.item-complex > .item-content, + .item .item-content.active.item-assertive.item-complex > .item-content, + .item .item-content.activated.item-assertive.item-complex > .item-content { + border-color: #e42112; + background-color: #e42112; } + .item.active.item-balanced, + .item.activated.item-balanced, + .item-complex.active .item-content.item-balanced, + .item-complex.activated .item-content.item-balanced, + .item .item-content.active.item-balanced, + .item .item-content.activated.item-balanced { + border-color: #28a54c; + background-color: #28a54c; } + .item.active.item-balanced.item-complex > .item-content, + .item.activated.item-balanced.item-complex > .item-content, + .item-complex.active .item-content.item-balanced.item-complex > .item-content, + .item-complex.activated .item-content.item-balanced.item-complex > .item-content, + .item .item-content.active.item-balanced.item-complex > .item-content, + .item .item-content.activated.item-balanced.item-complex > .item-content { + border-color: #28a54c; + background-color: #28a54c; } + .item.active.item-energized, + .item.activated.item-energized, + .item-complex.active .item-content.item-energized, + .item-complex.activated .item-content.item-energized, + .item .item-content.active.item-energized, + .item .item-content.activated.item-energized { + border-color: #e6b500; + background-color: #e6b500; } + .item.active.item-energized.item-complex > .item-content, + .item.activated.item-energized.item-complex > .item-content, + .item-complex.active .item-content.item-energized.item-complex > .item-content, + .item-complex.activated .item-content.item-energized.item-complex > .item-content, + .item .item-content.active.item-energized.item-complex > .item-content, + .item .item-content.activated.item-energized.item-complex > .item-content { + border-color: #e6b500; + background-color: #e6b500; } + .item.active.item-royal, + .item.activated.item-royal, + .item-complex.active .item-content.item-royal, + .item-complex.activated .item-content.item-royal, + .item .item-content.active.item-royal, + .item .item-content.activated.item-royal { + border-color: #6b46e5; + background-color: #6b46e5; } + .item.active.item-royal.item-complex > .item-content, + .item.activated.item-royal.item-complex > .item-content, + .item-complex.active .item-content.item-royal.item-complex > .item-content, + .item-complex.activated .item-content.item-royal.item-complex > .item-content, + .item .item-content.active.item-royal.item-complex > .item-content, + .item .item-content.activated.item-royal.item-complex > .item-content { + border-color: #6b46e5; + background-color: #6b46e5; } + .item.active.item-dark, + .item.activated.item-dark, + .item-complex.active .item-content.item-dark, + .item-complex.activated .item-content.item-dark, + .item .item-content.active.item-dark, + .item .item-content.activated.item-dark { + border-color: #000; + background-color: #262626; } + .item.active.item-dark.item-complex > .item-content, + .item.activated.item-dark.item-complex > .item-content, + .item-complex.active .item-content.item-dark.item-complex > .item-content, + .item-complex.activated .item-content.item-dark.item-complex > .item-content, + .item .item-content.active.item-dark.item-complex > .item-content, + .item .item-content.activated.item-dark.item-complex > .item-content { + border-color: #000; + background-color: #262626; } + +.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 { + position: relative; + z-index: 2; + padding: 16px 49px 16px 16px; + border: none; + background-color: #fff; } + +a.item-content { + display: block; + color: inherit; + text-decoration: none; } + +.item-text-wrap .item, +.item-text-wrap .item-content, +.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: visible; + 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: visible; + white-space: normal; } + +.item-complex.item-light > .item-content { + border-color: #ddd; + background-color: #fff; + color: #444; } + .item-complex.item-light > .item-content.active, .item-complex.item-light > .item-content:active { + border-color: #ccc; + background-color: #fafafa; } + .item-complex.item-light > .item-content.active.item-complex > .item-content, .item-complex.item-light > .item-content:active.item-complex > .item-content { + border-color: #ccc; + background-color: #fafafa; } + +.item-complex.item-stable > .item-content { + border-color: #2F81B7; + background-color: #2F81B7; + color: #fff; } + .item-complex.item-stable > .item-content.active, .item-complex.item-stable > .item-content:active { + border-color: #2F81B7; + background-color: #25648e; } + .item-complex.item-stable > .item-content.active.item-complex > .item-content, .item-complex.item-stable > .item-content:active.item-complex > .item-content { + border-color: #2F81B7; + background-color: #25648e; } + +.item-complex.item-positive > .item-content { + border-color: #2F81B7; + background-color: #2F81B7; + color: #fff; } + .item-complex.item-positive > .item-content.active, .item-complex.item-positive > .item-content:active { + border-color: #2F81B7; + background-color: #25648e; } + .item-complex.item-positive > .item-content.active.item-complex > .item-content, .item-complex.item-positive > .item-content:active.item-complex > .item-content { + border-color: #2F81B7; + background-color: #25648e; } + +.item-complex.item-calm > .item-content { + border-color: #0a9dc7; + background-color: #11c1f3; + color: #fff; } + .item-complex.item-calm > .item-content.active, .item-complex.item-calm > .item-content:active { + border-color: #0a9dc7; + background-color: #0a9dc7; } + .item-complex.item-calm > .item-content.active.item-complex > .item-content, .item-complex.item-calm > .item-content:active.item-complex > .item-content { + border-color: #0a9dc7; + background-color: #0a9dc7; } + +.item-complex.item-assertive > .item-content { + border-color: #e42112; + background-color: #ef473a; + color: #fff; } + .item-complex.item-assertive > .item-content.active, .item-complex.item-assertive > .item-content:active { + border-color: #e42112; + background-color: #e42112; } + .item-complex.item-assertive > .item-content.active.item-complex > .item-content, .item-complex.item-assertive > .item-content:active.item-complex > .item-content { + border-color: #e42112; + background-color: #e42112; } + +.item-complex.item-balanced > .item-content { + border-color: #28a54c; + background-color: #33cd5f; + color: #fff; } + .item-complex.item-balanced > .item-content.active, .item-complex.item-balanced > .item-content:active { + border-color: #28a54c; + background-color: #28a54c; } + .item-complex.item-balanced > .item-content.active.item-complex > .item-content, .item-complex.item-balanced > .item-content:active.item-complex > .item-content { + border-color: #28a54c; + background-color: #28a54c; } + +.item-complex.item-energized > .item-content { + border-color: #e6b500; + background-color: #ffc900; + color: #fff; } + .item-complex.item-energized > .item-content.active, .item-complex.item-energized > .item-content:active { + border-color: #e6b500; + background-color: #e6b500; } + .item-complex.item-energized > .item-content.active.item-complex > .item-content, .item-complex.item-energized > .item-content:active.item-complex > .item-content { + border-color: #e6b500; + background-color: #e6b500; } + +.item-complex.item-royal > .item-content { + border-color: #6b46e5; + background-color: #886aea; + color: #fff; } + .item-complex.item-royal > .item-content.active, .item-complex.item-royal > .item-content:active { + border-color: #6b46e5; + background-color: #6b46e5; } + .item-complex.item-royal > .item-content.active.item-complex > .item-content, .item-complex.item-royal > .item-content:active.item-complex > .item-content { + border-color: #6b46e5; + background-color: #6b46e5; } + +.item-complex.item-dark > .item-content { + border-color: #111; + background-color: #444; + color: #fff; } + .item-complex.item-dark > .item-content.active, .item-complex.item-dark > .item-content:active { + border-color: #000; + background-color: #262626; } + .item-complex.item-dark > .item-content.active.item-complex > .item-content, .item-complex.item-dark > .item-content:active.item-complex > .item-content { + border-color: #000; + background-color: #262626; } + +/** + * Item Icons + * -------------------------------------------------- + */ +.item-icon-left .icon, +.item-icon-right .icon { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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: 32px; + text-align: center; } + +.item .fill-icon { + min-width: 30px; + min-height: 30px; + font-size: 28px; } + +.item-icon-left { + padding-left: 54px; } + .item-icon-left .icon { + left: 11px; } + +.item-complex.item-icon-left { + padding-left: 0; } + .item-complex.item-icon-left .item-content { + padding-left: 54px; } + +.item-icon-right { + padding-right: 54px; } + .item-icon-right .icon { + right: 11px; } + +.item-complex.item-icon-right { + padding-right: 0; } + .item-complex.item-icon-right .item-content { + padding-right: 54px; } + +.item-icon-left.item-icon-right .icon:first-child { + right: auto; } + +.item-icon-left.item-icon-right .icon:last-child, +.item-icon-left .item-delete .icon { + left: auto; } + +.item-icon-left .icon-accessory, +.item-icon-right .icon-accessory { + color: #ccc; + font-size: 16px; } + +.item-icon-left .icon-accessory { + left: 3px; } + +.item-icon-right .icon-accessory { + right: 3px; } + +/** + * Item Button + * -------------------------------------------------- + * An item button is a child button inside an .item (not the entire .item) + */ +.item-button-left { + padding-left: 72px; } + +.item-button-left > .button, +.item-button-left .item-content > .button { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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: 8px; + left: 11px; + min-width: 34px; + min-height: 34px; + font-size: 18px; + line-height: 32px; } + .item-button-left > .button .icon:before, + .item-button-left .item-content > .button .icon:before { + position: relative; + left: auto; + width: auto; + line-height: 31px; } + .item-button-left > .button > .button, + .item-button-left .item-content > .button > .button { + margin: 0px 2px; + min-height: 34px; + font-size: 18px; + line-height: 32px; } + +.item-button-right, +a.item.item-button-right, +button.item.item-button-right { + padding-right: 80px; } + +.item-button-right > .button, +.item-button-right .item-content > .button, +.item-button-right > .buttons, +.item-button-right .item-content > .buttons { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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: 8px; + right: 16px; + min-width: 34px; + min-height: 34px; + font-size: 18px; + line-height: 32px; } + .item-button-right > .button .icon:before, + .item-button-right .item-content > .button .icon:before, + .item-button-right > .buttons .icon:before, + .item-button-right .item-content > .buttons .icon:before { + position: relative; + left: auto; + width: auto; + line-height: 31px; } + .item-button-right > .button > .button, + .item-button-right .item-content > .button > .button, + .item-button-right > .buttons > .button, + .item-button-right .item-content > .buttons > .button { + margin: 0px 2px; + min-width: 34px; + min-height: 34px; + font-size: 18px; + line-height: 32px; } + +.item-button-left.item-button-right .button:first-child { + right: auto; } + +.item-button-left.item-button-right .button:last-child { + left: auto; } + +.item-avatar, +.item-avatar .item-content, +.item-avatar-left, +.item-avatar-left .item-content { + padding-left: 72px; + min-height: 72px; } + .item-avatar > img:first-child, + .item-avatar .item-image, + .item-avatar .item-content > img:first-child, + .item-avatar .item-content .item-image, + .item-avatar-left > img:first-child, + .item-avatar-left .item-image, + .item-avatar-left .item-content > img:first-child, + .item-avatar-left .item-content .item-image { + position: absolute; + top: 16px; + left: 16px; + max-width: 40px; + max-height: 40px; + width: 100%; + height: 100%; + border-radius: 50%; } + +.item-avatar-right, +.item-avatar-right .item-content { + padding-right: 72px; + min-height: 72px; } + .item-avatar-right > img:first-child, + .item-avatar-right .item-image, + .item-avatar-right .item-content > img:first-child, + .item-avatar-right .item-content .item-image { + position: absolute; + top: 16px; + right: 16px; + max-width: 40px; + max-height: 40px; + width: 100%; + height: 100%; + border-radius: 50%; } + +.item-thumbnail-left, +.item-thumbnail-left .item-content { + padding-top: 8px; + padding-left: 106px; + min-height: 100px; } + .item-thumbnail-left > img:first-child, + .item-thumbnail-left .item-image, + .item-thumbnail-left .item-content > img:first-child, + .item-thumbnail-left .item-content .item-image { + position: absolute; + top: 10px; + left: 10px; + max-width: 80px; + max-height: 80px; + width: 100%; + height: 100%; } + +.item-avatar.item-complex, +.item-avatar-left.item-complex, +.item-thumbnail-left.item-complex { + padding-top: 0; + padding-left: 0; } + +.item-thumbnail-right, +.item-thumbnail-right .item-content { + padding-top: 8px; + padding-right: 106px; + min-height: 100px; } + .item-thumbnail-right > img:first-child, + .item-thumbnail-right .item-image, + .item-thumbnail-right .item-content > img:first-child, + .item-thumbnail-right .item-content .item-image { + position: absolute; + top: 10px; + right: 10px; + max-width: 80px; + max-height: 80px; + width: 100%; + height: 100%; } + +.item-avatar-right.item-complex, +.item-thumbnail-right.item-complex { + padding-top: 0; + padding-right: 0; } + +.item-image { + padding: 0; + text-align: center; } + .item-image img:first-child, .item-image .list-img { + width: 100%; + vertical-align: middle; } + +.item-body { + overflow: auto; + padding: 16px; + text-overflow: inherit; + white-space: normal; } + .item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p { + margin-top: 16px; + margin-bottom: 16px; } + +.item-divider { + padding-top: 8px; + padding-bottom: 8px; + min-height: 30px; + background-color: #f5f5f5; + color: #222; + font-weight: 500; } + +.platform-ios .item-divider-platform, +.item-divider-ios { + padding-top: 26px; + text-transform: uppercase; + font-weight: 300; + font-size: 13px; + background-color: #efeff4; + color: #555; } + +.platform-android .item-divider-platform, +.item-divider-android { + font-weight: 300; + font-size: 13px; } + +.item-note { + float: right; + color: #aaa; + font-size: 14px; } + +.item-left-editable .item-content, +.item-right-editable .item-content { + -webkit-transition-duration: 250ms; + transition-duration: 250ms; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; } + +.list-left-editing .item-left-editable .item-content, +.item-left-editing.item-left-editable .item-content { + -webkit-transform: translate3d(50px, 0, 0); + transform: translate3d(50px, 0, 0); } + +.item-remove-animate.ng-leave { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; } + +.item-remove-animate.ng-leave .item-content, .item-remove-animate.ng-leave:last-of-type { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + -webkit-transition-property: all; + transition-property: all; } + +.item-remove-animate.ng-leave.ng-leave-active .item-content { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) !important; + transform: translate3d(-100%, 0, 0) !important; } + +.item-remove-animate.ng-leave.ng-leave-active:last-of-type { + opacity: 0; } + +.item-remove-animate.ng-leave.ng-leave-active ~ ion-item:not(.ng-leave) { + -webkit-transform: translate3d(0, -webkit-calc(-100% + 1px), 0); + transform: translate3d(0, calc(-100% + 1px), 0); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transition-timing-function: cubic-bezier(0.25, 0.81, 0.24, 1); + transition-timing-function: cubic-bezier(0.25, 0.81, 0.24, 1); + -webkit-transition-property: all; + transition-property: all; } + +.item-left-edit { + -webkit-transition: all ease-in-out 125ms; + transition: all ease-in-out 125ms; + position: absolute; + top: 0; + left: 0; + z-index: 0; + width: 50px; + height: 100%; + line-height: 100%; + display: none; + opacity: 0; + -webkit-transform: translate3d(-21px, 0, 0); + transform: translate3d(-21px, 0, 0); } + .item-left-edit .button { + height: 100%; } + .item-left-edit .button.icon { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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%; } + .item-left-edit.visible { + display: block; } + .item-left-edit.visible.active { + opacity: 1; + -webkit-transform: translate3d(8px, 0, 0); + transform: translate3d(8px, 0, 0); } + +.list-left-editing .item-left-edit { + -webkit-transition-delay: 125ms; + transition-delay: 125ms; } + +.item-delete .button.icon { + color: #ef473a; + font-size: 24px; } + .item-delete .button.icon:hover { + opacity: .7; } + +.item-right-edit { + -webkit-transition: all ease-in-out 250ms; + transition: all ease-in-out 250ms; + position: absolute; + top: 0; + right: 0; + z-index: 3; + width: 75px; + height: 100%; + background: inherit; + padding-left: 20px; + display: block; + opacity: 0; + -webkit-transform: translate3d(75px, 0, 0); + transform: translate3d(75px, 0, 0); } + .item-right-edit .button { + min-width: 50px; + height: 100%; } + .item-right-edit .button.icon { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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-right-edit.visible { + display: block; } + .item-right-edit.visible.active { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.item-reorder .button.icon { + color: #444; + font-size: 32px; } + +.item-reordering { + position: absolute; + left: 0; + top: 0; + z-index: 9; + width: 100%; + box-shadow: 0px 0px 10px 0px #aaa; } + .item-reordering .item-reorder { + z-index: 9; } + +.item-placeholder { + opacity: 0.7; } + +/** + * The hidden right-side buttons that can be exposed under a list item + * with dragging. + */ +.item-options { + position: absolute; + top: 0; + right: 0; + z-index: 1; + height: 100%; } + .item-options .button { + height: 100%; + border: none; + border-radius: 0; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; } + .item-options .button:before { + margin: 0 auto; } + .item-options ion-option-button:last-child { + padding-right: calc(constant(safe-area-inset-right) + 12px); + padding-right: calc(env(safe-area-inset-right) + 12px); } + +/** + * Lists + * -------------------------------------------------- + */ +.list { + position: relative; + padding-top: 1px; + padding-bottom: 1px; + padding-left: 0; + margin-bottom: 20px; } + +.list:last-child { + margin-bottom: 0px; } + .list:last-child.card { + margin-bottom: 40px; } + +/** + * List Header + * -------------------------------------------------- + */ +.list-header { + margin-top: 20px; + padding: 5px 15px; + background-color: transparent; + color: #222; + font-weight: bold; } + +.card.list .list-item { + padding-right: 1px; + padding-left: 1px; } + +/** + * Cards and Inset Lists + * -------------------------------------------------- + * A card and list-inset are close to the same thing, except a card as a box shadow. + */ +.card, +.list-inset { + overflow: hidden; + margin: 20px 10px; + border-radius: 2px; + background-color: #fff; } + +.card { + padding-top: 1px; + padding-bottom: 1px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } + .card .item { + border-left: 0; + border-right: 0; } + .card .item:first-child { + border-top: 0; } + .card .item:last-child { + border-bottom: 0; } + +.padding .card, .padding .list-inset { + margin-left: 0; + margin-right: 0; } + +.card .item:first-child, +.list-inset .item:first-child, +.padding > .list .item:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; } + .card .item:first-child .item-content, + .list-inset .item:first-child .item-content, + .padding > .list .item:first-child .item-content { + border-top-left-radius: 2px; + border-top-right-radius: 2px; } + +.card .item:last-child, +.list-inset .item:last-child, +.padding > .list .item:last-child { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; } + .card .item:last-child .item-content, + .list-inset .item:last-child .item-content, + .padding > .list .item:last-child .item-content { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; } + +.card .item:last-child, +.list-inset .item:last-child { + margin-bottom: -1px; } + +.card .item, +.list-inset .item, +.padding > .list .item, +.padding-horizontal > .list .item { + margin-right: 0; + margin-left: 0; } + .card .item.item-input input, + .list-inset .item.item-input input, + .padding > .list .item.item-input input, + .padding-horizontal > .list .item.item-input input { + padding-right: 44px; } + +.padding-left > .list .item { + margin-left: 0; } + +.padding-right > .list .item { + margin-right: 0; } + +/** + * Badges + * -------------------------------------------------- + */ +.badge { + background-color: transparent; + color: #AAAAAA; + z-index: 1; + display: inline-block; + padding: 3px 8px; + min-width: 10px; + border-radius: 10px; + vertical-align: baseline; + text-align: center; + white-space: nowrap; + font-weight: bold; + font-size: 14px; + line-height: 16px; } + .badge:empty { + display: none; } + +.tabs .tab-item .badge.badge-light, +.badge.badge-light { + background-color: #fff; + color: #444; } + +.tabs .tab-item .badge.badge-stable, +.badge.badge-stable { + background-color: #2F81B7; + color: #fff; } + +.tabs .tab-item .badge.badge-positive, +.badge.badge-positive { + background-color: #2F81B7; + color: #fff; } + +.tabs .tab-item .badge.badge-calm, +.badge.badge-calm { + background-color: #11c1f3; + color: #fff; } + +.tabs .tab-item .badge.badge-assertive, +.badge.badge-assertive { + background-color: #ef473a; + color: #fff; } + +.tabs .tab-item .badge.badge-balanced, +.badge.badge-balanced { + background-color: #33cd5f; + color: #fff; } + +.tabs .tab-item .badge.badge-energized, +.badge.badge-energized { + background-color: #ffc900; + color: #fff; } + +.tabs .tab-item .badge.badge-royal, +.badge.badge-royal { + background-color: #886aea; + color: #fff; } + +.tabs .tab-item .badge.badge-dark, +.badge.badge-dark { + background-color: #444; + color: #fff; } + +.button .badge { + position: relative; + top: -1px; } + +/** + * Slide Box + * -------------------------------------------------- + */ +.slider { + position: relative; + visibility: hidden; + overflow: hidden; } + +.slider-slides { + position: relative; + height: 100%; } + +.slider-slide { + position: relative; + display: block; + float: left; + width: 100%; + height: 100%; + vertical-align: top; } + +.slider-slide-image > img { + width: 100%; } + +.slider-pager { + position: absolute; + bottom: 20px; + z-index: 1; + width: 100%; + height: 15px; + text-align: center; } + .slider-pager .slider-pager-page { + display: inline-block; + margin: 0px 3px; + width: 15px; + color: #000; + text-decoration: none; + opacity: 0.3; } + .slider-pager .slider-pager-page.active { + -webkit-transition: opacity 0.4s ease-in; + transition: opacity 0.4s ease-in; + opacity: 1; } + +.slider-slide.ng-enter, .slider-slide.ng-leave, .slider-slide.ng-animate, +.slider-pager-page.ng-enter, +.slider-pager-page.ng-leave, +.slider-pager-page.ng-animate { + -webkit-transition: none !important; + transition: none !important; } + +.slider-slide.ng-animate, +.slider-pager-page.ng-animate { + -webkit-animation: none 0s; + animation: none 0s; } + +/** + * Swiper 3.2.7 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * + * http://www.idangero.us/swiper/ + * + * Copyright 2015, Vladimir Kharlampidi + * The iDangero.us + * http://www.idangero.us/ + * + * Licensed under MIT + * + * Released on: December 7, 2015 + */ +.swiper-container { + margin: 0 auto; + position: relative; + overflow: hidden; + /* Fix of Webkit flickering */ + z-index: 1; } + +.swiper-container-no-flexbox .swiper-slide { + float: left; } + +.swiper-container-vertical > .swiper-wrapper { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } + +.swiper-wrapper { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } + +.swiper-container-android .swiper-slide, +.swiper-wrapper { + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate(0px, 0px); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); } + +.swiper-container-multirow > .swiper-wrapper { + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + +.swiper-container-free-mode > .swiper-wrapper { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + margin: 0 auto; } + +.swiper-slide { + display: block; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + width: 100%; + height: 100%; + position: relative; } + +/* Auto Height */ +.swiper-container-autoheight, +.swiper-container-autoheight .swiper-slide { + height: auto; } + +.swiper-container-autoheight .swiper-wrapper { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-transition-property: -webkit-transform, height; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform, height; } + +/* a11y */ +.swiper-container .swiper-notification { + position: absolute; + left: 0; + top: 0; + pointer-events: none; + opacity: 0; + z-index: -1000; } + +/* IE10 Windows Phone 8 Fixes */ +.swiper-wp8-horizontal { + -ms-touch-action: pan-y; + touch-action: pan-y; } + +.swiper-wp8-vertical { + -ms-touch-action: pan-x; + touch-action: pan-x; } + +/* Arrows */ +.swiper-button-prev, +.swiper-button-next { + position: absolute; + top: 50%; + width: 27px; + height: 44px; + margin-top: -22px; + z-index: 10; + cursor: pointer; + -moz-background-size: 27px 44px; + -webkit-background-size: 27px 44px; + background-size: 27px 44px; + background-position: center; + background-repeat: no-repeat; } + +.swiper-button-prev.swiper-button-disabled, +.swiper-button-next.swiper-button-disabled { + opacity: 0.35; + cursor: auto; + pointer-events: none; } + +.swiper-button-prev, +.swiper-container-rtl .swiper-button-next { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + left: 10px; + right: auto; } + +.swiper-button-prev.swiper-button-black, +.swiper-container-rtl .swiper-button-next.swiper-button-black { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } + +.swiper-button-prev.swiper-button-white, +.swiper-container-rtl .swiper-button-next.swiper-button-white { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } + +.swiper-button-next, +.swiper-container-rtl .swiper-button-prev { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + right: 10px; + left: auto; } + +.swiper-button-next.swiper-button-black, +.swiper-container-rtl .swiper-button-prev.swiper-button-black { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } + +.swiper-button-next.swiper-button-white, +.swiper-container-rtl .swiper-button-prev.swiper-button-white { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } + +/* Pagination Styles */ +.swiper-pagination { + position: absolute; + text-align: center; + -webkit-transition: 300ms; + -moz-transition: 300ms; + -o-transition: 300ms; + transition: 300ms; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + z-index: 10; } + +.swiper-pagination.swiper-pagination-hidden { + opacity: 0; } + +.swiper-pagination-bullet { + width: 8px; + height: 8px; + display: inline-block; + border-radius: 100%; + background: #000; + opacity: 0.2; } + +button.swiper-pagination-bullet { + border: none; + margin: 0; + padding: 0; + box-shadow: none; + -moz-appearance: none; + -ms-appearance: none; + -webkit-appearance: none; + appearance: none; } + +.swiper-pagination-clickable .swiper-pagination-bullet { + cursor: pointer; } + +.swiper-pagination-white .swiper-pagination-bullet { + background: #fff; } + +.swiper-pagination-bullet-active { + opacity: 1; } + +.swiper-pagination-white .swiper-pagination-bullet-active { + background: #fff; } + +.swiper-pagination-black .swiper-pagination-bullet-active { + background: #000; } + +.swiper-container-vertical > .swiper-pagination { + right: 10px; + top: 50%; + -webkit-transform: translate3d(0px, -50%, 0); + -moz-transform: translate3d(0px, -50%, 0); + -o-transform: translate(0px, -50%); + -ms-transform: translate3d(0px, -50%, 0); + transform: translate3d(0px, -50%, 0); } + +.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { + margin: 5px 0; + display: block; } + +.swiper-container-horizontal > .swiper-pagination { + bottom: 10px; + left: 0; + width: 100%; } + +.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { + margin: 0 5px; } + +/* 3D Container */ +.swiper-container-3d { + -webkit-perspective: 1200px; + -moz-perspective: 1200px; + -o-perspective: 1200px; + perspective: 1200px; } + +.swiper-container-3d .swiper-wrapper, +.swiper-container-3d .swiper-slide, +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom, +.swiper-container-3d .swiper-cube-shadow { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; } + +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 10; } + +.swiper-container-3d .swiper-slide-shadow-left { + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ } + +.swiper-container-3d .swiper-slide-shadow-right { + background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ } + +.swiper-container-3d .swiper-slide-shadow-top { + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ } + +.swiper-container-3d .swiper-slide-shadow-bottom { + background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ } + +/* Coverflow */ +.swiper-container-coverflow .swiper-wrapper { + /* Windows 8 IE 10 fix */ + -ms-perspective: 1200px; } + +/* Fade */ +.swiper-container-fade.swiper-container-free-mode .swiper-slide { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; } + +.swiper-container-fade .swiper-slide { + pointer-events: none; } + +.swiper-container-fade .swiper-slide .swiper-slide { + pointer-events: none; } + +.swiper-container-fade .swiper-slide-active, +.swiper-container-fade .swiper-slide-active .swiper-slide-active { + pointer-events: auto; } + +/* Cube */ +.swiper-container-cube { + overflow: visible; } + +.swiper-container-cube .swiper-slide { + pointer-events: none; + visibility: hidden; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + width: 100%; + height: 100%; + z-index: 1; } + +.swiper-container-cube.swiper-container-rtl .swiper-slide { + -webkit-transform-origin: 100% 0; + -moz-transform-origin: 100% 0; + -ms-transform-origin: 100% 0; + transform-origin: 100% 0; } + +.swiper-container-cube .swiper-slide-active, +.swiper-container-cube .swiper-slide-next, +.swiper-container-cube .swiper-slide-prev, +.swiper-container-cube .swiper-slide-next + .swiper-slide { + pointer-events: auto; + visibility: visible; } + +.swiper-container-cube .swiper-slide-shadow-top, +.swiper-container-cube .swiper-slide-shadow-bottom, +.swiper-container-cube .swiper-slide-shadow-left, +.swiper-container-cube .swiper-slide-shadow-right { + z-index: 0; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; } + +.swiper-container-cube .swiper-cube-shadow { + position: absolute; + left: 0; + bottom: 0px; + width: 100%; + height: 100%; + background: #000; + opacity: 0.6; + -webkit-filter: blur(50px); + filter: blur(50px); + z-index: 0; } + +/* Scrollbar */ +.swiper-scrollbar { + border-radius: 10px; + position: relative; + -ms-touch-action: none; + background: rgba(0, 0, 0, 0.1); } + +.swiper-container-horizontal > .swiper-scrollbar { + position: absolute; + left: 1%; + bottom: 3px; + z-index: 50; + height: 5px; + width: 98%; } + +.swiper-container-vertical > .swiper-scrollbar { + position: absolute; + right: 3px; + top: 1%; + z-index: 50; + width: 5px; + height: 98%; } + +.swiper-scrollbar-drag { + height: 100%; + width: 100%; + position: relative; + background: rgba(0, 0, 0, 0.5); + border-radius: 10px; + left: 0; + top: 0; } + +.swiper-scrollbar-cursor-drag { + cursor: move; } + +/* Preloader */ +.swiper-lazy-preloader { + width: 42px; + height: 42px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -21px; + margin-top: -21px; + z-index: 10; + -webkit-transform-origin: 50%; + -moz-transform-origin: 50%; + transform-origin: 50%; + -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; + -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; + animation: swiper-preloader-spin 1s steps(12, end) infinite; } + +.swiper-lazy-preloader:after { + display: block; + content: ""; + width: 100%; + height: 100%; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-position: 50%; + -webkit-background-size: 100%; + background-size: 100%; + background-repeat: no-repeat; } + +.swiper-lazy-preloader-white:after { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } + +@-webkit-keyframes swiper-preloader-spin { + 100% { + -webkit-transform: rotate(360deg); } } + +@keyframes swiper-preloader-spin { + 100% { + transform: rotate(360deg); } } + +ion-slides { + width: 100%; + height: 100%; + display: block; } + +.slide-zoom { + display: block; + width: 100%; + text-align: center; } + +.swiper-container { + width: 100%; + height: 100%; + padding: 0; + overflow: hidden; } + +.swiper-wrapper { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: 0; } + +.swiper-slide { + width: 100%; + height: 100%; + box-sizing: border-box; + /* Center slide text vertically */ } + .swiper-slide img { + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; } + +.scroll-refresher { + position: absolute; + top: -60px; + right: 0; + left: 0; + overflow: hidden; + margin: auto; + height: 60px; } + .scroll-refresher .ionic-refresher-content { + position: absolute; + bottom: 15px; + left: 0; + width: 100%; + color: #666666; + text-align: center; + font-size: 30px; } + .scroll-refresher .ionic-refresher-content .text-refreshing, + .scroll-refresher .ionic-refresher-content .text-pulling { + font-size: 16px; + line-height: 16px; } + .scroll-refresher .ionic-refresher-content.ionic-refresher-with-text { + bottom: 10px; } + .scroll-refresher .icon-refreshing, + .scroll-refresher .icon-pulling { + width: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; } + .scroll-refresher .icon-pulling { + -webkit-animation-name: refresh-spin-back; + animation-name: refresh-spin-back; + -webkit-animation-duration: 200ms; + animation-duration: 200ms; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-fill-mode: none; + animation-fill-mode: none; + -webkit-transform: translate3d(0, 0, 0) rotate(0deg); + transform: translate3d(0, 0, 0) rotate(0deg); } + .scroll-refresher .icon-refreshing, + .scroll-refresher .text-refreshing { + display: none; } + .scroll-refresher .icon-refreshing { + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; } + .scroll-refresher.active .icon-pulling:not(.pulling-rotation-disabled) { + -webkit-animation-name: refresh-spin; + animation-name: refresh-spin; + -webkit-transform: translate3d(0, 0, 0) rotate(-180deg); + transform: translate3d(0, 0, 0) rotate(-180deg); } + .scroll-refresher.active.refreshing { + -webkit-transition: -webkit-transform 0.2s; + transition: -webkit-transform 0.2s; + -webkit-transition: transform 0.2s; + transition: transform 0.2s; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); } + .scroll-refresher.active.refreshing .icon-pulling, + .scroll-refresher.active.refreshing .text-pulling { + display: none; } + .scroll-refresher.active.refreshing .icon-refreshing, + .scroll-refresher.active.refreshing .text-refreshing { + display: block; } + .scroll-refresher.active.refreshing.refreshing-tail { + -webkit-transform: scale(0, 0); + transform: scale(0, 0); } + +.overflow-scroll > .scroll { + -webkit-overflow-scrolling: touch; + width: 100%; } + .overflow-scroll > .scroll.overscroll { + position: fixed; + right: 0; + left: 0; } + +.overflow-scroll.padding > .scroll.overscroll { + padding: 10px; } + +@-webkit-keyframes refresh-spin { + 0% { + -webkit-transform: translate3d(0, 0, 0) rotate(0); } + 100% { + -webkit-transform: translate3d(0, 0, 0) rotate(180deg); } } + +@keyframes refresh-spin { + 0% { + transform: translate3d(0, 0, 0) rotate(0); } + 100% { + transform: translate3d(0, 0, 0) rotate(180deg); } } + +@-webkit-keyframes refresh-spin-back { + 0% { + -webkit-transform: translate3d(0, 0, 0) rotate(180deg); } + 100% { + -webkit-transform: translate3d(0, 0, 0) rotate(0); } } + +@keyframes refresh-spin-back { + 0% { + transform: translate3d(0, 0, 0) rotate(180deg); } + 100% { + transform: translate3d(0, 0, 0) rotate(0); } } + +/** + * Spinners + * -------------------------------------------------- + */ +.spinner { + stroke: #444; + fill: #444; } + .spinner svg { + width: 28px; + height: 28px; } + .spinner.spinner-light { + stroke: #fff; + fill: #fff; } + .spinner.spinner-stable { + stroke: #2F81B7; + fill: #2F81B7; } + .spinner.spinner-positive { + stroke: #2F81B7; + fill: #2F81B7; } + .spinner.spinner-calm { + stroke: #11c1f3; + fill: #11c1f3; } + .spinner.spinner-balanced { + stroke: #33cd5f; + fill: #33cd5f; } + .spinner.spinner-assertive { + stroke: #ef473a; + fill: #ef473a; } + .spinner.spinner-energized { + stroke: #ffc900; + fill: #ffc900; } + .spinner.spinner-royal { + stroke: #886aea; + fill: #886aea; } + .spinner.spinner-dark { + stroke: #444; + fill: #444; } + +.spinner-android { + stroke: #4b8bf4; } + +.spinner-ios, +.spinner-ios-small { + stroke: #69717d; } + +.spinner-spiral .stop1 { + stop-color: #fff; + stop-opacity: 0; } + +.spinner-spiral.spinner-light .stop1 { + stop-color: #444; } + +.spinner-spiral.spinner-light .stop2 { + stop-color: #fff; } + +.spinner-spiral.spinner-stable .stop2 { + stop-color: #2F81B7; } + +.spinner-spiral.spinner-positive .stop2 { + stop-color: #2F81B7; } + +.spinner-spiral.spinner-calm .stop2 { + stop-color: #11c1f3; } + +.spinner-spiral.spinner-balanced .stop2 { + stop-color: #33cd5f; } + +.spinner-spiral.spinner-assertive .stop2 { + stop-color: #ef473a; } + +.spinner-spiral.spinner-energized .stop2 { + stop-color: #ffc900; } + +.spinner-spiral.spinner-royal .stop2 { + stop-color: #886aea; } + +.spinner-spiral.spinner-dark .stop2 { + stop-color: #444; } + +/** + * Forms + * -------------------------------------------------- + */ +form { + margin: 0 0 1.42857; } + +legend { + display: block; + margin-bottom: 1.42857; + padding: 0; + width: 100%; + border: 1px solid #ddd; + color: #444; + font-size: 21px; + line-height: 2.85714; } + legend small { + color: #2F81B7; + font-size: 1.07143; } + +label, +input, +button, +select, +textarea { + font-weight: normal; + font-size: 14px; + line-height: 1.42857; } + +input, +button, +select, +textarea { + font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif; } + +.item-input { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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: relative; + overflow: hidden; + padding: 6px 0 5px 16px; } + .item-input input { + -webkit-border-radius: 0; + border-radius: 0; + -webkit-box-flex: 1; + -webkit-flex: 1 220px; + -moz-box-flex: 1; + -moz-flex: 1 220px; + -ms-flex: 1 220px; + flex: 1 220px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; + padding-right: 24px; + background-color: transparent; } + .item-input .button .icon { + -webkit-box-flex: 0; + -webkit-flex: 0 0 24px; + -moz-box-flex: 0; + -moz-flex: 0 0 24px; + -ms-flex: 0 0 24px; + flex: 0 0 24px; + position: static; + display: inline-block; + height: auto; + text-align: center; + font-size: 16px; } + .item-input .button-bar { + -webkit-border-radius: 0; + border-radius: 0; + -webkit-box-flex: 1; + -webkit-flex: 1 0 220px; + -moz-box-flex: 1; + -moz-flex: 1 0 220px; + -ms-flex: 1 0 220px; + flex: 1 0 220px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + .item-input .icon { + min-width: 14px; } + +.platform-windowsphone .item-input input { + flex-shrink: 1; } + +.item-input-inset { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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: relative; + overflow: hidden; + padding: 10.66667px; } + +.item-input-wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0; + -moz-box-flex: 1; + -moz-flex: 1 0; + -ms-flex: 1 0; + flex: 1 0; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; + -webkit-border-radius: 4px; + border-radius: 4px; + padding-right: 8px; + padding-left: 8px; + background: #eee; } + +.item-input-inset .item-input-wrapper input { + padding-left: 4px; + height: 29px; + background: transparent; + line-height: 18px; } + +.item-input-wrapper ~ .button { + margin-left: 10.66667px; } + +.input-label { + display: table; + padding: 7px 10px 7px 0px; + max-width: 200px; + width: 35%; + color: #444; + font-size: 16px; } + +.placeholder-icon { + color: #aaa; } + .placeholder-icon:first-child { + padding-right: 6px; } + .placeholder-icon:last-child { + padding-left: 6px; } + +.item-stacked-label { + display: block; + background-color: transparent; + box-shadow: none; } + .item-stacked-label .input-label, .item-stacked-label .icon { + display: inline-block; + padding: 4px 0 0 0px; + vertical-align: middle; } + +.item-stacked-label input, +.item-stacked-label textarea { + -webkit-border-radius: 2px; + border-radius: 2px; + padding: 4px 8px 3px 0; + border: none; + background-color: #fff; } + +.item-stacked-label input { + overflow: hidden; + height: 46px; } + +.item-select.item-stacked-label select { + position: relative; + padding: 0px; + max-width: 90%; + direction: ltr; + white-space: pre-wrap; + margin: -3px; } + +.item-floating-label { + display: block; + background-color: transparent; + box-shadow: none; } + .item-floating-label .input-label { + position: relative; + padding: 5px 0 0 0; + opacity: 0; + top: 10px; + -webkit-transition: opacity 0.15s ease-in, top 0.2s linear; + transition: opacity 0.15s ease-in, top 0.2s linear; } + .item-floating-label .input-label.has-input { + opacity: 1; + top: 0; + -webkit-transition: opacity 0.15s ease-in, top 0.2s linear; + transition: opacity 0.15s ease-in, top 0.2s linear; } + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { + display: block; + padding-top: 2px; + padding-left: 0; + height: 34px; + color: #111; + vertical-align: middle; + font-size: 14px; + line-height: 16px; } + +.platform-ios input[type="datetime-local"], +.platform-ios input[type="date"], +.platform-ios input[type="month"], +.platform-ios input[type="time"], +.platform-ios input[type="week"], +.platform-android input[type="datetime-local"], +.platform-android input[type="date"], +.platform-android input[type="month"], +.platform-android input[type="time"], +.platform-android input[type="week"] { + padding-top: 8px; } + +.item-input input, +.item-input textarea { + width: 100%; } + +textarea { + padding-left: 0; } + textarea::-moz-placeholder { + color: #aaaaaa; } + textarea:-ms-input-placeholder { + color: #aaaaaa; } + textarea::-webkit-input-placeholder { + color: #aaaaaa; + text-indent: -3px; } + +textarea { + height: auto; } + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { + border: 0; } + +input[type="radio"], +input[type="checkbox"] { + margin: 0; + line-height: normal; } + +.item-input input[type="file"], +.item-input input[type="image"], +.item-input input[type="submit"], +.item-input input[type="reset"], +.item-input input[type="button"], +.item-input input[type="radio"], +.item-input input[type="checkbox"] { + width: auto; } + +input[type="file"] { + line-height: 34px; } + +.previous-input-focus, +.cloned-text-input + input, +.cloned-text-input + textarea { + position: absolute !important; + left: -9999px; + width: 200px; } + +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #aaaaaa; } + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #aaaaaa; } + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #aaaaaa; + text-indent: 0; } + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly]:not(.cloned-text-input), +textarea[readonly]:not(.cloned-text-input), +select[readonly] { + background-color: #2F81B7; + cursor: not-allowed; } + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; } + +/** + * Checkbox + * -------------------------------------------------- + */ +.checkbox { + position: relative; + display: inline-block; + padding: 7px 7px; + cursor: pointer; } + .checkbox input:before, + .checkbox .checkbox-icon:before { + border-color: #ddd; } + .checkbox input:checked:before, + .checkbox input:checked + .checkbox-icon:before { + background: #2F81B7; + border-color: #2F81B7; } + +.checkbox-light input:before, +.checkbox-light .checkbox-icon:before { + border-color: #ddd; } + +.checkbox-light input:checked:before, +.checkbox-light input:checked + .checkbox-icon:before { + background: #ddd; + border-color: #ddd; } + +.checkbox-stable input:before, +.checkbox-stable .checkbox-icon:before { + border-color: #2F81B7; } + +.checkbox-stable input:checked:before, +.checkbox-stable input:checked + .checkbox-icon:before { + background: #2F81B7; + border-color: #2F81B7; } + +.checkbox-positive input:before, +.checkbox-positive .checkbox-icon:before { + border-color: #2F81B7; } + +.checkbox-positive input:checked:before, +.checkbox-positive input:checked + .checkbox-icon:before { + background: #2F81B7; + border-color: #2F81B7; } + +.checkbox-calm input:before, +.checkbox-calm .checkbox-icon:before { + border-color: #11c1f3; } + +.checkbox-calm input:checked:before, +.checkbox-calm input:checked + .checkbox-icon:before { + background: #11c1f3; + border-color: #11c1f3; } + +.checkbox-assertive input:before, +.checkbox-assertive .checkbox-icon:before { + border-color: #ef473a; } + +.checkbox-assertive input:checked:before, +.checkbox-assertive input:checked + .checkbox-icon:before { + background: #ef473a; + border-color: #ef473a; } + +.checkbox-balanced input:before, +.checkbox-balanced .checkbox-icon:before { + border-color: #33cd5f; } + +.checkbox-balanced input:checked:before, +.checkbox-balanced input:checked + .checkbox-icon:before { + background: #33cd5f; + border-color: #33cd5f; } + +.checkbox-energized input:before, +.checkbox-energized .checkbox-icon:before { + border-color: #ffc900; } + +.checkbox-energized input:checked:before, +.checkbox-energized input:checked + .checkbox-icon:before { + background: #ffc900; + border-color: #ffc900; } + +.checkbox-royal input:before, +.checkbox-royal .checkbox-icon:before { + border-color: #886aea; } + +.checkbox-royal input:checked:before, +.checkbox-royal input:checked + .checkbox-icon:before { + background: #886aea; + border-color: #886aea; } + +.checkbox-dark input:before, +.checkbox-dark .checkbox-icon:before { + border-color: #444; } + +.checkbox-dark input:checked:before, +.checkbox-dark input:checked + .checkbox-icon:before { + background: #444; + border-color: #444; } + +.checkbox input:disabled:before, +.checkbox input:disabled + .checkbox-icon:before { + border-color: #ddd; } + +.checkbox input:disabled:checked:before, +.checkbox input:disabled:checked + .checkbox-icon:before { + background: #ddd; } + +.checkbox.checkbox-input-hidden input { + display: none !important; } + +.checkbox input, +.checkbox-icon { + position: relative; + width: 28px; + height: 28px; + display: block; + border: 0; + background: transparent; + cursor: pointer; + -webkit-appearance: none; } + .checkbox input:before, + .checkbox-icon:before { + display: table; + width: 100%; + height: 100%; + border-width: 1px; + border-style: solid; + border-radius: 28px; + background: #fff; + content: ' '; + -webkit-transition: background-color 20ms ease-in-out; + transition: background-color 20ms ease-in-out; } + +.checkbox input:checked:before, +input:checked + .checkbox-icon:before { + border-width: 2px; } + +.checkbox input:after, +.checkbox-icon:after { + -webkit-transition: opacity 0.05s ease-in-out; + transition: opacity 0.05s ease-in-out; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + position: absolute; + top: 33%; + left: 25%; + display: table; + width: 14px; + height: 6px; + border: 1px solid #fff; + border-top: 0; + border-right: 0; + content: ' '; + opacity: 0; } + +.platform-android .checkbox-platform input:before, +.platform-android .checkbox-platform .checkbox-icon:before, +.checkbox-square input:before, +.checkbox-square .checkbox-icon:before { + border-radius: 2px; + width: 72%; + height: 72%; + margin-top: 14%; + margin-left: 14%; + border-width: 2px; } + +.platform-android .checkbox-platform input:after, +.platform-android .checkbox-platform .checkbox-icon:after, +.checkbox-square input:after, +.checkbox-square .checkbox-icon:after { + border-width: 2px; + top: 19%; + left: 25%; + width: 13px; + height: 7px; } + +.platform-android .item-checkbox-right .checkbox-square .checkbox-icon::after { + top: 31%; } + +.grade-c .checkbox input:after, +.grade-c .checkbox-icon:after { + -webkit-transform: rotate(0); + transform: rotate(0); + top: 3px; + left: 4px; + border: none; + color: #fff; + content: '\2713'; + font-weight: bold; + font-size: 20px; } + +.checkbox input:checked:after, +input:checked + .checkbox-icon:after { + opacity: 1; } + +.item-checkbox { + padding-left: 60px; } + .item-checkbox.active { + box-shadow: none; } + +.item-checkbox .checkbox { + position: absolute; + top: 50%; + right: 8px; + left: 8px; + z-index: 3; + margin-top: -21px; } + +.item-checkbox.item-checkbox-right { + padding-right: 60px; + padding-left: 16px; } + +.item-checkbox-right .checkbox input, +.item-checkbox-right .checkbox-icon { + float: right; } + +/** + * Toggle + * -------------------------------------------------- + */ +.item-toggle { + pointer-events: none; } + +.toggle { + position: relative; + display: inline-block; + pointer-events: auto; + margin: -5px; + padding: 5px; } + .toggle input:checked + .track { + border-color: #4cd964; + background-color: #4cd964; } + .toggle.dragging .handle { + background-color: #f2f2f2 !important; } + +.toggle.toggle-light input:checked + .track { + border-color: #ddd; + background-color: #ddd; } + +.toggle.toggle-stable input:checked + .track { + border-color: #2F81B7; + background-color: #2F81B7; } + +.toggle.toggle-positive input:checked + .track { + border-color: #2F81B7; + background-color: #2F81B7; } + +.toggle.toggle-calm input:checked + .track { + border-color: #11c1f3; + background-color: #11c1f3; } + +.toggle.toggle-assertive input:checked + .track { + border-color: #ef473a; + background-color: #ef473a; } + +.toggle.toggle-balanced input:checked + .track { + border-color: #33cd5f; + background-color: #33cd5f; } + +.toggle.toggle-energized input:checked + .track { + border-color: #ffc900; + background-color: #ffc900; } + +.toggle.toggle-royal input:checked + .track { + border-color: #886aea; + background-color: #886aea; } + +.toggle.toggle-dark input:checked + .track { + border-color: #444; + background-color: #444; } + +.toggle input { + display: none; } + +/* the track appearance when the toggle is "off" */ +.toggle .track { + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: background-color, border; + transition-property: background-color, border; + display: inline-block; + box-sizing: border-box; + width: 51px; + height: 31px; + border: solid 2px #e6e6e6; + border-radius: 20px; + background-color: #fff; + content: ' '; + cursor: pointer; + pointer-events: none; } + +/* Fix to avoid background color bleeding */ +/* (occurred on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */ +.platform-android4_2 .toggle .track { + -webkit-background-clip: padding-box; } + +/* the handle (circle) thats inside the toggle's track area */ +/* also the handle's appearance when it is "off" */ +.toggle .handle { + -webkit-transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1); + transition: 0.3s cubic-bezier(0, 1.1, 1, 1.1); + -webkit-transition-property: background-color, transform; + transition-property: background-color, transform; + position: absolute; + display: block; + width: 27px; + height: 27px; + border-radius: 27px; + background-color: #fff; + top: 7px; + left: 7px; + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15); } + .toggle .handle:before { + position: absolute; + top: -4px; + left: -21.5px; + padding: 18.5px 34px; + content: " "; } + +.toggle input:checked + .track .handle { + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + background-color: #fff; } + +.item-toggle.active { + box-shadow: none; } + +.item-toggle, +.item-toggle.item-complex .item-content { + padding-right: 99px; } + +.item-toggle.item-complex { + padding-right: 0; } + +.item-toggle .toggle { + position: absolute; + top: 10px; + right: 16px; + z-index: 3; } + +.toggle input:disabled + .track { + opacity: .6; } + +.toggle-small .track { + border: 0; + width: 34px; + height: 15px; + background: #9e9e9e; } + +.toggle-small input:checked + .track { + background: rgba(0, 150, 137, 0.5); } + +.toggle-small .handle { + top: 2px; + left: 4px; + width: 21px; + height: 21px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); } + +.toggle-small input:checked + .track .handle { + -webkit-transform: translate3d(16px, 0, 0); + transform: translate3d(16px, 0, 0); + background: #009689; } + +.toggle-small.item-toggle .toggle { + top: 19px; } + +.toggle-small .toggle-light input:checked + .track { + background-color: rgba(221, 221, 221, 0.5); } + +.toggle-small .toggle-light input:checked + .track .handle { + background-color: #ddd; } + +.toggle-small .toggle-stable input:checked + .track { + background-color: rgba(47, 129, 183, 0.5); } + +.toggle-small .toggle-stable input:checked + .track .handle { + background-color: #2F81B7; } + +.toggle-small .toggle-positive input:checked + .track { + background-color: rgba(47, 129, 183, 0.5); } + +.toggle-small .toggle-positive input:checked + .track .handle { + background-color: #2F81B7; } + +.toggle-small .toggle-calm input:checked + .track { + background-color: rgba(17, 193, 243, 0.5); } + +.toggle-small .toggle-calm input:checked + .track .handle { + background-color: #11c1f3; } + +.toggle-small .toggle-assertive input:checked + .track { + background-color: rgba(239, 71, 58, 0.5); } + +.toggle-small .toggle-assertive input:checked + .track .handle { + background-color: #ef473a; } + +.toggle-small .toggle-balanced input:checked + .track { + background-color: rgba(51, 205, 95, 0.5); } + +.toggle-small .toggle-balanced input:checked + .track .handle { + background-color: #33cd5f; } + +.toggle-small .toggle-energized input:checked + .track { + background-color: rgba(255, 201, 0, 0.5); } + +.toggle-small .toggle-energized input:checked + .track .handle { + background-color: #ffc900; } + +.toggle-small .toggle-royal input:checked + .track { + background-color: rgba(136, 106, 234, 0.5); } + +.toggle-small .toggle-royal input:checked + .track .handle { + background-color: #886aea; } + +.toggle-small .toggle-dark input:checked + .track { + background-color: rgba(68, 68, 68, 0.5); } + +.toggle-small .toggle-dark input:checked + .track .handle { + background-color: #444; } + +/** + * Radio Button Inputs + * -------------------------------------------------- + */ +.item-radio { + padding: 0; } + .item-radio:hover { + cursor: pointer; } + +.item-radio .item-content { + /* give some room to the right for the checkmark icon */ + padding-right: 64px; } + +.item-radio .radio-icon { + /* checkmark icon will be hidden by default */ + position: absolute; + top: 0; + right: 0; + z-index: 3; + visibility: hidden; + padding: 14px; + height: 100%; + font-size: 24px; } + +.item-radio input { + /* hide any radio button inputs elements (the ugly circles) */ + position: absolute; + left: -9999px; } + .item-radio input:checked + .radio-content .item-content { + /* style the item content when its checked */ + background: #f7f7f7; } + .item-radio input:checked + .radio-content .radio-icon { + /* show the checkmark icon when its checked */ + visibility: visible; } + +/** + * Range + * -------------------------------------------------- + */ +.range input { + display: inline-block; + overflow: hidden; + margin-top: 5px; + margin-bottom: 5px; + padding-right: 2px; + padding-left: 1px; + width: auto; + height: 43px; + outline: none; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ccc), color-stop(100%, #ccc)); + background: linear-gradient(to right, #ccc 0%, #ccc 100%); + background-position: center; + background-size: 99% 2px; + background-repeat: no-repeat; + -webkit-appearance: none; + /* + &::-ms-track{ + background: transparent; + border-color: transparent; + border-width: 11px 0 16px; + color:transparent; + margin-top:20px; + } + &::-ms-thumb { + width: $range-slider-width; + height: $range-slider-height; + border-radius: $range-slider-border-radius; + background-color: $toggle-handle-off-bg-color; + border-color:$toggle-handle-off-bg-color; + box-shadow: $range-slider-box-shadow; + margin-left:1px; + margin-right:1px; + outline:none; + } + &::-ms-fill-upper { + height: $range-track-height; + background:$range-default-track-bg; + } + */ } + .range input::-moz-focus-outer { + /* hide the focus outline in Firefox */ + border: 0; } + .range input::-webkit-slider-thumb { + position: relative; + width: 28px; + height: 28px; + border-radius: 50%; + background-color: #fff; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2); + cursor: pointer; + -webkit-appearance: none; + border: 0; } + .range input::-webkit-slider-thumb:before { + /* what creates the colorful line on the left side of the slider */ + position: absolute; + top: 13px; + left: -2001px; + width: 2000px; + height: 2px; + background: #444; + content: ' '; } + .range input::-webkit-slider-thumb:after { + /* create a larger (but hidden) hit area */ + position: absolute; + top: -15px; + left: -15px; + padding: 30px; + content: ' '; } + .range input::-ms-fill-lower { + height: 2px; + background: #444; } + +.range { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + 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; + padding: 2px 11px; } + .range.range-light input::-webkit-slider-thumb:before { + background: #ddd; } + .range.range-light input::-ms-fill-lower { + background: #ddd; } + .range.range-stable input::-webkit-slider-thumb:before { + background: #2F81B7; } + .range.range-stable input::-ms-fill-lower { + background: #2F81B7; } + .range.range-positive input::-webkit-slider-thumb:before { + background: #2F81B7; } + .range.range-positive input::-ms-fill-lower { + background: #2F81B7; } + .range.range-calm input::-webkit-slider-thumb:before { + background: #11c1f3; } + .range.range-calm input::-ms-fill-lower { + background: #11c1f3; } + .range.range-balanced input::-webkit-slider-thumb:before { + background: #33cd5f; } + .range.range-balanced input::-ms-fill-lower { + background: #33cd5f; } + .range.range-assertive input::-webkit-slider-thumb:before { + background: #ef473a; } + .range.range-assertive input::-ms-fill-lower { + background: #ef473a; } + .range.range-energized input::-webkit-slider-thumb:before { + background: #ffc900; } + .range.range-energized input::-ms-fill-lower { + background: #ffc900; } + .range.range-royal input::-webkit-slider-thumb:before { + background: #886aea; } + .range.range-royal input::-ms-fill-lower { + background: #886aea; } + .range.range-dark input::-webkit-slider-thumb:before { + background: #444; } + .range.range-dark input::-ms-fill-lower { + background: #444; } + +.range .icon { + -webkit-box-flex: 0; + -webkit-flex: 0; + -moz-box-flex: 0; + -moz-flex: 0; + -ms-flex: 0; + flex: 0; + display: block; + min-width: 24px; + text-align: center; + font-size: 24px; } + +.range input { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: block; + margin-right: 10px; + margin-left: 10px; } + +.range-label { + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -moz-box-flex: 0; + -moz-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: block; + white-space: nowrap; } + +.range-label:first-child { + padding-left: 5px; } + +.range input + .range-label { + padding-right: 5px; + padding-left: 0; } + +.platform-windowsphone .range input { + height: auto; } + +/** + * Select + * -------------------------------------------------- + */ +.item-select { + position: relative; } + .item-select select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: absolute; + top: 0; + bottom: 0; + right: 0; + padding: 0 48px 0 16px; + max-width: 65%; + border: none; + background: #fff; + color: #333; + text-indent: .01px; + text-overflow: ''; + white-space: nowrap; + font-size: 14px; + cursor: pointer; + direction: rtl; } + .item-select select::-ms-expand { + display: none; } + .item-select option { + direction: ltr; } + .item-select:after { + position: absolute; + top: 50%; + right: 16px; + margin-top: -3px; + width: 0; + height: 0; + border-top: 5px solid; + border-right: 5px solid rgba(0, 0, 0, 0); + border-left: 5px solid rgba(0, 0, 0, 0); + color: #999; + content: ""; + pointer-events: none; } + .item-select.item-light select { + background: #fff; + color: #444; } + .item-select.item-stable select { + background: #2F81B7; + color: #fff; } + .item-select.item-stable:after, .item-select.item-stable .input-label { + color: #102b3d; } + .item-select.item-positive select { + background: #2F81B7; + color: #fff; } + .item-select.item-positive:after, .item-select.item-positive .input-label { + color: #fff; } + .item-select.item-calm select { + background: #11c1f3; + color: #fff; } + .item-select.item-calm:after, .item-select.item-calm .input-label { + color: #fff; } + .item-select.item-assertive select { + background: #ef473a; + color: #fff; } + .item-select.item-assertive:after, .item-select.item-assertive .input-label { + color: #fff; } + .item-select.item-balanced select { + background: #33cd5f; + color: #fff; } + .item-select.item-balanced:after, .item-select.item-balanced .input-label { + color: #fff; } + .item-select.item-energized select { + background: #ffc900; + color: #fff; } + .item-select.item-energized:after, .item-select.item-energized .input-label { + color: #fff; } + .item-select.item-royal select { + background: #886aea; + color: #fff; } + .item-select.item-royal:after, .item-select.item-royal .input-label { + color: #fff; } + .item-select.item-dark select { + background: #444; + color: #fff; } + .item-select.item-dark:after, .item-select.item-dark .input-label { + color: #fff; } + +select[multiple], select[size] { + height: auto; } + +/** + * Progress + * -------------------------------------------------- + */ +progress { + display: block; + margin: 15px auto; + width: 100%; } + +/** + * Buttons + * -------------------------------------------------- + */ +.button { + border-color: transparent; + background-color: #2F81B7; + color: #fff; + position: relative; + display: inline-block; + margin: 0; + padding: 0 12px; + min-width: 52px; + min-height: 47px; + border-width: 1px; + border-style: solid; + border-radius: 4px; + vertical-align: top; + text-align: center; + text-overflow: ellipsis; + font-size: 16px; + line-height: 42px; + cursor: pointer; } + .button:hover { + color: #fff; + text-decoration: none; } + .button.active, .button.activated { + border-color: #2F81B7; + background-color: #25648e; } + .button:after { + position: absolute; + top: -6px; + right: -6px; + bottom: -6px; + left: -6px; + content: ' '; } + .button .icon { + vertical-align: top; + pointer-events: none; } + .button .icon:before, .button.icon:before, .button.icon-left:before, .button.icon-right:before { + display: inline-block; + padding: 0 0 1px 0; + vertical-align: inherit; + font-size: 24px; + line-height: 41px; + pointer-events: none; } + .button.icon-left:before { + float: left; + padding-right: .2em; + padding-left: 0; } + .button.icon-right:before { + float: right; + padding-right: 0; + padding-left: .2em; } + .button.button-block, .button.button-full { + margin-top: 10px; + margin-bottom: 10px; } + .button.button-light { + border-color: transparent; + background-color: #fff; + color: #444; } + .button.button-light:hover { + color: #444; + text-decoration: none; } + .button.button-light.active, .button.button-light.activated { + border-color: #2F81B7; + background-color: #fafafa; } + .button.button-light.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #ddd; } + .button.button-light.button-icon { + border-color: transparent; + background: none; } + .button.button-light.button-outline { + border-color: #ddd; + background: transparent; + color: #ddd; } + .button.button-light.button-outline.active, .button.button-light.button-outline.activated { + background-color: #ddd; + box-shadow: none; + color: #fff; } + .button.button-stable { + border-color: transparent; + background-color: #2F81B7; + color: #fff; } + .button.button-stable:hover { + color: #fff; + text-decoration: none; } + .button.button-stable.active, .button.button-stable.activated { + border-color: #2F81B7; + background-color: #25648e; } + .button.button-stable.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #2F81B7; } + .button.button-stable.button-icon { + border-color: transparent; + background: none; } + .button.button-stable.button-outline { + border-color: #2F81B7; + background: transparent; + color: #2F81B7; } + .button.button-stable.button-outline.active, .button.button-stable.button-outline.activated { + background-color: #2F81B7; + box-shadow: none; + color: #fff; } + .button.button-positive { + border-color: transparent; + background-color: #2F81B7; + color: #fff; } + .button.button-positive:hover { + color: #fff; + text-decoration: none; } + .button.button-positive.active, .button.button-positive.activated { + border-color: #2F81B7; + background-color: #25648e; } + .button.button-positive.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #2F81B7; } + .button.button-positive.button-icon { + border-color: transparent; + background: none; } + .button.button-positive.button-outline { + border-color: #2F81B7; + background: transparent; + color: #2F81B7; } + .button.button-positive.button-outline.active, .button.button-positive.button-outline.activated { + background-color: #2F81B7; + box-shadow: none; + color: #fff; } + .button.button-calm { + border-color: transparent; + background-color: #11c1f3; + color: #fff; } + .button.button-calm:hover { + color: #fff; + text-decoration: none; } + .button.button-calm.active, .button.button-calm.activated { + border-color: #2F81B7; + background-color: #0a9dc7; } + .button.button-calm.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #11c1f3; } + .button.button-calm.button-icon { + border-color: transparent; + background: none; } + .button.button-calm.button-outline { + border-color: #11c1f3; + background: transparent; + color: #11c1f3; } + .button.button-calm.button-outline.active, .button.button-calm.button-outline.activated { + background-color: #11c1f3; + box-shadow: none; + color: #fff; } + .button.button-assertive { + border-color: transparent; + background-color: #ef473a; + color: #fff; } + .button.button-assertive:hover { + color: #fff; + text-decoration: none; } + .button.button-assertive.active, .button.button-assertive.activated { + border-color: #2F81B7; + background-color: #e42112; } + .button.button-assertive.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #ef473a; } + .button.button-assertive.button-icon { + border-color: transparent; + background: none; } + .button.button-assertive.button-outline { + border-color: #ef473a; + background: transparent; + color: #ef473a; } + .button.button-assertive.button-outline.active, .button.button-assertive.button-outline.activated { + background-color: #ef473a; + box-shadow: none; + color: #fff; } + .button.button-balanced { + border-color: transparent; + background-color: #33cd5f; + color: #fff; } + .button.button-balanced:hover { + color: #fff; + text-decoration: none; } + .button.button-balanced.active, .button.button-balanced.activated { + border-color: #2F81B7; + background-color: #28a54c; } + .button.button-balanced.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #33cd5f; } + .button.button-balanced.button-icon { + border-color: transparent; + background: none; } + .button.button-balanced.button-outline { + border-color: #33cd5f; + background: transparent; + color: #33cd5f; } + .button.button-balanced.button-outline.active, .button.button-balanced.button-outline.activated { + background-color: #33cd5f; + box-shadow: none; + color: #fff; } + .button.button-energized { + border-color: transparent; + background-color: #ffc900; + color: #fff; } + .button.button-energized:hover { + color: #fff; + text-decoration: none; } + .button.button-energized.active, .button.button-energized.activated { + border-color: #2F81B7; + background-color: #e6b500; } + .button.button-energized.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #ffc900; } + .button.button-energized.button-icon { + border-color: transparent; + background: none; } + .button.button-energized.button-outline { + border-color: #ffc900; + background: transparent; + color: #ffc900; } + .button.button-energized.button-outline.active, .button.button-energized.button-outline.activated { + background-color: #ffc900; + box-shadow: none; + color: #fff; } + .button.button-royal { + border-color: transparent; + background-color: #886aea; + color: #fff; } + .button.button-royal:hover { + color: #fff; + text-decoration: none; } + .button.button-royal.active, .button.button-royal.activated { + border-color: #2F81B7; + background-color: #6b46e5; } + .button.button-royal.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #886aea; } + .button.button-royal.button-icon { + border-color: transparent; + background: none; } + .button.button-royal.button-outline { + border-color: #886aea; + background: transparent; + color: #886aea; } + .button.button-royal.button-outline.active, .button.button-royal.button-outline.activated { + background-color: #886aea; + box-shadow: none; + color: #fff; } + .button.button-dark { + border-color: transparent; + background-color: #444; + color: #fff; } + .button.button-dark:hover { + color: #fff; + text-decoration: none; } + .button.button-dark.active, .button.button-dark.activated { + border-color: #2F81B7; + background-color: #262626; } + .button.button-dark.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #444; } + .button.button-dark.button-icon { + border-color: transparent; + background: none; } + .button.button-dark.button-outline { + border-color: #444; + background: transparent; + color: #444; } + .button.button-dark.button-outline.active, .button.button-dark.button-outline.activated { + background-color: #444; + box-shadow: none; + color: #fff; } + +.button-small { + padding: 2px 4px 1px; + min-width: 28px; + min-height: 30px; + font-size: 12px; + line-height: 26px; } + .button-small .icon:before, .button-small.icon:before, .button-small.icon-left:before, .button-small.icon-right:before { + font-size: 16px; + line-height: 19px; + margin-top: 3px; } + +.button-large { + padding: 0 16px; + min-width: 68px; + min-height: 59px; + font-size: 20px; + line-height: 53px; } + .button-large .icon:before, .button-large.icon:before, .button-large.icon-left:before, .button-large.icon-right:before { + padding-bottom: 2px; + font-size: 32px; + line-height: 51px; } + +.button-icon { + -webkit-transition: opacity 0.1s; + transition: opacity 0.1s; + padding: 0 6px; + min-width: initial; + border-color: transparent; + background: none; } + .button-icon.button.active, .button-icon.button.activated { + border-color: transparent; + background: none; + box-shadow: none; + opacity: 0.3; } + .button-icon .icon:before, .button-icon.icon:before { + font-size: 32px; } + +.button-clear { + -webkit-transition: opacity 0.1s; + transition: opacity 0.1s; + padding: 0 6px; + max-height: 42px; + border-color: transparent; + background: none; + box-shadow: none; } + .button-clear.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: transparent; } + .button-clear.button-icon { + border-color: transparent; + background: none; } + .button-clear.active, .button-clear.activated { + opacity: 0.3; } + +.button-outline { + -webkit-transition: opacity 0.1s; + transition: opacity 0.1s; + background: none; + box-shadow: none; } + .button-outline.button-outline { + border-color: transparent; + background: transparent; + color: transparent; } + .button-outline.button-outline.active, .button-outline.button-outline.activated { + background-color: transparent; + box-shadow: none; + color: #fff; } + +.padding > .button.button-block:first-child { + margin-top: 0; } + +.button-block { + display: block; + clear: both; } + .button-block:after { + clear: both; } + +.button-full, +.button-full > .button { + display: block; + margin-right: 0; + margin-left: 0; + border-right-width: 0; + border-left-width: 0; + border-radius: 0; } + +button.button-block, +button.button-full, +.button-full > button.button, +input.button.button-block { + width: 100%; } + +a.button { + text-decoration: none; } + a.button .icon:before, a.button.icon:before, a.button.icon-left:before, a.button.icon-right:before { + margin-top: 2px; } + +.button.disabled, +.button[disabled] { + opacity: .4; + cursor: default !important; + pointer-events: none; } + +/** + * Button Bar + * -------------------------------------------------- + */ +.button-bar { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + width: 100%; } + .button-bar.button-bar-inline { + display: block; + width: auto; + *zoom: 1; } + .button-bar.button-bar-inline:before, .button-bar.button-bar-inline:after { + display: table; + content: ""; + line-height: 0; } + .button-bar.button-bar-inline:after { + clear: both; } + .button-bar.button-bar-inline > .button { + width: auto; + display: inline-block; + float: left; } + .button-bar.bar-light > .button { + border-color: #ddd; } + .button-bar.bar-stable > .button { + border-color: #2F81B7; } + .button-bar.bar-positive > .button { + border-color: #2F81B7; } + .button-bar.bar-calm > .button { + border-color: #0a9dc7; } + .button-bar.bar-assertive > .button { + border-color: #e42112; } + .button-bar.bar-balanced > .button { + border-color: #28a54c; } + .button-bar.bar-energized > .button { + border-color: #e6b500; } + .button-bar.bar-royal > .button { + border-color: #6b46e5; } + .button-bar.bar-dark > .button { + border-color: #111; } + +.button-bar > .button { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: block; + overflow: hidden; + padding: 0 16px; + width: 0; + border-width: 1px 0px 1px 1px; + border-radius: 0; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; } + .button-bar > .button:before, + .button-bar > .button .icon:before { + line-height: 44px; } + .button-bar > .button:first-child { + border-radius: 4px 0px 0px 4px; } + .button-bar > .button:last-child { + border-right-width: 1px; + border-radius: 0px 4px 4px 0px; } + .button-bar > .button:only-child { + border-radius: 4px; } + +.button-bar > .button-small:before, +.button-bar > .button-small .icon:before { + line-height: 28px; } + +/** + * Grid + * -------------------------------------------------- + * Using flexbox for the grid, inspired by Philip Walton: + * http://philipwalton.github.io/solved-by-flexbox/demos/grids/ + * By default each .col within a .row will evenly take up + * available width, and the height of each .col with take + * up the height of the tallest .col in the same .row. + */ +.row { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + padding: 5px; + width: 100%; } + +.row-wrap { + -webkit-flex-wrap: wrap; + -moz-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.row-no-padding { + padding: 0; } + .row-no-padding > .col { + padding: 0; } + +.row + .row { + margin-top: -5px; + padding-top: 0; } + +.col { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + display: block; + padding: 5px; + width: 100%; } + +/* Vertically Align Columns */ +/* .row-* vertically aligns every .col in the .row */ +.row-top { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + -moz-align-items: flex-start; + align-items: flex-start; } + +.row-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + -moz-align-items: flex-end; + align-items: flex-end; } + +.row-center { + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + -moz-align-items: center; + align-items: center; } + +.row-stretch { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + -moz-align-items: stretch; + align-items: stretch; } + +.row-baseline { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + -webkit-align-items: baseline; + -moz-align-items: baseline; + align-items: baseline; } + +/* .col-* vertically aligns an individual .col */ +.col-top { + -webkit-align-self: flex-start; + -moz-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; } + +.col-bottom { + -webkit-align-self: flex-end; + -moz-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; } + +.col-center { + -webkit-align-self: center; + -moz-align-self: center; + -ms-flex-item-align: center; + align-self: center; } + +/* Column Offsets */ +.col-offset-10 { + margin-left: 10%; } + +.col-offset-20 { + margin-left: 20%; } + +.col-offset-25 { + margin-left: 25%; } + +.col-offset-33, .col-offset-34 { + margin-left: 33.3333%; } + +.col-offset-50 { + margin-left: 50%; } + +.col-offset-66, .col-offset-67 { + margin-left: 66.6666%; } + +.col-offset-75 { + margin-left: 75%; } + +.col-offset-80 { + margin-left: 80%; } + +.col-offset-90 { + margin-left: 90%; } + +/* Explicit Column Percent Sizes */ +/* By default each grid column will evenly distribute */ +/* across the grid. However, you can specify individual */ +/* columns to take up a certain size of the available area */ +.col-10 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 10%; + -moz-box-flex: 0; + -moz-flex: 0 0 10%; + -ms-flex: 0 0 10%; + flex: 0 0 10%; + max-width: 10%; } + +.col-20 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 20%; + -moz-box-flex: 0; + -moz-flex: 0 0 20%; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + max-width: 20%; } + +.col-25 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 25%; + -moz-box-flex: 0; + -moz-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; } + +.col-33, .col-34 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 33.3333%; + -moz-box-flex: 0; + -moz-flex: 0 0 33.3333%; + -ms-flex: 0 0 33.3333%; + flex: 0 0 33.3333%; + max-width: 33.3333%; } + +.col-40 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 40%; + -moz-box-flex: 0; + -moz-flex: 0 0 40%; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + max-width: 40%; } + +.col-50 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 50%; + -moz-box-flex: 0; + -moz-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; } + +.col-60 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 60%; + -moz-box-flex: 0; + -moz-flex: 0 0 60%; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + max-width: 60%; } + +.col-66, .col-67 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 66.6666%; + -moz-box-flex: 0; + -moz-flex: 0 0 66.6666%; + -ms-flex: 0 0 66.6666%; + flex: 0 0 66.6666%; + max-width: 66.6666%; } + +.col-75 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 75%; + -moz-box-flex: 0; + -moz-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; } + +.col-80 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 80%; + -moz-box-flex: 0; + -moz-flex: 0 0 80%; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + max-width: 80%; } + +.col-90 { + -webkit-box-flex: 0; + -webkit-flex: 0 0 90%; + -moz-box-flex: 0; + -moz-flex: 0 0 90%; + -ms-flex: 0 0 90%; + flex: 0 0 90%; + max-width: 90%; } + +/* Responsive Grid Classes */ +/* Adding a class of responsive-X to a row */ +/* will trigger the flex-direction to */ +/* change to column and add some margin */ +/* to any columns in the row for clearity */ +@media (max-width: 567px) { + .responsive-sm { + -webkit-box-direction: normal; + -moz-box-direction: normal; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + .responsive-sm .col, .responsive-sm .col-10, .responsive-sm .col-20, .responsive-sm .col-25, .responsive-sm .col-33, .responsive-sm .col-34, .responsive-sm .col-50, .responsive-sm .col-66, .responsive-sm .col-67, .responsive-sm .col-75, .responsive-sm .col-80, .responsive-sm .col-90 { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + margin-bottom: 15px; + margin-left: 0; + max-width: 100%; + width: 100%; } } + +@media (max-width: 767px) { + .responsive-md { + -webkit-box-direction: normal; + -moz-box-direction: normal; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + .responsive-md .col, .responsive-md .col-10, .responsive-md .col-20, .responsive-md .col-25, .responsive-md .col-33, .responsive-md .col-34, .responsive-md .col-50, .responsive-md .col-66, .responsive-md .col-67, .responsive-md .col-75, .responsive-md .col-80, .responsive-md .col-90 { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + margin-bottom: 15px; + margin-left: 0; + max-width: 100%; + width: 100%; } } + +@media (max-width: 1023px) { + .responsive-lg { + -webkit-box-direction: normal; + -moz-box-direction: normal; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + .responsive-lg .col, .responsive-lg .col-10, .responsive-lg .col-20, .responsive-lg .col-25, .responsive-lg .col-33, .responsive-lg .col-34, .responsive-lg .col-50, .responsive-lg .col-66, .responsive-lg .col-67, .responsive-lg .col-75, .responsive-lg .col-80, .responsive-lg .col-90 { + -webkit-box-flex: 1; + -webkit-flex: 1; + -moz-box-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; + margin-bottom: 15px; + margin-left: 0; + max-width: 100%; + width: 100%; } } + +/** + * Utility Classes + * -------------------------------------------------- + */ +.hide { + display: none; } + +.opacity-hide { + opacity: 0; } + +.grade-b .opacity-hide, +.grade-c .opacity-hide { + opacity: 1; + display: none; } + +.show { + display: block; } + +.opacity-show { + opacity: 1; } + +.invisible { + visibility: hidden; } + +.keyboard-open .hide-on-keyboard-open { + display: none; } + +.keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs, +.keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer { + bottom: 0; } + +.inline { + display: inline-block; } + +.disable-pointer-events { + pointer-events: none; } + +.enable-pointer-events { + pointer-events: auto; } + +.disable-user-behavior { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + -webkit-user-drag: none; + -ms-touch-action: none; + -ms-content-zooming: none; } + +.click-block { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + z-index: 99999; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + overflow: hidden; } + +.click-block-hide { + -webkit-transform: translate3d(-9999px, 0, 0); + transform: translate3d(-9999px, 0, 0); } + +.no-resize { + resize: none; } + +.block { + display: block; + clear: both; } + .block:after { + display: block; + visibility: hidden; + clear: both; + height: 0; + content: "."; } + +.full-image { + width: 100%; } + +.clearfix { + *zoom: 1; } + .clearfix:before, .clearfix:after { + display: table; + content: ""; + line-height: 0; } + .clearfix:after { + clear: both; } + +/** + * Content Padding + * -------------------------------------------------- + */ +.padding { + padding: 10px; } + +.padding-top, +.padding-vertical { + padding-top: 10px; } + +.padding-right, +.padding-horizontal { + padding-right: 10px; } + +.padding-bottom, +.padding-vertical { + padding-bottom: 10px; } + +.padding-left, +.padding-horizontal { + padding-left: 10px; } + +/** + * Scrollable iFrames + * -------------------------------------------------- + */ +.iframe-wrapper { + position: fixed; + -webkit-overflow-scrolling: touch; + overflow: scroll; } + .iframe-wrapper iframe { + height: 100%; + width: 100%; } + +/** + * Rounded + * -------------------------------------------------- + */ +.rounded { + border-radius: 4px; } + +/** + * Utility Colors + * -------------------------------------------------- + * Utility colors are added to help set a naming convention. You'll + * notice we purposely do not use words like "red" or "blue", but + * instead have colors which represent an emotion or generic theme. + */ +.light, a.light { + color: #fff; } + +.light-bg { + background-color: #fff; } + +.light-border { + border-color: #ddd; } + +.stable, a.stable { + color: #2F81B7; } + +.stable-bg { + background-color: #2F81B7; } + +.stable-border { + border-color: #2F81B7; } + +.positive, a.positive { + color: #2F81B7; } + +.positive-bg { + background-color: #2F81B7; } + +.positive-border { + border-color: #2F81B7; } + +.calm, a.calm { + color: #11c1f3; } + +.calm-bg { + background-color: #11c1f3; } + +.calm-border { + border-color: #0a9dc7; } + +.assertive, a.assertive { + color: #ef473a; } + +.assertive-bg { + background-color: #ef473a; } + +.assertive-border { + border-color: #e42112; } + +.balanced, a.balanced { + color: #33cd5f; } + +.balanced-bg { + background-color: #33cd5f; } + +.balanced-border { + border-color: #28a54c; } + +.energized, a.energized { + color: #ffc900; } + +.energized-bg { + background-color: #ffc900; } + +.energized-border { + border-color: #e6b500; } + +.royal, a.royal { + color: #886aea; } + +.royal-bg { + background-color: #886aea; } + +.royal-border { + border-color: #6b46e5; } + +.dark, a.dark { + color: #444; } + +.dark-bg { + background-color: #444; } + +.dark-border { + border-color: #111; } + +[collection-repeat] { + /* Position is set by transforms */ + left: 0 !important; + top: 0 !important; + position: absolute !important; + z-index: 1; } + +.collection-repeat-container { + position: relative; + z-index: 1; } + +.collection-repeat-after-container { + z-index: 0; + display: block; + /* when scrolling horizontally, make sure the after container doesn't take up 100% width */ } + .collection-repeat-after-container.horizontal { + display: inline-block; } + +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, +.x-ng-cloak, .ng-hide:not(.ng-hide-animate) { + display: none !important; } + +/** + * Platform + * -------------------------------------------------- + * Platform specific tweaks + */ +.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) { + height: 64px; + height: calc(constant(safe-area-inset-top) + 44px); + height: calc(env(safe-area-inset-top) + 44px); } + .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper { + margin-top: 19px !important; } + .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * { + margin-top: 20px; + margin-top: constant(safe-area-inset-top); + margin-top: env(safe-area-inset-top); } + +.platform-ios.platform-cordova:not(.fullscreen) .bar-header { + padding-left: calc( constant(safe-area-inset-left) + 5px); + padding-left: calc(env(safe-area-inset-left) + 5px); + padding-right: calc(constant(safe-area-inset-right) + 5px); + padding-right: calc(env(safe-area-inset-right) + 5px); } + .platform-ios.platform-cordova:not(.fullscreen) .bar-header .buttons:last-child { + right: calc(constant(safe-area-inset-right) + 5px); + right: calc(env(safe-area-inset-right) + 5px); } + +.platform-ios.platform-cordova:not(.fullscreen) .has-tabs, .platform-ios.platform-cordova:not(.fullscreen) .bar-footer.has-tabs { + bottom: calc(constant(safe-area-inset-bottom) + 49px); + bottom: calc(env(safe-area-inset-bottom) + 49px); } + +.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top { + top: 64px; } + +.platform-ios.platform-cordova:not(.fullscreen) .tabs { + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + height: calc(constant(safe-area-inset-bottom) + 49px); + height: calc(env(safe-area-inset-bottom) + 49px); } + +.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader { + top: 64px; + top: calc(constant(safe-area-inset-top) + 44px); + top: calc(env(safe-area-inset-top) + 44px); } + +.platform-ios.platform-cordova:not(.fullscreen) .has-subheader { + top: 108px; + top: calc(constant(safe-area-inset-top) + 88px); + top: calc(env(safe-area-inset-top) + 88px); } + +.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-tabs-top { + top: 113px; + top: calc(93px + constant(safe-area-inset-top)); + top: calc(93px + env(safe-area-inset-top)); } + +.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top { + top: 157px; + top: calc(137px + constant(safe-area-inset-right)); + top: calc(137px + env(safe-area-inset-right)); } + +.platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) { + height: 44px; } + .platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper { + margin-top: -1px; } + .platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) > * { + margin-top: 0; } + +.platform-ios.platform-cordova .popover .has-header, .platform-ios.platform-cordova .popover .bar-subheader { + top: 44px; } + +.platform-ios.platform-cordova .popover .has-subheader { + top: 88px; } + +.platform-ios.platform-cordova.status-bar-hide { + margin-bottom: 20px; } + +@media (orientation: landscape) { + .item { + padding: 16px calc(constant(safe-area-inset-right) + 16px); } + .item .badge { + right: calc(constant(safe-area-inset-right) + 32px); } + .item-icon-left { + padding-left: calc(constant(safe-area-inset-left) + 54px); } + .item-icon-left .icon { + left: calc(constant(safe-area-inset-left) + 11px); } + .item-icon-right { + padding-right: calc(constant(safe-area-inset-right) + 54px); } + .item-icon-right .icon { + right: calc(constant(safe-area-inset-right) + 11px); } + .item-complex, + a.item.item-complex, + button.item.item-complex { + padding: 0; } + .item-complex .item-content, a.item.item-complex .item-content, button.item.item-complex .item-content { + padding: 16px calc(constant(safe-area-inset-right) + 49px) 16px calc(constant(safe-area-inset-left) + 16px); } + .item-left-edit.visible.active { + -webkit-transform: translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0); + transform: translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0); } + .list-left-editing .item-left-editable .item-content, + .item-left-editing.item-left-editable .item-content { + -webkit-transform: translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0); + transform: translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0); } + .item-right-edit { + right: constant(safe-area-inset-right); + right: env(safe-area-inset-right); } + .platform-ios.platform-browser.platform-ipad { + position: fixed; } } + +.platform-c:not(.enable-transitions) * { + -webkit-transition: none !important; + transition: none !important; } + +.slide-in-up { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } + +.slide-in-up.ng-enter, +.slide-in-up > .ng-enter { + -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms; + transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms; } + +.slide-in-up.ng-enter-active, +.slide-in-up > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + +.slide-in-up.ng-leave, +.slide-in-up > .ng-leave { + -webkit-transition: all ease-in-out 250ms; + transition: all ease-in-out 250ms; } + +@-webkit-keyframes scaleOut { + from { + -webkit-transform: scale(1); + opacity: 1; } + to { + -webkit-transform: scale(0.8); + opacity: 0; } } + +@keyframes scaleOut { + from { + transform: scale(1); + opacity: 1; } + to { + transform: scale(0.8); + opacity: 0; } } + +@-webkit-keyframes superScaleIn { + from { + -webkit-transform: scale(1.2); + opacity: 0; } + to { + -webkit-transform: scale(1); + opacity: 1; } } + +@keyframes superScaleIn { + from { + transform: scale(1.2); + opacity: 0; } + to { + transform: scale(1); + opacity: 1; } } + +[nav-view-transition="ios"] [nav-view="entering"], +[nav-view-transition="ios"] [nav-view="leaving"] { + -webkit-transition-duration: 500ms; + transition-duration: 500ms; + -webkit-transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1); + transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1); + -webkit-transition-property: opacity, -webkit-transform, box-shadow; + transition-property: opacity, transform, box-shadow; } + +[nav-view-transition="ios"][nav-view-direction="forward"], [nav-view-transition="ios"][nav-view-direction="back"] { + background-color: #000; } + +[nav-view-transition="ios"] [nav-view="active"], +[nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="entering"], +[nav-view-transition="ios"][nav-view-direction="back"] [nav-view="leaving"] { + z-index: 3; } + +[nav-view-transition="ios"][nav-view-direction="back"] [nav-view="entering"], +[nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="leaving"] { + z-index: 2; } + +[nav-bar-transition="ios"] .title, +[nav-bar-transition="ios"] .buttons, +[nav-bar-transition="ios"] .back-text { + -webkit-transition-duration: 500ms; + transition-duration: 500ms; + -webkit-transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1); + transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1); + -webkit-transition-property: opacity, -webkit-transform; + transition-property: opacity, transform; } + +[nav-bar-transition="ios"] [nav-bar="active"], +[nav-bar-transition="ios"] [nav-bar="entering"] { + z-index: 10; } + [nav-bar-transition="ios"] [nav-bar="active"] .bar, + [nav-bar-transition="ios"] [nav-bar="entering"] .bar { + background: transparent; } + +[nav-bar-transition="ios"] [nav-bar="cached"] { + display: block; } + [nav-bar-transition="ios"] [nav-bar="cached"] .header-item { + display: none; } + +[nav-view-transition="android"] [nav-view="entering"], +[nav-view-transition="android"] [nav-view="leaving"] { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + -webkit-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1); + transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1); + -webkit-transition-property: -webkit-transform; + transition-property: transform; } + +[nav-view-transition="android"] [nav-view="active"], +[nav-view-transition="android"][nav-view-direction="forward"] [nav-view="entering"], +[nav-view-transition="android"][nav-view-direction="back"] [nav-view="leaving"] { + z-index: 3; } + +[nav-view-transition="android"][nav-view-direction="back"] [nav-view="entering"], +[nav-view-transition="android"][nav-view-direction="forward"] [nav-view="leaving"] { + z-index: 2; } + +[nav-bar-transition="android"] .title, +[nav-bar-transition="android"] .buttons { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + -webkit-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1); + transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1); + -webkit-transition-property: opacity; + transition-property: opacity; } + +[nav-bar-transition="android"] [nav-bar="active"], +[nav-bar-transition="android"] [nav-bar="entering"] { + z-index: 10; } + [nav-bar-transition="android"] [nav-bar="active"] .bar, + [nav-bar-transition="android"] [nav-bar="entering"] .bar { + background: transparent; } + +[nav-bar-transition="android"] [nav-bar="cached"] { + display: block; } + [nav-bar-transition="android"] [nav-bar="cached"] .header-item { + display: none; } + +[nav-swipe="fast"] [nav-view], +[nav-swipe="fast"] .title, +[nav-swipe="fast"] .buttons, +[nav-swipe="fast"] .back-text { + -webkit-transition-duration: 50ms; + transition-duration: 50ms; + -webkit-transition-timing-function: linear; + transition-timing-function: linear; } + +[nav-swipe="slow"] [nav-view], +[nav-swipe="slow"] .title, +[nav-swipe="slow"] .buttons, +[nav-swipe="slow"] .back-text { + -webkit-transition-duration: 160ms; + transition-duration: 160ms; + -webkit-transition-timing-function: linear; + transition-timing-function: linear; } + +[nav-view="cached"], +[nav-bar="cached"] { + display: none; } + +[nav-view="stage"] { + opacity: 0; + -webkit-transition-duration: 0; + transition-duration: 0; } + +[nav-bar="stage"] .title, +[nav-bar="stage"] .buttons, +[nav-bar="stage"] .back-text { + position: absolute; + opacity: 0; + -webkit-transition-duration: 0s; + transition-duration: 0s; } |
