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 /www | |
| parent | 29ac5329274d129b3c85eeda480048c6c7687cc5 (diff) | |
#801 final cleanups, some test aut stuff too
Diffstat (limited to 'www')
| -rw-r--r-- | www/css/_/_fountain.scss | 77 | ||||
| -rw-r--r-- | www/css/_/_slidein-spring.scss | 67 | ||||
| -rw-r--r-- | www/css/_/_slidein.scss | 53 | ||||
| -rw-r--r-- | www/css/_/_zoomin.scss | 78 | ||||
| -rwxr-xr-x | www/css/angular-carousel.css | 64 | ||||
| -rw-r--r-- | www/css/angular-carousel.min.css | 1 | ||||
| -rw-r--r-- | www/css/angular-circular-navigation.css | 296 | ||||
| -rw-r--r-- | www/css/angular-circular-navigation.min.css | 1 | ||||
| -rw-r--r-- | www/css/custommfb.css | 670 | ||||
| -rw-r--r-- | www/css/custommfb.min.css | 1 | ||||
| -rw-r--r-- | www/css/custommfb.scss | 404 | ||||
| -rw-r--r-- | www/css/ionic.app.css | 9864 | ||||
| -rw-r--r-- | www/index.html | 6 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 23 | ||||
| -rw-r--r-- | www/js/EventModalCtrl.js | 23 | ||||
| -rwxr-xr-x | www/js/app.js | 3 | ||||
| -rw-r--r-- | www/templates/events.html | 2 | ||||
| -rw-r--r-- | www/templates/menu.html | 4 |
18 files changed, 33 insertions, 11604 deletions
diff --git a/www/css/_/_fountain.scss b/www/css/_/_fountain.scss deleted file mode 100644 index cd5a2933..00000000 --- a/www/css/_/_fountain.scss +++ /dev/null @@ -1,77 +0,0 @@ -@mixin effects-fountain{ - -/** - * FOUNTAIN - * When hovering the main button the child buttons - * jump into view from outside the viewport - */ - - .mfb-component--tl.mfb-fountain, - .mfb-component--tr.mfb-fountain{ - .mfb-component__list{ - li{ - -webkit-transform: scale(0); - transform: scale(0); - } - @for $i from 1 through $number-of-child-buttons { - $distance: -1 * $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(0); - transform: translateY($distance) scale(0); - transition: all $slide-speed; - // this is the delay at which the buttons start disappearing - transition-delay: ( $number-of-child-buttons - $i ) * 0.05s; - } - } - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - @for $i from 1 through $number-of-child-buttons { - $distance: $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(1); - transform: translateY($distance) scale(1); - // this is the delay at which the buttons appear - transition-delay: $i * 0.05s; - } - } - } - } - } - - .mfb-component--bl.mfb-fountain, - .mfb-component--br.mfb-fountain{ - .mfb-component__list{ - li{ - -webkit-transform: scale(0); - transform: scale(0); - } - @for $i from 1 through $number-of-child-buttons { - $distance: $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(0); - transform: translateY($distance) scale(0); - transition: all $slide-speed; - // this is the delay at which the buttons start disappearing - transition-delay: ( $number-of-child-buttons - $i ) * 0.05s; - } - } - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - @for $i from 1 through $number-of-child-buttons { - $distance: -1 * $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(1); - transform: translateY($distance) scale(1); - // this is the delay at which the buttons appear - transition-delay: $i * 0.05s; - } - } - } - } - } - -} diff --git a/www/css/_/_slidein-spring.scss b/www/css/_/_slidein-spring.scss deleted file mode 100644 index 7a08d72d..00000000 --- a/www/css/_/_slidein-spring.scss +++ /dev/null @@ -1,67 +0,0 @@ -@mixin effects-slidein-spring{ - -/** - * SLIDE IN SPRING - * Same as slide-in but with a springy animation. - * - */ - - .mfb-component--tl.mfb-slidein-spring, - .mfb-component--tr.mfb-slidein-spring{ - .mfb-component__list li{ - opacity: 0; - transition: all $slide-speed; - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); - } - @for $i from 1 through $number-of-child-buttons { - .mfb-component__list li:nth-child( #{$i} ) { - transition-delay: #{$i * 0.05}s; - } - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - li{ - opacity: 1; - } - @for $i from 1 through $number-of-child-buttons { - $distance: $button-space * $i; - li:nth-child( #{$i} ) { - transition-delay: #{$i * 0.05}s; - -webkit-transform: translateY( $distance ); - transform: translateY( $distance ); } - } - } - } - } - - .mfb-component--bl.mfb-slidein-spring, - .mfb-component--br.mfb-slidein-spring{ - .mfb-component__list li{ - opacity: 0; - transition: all $slide-speed; - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); - } - @for $i from 1 through $number-of-child-buttons { - .mfb-component__list li:nth-child( #{$i} ) { - transition-delay: #{$i * 0.05}s; - } - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - li{ - opacity: 1; - } - @for $i from 1 through $number-of-child-buttons { - $distance: -1 * $button-space * $i; - li:nth-child( #{$i} ) { - transition-delay: #{$i * 0.05}s; - -webkit-transform: translateY( $distance ); - transform: translateY( $distance ); } - } - } - } - } - -} diff --git a/www/css/_/_slidein.scss b/www/css/_/_slidein.scss deleted file mode 100644 index f2735124..00000000 --- a/www/css/_/_slidein.scss +++ /dev/null @@ -1,53 +0,0 @@ -@mixin effects-slidein{ - -/** - * SLIDE IN + FADE - * When hovering the main button, the child buttons slide out from beneath - * the main button while transitioning from transparent to opaque. - * - */ - - .mfb-component--tl.mfb-slidein, - .mfb-component--tr.mfb-slidein{ - .mfb-component__list li{ - opacity: 0; - transition: all $slide-speed; - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - li{ - opacity: 1; - } - @for $i from 1 through $number-of-child-buttons { - $distance: $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY( $distance ); - transform: translateY( $distance ); } - } - } - } - } - - .mfb-component--bl.mfb-slidein, - .mfb-component--br.mfb-slidein{ - .mfb-component__list li{ - opacity: 0; - transition: all $slide-speed; - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - li{ - opacity: 1; - } - @for $i from 1 through $number-of-child-buttons { - $distance: -1 * $button-space * $i; - li:nth-child( #{$i} ) { -webkit-transform: translateY( $distance ); - transform: translateY( $distance ); } - } - } - } - } - -} diff --git a/www/css/_/_zoomin.scss b/www/css/_/_zoomin.scss deleted file mode 100644 index df0ee0ff..00000000 --- a/www/css/_/_zoomin.scss +++ /dev/null @@ -1,78 +0,0 @@ -@mixin effects-zoomin{ - -/** - * ZOOM-IN - * When hovering the main button, the child buttons grow - * from zero to normal size. - * - */ - - .mfb-component--tl.mfb-zoomin, - .mfb-component--tr.mfb-zoomin{ - .mfb-component__list{ - li{ - -webkit-transform: scale(0); - transform: scale(0); - } - @for $i from 1 through $number-of-child-buttons { - $distance: $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(0); - transform: translateY($distance) scale(0); - transition: all $slide-speed; - // this is the delay at which the buttons *disappear* - transition-delay: ( $number-of-child-buttons - $i ) * 0.05s; - } - } - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - @for $i from 1 through $number-of-child-buttons { - $distance: $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(1); - transform: translateY($distance) scale(1); - // this is the delay at which the buttons *appear* - transition-delay: $i * 0.05s; - } - } - } - } - } - - .mfb-component--bl.mfb-zoomin, - .mfb-component--br.mfb-zoomin{ - .mfb-component__list{ - li{ - -webkit-transform: scale(0); - transform: scale(0); - } - @for $i from 1 through $number-of-child-buttons { - $distance: -1 * $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(0); - transform: translateY($distance) scale(0); - transition: all $slide-speed; - // this is the delay at which the buttons start disappearing - transition-delay: ( $number-of-child-buttons - $i ) * 0.05s; - } - } - } - &[data-mfb-toggle="hover"]:hover, - &[data-mfb-state="open"]{ - .mfb-component__list{ - @for $i from 1 through $number-of-child-buttons { - $distance: -1 * $button-space * $i; - li:nth-child( #{$i} ) { - -webkit-transform: translateY($distance) scale(1); - transform: translateY($distance) scale(1); - // this is the delay at which the buttons appear - transition-delay: $i * 0.05s; - } - } - } - } - } - -} diff --git a/www/css/angular-carousel.css b/www/css/angular-carousel.css deleted file mode 100755 index a11d8523..00000000 --- a/www/css/angular-carousel.css +++ /dev/null @@ -1,64 +0,0 @@ -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/www/css/angular-carousel.min.css b/www/css/angular-carousel.min.css new file mode 100644 index 00000000..976a3cdb --- /dev/null +++ b/www/css/angular-carousel.min.css @@ -0,0 +1 @@ +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:#000;-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}ul[rn-carousel-buffered]>li{display:none}ul[rn-carousel-transition=hexagon]{overflow:visible}div.rn-carousel-indicator span{cursor:pointer;color:#666}div.rn-carousel-indicator span.active{color:#fff}.rn-carousel-control{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;font-size:2rem;position:absolute;top:40%;opacity:.75;cursor:pointer}.rn-carousel-control:hover{opacity:1}.rn-carousel-control.rn-carousel-control-prev{left:.5em}.rn-carousel-control.rn-carousel-control-prev:before{content:"<"}.rn-carousel-control.rn-carousel-control-next{right:.5em}.rn-carousel-control.rn-carousel-control-next:before{content:">"} diff --git a/www/css/angular-circular-navigation.css b/www/css/angular-circular-navigation.css deleted file mode 100644 index b2143741..00000000 --- a/www/css/angular-circular-navigation.css +++ /dev/null @@ -1,296 +0,0 @@ -.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/www/css/angular-circular-navigation.min.css b/www/css/angular-circular-navigation.min.css new file mode 100644 index 00000000..ec8690d7 --- /dev/null +++ b/www/css/angular-circular-navigation.min.css @@ -0,0 +1 @@ +.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:0;border:none;border-radius:50%;background:0 0;background-color:#0a833d;color:#fff;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:0 0;opacity:0;-webkit-transition:all .3s ease .3s;-moz-transition:all .3s ease .3s;transition:all .3s ease .3s;-webkit-transform:scale(.1);-ms-transform:scale(.1);transform:scale(.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:.7;color:#fff;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:active,.cn-wrapper li a:focus,.cn-wrapper li a:hover{opacity:.9}.cn-wrapper li a.is-active:active,.cn-wrapper li a.is-active:focus,.cn-wrapper li a.is-active:hover{opacity:.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-11 li:nth-child(2),.opened-nav.items-9 li:first-child{-webkit-transform:rotate(-63deg) skew(60deg);-ms-transform:rotate(-63deg) skew(60deg);transform:rotate(-63deg) skew(60deg)}.item-odd-left-3,.opened-nav.items-11 li:nth-child(3),.opened-nav.items-7 li:first-child,.opened-nav.items-9 li:nth-child(2){-webkit-transform:rotate(-21deg) skew(60deg);-ms-transform:rotate(-21deg) skew(60deg);transform:rotate(-21deg) skew(60deg)}.item-odd-left-2,.opened-nav.items-11 li:nth-child(4),.opened-nav.items-5 li:first-child,.opened-nav.items-7 li:nth-child(2),.opened-nav.items-9 li:nth-child(3){-webkit-transform:rotate(11deg) skew(60deg);-ms-transform:rotate(11deg) skew(60deg);transform:rotate(11deg) skew(60deg)}.item-odd-left-1,.opened-nav.items-11 li:nth-child(5),.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){-webkit-transform:rotate(23deg) skew(60deg);-ms-transform:rotate(23deg) skew(60deg);transform:rotate(23deg) skew(60deg)}.cn-wrapper li,.item-odd-center,.opened-nav.items-1 li:first-child,.opened-nav.items-11 li:nth-child(6),.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){-webkit-transform:rotate(75deg) skew(60deg);-ms-transform:rotate(75deg) skew(60deg);transform:rotate(75deg) skew(60deg)}.item-odd-right-1,.opened-nav.items-11 li:nth-child(7),.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){-webkit-transform:rotate(127deg) skew(60deg);-ms-transform:rotate(127deg) skew(60deg);transform:rotate(127deg) skew(60deg)}.item-odd-right-2,.opened-nav.items-11 li:nth-child(8),.opened-nav.items-5 li:nth-child(5),.opened-nav.items-7 li:nth-child(6),.opened-nav.items-9 li:nth-child(7){-webkit-transform:rotate(139deg) skew(60deg);-ms-transform:rotate(139deg) skew(60deg);transform:rotate(139deg) skew(60deg)}.item-odd-right-3,.opened-nav.items-11 li:nth-child(9),.opened-nav.items-7 li:nth-child(7),.opened-nav.items-9 li:nth-child(8){-webkit-transform:rotate(171deg) skew(60deg);-ms-transform:rotate(171deg) skew(60deg);transform:rotate(171deg) skew(60deg)}.item-odd-right-4,.opened-nav.items-11 li:nth-child(10),.opened-nav.items-9 li:nth-child(9){-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-10 li:nth-child(2),.opened-nav.items-8 li:first-child{-webkit-transform:rotate(-37deg) skew(60deg);-ms-transform:rotate(-37deg) skew(60deg);transform:rotate(-37deg) skew(60deg)}.item-even-left-3,.opened-nav.items-10 li:nth-child(3),.opened-nav.items-6 li:first-child,.opened-nav.items-8 li:nth-child(2){-webkit-transform:rotate(-5deg) skew(60deg);-ms-transform:rotate(-5deg) skew(60deg);transform:rotate(-5deg) skew(60deg)}.item-even-left-2,.opened-nav.items-10 li:nth-child(4),.opened-nav.items-4 li:first-child,.opened-nav.items-6 li:nth-child(2),.opened-nav.items-8 li:nth-child(3){-webkit-transform:rotate(27deg) skew(60deg);-ms-transform:rotate(27deg) skew(60deg);transform:rotate(27deg) skew(60deg)}.item-even-left-1,.opened-nav.items-10 li:nth-child(5),.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){-webkit-transform:rotate(59deg) skew(60deg);-ms-transform:rotate(59deg) skew(60deg);transform:rotate(59deg) skew(60deg)}.item-even-right-1,.opened-nav.items-10 li:nth-child(6),.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){-webkit-transform:rotate(91deg) skew(60deg);-ms-transform:rotate(91deg) skew(60deg);transform:rotate(91deg) skew(60deg)}.item-even-right-2,.opened-nav.items-10 li:nth-child(7),.opened-nav.items-4 li:nth-child(4),.opened-nav.items-6 li:nth-child(5),.opened-nav.items-8 li:nth-child(6){-webkit-transform:rotate(123deg) skew(60deg);-ms-transform:rotate(123deg) skew(60deg);transform:rotate(123deg) skew(60deg)}.item-even-right-3,.opened-nav.items-10 li:nth-child(8),.opened-nav.items-6 li:nth-child(6),.opened-nav.items-8 li:nth-child(7){-webkit-transform:rotate(155deg) skew(60deg);-ms-transform:rotate(155deg) skew(60deg);transform:rotate(155deg) skew(60deg)}.item-even-right-4,.opened-nav.items-10 li:nth-child(9),.opened-nav.items-8 li:nth-child(8){-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/www/css/custommfb.css b/www/css/custommfb.css deleted file mode 100644 index 58c3b049..00000000 --- a/www/css/custommfb.css +++ /dev/null @@ -1,670 +0,0 @@ -/** - * 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 ----------------------------*/ -/* EFFECTS ---------------------------*/ -/* SPEEDS ----------------------------*/ -/* SIZES -----------------------------*/ -/* SPACING ---------------------------*/ -/* OTHER VARIABLES -------------------*/ -/*------------------------------------*\ - #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--tl, .mfb-component--tr, .mfb-component--bl, .mfb-component--br { - box-sizing: border-box; - margin: 20px; - position: fixed; - white-space: nowrap; - z-index: 30; - padding-left: 0; - list-style: none; } - .mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component--tl *:after, .mfb-component--tr *:after, .mfb-component--bl *:after, .mfb-component--br *: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 { - left: 0; - top: 0; } - -.mfb-component--tr { - right: 0; - top: 0; } - -.mfb-component--bl { - left: 0; - bottom: 0; } - -.mfb-component--br { - right: 0; - bottom: 0; } - -/*------------------------------------*\ - #BUTTONS | Base -\*------------------------------------*/ -.mfb-component__button--main, .mfb-component__button--child { - background-color: #E40A5D; - 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; } - .mfb-component__list > li { - display: block; - position: absolute; - top: 0; - right: 1px; - padding: 10px 0; - margin: -10px 0; } - -/** - * These are the basic styles for all the icons inside the main button - */ -.mfb-component__icon, .mfb-component__main-icon--active, -.mfb-component__main-icon--resting, .mfb-component__child-icon { - position: absolute; - font-size: 18px; - text-align: center; - line-height: 45px; - width: 100%; } - -.mfb-component__wrap { - padding: 20px; - margin: -20px; } - -[data-mfb-toggle="hover"]:hover .mfb-component__icon, [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active, -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, [data-mfb-toggle="hover"]:hover .mfb-component__child-icon, -[data-mfb-state="open"] .mfb-component__icon, -[data-mfb-state="open"] .mfb-component__main-icon--active, -[data-mfb-state="open"] .mfb-component__main-icon--resting, -[data-mfb-state="open"] .mfb-component__child-icon { - -webkit-transform: scale(1) rotate(0deg); - transform: scale(1) rotate(0deg); } - -/*------------------------------------*\ - #BUTTONS | Modifiers -\*------------------------------------*/ -.mfb-component__button--main { - height: 45px; - width: 45px; - z-index: 20; } - -.mfb-component__button--child { - height: 45px; - width: 45px; } - -.mfb-component__main-icon--active, -.mfb-component__main-icon--resting { - -webkit-transform: scale(1) rotate(360deg); - transform: scale(1) rotate(360deg); - -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1); - transition: transform 150ms cubic-bezier(0.4, 0, 1, 1); } - -.mfb-component__child-icon, -.mfb-component__child-icon { - line-height: 45px; - font-size: 14.46429px; } - -.mfb-component__main-icon--active { - opacity: 0; } - -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon, -[data-mfb-state="open"] .mfb-component__main-icon { - -webkit-transform: scale(1) rotate(0deg); - transform: scale(1) rotate(0deg); } -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, -[data-mfb-state="open"] .mfb-component__main-icon--resting { - opacity: 0; - position: absolute !important; } -[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active, -[data-mfb-state="open"] .mfb-component__main-icon--active { - opacity: 1; } - -/*------------------------------------*\ - #BUTTONS | Animations -\*------------------------------------*/ -/** - * SLIDE IN + FADE - * When hovering the main button, the child buttons slide out from beneath - * the main button while transitioning from transparent to opaque. - * - */ -.mfb-component--tl.mfb-slidein .mfb-component__list li, -.mfb-component--tr.mfb-slidein .mfb-component__list li { - opacity: 0; - transition: all 0.5s; } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px); - transform: translateY(50px); } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px); - transform: translateY(100px); } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px); - transform: translateY(150px); } -.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px); - transform: translateY(200px); } - -.mfb-component--bl.mfb-slidein .mfb-component__list li, -.mfb-component--br.mfb-slidein .mfb-component__list li { - opacity: 0; - transition: all 0.5s; } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px); - transform: translateY(-50px); } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px); - transform: translateY(-100px); } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px); - transform: translateY(-150px); } -.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px); - transform: translateY(-200px); } - -/** - * SLIDE IN SPRING - * Same as slide-in but with a springy animation. - * - */ -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li, -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li { - opacity: 0; - transition: all 0.5s; - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; } -.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; - -webkit-transform: translateY(50px); - transform: translateY(50px); } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; - -webkit-transform: translateY(100px); - transform: translateY(100px); } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; - -webkit-transform: translateY(150px); - transform: translateY(150px); } -.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; - -webkit-transform: translateY(200px); - transform: translateY(200px); } - -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li, -.mfb-component--br.mfb-slidein-spring .mfb-component__list li { - opacity: 0; - transition: all 0.5s; - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; } -.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li, -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li { - opacity: 1; } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - transition-delay: 0.05s; - -webkit-transform: translateY(-50px); - transform: translateY(-50px); } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - transition-delay: 0.1s; - -webkit-transform: translateY(-100px); - transform: translateY(-100px); } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - transition-delay: 0.15s; - -webkit-transform: translateY(-150px); - transform: translateY(-150px); } -.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - transition-delay: 0.2s; - -webkit-transform: translateY(-200px); - transform: translateY(-200px); } - -/** - * ZOOM-IN - * When hovering the main button, the child buttons grow - * from zero to normal size. - * - */ -.mfb-component--tl.mfb-zoomin .mfb-component__list li, -.mfb-component--tr.mfb-zoomin .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(0); - transform: translateY(50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(0); - transform: translateY(100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(0); - transform: translateY(150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(0); - transform: translateY(200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(1); - transform: translateY(50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(1); - transform: translateY(100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(1); - transform: translateY(150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(1); - transform: translateY(200px) scale(1); - transition-delay: 0.2s; } - -.mfb-component--bl.mfb-zoomin .mfb-component__list li, -.mfb-component--br.mfb-zoomin .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(0); - transform: translateY(-50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(0); - transform: translateY(-100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(0); - transform: translateY(-150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(0); - transform: translateY(-200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(1); - transform: translateY(-50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(1); - transform: translateY(-100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(1); - transform: translateY(-150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(1); - transform: translateY(-200px) scale(1); - transition-delay: 0.2s; } - -/** - * FOUNTAIN - * When hovering the main button the child buttons - * jump into view from outside the viewport - */ -.mfb-component--tl.mfb-fountain .mfb-component__list li, -.mfb-component--tr.mfb-fountain .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(0); - transform: translateY(-50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(0); - transform: translateY(-100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(0); - transform: translateY(-150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(0); - transform: translateY(-200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(1); - transform: translateY(50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(1); - transform: translateY(100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(1); - transform: translateY(150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(1); - transform: translateY(200px) scale(1); - transition-delay: 0.2s; } - -.mfb-component--bl.mfb-fountain .mfb-component__list li, -.mfb-component--br.mfb-fountain .mfb-component__list li { - -webkit-transform: scale(0); - transform: scale(0); } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(50px) scale(0); - transform: translateY(50px) scale(0); - transition: all 0.5s; - transition-delay: 0.15s; } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(100px) scale(0); - transform: translateY(100px) scale(0); - transition: all 0.5s; - transition-delay: 0.1s; } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(150px) scale(0); - transform: translateY(150px) scale(0); - transition: all 0.5s; - transition-delay: 0.05s; } -.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(200px) scale(0); - transform: translateY(200px) scale(0); - transition: all 0.5s; - transition-delay: 0s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) { - -webkit-transform: translateY(-50px) scale(1); - transform: translateY(-50px) scale(1); - transition-delay: 0.05s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) { - -webkit-transform: translateY(-100px) scale(1); - transform: translateY(-100px) scale(1); - transition-delay: 0.1s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) { - -webkit-transform: translateY(-150px) scale(1); - transform: translateY(-150px) scale(1); - transition-delay: 0.15s; } -.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), -.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) { - -webkit-transform: translateY(-200px) scale(1); - transform: translateY(-200px) scale(1); - transition-delay: 0.2s; } - -/*------------------------------------*\ - #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 0.5s; - background: rgba(0, 0, 0, 0.4); - padding: 4px 10px; - border-radius: 3px; - color: rgba(255, 255, 255, 0.8); - font-size: 12px; - pointer-events: none; - position: absolute; - top: 50%; - margin-top: -10px; - transition: all 0.5s; } - -[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 0.3s; } - -/*------------------------------------*\ - #LABELS | Modifiers -\*------------------------------------*/ -.mfb-component--br [data-mfb-label]:after, .mfb-component--tr [data-mfb-label]:after { - content: attr(data-mfb-label); - right: 50px; } - -.mfb-component--br .mfb-component__list [data-mfb-label]:after, .mfb-component--tr .mfb-component__list [data-mfb-label]:after { - content: attr(data-mfb-label); - right: 50px; } - -.mfb-component--tl [data-mfb-label]:after, .mfb-component--bl [data-mfb-label]:after { - content: attr(data-mfb-label); - left: 50px; } - -.mfb-component--tl .mfb-component__list [data-mfb-label]:after, .mfb-component--bl .mfb-component__list [data-mfb-label]:after { - content: attr(data-mfb-label); - left: 50px; } - -/*------------------------------------*\ - #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/www/css/custommfb.min.css b/www/css/custommfb.min.css new file mode 100644 index 00000000..cb67dac6 --- /dev/null +++ b/www/css/custommfb.min.css @@ -0,0 +1 @@ +.mfb-component--bl,.mfb-component--br,.mfb-component--tl,.mfb-component--tr{box-sizing:border-box;margin:20px;position:fixed;white-space:nowrap;z-index:30;padding-left:0;list-style:none}.mfb-component--bl *,.mfb-component--bl :after,.mfb-component--bl :before,.mfb-component--br *,.mfb-component--br :after,.mfb-component--br :before,.mfb-component--tl *,.mfb-component--tl :after,.mfb-component--tl :before,.mfb-component--tr *,.mfb-component--tr :after,.mfb-component--tr :before{box-sizing:inherit}.mfb-component--tl{left:0;top:0}.mfb-component--tr{right:0;top:0}.mfb-component--bl{left:0;bottom:0}.mfb-component--br{right:0;bottom:0}.mfb-component__button--child,.mfb-component__button--main{background-color:#e40a5d;display:inline-block;position:relative;border:none;border-radius:50%;opacity:.8;cursor:pointer;outline:0;padding:0;position:relative;-webkit-user-drag:none;font-weight:700;color:#f1f1f1}.mfb-component__list{list-style:none;margin:0;padding:0}.mfb-component__list>li{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0}.mfb-component__child-icon,.mfb-component__icon,.mfb-component__main-icon--active,.mfb-component__main-icon--resting{position:absolute;font-size:18px;text-align:center;line-height:45px;width:100%}.mfb-component__wrap{padding:20px;margin:-20px}[data-mfb-state=open] .mfb-component__child-icon,[data-mfb-state=open] .mfb-component__icon,[data-mfb-state=open] .mfb-component__main-icon--active,[data-mfb-state=open] .mfb-component__main-icon--resting,[data-mfb-toggle=hover]:hover .mfb-component__child-icon,[data-mfb-toggle=hover]:hover .mfb-component__icon,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--active,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--resting{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}.mfb-component__button--main{height:45px;width:45px;z-index:20}.mfb-component__button--child{height:45px;width:45px}.mfb-component__main-icon--active,.mfb-component__main-icon--resting{-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)}.mfb-component__child-icon{line-height:45px;font-size:14.46429px}.mfb-component__main-icon--active{opacity:0}[data-mfb-state=open] .mfb-component__main-icon,[data-mfb-toggle=hover]:hover .mfb-component__main-icon{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}[data-mfb-state=open] .mfb-component__main-icon--resting,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--resting{opacity:0;position:absolute!important}[data-mfb-state=open] .mfb-component__main-icon--active,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--active{opacity:1}.mfb-component--tl.mfb-slidein .mfb-component__list li,.mfb-component--tr.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px);transform:translateY(50px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px);transform:translateY(100px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px);transform:translateY(150px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px);transform:translateY(200px)}.mfb-component--bl.mfb-slidein .mfb-component__list li,.mfb-component--br.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px);transform:translateY(-50px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px);transform:translateY(-100px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px);transform:translateY(-150px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px);transform:translateY(-200px)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:50ms}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){transition-delay:50ms;-webkit-transform:translateY(50px);transform:translateY(50px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(100px);transform:translateY(100px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(150px);transform:translateY(150px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(200px);transform:translateY(200px)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li,.mfb-component--br.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:50ms}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){transition-delay:50ms;-webkit-transform:translateY(-50px);transform:translateY(-50px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(-100px);transform:translateY(-100px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(-150px);transform:translateY(-150px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(-200px);transform:translateY(-200px)}.mfb-component--tl.mfb-zoomin .mfb-component__list li,.mfb-component--tr.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(0);transform:translateY(50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(0);transform:translateY(100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(0);transform:translateY(150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(0);transform:translateY(200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(1);transform:translateY(50px) scale(1);transition-delay:50ms}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(1);transform:translateY(100px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(1);transform:translateY(150px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(1);transform:translateY(200px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-zoomin .mfb-component__list li,.mfb-component--br.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(0);transform:translateY(-50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(0);transform:translateY(-100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(0);transform:translateY(-150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(0);transform:translateY(-200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(1);transform:translateY(-50px) scale(1);transition-delay:50ms}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(1);transform:translateY(-100px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(1);transform:translateY(-150px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(1);transform:translateY(-200px) scale(1);transition-delay:.2s}.mfb-component--tl.mfb-fountain .mfb-component__list li,.mfb-component--tr.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(0);transform:translateY(-50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(0);transform:translateY(-100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(0);transform:translateY(-150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(0);transform:translateY(-200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(1);transform:translateY(50px) scale(1);transition-delay:50ms}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(1);transform:translateY(100px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(1);transform:translateY(150px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(1);transform:translateY(200px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-fountain .mfb-component__list li,.mfb-component--br.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(0);transform:translateY(50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(0);transform:translateY(100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(0);transform:translateY(150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(0);transform:translateY(200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(1);transform:translateY(-50px) scale(1);transition-delay:50ms}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(1);transform:translateY(-100px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(1);transform:translateY(-150px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(1);transform:translateY(-200px) scale(1);transition-delay:.2s}[data-mfb-label]:after{content:attr(data-mfb-label);opacity:0;transition:all .5s;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:3px;color:rgba(255,255,255,.8);font-size:12px;pointer-events:none;position:absolute;top:50%;margin-top:-10px;transition:all .5s}[data-mfb-state=open] [data-mfb-label]:after,[data-mfb-toggle=hover] [data-mfb-label]:hover:after{content:attr(data-mfb-label);opacity:1;transition:all .3s}.mfb-component--br [data-mfb-label]:after,.mfb-component--tr [data-mfb-label]:after{content:attr(data-mfb-label);right:50px}.mfb-component--br .mfb-component__list [data-mfb-label]:after,.mfb-component--tr .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);right:50px}.mfb-component--bl [data-mfb-label]:after,.mfb-component--tl [data-mfb-label]:after{content:attr(data-mfb-label);left:50px}.mfb-component--bl .mfb-component__list [data-mfb-label]:after,.mfb-component--tl .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);left:50px} diff --git a/www/css/custommfb.scss b/www/css/custommfb.scss deleted file mode 100644 index 20dbeb58..00000000 --- a/www/css/custommfb.scss +++ /dev/null @@ -1,404 +0,0 @@ -/** - * 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/www/css/ionic.app.css b/www/css/ionic.app.css deleted file mode 100644 index c3bf964b..00000000 --- a/www/css/ionic.app.css +++ /dev/null @@ -1,9864 +0,0 @@ -@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; } diff --git a/www/index.html b/www/index.html index a81760d1..d7f0e9bf 100644 --- a/www/index.html +++ b/www/index.html @@ -19,9 +19,9 @@ <!-- style sheets--> <link rel="stylesheet" href="css/animate.min.css"> - <link rel="stylesheet" href="css/angular-circular-navigation.css"> - <link rel="stylesheet" href="css/custommfb.css"> - <link rel="stylesheet" href="css/angular-carousel.css"> + <link rel="stylesheet" href="css/angular-circular-navigation.min.css"> + <link rel="stylesheet" href="css/custommfb.min.css"> + <link rel="stylesheet" href="css/angular-carousel.min.css"> <link href="css/ionic.app.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index a7ba3128..15ae11df 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -67,6 +67,9 @@ angular.module('zmApp.controllers') var eventsListScrubHeight = eventsListScrubHeight; var eventsListDetailsHeight = eventsListDetailsHeight; + var eHandle; + var scrubOngoing = false; + //--------------------------------------------------- // initial code @@ -149,6 +152,9 @@ angular.module('zmApp.controllers') else if ($scope.modal != undefined && $scope.modal.isShown()) { NVR.debug ("Not reloading as you have a modal open"); } + else if (scrubOngoing) { + NVR.debug ("Not reloading, as video scrub is on"); + } else { doRefresh(); } @@ -825,11 +831,18 @@ angular.module('zmApp.controllers') $scope.readyToPlay = function (api) { - api.mediaElement.attr("playsinline", ""); + eHandle = api; + eHandle.mediaElement.attr("playsinline", ""); }; + $scope.eventCanPlay = function() { + NVR.debug("This video can be played"); + eHandle.play(); + + }; + $scope.downloadFileToDevice = function (path, eid) { @@ -2109,6 +2122,11 @@ angular.module('zmApp.controllers') scrollbynumber = 0; } + if (scrubOngoing) { + NVR.debug ("making sure scrub is off"); + scrubOngoing = false; + } + if (oldEvent && event != oldEvent) { NVR.debug("EventCtrl:Old event scrub will hide now"); @@ -2207,6 +2225,7 @@ angular.module('zmApp.controllers') { NVR.debug("EventCtrl: Scrubbing will turn on now"); + scrubOngoing = true; $scope.currentEvent = ""; $scope.event = event; //$ionicScrollDelegate.freezeScroll(true); @@ -2313,7 +2332,7 @@ angular.module('zmApp.controllers') ], - theme: "lib/videogular-themes-default/videogular.css", + theme: "external/videogular2.2.1/videogular.min.css", }; diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js index c025cd3d..f22f6dc0 100644 --- a/www/js/EventModalCtrl.js +++ b/www/js/EventModalCtrl.js @@ -208,28 +208,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro }); - $timeout(function () { - // NVR.debug("Player is ready, invoking play"); - // handle.play() - - /* - .then (function (succ) { - NVR.debug ("Pause completed, doing a play"); - handle.play(); - }) - .catch (function (err) { - NVR.log ('Error invoking promised pause ' + JSON.stringify(err), 'error'); - })*/ - - /*playerPromise - .then (function (succ) {NVR.debug ("video should be playing");}) - .catch ( function (err) { - NVR.log ('Error trying to play: '+JSON.stringify(err), 'error'); - });*/ - - }, 300); - - // window.stop(); + }; $scope.onPlaybackUpdate = function (rate) { diff --git a/www/js/app.js b/www/js/app.js index af63f450..7c03fbdd 100755 --- a/www/js/app.js +++ b/www/js/app.js @@ -701,8 +701,9 @@ angular.module('zmApp', [ if (response.data && typeof(response.data) == 'string' && response.data.startsWith("<pre class=\"cake-error\">")) { console.log ("cake error detected, attempting fix..."); + //console.log ("BAD = "+ JSON.stringify(response.data)); response.data = JSON.parse(response.data.replace(/<pre class=\"cake-error\">[\s\S]*<\/pre>/,'')); - //console.log ("FIXED="+response.data); + // console.log ("FIXED="+JSON.stringify(response.data)); } //"data":"<pre class=\"cake-error\"> return response; diff --git a/www/templates/events.html b/www/templates/events.html index 394dfa14..62249598 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -198,7 +198,7 @@ <br /> <div class="videogular-container"> <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" - vg-responsive="true" vg-player-ready="readyToPlay($API)"> + vg-responsive="true" vg-can-play="eventCanPlay()" vg-player-ready="readyToPlay($API)"> <vg-overlay-play></vg-overlay-play> <vg-controls> <vg-play-pause-button></vg-play-pause-button> diff --git a/www/templates/menu.html b/www/templates/menu.html index 25df3422..9c780310 100644 --- a/www/templates/menu.html +++ b/www/templates/menu.html @@ -35,7 +35,7 @@ <!--<ion-item ng-click="navigateView('app.timeline')" menu-close>--> - <ion-item id="menu-move-2" href="#/app/timeline" ng-click="go('/app/timeline')"> + <ion-item id="testaut_menu_timeline" href="#/app/timeline" ng-click="go('/app/timeline')"> <span class=" item-icon-left"> <i class="icon ion-android-time"></i> </span>{{'kMenuTimeline'|translate}} @@ -136,7 +136,7 @@ </div> <!--<ion-item nav-clear menu-close ng-click="navigateView('app.log')" >--> - <ion-item id="menu-move-12" nav-clear href="#/app/log" ng-click="go('/app/log')"> + <ion-item id="testaut_menu_logs" nav-clear href="#/app/log" ng-click="go('/app/log')"> <span class=" item-icon-left"> <i class="icon ion-clipboard"></i> </span> {{'kMenuLogs'|translate}} |
