ionic-Material Design , Codecanyon

IonicMaterialDesign/www/lib/ionic/.bower.json

@@ -0,0 +1,46 @@
+{
+  "name": "ionic",
+  "version": "1.0.1",
+  "codename": "vanadium-vaquita",
+  "homepage": "https://github.com/driftyco/ionic",
+  "authors": [
+    "Max Lynch <max@drifty.com>",
+    "Adam Bradley <adam@drifty.com>",
+    "Ben Sperry <ben@drifty.com>"
+  ],
+  "description": "Advanced HTML5 hybrid mobile app development framework.",
+  "main": [
+    "css/ionic.css",
+    "fonts/*",
+    "js/ionic.js",
+    "js/ionic-angular.js"
+  ],
+  "keywords": [
+    "mobile",
+    "html5",
+    "ionic",
+    "cordova",
+    "phonegap",
+    "trigger",
+    "triggerio",
+    "angularjs",
+    "angular"
+  ],
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "angular": "1.3.13",
+    "angular-animate": "1.3.13",
+    "angular-sanitize": "1.3.13",
+    "angular-ui-router": "0.2.13"
+  },
+  "_release": "1.0.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.1",
+    "commit": "160898db160981d52c4606aef22b2f064b6c2539"
+  },
+  "_source": "git://github.com/driftyco/ionic-bower.git",
+  "_target": "1.0.1",
+  "_originalSource": "driftyco/ionic-bower"
+}

IonicMaterialDesign/www/lib/ionic/README.md

@@ -0,0 +1,15 @@
+# ionic-bower
+
+Bower repository for [Ionic Framework](http://github.com/driftyco/ionic)
+
+### Usage
+
+Include `js/ionic.bundle.js` to get ionic and all of its dependencies.
+
+Alternatively, include the individual ionic files with the dependencies separately.
+
+### Versions
+
+To install the latest stable version, `bower install driftyco/ionic-bower#v1.0.0`
+
+To install the latest nightly release, `bower install driftyco/ionic-bower#master`

IonicMaterialDesign/www/lib/ionic/bower.json

@@ -0,0 +1,37 @@
+{
+  "name": "ionic",
+  "version": "1.0.1",
+  "codename": "vanadium-vaquita",
+  "homepage": "https://github.com/driftyco/ionic",
+  "authors": [
+    "Max Lynch <max@drifty.com>",
+    "Adam Bradley <adam@drifty.com>",
+    "Ben Sperry <ben@drifty.com>"
+  ],
+  "description": "Advanced HTML5 hybrid mobile app development framework.",
+  "main": [
+    "css/ionic.css",
+    "fonts/*",
+    "js/ionic.js",
+    "js/ionic-angular.js"
+  ],
+  "keywords": [
+    "mobile",
+    "html5",
+    "ionic",
+    "cordova",
+    "phonegap",
+    "trigger",
+    "triggerio",
+    "angularjs",
+    "angular"
+  ],
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "angular": "1.3.13",
+    "angular-animate": "1.3.13",
+    "angular-sanitize": "1.3.13",
+    "angular-ui-router": "0.2.13"
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_action-sheet.scss

@@ -0,0 +1,170 @@
+/**
+ * Action Sheets
+ * --------------------------------------------------
+ */
+
+.action-sheet-backdrop {
+  @include transition(background-color 150ms ease-in-out);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-action-sheet;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0);
+
+  &.active {
+    background-color: rgba(0,0,0,0.4);
+  }
+}
+
+.action-sheet-wrapper {
+  @include translate3d(0, 100%, 0);
+  @include transition(all cubic-bezier(.36, .66, .04, 1) 500ms);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-width: 500px;
+  margin: auto;
+}
+
+.action-sheet-up {
+  @include translate3d(0, 0, 0);
+}
+
+.action-sheet {
+  margin-left: $sheet-margin;
+  margin-right: $sheet-margin;
+  width: auto;
+  z-index: $z-index-action-sheet;
+  overflow: hidden;
+
+  .button {
+    display: block;
+    padding: 1px;
+    width: 100%;
+    border-radius: 0;
+    border-color: $sheet-options-border-color;
+    background-color: transparent;
+
+    color: $sheet-options-text-color;
+    font-size: 21px;
+
+    &:hover {
+      color: $sheet-options-text-color;
+    }
+    &.destructive {
+      color: #ff3b30;
+      &:hover {
+        color: #ff3b30;
+      }
+    }
+  }
+
+  .button.active, .button.activated {
+    box-shadow: none;
+    border-color: $sheet-options-border-color;
+    color: $sheet-options-text-color;
+    background: $sheet-options-bg-active-color;
+  }
+}
+
+.action-sheet-has-icons .icon {
+  position: absolute;
+  left: 16px;
+}
+
+.action-sheet-title {
+  padding: $sheet-margin * 2;
+  color: #8f8f8f;
+  text-align: center;
+  font-size: 13px;
+}
+
+.action-sheet-group {
+  margin-bottom: $sheet-margin;
+  border-radius: $sheet-border-radius;
+  background-color: #fff;
+  overflow: hidden;
+
+  .button {
+    border-width: 1px 0px 0px 0px;
+  }
+  .button:first-child:last-child {
+    border-width: 0;
+  }
+}
+
+.action-sheet-options {
+  background: $sheet-options-bg-color;
+}
+
+.action-sheet-cancel {
+  .button {
+    font-weight: 500;
+  }
+}
+
+.action-sheet-open {
+  pointer-events: none;
+
+  &.modal-open .modal {
+    pointer-events: none;
+  }
+
+  .action-sheet-backdrop {
+    pointer-events: auto;
+  }
+}
+
+
+.platform-android {
+
+  .action-sheet-backdrop.active {
+    background-color: rgba(0,0,0,0.2);
+  }
+
+  .action-sheet {
+    margin: 0;
+
+    .action-sheet-title,
+    .button {
+      text-align: left;
+      border-color: transparent;
+      font-size: 16px;
+      color: inherit;
+    }
+
+    .action-sheet-title {
+      font-size: 14px;
+      padding: 16px;
+      color: #666;
+    }
+
+    .button.active,
+    .button.activated {
+      background: #e8e8e8;
+    }
+  }
+
+  .action-sheet-group {
+    margin: 0;
+    border-radius: 0;
+    background-color: #fafafa;
+  }
+
+  .action-sheet-cancel {
+    display: none;
+  }
+
+  .action-sheet-has-icons {
+
+    .button {
+      padding-left: 56px;
+    }
+
+  }
+
+}

IonicMaterialDesign/www/lib/ionic/scss/_animations.scss

@@ -0,0 +1,48 @@
+
+// Slide up from the bottom, used for modals
+// -------------------------------
+
+.slide-in-up {
+  @include translate3d(0, 100%, 0);
+}
+.slide-in-up.ng-enter,
+.slide-in-up > .ng-enter {
+  @include transition(all cubic-bezier(.1, .7, .1, 1) 400ms);
+}
+.slide-in-up.ng-enter-active,
+.slide-in-up > .ng-enter-active {
+  @include translate3d(0, 0, 0);
+}
+
+.slide-in-up.ng-leave,
+.slide-in-up > .ng-leave {
+  @include transition(all ease-in-out 250ms);
+}
+
+
+// Scale Out
+// Scale from hero (1 in this case) to zero
+// -------------------------------
+
+@-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; }
+}
+
+
+// Super Scale In
+// Scale from super (1.x) to duper (1 in this case)
+// -------------------------------
+
+@-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; }
+}

IonicMaterialDesign/www/lib/ionic/scss/_backdrop.scss

@@ -0,0 +1,24 @@
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-backdrop;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: $loading-backdrop-bg-color;
+
+  visibility: hidden;
+  opacity: 0;
+
+  &.visible {
+    visibility: visible;
+  }
+  &.active {
+    opacity: 1;
+  }
+
+  @include transition($loading-backdrop-fadein-duration opacity linear);
+}

IonicMaterialDesign/www/lib/ionic/scss/_badge.scss

@@ -0,0 +1,62 @@
+
+/**
+ * Badges
+ * --------------------------------------------------
+ */
+
+.badge {
+  @include badge-style($badge-default-bg, $badge-default-text);
+  z-index: $z-index-badge;
+  display: inline-block;
+  padding: 3px 8px;
+  min-width: 10px;
+  border-radius: $badge-border-radius;
+  vertical-align: baseline;
+  text-align: center;
+  white-space: nowrap;
+  font-weight: $badge-font-weight;
+  font-size: $badge-font-size;
+  line-height: $badge-line-height;
+
+  &:empty {
+    display: none;
+  }
+}
+
+//Be sure to override specificity of rule that 'badge color matches tab color by default'
+.tabs .tab-item .badge,
+.badge {
+  &.badge-light {
+    @include badge-style($badge-light-bg, $badge-light-text);
+  }
+  &.badge-stable {
+    @include badge-style($badge-stable-bg, $badge-stable-text);
+  }
+  &.badge-positive {
+    @include badge-style($badge-positive-bg, $badge-positive-text);
+  }
+  &.badge-calm {
+    @include badge-style($badge-calm-bg, $badge-calm-text);
+  }
+  &.badge-assertive {
+    @include badge-style($badge-assertive-bg, $badge-assertive-text);
+  }
+  &.badge-balanced {
+    @include badge-style($badge-balanced-bg, $badge-balanced-text);
+  }
+  &.badge-energized {
+    @include badge-style($badge-energized-bg, $badge-energized-text);
+  }
+  &.badge-royal {
+    @include badge-style($badge-royal-bg, $badge-royal-text);
+  }
+  &.badge-dark {
+    @include badge-style($badge-dark-bg, $badge-dark-text);
+  }
+}
+
+// Quick fix for labels/badges in buttons
+.button .badge {
+  position: relative;
+  top: -1px;
+}

IonicMaterialDesign/www/lib/ionic/scss/_bar.scss

@@ -0,0 +1,404 @@
+
+/**
+ * Bar (Headers and Footers)
+ * --------------------------------------------------
+ */
+
+.bar {
+  @include display-flex();
+  @include translate3d(0,0,0);
+  @include user-select(none);
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: $z-index-bar;
+
+  @include box-sizing(border-box);
+  padding: $bar-padding-portrait;
+
+  width: 100%;
+  height: $bar-height;
+  border-width: 0;
+  border-style: solid;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid $bar-default-border;
+
+  background-color: $bar-default-bg;
+
+  /* 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) {
+    border: none;
+    background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
+    background-position: bottom;
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+  }
+
+  &.bar-clear {
+    border: none;
+    background: none;
+    color: #fff;
+
+    .button {
+      color: #fff;
+    }
+    .title {
+      color: #fff;
+    }
+  }
+
+  &.item-input-inset {
+    .item-input-wrapper {
+      margin-top: -1px;
+
+      input {
+        padding-left: 8px;
+        width: 94%;
+        height: 28px;
+        background: transparent;
+      }
+    }
+  }
+
+  &.bar-light {
+    @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-light-border, $bar-light-border 50%, transparent 50%);
+    }
+  }
+  &.bar-stable {
+    @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-stable-border, $bar-stable-border 50%, transparent 50%);
+    }
+  }
+  &.bar-positive {
+    @include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-positive-border, $bar-positive-border 50%, transparent 50%);
+    }
+  }
+  &.bar-calm {
+    @include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-calm-border, $bar-calm-border 50%, transparent 50%);
+    }
+  }
+  &.bar-assertive {
+    @include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-assertive-border, $bar-assertive-border 50%, transparent 50%);
+    }
+  }
+  &.bar-balanced {
+    @include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-balanced-border, $bar-positive-border 50%, transparent 50%);
+    }
+  }
+  &.bar-energized {
+    @include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%);
+    }
+  }
+  &.bar-royal {
+    @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%);
+    }
+  }
+  &.bar-dark {
+    @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
+    &.bar-footer{
+      background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%);
+    }
+  }
+
+  // Title inside of a bar is centered
+  .title {
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $z-index-bar-title;
+    overflow: hidden;
+
+    margin: 0 10px;
+
+    min-width: 30px;
+    height: $bar-height - 1;
+
+    text-align: center;
+
+    // Go into ellipsis if too small
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font-size: $bar-title-font-size;
+    font-weight: $headings-font-weight;
+
+    line-height: $bar-height;
+
+    &.title-left {
+      text-align: left;
+    }
+    &.title-right {
+      text-align: right;
+    }
+  }
+
+  .title a {
+    color: inherit;
+  }
+
+  .button {
+    z-index: $z-index-bar-button;
+    padding: 0 $button-bar-button-padding;
+    min-width: initial;
+    min-height: $button-bar-button-height - 1;
+    font-weight: 400;
+    font-size: $button-bar-button-font-size;
+    line-height: $button-bar-button-height;
+
+    &.button-icon:before,
+    .icon:before,
+    &.icon:before,
+    &.icon-left:before,
+    &.icon-right:before {
+      padding-right: 2px;
+      padding-left: 2px;
+      font-size: $button-bar-button-icon-size;
+      line-height: $button-bar-button-height;
+    }
+
+    &.button-icon {
+      font-size: $bar-title-font-size;
+      .icon:before,
+      &:before,
+      &.icon-left:before,
+      &.icon-right:before {
+        vertical-align: top;
+        font-size: $button-large-icon-size;
+        line-height: $button-bar-button-height;
+      }
+    }
+    &.button-clear {
+      padding-right: 2px;
+      padding-left: 2px;
+      font-weight: 300;
+      font-size: $bar-title-font-size;
+
+      .icon:before,
+      &.icon:before,
+      &.icon-left:before,
+      &.icon-right:before {
+        font-size: $button-large-icon-size;
+        line-height: $button-bar-button-height;
+      }
+    }
+
+    &.back-button {
+      display: block;
+      margin-right: 5px;
+      padding: 0;
+      white-space: nowrap;
+      font-weight: 400;
+    }
+
+    &.back-button.active,
+    &.back-button.activated {
+      opacity: 0.2;
+    }
+  }
+
+  .button-bar > .button,
+  .buttons > .button {
+    min-height: $button-bar-button-height - 1;
+    line-height: $button-bar-button-height;
+  }
+
+  .button-bar + .button,
+  .button + .button-bar {
+    margin-left: 5px;
+  }
+
+  // Android 4.4 messes with the display property
+  .buttons,
+  .buttons.primary-buttons,
+  .buttons.secondary-buttons {
+    display: inherit;
+  }
+  .buttons span {
+    display: inline-block;
+  }
+  .buttons-left span {
+    margin-right: 5px;
+    display: inherit;
+  }
+  .buttons-right span {
+    margin-left: 5px;
+    display: inherit;
+  }
+
+  // Place the last button in a bar on the right of the bar
+  .title + .button:last-child,
+  > .button + .button:last-child,
+  > .button.pull-right,
+  .buttons.pull-right,
+  .title + .buttons {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+  }
+
+}
+
+.platform-android {
+
+  .nav-bar-has-subheader .bar {
+    background-image: none;
+  }
+
+  .bar {
+
+    .back-button .icon:before {
+      font-size: 24px;
+    }
+
+    .title {
+      font-size: 19px;
+      line-height: $bar-height;
+    }
+  }
+
+}
+
+// Default styles for buttons inside of styled bars
+.bar-light {
+  .button {
+    @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
+    @include button-clear($bar-light-text, $bar-title-font-size);
+  }
+}
+.bar-stable {
+  .button {
+    @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
+    @include button-clear($bar-stable-text, $bar-title-font-size);
+  }
+}
+.bar-positive {
+  .button {
+    @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text);
+    @include button-clear(#fff, $bar-title-font-size);
+  }
+}
+.bar-calm {
+  .button {
+    @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text);
+    @include button-clear(#fff, $bar-title-font-size);
+  }
+}
+.bar-assertive {
+  .button {
+    @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text);
+    @include button-clear(#fff, $bar-title-font-size);
+  }
+}
+.bar-balanced {
+  .button {
+    @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text);
+    @include button-clear(#fff, $bar-title-font-size);
+  }
+}
+.bar-energized {
+  .button {
+    @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text);
+    @include button-clear(#fff, $bar-title-font-size);
+  }
+}
+.bar-royal {
+  .button {
+    @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text);
+    @include button-clear(#fff, $bar-title-font-size);
+  }
+}
+.bar-dark {
+  .button {
+    @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
+    @include button-clear(#fff, $bar-title-font-size);
+  }
+}
+
+// Header at top
+.bar-header {
+  top: 0;
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  &.has-tabs-top{
+    border-bottom-width: 0px;
+    background-image: none;
+  }
+}
+.tabs-top .bar-header{
+  border-bottom-width: 0px;
+  background-image: none;
+}
+
+// Footer at bottom
+.bar-footer {
+  bottom: 0;
+  border-top-width: 1px;
+  border-bottom-width: 0;
+  background-position: top;
+
+  height: $bar-footer-height;
+
+  &.item-input-inset {
+    position: absolute;
+  }
+}
+
+// Don't render padding if the bar is just for tabs
+.bar-tabs {
+  padding: 0;
+}
+
+.bar-subheader {
+  top: $bar-height;
+  display: block;
+
+  height: $bar-subheader-height;
+}
+.bar-subfooter {
+  bottom: $bar-footer-height;
+  display: block;
+
+  height: $bar-subfooter-height;
+}
+
+.nav-bar-block {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $z-index-bar;
+}
+
+.bar .back-button.hide,
+.bar .buttons .hide {
+  display: none;
+}
+
+.nav-bar-tabs-top .bar {
+  background-image: none;
+}
+

IonicMaterialDesign/www/lib/ionic/scss/_button-bar.scss

@@ -0,0 +1,61 @@
+
+/**
+ * Button Bar
+ * --------------------------------------------------
+ */
+
+.button-bar {
+  @include display-flex();
+  @include flex(1);
+  width: 100%;
+
+  &.button-bar-inline {
+    display: block;
+    width: auto;
+
+    @include clearfix();
+
+    > .button {
+      width: auto;
+      display: inline-block;
+      float: left;
+    }
+  }
+}
+
+.button-bar > .button {
+  @include 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;
+
+  &:before,
+  .icon:before {
+    line-height: 44px;
+  }
+
+  &:first-child {
+    border-radius: $button-border-radius 0px 0px $button-border-radius;
+  }
+  &:last-child {
+    border-right-width: 1px;
+    border-radius: 0px $button-border-radius $button-border-radius 0px;
+  }
+}
+
+.button-bar > .button-small {
+  &:before,
+  .icon:before {
+    line-height: 28px;
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_button.scss

@@ -0,0 +1,252 @@
+
+/**
+ * Buttons
+ * --------------------------------------------------
+ */
+
+.button {
+  // set the color defaults
+  @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text);
+
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  padding: 0 $button-padding;
+
+  min-width: ($button-padding * 3) + $button-font-size;
+  min-height: $button-height + 5px;
+
+  border-width: $button-border-width;
+  border-style: solid;
+  border-radius: $button-border-radius;
+
+  vertical-align: top;
+  text-align: center;
+
+  text-overflow: ellipsis;
+  font-size: $button-font-size;
+  line-height: $button-height - $button-border-width + 1px;
+
+  cursor: pointer;
+
+  &:after {
+    // used to create a larger button "hit" area
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    bottom: -6px;
+    left: -6px;
+    content: ' ';
+  }
+
+  .icon {
+    vertical-align: top;
+    pointer-events: none;
+  }
+
+  .icon:before,
+  &.icon:before,
+  &.icon-left:before,
+  &.icon-right:before {
+    display: inline-block;
+    padding: 0 0 $button-border-width 0;
+    vertical-align: inherit;
+    font-size: $button-icon-size;
+    line-height: $button-height - $button-border-width;
+    pointer-events: none;
+  }
+  &.icon-left:before {
+    float: left;
+    padding-right: .2em;
+    padding-left: 0;
+  }
+  &.icon-right:before {
+    float: right;
+    padding-right: 0;
+    padding-left: .2em;
+  }
+
+  &.button-block, &.button-full {
+    margin-top: $button-block-margin;
+    margin-bottom: $button-block-margin;
+  }
+
+  &.button-light {
+    @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
+    @include button-clear($button-light-border);
+    @include button-outline($button-light-border);
+  }
+
+  &.button-stable {
+    @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
+    @include button-clear($button-stable-border);
+    @include button-outline($button-stable-border);
+  }
+
+  &.button-positive {
+    @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
+    @include button-clear($button-positive-bg);
+    @include button-outline($button-positive-bg);
+  }
+
+  &.button-calm {
+    @include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text);
+    @include button-clear($button-calm-bg);
+    @include button-outline($button-calm-bg);
+  }
+
+  &.button-assertive {
+    @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
+    @include button-clear($button-assertive-bg);
+    @include button-outline($button-assertive-bg);
+  }
+
+  &.button-balanced {
+    @include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text);
+    @include button-clear($button-balanced-bg);
+    @include button-outline($button-balanced-bg);
+  }
+
+  &.button-energized {
+    @include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text);
+    @include button-clear($button-energized-bg);
+    @include button-outline($button-energized-bg);
+  }
+
+  &.button-royal {
+    @include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text);
+    @include button-clear($button-royal-bg);
+    @include button-outline($button-royal-bg);
+  }
+
+  &.button-dark {
+    @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
+    @include button-clear($button-dark-bg);
+    @include button-outline($button-dark-bg);
+  }
+}
+
+.button-small {
+  padding: 2px $button-small-padding 1px;
+  min-width: $button-small-height;
+  min-height: $button-small-height + 2;
+  font-size: $button-small-font-size;
+  line-height: $button-small-height - $button-border-width - 1;
+
+  .icon:before,
+  &.icon:before,
+  &.icon-left:before,
+  &.icon-right:before {
+    font-size: $button-small-icon-size;
+    line-height: $button-small-icon-size + 3;
+    margin-top: 3px;
+  }
+}
+
+.button-large {
+  padding: 0 $button-large-padding;
+  min-width: ($button-large-padding * 3) + $button-large-font-size;
+  min-height: $button-large-height + 5;
+  font-size: $button-large-font-size;
+  line-height: $button-large-height - $button-border-width;
+
+  .icon:before,
+  &.icon:before,
+  &.icon-left:before,
+  &.icon-right:before {
+    padding-bottom: ($button-border-width * 2);
+    font-size: $button-large-icon-size;
+    line-height: $button-large-height - ($button-border-width * 2) - 1;
+  }
+}
+
+.button-icon {
+  @include transition(opacity .1s);
+  padding: 0 6px;
+  min-width: initial;
+  border-color: transparent;
+  background: none;
+
+  &.button.active,
+  &.button.activated {
+    border-color: transparent;
+    background: none;
+    box-shadow: none;
+    opacity: 0.3;
+  }
+
+  .icon:before,
+  &.icon:before {
+    font-size: $button-large-icon-size;
+  }
+}
+
+.button-clear {
+  @include button-clear($button-default-border);
+  @include transition(opacity .1s);
+  padding: 0 $button-clear-padding;
+  max-height: $button-height;
+  border-color: transparent;
+  background: none;
+  box-shadow: none;
+
+  &.active,
+  &.activated {
+    opacity: 0.3;
+  }
+}
+
+.button-outline {
+  @include button-outline($button-default-border);
+  @include transition(opacity .1s);
+  background: none;
+  box-shadow: none;
+}
+
+.padding > .button.button-block:first-child {
+  margin-top: 0;
+}
+
+.button-block {
+  display: block;
+  clear: both;
+
+  &: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;
+
+  .icon:before,
+  &.icon:before,
+  &.icon-left:before,
+  &.icon-right:before {
+    margin-top: 2px;
+  }
+}
+
+.button.disabled,
+.button[disabled] {
+  opacity: .4;
+  cursor: default !important;
+  pointer-events: none;
+}

IonicMaterialDesign/www/lib/ionic/scss/_checkbox.scss

@@ -0,0 +1,176 @@
+
+/**
+ * Checkbox
+ * --------------------------------------------------
+ */
+
+.checkbox {
+  // set the color defaults
+  @include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default);
+
+  position: relative;
+  display: inline-block;
+  padding: ($checkbox-height / 4) ($checkbox-width / 4);
+  cursor: pointer;
+}
+.checkbox-light  {
+  @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light);
+}
+.checkbox-stable  {
+  @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable);
+}
+.checkbox-positive  {
+  @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive);
+}
+.checkbox-calm  {
+  @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm);
+}
+.checkbox-assertive  {
+  @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive);
+}
+.checkbox-balanced  {
+  @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced);
+}
+.checkbox-energized{
+  @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized);
+}
+.checkbox-royal  {
+  @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal);
+}
+.checkbox-dark  {
+  @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark);
+}
+
+.checkbox input:disabled:before,
+.checkbox input:disabled + .checkbox-icon:before {
+  border-color: $checkbox-off-border-light;
+}
+
+.checkbox input:disabled:checked:before,
+.checkbox input:disabled:checked + .checkbox-icon:before {
+  background: $checkbox-on-bg-light;
+}
+
+
+.checkbox.checkbox-input-hidden input {
+  display: none !important;
+}
+
+.checkbox input,
+.checkbox-icon {
+  position: relative;
+  width: $checkbox-width;
+  height: $checkbox-height;
+  display: block;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-appearance: none;
+
+  &:before {
+    // what the checkbox looks like when its not checked
+    display: table;
+    width: 100%;
+    height: 100%;
+    border-width: $checkbox-border-width;
+    border-style: solid;
+    border-radius: $checkbox-border-radius;
+    background: $checkbox-off-bg-color;
+    content: ' ';
+    @include transition(background-color 20ms ease-in-out);
+  }
+}
+
+.checkbox input:checked:before,
+input:checked + .checkbox-icon:before {
+  border-width: $checkbox-border-width + 1;
+}
+
+// the checkmark within the box
+.checkbox input:after,
+.checkbox-icon:after {
+  @include transition(opacity .05s ease-in-out);
+  @include rotate(-45deg);
+  position: absolute;
+  top: 33%;
+  left: 25%;
+  display: table;
+  width: ($checkbox-width / 2);
+  height: ($checkbox-width / 4) - 1;
+  border: $checkbox-check-width solid $checkbox-check-color;
+  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: ($checkbox-width / 2) - 1;
+  height: 7px;
+}
+
+.grade-c .checkbox input:after,
+.grade-c .checkbox-icon:after {
+  @include rotate(0);
+  top: 3px;
+  left: 4px;
+  border: none;
+  color: $checkbox-check-color;
+  content: '\2713';
+  font-weight: bold;
+  font-size: 20px;
+}
+
+// what the checkmark looks like when its checked
+.checkbox input:checked:after,
+input:checked + .checkbox-icon:after {
+  opacity: 1;
+}
+
+// make sure item content have enough padding on left to fit the checkbox
+.item-checkbox {
+  padding-left: ($item-padding * 2) + $checkbox-width;
+
+  &.active {
+    box-shadow: none;
+  }
+}
+
+// position the checkbox to the left within an item
+.item-checkbox .checkbox {
+  position: absolute;
+  top: 50%;
+  right: $item-padding / 2;
+  left: $item-padding / 2;
+  z-index: $z-index-item-checkbox;
+  margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1;
+}
+
+
+.item-checkbox.item-checkbox-right {
+  padding-right: ($item-padding * 2) + $checkbox-width;
+  padding-left: $item-padding;
+}
+
+.item-checkbox-right .checkbox input,
+.item-checkbox-right .checkbox-icon {
+  float: right;
+}

IonicMaterialDesign/www/lib/ionic/scss/_form.scss

@@ -0,0 +1,318 @@
+/**
+ * Forms
+ * --------------------------------------------------
+ */
+
+// Make all forms have space below them
+form {
+  margin: 0 0 $line-height-base;
+}
+
+// Groups of fields with labels on top (legends)
+legend {
+  display: block;
+  margin-bottom: $line-height-base;
+  padding: 0;
+  width: 100%;
+  border: $input-border-width solid $input-border;
+  color: $dark;
+  font-size: $font-size-base * 1.5;
+  line-height: $line-height-base * 2;
+
+  small {
+    color: $stable;
+    font-size: $line-height-base * .75;
+  }
+}
+
+// Set font for forms
+label,
+input,
+button,
+select,
+textarea {
+  @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
+}
+
+
+// Input List
+// -------------------------------
+
+.item-input {
+  @include display-flex();
+  @include align-items(center);
+  position: relative;
+  overflow: hidden;
+  padding: 6px 0 5px 16px;
+
+  input {
+    @include border-radius(0);
+    @include flex(1, 220px);
+    @include appearance(none);
+    margin: 0;
+    padding-right: 24px;
+    background-color: transparent;
+  }
+
+  .button .icon {
+    @include flex(0, 0, 24px);
+    position: static;
+    display: inline-block;
+    height: auto;
+    text-align: center;
+    font-size: 16px;
+  }
+
+  .button-bar {
+    @include border-radius(0);
+    @include flex(1, 0, 220px);
+    @include appearance(none);
+  }
+
+  .icon {
+    min-width: 14px;
+  }
+}
+// prevent flex-shrink on WP
+.platform-windowsphone .item-input input{
+  flex-shrink: 1;
+}
+
+.item-input-inset {
+  @include display-flex();
+  @include align-items(center);
+  position: relative;
+  overflow: hidden;
+  padding: ($item-padding / 3) * 2;
+}
+
+.item-input-wrapper {
+  @include display-flex();
+  @include flex(1, 0);
+  @include align-items(center);
+  @include 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: ($item-padding / 3) * 2;
+}
+
+.input-label {
+  display: table;
+  padding: 7px 10px 7px 0px;
+  max-width: 200px;
+  width: 35%;
+  color: $input-label-color;
+  font-size: 16px;
+}
+
+.placeholder-icon {
+  color: #aaa;
+  &:first-child {
+    padding-right: 6px;
+  }
+  &:last-child {
+    padding-left: 6px;
+  }
+}
+
+.item-stacked-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label, .icon {
+    display: inline-block;
+    padding: 4px 0 0 0px;
+    vertical-align: middle;
+  }
+}
+
+.item-stacked-label input,
+.item-stacked-label textarea {
+  @include border-radius(2px);
+  padding: 4px 8px 3px 0;
+  border: none;
+  background-color: $input-bg;
+}
+.item-stacked-label input {
+  overflow: hidden;
+  height: $line-height-computed + $font-size-base + 12px;
+}
+
+.item-floating-label {
+  display: block;
+  background-color: transparent;
+  box-shadow: none;
+
+  .input-label {
+    position: relative;
+    padding: 5px 0 0 0;
+    opacity: 0;
+    top: 10px;
+    @include transition(opacity .15s ease-in, top .2s linear);
+
+    &.has-input {
+      opacity: 1;
+      top: 0;
+      @include transition(opacity .15s ease-in, top .2s linear);
+    }
+  }
+}
+
+
+// Form Controls
+// -------------------------------
+
+// Shared size and type resets
+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: $line-height-computed + $font-size-base;
+  color: $input-color;
+  vertical-align: middle;
+  font-size: $font-size-base;
+  line-height: $font-size-base + 2;
+}
+
+.platform-ios,
+.platform-android {
+  input[type="datetime-local"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"] {
+    padding-top: 8px;
+  }
+}
+
+.item-input {
+  input,
+  textarea {
+    width: 100%;
+  }
+}
+
+textarea {
+  padding-left: 0;
+  @include placeholder($input-color-placeholder, -3px);
+}
+
+// Reset height since textareas have rows
+textarea {
+  height: auto;
+}
+
+// Everything else
+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;
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 0;
+  line-height: normal;
+}
+
+// Reset width of input images, buttons, radios, checkboxes
+.item-input {
+  input[type="file"],
+  input[type="image"],
+  input[type="submit"],
+  input[type="reset"],
+  input[type="button"],
+  input[type="radio"],
+  input[type="checkbox"] {
+    width: auto; // Override of generic input selector
+  }
+}
+
+// Set the height of file to match text inputs
+input[type="file"] {
+  line-height: $input-height-base;
+}
+
+// Text input classes to hide text caret during scroll
+.previous-input-focus,
+.cloned-text-input + input,
+.cloned-text-input + textarea {
+  position: absolute !important;
+  left: -9999px;
+  width: 200px;
+}
+
+
+// Placeholder
+// -------------------------------
+input,
+textarea {
+  @include placeholder();
+}
+
+
+// DISABLED STATE
+// -------------------------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly]:not(.cloned-text-input),
+textarea[readonly]:not(.cloned-text-input),
+select[readonly] {
+  background-color: $input-bg-disabled;
+  cursor: not-allowed;
+}
+// Explicitly reset the colors here
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}

IonicMaterialDesign/www/lib/ionic/scss/_grid.scss

@@ -0,0 +1,151 @@
+/**
+ * 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 {
+  @include display-flex();
+  padding: ($grid-padding-width / 2);
+  width: 100%;
+}
+
+.row-wrap {
+  @include flex-wrap(wrap);
+}
+
+.row-no-padding {
+  padding: 0;
+
+  > .col {
+    padding: 0;
+  }
+}
+
+.row + .row {
+  margin-top: ($grid-padding-width / 2) * -1;
+  padding-top: 0;
+}
+
+.col {
+  @include flex(1);
+  display: block;
+  padding: ($grid-padding-width / 2);
+  width: 100%;
+}
+
+
+/* Vertically Align Columns */
+/* .row-* vertically aligns every .col in the .row */
+.row-top {
+  @include align-items(flex-start);
+}
+.row-bottom {
+  @include align-items(flex-end);
+}
+.row-center {
+  @include align-items(center);
+}
+.row-stretch {
+  @include align-items(stretch);
+}
+.row-baseline {
+  @include align-items(baseline);
+}
+
+/* .col-* vertically aligns an individual .col */
+.col-top {
+  @include align-self(flex-start);
+}
+.col-bottom {
+  @include align-self(flex-end);
+}
+.col-center {
+  @include 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 {
+  @include flex(0, 0, 10%);
+  max-width: 10%;
+}
+.col-20 {
+  @include flex(0, 0, 20%);
+  max-width: 20%;
+}
+.col-25 {
+  @include flex(0, 0, 25%);
+  max-width: 25%;
+}
+.col-33, .col-34 {
+  @include flex(0, 0, 33.3333%);
+  max-width: 33.3333%;
+}
+.col-50 {
+  @include flex(0, 0, 50%);
+  max-width: 50%;
+}
+.col-66, .col-67 {
+  @include flex(0, 0, 66.6666%);
+  max-width: 66.6666%;
+}
+.col-75 {
+  @include flex(0, 0, 75%);
+  max-width: 75%;
+}
+.col-80 {
+  @include flex(0, 0, 80%);
+  max-width: 80%;
+}
+.col-90 {
+  @include 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 */
+
+@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
+@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
+@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);

IonicMaterialDesign/www/lib/ionic/scss/_items.scss

@@ -0,0 +1,815 @@
+/**
+ * Items
+ * --------------------------------------------------
+ */
+
+.item {
+  @include item-style($item-default-bg, $item-default-border, $item-default-text);
+
+  position: relative;
+  z-index: $z-index-item; // Make sure the borders and stuff don't get hidden by children
+  display: block;
+
+  margin: $item-border-width * -1;
+  padding: $item-padding;
+
+  border-width: $item-border-width;
+  border-style: solid;
+  font-size: $item-font-size;
+
+  h2 {
+    margin: 0 0 2px 0;
+    font-size: 16px;
+    font-weight: normal;
+  }
+  h3 {
+    margin: 0 0 4px 0;
+    font-size: 14px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    font-size: 12px;
+  }
+  h5, h6 {
+    margin: 0 0 3px 0;
+    font-size: 10px;
+  }
+  p {
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 2px;
+  }
+
+  h1:last-child,
+  h2:last-child,
+  h3:last-child,
+  h4:last-child,
+  h5:last-child,
+  h6:last-child,
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  // Align badges within items
+  .badge {
+    @include display-flex();
+    position: absolute;
+    top: $item-padding;
+    right: ($item-padding * 2);
+  }
+  &.item-button-right .badge {
+    right: ($item-padding * 2) + 35;
+  }
+  &.item-divider .badge {
+    top: ceil($item-padding / 2);
+  }
+  .badge + .badge {
+    margin-right: 5px;
+  }
+
+  // Different themes for items
+  &.item-light {
+    @include item-style($item-light-bg, $item-light-border, $item-light-text);
+  }
+  &.item-stable {
+    @include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
+  }
+  &.item-positive {
+    @include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
+  }
+  &.item-calm {
+    @include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
+  }
+  &.item-assertive {
+    @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
+  }
+  &.item-balanced {
+    @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
+  }
+  &.item-energized {
+    @include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
+  }
+  &.item-royal {
+    @include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
+  }
+  &.item-dark {
+    @include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
+  }
+
+  &[ng-click]:hover {
+    cursor: pointer;
+  }
+
+}
+
+.list-borderless .item,
+.item-borderless {
+  border-width: 0;
+}
+
+// Link and Button Active States
+.item.active,
+.item.activated,
+.item-complex.active .item-content,
+.item-complex.activated .item-content,
+.item .item-content.active,
+.item .item-content.activated {
+  @include item-active-style($item-default-active-bg, $item-default-active-border);
+
+  // Different active themes for <a> and <button> items
+  &.item-light {
+    @include item-active-style($item-light-active-bg, $item-light-active-border);
+  }
+  &.item-stable {
+    @include item-active-style($item-stable-active-bg, $item-stable-active-border);
+  }
+  &.item-positive {
+    @include item-active-style($item-positive-active-bg, $item-positive-active-border);
+  }
+  &.item-calm {
+    @include item-active-style($item-calm-active-bg, $item-calm-active-border);
+  }
+  &.item-assertive {
+    @include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
+  }
+  &.item-balanced {
+    @include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
+  }
+  &.item-energized {
+    @include item-active-style($item-energized-active-bg, $item-energized-active-border);
+  }
+  &.item-royal {
+    @include item-active-style($item-royal-active-bg, $item-royal-active-border);
+  }
+  &.item-dark {
+    @include item-active-style($item-dark-active-bg, $item-dark-active-border);
+  }
+}
+
+// Handle text overflow
+.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;
+}
+
+// Linked list items
+a.item {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &: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: $z-index-item;
+  padding: $item-padding (ceil( ($item-padding * 3) + ($item-padding / 3) ) - 5) $item-padding $item-padding;
+  border: none;
+  background-color: $item-default-bg;
+}
+
+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;
+}
+
+// Link and Button Active States
+
+.item-complex{
+  // Stylized items
+  &.item-light > .item-content{
+    @include item-style($item-light-bg, $item-light-border, $item-light-text);
+    &.active, &:active {
+      @include item-active-style($item-light-active-bg, $item-light-active-border);
+    }
+  }
+  &.item-stable > .item-content{
+    @include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
+    &.active, &:active {
+      @include item-active-style($item-stable-active-bg, $item-stable-active-border);
+    }
+  }
+  &.item-positive > .item-content{
+    @include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
+    &.active, &:active {
+      @include item-active-style($item-positive-active-bg, $item-positive-active-border);
+    }
+  }
+  &.item-calm > .item-content{
+    @include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
+    &.active, &:active {
+      @include item-active-style($item-calm-active-bg, $item-calm-active-border);
+    }
+  }
+  &.item-assertive > .item-content{
+    @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
+    &.active, &:active {
+      @include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
+    }
+  }
+  &.item-balanced > .item-content{
+    @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
+    &.active, &:active {
+      @include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
+    }
+  }
+  &.item-energized > .item-content{
+    @include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
+    &.active, &:active {
+      @include item-active-style($item-energized-active-bg, $item-energized-active-border);
+    }
+  }
+  &.item-royal > .item-content{
+    @include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
+    &.active, &:active {
+      @include item-active-style($item-royal-active-bg, $item-royal-active-border);
+    }
+  }
+  &.item-dark > .item-content{
+    @include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
+    &.active, &:active {
+      @include item-active-style($item-dark-active-bg, $item-dark-active-border);
+    }
+  }
+}
+
+
+/**
+ * Item Icons
+ * --------------------------------------------------
+ */
+
+.item-icon-left .icon,
+.item-icon-right .icon {
+  @include display-flex();
+  @include align-items(center);
+  position: absolute;
+  top: 0;
+  height: 100%;
+  font-size: $item-icon-font-size;
+
+  &:before {
+    display: block;
+    width: $item-icon-font-size;
+    text-align: center;
+  }
+}
+
+.item .fill-icon {
+  min-width: $item-icon-fill-font-size + 2;
+  min-height: $item-icon-fill-font-size + 2;
+  font-size: $item-icon-fill-font-size;
+}
+
+.item-icon-left {
+  padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
+
+  .icon {
+    left: ceil( ($item-padding / 3) * 2);
+  }
+}
+.item-complex.item-icon-left {
+  padding-left: 0;
+
+  .item-content {
+    padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
+  }
+}
+
+.item-icon-right {
+  padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
+
+  .icon {
+    right: ceil( ($item-padding / 3) * 2);
+  }
+}
+.item-complex.item-icon-right {
+  padding-right: 0;
+
+  .item-content {
+    padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
+  }
+}
+
+.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: $item-icon-accessory-color;
+  font-size: $item-icon-accessory-font-size;
+}
+.item-icon-left .icon-accessory {
+  left: floor($item-padding / 5);
+}
+.item-icon-right .icon-accessory {
+  right: floor($item-padding / 5);
+}
+
+
+/**
+ * Item Button
+ * --------------------------------------------------
+ * An item button is a child button inside an .item (not the entire .item)
+ */
+
+.item-button-left {
+  padding-left: ceil($item-padding * 4.5);
+}
+
+.item-button-left > .button,
+.item-button-left .item-content > .button {
+  @include display-flex();
+  @include align-items(center);
+  position: absolute;
+  top: ceil($item-padding / 2);
+  left: ceil( ($item-padding / 3) * 2);
+  min-width: $item-icon-font-size + ($button-border-width * 2);
+  min-height: $item-icon-font-size + ($button-border-width * 2);
+  font-size: $item-button-font-size;
+  line-height: $item-button-line-height;
+
+  .icon:before {
+    position: relative;
+    left: auto;
+    width: auto;
+    line-height: $item-icon-font-size - 1;
+  }
+
+  > .button {
+    margin: 0px 2px;
+    min-height: $item-icon-font-size + ($button-border-width * 2);
+    font-size: $item-button-font-size;
+    line-height: $item-button-line-height;
+  }
+}
+
+.item-button-right,
+a.item.item-button-right,
+button.item.item-button-right {
+  padding-right: $item-padding * 5;
+}
+
+.item-button-right > .button,
+.item-button-right .item-content > .button,
+.item-button-right > .buttons,
+.item-button-right .item-content > .buttons {
+  @include display-flex();
+  @include align-items(center);
+  position: absolute;
+  top: ceil($item-padding / 2);
+  right: $item-padding;
+  min-width: $item-icon-font-size + ($button-border-width * 2);
+  min-height: $item-icon-font-size + ($button-border-width * 2);
+  font-size: $item-button-font-size;
+  line-height: $item-button-line-height;
+
+  .icon:before {
+    position: relative;
+    left: auto;
+    width: auto;
+    line-height: $item-icon-font-size - 1;
+  }
+
+  > .button {
+    margin: 0px 2px;
+    min-width: $item-icon-font-size + ($button-border-width * 2);
+    min-height: $item-icon-font-size + ($button-border-width * 2);
+    font-size: $item-button-font-size;
+    line-height: $item-button-line-height;
+  }
+}
+
+
+// Item Avatar
+// -------------------------------
+
+.item-avatar,
+.item-avatar .item-content,
+.item-avatar-left,
+.item-avatar-left .item-content {
+  padding-left: $item-avatar-width + ($item-padding * 2);
+  min-height: $item-avatar-width + ($item-padding * 2);
+
+  > img:first-child,
+  .item-image {
+    position: absolute;
+    top: $item-padding;
+    left: $item-padding;
+    max-width: $item-avatar-width;
+    max-height: $item-avatar-height;
+    width: 100%;
+    height: 100%;
+    border-radius: $item-avatar-border-radius;
+  }
+}
+
+.item-avatar-right,
+.item-avatar-right .item-content {
+  padding-right: $item-avatar-width + ($item-padding * 2);
+  min-height: $item-avatar-width + ($item-padding * 2);
+
+  > img:first-child,
+  .item-image {
+    position: absolute;
+    top: $item-padding;
+    right: $item-padding;
+    max-width: $item-avatar-width;
+    max-height: $item-avatar-height;
+    width: 100%;
+    height: 100%;
+    border-radius: $item-avatar-border-radius;
+  }
+}
+
+
+// Item Thumbnails
+// -------------------------------
+
+.item-thumbnail-left,
+.item-thumbnail-left .item-content {
+  padding-top: $item-padding / 2;
+  padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
+  min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
+
+  > img:first-child,
+  .item-image {
+    position: absolute;
+    top: $item-thumbnail-margin;
+    left: $item-thumbnail-margin;
+    max-width: $item-thumbnail-width;
+    max-height: $item-thumbnail-height;
+    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: $item-padding / 2;
+  padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
+  min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
+
+  > img:first-child,
+  .item-image {
+    position: absolute;
+    top: $item-thumbnail-margin;
+    right: $item-thumbnail-margin;
+    max-width: $item-thumbnail-width;
+    max-height: $item-thumbnail-height;
+    width: 100%;
+    height: 100%;
+  }
+}
+.item-avatar-right.item-complex,
+.item-thumbnail-right.item-complex {
+  padding-top: 0;
+  padding-right: 0;
+}
+
+
+// Item Image
+// -------------------------------
+
+.item-image {
+  padding: 0;
+  text-align: center;
+
+  img:first-child, .list-img {
+    width: 100%;
+    vertical-align: middle;
+  }
+}
+
+
+// Item Body
+// -------------------------------
+
+.item-body {
+  overflow: auto;
+  padding: $item-padding;
+  text-overflow: inherit;
+  white-space: normal;
+
+  h1, h2, h3, h4, h5, h6, p {
+    margin-top: $item-padding;
+    margin-bottom: $item-padding;
+  }
+}
+
+
+// Item Divider
+// -------------------------------
+
+.item-divider {
+  padding-top: ceil($item-padding / 2);
+  padding-bottom: ceil($item-padding / 2);
+  min-height: 30px;
+  background-color: $item-divider-bg;
+  color: $item-divider-color;
+  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
+// -------------------------------
+
+.item-note {
+  float: right;
+  color: #aaa;
+  font-size: 14px;
+}
+
+
+// Item Editing
+// -------------------------------
+
+.item-left-editable .item-content,
+.item-right-editable .item-content {
+  // setup standard transition settings
+  @include transition-duration( $item-edit-transition-duration );
+  @include transition-timing-function( $item-edit-transition-function );
+  -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 {
+  // actively editing the left side of the item
+  @include translate3d($item-left-edit-open-width, 0, 0);
+}
+
+.item-remove-animate {
+  &.ng-leave {
+    @include transition-duration( $item-remove-transition-duration );
+  }
+  &.ng-leave .item-content,
+  &.ng-leave:last-of-type {
+    @include transition-duration( $item-remove-transition-duration );
+    @include transition-timing-function( $item-remove-transition-function );
+    @include transition-property( all );
+  }
+
+  &.ng-leave.ng-leave-active .item-content {
+    opacity:0;
+    -webkit-transform: translate3d(-100%, 0, 0) !important;
+    transform: translate3d(-100%, 0, 0) !important;
+  }
+  &.ng-leave.ng-leave-active:last-of-type {
+    opacity: 0;
+  }
+
+  &.ng-leave.ng-leave-active ~ ion-item:not(.ng-leave) {
+    -webkit-transform: translate3d(0, unquote('-webkit-calc(-100% + 1px)'), 0);
+    transform: translate3d(0, calc(-100% + 1px), 0);
+    @include transition-duration( $item-remove-transition-duration );
+    @include transition-timing-function( $item-remove-descendents-transition-function );
+    @include transition-property( all );
+  }
+}
+
+
+
+// Item Left Edit Button
+// -------------------------------
+
+.item-left-edit {
+  @include transition(all $item-edit-transition-function $item-edit-transition-duration / 2);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-item-edit;
+  width: $item-left-edit-open-width;
+  height: 100%;
+  line-height: 100%;
+
+  .button {
+    height: 100%;
+
+    &.icon {
+      @include display-flex();
+      @include align-items(center);
+      position: absolute;
+      top: 0;
+      height: 100%;
+    }
+  }
+
+  display: none;
+  opacity: 0;
+  @include translate3d( ($item-left-edit-left - $item-left-edit-open-width) / 2, 0, 0);
+  &.visible {
+    display: block;
+    &.active {
+      opacity: 1;
+      @include translate3d($item-left-edit-left, 0, 0);
+    }
+  }
+}
+.list-left-editing .item-left-edit {
+  @include transition-delay($item-edit-transition-duration / 2);
+}
+
+// Item Delete (Left side edit button)
+// -------------------------------
+
+.item-delete .button.icon {
+  color: $item-delete-icon-color;
+  font-size: $item-delete-icon-size;
+
+  &:hover {
+    opacity: .7;
+  }
+}
+
+
+// Item Right Edit Button
+// -------------------------------
+
+.item-right-edit {
+  @include transition(all $item-edit-transition-function $item-edit-transition-duration);
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: $z-index-item-reorder;
+  width: $item-right-edit-open-width *  1.5;
+  height: 100%;
+  background: inherit;
+  padding-left: 20px;
+
+  .button {
+    min-width: $item-right-edit-open-width;
+    height: 100%;
+
+    &.icon {
+      @include display-flex();
+      @include align-items(center);
+      position: absolute;
+      top: 0;
+      height: 100%;
+      font-size: $item-reorder-icon-size;
+    }
+  }
+
+  display: block;
+  opacity: 0;
+  @include translate3d($item-right-edit-open-width *  1.5, 0, 0);
+  &.visible {
+    display: block;
+    &.active {
+      opacity: 1;
+      @include translate3d(0, 0, 0);
+    }
+  }
+}
+
+
+// Item Reordering (Right side edit button)
+// -------------------------------
+
+.item-reorder .button.icon {
+  color: $item-reorder-icon-color;
+  font-size: $item-reorder-icon-size;
+}
+
+.item-reordering {
+  // item is actively being reordered
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: $z-index-item-reordering;
+  width: 100%;
+  box-shadow: 0px 0px 10px 0px #aaa;
+
+  .item-reorder {
+    z-index: $z-index-item-reordering;
+  }
+}
+
+.item-placeholder {
+  // placeholder for the item that's being reordered
+  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: $z-index-item-options;
+  height: 100%;
+
+  .button {
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    @include display-inline-flex();
+    @include align-items(center);
+
+    &:before{
+      margin: 0 auto;
+    }
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_list.scss

@@ -0,0 +1,125 @@
+
+/**
+ * Lists
+ * --------------------------------------------------
+ */
+
+.list {
+  position: relative;
+  padding-top: $item-border-width;
+  padding-bottom: $item-border-width;
+  padding-left: 0; // reset padding because ul and ol
+  margin-bottom: 20px;
+}
+.list:last-child {
+  margin-bottom: 0px;
+  &.card{
+    margin-bottom:40px;
+  }
+}
+
+
+/**
+ * List Header
+ * --------------------------------------------------
+ */
+
+.list-header {
+  margin-top: $list-header-margin-top;
+  padding: $list-header-padding;
+  background-color: $list-header-bg;
+  color: $list-header-color;
+  font-weight: bold;
+}
+
+// when its a card make sure it doesn't duplicate top and bottom borders
+.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: ($content-padding * 2) $content-padding;
+  border-radius: $card-border-radius;
+  background-color: $card-body-bg;
+}
+
+.card {
+  padding-top: $item-border-width;
+  padding-bottom: $item-border-width;
+  box-shadow: $card-box-shadow;
+
+  .item {
+    border-left: 0;
+    border-right: 0;
+  }
+  .item:first-child {
+    border-top: 0;
+  }
+  .item:last-child {
+    border-bottom: 0;
+  }
+}
+
+.padding {
+  .card, .list-inset {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.card .item,
+.list-inset .item,
+.padding > .list .item
+{
+  &:first-child {
+    border-top-left-radius: $card-border-radius;
+    border-top-right-radius: $card-border-radius;
+
+    .item-content {
+      border-top-left-radius: $card-border-radius;
+      border-top-right-radius: $card-border-radius;
+    }
+  }
+  &:last-child {
+    border-bottom-right-radius: $card-border-radius;
+    border-bottom-left-radius: $card-border-radius;
+
+    .item-content {
+      border-bottom-right-radius: $card-border-radius;
+      border-bottom-left-radius: $card-border-radius;
+    }
+  }
+}
+
+.card .item:last-child,
+.list-inset .item:last-child {
+  margin-bottom: $item-border-width * -1;
+}
+
+.card .item,
+.list-inset .item,
+.padding > .list .item,
+.padding-horizontal > .list .item {
+  margin-right: 0;
+  margin-left: 0;
+
+  &.item-input input {
+    padding-right: 44px;
+  }
+}
+.padding-left > .list .item {
+  margin-left: 0;
+}
+.padding-right > .list .item {
+  margin-right: 0;
+}

IonicMaterialDesign/www/lib/ionic/scss/_loaders.scss

@@ -0,0 +1,28 @@
+/**
+ * Loaders (Spinners)
+ * --------------------------------------------------
+ */
+
+svg.loader {
+  width: 28px;
+  height: 28px;
+  stroke: #333;
+  fill: #333;
+}
+
+.loader-ios,
+.loader-ios-small {
+
+  line {
+    stroke: #69717d;
+  }
+
+}
+
+.loader-android {
+
+  circle {
+    stroke: #4b8bf4;
+  }
+
+}

IonicMaterialDesign/www/lib/ionic/scss/_loading.scss

@@ -0,0 +1,51 @@
+
+/**
+ * Loading
+ * --------------------------------------------------
+ */
+
+.loading-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  z-index: $z-index-loading;
+
+  @include display-flex();
+  @include justify-content(center);
+  @include align-items(center);
+
+  @include transition(0.2s opacity linear);
+  visibility: hidden;
+  opacity: 0;
+
+  &:not(.visible) .icon,
+  &:not(.visible) .spinner{
+    display: none;
+  }
+  &.visible {
+    visibility: visible;
+  }
+  &.active {
+    opacity: 1;
+  }
+
+  .loading {
+    padding: $loading-padding;
+
+    border-radius: $loading-border-radius;
+    background-color: $loading-bg-color;
+
+    color: $loading-text-color;
+
+    text-align: center;
+    text-overflow: ellipsis;
+    font-size: $loading-font-size;
+
+    h1, h2, h3, h4, h5, h6 {
+      color: $loading-text-color;
+    }
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_menu.scss

@@ -0,0 +1,64 @@
+
+/**
+ * Menus
+ * --------------------------------------------------
+ * Side panel structure
+ */
+
+.menu {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: $z-index-menu;
+  overflow: hidden;
+
+  min-height: 100%;
+  max-height: 100%;
+  width: $menu-width;
+
+  background-color: $menu-bg;
+
+  .scroll-content {
+    z-index: $z-index-menu-scroll-content;
+  }
+
+  .bar-header {
+    z-index: $z-index-menu-bar-header;
+  }
+}
+
+.menu-content {
+  @include transform(none);
+  box-shadow: $menu-side-shadow;
+}
+
+.menu-open .menu-content .pane,
+.menu-open .menu-content .scroll-content {
+  pointer-events: none;
+}
+
+.grade-b .menu-content,
+.grade-c .menu-content {
+  @include 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 {
+  @include transition-transform($menu-animation-speed ease);
+}

IonicMaterialDesign/www/lib/ionic/scss/_mixins.scss

@@ -0,0 +1,636 @@
+
+// Button Mixins
+// --------------------------------------------------
+
+@mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
+  border-color: $border-color;
+  background-color: $bg-color;
+  color: $color;
+
+  // Give desktop users something to play with
+  &:hover {
+    color: $color;
+    text-decoration: none;
+  }
+  &.active,
+  &.activated {
+    border-color: $active-border-color;
+    background-color: $active-bg-color;
+    box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
+  }
+}
+
+@mixin button-clear($color, $font-size:"") {
+  &.button-clear {
+    border-color: transparent;
+    background: none;
+    box-shadow: none;
+    color: $color;
+
+    @if $font-size != "" {
+      font-size: $font-size;
+    }
+  }
+  &.button-icon {
+    border-color: transparent;
+    background: none;
+  }
+}
+
+@mixin button-outline($color, $text-color:"") {
+  &.button-outline {
+    border-color: $color;
+    background: transparent;
+    @if $text-color == "" {
+      $text-color: $color;
+    }
+    color: $text-color;
+    &.active,
+    &.activated {
+      background-color: $color;
+      box-shadow: none;
+      color: #fff;
+    }
+  }
+}
+
+
+// Bar Mixins
+// --------------------------------------------------
+
+@mixin bar-style($bg-color, $border-color, $color) {
+  border-color: $border-color;
+  background-color: $bg-color;
+  background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
+  color: $color;
+
+  .title {
+    color: $color;
+  }
+}
+
+
+// Tab Mixins
+// --------------------------------------------------
+
+@mixin tab-style($bg-color, $border-color, $color) {
+  border-color: $border-color;
+  background-color: $bg-color;
+  background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
+  color: $color;
+}
+
+@mixin tab-badge-style($bg-color, $color) {
+  .tab-item .badge {
+    background-color: $bg-color;
+    color: $color;
+  }
+}
+
+
+// Item Mixins
+// --------------------------------------------------
+
+@mixin item-style($bg-color, $border-color, $color) {
+  border-color: $border-color;
+  background-color: $bg-color;
+  color: $color;
+}
+
+@mixin item-active-style($active-bg-color, $active-border-color) {
+  border-color: $active-border-color;
+  background-color: $active-bg-color;
+}
+
+
+// Badge Mixins
+// --------------------------------------------------
+
+@mixin badge-style($bg-color, $color) {
+  background-color: $bg-color;
+  color: $color;
+}
+
+
+// Range Mixins
+// --------------------------------------------------
+
+@mixin range-style($track-bg-color) {
+  &::-webkit-slider-thumb:before {
+    background: $track-bg-color;
+  }
+  &::-ms-fill-lower{
+    background: $track-bg-color;
+  }
+}
+
+
+// Checkbox Mixins
+// --------------------------------------------------
+
+@mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
+  & input:before,
+  & .checkbox-icon:before {
+    border-color: $off-border-color;
+  }
+
+  // what the background looks like when its checked
+  & input:checked:before,
+  & input:checked + .checkbox-icon:before {
+    background: $on-bg-color;
+    border-color: $on-border-color;
+  }
+}
+
+
+// Toggle Mixins
+// --------------------------------------------------
+
+@mixin toggle-style($on-border-color, $on-bg-color) {
+  // the track when the toggle is "on"
+  & input:checked + .track {
+    border-color: $on-border-color;
+    background-color: $on-bg-color;
+  }
+}
+@mixin toggle-small-style($on-bg-color) {
+  // the track when the toggle is "on"
+  & input:checked + .track {
+    background-color: rgba($on-bg-color, .5);
+  }
+  & input:checked + .track .handle {
+    background-color: $on-bg-color;
+  }
+}
+
+
+// Clearfix
+// --------------------------------------------------
+
+@mixin clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+
+// Placeholder text
+// --------------------------------------------------
+
+@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
+  &::-moz-placeholder { // Firefox 19+
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &::-webkit-input-placeholder {
+    color: $color;
+    // Safari placeholder margin issue
+    text-indent: $text-indent;
+  }
+}
+
+
+// Text Mixins
+// --------------------------------------------------
+
+@mixin text-size-adjust($value: none) {
+  -webkit-text-size-adjust: $value;
+     -moz-text-size-adjust: $value;
+          text-size-adjust: $value;
+}
+@mixin tap-highlight-transparent() {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent; // For some Androids
+}
+@mixin touch-callout($value: none) {
+  -webkit-touch-callout: $value;
+}
+
+
+// Font Mixins
+// --------------------------------------------------
+
+@mixin font-family-serif() {
+  font-family: $serif-font-family;
+}
+@mixin font-family-sans-serif() {
+  font-family: $sans-font-family;
+}
+@mixin font-family-monospace() {
+  font-family: $mono-font-family;
+}
+@mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  font-weight: $weight;
+  font-size: $size;
+  line-height: $line-height;
+}
+@mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  @include font-family-serif();
+  @include font-shorthand($size, $weight, $line-height);
+}
+@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  @include font-family-sans-serif();
+  @include font-shorthand($size, $weight, $line-height);
+}
+@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
+  @include font-family-monospace();
+  @include font-shorthand($size, $weight, $line-height);
+}
+@mixin font-smoothing($font-smoothing) {
+  -webkit-font-smoothing: $font-smoothing;
+          font-smoothing: $font-smoothing;
+}
+
+
+// Appearance
+// --------------------------------------------------
+
+@mixin appearance($val) {
+  -webkit-appearance: $val;
+     -moz-appearance: $val;
+          appearance: $val;
+}
+
+
+// Border Radius Mixins
+// --------------------------------------------------
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+          border-radius: $radius;
+}
+
+// Single Corner Border Radius
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-left-radius: $radius;
+          border-top-left-radius: $radius;
+}
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-right-radius: $radius;
+          border-top-right-radius: $radius;
+}
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-right-radius: $radius;
+          border-bottom-right-radius: $radius;
+}
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-left-radius: $radius;
+          border-bottom-left-radius: $radius;
+}
+
+// Single Side Border Radius
+@mixin border-top-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-top-left-radius($radius);
+}
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-right-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+
+// Box shadows
+// --------------------------------------------------
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow;
+          box-shadow: $shadow;
+}
+
+
+// Transition Mixins
+// --------------------------------------------------
+
+@mixin transition($transition...) {
+  -webkit-transition: $transition;
+          transition: $transition;
+}
+@mixin transition-delay($transition-delay) {
+  -webkit-transition-delay: $transition-delay;
+          transition-delay: $transition-delay;
+}
+@mixin transition-duration($transition-duration) {
+  -webkit-transition-duration: $transition-duration;
+          transition-duration: $transition-duration;
+}
+@mixin transition-timing-function($transition-timing) {
+   -webkit-transition-timing-function: $transition-timing;
+           transition-timing-function: $transition-timing;
+ }
+ @mixin transition-property($property) {
+  -webkit-transition-property: $property;
+          transition-property: $property;
+}
+@mixin transition-transform($properties...) {
+  // special case cuz of transform vendor prefixes
+  -webkit-transition: -webkit-transform $properties;
+          transition: transform $properties;
+}
+
+
+// Animation Mixins
+// --------------------------------------------------
+
+@mixin animation($animation) {
+ -webkit-animation: $animation;
+         animation: $animation;
+}
+@mixin animation-duration($duration) {
+ -webkit-animation-duration: $duration;
+         animation-duration: $duration;
+}
+@mixin animation-direction($direction) {
+ -webkit-animation-direction: $direction;
+         animation-direction: $direction;
+}
+@mixin animation-timing-function($animation-timing) {
+ -webkit-animation-timing-function: $animation-timing;
+         animation-timing-function: $animation-timing;
+}
+@mixin animation-fill-mode($fill-mode) {
+ -webkit-animation-fill-mode: $fill-mode;
+         animation-fill-mode: $fill-mode;
+}
+@mixin animation-name($name...) {
+ -webkit-animation-name: $name;
+         animation-name: $name;
+}
+@mixin animation-iteration-count($count) {
+ -webkit-animation-iteration-count: $count;
+         animation-iteration-count: $count;
+}
+
+
+// Transformation Mixins
+// --------------------------------------------------
+
+@mixin rotate($degrees) {
+  @include transform( rotate($degrees) );
+}
+@mixin scale($ratio) {
+  @include transform( scale($ratio) );
+}
+@mixin translate($x, $y) {
+  @include transform( translate($x, $y) );
+}
+@mixin skew($x, $y) {
+  @include transform( skew($x, $y) );
+  -webkit-backface-visibility: hidden;
+}
+@mixin translate3d($x, $y, $z) {
+  @include transform( translate3d($x, $y, $z) );
+}
+@mixin translateZ($z) {
+  @include transform( translateZ($z) );
+}
+@mixin transform($val) {
+  -webkit-transform: $val;
+          transform: $val;
+}
+
+@mixin transform-origin($left, $top) {
+  -webkit-transform-origin: $left $top;
+          transform-origin: $left $top;
+}
+
+
+// Backface visibility
+// --------------------------------------------------
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden
+
+@mixin backface-visibility($visibility){
+  -webkit-backface-visibility: $visibility;
+          backface-visibility: $visibility;
+}
+
+
+// Background clipping
+// --------------------------------------------------
+
+@mixin background-clip($clip) {
+  -webkit-background-clip: $clip;
+          background-clip: $clip;
+}
+
+
+// Background sizing
+// --------------------------------------------------
+
+@mixin background-size($size) {
+  -webkit-background-size: $size;
+          background-size: $size;
+}
+
+
+// Box sizing
+// --------------------------------------------------
+
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+
+// User select
+// --------------------------------------------------
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select;
+          user-select: $select;
+}
+
+
+// Content Columns
+// --------------------------------------------------
+
+@mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
+  -webkit-column-count: $columnCount;
+     -moz-column-count: $columnCount;
+          column-count: $columnCount;
+  -webkit-column-gap: $columnGap;
+     -moz-column-gap: $columnGap;
+          column-gap: $columnGap;
+}
+
+
+// Flexbox Mixins
+// --------------------------------------------------
+// http://philipwalton.github.io/solved-by-flexbox/
+// https://github.com/philipwalton/solved-by-flexbox
+
+@mixin display-flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@mixin display-inline-flex {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -moz-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+@mixin flex-wrap($value: nowrap) {
+  // No Webkit Box fallback.
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+  @if $value == nowrap {
+      -ms-flex-wrap: none;
+  } @else {
+      -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+  -webkit-box-flex: $fg;
+  -webkit-flex: $fg $fs $fb;
+  -moz-box-flex: $fg;
+  -moz-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit Box fallback.
+  -webkit-flex-flow: $values;
+  -moz-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+@mixin align-self($value: auto) {
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+@mixin align-content($value: stretch) {
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
+@mixin justify-content($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+
+@mixin flex-order($n) {
+  -webkit-order: $n;
+  -ms-flex-order: $n;
+  order: $n;
+  -webkit-box-ordinal-group: $n;
+}
+
+@mixin responsive-grid-break($selector, $max-width) {
+  @media (max-width: $max-width) {
+    #{$selector} {
+      -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;
+
+      .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
+        @include flex(1);
+        margin-bottom: ($grid-padding-width * 3) / 2;
+        margin-left: 0;
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_modal.scss

@@ -0,0 +1,102 @@
+
+/**
+ * Modals
+ * --------------------------------------------------
+ * Modals are independent windows that slide in from off-screen.
+ */
+
+.modal-backdrop,
+.modal-backdrop-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-modal;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-backdrop-bg {
+  pointer-events: none;
+}
+
+.modal {
+  display: block;
+  position: absolute;
+  top: 0;
+  z-index: $z-index-modal;
+  overflow: hidden;
+  min-height: 100%;
+  width: 100%;
+  background-color: $modal-bg-color;
+}
+
+@media (min-width: $modal-inset-mode-break-point) {
+  // inset mode is when the modal doesn't fill the entire
+  // display but instead is centered within a large display
+  .modal {
+    top: $modal-inset-mode-top;
+    right: $modal-inset-mode-right;
+    bottom: $modal-inset-mode-bottom;
+    left: $modal-inset-mode-left;
+    min-height: $modal-inset-mode-min-height;
+    width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
+  }
+
+  .modal.ng-leave-active {
+    bottom: 0;
+  }
+
+  // remove ios header padding from inset header
+  .platform-ios.platform-cordova .modal-wrapper .modal {
+    .bar-header:not(.bar-subheader) {
+      height: $bar-height;
+      > * {
+        margin-top: 0;
+      }
+    }
+    .tabs-top > .tabs,
+    .tabs.tabs-top {
+      top: $bar-height;
+    }
+    .has-header,
+    .bar-subheader {
+      top: $bar-height;
+    }
+    .has-subheader {
+      top: $bar-height + $bar-subheader-height;
+    }
+    .has-header.has-tabs-top {
+      top: $bar-height + $tabs-height;
+    }
+    .has-header.has-subheader.has-tabs-top {
+      top: $bar-height + $bar-subheader-height + $tabs-height;
+    }
+  }
+
+  .modal-backdrop-bg {
+    @include transition(opacity 300ms ease-in-out);
+    background-color: $modal-backdrop-bg-active;
+    opacity: 0;
+  }
+
+  .active .modal-backdrop-bg {
+    opacity: 0.5;
+  }
+}
+
+// disable clicks on all but the modal
+.modal-open {
+  pointer-events: none;
+
+  .modal,
+  .modal-backdrop {
+    pointer-events: auto;
+  }
+  // prevent clicks on modal when loading overlay is active though
+  &.loading-active {
+    .modal,
+    .modal-backdrop {
+      pointer-events: none;
+    }
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_platform.scss

@@ -0,0 +1,77 @@
+
+/**
+ * Platform
+ * --------------------------------------------------
+ * Platform specific tweaks
+ */
+
+.platform-ios.platform-cordova {
+  // iOS has a status bar which sits on top of the header.
+  // Bump down everything to make room for it. However, if
+  // if its in Cordova, and set to fullscreen, then disregard the bump.
+  &:not(.fullscreen) {
+    .bar-header:not(.bar-subheader) {
+      height: $bar-height + $ios-statusbar-height;
+
+      &.item-input-inset .item-input-wrapper {
+        margin-top: 19px !important;
+      }
+
+      > * {
+        margin-top: $ios-statusbar-height;
+      }
+    }
+    .tabs-top > .tabs,
+    .tabs.tabs-top {
+      top: $bar-height + $ios-statusbar-height;
+    }
+
+    .has-header,
+    .bar-subheader {
+      top: $bar-height + $ios-statusbar-height;
+    }
+    .has-subheader {
+      top: $bar-height + $bar-subheader-height + $ios-statusbar-height;
+    }
+    .has-header.has-tabs-top {
+      top: $bar-height + $tabs-height + $ios-statusbar-height;
+    }
+    .has-header.has-subheader.has-tabs-top {
+      top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;
+    }
+  }
+  .popover{
+    .bar-header:not(.bar-subheader) {
+      height: $bar-height;
+      &.item-input-inset .item-input-wrapper {
+        margin-top: -1px;
+      }
+      > * {
+        margin-top: 0;
+      }
+    }
+    .has-header,
+    .bar-subheader {
+      top: $bar-height;
+    }
+    .has-subheader {
+      top: $bar-height + $bar-subheader-height;
+    }
+  }
+  &.status-bar-hide {
+    // Cordova doesn't adjust the body height correctly, this makes up for it
+    margin-bottom: 20px;
+  }
+}
+
+@media (orientation:landscape) {
+  .platform-ios.platform-browser.platform-ipad {
+    position: fixed; // required for iPad 7 Safari
+  }
+}
+
+.platform-c:not(.enable-transitions) * {
+  // disable transitions on grade-c devices (Android 2)
+  -webkit-transition: none !important;
+  transition: none !important;
+}

IonicMaterialDesign/www/lib/ionic/scss/_popover.scss

@@ -0,0 +1,167 @@
+
+/**
+ * Popovers
+ * --------------------------------------------------
+ * Popovers are independent views which float over content
+ */
+
+.popover-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-popover;
+  width: 100%;
+  height: 100%;
+  background-color: $popover-backdrop-bg-inactive;
+
+  &.active {
+    background-color: $popover-backdrop-bg-active;
+  }
+}
+
+.popover {
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  z-index: $z-index-popover;
+  display: block;
+  margin-top: 12px;
+  margin-left: -$popover-width / 2;
+  height: $popover-height;
+  width: $popover-width;
+  background-color: $popover-bg-color;
+  box-shadow: $popover-box-shadow;
+  opacity: 0;
+
+  .item:first-child {
+    border-top: 0;
+  }
+
+  .item:last-child {
+    border-bottom: 0;
+  }
+
+  &.popover-bottom {
+    margin-top: -12px;
+  }
+}
+
+
+// Set popover border-radius
+.popover,
+.popover .bar-header {
+  border-radius: $popover-border-radius;
+}
+.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;
+}
+
+
+// iOS Popover
+.platform-ios {
+
+  .popover {
+    box-shadow: $popover-box-shadow-ios;
+    border-radius: $popover-border-radius-ios;
+  }
+  .popover .bar-header {
+    @include border-top-radius($popover-border-radius-ios);
+  }
+  .popover .scroll-content {
+    margin: 8px 0;
+    border-radius: $popover-border-radius-ios;
+  }
+  .popover .scroll-content.has-header {
+    margin-top: 0;
+  }
+  .popover-arrow {
+    position: absolute;
+    display: block;
+    top: -17px;
+    width: 30px;
+    height: 19px;
+    overflow: hidden;
+
+    &:after {
+      position: absolute;
+      top: 12px;
+      left: 5px;
+      width: 20px;
+      height: 20px;
+      background-color: $popover-bg-color;
+      border-radius: 3px;
+      content: '';
+      @include rotate(-45deg);
+    }
+  }
+  .popover-bottom .popover-arrow {
+    top: auto;
+    bottom: -10px;
+    &:after {
+      top: -6px;
+    }
+  }
+}
+
+
+// Android Popover
+.platform-android {
+
+  .popover {
+    margin-top: -32px;
+    background-color: $popover-bg-color-android;
+    box-shadow: $popover-box-shadow-android;
+
+    .item {
+      border-color: $popover-bg-color-android;
+      background-color: $popover-bg-color-android;
+      color: #4d4d4d;
+    }
+    &.popover-bottom {
+      margin-top: 32px;
+    }
+  }
+
+  .popover-backdrop,
+  .popover-backdrop.active {
+    background-color: transparent;
+  }
+}
+
+
+// disable clicks on all but the popover
+.popover-open {
+  pointer-events: none;
+
+  .popover,
+  .popover-backdrop {
+    pointer-events: auto;
+  }
+  // prevent clicks on popover when loading overlay is active though
+  &.loading-active {
+    .popover,
+    .popover-backdrop {
+      pointer-events: none;
+    }
+  }
+}
+
+
+// wider popover on larger viewports
+@media (min-width: $popover-large-break-point) {
+  .popover {
+    width: $popover-large-width;
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_popup.scss

@@ -0,0 +1,110 @@
+
+/**
+ * Popups
+ * --------------------------------------------------
+ */
+
+.popup-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0,0,0,0);
+
+  @include display-flex();
+  @include justify-content(center);
+  @include align-items(center);
+
+  z-index: $z-index-popup;
+
+  // Start hidden
+  visibility: hidden;
+  &.popup-showing {
+    visibility: visible;
+  }
+
+  &.popup-hidden .popup {
+    @include animation-name(scaleOut);
+    @include animation-duration($popup-leave-animation-duration);
+    @include animation-timing-function(ease-in-out);
+    @include animation-fill-mode(both);
+  }
+
+  &.active .popup {
+    @include animation-name(superScaleIn);
+    @include animation-duration($popup-enter-animation-duration);
+    @include animation-timing-function(ease-in-out);
+    @include animation-fill-mode(both);
+  }
+
+  .popup {
+    width: $popup-width;
+    max-width: 100%;
+    max-height: 90%;
+
+    border-radius: $popup-border-radius;
+    background-color: $popup-background-color;
+
+    @include display-flex();
+    @include flex-direction(column);
+  }
+
+  input,
+  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 {
+  @include display-flex();
+  @include flex-direction(row);
+  padding: 10px;
+  min-height: $popup-button-min-height + 20;
+
+  .button {
+    @include flex(1);
+    display: block;
+    min-height: $popup-button-min-height;
+    border-radius: $popup-button-border-radius;
+    line-height: $popup-button-line-height;
+
+    margin-right: 5px;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
+}
+
+.popup-open {
+  pointer-events: none;
+
+  &.modal-open .modal {
+    pointer-events: none;
+  }
+
+  .popup-backdrop, .popup {
+    pointer-events: auto;
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_progress.scss

@@ -0,0 +1,11 @@
+
+/**
+ * Progress
+ * --------------------------------------------------
+ */
+
+progress {
+  display: block;
+  margin: $progress-margin;
+  width: $progress-width;
+}

IonicMaterialDesign/www/lib/ionic/scss/_radio.scss

@@ -0,0 +1,57 @@
+
+/**
+ * Radio Button Inputs
+ * --------------------------------------------------
+ */
+
+.item-radio {
+  padding: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.item-radio .item-content {
+  /* give some room to the right for the checkmark icon */
+  padding-right: $item-padding * 4;
+}
+
+.item-radio .radio-icon {
+  /* checkmark icon will be hidden by default */
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: $z-index-item-radio;
+  visibility: hidden;
+  padding: $item-padding - 2;
+  height: 100%;
+  font-size: 24px;
+}
+
+.item-radio input {
+  /* hide any radio button inputs elements (the ugly circles) */
+  position: absolute;
+  left: -9999px;
+
+  &:checked ~ .item-content {
+    /* style the item content when its checked */
+    background: #f7f7f7;
+  }
+
+  &:checked ~ .radio-icon {
+    /* show the checkmark icon when its checked */
+    visibility: visible;
+  }
+}
+
+// Hack for Android to correctly display the checked item
+// http://timpietrusky.com/advanced-checkbox-hack
+.platform-android.grade-b .item-radio,
+.platform-android.grade-c .item-radio {
+  -webkit-animation: androidCheckedbugfix infinite 1s;
+}
+@-webkit-keyframes androidCheckedbugfix {
+  from { padding: 0; }
+  to { padding: 0; }
+}

IonicMaterialDesign/www/lib/ionic/scss/_range.scss

@@ -0,0 +1,153 @@
+
+/**
+ * Range
+ * --------------------------------------------------
+ */
+
+ .range input{
+  display: inline-block;
+  overflow: hidden;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-right: 2px;
+  padding-left: 1px;
+  width: auto;
+  height: $range-slider-height + 15;
+  outline: none;
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $range-default-track-bg), color-stop(100%, $range-default-track-bg));
+  background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%);
+  background-position: center;
+  background-size: 99% $range-track-height;
+  background-repeat: no-repeat;
+  -webkit-appearance: none;
+
+  &::-webkit-slider-thumb {
+    position: relative;
+    width: $range-slider-width;
+    height: $range-slider-height;
+    border-radius: $range-slider-border-radius;
+    background-color: $toggle-handle-off-bg-color;
+    box-shadow: $range-slider-box-shadow;
+    cursor: pointer;
+    -webkit-appearance: none;
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb:before{
+    /* what creates the colorful line on the left side of the slider */
+    position: absolute;
+    top: ($range-slider-height / 2) - ($range-track-height / 2);
+    left: -2001px;
+    width: 2000px;
+    height: $range-track-height;
+    background: $dark;
+    content: ' ';
+  }
+
+  &::-webkit-slider-thumb:after {
+    /* create a larger (but hidden) hit area */
+    position: absolute;
+    top: -15px;
+    left: -15px;
+    padding: 30px;
+    content: ' ';
+    //background: red;
+    //opacity: .5;
+  }
+   &::-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-lower{
+     height: $range-track-height;
+     background:$dark;
+   }
+   &::-ms-fill-upper {
+     height: $range-track-height;
+     background:$range-default-track-bg;
+   }
+}
+
+.range {
+  @include display-flex();
+  @include align-items(center);
+  padding: 2px 11px;
+
+  &.range-light {
+    input { @include range-style($range-light-track-bg); }
+  }
+  &.range-stable {
+    input { @include range-style($range-stable-track-bg); }
+  }
+  &.range-positive {
+    input { @include range-style($range-positive-track-bg); }
+  }
+  &.range-calm {
+    input { @include range-style($range-calm-track-bg); }
+  }
+  &.range-balanced {
+    input { @include range-style($range-balanced-track-bg); }
+  }
+  &.range-assertive {
+    input { @include range-style($range-assertive-track-bg); }
+  }
+  &.range-energized {
+    input { @include range-style($range-energized-track-bg); }
+  }
+  &.range-royal {
+    input { @include range-style($range-royal-track-bg); }
+  }
+  &.range-dark {
+    input { @include range-style($range-dark-track-bg); }
+  }
+}
+
+.range .icon {
+  @include flex(0);
+  display: block;
+  min-width: $range-icon-size;
+  text-align: center;
+  font-size: $range-icon-size;
+}
+
+.range input {
+  @include flex(1);
+  display: block;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.range-label {
+  @include 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;
+}
+
+// WP range height must be auto
+.platform-windowsphone{
+  .range input{
+    height:auto;
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_refresher.scss

@@ -0,0 +1,108 @@
+
+// Scroll refresher (for pull to refresh)
+.scroll-refresher {
+  position: absolute;
+  top: -60px;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  margin: auto;
+  height: 60px;
+  .ionic-refresher-content {
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    width: 100%;
+    color: $scroll-refresh-icon-color;
+    text-align: center;
+
+    font-size: 30px;
+
+    .text-refreshing,
+    .text-pulling {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    &.ionic-refresher-with-text {
+      bottom: 10px;
+    }
+  }
+
+  .icon-refreshing,
+  .icon-pulling {
+    width: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d;
+  }
+  .icon-pulling {
+    @include animation-name(refresh-spin-back);
+    @include animation-duration(200ms);
+    @include animation-timing-function(linear);
+    @include animation-fill-mode(none);
+    -webkit-transform: translate3d(0,0,0) rotate(0deg);
+    transform: translate3d(0,0,0) rotate(0deg);
+  }
+  .icon-refreshing,
+  .text-refreshing {
+    display: none;
+  }
+  .icon-refreshing {
+    @include animation-duration(1.5s);
+  }
+
+  &.active {
+    .icon-pulling:not(.pulling-rotation-disabled) {
+      @include animation-name(refresh-spin);
+      -webkit-transform: translate3d(0,0,0) rotate(-180deg);
+      transform: translate3d(0,0,0) rotate(-180deg);
+    }
+    &.refreshing {
+      @include transition(-webkit-transform .2s);
+      @include transition(transform .2s);
+      -webkit-transform: scale(1,1);
+      transform: scale(1,1);
+
+      .icon-pulling,
+      .text-pulling {
+        display: none;
+      }
+      .icon-refreshing,
+      .text-refreshing {
+        display: block;
+      }
+      &.refreshing-tail {
+        -webkit-transform: scale(0,0);
+        transform: scale(0,0);
+      }
+    }
+  }
+}
+.overflow-scroll > .scroll{
+  &.overscroll{
+    position:fixed;
+  }
+  -webkit-overflow-scrolling:touch;
+  width:100%;
+}
+
+@-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); }
+}

IonicMaterialDesign/www/lib/ionic/scss/_reset.scss

@@ -0,0 +1,365 @@
+
+/**
+ * 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 {
+  @include 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;
+
+  &[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"], /* 1 */
+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;
+}

IonicMaterialDesign/www/lib/ionic/scss/_scaffolding.scss

@@ -0,0 +1,269 @@
+
+/**
+ * Scaffolding
+ * --------------------------------------------------
+ */
+
+*,
+*:before,
+*:after {
+  @include box-sizing(border-box);
+}
+
+html {
+  overflow: hidden;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+}
+
+body,
+.ionic-body {
+  @include touch-callout(none);
+  @include font-smoothing(antialiased);
+  @include text-size-adjust(none);
+  @include tap-highlight-transparent();
+  @include user-select(none);
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+
+  margin: 0;
+  padding: 0;
+
+  color: $base-color;
+  word-wrap: break-word;
+  font-size: $font-size-base;
+  font-family: $font-family-base;
+  line-height: $line-height-computed;
+  text-rendering: optimizeLegibility;
+  -webkit-backface-visibility: hidden;
+  -webkit-user-drag: none;
+  -ms-content-zooming: none;
+}
+
+body.grade-b,
+body.grade-c {
+  // disable optimizeLegibility for low end devices
+  text-rendering: auto;
+}
+
+.content {
+  // used for content areas not using the content directive
+  position: relative;
+}
+
+.scroll-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+
+  // Hide the top border if any
+  margin-top: -1px;
+
+  // Prevents any distortion of lines
+  padding-top: 1px;
+  margin-bottom: -1px;
+
+  width: auto;
+  height: auto;
+}
+
+.menu .scroll-content.scroll-content-false{
+  z-index: $z-index-scroll-content-false;
+}
+
+.scroll-view {
+  position: relative;
+  display: block;
+  overflow: hidden;
+
+  // Hide the top border if any
+  margin-top: -1px;
+}
+
+/**
+ * Scroll is the scroll view component available for complex and custom
+ * scroll view functionality.
+ */
+.scroll {
+  @include user-select(none);
+  @include touch-callout(none);
+  @include text-size-adjust(none);
+  @include 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 styles
+.scroll-bar {
+  position: absolute;
+  z-index: $z-index-scroll-bar;
+}
+// hide the scroll-bar during animations
+.ng-animate .scroll-bar {
+  visibility: hidden;
+}
+.scroll-bar-h {
+  right: 2px;
+  bottom: 3px;
+  left: 2px;
+  height: 3px;
+
+  .scroll-bar-indicator {
+    height: 100%;
+  }
+}
+
+.scroll-bar-v {
+  top: 2px;
+  right: 3px;
+  bottom: 2px;
+  width: 3px;
+
+  .scroll-bar-indicator {
+    width: 100%;
+  }
+}
+.scroll-bar-indicator {
+  position: absolute;
+  border-radius: 4px;
+  background: rgba(0,0,0,0.3);
+  opacity: 1;
+  @include transition(opacity .3s linear);
+
+  &.scroll-bar-fade-out {
+    opacity: 0;
+  }
+}
+.platform-android .scroll-bar-indicator {
+  // android doesn't have rounded ends on scrollbar
+  border-radius: 0;
+}
+.grade-b .scroll-bar-indicator,
+.grade-c .scroll-bar-indicator {
+  // disable rgba background and border radius for low end devices
+  background: #aaa;
+
+  &.scroll-bar-fade-out {
+    @include transition(none);
+  }
+}
+
+ion-infinite-scroll {
+  height: 60px;
+  width: 100%;
+  display: block;
+
+  @include display-flex();
+  @include flex-direction(row);
+  @include justify-content(center);
+  @include align-items(center);
+
+  .icon {
+    color: #666666;
+    font-size: 30px;
+    color: $scroll-refresh-icon-color;
+  }
+  &:not(.active){
+    .spinner,
+    .icon:before{
+      display:none;
+    }
+  }
+}
+
+.overflow-scroll {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+
+  .scroll {
+    position: static;
+    height: 100%;
+    -webkit-transform: translate3d(0, 0, 0);   // fix iOS bug where relative children of scroller disapear while scrolling.  see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
+  }
+}
+
+
+// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
+// Note: For these to work, content must come after both bars in the markup
+/* If you change these, change platform.scss as well */
+.has-header {
+  top: $bar-height;
+}
+// Force no header
+.no-header {
+  top: 0;
+}
+
+.has-subheader {
+  top: $bar-height + $bar-subheader-height;
+}
+.has-tabs-top {
+  top: $bar-height + $tabs-height;
+}
+.has-header.has-subheader.has-tabs-top {
+  top: $bar-height + $bar-subheader-height + $tabs-height;
+}
+
+.has-footer {
+  bottom: $bar-footer-height;
+}
+.has-subfooter {
+  bottom: $bar-footer-height + $bar-subfooter-height;
+}
+
+.has-tabs,
+.bar-footer.has-tabs {
+  bottom: $tabs-height;
+  &.pane{
+    bottom: $tabs-height;
+    height:auto;
+  }
+}
+
+.has-footer.has-tabs {
+  bottom: $tabs-height + $bar-footer-height;
+}
+
+// A full screen section with a solid background
+.pane {
+  @include translate3d(0,0,0);
+  @include transition-duration(0);
+  z-index: $z-index-pane;
+}
+.view {
+  z-index: $z-index-view;
+}
+.pane,
+.view {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $base-background-color;
+  overflow: hidden;
+}
+.view-container {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+}

IonicMaterialDesign/www/lib/ionic/scss/_select.scss

@@ -0,0 +1,142 @@
+
+/**
+ * Select
+ * --------------------------------------------------
+ */
+
+.item-select {
+  position: relative;
+
+  select {
+    @include appearance(none);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) $item-padding;
+    max-width: 65%;
+
+    border: none;
+    background: $item-default-bg;
+    color: #333;
+
+    // hack to hide default dropdown arrow in FF
+    text-indent: .01px;
+    text-overflow: '';
+
+    white-space: nowrap;
+    font-size: $font-size-base;
+
+    cursor: pointer;
+    direction: rtl; // right align the select text
+  }
+
+  select::-ms-expand {
+    // hide default dropdown arrow in IE
+    display: none;
+  }
+
+  option {
+    direction: ltr;
+  }
+
+  &:after {
+    position: absolute;
+    top: 50%;
+    right: $item-padding;
+    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-light {
+    select{
+      background:$item-light-bg;
+      color:$item-light-text;
+    }
+  }
+  &.item-stable {
+    select{
+      background:$item-stable-bg;
+      color:$item-stable-text;
+    }
+    &:after, .input-label{
+      color:darken($item-stable-border,30%);
+    }
+  }
+  &.item-positive {
+    select{
+      background:$item-positive-bg;
+      color:$item-positive-text;
+    }
+    &:after, .input-label{
+      color:$item-positive-text;
+    }
+  }
+  &.item-calm {
+    select{
+      background:$item-calm-bg;
+      color:$item-calm-text;
+    }
+    &:after, .input-label{
+      color:$item-calm-text;
+    }
+  }
+  &.item-assertive {
+    select{
+      background:$item-assertive-bg;
+      color:$item-assertive-text;
+    }
+    &:after, .input-label{
+      color:$item-assertive-text;
+    }
+  }
+  &.item-balanced {
+    select{
+      background:$item-balanced-bg;
+      color:$item-balanced-text;
+    }
+    &:after, .input-label{
+      color:$item-balanced-text;
+    }
+  }
+  &.item-energized  {
+    select{
+      background:$item-energized-bg;
+      color:$item-energized-text;
+    }
+    &:after, .input-label{
+      color:$item-energized-text;
+    }
+  }
+  &.item-royal {
+    select{
+      background:$item-royal-bg;
+      color:$item-royal-text;
+    }
+    &:after, .input-label{
+      color:$item-royal-text;
+    }
+  }
+  &.item-dark  {
+    select{
+      background:$item-dark-bg;
+      color:$item-dark-text;
+    }
+    &:after, .input-label{
+      color:$item-dark-text;
+    }
+  }
+}
+
+select {
+  &[multiple],
+  &[size] {
+    height: auto;
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_slide-box.scss

@@ -0,0 +1,56 @@
+
+/**
+ * Slide Box
+ * --------------------------------------------------
+ */
+
+.slider {
+  position: relative;
+  visibility: hidden;
+  // Make sure items don't scroll over ever
+  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: $z-index-slider-pager;
+  width: 100%;
+  height: 15px;
+  text-align: center;
+
+  .slider-pager-page {
+    display: inline-block;
+    margin: 0px 3px;
+    width: 15px;
+    color: #000;
+    text-decoration: none;
+
+    opacity: 0.3;
+
+    &.active {
+      @include transition(opacity 0.4s ease-in);
+      opacity: 1;
+    }
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_spinner.scss

@@ -0,0 +1,100 @@
+/**
+ * Spinners
+ * --------------------------------------------------
+ */
+
+.spinner {
+  svg {
+    width: $spinner-width;
+    height: $spinner-height;
+  }
+
+  stroke: $spinner-default-stroke;
+  fill: $spinner-default-fill;
+
+  &.spinner-light {
+    stroke: $spinner-light-stroke;
+    fill: $spinner-light-fill;
+  }
+  &.spinner-stable {
+    stroke: $spinner-stable-stroke;
+    fill: $spinner-stable-fill;
+  }
+  &.spinner-positive {
+    stroke: $spinner-positive-stroke;
+    fill: $spinner-positive-fill;
+  }
+  &.spinner-calm {
+    stroke: $spinner-calm-stroke;
+    fill: $spinner-calm-fill;
+  }
+  &.spinner-balanced {
+    stroke: $spinner-balanced-stroke;
+    fill: $spinner-balanced-fill;
+  }
+  &.spinner-assertive {
+    stroke: $spinner-assertive-stroke;
+    fill: $spinner-assertive-fill;
+  }
+  &.spinner-energized {
+    stroke: $spinner-energized-stroke;
+    fill: $spinner-energized-fill;
+  }
+  &.spinner-royal {
+    stroke: $spinner-royal-stroke;
+    fill: $spinner-royal-fill;
+  }
+  &.spinner-dark {
+    stroke: $spinner-dark-stroke;
+    fill: $spinner-dark-fill;
+  }
+}
+
+.spinner-android {
+  stroke: #4b8bf4;
+}
+
+.spinner-ios,
+.spinner-ios-small {
+  stroke: #69717d;
+}
+
+.spinner-spiral {
+  .stop1 {
+    stop-color: $spinner-light-fill;
+    stop-opacity: 0;
+  }
+
+  &.spinner-light {
+    .stop1 {
+      stop-color: $spinner-default-fill;
+    }
+    .stop2 {
+      stop-color: $spinner-light-fill;
+    }
+  }
+  &.spinner-stable .stop2 {
+    stop-color: $spinner-stable-fill;
+  }
+  &.spinner-positive .stop2 {
+    stop-color: $spinner-positive-fill;
+  }
+  &.spinner-calm .stop2 {
+    stop-color: $spinner-calm-fill;
+  }
+  &.spinner-balanced .stop2 {
+    stop-color: $spinner-balanced-fill;
+  }
+  &.spinner-assertive .stop2 {
+    stop-color: $spinner-assertive-fill;
+  }
+  &.spinner-energized .stop2 {
+    stop-color: $spinner-energized-fill;
+  }
+  &.spinner-royal .stop2 {
+    stop-color: $spinner-royal-fill;
+  }
+  &.spinner-dark .stop2 {
+    stop-color: $spinner-dark-fill;
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_split-pane.scss

@@ -0,0 +1,29 @@
+
+/**
+ * Split Pane
+ * --------------------------------------------------
+ */
+
+.split-pane {
+  @include display-flex();
+  @include align-items(stretch);
+  width: 100%;
+  height: 100%;
+}
+
+.split-pane-menu {
+  @include flex(0, 0, $split-pane-menu-width);
+
+  overflow-y: auto;
+  width: $split-pane-menu-width;
+  height: 100%;
+  border-right: 1px solid $split-pane-menu-border-color;
+
+  @media all and (max-width: 568px) {
+    border-right: none;
+  }
+}
+
+.split-pane-content {
+  @include flex(1, 0, auto);
+}

IonicMaterialDesign/www/lib/ionic/scss/_tabs.scss

@@ -0,0 +1,521 @@
+/**
+ * Tabs
+ * --------------------------------------------------
+ * A navigation bar with any number of tab items supported.
+ */
+
+.tabs {
+  @include display-flex();
+  @include flex-direction(horizontal);
+  @include justify-content(center);
+  @include translate3d(0,0,0);
+
+  @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
+  @include tab-badge-style($tabs-default-text, $tabs-default-bg);
+
+  position: absolute;
+  bottom: 0;
+
+  z-index: $z-index-tabs;
+
+  width: 100%;
+  height: $tabs-height;
+
+  border-style: solid;
+  border-top-width: 1px;
+
+  background-size: 0;
+  line-height: $tabs-height;
+
+  @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) {
+    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 {
+  @include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text);
+  @include tab-badge-style($tabs-light-text, $tabs-light-bg);
+}
+.tabs-stable > .tabs,
+.tabs.tabs-stable {
+  @include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text);
+  @include tab-badge-style($tabs-stable-text, $tabs-stable-bg);
+}
+.tabs-positive > .tabs,
+.tabs.tabs-positive {
+  @include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text);
+  @include tab-badge-style($tabs-positive-text, $tabs-positive-bg);
+}
+.tabs-calm > .tabs,
+.tabs.tabs-calm {
+  @include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text);
+  @include tab-badge-style($tabs-calm-text, $tabs-calm-bg);
+}
+.tabs-assertive > .tabs,
+.tabs.tabs-assertive {
+  @include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text);
+  @include tab-badge-style($tabs-assertive-text, $tabs-assertive-bg);
+}
+.tabs-balanced > .tabs,
+.tabs.tabs-balanced {
+  @include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text);
+  @include tab-badge-style($tabs-balanced-text, $tabs-balanced-bg);
+}
+.tabs-energized > .tabs,
+.tabs.tabs-energized {
+  @include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text);
+  @include tab-badge-style($tabs-energized-text, $tabs-energized-bg);
+}
+.tabs-royal > .tabs,
+.tabs.tabs-royal {
+  @include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text);
+  @include tab-badge-style($tabs-royal-text, $tabs-royal-bg);
+}
+.tabs-dark > .tabs,
+.tabs.tabs-dark {
+  @include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text);
+  @include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
+}
+
+@mixin tabs-striped($style, $color, $background) {
+  &.#{$style} {
+    .tabs{
+      background-color: $background;
+    }
+    .tab-item {
+      color: rgba($color, $tabs-striped-off-opacity);
+      opacity: 1;
+      .badge{
+        opacity:$tabs-striped-off-opacity;
+      }
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        margin-top: -$tabs-striped-border-width;
+        color: $color;
+        border-style: solid;
+        border-width: $tabs-striped-border-width 0 0 0;
+        border-color: $color;
+      }
+    }
+  }
+  &.tabs-top{
+    .tab-item {
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        .badge {
+          top: 4%;
+        }
+      }
+    }
+  }
+}
+
+@mixin tabs-background($style, $color, $border-color) {
+  .#{$style} {
+    .tabs,
+    &> .tabs{
+      background-color: $color;
+      background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
+      border-color: $border-color;
+    }
+  }
+}
+
+@mixin tabs-striped-background($style, $color) {
+  &.#{$style} {
+    .tabs {
+      background-color: $color;
+      background-image:none;
+    }
+  }
+}
+
+@mixin tabs-color($style, $color) {
+  .#{$style} {
+    .tab-item {
+      color: rgba($color, $tabs-off-opacity);
+      opacity: 1;
+      .badge{
+        opacity:$tabs-off-opacity;
+      }
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        color: $color;
+        border: 0 solid $color;
+        .badge{
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+@mixin tabs-striped-color($style, $color) {
+  &.#{$style} {
+    .tab-item {
+      color: rgba($color, $tabs-striped-off-opacity);
+      opacity: 1;
+      .badge{
+        opacity:$tabs-striped-off-opacity;
+      }
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        margin-top: -$tabs-striped-border-width;
+        color: $color;
+        border: 0 solid $color;
+        border-top-width: $tabs-striped-border-width;
+        .badge{
+          top:$tabs-striped-border-width;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+.tabs-striped {
+  .tabs {
+    background-color: white;
+    background-image: none;
+    border: none;
+    border-bottom: 1px solid #ddd;
+    padding-top: $tabs-striped-border-width;
+  }
+  .tab-item {
+    // default android tab style
+    &.tab-item-active,
+    &.active,
+    &.activated {
+      margin-top: -$tabs-striped-border-width;
+      border-style: solid;
+      border-width: $tabs-striped-border-width 0 0 0;
+      border-color: $dark;
+      .badge{
+        top:$tabs-striped-border-width;
+        opacity: 1;
+      }
+    }
+  }
+  @include tabs-striped('tabs-light', $dark, $light);
+  @include tabs-striped('tabs-stable', $dark, $stable);
+  @include tabs-striped('tabs-positive', $light, $positive);
+  @include tabs-striped('tabs-calm', $light, $calm);
+  @include tabs-striped('tabs-assertive', $light, $assertive);
+  @include tabs-striped('tabs-balanced', $light, $balanced);
+  @include tabs-striped('tabs-energized', $light, $energized);
+  @include tabs-striped('tabs-royal', $light, $royal);
+  @include tabs-striped('tabs-dark', $light, $dark);
+
+  // doing this twice so striped tabs styles don't override specific bg and color vals
+  @include tabs-striped-background('tabs-background-light', $light);
+  @include tabs-striped-background('tabs-background-stable', $stable);
+  @include tabs-striped-background('tabs-background-positive', $positive);
+  @include tabs-striped-background('tabs-background-calm', $calm);
+  @include tabs-striped-background('tabs-background-assertive', $assertive);
+  @include tabs-striped-background('tabs-background-balanced', $balanced);
+  @include tabs-striped-background('tabs-background-energized',$energized);
+  @include tabs-striped-background('tabs-background-royal', $royal);
+  @include tabs-striped-background('tabs-background-dark', $dark);
+
+  @include tabs-striped-color('tabs-color-light', $light);
+  @include tabs-striped-color('tabs-color-stable', $stable);
+  @include tabs-striped-color('tabs-color-positive', $positive);
+  @include tabs-striped-color('tabs-color-calm', $calm);
+  @include tabs-striped-color('tabs-color-assertive', $assertive);
+  @include tabs-striped-color('tabs-color-balanced', $balanced);
+  @include tabs-striped-color('tabs-color-energized',$energized);
+  @include tabs-striped-color('tabs-color-royal', $royal);
+  @include tabs-striped-color('tabs-color-dark', $dark);
+
+}
+
+@include tabs-background('tabs-background-light', $light, $bar-light-border);
+@include tabs-background('tabs-background-stable', $stable, $bar-stable-border);
+@include tabs-background('tabs-background-positive', $positive, $bar-positive-border);
+@include tabs-background('tabs-background-calm', $calm, $bar-calm-border);
+@include tabs-background('tabs-background-assertive', $assertive, $bar-assertive-border);
+@include tabs-background('tabs-background-balanced', $balanced, $bar-balanced-border);
+@include tabs-background('tabs-background-energized',$energized, $bar-energized-border);
+@include tabs-background('tabs-background-royal', $royal, $bar-royal-border);
+@include tabs-background('tabs-background-dark', $dark, $bar-dark-border);
+
+@include tabs-color('tabs-color-light', $light);
+@include tabs-color('tabs-color-stable', $stable);
+@include tabs-color('tabs-color-positive', $positive);
+@include tabs-color('tabs-color-calm', $calm);
+@include tabs-color('tabs-color-assertive', $assertive);
+@include tabs-color('tabs-color-balanced', $balanced);
+@include tabs-color('tabs-color-energized',$energized);
+@include tabs-color('tabs-color-royal', $royal);
+@include tabs-color('tabs-color-dark', $dark);
+
+@mixin tabs-standard-color($style, $color, $off-color:$dark) {
+  &.#{$style} {
+    .tab-item {
+      color: $off-color;
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        color: $color;
+      }
+    }
+  }
+}
+
+ion-tabs {
+  @include tabs-standard-color('tabs-color-active-light', $light, $dark);
+  @include tabs-standard-color('tabs-color-active-stable', $stable, $dark);
+  @include tabs-standard-color('tabs-color-active-positive', $positive, $dark);
+  @include tabs-standard-color('tabs-color-active-calm', $calm, $dark);
+  @include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark);
+  @include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark);
+  @include tabs-standard-color('tabs-color-active-energized',$energized, $dark);
+  @include tabs-standard-color('tabs-color-active-royal', $royal, $dark);
+  @include tabs-standard-color('tabs-color-active-dark', $dark, $light);
+}
+
+.tabs-top {
+  &.tabs-striped {
+    padding-bottom:0;
+    .tab-item{
+      background: transparent;
+      // animate the top bar, leave bottom for platform consistency
+      -webkit-transition: color .1s ease;
+      -moz-transition: color .1s ease;
+      -ms-transition: color .1s ease;
+      -o-transition: color .1s ease;
+      transition: color .1s ease;
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        margin-top: $tabs-striped-border-width - 1px;
+        border-width: 0px 0px $tabs-striped-border-width 0px !important;
+        border-style: solid;
+        > .badge, > i{
+          margin-top: -$tabs-striped-border-width + 1px;
+        }
+      }
+      .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;
+      }
+    }
+   &:not(.tabs-icon-left):not(.tabs-icon-top){
+       .tab-item{
+          &.tab-item-active,
+          &.active,
+          &.activated {
+             .tab-title, i{
+            display:block;
+            margin-top: -$tabs-striped-border-width + 1px;
+          }
+        }
+      }
+    }
+    &.tabs-icon-left{
+       .tab-item{
+          margin-top: 1px;
+          &.tab-item-active,
+          &.active,
+          &.activated {
+            .tab-title, 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: $bar-height;
+  padding-top: 0;
+  background-position: bottom;
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  .tab-item {
+    &.tab-item-active,
+    &.active,
+    &.activated {
+      .badge {
+        top: 4%;
+      }
+    }
+  }
+}
+.tabs-top ~ .bar-header {
+  border-bottom-width: 0;
+}
+
+.tab-item {
+  @include flex(1);
+  display: block;
+  overflow: hidden;
+
+  max-width: $tab-item-max-width;
+  height: 100%;
+
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  font-weight: 400;
+  font-size: $tabs-text-font-size;
+  font-family: $font-family-sans-serif;
+
+  opacity: 0.7;
+
+  &:hover {
+    cursor: pointer;
+  }
+  &.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: $tabs-text-font-size-side-icon;
+  line-height: $tabs-text-font-size;
+}
+
+.tab-item .icon {
+  display: block;
+  margin: 0 auto;
+  height: $tabs-icon-size;
+  font-size: $tabs-icon-size;
+}
+
+.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: $tabs-text-font-size-side-icon;
+
+  .icon, .tab-title {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: -.1em;
+
+    &:before {
+    font-size: $tabs-icon-size - 8;
+    line-height: $tabs-height;
+    }
+  }
+}
+
+.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%; // fallback
+  right: calc(50% - 26px);
+  padding: $tabs-badge-padding;
+  height: auto;
+  font-size: $tabs-badge-font-size;
+  line-height: $tabs-badge-font-size + 4;
+}
+
+
+/* Navigational tab */
+
+/* Active state for tab */
+.tab-item.tab-item-active,
+.tab-item.active,
+.tab-item.activated {
+  opacity: 1;
+
+  &.tab-item-light {
+    color: $light;
+  }
+  &.tab-item-stable {
+    color: $stable;
+  }
+  &.tab-item-positive {
+    color: $positive;
+  }
+  &.tab-item-calm {
+    color: $calm;
+  }
+  &.tab-item-assertive {
+    color: $assertive;
+  }
+  &.tab-item-balanced {
+    color: $balanced;
+  }
+  &.tab-item-energized {
+    color: $energized;
+  }
+  &.tab-item-royal {
+    color: $royal;
+  }
+  &.tab-item-dark {
+    color: $dark;
+  }
+}
+
+.item.tabs {
+  @include display-flex();
+  padding: 0;
+
+  .icon:before {
+    position: relative;
+  }
+}
+
+.tab-item.disabled,
+.tab-item[disabled] {
+  opacity: .4;
+  cursor: default;
+  pointer-events: none;
+}
+

IonicMaterialDesign/www/lib/ionic/scss/_toggle.scss

@@ -0,0 +1,198 @@
+
+/**
+ * Toggle
+ * --------------------------------------------------
+ */
+
+.item-toggle {
+  pointer-events: none;
+}
+
+.toggle {
+  // set the color defaults
+  @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
+
+  position: relative;
+  display: inline-block;
+  pointer-events: auto;
+  margin: -$toggle-hit-area-expansion;
+  padding: $toggle-hit-area-expansion;
+
+  &.dragging {
+    .handle {
+      background-color: $toggle-handle-dragging-bg-color !important;
+    }
+  }
+
+}
+
+.toggle {
+  &.toggle-light  {
+    @include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
+  }
+  &.toggle-stable  {
+    @include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
+  }
+  &.toggle-positive  {
+    @include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
+  }
+  &.toggle-calm  {
+    @include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
+  }
+  &.toggle-assertive  {
+    @include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
+  }
+  &.toggle-balanced  {
+    @include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
+  }
+  &.toggle-energized  {
+    @include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
+  }
+  &.toggle-royal  {
+    @include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
+  }
+  &.toggle-dark  {
+    @include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
+  }
+}
+
+.toggle input {
+  // hide the actual input checkbox
+  display: none;
+}
+
+/* the track appearance when the toggle is "off" */
+.toggle .track {
+  @include transition-timing-function(ease-in-out);
+  @include transition-duration($toggle-transition-duration);
+  @include transition-property((background-color, border));
+
+  display: inline-block;
+  box-sizing: border-box;
+  width: $toggle-width;
+  height: $toggle-height;
+  border: solid $toggle-border-width $toggle-off-border-color;
+  border-radius: $toggle-border-radius;
+  background-color: $toggle-off-bg-color;
+  content: ' ';
+  cursor: pointer;
+  pointer-events: none;
+}
+
+/* Fix to avoid background color bleeding */
+/* (occured 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 {
+  @include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
+  @include transition-property((background-color, transform));
+  position: absolute;
+  display: block;
+  width: $toggle-handle-width;
+  height: $toggle-handle-height;
+  border-radius: $toggle-handle-radius;
+  background-color: $toggle-handle-off-bg-color;
+  top: $toggle-border-width + $toggle-hit-area-expansion;
+  left: $toggle-border-width + $toggle-hit-area-expansion;
+  box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15);
+
+  &:before {
+    // used to create a larger (but hidden) hit area to slide the handle
+    position: absolute;
+    top: -4px;
+    left: ( ($toggle-handle-width / 2) * -1) - 8;
+    padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
+    content: " ";
+  }
+}
+
+.toggle input:checked + .track .handle {
+  // the handle when the toggle is "on"
+  @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
+  background-color: $toggle-handle-on-bg-color;
+}
+
+.item-toggle.active {
+  box-shadow: none;
+}
+
+.item-toggle,
+.item-toggle.item-complex .item-content {
+  // make sure list item content have enough padding on right to fit the toggle
+  padding-right: ($item-padding * 3) + $toggle-width;
+}
+
+.item-toggle.item-complex {
+  padding-right: 0;
+}
+
+.item-toggle .toggle {
+  // position the toggle to the right within a list item
+  position: absolute;
+  top: ($item-padding / 2) + 2;
+  right: $item-padding;
+  z-index: $z-index-item-toggle;
+}
+
+.toggle input:disabled + .track {
+  opacity: .6;
+}
+
+.toggle-small {
+
+  .track {
+    border: 0;
+    width: 34px;
+    height: 15px;
+    background: #9e9e9e;
+  }
+  input:checked + .track {
+    background: rgba(0,150,137,.5);
+  }
+  .handle {
+    top: 2px;
+    left: 4px;
+    width: 21px;
+    height: 21px;
+    box-shadow: 0 2px 5px rgba(0,0,0,.25);
+  }
+  input:checked + .track .handle {
+    @include translate3d(16px, 0, 0);
+    background: rgb(0,150,137);
+  }
+  &.item-toggle .toggle {
+    top: 19px;
+  }
+
+  .toggle-light  {
+    @include toggle-small-style($toggle-on-light-bg);
+  }
+  .toggle-stable  {
+    @include toggle-small-style($toggle-on-stable-bg);
+  }
+  .toggle-positive  {
+    @include toggle-small-style($toggle-on-positive-bg);
+  }
+  .toggle-calm  {
+    @include toggle-small-style($toggle-on-calm-bg);
+  }
+  .toggle-assertive  {
+    @include toggle-small-style($toggle-on-assertive-bg);
+  }
+  .toggle-balanced  {
+    @include toggle-small-style($toggle-on-balanced-bg);
+  }
+  .toggle-energized  {
+    @include toggle-small-style($toggle-on-energized-bg);
+  }
+  .toggle-royal  {
+    @include toggle-small-style($toggle-on-royal-bg);
+  }
+  .toggle-dark  {
+    @include toggle-small-style($toggle-on-dark-bg);
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_transitions.scss

@@ -0,0 +1,188 @@
+
+// iOS View Transitions
+// -------------------------------
+
+$ios-transition-duration:              500ms !default;
+$ios-transition-timing-function:       cubic-bezier(.36, .66, .04, 1) !default;
+$ios-transition-container-bg-color:    #000 !default;
+
+
+[nav-view-transition="ios"] {
+
+  [nav-view="entering"],
+  [nav-view="leaving"] {
+    @include transition-duration( $ios-transition-duration );
+    @include transition-timing-function( $ios-transition-timing-function );
+    -webkit-transition-property: opacity, -webkit-transform, box-shadow;
+            transition-property: opacity, transform, box-shadow;
+  }
+
+  &[nav-view-direction="forward"],
+  &[nav-view-direction="back"] {
+    background-color: $ios-transition-container-bg-color;
+  }
+
+  [nav-view="active"],
+  &[nav-view-direction="forward"] [nav-view="entering"],
+  &[nav-view-direction="back"] [nav-view="leaving"] {
+    z-index: $z-index-view-above;
+  }
+
+  &[nav-view-direction="back"] [nav-view="entering"],
+  &[nav-view-direction="forward"] [nav-view="leaving"] {
+    z-index: $z-index-view-below;
+  }
+
+}
+
+
+
+// iOS Nav Bar Transitions
+// -------------------------------
+
+[nav-bar-transition="ios"] {
+
+  .title,
+  .buttons,
+  .back-text {
+    @include transition-duration( $ios-transition-duration );
+    @include transition-timing-function( $ios-transition-timing-function );
+    -webkit-transition-property: opacity, -webkit-transform;
+            transition-property: opacity, transform;
+  }
+
+  [nav-bar="active"],
+  [nav-bar="entering"] {
+    z-index: $z-index-bar-above;
+
+   .bar {
+      background: transparent;
+    }
+  }
+
+  [nav-bar="cached"] {
+    display: block;
+
+    .header-item {
+      display: none;
+    }
+  }
+
+}
+
+
+
+// Android View Transitions
+// -------------------------------
+
+$android-transition-duration:             200ms !default;
+$android-transition-timing-function:      cubic-bezier(0.4, 0.6, 0.2, 1) !default;
+
+
+[nav-view-transition="android"] {
+
+  [nav-view="entering"],
+  [nav-view="leaving"] {
+    @include transition-duration( $android-transition-duration );
+    @include transition-timing-function( $android-transition-timing-function );
+    -webkit-transition-property: -webkit-transform;
+            transition-property: transform;
+  }
+
+  [nav-view="active"],
+  &[nav-view-direction="forward"] [nav-view="entering"],
+  &[nav-view-direction="back"] [nav-view="leaving"] {
+    z-index: $z-index-view-above;
+  }
+
+  &[nav-view-direction="back"] [nav-view="entering"],
+  &[nav-view-direction="forward"] [nav-view="leaving"] {
+    z-index: $z-index-view-below;
+  }
+
+}
+
+
+
+// Android Nav Bar Transitions
+// -------------------------------
+
+[nav-bar-transition="android"] {
+
+  .title,
+  .buttons {
+    @include transition-duration( $android-transition-duration );
+    @include transition-timing-function( $android-transition-timing-function );
+    -webkit-transition-property: opacity;
+            transition-property: opacity;
+  }
+
+  [nav-bar="active"],
+  [nav-bar="entering"] {
+    z-index: $z-index-bar-above;
+
+   .bar {
+      background: transparent;
+    }
+  }
+
+  [nav-bar="cached"] {
+    display: block;
+
+    .header-item {
+      display: none;
+    }
+  }
+
+}
+
+
+
+// Nav Swipe
+// -------------------------------
+
+[nav-swipe="fast"] {
+  [nav-view],
+  .title,
+  .buttons,
+  .back-text {
+    @include transition-duration(50ms);
+    @include transition-timing-function(linear);
+  }
+}
+
+[nav-swipe="slow"] {
+  [nav-view],
+  .title,
+  .buttons,
+  .back-text {
+    @include transition-duration(160ms);
+    @include transition-timing-function(linear);
+  }
+}
+
+
+
+// Transition Settings
+// -------------------------------
+
+[nav-view="cached"],
+[nav-bar="cached"] {
+  display: none;
+}
+
+[nav-view="stage"] {
+  opacity: 0;
+  @include transition-duration( 0 );
+}
+
+[nav-bar="stage"] {
+  .title,
+  .buttons,
+  .back-text {
+    position: absolute;
+    opacity: 0;
+    @include transition-duration(0s);
+  }
+}
+

IonicMaterialDesign/www/lib/ionic/scss/_type.scss

@@ -0,0 +1,163 @@
+
+/**
+ * Typography
+ * --------------------------------------------------
+ */
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 ($line-height-computed / 2);
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+small   { font-size: 85%; }
+cite    { font-style: normal; }
+
+
+// Alignment
+// -------------------------
+
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  color: $base-color;
+  font-weight: $headings-font-weight;
+  font-family: $headings-font-family;
+  line-height: $headings-line-height;
+
+  small {
+    font-weight: normal;
+    line-height: 1;
+  }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  margin-top: $line-height-computed;
+  margin-bottom: ($line-height-computed / 2);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  + h1, + .h1,
+  + h2, + .h2,
+  + h3, + .h3 {
+    margin-top: ($line-height-computed / 2);
+  }
+}
+
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: ($line-height-computed / 2);
+  margin-bottom: ($line-height-computed / 2);
+}
+
+h1, .h1 { font-size: floor($font-size-base * 2.60); } // ~36px
+h2, .h2 { font-size: floor($font-size-base * 2.15); } // ~30px
+h3, .h3 { font-size: ceil($font-size-base * 1.70); } // ~24px
+h4, .h4 { font-size: ceil($font-size-base * 1.25); } // ~18px
+h5, .h5 { font-size:  $font-size-base; }
+h6, .h6 { font-size: ceil($font-size-base * 0.85); } // ~12px
+
+h1 small, .h1 small { font-size: ceil($font-size-base * 1.70); } // ~24px
+h2 small, .h2 small { font-size: ceil($font-size-base * 1.25); } // ~18px
+h3 small, .h3 small,
+h4 small, .h4 small { font-size: $font-size-base; }
+
+
+// Description Lists
+// -------------------------
+
+dl {
+  margin-bottom: $line-height-computed;
+}
+dt,
+dd {
+  line-height: $line-height-base;
+}
+dt {
+  font-weight: bold;
+}
+
+
+// Blockquotes
+// -------------------------
+
+blockquote {
+  margin: 0 0 $line-height-computed;
+  padding: ($line-height-computed / 2) $line-height-computed;
+  border-left: 5px solid gray;
+  
+  p {
+    font-weight: 300;
+    font-size: ($font-size-base * 1.25);
+    line-height: 1.25;
+  }
+  
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  small {
+    display: block;
+    line-height: $line-height-base;
+    &:before {
+      content: '\2014 \00A0';// EM DASH, NBSP;
+    }
+  }
+}
+
+
+// Quotes
+// -------------------------
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+
+// Addresses
+// -------------------------
+
+address {
+  display: block;
+  margin-bottom: $line-height-computed;
+  font-style: normal;
+  line-height: $line-height-base;
+}
+
+
+// Links
+// -------------------------
+
+a.subdued {
+  padding-right: 10px;
+  color: #888;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+  &:last-child {
+    padding-right: 0;
+  }
+}

IonicMaterialDesign/www/lib/ionic/scss/_util.scss

@@ -0,0 +1,296 @@
+
+/**
+ * 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 {
+  // used to prevent the browser from doing its native behavior. this doesnt
+  // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
+
+  @include user-select(none);
+  @include touch-callout(none);
+  @include tap-highlight-transparent();
+
+  -webkit-user-drag: none;
+
+  -ms-touch-action: none;
+  -ms-content-zooming: none;
+}
+
+// Fill the screen to block clicks (a better pointer-events: none) for the body
+// to avoid full-page reflows and paints which can cause flickers
+.click-block {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  z-index: $z-index-click-block;
+  @include translate3d(0, 0, 0);
+  overflow: hidden;
+}
+.click-block-hide {
+  @include translate3d(-9999px, 0, 0);
+}
+
+.no-resize {
+  resize: none;
+}
+
+.block {
+  display: block;
+  clear: both;
+  &:after {
+    display: block;
+    visibility: hidden;
+    clear: both;
+    height: 0;
+    content: ".";
+  }
+}
+
+.full-image {
+  width: 100%;
+}
+
+.clearfix {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    // Fixes Opera/contenteditable bug:
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+/**
+ * Content Padding
+ * --------------------------------------------------
+ */
+
+.padding {
+  padding: $content-padding;
+}
+
+.padding-top,
+.padding-vertical {
+  padding-top: $content-padding;
+}
+
+.padding-right,
+.padding-horizontal {
+  padding-right: $content-padding;
+}
+
+.padding-bottom,
+.padding-vertical {
+  padding-bottom: $content-padding;
+}
+
+.padding-left,
+.padding-horizontal {
+  padding-left: $content-padding;
+}
+
+
+/**
+ * Scrollable iFrames
+ * --------------------------------------------------
+ */
+
+.iframe-wrapper {
+  position: fixed;
+  -webkit-overflow-scrolling: touch;
+  overflow: scroll;
+
+  iframe {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+
+/**
+ * Rounded
+ * --------------------------------------------------
+ */
+
+.rounded {
+  border-radius: $border-radius-base;
+}
+
+
+/**
+ * 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: $light;
+}
+.light-bg {
+  background-color: $light;
+}
+.light-border {
+  border-color: $button-light-border;
+}
+
+.stable, a.stable {
+  color: $stable;
+}
+.stable-bg {
+  background-color: $stable;
+}
+.stable-border {
+  border-color: $button-stable-border;
+}
+
+.positive, a.positive {
+  color: $positive;
+}
+.positive-bg {
+  background-color: $positive;
+}
+.positive-border {
+  border-color: $button-positive-border;
+}
+
+.calm, a.calm {
+  color: $calm;
+}
+.calm-bg {
+  background-color: $calm;
+}
+.calm-border {
+  border-color: $button-calm-border;
+}
+
+.assertive, a.assertive {
+  color: $assertive;
+}
+.assertive-bg {
+  background-color: $assertive;
+}
+.assertive-border {
+  border-color: $button-assertive-border;
+}
+
+.balanced, a.balanced {
+  color: $balanced;
+}
+.balanced-bg {
+  background-color: $balanced;
+}
+.balanced-border {
+  border-color: $button-balanced-border;
+}
+
+.energized, a.energized {
+  color: $energized;
+}
+.energized-bg {
+  background-color: $energized;
+}
+.energized-border {
+  border-color: $button-energized-border;
+}
+
+.royal, a.royal {
+  color: $royal;
+}
+.royal-bg {
+  background-color: $royal;
+}
+.royal-border {
+  border-color: $button-royal-border;
+}
+
+.dark, a.dark {
+  color: $dark;
+}
+.dark-bg {
+  background-color: $dark;
+}
+.dark-border {
+  border-color: $button-dark-border;
+}
+
+[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; //make sure it's above the after-container
+}
+.collection-repeat-after-container {
+  z-index: 0;
+  display: block;
+
+  /* when scrolling horizontally, make sure the after container doesn't take up 100% width */
+  &.horizontal {
+    display: inline-block;
+  }
+}
+
+// ng-show fix for windows phone
+// https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
+.x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
+  display: none !important;
+}

IonicMaterialDesign/www/lib/ionic/scss/_variables.scss

@@ -0,0 +1,760 @@
+
+// Colors
+// -------------------------------
+
+$light:                           #fff !default;
+$stable:                          #f8f8f8 !default;
+$positive:                        #387ef5 !default;
+$calm:                            #11c1f3 !default;
+$balanced:                        #33cd5f !default;
+$energized:                       #ffc900 !default;
+$assertive:                       #ef473a !default;
+$royal:                           #886aea !default;
+$dark:                            #444 !default;
+
+
+// Base
+// -------------------------------
+
+$font-family-sans-serif:          "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
+$font-family-light-sans-serif:    "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
+$font-family-serif:               serif !default;
+$font-family-monospace:           monospace !default;
+
+$font-family-base:                $font-family-sans-serif !default;
+$font-size-base:                  14px !default;
+$font-size-large:                 18px !default;
+$font-size-small:                 11px !default;
+
+$line-height-base:                1.428571429 !default; // 20/14
+$line-height-computed:            floor($font-size-base * $line-height-base) !default; // ~20px
+$line-height-large:               1.33 !default;
+$line-height-small:               1.5 !default;
+
+$headings-font-family:            $font-family-base !default;
+$headings-font-weight:            500 !default;
+$headings-line-height:            1.2 !default;
+
+$base-background-color:           #fff !default;
+$base-color:                      #000 !default;
+
+$link-color:                      $positive !default;
+$link-hover-color:                darken($link-color, 15%) !default;
+
+$content-padding:                 10px !default;
+
+$padding-base-vertical:           6px !default;
+$padding-base-horizontal:         12px !default;
+
+$padding-large-vertical:          10px !default;
+$padding-large-horizontal:        16px !default;
+
+$padding-small-vertical:          5px !default;
+$padding-small-horizontal:        10px !default;
+
+$border-radius-base:              4px !default;
+$border-radius-large:             6px !default;
+$border-radius-small:             3px !default;
+
+
+// Content
+// -------------------------------
+
+$scroll-refresh-icon-color:       #666666 !default;
+
+
+// Buttons
+// -------------------------------
+
+$button-color:                    #222 !default;
+$button-block-margin:             10px !default;
+$button-clear-padding:            6px !default;
+$button-border-radius:            2px !default;
+$button-border-width:             1px !default;
+
+$button-font-size:                16px !default;
+$button-height:                   42px !default;
+$button-padding:                  12px !default;
+$button-icon-size:                24px !default;
+
+$button-large-font-size:          20px !default;
+$button-large-height:             54px !default;
+$button-large-padding:            16px !default;
+$button-large-icon-size:          32px !default;
+
+$button-small-font-size:          12px !default;
+$button-small-height:             28px !default;
+$button-small-padding:            4px !default;
+$button-small-icon-size:          16px !default;
+
+$button-bar-button-font-size:     13px !default;
+$button-bar-button-height:        32px !default;
+$button-bar-button-padding:       8px !default;
+$button-bar-button-icon-size:     20px !default;
+
+$button-light-bg:                 $light !default;
+$button-light-text:               #444 !default;
+$button-light-border:             #ddd !default;
+$button-light-active-bg:          #fafafa !default;
+$button-light-active-border:      #ccc !default;
+
+$button-stable-bg:                $stable !default;
+$button-stable-text:              #444 !default;
+$button-stable-border:            #b2b2b2 !default;
+$button-stable-active-bg:         #e5e5e5 !default;
+$button-stable-active-border:     #a2a2a2 !default;
+
+$button-positive-bg:              $positive !default;
+$button-positive-text:            #fff !default;
+$button-positive-border:          darken($positive, 10%) !default;
+$button-positive-active-bg:       darken($positive, 10%) !default;
+$button-positive-active-border:   darken($positive, 10%) !default;
+
+$button-calm-bg:                  $calm !default;
+$button-calm-text:                #fff !default;
+$button-calm-border:              darken($calm, 10%) !default;
+$button-calm-active-bg:           darken($calm, 10%) !default;
+$button-calm-active-border:       darken($calm, 10%) !default;
+
+$button-assertive-bg:             $assertive !default;
+$button-assertive-text:           #fff !default;
+$button-assertive-border:         darken($assertive, 10%) !default;
+$button-assertive-active-bg:      darken($assertive, 10%) !default;
+$button-assertive-active-border:  darken($assertive, 10%) !default;
+
+$button-balanced-bg:              $balanced !default;
+$button-balanced-text:            #fff !default;
+$button-balanced-border:          darken($balanced, 10%) !default;
+$button-balanced-active-bg:       darken($balanced, 10%) !default;
+$button-balanced-active-border:   darken($balanced, 10%) !default;
+
+$button-energized-bg:             $energized !default;
+$button-energized-text:           #fff !default;
+$button-energized-border:         darken($energized, 5%) !default;
+$button-energized-active-bg:      darken($energized, 5%) !default;
+$button-energized-active-border:  darken($energized, 5%) !default;
+
+$button-royal-bg:                 $royal !default;
+$button-royal-text:               #fff !default;
+$button-royal-border:             darken($royal, 8%) !default;
+$button-royal-active-bg:          darken($royal, 8%) !default;
+$button-royal-active-border:      darken($royal, 8%) !default;
+
+$button-dark-bg:                  $dark !default;
+$button-dark-text:                #fff !default;
+$button-dark-border:              #111 !default;
+$button-dark-active-bg:           #262626 !default;
+$button-dark-active-border:       #000 !default;
+
+$button-default-bg:               $button-stable-bg !default;
+$button-default-text:             $button-stable-text !default;
+$button-default-border:           $button-stable-border !default;
+$button-default-active-bg:        $button-stable-active-bg !default;
+$button-default-active-border:    $button-stable-active-border !default;
+
+
+// Bars
+// -------------------------------
+
+$bar-height:                      44px !default;
+$bar-title-font-size:             17px !default;
+$bar-padding-portrait:            5px !default;
+$bar-padding-landscape:           5px !default;
+$bar-transparency:                1 !default;
+
+$bar-footer-height:               $bar-height !default;
+$bar-subheader-height:            $bar-height !default;
+$bar-subfooter-height:            $bar-height !default;
+
+$bar-light-bg:                    rgba($button-light-bg, $bar-transparency) !default;
+$bar-light-text:                  $button-light-text !default;
+$bar-light-border:                $button-light-border !default;
+$bar-light-active-bg:             $button-light-active-bg !default;
+$bar-light-active-border:         $button-light-active-border !default;
+
+$bar-stable-bg:                   rgba($button-stable-bg, $bar-transparency) !default;
+$bar-stable-text:                 $button-stable-text !default;
+$bar-stable-border:               $button-stable-border !default;
+$bar-stable-active-bg:            $button-stable-active-bg !default;
+$bar-stable-active-border:        $button-stable-active-border !default;
+
+$bar-positive-bg:                 rgba($button-positive-bg, $bar-transparency) !default;
+$bar-positive-text:               $button-positive-text !default;
+$bar-positive-border:             $button-positive-border !default;
+$bar-positive-active-bg:          $button-positive-active-bg !default;
+$bar-positive-active-border:      $button-positive-active-border !default;
+
+$bar-calm-bg:                     rgba($button-calm-bg, $bar-transparency) !default;
+$bar-calm-text:                   $button-calm-text !default;
+$bar-calm-border:                 $button-calm-border !default;
+$bar-calm-active-bg:              $button-calm-active-bg !default;
+$bar-calm-active-border:          $button-calm-active-border !default;
+
+$bar-assertive-bg:                rgba($button-assertive-bg, $bar-transparency) !default;
+$bar-assertive-text:              $button-assertive-text !default;
+$bar-assertive-border:            $button-assertive-border !default;
+$bar-assertive-active-bg:         $button-assertive-active-bg !default;
+$bar-assertive-active-border:     $button-assertive-active-border !default;
+
+$bar-balanced-bg:                 rgba($button-balanced-bg, $bar-transparency) !default;
+$bar-balanced-text:               $button-balanced-text !default;
+$bar-balanced-border:             $button-balanced-border !default;
+$bar-balanced-active-bg:          $button-balanced-active-bg !default;
+$bar-balanced-active-border:      $button-balanced-active-border !default;
+
+$bar-energized-bg:                rgba($button-energized-bg, $bar-transparency) !default;
+$bar-energized-text:              $button-energized-text !default;
+$bar-energized-border:            $button-energized-border !default;
+$bar-energized-active-bg:         $button-energized-active-bg !default;
+$bar-energized-active-border:     $button-energized-active-border !default;
+
+$bar-royal-bg:                    rgba($button-royal-bg, $bar-transparency) !default;
+$bar-royal-text:                  $button-royal-text !default;
+$bar-royal-border:                $button-royal-border !default;
+$bar-royal-active-bg:             $button-royal-active-bg !default;
+$bar-royal-active-border:         $button-royal-active-border !default;
+
+$bar-dark-bg:                     rgba($button-dark-bg, $bar-transparency) !default;
+$bar-dark-text:                   $button-dark-text !default;
+$bar-dark-border:                 $button-dark-border !default;
+$bar-dark-active-bg:              $button-dark-active-bg !default;
+$bar-dark-active-border:          $button-dark-active-border !default;
+
+$bar-default-bg:                  $bar-light-bg !default;
+$bar-default-text:                $bar-light-text !default;
+$bar-default-border:              $bar-light-border !default;
+$bar-default-active-bg:           $bar-light-active-bg !default;
+$bar-default-active-border:       $bar-light-active-border !default;
+
+
+// Tabs
+// -------------------------------
+
+$tabs-height:                     49px !default;
+$tabs-text-font-size:             14px !default;
+$tabs-text-font-size-side-icon:   10px !default;
+$tabs-icon-size:                  32px !default;
+$tabs-badge-padding:              1px 6px !default;
+$tabs-badge-font-size:            12px !default;
+
+$tabs-light-bg:                   $button-light-bg !default;
+$tabs-light-border:               $button-light-border !default;
+$tabs-light-text:                 $button-light-text !default;
+
+$tabs-stable-bg:                  $button-stable-bg !default;
+$tabs-stable-border:              $button-stable-border !default;
+$tabs-stable-text:                $button-stable-text !default;
+
+$tabs-positive-bg:                $button-positive-bg !default;
+$tabs-positive-border:            $button-positive-border !default;
+$tabs-positive-text:              $button-positive-text !default;
+
+$tabs-calm-bg:                    $button-calm-bg !default;
+$tabs-calm-border:                $button-calm-border !default;
+$tabs-calm-text:                  $button-calm-text !default;
+
+$tabs-assertive-bg:               $button-assertive-bg !default;
+$tabs-assertive-border:           $button-assertive-border !default;
+$tabs-assertive-text:             $button-assertive-text !default;
+
+$tabs-balanced-bg:                $button-balanced-bg !default;
+$tabs-balanced-border:            $button-balanced-border !default;
+$tabs-balanced-text:              $button-balanced-text !default;
+
+$tabs-energized-bg:               $button-energized-bg !default;
+$tabs-energized-border:           $button-energized-border !default;
+$tabs-energized-text:             $button-energized-text !default;
+
+$tabs-royal-bg:                   $button-royal-bg !default;
+$tabs-royal-border:               $button-royal-border !default;
+$tabs-royal-text:                 $button-royal-text !default;
+
+$tabs-dark-bg:                    $button-dark-bg !default;
+$tabs-dark-border:                $button-dark-border !default;
+$tabs-dark-text:                  $button-dark-text !default;
+
+$tabs-default-bg:                 $tabs-stable-bg !default;
+$tabs-default-border:             $tabs-stable-border !default;
+$tabs-default-text:               $tabs-stable-text !default;
+
+$tab-item-max-width:              150px !default;
+
+$tabs-off-opacity:                0.4 !default;
+$tabs-striped-off-opacity:        $tabs-off-opacity !default;
+$tabs-striped-off-color:          #000 !default;
+$tabs-striped-border-width:       2px !default;
+
+
+// Items
+// -------------------------------
+
+$item-font-size:                  16px !default;
+$item-border-width:               1px !default;
+$item-padding:                    16px !default;
+
+$item-button-font-size:           18px !default;
+$item-button-line-height:         32px !default;
+$item-icon-font-size:             32px !default;
+$item-icon-fill-font-size:        28px !default;
+
+$item-icon-accessory-color:       #ccc !default;
+$item-icon-accessory-font-size:   16px !default;
+
+$item-avatar-width:               40px !default;
+$item-avatar-height:              40px !default;
+$item-avatar-border-radius:       50% !default;
+
+$item-thumbnail-width:            80px !default;
+$item-thumbnail-height:           80px !default;
+$item-thumbnail-margin:           10px !default;
+
+$item-divider-bg:                 #f5f5f5 !default;
+$item-divider-color:              #222 !default;
+$item-divider-padding:            5px 15px !default;
+
+$item-light-bg:                   $button-light-bg !default;
+$item-light-border:               $button-light-border !default;
+$item-light-text:                 $button-light-text !default;
+$item-light-active-bg:            $button-light-active-bg !default;
+$item-light-active-border:        $button-light-active-border !default;
+
+$item-stable-bg:                  $button-stable-bg !default;
+$item-stable-border:              $button-stable-border !default;
+$item-stable-text:                $button-stable-text !default;
+$item-stable-active-bg:           $button-stable-active-bg !default;
+$item-stable-active-border:       $button-stable-active-border !default;
+
+$item-positive-bg:                $button-positive-bg !default;
+$item-positive-border:            $button-positive-border !default;
+$item-positive-text:              $button-positive-text !default;
+$item-positive-active-bg:         $button-positive-active-bg !default;
+$item-positive-active-border:     $button-positive-active-border !default;
+
+$item-calm-bg:                    $button-calm-bg !default;
+$item-calm-border:                $button-calm-border !default;
+$item-calm-text:                  $button-calm-text !default;
+$item-calm-active-bg:             $button-calm-active-bg !default;
+$item-calm-active-border:         $button-calm-active-border !default;
+
+$item-assertive-bg:               $button-assertive-bg !default;
+$item-assertive-border:           $button-assertive-border !default;
+$item-assertive-text:             $button-assertive-text !default;
+$item-assertive-active-bg:        $button-assertive-active-bg !default;
+$item-assertive-active-border:    $button-assertive-active-border !default;
+
+$item-balanced-bg:                $button-balanced-bg !default;
+$item-balanced-border:            $button-balanced-border !default;
+$item-balanced-text:              $button-balanced-text !default;
+$item-balanced-active-bg:         $button-balanced-active-bg !default;
+$item-balanced-active-border:     $button-balanced-active-border !default;
+
+$item-energized-bg:               $button-energized-bg !default;
+$item-energized-border:           $button-energized-border !default;
+$item-energized-text:             $button-energized-text !default;
+$item-energized-active-bg:        $button-energized-active-bg !default;
+$item-energized-active-border:    $button-energized-active-border !default;
+
+$item-royal-bg:                   $button-royal-bg !default;
+$item-royal-border:               $button-royal-border !default;
+$item-royal-text:                 $button-royal-text !default;
+$item-royal-active-bg:            $button-royal-active-bg !default;
+$item-royal-active-border:        $button-royal-active-border !default;
+
+$item-dark-bg:                    $button-dark-bg !default;
+$item-dark-border:                $button-dark-border !default;
+$item-dark-text:                  $button-dark-text !default;
+$item-dark-active-bg:             $button-dark-active-bg !default;
+$item-dark-active-border:         $button-dark-active-border !default;
+
+$item-default-bg:                 $item-light-bg !default;
+$item-default-border:             $item-light-border !default;
+$item-default-text:               $item-light-text !default;
+$item-default-active-bg:          #D9D9D9 !default;
+$item-default-active-border:      $item-light-active-border !default;
+
+
+// Item Editing
+// -------------------------------
+
+$item-edit-transition-duration:   250ms !default;
+$item-edit-transition-function:   ease-in-out !default;
+
+$item-remove-transition-duration:   300ms !default;
+$item-remove-transition-function:   ease-in !default;
+$item-remove-descendents-transition-function:  cubic-bezier(.25,.81,.24,1) !default;
+
+$item-left-edit-left:             8px !default;  // item's left side edit's "left" property
+
+$item-right-edit-open-width:      50px !default;
+$item-left-edit-open-width:       50px !default;
+
+$item-delete-icon-size:           24px !default;
+$item-delete-icon-color:          $assertive !default;
+
+$item-reorder-icon-size:          32px !default;
+$item-reorder-icon-color:         $dark !default;
+
+
+// Lists
+// -------------------------------
+
+$list-header-bg:                  transparent !default;
+$list-header-color:               #222 !default;
+$list-header-padding:             5px 15px !default;
+$list-header-margin-top:          20px !default;
+
+
+// Cards
+// -------------------------------
+
+$card-header-bg:                  #F5F5F5 !default;
+$card-body-bg:                    #fff !default;
+$card-footer-bg:                  #F5F5F5 !default;
+
+$card-padding:                    10px !default;
+$card-border-width:               1px !default;
+
+$card-border-color:               #ccc !default;
+$card-border-radius:              2px !default;
+$card-box-shadow:                 0 1px 3px rgba(0, 0, 0, .3) !default;
+
+
+// Forms
+// -------------------------------
+
+$input-height-base:               ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+$input-height-large:              (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+$input-height-small:              (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+$input-bg:                        $light !default;
+$input-bg-disabled:               $stable !default;
+
+$input-color:                     #111 !default;
+$input-border:                    $item-default-border !default;
+$input-border-width:              $item-border-width !default;
+$input-label-color:               $dark !default;
+$input-color-placeholder:         lighten($dark, 40%) !default;
+
+
+// Progress
+// -------------------------------
+
+$progress-width:                  100% !default;
+$progress-margin:                 15px auto !default;
+
+
+// Toggle
+// -------------------------------
+
+$toggle-width:                    51px !default;
+$toggle-height:                   31px !default;
+$toggle-border-width:             2px !default;
+$toggle-border-radius:            20px !default;
+
+$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2) !default;
+$toggle-handle-height:            $toggle-handle-width !default;
+$toggle-handle-radius:            $toggle-handle-width !default;
+$toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
+
+$toggle-off-bg-color:             #fff !default;
+$toggle-off-border-color:         #e6e6e6 !default;
+
+$toggle-on-light-bg:              $button-light-border !default;
+$toggle-on-light-border:          $toggle-on-light-bg !default;
+$toggle-on-stable-bg:             $button-stable-border !default;
+$toggle-on-stable-border:         $toggle-on-stable-bg !default;
+$toggle-on-positive-bg:           $positive !default;
+$toggle-on-positive-border:       $toggle-on-positive-bg !default;
+$toggle-on-calm-bg:               $calm !default;
+$toggle-on-calm-border:           $toggle-on-calm-bg !default;
+$toggle-on-assertive-bg:          $assertive !default;
+$toggle-on-assertive-border:      $toggle-on-assertive-bg !default;
+$toggle-on-balanced-bg:           $balanced !default;
+$toggle-on-balanced-border:       $toggle-on-balanced-bg !default;
+$toggle-on-energized-bg:          $energized !default;
+$toggle-on-energized-border:      $toggle-on-energized-bg !default;
+$toggle-on-royal-bg:              $royal !default;
+$toggle-on-royal-border:          $toggle-on-royal-bg !default;
+$toggle-on-dark-bg:               $dark !default;
+$toggle-on-dark-border:           $toggle-on-dark-bg !default;
+$toggle-on-default-bg:            #4cd964 !default;
+$toggle-on-default-border:        $toggle-on-default-bg !default;
+
+$toggle-handle-off-bg-color:      $light !default;
+$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color !default;
+
+$toggle-transition-duration:      .3s !default;
+
+$toggle-hit-area-expansion:   5px;
+
+
+// Checkbox
+// -------------------------------
+
+$checkbox-width:                  28px !default;
+$checkbox-height:                 28px !default;
+$checkbox-border-radius:          $checkbox-width !default;
+$checkbox-border-width:           1px !default;
+
+$checkbox-off-bg-color:           #fff !default;
+$checkbox-off-border-light:       $button-light-border !default;
+$checkbox-on-bg-light:            $button-light-border !default;
+$checkbox-off-border-stable:      $button-stable-border !default;
+$checkbox-on-bg-stable:           $button-stable-border !default;
+$checkbox-off-border-positive:    $positive !default;
+$checkbox-on-bg-positive:         $positive !default;
+$checkbox-off-border-calm:        $calm !default;
+$checkbox-on-bg-calm:             $calm !default;
+$checkbox-off-border-assertive:   $assertive !default;
+$checkbox-on-bg-assertive:        $assertive !default;
+$checkbox-off-border-balanced:    $balanced !default;
+$checkbox-on-bg-balanced:         $balanced !default;
+$checkbox-off-border-energized:   $energized !default;
+$checkbox-on-bg-energized:        $energized !default;
+$checkbox-off-border-royal:       $royal !default;
+$checkbox-on-bg-royal:            $royal !default;
+$checkbox-off-border-dark:        $dark !default;
+$checkbox-on-bg-dark:             $dark !default;
+$checkbox-off-border-default:     $button-light-border !default;
+$checkbox-on-bg-default:          $positive !default;
+$checkbox-on-border-default:      $positive !default;
+
+$checkbox-check-width:            1px !default;
+$checkbox-check-color:            #fff !default;
+
+
+// Range
+// -------------------------------
+
+$range-track-height:              2px !default;
+$range-slider-width:              28px !default;
+$range-slider-height:             28px !default;
+$range-slider-border-radius:      50% !default;
+$range-icon-size:                 24px !default;
+$range-slider-box-shadow:         0 0 2px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,0.2) !default;
+
+$range-light-track-bg:            $button-light-border !default;
+$range-stable-track-bg:           $button-stable-border !default;
+$range-positive-track-bg:         $button-positive-bg !default;
+$range-calm-track-bg:             $button-calm-bg !default;
+$range-balanced-track-bg:         $button-balanced-bg !default;
+$range-assertive-track-bg:        $button-assertive-bg !default;
+$range-energized-track-bg:        $button-energized-bg !default;
+$range-royal-track-bg:            $button-royal-bg !default;
+$range-dark-track-bg:             $button-dark-bg !default;
+$range-default-track-bg:          #ccc !default;
+
+
+// Menus
+// -------------------------------
+
+$menu-bg:                         #fff !default;
+$menu-width:                      275px !default;
+$menu-animation-speed:            200ms !default;
+
+$menu-side-shadow:                -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;
+
+
+// Modals
+// -------------------------------
+
+$modal-bg-color:                  #fff !default;
+$modal-backdrop-bg-active:        #000 !default;
+$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
+
+$modal-inset-mode-break-point:    680px !default;  // @media min-width
+$modal-inset-mode-top:            20% !default;
+$modal-inset-mode-right:          20% !default;
+$modal-inset-mode-bottom:         20% !default;
+$modal-inset-mode-left:           20% !default;
+$modal-inset-mode-min-height:     240px !default;
+
+
+// Popovers
+// -------------------------------
+
+$popover-bg-color:                $light !default;
+$popover-backdrop-bg-active:      rgba(0,0,0,0.1) !default;
+$popover-backdrop-bg-inactive:    rgba(0,0,0,0) !default;
+$popover-width:                   220px !default;
+$popover-height:                  280px !default;
+$popover-large-break-point:       680px !default;
+$popover-large-width:             360px !default;
+
+$popover-box-shadow:              0 1px 3px rgba(0,0,0,0.4) !default;
+$popover-border-radius:           2px !default;
+
+$popover-box-shadow-ios:          0 0 40px rgba(0,0,0,0.08) !default;
+$popover-border-radius-ios:       10px !default;
+
+$popover-bg-color-android:        #fafafa !default;
+$popover-box-shadow-android:      0 2px 6px rgba(0,0,0,0.35) !default;
+
+
+// Grids
+// -------------------------------
+
+$grid-padding-width:              10px !default;
+$grid-responsive-sm-break:        567px !default;  // smaller than landscape phone
+$grid-responsive-md-break:        767px !default;  // smaller than portrait tablet
+$grid-responsive-lg-break:        1023px !default; // smaller than landscape tablet
+
+
+// Action Sheets
+// -------------------------------
+
+$sheet-margin:                    8px !default;
+$sheet-border-radius:             4px !default;
+
+$sheet-options-bg-color:          #f1f2f3 !default;
+$sheet-options-bg-active-color:   #e4e5e7 !default;
+$sheet-options-text-color:        #007aff !default;
+$sheet-options-border-color:      #d1d3d6 !default;
+
+
+// Popups
+// -------------------------------
+
+$popup-width:                     250px !default;
+$popup-enter-animation:           superScaleIn !default;
+$popup-enter-animation-duration:  0.2s !default;
+$popup-leave-animation-duration:  0.1s !default;
+
+$popup-border-radius:             0px !default;
+$popup-background-color:          rgba(255,255,255,0.9) !default;
+
+$popup-button-border-radius:      2px !default;
+$popup-button-line-height:        20px !default;
+$popup-button-min-height:         45px !default;
+
+
+// Loading
+// -------------------------------
+
+$loading-text-color:              #fff !default;
+$loading-bg-color:                rgba(0,0,0,0.7) !default;
+$loading-padding:                 20px !default;
+$loading-border-radius:           5px !default;
+$loading-font-size:               15px !default;
+
+$loading-backdrop-fadein-duration:0.1s !default;
+$loading-backdrop-bg-color:       rgba(0,0,0,0.4) !default;
+
+
+// Badges
+// -------------------------------
+
+$badge-font-size:                 14px !default;
+$badge-line-height:               16px !default;
+$badge-font-weight:               bold !default;
+$badge-border-radius:             10px !default;
+
+$badge-light-bg:                  $button-light-bg !default;
+$badge-light-text:                $button-light-text !default;
+
+$badge-stable-bg:                 $button-stable-bg !default;
+$badge-stable-text:               $button-stable-text !default;
+
+$badge-positive-bg:               $button-positive-bg !default;
+$badge-positive-text:             $button-positive-text !default;
+
+$badge-calm-bg:                   $button-calm-bg !default;
+$badge-calm-text:                 $button-calm-text !default;
+
+$badge-balanced-bg:               $button-balanced-bg !default;
+$badge-balanced-text:             $button-balanced-text !default;
+
+$badge-assertive-bg:              $button-assertive-bg !default;
+$badge-assertive-text:            $button-assertive-text !default;
+
+$badge-energized-bg:              $button-energized-bg !default;
+$badge-energized-text:            $button-energized-text !default;
+
+$badge-royal-bg:                  $button-royal-bg !default;
+$badge-royal-text:                $button-royal-text !default;
+
+$badge-dark-bg:                   $button-dark-bg !default;
+$badge-dark-text:                 $button-dark-text !default;
+
+$badge-default-bg:                transparent !default;
+$badge-default-text:              #AAAAAA !default;
+
+
+// Spinners
+// -------------------------------
+
+$spinner-width:                   28px !default;
+$spinner-height:                  28px !default;
+
+$spinner-light-stroke:            $light !default;
+$spinner-light-fill:              $light !default;
+
+$spinner-stable-stroke:           $stable !default;
+$spinner-stable-fill:             $stable !default;
+
+$spinner-positive-stroke:         $positive !default;
+$spinner-positive-fill:           $positive !default;
+
+$spinner-calm-stroke:             $calm !default;
+$spinner-calm-fill:               $calm !default;
+
+$spinner-balanced-stroke:         $balanced !default;
+$spinner-balanced-fill:           $balanced !default;
+
+$spinner-assertive-stroke:        $assertive !default;
+$spinner-assertive-fill:          $assertive !default;
+
+$spinner-energized-stroke:        $energized !default;
+$spinner-energized-fill:          $energized !default;
+
+$spinner-royal-stroke:            $royal !default;
+$spinner-royal-fill:              $royal !default;
+
+$spinner-dark-stroke:             $dark !default;
+$spinner-dark-fill:               $dark !default;
+
+$spinner-default-stroke:          $dark !default;
+$spinner-default-fill:            $dark !default;
+
+
+// Z-Indexes
+// -------------------------------
+
+$z-index-bar-title:               0 !default;
+$z-index-item-drag:               0 !default;
+$z-index-item-edit:               0 !default;
+$z-index-menu:                    0 !default;
+$z-index-badge:                   1 !default;
+$z-index-bar-button:              1 !default;
+$z-index-item-options:            1 !default;
+$z-index-pane:                    1 !default;
+$z-index-slider-pager:            1 !default;
+$z-index-view:                    1 !default;
+$z-index-view-below:              2 !default;
+$z-index-item:                    2 !default;
+$z-index-item-checkbox:           3 !default;
+$z-index-item-radio:              3 !default;
+$z-index-item-reorder:            3 !default;
+$z-index-item-toggle:             3 !default;
+$z-index-view-above:              3 !default;
+$z-index-tabs:                    5 !default;
+$z-index-item-reordering:         9 !default;
+$z-index-bar:                     9 !default;
+$z-index-bar-above:               10 !default;
+$z-index-menu-scroll-content:     10 !default;
+$z-index-modal:                   10 !default;
+$z-index-popover:                 10 !default;
+$z-index-action-sheet:            11 !default;
+$z-index-backdrop:                11 !default;
+$z-index-menu-bar-header:         11 !default;
+$z-index-scroll-content-false:    11 !default;
+$z-index-popup:                   12 !default;
+$z-index-loading:                 13 !default;
+$z-index-scroll-bar:              9999 !default;
+$z-index-click-block:             99999 !default;
+
+
+// Platform
+// -------------------------------
+
+$ios-statusbar-height:           20px !default;

IonicMaterialDesign/www/lib/ionic/scss/ionic.scss

@@ -0,0 +1,53 @@
+@charset "UTF-8";
+
+@import
+  // Ionicons
+  "ionicons/ionicons.scss",
+
+  // Variables
+  "mixins",
+  "variables",
+
+  // Base
+  "reset",
+  "scaffolding",
+  "type",
+
+  // Components
+  "action-sheet",
+  "backdrop",
+  "bar",
+  "tabs",
+  "menu",
+  "modal",
+  "popover",
+  "popup",
+  "loading",
+  "items",
+  "list",
+  "badge",
+  "slide-box",
+  "refresher",
+  "spinner",
+
+  // Forms
+  "form",
+  "checkbox",
+  "toggle",
+  "radio",
+  "range",
+  "select",
+  "progress",
+
+  // Buttons
+  "button",
+  "button-bar",
+
+  // Util
+  "grid",
+  "util",
+  "platform",
+
+  // Animations
+  "animations",
+  "transitions";

IonicMaterialDesign/www/lib/ionic/scss/ionicons/_ionicons-animation.scss

@@ -0,0 +1,77 @@
+// Animation Icons
+// --------------------------
+
+.#{$ionicons-prefix}spin {
+  -webkit-animation: spin 1s infinite linear;
+  -moz-animation: spin 1s infinite linear;
+  -o-animation: spin 1s infinite linear;
+  animation: spin 1s infinite linear;
+}
+
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
+
+
+.#{$ionicons-prefix}loading-a,
+.#{$ionicons-prefix}loading-b,
+.#{$ionicons-prefix}loading-c,
+.#{$ionicons-prefix}loading-d,
+.#{$ionicons-prefix}looping,
+.#{$ionicons-prefix}refreshing,
+.#{$ionicons-prefix}ios7-reloading {
+  @extend .ion;
+  // must spin entire element for android 4.3 and below
+  @extend .#{$ionicons-prefix}spin;
+}
+
+.#{$ionicons-prefix}loading-a {
+  -webkit-animation-timing-function: steps(8, start);
+  -moz-animation-timing-function: steps(8, start);
+  animation-timing-function: steps(8, start);
+}
+
+.#{$ionicons-prefix}loading-a:before { 
+  @extend .#{$ionicons-prefix}load-a:before;
+}
+
+.#{$ionicons-prefix}loading-b:before { 
+  @extend .#{$ionicons-prefix}load-b:before;
+}
+
+.#{$ionicons-prefix}loading-c:before { 
+  @extend .#{$ionicons-prefix}load-c:before;
+}
+
+.#{$ionicons-prefix}loading-d:before { 
+  @extend .#{$ionicons-prefix}load-d:before;
+}
+
+.#{$ionicons-prefix}looping:before { 
+  @extend .#{$ionicons-prefix}loop:before;
+}
+
+.#{$ionicons-prefix}refreshing:before { 
+  @extend .#{$ionicons-prefix}refresh:before;
+}
+
+.#{$ionicons-prefix}ios7-reloading:before { 
+  @extend .#{$ionicons-prefix}ios7-reload:before;
+}

IonicMaterialDesign/www/lib/ionic/scss/ionicons/_ionicons-font.scss

@@ -0,0 +1,28 @@
+// Ionicons Font Path
+// --------------------------
+
+@font-face {
+ font-family: $ionicons-font-family;
+ src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}");
+ src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"),
+  url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"),
+  url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
+  url("#{$ionicons-font-path}/ionicons.woff") format("woff"), /* for WP8 */
+  url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+.ion {
+  display: inline-block;
+  font-family: $ionicons-font-family;
+  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;
+}

IonicMaterialDesign/www/lib/ionic/scss/ionicons/_ionicons-variables.scss

@@ -0,0 +1,741 @@
+// Ionicons Variables
+// --------------------------
+
+$ionicons-font-path: "../fonts" !default;
+$ionicons-font-family: "Ionicons" !default;
+$ionicons-version: "2.0.1" !default;
+$ionicons-prefix: ion- !default;
+
+$ionicon-var-alert: "\f101";
+$ionicon-var-alert-circled: "\f100";
+$ionicon-var-android-add: "\f2c7";
+$ionicon-var-android-add-circle: "\f359";
+$ionicon-var-android-alarm-clock: "\f35a";
+$ionicon-var-android-alert: "\f35b";
+$ionicon-var-android-apps: "\f35c";
+$ionicon-var-android-archive: "\f2c9";
+$ionicon-var-android-arrow-back: "\f2ca";
+$ionicon-var-android-arrow-down: "\f35d";
+$ionicon-var-android-arrow-dropdown: "\f35f";
+$ionicon-var-android-arrow-dropdown-circle: "\f35e";
+$ionicon-var-android-arrow-dropleft: "\f361";
+$ionicon-var-android-arrow-dropleft-circle: "\f360";
+$ionicon-var-android-arrow-dropright: "\f363";
+$ionicon-var-android-arrow-dropright-circle: "\f362";
+$ionicon-var-android-arrow-dropup: "\f365";
+$ionicon-var-android-arrow-dropup-circle: "\f364";
+$ionicon-var-android-arrow-forward: "\f30f";
+$ionicon-var-android-arrow-up: "\f366";
+$ionicon-var-android-attach: "\f367";
+$ionicon-var-android-bar: "\f368";
+$ionicon-var-android-bicycle: "\f369";
+$ionicon-var-android-boat: "\f36a";
+$ionicon-var-android-bookmark: "\f36b";
+$ionicon-var-android-bulb: "\f36c";
+$ionicon-var-android-bus: "\f36d";
+$ionicon-var-android-calendar: "\f2d1";
+$ionicon-var-android-call: "\f2d2";
+$ionicon-var-android-camera: "\f2d3";
+$ionicon-var-android-cancel: "\f36e";
+$ionicon-var-android-car: "\f36f";
+$ionicon-var-android-cart: "\f370";
+$ionicon-var-android-chat: "\f2d4";
+$ionicon-var-android-checkbox: "\f374";
+$ionicon-var-android-checkbox-blank: "\f371";
+$ionicon-var-android-checkbox-outline: "\f373";
+$ionicon-var-android-checkbox-outline-blank: "\f372";
+$ionicon-var-android-checkmark-circle: "\f375";
+$ionicon-var-android-clipboard: "\f376";
+$ionicon-var-android-close: "\f2d7";
+$ionicon-var-android-cloud: "\f37a";
+$ionicon-var-android-cloud-circle: "\f377";
+$ionicon-var-android-cloud-done: "\f378";
+$ionicon-var-android-cloud-outline: "\f379";
+$ionicon-var-android-color-palette: "\f37b";
+$ionicon-var-android-compass: "\f37c";
+$ionicon-var-android-contact: "\f2d8";
+$ionicon-var-android-contacts: "\f2d9";
+$ionicon-var-android-contract: "\f37d";
+$ionicon-var-android-create: "\f37e";
+$ionicon-var-android-delete: "\f37f";
+$ionicon-var-android-desktop: "\f380";
+$ionicon-var-android-document: "\f381";
+$ionicon-var-android-done: "\f383";
+$ionicon-var-android-done-all: "\f382";
+$ionicon-var-android-download: "\f2dd";
+$ionicon-var-android-drafts: "\f384";
+$ionicon-var-android-exit: "\f385";
+$ionicon-var-android-expand: "\f386";
+$ionicon-var-android-favorite: "\f388";
+$ionicon-var-android-favorite-outline: "\f387";
+$ionicon-var-android-film: "\f389";
+$ionicon-var-android-folder: "\f2e0";
+$ionicon-var-android-folder-open: "\f38a";
+$ionicon-var-android-funnel: "\f38b";
+$ionicon-var-android-globe: "\f38c";
+$ionicon-var-android-hand: "\f2e3";
+$ionicon-var-android-hangout: "\f38d";
+$ionicon-var-android-happy: "\f38e";
+$ionicon-var-android-home: "\f38f";
+$ionicon-var-android-image: "\f2e4";
+$ionicon-var-android-laptop: "\f390";
+$ionicon-var-android-list: "\f391";
+$ionicon-var-android-locate: "\f2e9";
+$ionicon-var-android-lock: "\f392";
+$ionicon-var-android-mail: "\f2eb";
+$ionicon-var-android-map: "\f393";
+$ionicon-var-android-menu: "\f394";
+$ionicon-var-android-microphone: "\f2ec";
+$ionicon-var-android-microphone-off: "\f395";
+$ionicon-var-android-more-horizontal: "\f396";
+$ionicon-var-android-more-vertical: "\f397";
+$ionicon-var-android-navigate: "\f398";
+$ionicon-var-android-notifications: "\f39b";
+$ionicon-var-android-notifications-none: "\f399";
+$ionicon-var-android-notifications-off: "\f39a";
+$ionicon-var-android-open: "\f39c";
+$ionicon-var-android-options: "\f39d";
+$ionicon-var-android-people: "\f39e";
+$ionicon-var-android-person: "\f3a0";
+$ionicon-var-android-person-add: "\f39f";
+$ionicon-var-android-phone-landscape: "\f3a1";
+$ionicon-var-android-phone-portrait: "\f3a2";
+$ionicon-var-android-pin: "\f3a3";
+$ionicon-var-android-plane: "\f3a4";
+$ionicon-var-android-playstore: "\f2f0";
+$ionicon-var-android-print: "\f3a5";
+$ionicon-var-android-radio-button-off: "\f3a6";
+$ionicon-var-android-radio-button-on: "\f3a7";
+$ionicon-var-android-refresh: "\f3a8";
+$ionicon-var-android-remove: "\f2f4";
+$ionicon-var-android-remove-circle: "\f3a9";
+$ionicon-var-android-restaurant: "\f3aa";
+$ionicon-var-android-sad: "\f3ab";
+$ionicon-var-android-search: "\f2f5";
+$ionicon-var-android-send: "\f2f6";
+$ionicon-var-android-settings: "\f2f7";
+$ionicon-var-android-share: "\f2f8";
+$ionicon-var-android-share-alt: "\f3ac";
+$ionicon-var-android-star: "\f2fc";
+$ionicon-var-android-star-half: "\f3ad";
+$ionicon-var-android-star-outline: "\f3ae";
+$ionicon-var-android-stopwatch: "\f2fd";
+$ionicon-var-android-subway: "\f3af";
+$ionicon-var-android-sunny: "\f3b0";
+$ionicon-var-android-sync: "\f3b1";
+$ionicon-var-android-textsms: "\f3b2";
+$ionicon-var-android-time: "\f3b3";
+$ionicon-var-android-train: "\f3b4";
+$ionicon-var-android-unlock: "\f3b5";
+$ionicon-var-android-upload: "\f3b6";
+$ionicon-var-android-volume-down: "\f3b7";
+$ionicon-var-android-volume-mute: "\f3b8";
+$ionicon-var-android-volume-off: "\f3b9";
+$ionicon-var-android-volume-up: "\f3ba";
+$ionicon-var-android-walk: "\f3bb";
+$ionicon-var-android-warning: "\f3bc";
+$ionicon-var-android-watch: "\f3bd";
+$ionicon-var-android-wifi: "\f305";
+$ionicon-var-aperture: "\f313";
+$ionicon-var-archive: "\f102";
+$ionicon-var-arrow-down-a: "\f103";
+$ionicon-var-arrow-down-b: "\f104";
+$ionicon-var-arrow-down-c: "\f105";
+$ionicon-var-arrow-expand: "\f25e";
+$ionicon-var-arrow-graph-down-left: "\f25f";
+$ionicon-var-arrow-graph-down-right: "\f260";
+$ionicon-var-arrow-graph-up-left: "\f261";
+$ionicon-var-arrow-graph-up-right: "\f262";
+$ionicon-var-arrow-left-a: "\f106";
+$ionicon-var-arrow-left-b: "\f107";
+$ionicon-var-arrow-left-c: "\f108";
+$ionicon-var-arrow-move: "\f263";
+$ionicon-var-arrow-resize: "\f264";
+$ionicon-var-arrow-return-left: "\f265";
+$ionicon-var-arrow-return-right: "\f266";
+$ionicon-var-arrow-right-a: "\f109";
+$ionicon-var-arrow-right-b: "\f10a";
+$ionicon-var-arrow-right-c: "\f10b";
+$ionicon-var-arrow-shrink: "\f267";
+$ionicon-var-arrow-swap: "\f268";
+$ionicon-var-arrow-up-a: "\f10c";
+$ionicon-var-arrow-up-b: "\f10d";
+$ionicon-var-arrow-up-c: "\f10e";
+$ionicon-var-asterisk: "\f314";
+$ionicon-var-at: "\f10f";
+$ionicon-var-backspace: "\f3bf";
+$ionicon-var-backspace-outline: "\f3be";
+$ionicon-var-bag: "\f110";
+$ionicon-var-battery-charging: "\f111";
+$ionicon-var-battery-empty: "\f112";
+$ionicon-var-battery-full: "\f113";
+$ionicon-var-battery-half: "\f114";
+$ionicon-var-battery-low: "\f115";
+$ionicon-var-beaker: "\f269";
+$ionicon-var-beer: "\f26a";
+$ionicon-var-bluetooth: "\f116";
+$ionicon-var-bonfire: "\f315";
+$ionicon-var-bookmark: "\f26b";
+$ionicon-var-bowtie: "\f3c0";
+$ionicon-var-briefcase: "\f26c";
+$ionicon-var-bug: "\f2be";
+$ionicon-var-calculator: "\f26d";
+$ionicon-var-calendar: "\f117";
+$ionicon-var-camera: "\f118";
+$ionicon-var-card: "\f119";
+$ionicon-var-cash: "\f316";
+$ionicon-var-chatbox: "\f11b";
+$ionicon-var-chatbox-working: "\f11a";
+$ionicon-var-chatboxes: "\f11c";
+$ionicon-var-chatbubble: "\f11e";
+$ionicon-var-chatbubble-working: "\f11d";
+$ionicon-var-chatbubbles: "\f11f";
+$ionicon-var-checkmark: "\f122";
+$ionicon-var-checkmark-circled: "\f120";
+$ionicon-var-checkmark-round: "\f121";
+$ionicon-var-chevron-down: "\f123";
+$ionicon-var-chevron-left: "\f124";
+$ionicon-var-chevron-right: "\f125";
+$ionicon-var-chevron-up: "\f126";
+$ionicon-var-clipboard: "\f127";
+$ionicon-var-clock: "\f26e";
+$ionicon-var-close: "\f12a";
+$ionicon-var-close-circled: "\f128";
+$ionicon-var-close-round: "\f129";
+$ionicon-var-closed-captioning: "\f317";
+$ionicon-var-cloud: "\f12b";
+$ionicon-var-code: "\f271";
+$ionicon-var-code-download: "\f26f";
+$ionicon-var-code-working: "\f270";
+$ionicon-var-coffee: "\f272";
+$ionicon-var-compass: "\f273";
+$ionicon-var-compose: "\f12c";
+$ionicon-var-connection-bars: "\f274";
+$ionicon-var-contrast: "\f275";
+$ionicon-var-crop: "\f3c1";
+$ionicon-var-cube: "\f318";
+$ionicon-var-disc: "\f12d";
+$ionicon-var-document: "\f12f";
+$ionicon-var-document-text: "\f12e";
+$ionicon-var-drag: "\f130";
+$ionicon-var-earth: "\f276";
+$ionicon-var-easel: "\f3c2";
+$ionicon-var-edit: "\f2bf";
+$ionicon-var-egg: "\f277";
+$ionicon-var-eject: "\f131";
+$ionicon-var-email: "\f132";
+$ionicon-var-email-unread: "\f3c3";
+$ionicon-var-erlenmeyer-flask: "\f3c5";
+$ionicon-var-erlenmeyer-flask-bubbles: "\f3c4";
+$ionicon-var-eye: "\f133";
+$ionicon-var-eye-disabled: "\f306";
+$ionicon-var-female: "\f278";
+$ionicon-var-filing: "\f134";
+$ionicon-var-film-marker: "\f135";
+$ionicon-var-fireball: "\f319";
+$ionicon-var-flag: "\f279";
+$ionicon-var-flame: "\f31a";
+$ionicon-var-flash: "\f137";
+$ionicon-var-flash-off: "\f136";
+$ionicon-var-folder: "\f139";
+$ionicon-var-fork: "\f27a";
+$ionicon-var-fork-repo: "\f2c0";
+$ionicon-var-forward: "\f13a";
+$ionicon-var-funnel: "\f31b";
+$ionicon-var-gear-a: "\f13d";
+$ionicon-var-gear-b: "\f13e";
+$ionicon-var-grid: "\f13f";
+$ionicon-var-hammer: "\f27b";
+$ionicon-var-happy: "\f31c";
+$ionicon-var-happy-outline: "\f3c6";
+$ionicon-var-headphone: "\f140";
+$ionicon-var-heart: "\f141";
+$ionicon-var-heart-broken: "\f31d";
+$ionicon-var-help: "\f143";
+$ionicon-var-help-buoy: "\f27c";
+$ionicon-var-help-circled: "\f142";
+$ionicon-var-home: "\f144";
+$ionicon-var-icecream: "\f27d";
+$ionicon-var-image: "\f147";
+$ionicon-var-images: "\f148";
+$ionicon-var-information: "\f14a";
+$ionicon-var-information-circled: "\f149";
+$ionicon-var-ionic: "\f14b";
+$ionicon-var-ios-alarm: "\f3c8";
+$ionicon-var-ios-alarm-outline: "\f3c7";
+$ionicon-var-ios-albums: "\f3ca";
+$ionicon-var-ios-albums-outline: "\f3c9";
+$ionicon-var-ios-americanfootball: "\f3cc";
+$ionicon-var-ios-americanfootball-outline: "\f3cb";
+$ionicon-var-ios-analytics: "\f3ce";
+$ionicon-var-ios-analytics-outline: "\f3cd";
+$ionicon-var-ios-arrow-back: "\f3cf";
+$ionicon-var-ios-arrow-down: "\f3d0";
+$ionicon-var-ios-arrow-forward: "\f3d1";
+$ionicon-var-ios-arrow-left: "\f3d2";
+$ionicon-var-ios-arrow-right: "\f3d3";
+$ionicon-var-ios-arrow-thin-down: "\f3d4";
+$ionicon-var-ios-arrow-thin-left: "\f3d5";
+$ionicon-var-ios-arrow-thin-right: "\f3d6";
+$ionicon-var-ios-arrow-thin-up: "\f3d7";
+$ionicon-var-ios-arrow-up: "\f3d8";
+$ionicon-var-ios-at: "\f3da";
+$ionicon-var-ios-at-outline: "\f3d9";
+$ionicon-var-ios-barcode: "\f3dc";
+$ionicon-var-ios-barcode-outline: "\f3db";
+$ionicon-var-ios-baseball: "\f3de";
+$ionicon-var-ios-baseball-outline: "\f3dd";
+$ionicon-var-ios-basketball: "\f3e0";
+$ionicon-var-ios-basketball-outline: "\f3df";
+$ionicon-var-ios-bell: "\f3e2";
+$ionicon-var-ios-bell-outline: "\f3e1";
+$ionicon-var-ios-body: "\f3e4";
+$ionicon-var-ios-body-outline: "\f3e3";
+$ionicon-var-ios-bolt: "\f3e6";
+$ionicon-var-ios-bolt-outline: "\f3e5";
+$ionicon-var-ios-book: "\f3e8";
+$ionicon-var-ios-book-outline: "\f3e7";
+$ionicon-var-ios-bookmarks: "\f3ea";
+$ionicon-var-ios-bookmarks-outline: "\f3e9";
+$ionicon-var-ios-box: "\f3ec";
+$ionicon-var-ios-box-outline: "\f3eb";
+$ionicon-var-ios-briefcase: "\f3ee";
+$ionicon-var-ios-briefcase-outline: "\f3ed";
+$ionicon-var-ios-browsers: "\f3f0";
+$ionicon-var-ios-browsers-outline: "\f3ef";
+$ionicon-var-ios-calculator: "\f3f2";
+$ionicon-var-ios-calculator-outline: "\f3f1";
+$ionicon-var-ios-calendar: "\f3f4";
+$ionicon-var-ios-calendar-outline: "\f3f3";
+$ionicon-var-ios-camera: "\f3f6";
+$ionicon-var-ios-camera-outline: "\f3f5";
+$ionicon-var-ios-cart: "\f3f8";
+$ionicon-var-ios-cart-outline: "\f3f7";
+$ionicon-var-ios-chatboxes: "\f3fa";
+$ionicon-var-ios-chatboxes-outline: "\f3f9";
+$ionicon-var-ios-chatbubble: "\f3fc";
+$ionicon-var-ios-chatbubble-outline: "\f3fb";
+$ionicon-var-ios-checkmark: "\f3ff";
+$ionicon-var-ios-checkmark-empty: "\f3fd";
+$ionicon-var-ios-checkmark-outline: "\f3fe";
+$ionicon-var-ios-circle-filled: "\f400";
+$ionicon-var-ios-circle-outline: "\f401";
+$ionicon-var-ios-clock: "\f403";
+$ionicon-var-ios-clock-outline: "\f402";
+$ionicon-var-ios-close: "\f406";
+$ionicon-var-ios-close-empty: "\f404";
+$ionicon-var-ios-close-outline: "\f405";
+$ionicon-var-ios-cloud: "\f40c";
+$ionicon-var-ios-cloud-download: "\f408";
+$ionicon-var-ios-cloud-download-outline: "\f407";
+$ionicon-var-ios-cloud-outline: "\f409";
+$ionicon-var-ios-cloud-upload: "\f40b";
+$ionicon-var-ios-cloud-upload-outline: "\f40a";
+$ionicon-var-ios-cloudy: "\f410";
+$ionicon-var-ios-cloudy-night: "\f40e";
+$ionicon-var-ios-cloudy-night-outline: "\f40d";
+$ionicon-var-ios-cloudy-outline: "\f40f";
+$ionicon-var-ios-cog: "\f412";
+$ionicon-var-ios-cog-outline: "\f411";
+$ionicon-var-ios-color-filter: "\f414";
+$ionicon-var-ios-color-filter-outline: "\f413";
+$ionicon-var-ios-color-wand: "\f416";
+$ionicon-var-ios-color-wand-outline: "\f415";
+$ionicon-var-ios-compose: "\f418";
+$ionicon-var-ios-compose-outline: "\f417";
+$ionicon-var-ios-contact: "\f41a";
+$ionicon-var-ios-contact-outline: "\f419";
+$ionicon-var-ios-copy: "\f41c";
+$ionicon-var-ios-copy-outline: "\f41b";
+$ionicon-var-ios-crop: "\f41e";
+$ionicon-var-ios-crop-strong: "\f41d";
+$ionicon-var-ios-download: "\f420";
+$ionicon-var-ios-download-outline: "\f41f";
+$ionicon-var-ios-drag: "\f421";
+$ionicon-var-ios-email: "\f423";
+$ionicon-var-ios-email-outline: "\f422";
+$ionicon-var-ios-eye: "\f425";
+$ionicon-var-ios-eye-outline: "\f424";
+$ionicon-var-ios-fastforward: "\f427";
+$ionicon-var-ios-fastforward-outline: "\f426";
+$ionicon-var-ios-filing: "\f429";
+$ionicon-var-ios-filing-outline: "\f428";
+$ionicon-var-ios-film: "\f42b";
+$ionicon-var-ios-film-outline: "\f42a";
+$ionicon-var-ios-flag: "\f42d";
+$ionicon-var-ios-flag-outline: "\f42c";
+$ionicon-var-ios-flame: "\f42f";
+$ionicon-var-ios-flame-outline: "\f42e";
+$ionicon-var-ios-flask: "\f431";
+$ionicon-var-ios-flask-outline: "\f430";
+$ionicon-var-ios-flower: "\f433";
+$ionicon-var-ios-flower-outline: "\f432";
+$ionicon-var-ios-folder: "\f435";
+$ionicon-var-ios-folder-outline: "\f434";
+$ionicon-var-ios-football: "\f437";
+$ionicon-var-ios-football-outline: "\f436";
+$ionicon-var-ios-game-controller-a: "\f439";
+$ionicon-var-ios-game-controller-a-outline: "\f438";
+$ionicon-var-ios-game-controller-b: "\f43b";
+$ionicon-var-ios-game-controller-b-outline: "\f43a";
+$ionicon-var-ios-gear: "\f43d";
+$ionicon-var-ios-gear-outline: "\f43c";
+$ionicon-var-ios-glasses: "\f43f";
+$ionicon-var-ios-glasses-outline: "\f43e";
+$ionicon-var-ios-grid-view: "\f441";
+$ionicon-var-ios-grid-view-outline: "\f440";
+$ionicon-var-ios-heart: "\f443";
+$ionicon-var-ios-heart-outline: "\f442";
+$ionicon-var-ios-help: "\f446";
+$ionicon-var-ios-help-empty: "\f444";
+$ionicon-var-ios-help-outline: "\f445";
+$ionicon-var-ios-home: "\f448";
+$ionicon-var-ios-home-outline: "\f447";
+$ionicon-var-ios-infinite: "\f44a";
+$ionicon-var-ios-infinite-outline: "\f449";
+$ionicon-var-ios-information: "\f44d";
+$ionicon-var-ios-information-empty: "\f44b";
+$ionicon-var-ios-information-outline: "\f44c";
+$ionicon-var-ios-ionic-outline: "\f44e";
+$ionicon-var-ios-keypad: "\f450";
+$ionicon-var-ios-keypad-outline: "\f44f";
+$ionicon-var-ios-lightbulb: "\f452";
+$ionicon-var-ios-lightbulb-outline: "\f451";
+$ionicon-var-ios-list: "\f454";
+$ionicon-var-ios-list-outline: "\f453";
+$ionicon-var-ios-location: "\f456";
+$ionicon-var-ios-location-outline: "\f455";
+$ionicon-var-ios-locked: "\f458";
+$ionicon-var-ios-locked-outline: "\f457";
+$ionicon-var-ios-loop: "\f45a";
+$ionicon-var-ios-loop-strong: "\f459";
+$ionicon-var-ios-medical: "\f45c";
+$ionicon-var-ios-medical-outline: "\f45b";
+$ionicon-var-ios-medkit: "\f45e";
+$ionicon-var-ios-medkit-outline: "\f45d";
+$ionicon-var-ios-mic: "\f461";
+$ionicon-var-ios-mic-off: "\f45f";
+$ionicon-var-ios-mic-outline: "\f460";
+$ionicon-var-ios-minus: "\f464";
+$ionicon-var-ios-minus-empty: "\f462";
+$ionicon-var-ios-minus-outline: "\f463";
+$ionicon-var-ios-monitor: "\f466";
+$ionicon-var-ios-monitor-outline: "\f465";
+$ionicon-var-ios-moon: "\f468";
+$ionicon-var-ios-moon-outline: "\f467";
+$ionicon-var-ios-more: "\f46a";
+$ionicon-var-ios-more-outline: "\f469";
+$ionicon-var-ios-musical-note: "\f46b";
+$ionicon-var-ios-musical-notes: "\f46c";
+$ionicon-var-ios-navigate: "\f46e";
+$ionicon-var-ios-navigate-outline: "\f46d";
+$ionicon-var-ios-nutrition: "\f470";
+$ionicon-var-ios-nutrition-outline: "\f46f";
+$ionicon-var-ios-paper: "\f472";
+$ionicon-var-ios-paper-outline: "\f471";
+$ionicon-var-ios-paperplane: "\f474";
+$ionicon-var-ios-paperplane-outline: "\f473";
+$ionicon-var-ios-partlysunny: "\f476";
+$ionicon-var-ios-partlysunny-outline: "\f475";
+$ionicon-var-ios-pause: "\f478";
+$ionicon-var-ios-pause-outline: "\f477";
+$ionicon-var-ios-paw: "\f47a";
+$ionicon-var-ios-paw-outline: "\f479";
+$ionicon-var-ios-people: "\f47c";
+$ionicon-var-ios-people-outline: "\f47b";
+$ionicon-var-ios-person: "\f47e";
+$ionicon-var-ios-person-outline: "\f47d";
+$ionicon-var-ios-personadd: "\f480";
+$ionicon-var-ios-personadd-outline: "\f47f";
+$ionicon-var-ios-photos: "\f482";
+$ionicon-var-ios-photos-outline: "\f481";
+$ionicon-var-ios-pie: "\f484";
+$ionicon-var-ios-pie-outline: "\f483";
+$ionicon-var-ios-pint: "\f486";
+$ionicon-var-ios-pint-outline: "\f485";
+$ionicon-var-ios-play: "\f488";
+$ionicon-var-ios-play-outline: "\f487";
+$ionicon-var-ios-plus: "\f48b";
+$ionicon-var-ios-plus-empty: "\f489";
+$ionicon-var-ios-plus-outline: "\f48a";
+$ionicon-var-ios-pricetag: "\f48d";
+$ionicon-var-ios-pricetag-outline: "\f48c";
+$ionicon-var-ios-pricetags: "\f48f";
+$ionicon-var-ios-pricetags-outline: "\f48e";
+$ionicon-var-ios-printer: "\f491";
+$ionicon-var-ios-printer-outline: "\f490";
+$ionicon-var-ios-pulse: "\f493";
+$ionicon-var-ios-pulse-strong: "\f492";
+$ionicon-var-ios-rainy: "\f495";
+$ionicon-var-ios-rainy-outline: "\f494";
+$ionicon-var-ios-recording: "\f497";
+$ionicon-var-ios-recording-outline: "\f496";
+$ionicon-var-ios-redo: "\f499";
+$ionicon-var-ios-redo-outline: "\f498";
+$ionicon-var-ios-refresh: "\f49c";
+$ionicon-var-ios-refresh-empty: "\f49a";
+$ionicon-var-ios-refresh-outline: "\f49b";
+$ionicon-var-ios-reload: "\f49d";
+$ionicon-var-ios-reverse-camera: "\f49f";
+$ionicon-var-ios-reverse-camera-outline: "\f49e";
+$ionicon-var-ios-rewind: "\f4a1";
+$ionicon-var-ios-rewind-outline: "\f4a0";
+$ionicon-var-ios-rose: "\f4a3";
+$ionicon-var-ios-rose-outline: "\f4a2";
+$ionicon-var-ios-search: "\f4a5";
+$ionicon-var-ios-search-strong: "\f4a4";
+$ionicon-var-ios-settings: "\f4a7";
+$ionicon-var-ios-settings-strong: "\f4a6";
+$ionicon-var-ios-shuffle: "\f4a9";
+$ionicon-var-ios-shuffle-strong: "\f4a8";
+$ionicon-var-ios-skipbackward: "\f4ab";
+$ionicon-var-ios-skipbackward-outline: "\f4aa";
+$ionicon-var-ios-skipforward: "\f4ad";
+$ionicon-var-ios-skipforward-outline: "\f4ac";
+$ionicon-var-ios-snowy: "\f4ae";
+$ionicon-var-ios-speedometer: "\f4b0";
+$ionicon-var-ios-speedometer-outline: "\f4af";
+$ionicon-var-ios-star: "\f4b3";
+$ionicon-var-ios-star-half: "\f4b1";
+$ionicon-var-ios-star-outline: "\f4b2";
+$ionicon-var-ios-stopwatch: "\f4b5";
+$ionicon-var-ios-stopwatch-outline: "\f4b4";
+$ionicon-var-ios-sunny: "\f4b7";
+$ionicon-var-ios-sunny-outline: "\f4b6";
+$ionicon-var-ios-telephone: "\f4b9";
+$ionicon-var-ios-telephone-outline: "\f4b8";
+$ionicon-var-ios-tennisball: "\f4bb";
+$ionicon-var-ios-tennisball-outline: "\f4ba";
+$ionicon-var-ios-thunderstorm: "\f4bd";
+$ionicon-var-ios-thunderstorm-outline: "\f4bc";
+$ionicon-var-ios-time: "\f4bf";
+$ionicon-var-ios-time-outline: "\f4be";
+$ionicon-var-ios-timer: "\f4c1";
+$ionicon-var-ios-timer-outline: "\f4c0";
+$ionicon-var-ios-toggle: "\f4c3";
+$ionicon-var-ios-toggle-outline: "\f4c2";
+$ionicon-var-ios-trash: "\f4c5";
+$ionicon-var-ios-trash-outline: "\f4c4";
+$ionicon-var-ios-undo: "\f4c7";
+$ionicon-var-ios-undo-outline: "\f4c6";
+$ionicon-var-ios-unlocked: "\f4c9";
+$ionicon-var-ios-unlocked-outline: "\f4c8";
+$ionicon-var-ios-upload: "\f4cb";
+$ionicon-var-ios-upload-outline: "\f4ca";
+$ionicon-var-ios-videocam: "\f4cd";
+$ionicon-var-ios-videocam-outline: "\f4cc";
+$ionicon-var-ios-volume-high: "\f4ce";
+$ionicon-var-ios-volume-low: "\f4cf";
+$ionicon-var-ios-wineglass: "\f4d1";
+$ionicon-var-ios-wineglass-outline: "\f4d0";
+$ionicon-var-ios-world: "\f4d3";
+$ionicon-var-ios-world-outline: "\f4d2";
+$ionicon-var-ipad: "\f1f9";
+$ionicon-var-iphone: "\f1fa";
+$ionicon-var-ipod: "\f1fb";
+$ionicon-var-jet: "\f295";
+$ionicon-var-key: "\f296";
+$ionicon-var-knife: "\f297";
+$ionicon-var-laptop: "\f1fc";
+$ionicon-var-leaf: "\f1fd";
+$ionicon-var-levels: "\f298";
+$ionicon-var-lightbulb: "\f299";
+$ionicon-var-link: "\f1fe";
+$ionicon-var-load-a: "\f29a";
+$ionicon-var-load-b: "\f29b";
+$ionicon-var-load-c: "\f29c";
+$ionicon-var-load-d: "\f29d";
+$ionicon-var-location: "\f1ff";
+$ionicon-var-lock-combination: "\f4d4";
+$ionicon-var-locked: "\f200";
+$ionicon-var-log-in: "\f29e";
+$ionicon-var-log-out: "\f29f";
+$ionicon-var-loop: "\f201";
+$ionicon-var-magnet: "\f2a0";
+$ionicon-var-male: "\f2a1";
+$ionicon-var-man: "\f202";
+$ionicon-var-map: "\f203";
+$ionicon-var-medkit: "\f2a2";
+$ionicon-var-merge: "\f33f";
+$ionicon-var-mic-a: "\f204";
+$ionicon-var-mic-b: "\f205";
+$ionicon-var-mic-c: "\f206";
+$ionicon-var-minus: "\f209";
+$ionicon-var-minus-circled: "\f207";
+$ionicon-var-minus-round: "\f208";
+$ionicon-var-model-s: "\f2c1";
+$ionicon-var-monitor: "\f20a";
+$ionicon-var-more: "\f20b";
+$ionicon-var-mouse: "\f340";
+$ionicon-var-music-note: "\f20c";
+$ionicon-var-navicon: "\f20e";
+$ionicon-var-navicon-round: "\f20d";
+$ionicon-var-navigate: "\f2a3";
+$ionicon-var-network: "\f341";
+$ionicon-var-no-smoking: "\f2c2";
+$ionicon-var-nuclear: "\f2a4";
+$ionicon-var-outlet: "\f342";
+$ionicon-var-paintbrush: "\f4d5";
+$ionicon-var-paintbucket: "\f4d6";
+$ionicon-var-paper-airplane: "\f2c3";
+$ionicon-var-paperclip: "\f20f";
+$ionicon-var-pause: "\f210";
+$ionicon-var-person: "\f213";
+$ionicon-var-person-add: "\f211";
+$ionicon-var-person-stalker: "\f212";
+$ionicon-var-pie-graph: "\f2a5";
+$ionicon-var-pin: "\f2a6";
+$ionicon-var-pinpoint: "\f2a7";
+$ionicon-var-pizza: "\f2a8";
+$ionicon-var-plane: "\f214";
+$ionicon-var-planet: "\f343";
+$ionicon-var-play: "\f215";
+$ionicon-var-playstation: "\f30a";
+$ionicon-var-plus: "\f218";
+$ionicon-var-plus-circled: "\f216";
+$ionicon-var-plus-round: "\f217";
+$ionicon-var-podium: "\f344";
+$ionicon-var-pound: "\f219";
+$ionicon-var-power: "\f2a9";
+$ionicon-var-pricetag: "\f2aa";
+$ionicon-var-pricetags: "\f2ab";
+$ionicon-var-printer: "\f21a";
+$ionicon-var-pull-request: "\f345";
+$ionicon-var-qr-scanner: "\f346";
+$ionicon-var-quote: "\f347";
+$ionicon-var-radio-waves: "\f2ac";
+$ionicon-var-record: "\f21b";
+$ionicon-var-refresh: "\f21c";
+$ionicon-var-reply: "\f21e";
+$ionicon-var-reply-all: "\f21d";
+$ionicon-var-ribbon-a: "\f348";
+$ionicon-var-ribbon-b: "\f349";
+$ionicon-var-sad: "\f34a";
+$ionicon-var-sad-outline: "\f4d7";
+$ionicon-var-scissors: "\f34b";
+$ionicon-var-search: "\f21f";
+$ionicon-var-settings: "\f2ad";
+$ionicon-var-share: "\f220";
+$ionicon-var-shuffle: "\f221";
+$ionicon-var-skip-backward: "\f222";
+$ionicon-var-skip-forward: "\f223";
+$ionicon-var-social-android: "\f225";
+$ionicon-var-social-android-outline: "\f224";
+$ionicon-var-social-angular: "\f4d9";
+$ionicon-var-social-angular-outline: "\f4d8";
+$ionicon-var-social-apple: "\f227";
+$ionicon-var-social-apple-outline: "\f226";
+$ionicon-var-social-bitcoin: "\f2af";
+$ionicon-var-social-bitcoin-outline: "\f2ae";
+$ionicon-var-social-buffer: "\f229";
+$ionicon-var-social-buffer-outline: "\f228";
+$ionicon-var-social-chrome: "\f4db";
+$ionicon-var-social-chrome-outline: "\f4da";
+$ionicon-var-social-codepen: "\f4dd";
+$ionicon-var-social-codepen-outline: "\f4dc";
+$ionicon-var-social-css3: "\f4df";
+$ionicon-var-social-css3-outline: "\f4de";
+$ionicon-var-social-designernews: "\f22b";
+$ionicon-var-social-designernews-outline: "\f22a";
+$ionicon-var-social-dribbble: "\f22d";
+$ionicon-var-social-dribbble-outline: "\f22c";
+$ionicon-var-social-dropbox: "\f22f";
+$ionicon-var-social-dropbox-outline: "\f22e";
+$ionicon-var-social-euro: "\f4e1";
+$ionicon-var-social-euro-outline: "\f4e0";
+$ionicon-var-social-facebook: "\f231";
+$ionicon-var-social-facebook-outline: "\f230";
+$ionicon-var-social-foursquare: "\f34d";
+$ionicon-var-social-foursquare-outline: "\f34c";
+$ionicon-var-social-freebsd-devil: "\f2c4";
+$ionicon-var-social-github: "\f233";
+$ionicon-var-social-github-outline: "\f232";
+$ionicon-var-social-google: "\f34f";
+$ionicon-var-social-google-outline: "\f34e";
+$ionicon-var-social-googleplus: "\f235";
+$ionicon-var-social-googleplus-outline: "\f234";
+$ionicon-var-social-hackernews: "\f237";
+$ionicon-var-social-hackernews-outline: "\f236";
+$ionicon-var-social-html5: "\f4e3";
+$ionicon-var-social-html5-outline: "\f4e2";
+$ionicon-var-social-instagram: "\f351";
+$ionicon-var-social-instagram-outline: "\f350";
+$ionicon-var-social-javascript: "\f4e5";
+$ionicon-var-social-javascript-outline: "\f4e4";
+$ionicon-var-social-linkedin: "\f239";
+$ionicon-var-social-linkedin-outline: "\f238";
+$ionicon-var-social-markdown: "\f4e6";
+$ionicon-var-social-nodejs: "\f4e7";
+$ionicon-var-social-octocat: "\f4e8";
+$ionicon-var-social-pinterest: "\f2b1";
+$ionicon-var-social-pinterest-outline: "\f2b0";
+$ionicon-var-social-python: "\f4e9";
+$ionicon-var-social-reddit: "\f23b";
+$ionicon-var-social-reddit-outline: "\f23a";
+$ionicon-var-social-rss: "\f23d";
+$ionicon-var-social-rss-outline: "\f23c";
+$ionicon-var-social-sass: "\f4ea";
+$ionicon-var-social-skype: "\f23f";
+$ionicon-var-social-skype-outline: "\f23e";
+$ionicon-var-social-snapchat: "\f4ec";
+$ionicon-var-social-snapchat-outline: "\f4eb";
+$ionicon-var-social-tumblr: "\f241";
+$ionicon-var-social-tumblr-outline: "\f240";
+$ionicon-var-social-tux: "\f2c5";
+$ionicon-var-social-twitch: "\f4ee";
+$ionicon-var-social-twitch-outline: "\f4ed";
+$ionicon-var-social-twitter: "\f243";
+$ionicon-var-social-twitter-outline: "\f242";
+$ionicon-var-social-usd: "\f353";
+$ionicon-var-social-usd-outline: "\f352";
+$ionicon-var-social-vimeo: "\f245";
+$ionicon-var-social-vimeo-outline: "\f244";
+$ionicon-var-social-whatsapp: "\f4f0";
+$ionicon-var-social-whatsapp-outline: "\f4ef";
+$ionicon-var-social-windows: "\f247";
+$ionicon-var-social-windows-outline: "\f246";
+$ionicon-var-social-wordpress: "\f249";
+$ionicon-var-social-wordpress-outline: "\f248";
+$ionicon-var-social-yahoo: "\f24b";
+$ionicon-var-social-yahoo-outline: "\f24a";
+$ionicon-var-social-yen: "\f4f2";
+$ionicon-var-social-yen-outline: "\f4f1";
+$ionicon-var-social-youtube: "\f24d";
+$ionicon-var-social-youtube-outline: "\f24c";
+$ionicon-var-soup-can: "\f4f4";
+$ionicon-var-soup-can-outline: "\f4f3";
+$ionicon-var-speakerphone: "\f2b2";
+$ionicon-var-speedometer: "\f2b3";
+$ionicon-var-spoon: "\f2b4";
+$ionicon-var-star: "\f24e";
+$ionicon-var-stats-bars: "\f2b5";
+$ionicon-var-steam: "\f30b";
+$ionicon-var-stop: "\f24f";
+$ionicon-var-thermometer: "\f2b6";
+$ionicon-var-thumbsdown: "\f250";
+$ionicon-var-thumbsup: "\f251";
+$ionicon-var-toggle: "\f355";
+$ionicon-var-toggle-filled: "\f354";
+$ionicon-var-transgender: "\f4f5";
+$ionicon-var-trash-a: "\f252";
+$ionicon-var-trash-b: "\f253";
+$ionicon-var-trophy: "\f356";
+$ionicon-var-tshirt: "\f4f7";
+$ionicon-var-tshirt-outline: "\f4f6";
+$ionicon-var-umbrella: "\f2b7";
+$ionicon-var-university: "\f357";
+$ionicon-var-unlocked: "\f254";
+$ionicon-var-upload: "\f255";
+$ionicon-var-usb: "\f2b8";
+$ionicon-var-videocamera: "\f256";
+$ionicon-var-volume-high: "\f257";
+$ionicon-var-volume-low: "\f258";
+$ionicon-var-volume-medium: "\f259";
+$ionicon-var-volume-mute: "\f25a";
+$ionicon-var-wand: "\f358";
+$ionicon-var-waterdrop: "\f25b";
+$ionicon-var-wifi: "\f25c";
+$ionicon-var-wineglass: "\f2b9";
+$ionicon-var-woman: "\f25d";
+$ionicon-var-wrench: "\f2ba";
+$ionicon-var-xbox: "\f30c";

IonicMaterialDesign/www/lib/ionic/scss/ionicons/ionicons.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+@import "ionicons-variables";
+/*!
+  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/driftyco/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.
+*/
+
+@import "ionicons-font";
+@import "ionicons-icons";