adding more UI, rich text editor, implentation and example in post.go, as well as db insert/update and retrieval. NOTE: rich text editor content is stored as html escaped entity in DB.

author: Steve Manuel <nilslice@gmail.com> 2016-10-02 23:14:31 -0700
committer: Steve Manuel <nilslice@gmail.com> 2016-10-02 23:14:31 -0700
commit: 2d33ab3dd1f72b5b737e8af3a2c001ecbca6b14b (patch)
tree: 72cfbf4943f24d28d3f504cf60790cd569b1c225 /system/admin/static/editor/sass
parent: 37d3f13e071cfdb5e063c67dec604c10dbc6ddde (diff)
31 files changed, 9567 insertions, 0 deletions
diff --git a/system/admin/static/editor/sass/components/_buttons.scss b/system/admin/static/editor/sass/components/_buttons.scss
new file mode 100644
index 0000000..7192bec
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_buttons.scss
@@ -0,0 +1,157 @@
+// shared styles
+.btn, .btn-flat {
+  border: none;
+  border-radius: 2px;
+  display: inline-block;
+  height: $button-height;
+  line-height: $button-line-height;
+  // margin-bottom: 15px;
+  outline: 0;
+  padding: 0 2rem;
+  text-transform: uppercase;
+  vertical-align: middle;
+  // Gets rid of tap active state
+  -webkit-tap-highlight-color: transparent;
+}
+// Disabled shared style
+.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-floating:disabled {
+  background-color: $button-bg-color-disabled !important;
+  box-shadow: none;
+  color: $button-color-disabled !important;
+  cursor: default;
+  * {
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: $button-bg-color-disabled;
+    color: $button-color-disabled;
+  }
+}
+// Shared icon styles
+.btn, .btn-floating, .btn-large, .btn-flat {
+  i {
+    font-size: $button-font-size-shared;
+    line-height: inherit;
+  }
+}
+
+// Raised Button
+.btn {
+  text-decoration:none;
+  color: $button-color-raised;
+  background-color: $button-color;
+  text-align: center;
+  letter-spacing: .5px;
+  @extend .z-depth-1;
+  @include transition(.2s ease-out);
+  cursor: pointer;
+
+  &:hover {
+    background-color: lighten($button-color, 5%);
+    @extend .z-depth-1-half;
+  }
+}
+
+// Floating button
+.btn-floating {
+  display: inline-block;
+  color: $button-color-raised;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  width: $button-floating-size;
+  height: $button-floating-size;
+  line-height: $button-floating-size;
+  padding: 0;
+  background-color: $button-color;
+  border-radius: 50%;
+  @extend .z-depth-1;
+  transition: .3s;
+  cursor: pointer;
+  vertical-align: middle;
+
+  i {
+    width: inherit;
+    display: inline-block;
+    text-align: center;
+    color: $button-color-raised;
+    font-size: $button-large-icon-font-size;
+    line-height: $button-floating-size;
+  }
+
+  &:hover {
+    @extend .z-depth-1-half;
+  }
+  &:before {
+    border-radius: 0;
+  }
+  &.btn-large {
+    width: $button-floating-size * 1.5;
+    height: $button-floating-size * 1.5;
+    i{
+      line-height: $button-floating-size * 1.5;
+    }
+  }
+
+}
+// button fix
+button.btn-floating {
+  border: none;
+}
+
+// Fixed Action Button
+.fixed-action-btn {
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 998;
+
+  ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+    margin: 0;
+
+    li {
+      margin-bottom: 15px;
+    }
+
+    a.btn-floating {
+      opacity: 0;
+    }
+  }
+}
+
+// Flat button
+.btn-flat {
+  box-shadow: none;
+  background-color: transparent;
+  color: $button-color-flat;
+  cursor: pointer;
+
+  &.disabled {
+    color: lighten(#999, 10%);
+    cursor: default;
+  }
+}
+
+// Large button
+.btn-large {
+  @extend .btn;
+  height: $button-height * 1.5;
+  line-height: 56px;
+
+  i {
+    font-size: $button-large-icon-font-size;
+  }
+}
+
+// Block button
+.btn-block {
+  display: block;
+}
diff --git a/system/admin/static/editor/sass/components/_cards.scss b/system/admin/static/editor/sass/components/_cards.scss
new file mode 100644
index 0000000..524d0cf
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_cards.scss
@@ -0,0 +1,152 @@
+
+
+.card-panel {
+  transition: box-shadow .25s;
+  padding: $card-padding;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  border-radius: 2px;
+  @extend .z-depth-1;
+  background-color: $card-bg-color;
+}
+
+.card {
+  position: relative;
+  overflow: hidden;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  background-color: $card-bg-color;
+  transition: box-shadow .25s;
+  border-radius: 2px;
+  @extend .z-depth-1;
+
+
+  .card-title {
+    color: $card-bg-color;
+    font-size: 24px;
+    font-weight: 300;
+    &.activator {
+      cursor: pointer;
+    }
+  }
+
+  // Card Sizes
+  &.small, &.medium, &.large {
+    position: relative;
+
+    .card-image {
+      overflow: hidden;
+    }
+    .card-content {
+      overflow: hidden;
+    }
+    .card-action {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  &.small {
+    height: 300px;
+
+    .card-image {
+      height: 150px;
+    }
+    .card-content {
+      height: 150px;
+    }
+
+  }
+
+  &.medium {
+    height: 400px;
+
+    .card-image {
+      height: 250px;
+    }
+    .card-content {
+      height: 150px;
+    }
+  }
+
+  &.large {
+    height: 500px;
+
+    .card-image {
+      height: 330px;
+    }
+    .card-content {
+      height: 170px;
+    }
+  }
+
+
+  .card-image {
+    position: relative;
+
+    // Image background for content
+    img {
+      border-radius: 2px 2px 0 0;
+      position: relative;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+    }
+
+    .card-title {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      padding: $card-padding;
+    }
+
+  }
+
+  .card-content {
+    padding: $card-padding;
+    border-radius: 0 0 2px 2px;
+
+
+    p {
+      margin: 0;
+      color: inherit;
+    }
+    .card-title {
+      line-height: 48px;
+    }
+  }
+
+  .card-action {
+    border-top: 1px solid rgba(160,160,160,.2);
+    padding: $card-padding;
+
+    a {
+      color: $card-link-color;
+      margin-right: $card-padding;
+      @include transition(color .3s ease);
+      text-transform: uppercase;
+
+      &:hover { color: $card-link-color-light; }
+    }
+  }
+
+  .card-reveal {
+    padding: $card-padding;
+    position: absolute;
+    background-color: $card-bg-color;
+    width: 100%;
+    overflow-y: auto;
+    top: 100%;
+    height: 100%;
+    z-index: 1;
+    display: none;
+
+    .card-title {
+      cursor: pointer;
+      display: block;
+    }
+
+  }
+}
diff --git a/system/admin/static/editor/sass/components/_collapsible.scss b/system/admin/static/editor/sass/components/_collapsible.scss
new file mode 100644
index 0000000..6b45d1e
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_collapsible.scss
@@ -0,0 +1,85 @@
+.collapsible {
+  border-top: 1px solid $collapsible-border-color;
+  border-right: 1px solid $collapsible-border-color;
+  border-left: 1px solid $collapsible-border-color;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  @extend .z-depth-1;
+}
+
+.collapsible-header {
+  display: block;
+  cursor: pointer;
+  height: $collapsible-height;
+  line-height: $collapsible-height;
+  padding: 0 1rem;
+  background-color: $collapsible-header-color;
+  border-bottom: 1px solid $collapsible-border-color;
+
+  i {
+    width: 2rem;
+    font-size: 1.6rem;
+    line-height: $collapsible-height;
+    display: block;
+    float: left;
+    text-align: center;
+    margin-right: 1rem;
+  }
+}
+
+.collapsible-body {
+  display: none;
+  border-bottom: 1px solid $collapsible-border-color;
+  @include box-sizing(border-box);
+
+  p {
+    margin: 0;
+    padding: 2rem;
+  }
+}
+
+// sideNav collapsible styling
+.side-nav {
+
+  .collapsible {
+    border: none;
+    box-shadow: none;
+
+    li { padding: 0; }
+  }
+
+  .collapsible-header {
+    background-color: transparent;
+    border: none;
+    line-height: inherit;
+    height: inherit;
+    margin: 0 1rem;
+
+    i { line-height: inherit; }
+  }
+
+  .collapsible-body {
+    border: 0;
+    background-color: $collapsible-header-color;
+
+    li a { margin: 0 1rem 0 2rem; }
+  }
+
+}
+
+// Popout Collapsible
+
+.collapsible.popout {
+  border: none;
+  box-shadow: none;
+  > li {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    // transform: scaleX(.92);
+    margin: 0 24px;
+    transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
+  }
+  > li.active {
+    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+    margin: 16px 0;
+    // transform: scaleX(1);
+  }
+}
diff --git a/system/admin/static/editor/sass/components/_color.scss b/system/admin/static/editor/sass/components/_color.scss
new file mode 100644
index 0000000..95d65d5
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_color.scss
@@ -0,0 +1,412 @@
+// Utility Color Classes
+
+//.success {
+//
+//}
+
+// Google Color Palette defined: http://www.google.com/design/spec/style/color.html
+
+
+$materialize-red: (
+  "lighten-5":  #fdeaeb,
+  "lighten-4":  #f8c1c3,
+  "lighten-3":  #f3989b,
+  "lighten-2":  #ee6e73,
+  "lighten-1":  #ea454b,
+  "base":       #e51c23,
+  "darken-1":   #d0181e,
+  "darken-2":   #b9151b,
+  "darken-3":   #a21318,
+  "darken-4":   #8b1014,
+);
+
+$red: (
+  "lighten-5":  #FFEBEE,
+  "lighten-4":  #FFCDD2,
+  "lighten-3":  #EF9A9A,
+  "lighten-2":  #E57373,
+  "lighten-1":  #EF5350,
+  "base":       #F44336,
+  "darken-1":   #E53935,
+  "darken-2":   #D32F2F,
+  "darken-3":   #C62828,
+  "darken-4":   #B71C1C,
+  "accent-1":    #FF8A80,
+  "accent-2":    #FF5252,
+  "accent-3":    #FF1744,
+  "accent-4":    #D50000
+);
+
+$pink: (
+  "lighten-5":  #fce4ec,
+  "lighten-4":  #f8bbd0,
+  "lighten-3":  #f48fb1,
+  "lighten-2":  #f06292,
+  "lighten-1":  #ec407a,
+  "base":       #e91e63,
+  "darken-1":   #d81b60,
+  "darken-2":   #c2185b,
+  "darken-3":   #ad1457,
+  "darken-4":   #880e4f,
+  "accent-1":    #ff80ab,
+  "accent-2":    #ff4081,
+  "accent-3":    #f50057,
+  "accent-4":    #c51162
+);
+
+$purple: (
+  "lighten-5":  #f3e5f5,
+  "lighten-4":  #e1bee7,
+  "lighten-3":  #ce93d8,
+  "lighten-2":  #ba68c8,
+  "lighten-1":  #ab47bc,
+  "base":       #9c27b0,
+  "darken-1":   #8e24aa,
+  "darken-2":   #7b1fa2,
+  "darken-3":   #6a1b9a,
+  "darken-4":   #4a148c,
+  "accent-1":    #ea80fc,
+  "accent-2":    #e040fb,
+  "accent-3":    #d500f9,
+  "accent-4":    #aa00ff
+);
+
+$deep-purple: (
+  "lighten-5":  #ede7f6,
+  "lighten-4":  #d1c4e9,
+  "lighten-3":  #b39ddb,
+  "lighten-2":  #9575cd,
+  "lighten-1":  #7e57c2,
+  "base":       #673ab7,
+  "darken-1":   #5e35b1,
+  "darken-2":   #512da8,
+  "darken-3":   #4527a0,
+  "darken-4":   #311b92,
+  "accent-1":    #b388ff,
+  "accent-2":    #7c4dff,
+  "accent-3":    #651fff,
+  "accent-4":    #6200ea
+);
+
+$indigo: (
+  "lighten-5":  #e8eaf6,
+  "lighten-4":  #c5cae9,
+  "lighten-3":  #9fa8da,
+  "lighten-2":  #7986cb,
+  "lighten-1":  #5c6bc0,
+  "base":       #3f51b5,
+  "darken-1":   #3949ab,
+  "darken-2":   #303f9f,
+  "darken-3":   #283593,
+  "darken-4":   #1a237e,
+  "accent-1":    #8c9eff,
+  "accent-2":    #536dfe,
+  "accent-3":    #3d5afe,
+  "accent-4":    #304ffe
+);
+
+$blue: (
+  "lighten-5":  #E3F2FD,
+  "lighten-4":  #BBDEFB,
+  "lighten-3":  #90CAF9,
+  "lighten-2":  #64B5F6,
+  "lighten-1":  #42A5F5,
+  "base":       #2196F3,
+  "darken-1":   #1E88E5,
+  "darken-2":   #1976D2,
+  "darken-3":   #1565C0,
+  "darken-4":   #0D47A1,
+  "accent-1":    #82B1FF,
+  "accent-2":    #448AFF,
+  "accent-3":    #2979FF,
+  "accent-4":    #2962FF
+);
+
+$light-blue: (
+  "lighten-5":  #e1f5fe,
+  "lighten-4":  #b3e5fc,
+  "lighten-3":  #81d4fa,
+  "lighten-2":  #4fc3f7,
+  "lighten-1":  #29b6f6,
+  "base":       #03a9f4,
+  "darken-1":   #039be5,
+  "darken-2":   #0288d1,
+  "darken-3":   #0277bd,
+  "darken-4":   #01579b,
+  "accent-1":    #80d8ff,
+  "accent-2":    #40c4ff,
+  "accent-3":    #00b0ff,
+  "accent-4":    #0091ea
+);
+
+$cyan: (
+  "lighten-5":  #e0f7fa,
+  "lighten-4":  #b2ebf2,
+  "lighten-3":  #80deea,
+  "lighten-2":  #4dd0e1,
+  "lighten-1":  #26c6da,
+  "base":       #00bcd4,
+  "darken-1":   #00acc1,
+  "darken-2":   #0097a7,
+  "darken-3":   #00838f,
+  "darken-4":   #006064,
+  "accent-1":    #84ffff,
+  "accent-2":    #18ffff,
+  "accent-3":    #00e5ff,
+  "accent-4":    #00b8d4
+);
+
+$teal: (
+  "lighten-5":  #e0f2f1,
+  "lighten-4":  #b2dfdb,
+  "lighten-3":  #80cbc4,
+  "lighten-2":  #4db6ac,
+  "lighten-1":  #26a69a,
+  "base":       #009688,
+  "darken-1":   #00897b,
+  "darken-2":   #00796b,
+  "darken-3":   #00695c,
+  "darken-4":   #004d40,
+  "accent-1":    #a7ffeb,
+  "accent-2":    #64ffda,
+  "accent-3":    #1de9b6,
+  "accent-4":    #00bfa5
+);
+
+$green: (
+  "lighten-5":  #E8F5E9,
+  "lighten-4":  #C8E6C9,
+  "lighten-3":  #A5D6A7,
+  "lighten-2":  #81C784,
+  "lighten-1":  #66BB6A,
+  "base":       #4CAF50,
+  "darken-1":   #43A047,
+  "darken-2":   #388E3C,
+  "darken-3":   #2E7D32,
+  "darken-4":   #1B5E20,
+  "accent-1":    #B9F6CA,
+  "accent-2":    #69F0AE,
+  "accent-3":    #00E676,
+  "accent-4":    #00C853
+);
+
+$light-green: (
+  "lighten-5":  #f1f8e9,
+  "lighten-4":  #dcedc8,
+  "lighten-3":  #c5e1a5,
+  "lighten-2":  #aed581,
+  "lighten-1":  #9ccc65,
+  "base":       #8bc34a,
+  "darken-1":   #7cb342,
+  "darken-2":   #689f38,
+  "darken-3":   #558b2f,
+  "darken-4":   #33691e,
+  "accent-1":    #ccff90,
+  "accent-2":    #b2ff59,
+  "accent-3":    #76ff03,
+  "accent-4":    #64dd17
+);
+
+$lime: (
+  "lighten-5":  #f9fbe7,
+  "lighten-4":  #f0f4c3,
+  "lighten-3":  #e6ee9c,
+  "lighten-2":  #dce775,
+  "lighten-1":  #d4e157,
+  "base":       #cddc39,
+  "darken-1":   #c0ca33,
+  "darken-2":   #afb42b,
+  "darken-3":   #9e9d24,
+  "darken-4":   #827717,
+  "accent-1":    #f4ff81,
+  "accent-2":    #eeff41,
+  "accent-3":    #c6ff00,
+  "accent-4":    #aeea00
+);
+
+$yellow: (
+  "lighten-5":  #fffde7,
+  "lighten-4":  #fff9c4,
+  "lighten-3":  #fff59d,
+  "lighten-2":  #fff176,
+  "lighten-1":  #ffee58,
+  "base":       #ffeb3b,
+  "darken-1":   #fdd835,
+  "darken-2":   #fbc02d,
+  "darken-3":   #f9a825,
+  "darken-4":   #f57f17,
+  "accent-1":    #ffff8d,
+  "accent-2":    #ffff00,
+  "accent-3":    #ffea00,
+  "accent-4":    #ffd600
+);
+
+$amber: (
+  "lighten-5":  #fff8e1,
+  "lighten-4":  #ffecb3,
+  "lighten-3":  #ffe082,
+  "lighten-2":  #ffd54f,
+  "lighten-1":  #ffca28,
+  "base":       #ffc107,
+  "darken-1":   #ffb300,
+  "darken-2":   #ffa000,
+  "darken-3":   #ff8f00,
+  "darken-4":   #ff6f00,
+  "accent-1":    #ffe57f,
+  "accent-2":    #ffd740,
+  "accent-3":    #ffc400,
+  "accent-4":    #ffab00
+);
+
+$orange: (
+  "lighten-5":  #fff3e0,
+  "lighten-4":  #ffe0b2,
+  "lighten-3":  #ffcc80,
+  "lighten-2":  #ffb74d,
+  "lighten-1":  #ffa726,
+  "base":       #ff9800,
+  "darken-1":   #fb8c00,
+  "darken-2":   #f57c00,
+  "darken-3":   #ef6c00,
+  "darken-4":   #e65100,
+  "accent-1":    #ffd180,
+  "accent-2":    #ffab40,
+  "accent-3":    #ff9100,
+  "accent-4":    #ff6d00
+);
+
+$deep-orange: (
+  "lighten-5":  #fbe9e7,
+  "lighten-4":  #ffccbc,
+  "lighten-3":  #ffab91,
+  "lighten-2":  #ff8a65,
+  "lighten-1":  #ff7043,
+  "base":       #ff5722,
+  "darken-1":   #f4511e,
+  "darken-2":   #e64a19,
+  "darken-3":   #d84315,
+  "darken-4":   #bf360c,
+  "accent-1":    #ff9e80,
+  "accent-2":    #ff6e40,
+  "accent-3":    #ff3d00,
+  "accent-4":    #dd2c00
+);
+
+$brown: (
+  "lighten-5":  #efebe9,
+  "lighten-4":  #d7ccc8,
+  "lighten-3":  #bcaaa4,
+  "lighten-2":  #a1887f,
+  "lighten-1":  #8d6e63,
+  "base":       #795548,
+  "darken-1":   #6d4c41,
+  "darken-2":   #5d4037,
+  "darken-3":   #4e342e,
+  "darken-4":   #3e2723
+);
+
+$blue-grey: (
+  "lighten-5":  #eceff1,
+  "lighten-4":  #cfd8dc,
+  "lighten-3":  #b0bec5,
+  "lighten-2":  #90a4ae,
+  "lighten-1":  #78909c,
+  "base":       #607d8b,
+  "darken-1":   #546e7a,
+  "darken-2":   #455a64,
+  "darken-3":   #37474f,
+  "darken-4":   #263238
+);
+
+$grey: (
+  "lighten-5":  #fafafa,
+  "lighten-4":  #f5f5f5,
+  "lighten-3":  #eeeeee,
+  "lighten-2":  #e0e0e0,
+  "lighten-1":  #bdbdbd,
+  "base":       #9e9e9e,
+  "darken-1":   #757575,
+  "darken-2":   #616161,
+  "darken-3":   #424242,
+  "darken-4":   #212121
+);
+
+$shades: (
+  "black":        #000000,
+  "white":        #FFFFFF,
+  "transparent":  transparent
+);
+
+$colors: (
+  "materialize-red": $materialize-red,
+  "red": $red,
+  "pink": $pink,
+  "purple": $purple,
+  "deep-purple": $deep-purple,
+  "indigo": $indigo,
+  "blue": $blue,
+  "light-blue": $light-blue,
+  "cyan": $cyan,
+  "teal": $teal,
+  "green": $green,
+  "light-green": $light-green,
+  "lime": $lime,
+  "yellow": $yellow,
+  "amber": $amber,
+  "orange": $orange,
+  "deep-orange": $deep-orange,
+  "brown": $brown,
+  "blue-grey": $blue-grey,
+  "grey": $grey,
+  "shades": $shades
+);
+
+
+// Color Classes
+
+@each $color_name, $color in $colors {
+  @each $color_type, $color_value in $color {
+    @if $color_type == "base" {
+      .#{$color_name} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text {
+        color: $color_value !important;
+      }
+    }
+    @else {
+      .#{$color_name}.#{$color_type} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text.text-#{$color_type} {
+        color: $color_value !important;
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color, $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}
+
+
+// usage: color("name_of_color", "type_of_color")
+// to avoid to repeating map-get($colors, ...)
+
+@function color($color, $type) {
+  @if map-has-key($colors, $color) {
+    $curr_color: map-get($colors, $color);
+    @if map-has-key($curr_color, $type) {
+      @return map-get($curr_color, $type);
+    }
+  }
+  @warn "Unknown `#{name}` in $colors.";
+  @return null;
+}
+
diff --git a/system/admin/static/editor/sass/components/_dropdown.scss b/system/admin/static/editor/sass/components/_dropdown.scss
new file mode 100644
index 0000000..585fbd6
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_dropdown.scss
@@ -0,0 +1,40 @@
+.dropdown-content {
+  @extend .z-depth-1;
+  background-color: $dropdown-bg-color;
+  margin: 0;
+  display: none;
+  min-width: 100px;
+  max-height: 650px;
+  overflow-y: auto;
+  opacity: 0;
+  position: absolute;
+  z-index: 999;
+  will-change: width, height;
+
+  li {
+    clear: both;
+    color: $off-black;
+    cursor: pointer;
+    line-height: 1.5rem;
+    width: 100%;
+    text-align: left;
+    text-transform: none;
+
+    &:hover, &.active {
+      background-color: $dropdown-hover-bg-color;
+    }
+
+    & > a, & > span {
+      font-size: 1.2rem;
+      color: $dropdown-color;
+      display: block;
+      padding: 1rem 1rem;
+    }
+
+    // Icon alignment override
+    & > a > i {
+      height: inherit;
+      line-height: inherit;
+    }
+  }
+}
diff --git a/system/admin/static/editor/sass/components/_form.scss b/system/admin/static/editor/sass/components/_form.scss
new file mode 100644
index 0000000..ed35233
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_form.scss
@@ -0,0 +1,886 @@
+/* Remove Focus Boxes */
+select:focus {
+  outline: 1px solid lighten($secondary-color, 47%);
+}
+button:focus {
+  outline: none;
+  background-color: lighten($button-color, 4%);
+}
+
+label {
+  font-size: $label-font-size;
+  color: $input-border-color;
+}
+
+/***************************
+   Text Inputs + Textarea
+****************************/
+
+// Style Placeholders
+::-webkit-input-placeholder {
+   color: lighten($input-border-color, 20%);
+}
+
+:-moz-placeholder { /* Firefox 18- */
+   color: lighten($input-border-color, 20%);
+}
+
+::-moz-placeholder {  /* Firefox 19+ */
+   color: lighten($input-border-color, 20%);
+}
+
+:-ms-input-placeholder {
+   color: lighten($input-border-color, 20%);
+}
+
+// Text inputs
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=url],
+input[type=time],
+input[type=date],
+input[type=datetime-local],
+input[type=tel],
+input[type=number],
+input[type=search],
+textarea.materialize-textarea {
+
+  // General Styles
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid $input-border-color;
+  border-radius: 0;
+  outline: none;
+  height: 3rem;
+  width: 100%;
+
+  font-size: 1rem;
+  margin: 0 0 15px 0;
+  padding: 0;
+  box-shadow: none;
+  @include box-sizing(content-box);
+  transition: all .3s;
+
+
+  // Disabled input style
+  &:disabled, &[readonly="readonly"] {
+    color: $input-disabled-color;
+    border-bottom: 1px dotted $input-disabled-color;
+  }
+  // Disabled label style
+  &:disabled+label, &[readonly="readonly"]+label {
+    color: $input-disabled-color;
+  }
+  // Focused input style
+  &:focus:not([readonly]) {
+    border-bottom: 1px solid $input-focus-color;
+    box-shadow: 0 1px 0 0 $input-focus-color;
+  }
+  // Focused label style
+  &:focus:not([readonly])+label {
+    color: $input-focus-color;
+  }
+  // Valid Input Style
+  &.valid,
+  &:focus.valid {
+    border-bottom: 1px solid $input-success-color;
+    box-shadow: 0 1px 0 0 $input-success-color;
+  }
+  // Custom Success Message
+  &.valid + label:after,
+  &:focus.valid + label:after {
+    content: attr(data-success);
+    color: $input-success-color;
+    opacity: 1;
+  }
+  // Invalid Input Style
+  &.invalid,
+  &:focus.invalid {
+    border-bottom: 1px solid $input-error-color;
+    box-shadow: 0 1px 0 0 $input-error-color;
+  }
+  // Custom Error message
+  &.invalid + label:after,
+  &:focus.invalid + label:after {
+    content: attr(data-error);
+    color: $input-error-color;
+    opacity: 1;
+  }
+
+  // Form Message Shared Styles
+  & + label:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 65px;
+    opacity: 0;
+    transition: .2s opacity ease-out, .2s color ease-out;
+  }
+}
+
+// Styling for input field wrapper
+.input-field {
+  position: relative;
+  margin-top: 1rem;
+
+  label {
+    color: $input-border-color;
+    position: absolute;
+    top: 0.8rem;
+    left: $gutter-width / 2;
+    font-size: 1rem;
+    cursor: text;
+    @include transition(.2s ease-out);
+  }
+  label.active {
+    font-size: $label-font-size;
+    @include transform(translateY(-140%));
+  }
+
+  // Prefix Icons
+  .prefix {
+    position: absolute;
+    width: 3rem;
+    font-size: 2rem;
+    @include transition(color .2s);
+
+    &.active { color: $input-focus-color; }
+  }
+  .prefix ~ input,
+  .prefix ~ textarea {
+    margin-left: 3rem;
+    width: 92%;
+    width: calc(100% - 3rem);
+  }
+  .prefix ~ textarea { padding-top: .8rem; }
+  .prefix ~ label { margin-left: 3rem; }
+
+  @media #{$medium-and-down} {
+    .prefix ~ input {
+      width: 86%;
+      width: calc(100% - 3rem);
+    }
+  }
+  @media #{$small-and-down} {
+    .prefix ~ input {
+      width: 80%;
+      width: calc(100% - 3rem);
+    }
+  }
+}
+
+
+// Search Field
+
+
+.input-field input[type=search] {
+  display: block;
+  line-height: inherit;
+  padding-left: 4rem;
+  width: calc(100% - 4rem);
+
+  &:focus {
+    background-color: $input-bg-color;
+    border: 0;
+    box-shadow: none;
+    color: #444;
+
+    & + label i,
+    & ~ .mdi-navigation-close {
+      color: #444;
+    }
+  }
+
+  & + label {
+    left: 1rem;
+  }
+
+  & ~ .mdi-navigation-close {
+    position: absolute;
+    top: 0;
+    right: 1rem;
+    color: transparent;
+    cursor: pointer;
+    font-size: 2rem;
+    transition: .3s color;
+  }
+}
+
+
+// Default textarea
+textarea {
+   width: 100%;
+   height: 3rem;
+   background-color: transparent;
+
+  &.materialize-textarea {
+    overflow-y: hidden; /* prevents scroll bar flash */
+    padding: 1.6rem 0; /* prevents text jump on Enter keypress */
+    resize: none;
+    min-height: 3rem;
+  }
+}
+
+
+// For textarea autoresize
+.hiddendiv {
+  display: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
+  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+}
+
+
+/***************
+  Radio Buttons
+***************/
+
+/* Remove default Radio Buttons */
+[type="radio"]:not(:checked),
+[type="radio"]:checked {
+  position: absolute;
+  left: -9999px;
+  visibility: hidden;
+}
+
+[type="radio"]:not(:checked) + label,
+[type="radio"]:checked + label {
+  position: relative;
+  padding-left: 35px;
+  cursor: pointer;
+  display: inline-block;
+  height: 25px;
+  line-height: 25px;
+  font-size: 1rem;
+  @include transition(.28s ease);
+
+  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+  -moz-user-select: none; /* mozilla browsers */
+  -khtml-user-select: none; /* webkit (konqueror) browsers */
+  -ms-user-select: none; /* IE10+ */
+}
+
+[type="radio"] + label:before,
+[type="radio"] + label:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin: 4px;
+  width: 16px;
+  height: 16px;
+  z-index: 0;
+  @include transition(.28s ease);
+}
+
+
+/* Unchecked styles */
+[type="radio"]:not(:checked) + label:before {
+  border-radius: 50%;
+  border: 2px solid $radio-empty-color;
+}
+[type="radio"]:not(:checked) + label:after {
+  border-radius: 50%;
+  border: 2px solid $radio-empty-color;
+  z-index: -1;
+
+  @include transform(scale(0));
+}
+
+/* Checked styles */
+[type="radio"]:checked + label:before {
+  border-radius: 50%;
+  border: 2px solid transparent;
+}
+[type="radio"]:checked + label:after {
+  border-radius: 50%;
+  border: 2px solid $radio-fill-color;
+  background-color: $radio-fill-color;
+  z-index: 0;
+  @include transform(scale(1.02));
+}
+
+/* Radio With gap */
+[type="radio"].with-gap:checked + label:before {
+  border-radius: 50%;
+  border: 2px solid $radio-fill-color;
+}
+[type="radio"].with-gap:checked + label:after {
+  border-radius: 50%;
+  border: 2px solid $radio-fill-color;
+  background-color: $radio-fill-color;
+  z-index: 0;
+  @include transform(scale(.5));
+}
+
+/* Disabled Radio With gap */
+[type="radio"].with-gap:disabled:checked + label:before {
+  border: 2px solid $input-disabled-color;
+}
+[type="radio"].with-gap:disabled:checked + label:after {
+  border: none;
+  background-color: $input-disabled-color;
+}
+
+/* Disabled style */
+[type="radio"]:disabled:not(:checked) + label:before,
+[type="radio"]:disabled:checked + label:before {
+  background-color: transparent;
+  border-color: $input-disabled-color;
+}
+[type="radio"]:disabled + label {
+  color: $input-disabled-color;
+}
+[type="radio"]:disabled:not(:checked) + label:before {
+  border-color: $input-disabled-color;
+}
+[type="radio"]:disabled:checked + label:after {
+  background-color: $input-disabled-color;
+  border-color: $input-disabled-solid-color;
+}
+
+
+/***************
+   Checkboxes
+***************/
+
+/* CUSTOM CSS CHECKBOXES */
+form p {
+  margin-bottom: 10px;
+  text-align: left;
+}
+form p:last-child {
+  margin-bottom: 0;
+}
+
+/* Remove default checkbox */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+  visibility: hidden;
+}
+
+
+// Checkbox Styles
+[type="checkbox"] {
+
+  // Text Label Style
+  + label {
+    position: relative;
+    padding-left: 35px;
+    cursor: pointer;
+    display: inline-block;
+    height: 25px;
+    line-height: 25px;
+    font-size: 1rem;
+
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+  }
+
+  /* checkbox aspect */
+  + label:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 18px;
+    height: 18px;
+    z-index: 0;
+    border: 2px solid $radio-empty-color;
+    border-radius: 1px;
+    margin-top: 2px;
+    @include transition(.2s);
+  }
+
+  &:not(:checked):disabled + label:before {
+    border: none;
+    background-color: $input-disabled-color;
+  }
+
+}
+
+[type="checkbox"]:checked {
+  + label:before {
+    top: -4px;
+    left: -3px;
+    width: 12px; height: 22px;
+    border-top: 2px solid transparent;
+    border-left: 2px solid transparent;
+    border-right: 2px solid $radio-fill-color;
+    border-bottom: 2px solid $radio-fill-color;
+    @include transform(rotate(40deg));
+    -webkit-backface-visibility: hidden;
+    @include transform-origin(100% 100%);
+  }
+
+  &:disabled + label:before {
+    border-right: 2px solid $input-disabled-color;
+    border-bottom: 2px solid $input-disabled-color;
+  }
+
+}
+
+/* Indeterminate checkbox */
+[type="checkbox"]:indeterminate {
+  +label:before {
+    left: -10px;
+    top: -11px;
+    width: 10px; height: 22px;
+    border-top: none;
+    border-left: none;
+    border-right: 2px solid $radio-fill-color;
+    border-bottom: none;
+    @include transform(rotate(90deg));
+    -webkit-backface-visibility: hidden;
+    @include transform-origin(100% 100%);
+  }
+
+  // Disabled indeterminate
+  &:disabled + label:before {
+    border-right: 2px solid $input-disabled-color;
+    background-color: transparent;
+  }
+}
+
+
+// Filled in Style
+[type="checkbox"].filled-in {
+  // General
+  + label:after {
+    border-radius: 2px;
+  }
+  + label:before,
+  + label:after {
+    content: '';
+    left: 0;
+    position: absolute;
+    /* .1s delay is for check animation */
+    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
+    z-index: 1;
+  }
+  // Unchecked style
+  &:not(:checked) + label:before {
+    width: 0;
+     height: 0;
+     border: 3px solid transparent;
+     left: 6px;
+     top: 10px;
+
+     -webkit-transform: rotateZ(37deg);
+             transform: rotateZ(37deg);
+     -webkit-transform-origin: 20% 40%;
+             transform-origin: 100% 100%;
+  }
+  &:not(:checked) + label:after {
+    height: 20px;
+    width: 20px;
+    background-color: transparent;
+    border: 2px solid $radio-empty-color;
+    top: 0px;
+    z-index: 0;
+  }
+  // Checked style
+  &:checked {
+    + label:before {
+      top: 0;
+      left: 1px;
+      width: 8px;
+      height: 13px;
+      border-top: 2px solid transparent;
+      border-left: 2px solid transparent;
+      border-right: 2px solid $input-bg-color;
+      border-bottom: 2px solid $input-bg-color;
+      -webkit-transform: rotateZ(37deg);
+      transform: rotateZ(37deg);
+
+      -webkit-transform-origin: 100% 100%;
+      transform-origin: 100% 100%;
+    }
+    + label:after {
+      top: 0px;
+      width: 20px;
+      height: 20px;
+      border: 2px solid $secondary-color;
+      background-color: $secondary-color;
+      z-index: 0;
+    }
+  }
+  // Disabled style
+  &:disabled:not(:checked) + label:before {
+
+    background-color: transparent;
+    border: 2px solid transparent;
+  }
+  &:disabled:not(:checked) + label:after {
+    border-color: transparent;
+    background-color: $input-disabled-solid-color;
+  }
+  &:disabled:checked + label:before {
+    background-color: transparent;
+
+  }
+  &:disabled:checked + label:after {
+    background-color: $input-disabled-solid-color;
+    border-color: $input-disabled-solid-color;
+  }
+
+}
+
+/***************
+     Switch
+***************/
+.switch,
+.switch * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -ms-user-select: none;
+}
+.switch label {
+    cursor: pointer;
+}
+.switch label input[type=checkbox]{
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.switch label input[type=checkbox]:checked + .lever {
+    background-color: $switch-checked-lever-bg;
+}
+.switch label input[type=checkbox]:checked + .lever:after {
+    background-color: $switch-bg-color;
+}
+.switch label .lever {
+    content: "";
+    display: inline-block;
+    position: relative;
+    width: 40px;
+    height: 15px;
+    background-color: $switch-unchecked-lever-bg;
+    border-radius: 15px;
+    margin-right: 10px;
+    transition: background 0.3s ease;
+    vertical-align: middle;
+    margin: 0 16px;
+}
+.switch label .lever:after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 21px;
+    height: 21px;
+    background-color: $switch-unchecked-bg;
+    border-radius: 21px;
+    box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
+    left: -5px;
+    top: -3px;
+    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
+}
+// Switch active style
+input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
+       box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9);
+}
+input[type=checkbox]:not(:disabled) ~ .lever:active:after {
+       box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08);
+}
+.switch label input[type=checkbox]:checked + .lever:after {
+    left: 24px;
+}
+
+// Disabled Styles
+
+.switch input[type=checkbox][disabled] + .lever{
+  cursor: default;
+}
+.switch label input[type=checkbox][disabled] + .lever:after,
+.switch label input[type=checkbox][disabled]:checked + .lever:after {
+    background-color: $input-disabled-solid-color;
+}
+
+
+
+
+/***************
+  Select Field
+***************/
+
+.select-label {
+  position: absolute;
+}
+
+.select-wrapper {
+  position: relative;
+
+  input.select-dropdown {
+    position: relative;
+    cursor: pointer;
+    // color: #444;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid $input-border-color;
+    outline: none;
+    height: 3rem;
+    line-height: 3rem;
+    width: 100%;
+    font-size: 1rem;
+    margin: 0 0 15px 0;
+    padding: 0;
+    display: block;
+  }
+  span.caret {
+    color: initial;
+    position: absolute;
+    right: 0;
+    top: 16px;
+    font-size: 10px;
+    &.disabled {
+      color: $input-disabled-color;
+    }
+  }
+  & + label {
+    position: absolute;
+    top: -14px;
+    font-size: $label-font-size;
+  }
+}
+
+select { display: none; }
+select.browser-default { display: block; }
+
+
+// Disabled styles
+select:disabled {
+  color: rgba(0,0,0,.3);
+}
+.select-wrapper input.select-dropdown:disabled {
+  color: rgba(0,0,0,.3);
+  cursor: default;
+  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+  -moz-user-select: none; /* mozilla browsers */
+  -ms-user-select: none; /* IE10+ */
+  border-bottom: 1px solid rgba(0,0,0,.3);
+}
+.select-wrapper i {
+  color: rgba(0,0,0,.3);
+}
+.select-dropdown li.disabled {
+  color: rgba(0,0,0,.3);
+  background-color: transparent;
+}
+
+
+/*********************
+      File Input
+**********************/
+.file-field {
+  position: relative;
+
+  .file-path-wrapper {
+    overflow: hidden;
+    padding-left: 10px;
+  }
+  input.file-path { width: 100%; }
+
+  .btn {
+    float: left;
+    height: 3rem;
+    line-height: 3rem;
+  }
+
+  span {
+    cursor: pointer;
+  }
+
+  input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+  }
+}
+
+
+
+/***************
+      Range
+***************/
+
+.range-field {
+  position: relative;
+}
+
+input[type=range], input[type=range] + .thumb {
+  @extend .no-select;
+  cursor: pointer;
+}
+
+input[type=range] {
+  position: relative;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 15px 0px;
+  padding: 0;
+}
+input[type=range] + .thumb {
+  position: absolute;
+  border: none;
+  height: 0;
+  width: 0;
+  border-radius: 50%;
+  background-color: $radio-fill-color;
+  top: 10px;
+  margin-left: -6px;
+
+  @include transform-origin(50% 50%);
+  @include transform(rotate(-45deg));
+
+  .value {
+    display: block;
+    width: 30px;
+    text-align: center;
+    color: $radio-fill-color;
+    font-size: 0;
+    @include transform(rotate(45deg));
+  }
+
+  &.active {
+    border-radius: 50% 50% 50% 0;
+
+    .value {
+      color: $input-bg-color;
+      margin-left: -1px;
+      margin-top: 8px;
+      font-size: 10px;
+    }
+  }
+}
+
+
+input[type=range]:focus {
+  outline: none;
+}
+
+
+
+// WebKit
+input[type=range]{
+  -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  height: 3px;
+  background: #c2c0c2;
+  border: none;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background-color: $radio-fill-color;
+  transform-origin: 50% 50%;
+  margin: -5px 0 0 0;
+  @include transition(.3s);
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #ccc;
+}
+
+// FireFox
+input[type=range]{
+  /* fix for FF unable to apply focus style bug  */
+  border: 1px solid white;
+
+  /*required for proper track sizing in FF*/
+}
+
+input[type=range]::-moz-range-track {
+  height: 3px;
+  background: #ddd;
+  border: none;
+}
+
+input[type=range]::-moz-range-thumb {
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: $radio-fill-color;
+  margin-top: -5px;
+}
+
+/*hide the outline behind the border*/
+input[type=range]:-moz-focusring{
+  outline: 1px solid white;
+  outline-offset: -1px;
+}
+
+input[type=range]:focus::-moz-range-track {
+  background: #ccc;
+}
+
+// IE 10+
+input[type=range]::-ms-track {
+  height: 3px;
+
+  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+  background: transparent;
+
+  /*leave room for the larger thumb to overflow with a transparent border */
+  border-color: transparent;
+  border-width: 6px 0;
+
+  /*remove default tick marks*/
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: #777;
+}
+input[type=range]::-ms-fill-upper {
+  background: #ddd;
+}
+input[type=range]::-ms-thumb {
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: $radio-fill-color;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: #888;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: #ccc;
+}
+
+/***************************
+   Text Inputs + Textarea
+****************************/
+
+select {
+   background-color: rgba(255, 255, 255, 0.90);
+   width: 100%;
+   padding: 5px;
+   border: 1px solid #f2f2f2;
+   border-radius: 2px;
+   height: 3rem;
+   }
diff --git a/system/admin/static/editor/sass/components/_global.scss b/system/admin/static/editor/sass/components/_global.scss
new file mode 100644
index 0000000..c246270
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_global.scss
@@ -0,0 +1,718 @@
+@charset "UTF-8";
+
+
+//Default styles
+
+html {
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+body {
+  // display: flex;
+  // min-height: 100vh;
+  // flex-direction: column;
+}
+
+main {
+  // flex: 1 0 auto;
+}
+
+ul {
+	list-style-type: none;
+}
+
+a {
+	color: $link-color;
+	text-decoration: none;
+
+  // Gets rid of tap active state
+  -webkit-tap-highlight-color: transparent;
+}
+
+
+// Positioning
+.valign-wrapper {
+  @include flexbox();
+  @include align(center);
+
+  .valign {
+    display: block;
+  }
+}
+
+
+ul {
+  padding: 0;
+  li {
+    list-style-type: none;
+  }
+}
+
+// classic clearfix
+.clearfix {
+  clear: both;
+}
+
+
+// Z-levels
+.z-depth-0 {
+  box-shadow: none !important;
+}
+.z-depth-1{
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.z-depth-1-half{
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+}
+.z-depth-2{
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.z-depth-3{
+  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+}
+.z-depth-4{
+  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+}
+.z-depth-5{
+  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
+}
+
+.hoverable:hover {
+  transition: box-shadow .25s;
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+// Dividers
+
+.divider {
+  height: 1px;
+  overflow: hidden;
+  background-color: color("grey", "lighten-2");
+}
+
+
+//  Blockquote
+
+blockquote {
+  margin: 20px 0;
+  padding-left: 1.5rem;
+  border-left: 5px solid $primary-color;
+}
+
+// Icon Styles
+
+i {
+  line-height: inherit;
+
+  &.left {
+    float: left;
+    margin-right: 15px;
+  }
+  &.right {
+    float: right;
+    margin-left: 15px;
+  }
+  &.tiny {
+    font-size: 1rem;
+  }
+  &.small {
+    font-size: 2rem;
+  }
+  &.medium {
+    font-size: 4rem;
+  }
+  &.large {
+    font-size: 6rem;
+  }
+}
+
+// Images
+img.responsive-img,
+video.responsive-video {
+  max-width: 100%;
+  height: auto;
+}
+
+
+// Pagination
+
+.pagination {
+
+  li {
+    float: left;
+    font-size: 1.2rem;
+    padding: 0 10px;
+    line-height: 30px;
+    border-radius: 2px;
+    text-align: center;
+
+    a { color: #444; }
+
+    &.active a { color: #fff; }
+
+    &.active { background-color: $primary-color; }
+
+    &.disabled a {
+      cursor: default;
+      color: #999;
+    }
+
+    i {
+      font-size: 2rem;
+    }
+  }
+
+
+  li.pages ul li {
+    display: inline-block;
+    float: none;
+  }
+}
+@media #{$medium-and-down} {
+  .pagination {
+    width: 100%;
+
+    li.prev,
+    li.next {
+      width: 10%;
+    }
+
+    li.pages {
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}
+
+
+// Parallax
+.parallax-container {
+  position: relative;
+  overflow: hidden;
+  height: 500px;
+}
+
+.parallax {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+
+  img {
+    display: none;
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    -webkit-transform: translate3d(0,0,0);
+            transform: translate3d(0,0,0);
+    transform: translateX(-50%);
+  }
+}
+
+// Pushpin
+.pin-top, .pin-bottom {
+  position: relative;
+}
+.pinned {
+  position: fixed !important;
+}
+
+/*********************
+  Transition Classes
+**********************/
+
+ul.staggered-list li {
+  opacity: 0;
+}
+
+.fade-in {
+  opacity: 0;
+  transform-origin: 0 50%;
+}
+
+
+/*********************
+  Media Query Classes
+**********************/
+.hide-on-small-only, .hide-on-small-and-down {
+  @media #{$small-and-down} {
+    display: none !important;
+  }
+}
+.hide-on-med-and-down {
+  @media #{$medium-and-down} {
+    display: none !important;
+  }
+}
+.hide-on-med-and-up {
+  @media #{$medium-and-up} {
+    display: none !important;
+  }
+}
+.hide-on-med-only {
+  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+    display: none !important;
+  }
+}
+.hide-on-large-only {
+  @media #{$large-and-up} {
+    display: none !important;
+  }
+}
+.show-on-large {
+  @media #{$large-and-up} {
+    display: initial !important;
+  }
+}
+.show-on-medium {
+  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+    display: initial !important;
+  }
+}
+.show-on-small {
+  @media #{$small-and-down} {
+    display: initial !important;
+  }
+}
+.show-on-medium-and-up {
+  @media #{$medium-and-up} {
+    display: initial !important;
+  }
+}
+.show-on-medium-and-down {
+  @media #{$medium-and-down} {
+    display: initial !important;
+  }
+}
+
+
+// Center text on mobile
+.center-on-small-only {
+  @media #{$small-and-down} {
+    text-align: center;
+  }
+}
+
+// Footer
+footer.page-footer {
+  margin-top: 20px;
+  padding-top: 20px;
+  background-color: $footer-bg-color;
+
+  .footer-copyright {
+    overflow: hidden;
+    height: 50px;
+    line-height: 50px;
+    color: rgba(255,255,255,.8);
+    background-color: rgba(51,51,51,.08);;
+    @extend .light;
+  }
+}
+
+// Tables
+table, th, td {
+   border: none;
+}
+
+table {
+  width:100%;
+  display: table;
+
+  &.bordered > thead > tr,
+  &.bordered > tbody > tr {
+    border-bottom: 1px solid $table-border-color;
+  }
+
+  &.striped > tbody {
+    > tr:nth-child(odd) {
+      background-color: $table-striped-color;
+    }
+
+    > tr > td {
+      border-radius: 0px;
+    }
+  }
+
+  &.hoverable > tbody > tr {
+    @include transition(background-color .25s ease);
+    &:hover {
+      background-color: $table-striped-color;
+    }
+  }
+
+  &.centered {
+    thead tr th, tbody tr td {
+      text-align: center;
+
+    }
+  }
+
+}
+
+thead {
+  border-bottom: 1px solid $table-border-color;
+}
+
+td, th{
+  padding: 15px 5px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: middle;
+  border-radius: 2px;
+}
+
+// Responsive Table
+@media #{$medium-and-down} {
+
+  table.responsive-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: block;
+    position: relative;
+
+    th,
+    td {
+      margin: 0;
+      vertical-align: top;
+    }
+
+    th { text-align: left; }
+    thead {
+      display: block;
+      float: left;
+
+      tr {
+        display: block;
+        padding: 0 10px 0 0;
+
+        th::before {
+          content: "\00a0";
+        }
+      }
+    }
+    tbody {
+      display: block;
+      width: auto;
+      position: relative;
+      overflow-x: auto;
+      white-space: nowrap;
+
+      tr {
+        display: inline-block;
+        vertical-align: top;
+      }
+    }
+    th {
+      display: block;
+      text-align: right;
+    }
+    td {
+      display: block;
+      min-height: 1.25em;
+      text-align: left;
+    }
+    tr { padding: 0 10px; }
+
+    /* sort out borders */
+    thead {
+      border: 0;
+      border-right: 1px solid $table-border-color;
+    }
+
+    &.bordered {
+      th { border-bottom: 0; border-left: 0; }
+      td { border-left: 0; border-right: 0; border-bottom: 0; }
+      tr { border: 0; }
+      tbody tr { border-right: 1px solid $table-border-color; }
+    }
+
+  }
+
+}
+
+
+// Collections
+.collection {
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  border: 1px solid $collection-border-color;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+
+  .collection-item {
+    background-color: $collection-bg-color;
+    line-height: 1.5rem;
+    padding: 10px 20px;
+    margin: 0;
+    border-bottom: 1px solid $collection-border-color;
+
+    // Avatar Collection
+    &.avatar {
+      min-height: 84px;
+      padding-left: 72px;
+      position: relative;
+
+      .circle {
+        position: absolute;
+        width: 42px;
+        height: 42px;
+        overflow: hidden;
+        left: 15px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+      i.circle {
+        font-size: 18px;
+        line-height: 42px;
+        color: #fff;
+        background-color: #999;
+        text-align: center;
+      }
+
+
+      .title {
+        font-size: 16px;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      .secondary-content {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+      }
+
+    }
+
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.active {
+      background-color: $collection-active-bg-color;
+      color: $collection-active-color;
+    }
+  }
+  a.collection-item{
+    display: block;
+    @include transition(.25s);
+    color: $secondary-color;
+    &:not(.active) {
+      &:hover {
+        background-color: $collection-hover-bg-color;
+      }
+    }
+  }
+
+  &.with-header {
+    .collection-header {
+      background-color: $collection-bg-color;
+      border-bottom: 1px solid $collection-border-color;
+      padding: 10px 20px;
+    }
+    .collection-item {
+      padding-left: 30px;
+    }
+    .collection-item.avatar {
+      padding-left: 72px;
+    }
+  }
+
+}
+// Made less specific to allow easier overriding
+.secondary-content {
+  float: right;
+  color: $secondary-color;
+}
+
+
+// Badges
+span.badge {
+  min-width: 3rem;
+  padding: 0 6px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: inherit;
+  color: color('grey', 'darken-1');
+  position: absolute;
+  right: 15px;
+  @include box-sizing(border-box);
+
+  &.new {
+    font-weight: 300;
+    font-size: 0.8rem;
+    color: #fff;
+    background-color: $badge-bg-color;
+    border-radius: 2px;
+  }
+  &.new:after {
+    content: " new";
+  }
+}
+
+// Responsive Videos
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+    &.no-controls {
+      padding-top: 0;
+    }
+
+    iframe, object, embed {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+}
+
+// Progress Bar
+.progress {
+    position: relative;
+    height: 4px;
+    display: block;
+    width: 100%;
+    background-color: lighten($progress-bar-color, 40%);
+    border-radius: 2px;
+    margin: $element-top-margin 0 $element-bottom-margin 0;
+    overflow: hidden;
+  .determinate {
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: $progress-bar-color;
+    @include transition(width .3s linear);
+  }
+  .indeterminate {
+    background-color: $progress-bar-color;
+    &:before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left:0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      @include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite);
+
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left:0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      @include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
+      @include animation-delay(1.15s);
+    }
+  }
+}
+@include keyframes(indeterminate) {
+    0% {
+            left: -35%;
+            right:100%;
+        }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@include keyframes(indeterminate-short) {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+      left: 107%;
+      right: -8%;
+    }
+}
+
+
+/*******************
+  Utility Classes
+*******************/
+
+.hide {
+  display: none !important;
+}
+
+// Text Align
+.left-align {
+  text-align: left;
+}
+.right-align {
+  text-align: right
+}
+.center, .center-align {
+  text-align: center;
+}
+
+.left {
+  float: left !important;
+}
+.right {
+  float: right !important;
+}
+
+// No Text Select
+.no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.truncate {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.no-padding {
+  padding: 0 !important;
+}
diff --git a/system/admin/static/editor/sass/components/_grid.scss b/system/admin/static/editor/sass/components/_grid.scss
new file mode 100644
index 0000000..68d727d
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_grid.scss
@@ -0,0 +1,117 @@
+.container {
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 90%;
+}
+@media #{$medium-and-up} {
+  .container {
+    width: 85%;
+  }
+}
+@media #{$large-and-up} {
+  .container {
+    width: 70%;
+  }
+}
+.container .row {
+  margin-left: (-1 * $gutter-width / 2);
+  margin-right: (-1 * $gutter-width / 2);
+}
+
+.section {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+
+  &.no-pad {
+    padding: 0;
+  }
+  &.no-pad-bot {
+    padding-bottom: 0;
+  }
+  &.no-pad-top {
+    padding-top: 0;
+  }
+}
+
+
+.row {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 20px;
+
+  // Clear floating children
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .col {
+    float: left;
+    @include box-sizing(border-box);
+    padding: 0 $gutter-width / 2;
+
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      &.s#{$i} {
+        width: $perc;
+        margin-left: 0;
+      }
+      $i: $i + 1;
+    }
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      &.offset-s#{$i} {
+        margin-left: $perc;
+      }
+      $i: $i + 1;
+    }
+
+    @media #{$medium-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.m#{$i} {
+          width: $perc;
+          margin-left: 0;
+        }
+        $i: $i + 1;
+      }
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.offset-m#{$i} {
+          margin-left: $perc;
+        }
+        $i: $i + 1;
+      }
+
+    }
+
+    @media #{$large-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.l#{$i} {
+          width: $perc;
+          margin-left: 0;
+        }
+        $i: $i + 1;
+      }
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.offset-l#{$i} {
+          margin-left: $perc;
+        }
+        $i: $i + 1;
+      }
+
+    }
+
+  }
+}
diff --git a/system/admin/static/editor/sass/components/_icons-material-design.scss b/system/admin/static/editor/sass/components/_icons-material-design.scss
new file mode 100644
index 0000000..3c78470
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_icons-material-design.scss
@@ -0,0 +1,3257 @@
+$font-mdi   : 'Material-Design-Icons';
+$mdi-prefix : 'mdi-';
+
+@font-face {
+    font-family: "#{$font-mdi}";
+    src:url("#{$icons-font-path}#{$font-mdi}.eot?#iefix") format("embedded-opentype"),
+        url("#{$icons-font-path}#{$font-mdi}.woff2") format("woff2"),
+        url("#{$icons-font-path}#{$font-mdi}.woff") format("woff"),
+        url("#{$icons-font-path}#{$font-mdi}.ttf") format("truetype"),
+        url("#{$icons-font-path}#{$font-mdi}.svg##{$font-mdi}") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="mdi-"], [class*="mdi-"] {
+    speak: none;
+    display: inline-block;
+    font-family: "Material-Design-Icons";
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transform: translate(0, 0);
+    &:before {
+        display: inline-block;
+        speak: none;
+        text-decoration: inherit;
+    }
+    &.pull-left {
+        margin-right: .3em;
+    }
+    &.pull-right{
+        margin-left: .3em;
+    }
+    &.mdi-lg:before, &.mdi-lg:after {
+        font-size: 1.33333333em;
+        line-height: 0.75em;
+        vertical-align: -15%;
+    }
+    &.mdi-2x:before, &.mdi-2x:after {
+        font-size: 2em;
+    }
+    &.mdi-3x:before, &.mdi-3x:after {
+        font-size: 3em;
+    }
+    &.mdi-4x:before, &.mdi-4x:after {
+        font-size: 4em;
+    }
+    &.mdi-5x:before, &.mdi-5x:after {
+        font-size: 5em;
+    }
+}
+
+[class^="mdi-device-signal-cellular-"],
+[class^="mdi-device-battery-"],
+[class^="mdi-device-battery-charging-"],
+[class^="mdi-device-signal-cellular-connected-no-internet-"],
+[class^="mdi-device-signal-wifi-"],
+[class^="mdi-device-signal-wifi-statusbar-not-connected"],
+.mdi-device-network-wifi{
+    &:after {
+        opacity: .3;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        display: inline-block;
+        speak: none;
+        text-decoration: inherit;
+    }
+}
+
+[class^="mdi-device-signal-cellular-"]:after {content:"\e758";}
+[class^="mdi-device-battery-"]:after {content:"\e735";}
+[class^="mdi-device-battery-charging-"]:after {content:"\e733";}
+[class^="mdi-device-signal-cellular-connected-no-internet-"]:after {content:"\e75d";}
+[class^="mdi-device-signal-wifi-"]:after, .mdi-device-network-wifi:after {content:"\e765";}
+[class^="mdi-device-signal-wifi-statusbasr-not-connected"]:after {content:"\e8f7";}
+
+.mdi-device-signal-cellular-off, .mdi-device-signal-cellular-null, .mdi-device-signal-cellular-no-sim, .mdi-device-signal-wifi-off, .mdi-device-signal-wifi-4-bar, .mdi-device-signal-cellular-4-bar, .mdi-device-battery-alert, .mdi-device-signal-cellular-connected-no-internet-4-bar, .mdi-device-battery-std, .mdi-device-battery-full .mdi-device-battery-unknown {
+    &:after {
+        content: "";
+    }
+}
+
+.mdi-fw {
+    width: 1.28571429em;
+    text-align: center;
+}
+.mdi-ul {
+    padding-left: 0;
+    margin-left: 2.14285714em;
+    list-style-type: none;
+}
+.mdi-ul > li {
+    position: relative;
+}
+.mdi-li {
+    position: absolute;
+    left: -2.14285714em;
+    width: 2.14285714em;
+    top: 0.14285714em;
+    text-align: center;
+}
+.mdi-li.mdi-lg {
+    left: -1.85714286em;
+}
+.mdi-border {
+    padding: .2em .25em .15em;
+    border: solid 0.08em #eeeeee;
+    border-radius: .1em;
+}
+
+.mdi-spin {
+    -webkit-animation: mdi-spin 2s infinite linear;
+    animation: mdi-spin 2s infinite linear;
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    -o-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+}
+.mdi-pulse {
+    -webkit-animation: mdi-spin 1s steps(8) infinite;
+    animation: mdi-spin 1s steps(8) infinite ;
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    -o-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+}
+@-webkit-keyframes mdi-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+@keyframes mdi-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+.mdi-rotate-90 {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+.mdi-rotate-180 {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+.mdi-rotate-270 {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+    -webkit-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    transform: rotate(270deg);
+}
+.mdi-flip-horizontal {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+    -webkit-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+}
+.mdi-flip-vertical {
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+    -webkit-transform: scale(1, -1);
+    -ms-transform: scale(1, -1);
+    transform: scale(1, -1);
+}
+:root .mdi-rotate-90,
+:root .mdi-rotate-180,
+:root .mdi-rotate-270,
+:root .mdi-flip-horizontal,
+:root .mdi-flip-vertical {
+    filter: none;
+}
+.mdi-stack {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    vertical-align: middle;
+}
+.mdi-stack-1x,
+.mdi-stack-2x {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+.mdi-stack-1x {
+    line-height: inherit;
+}
+.mdi-stack-2x {
+    font-size: 2em;
+}
+.mdi-inverse {
+    color: #ffffff;
+}
+
+
+/* Start Icons */
+
+
+.mdi-action-3d-rotation:before {
+    content: "\e600";
+}
+
+.mdi-action-accessibility:before {
+    content: "\e601";
+}
+
+.mdi-action-account-balance-wallet:before {
+    content: "\e602";
+}
+
+.mdi-action-account-balance:before {
+    content: "\e603";
+}
+
+.mdi-action-account-box:before {
+    content: "\e604";
+}
+
+.mdi-action-account-child:before {
+    content: "\e605";
+}
+
+.mdi-action-account-circle:before {
+    content: "\e606";
+}
+
+.mdi-action-add-shopping-cart:before {
+    content: "\e607";
+}
+
+.mdi-action-alarm-add:before {
+    content: "\e608";
+}
+
+.mdi-action-alarm-off:before {
+    content: "\e609";
+}
+
+.mdi-action-alarm-on:before {
+    content: "\e60a";
+}
+
+.mdi-action-alarm:before {
+    content: "\e60b";
+}
+
+.mdi-action-android:before {
+    content: "\e60c";
+}
+
+.mdi-action-announcement:before {
+    content: "\e60d";
+}
+
+.mdi-action-aspect-ratio:before {
+    content: "\e60e";
+}
+
+.mdi-action-assessment:before {
+    content: "\e60f";
+}
+
+.mdi-action-assignment-ind:before {
+    content: "\e610";
+}
+
+.mdi-action-assignment-late:before {
+    content: "\e611";
+}
+
+.mdi-action-assignment-return:before {
+    content: "\e612";
+}
+
+.mdi-action-assignment-returned:before {
+    content: "\e613";
+}
+
+.mdi-action-assignment-turned-in:before {
+    content: "\e614";
+}
+
+.mdi-action-assignment:before {
+    content: "\e615";
+}
+
+.mdi-action-autorenew:before {
+    content: "\e616";
+}
+
+.mdi-action-backup:before {
+    content: "\e617";
+}
+
+.mdi-action-book:before {
+    content: "\e618";
+}
+
+.mdi-action-bookmark-outline:before {
+    content: "\e619";
+}
+
+.mdi-action-bookmark:before {
+    content: "\e61a";
+}
+
+.mdi-action-bug-report:before {
+    content: "\e61b";
+}
+
+.mdi-action-cached:before {
+    content: "\e61c";
+}
+
+.mdi-action-check-circle:before {
+    content: "\e61d";
+}
+
+.mdi-action-class:before {
+    content: "\e61e";
+}
+
+.mdi-action-credit-card:before {
+    content: "\e61f";
+}
+
+.mdi-action-dashboard:before {
+    content: "\e620";
+}
+
+.mdi-action-delete:before {
+    content: "\e621";
+}
+
+.mdi-action-description:before {
+    content: "\e622";
+}
+
+.mdi-action-dns:before {
+    content: "\e623";
+}
+
+.mdi-action-done-all:before {
+    content: "\e624";
+}
+
+.mdi-action-done:before {
+    content: "\e625";
+}
+
+.mdi-action-event:before {
+    content: "\e626";
+}
+
+.mdi-action-exit-to-app:before {
+    content: "\e627";
+}
+
+.mdi-action-explore:before {
+    content: "\e628";
+}
+
+.mdi-action-extension:before {
+    content: "\e629";
+}
+
+.mdi-action-face-unlock:before {
+    content: "\e62a";
+}
+
+.mdi-action-favorite-outline:before {
+    content: "\e62b";
+}
+
+.mdi-action-favorite:before {
+    content: "\e62c";
+}
+
+.mdi-action-find-in-page:before {
+    content: "\e62d";
+}
+
+.mdi-action-find-replace:before {
+    content: "\e62e";
+}
+
+.mdi-action-flip-to-back:before {
+    content: "\e62f";
+}
+
+.mdi-action-flip-to-front:before {
+    content: "\e630";
+}
+
+.mdi-action-get-app:before {
+    content: "\e631";
+}
+
+.mdi-action-grade:before {
+    content: "\e632";
+}
+
+.mdi-action-group-work:before {
+    content: "\e633";
+}
+
+.mdi-action-help:before {
+    content: "\e634";
+}
+
+.mdi-action-highlight-remove:before {
+    content: "\e635";
+}
+
+.mdi-action-history:before {
+    content: "\e636";
+}
+
+.mdi-action-home:before {
+    content: "\e637";
+}
+
+.mdi-action-https:before {
+    content: "\e638";
+}
+
+.mdi-action-info-outline:before {
+    content: "\e639";
+}
+
+.mdi-action-info:before {
+    content: "\e63a";
+}
+
+.mdi-action-input:before {
+    content: "\e63b";
+}
+
+.mdi-action-invert-colors:before {
+    content: "\e63c";
+}
+
+.mdi-action-label-outline:before {
+    content: "\e63d";
+}
+
+.mdi-action-label:before {
+    content: "\e63e";
+}
+
+.mdi-action-language:before {
+    content: "\e63f";
+}
+
+.mdi-action-launch:before {
+    content: "\e640";
+}
+
+.mdi-action-list:before {
+    content: "\e641";
+}
+
+.mdi-action-lock-open:before {
+    content: "\e642";
+}
+
+.mdi-action-lock-outline:before {
+    content: "\e643";
+}
+
+.mdi-action-lock:before {
+    content: "\e644";
+}
+
+.mdi-action-loyalty:before {
+    content: "\e645";
+}
+
+.mdi-action-markunread-mailbox:before {
+    content: "\e646";
+}
+
+.mdi-action-note-add:before {
+    content: "\e647";
+}
+
+.mdi-action-open-in-browser:before {
+    content: "\e648";
+}
+
+.mdi-action-open-in-new:before {
+    content: "\e649";
+}
+
+.mdi-action-open-with:before {
+    content: "\e64a";
+}
+
+.mdi-action-pageview:before {
+    content: "\e64b";
+}
+
+.mdi-action-payment:before {
+    content: "\e64c";
+}
+
+.mdi-action-perm-camera-mic:before {
+    content: "\e64d";
+}
+
+.mdi-action-perm-contact-cal:before {
+    content: "\e64e";
+}
+
+.mdi-action-perm-data-setting:before {
+    content: "\e64f";
+}
+
+.mdi-action-perm-device-info:before {
+    content: "\e650";
+}
+
+.mdi-action-perm-identity:before {
+    content: "\e651";
+}
+
+.mdi-action-perm-media:before {
+    content: "\e652";
+}
+
+.mdi-action-perm-phone-msg:before {
+    content: "\e653";
+}
+
+.mdi-action-perm-scan-wifi:before {
+    content: "\e654";
+}
+
+.mdi-action-picture-in-picture:before {
+    content: "\e655";
+}
+
+.mdi-action-polymer:before {
+    content: "\e656";
+}
+
+.mdi-action-print:before {
+    content: "\e657";
+}
+
+.mdi-action-query-builder:before {
+    content: "\e658";
+}
+
+.mdi-action-question-answer:before {
+    content: "\e659";
+}
+
+.mdi-action-receipt:before {
+    content: "\e65a";
+}
+
+.mdi-action-redeem:before {
+    content: "\e65b";
+}
+
+.mdi-action-reorder:before {
+    content: "\e65c";
+}
+
+.mdi-action-report-problem:before {
+    content: "\e65d";
+}
+
+.mdi-action-restore:before {
+    content: "\e65e";
+}
+
+.mdi-action-room:before {
+    content: "\e65f";
+}
+
+.mdi-action-schedule:before {
+    content: "\e660";
+}
+
+.mdi-action-search:before {
+    content: "\e661";
+}
+
+.mdi-action-settings-applications:before {
+    content: "\e662";
+}
+
+.mdi-action-settings-backup-restore:before {
+    content: "\e663";
+}
+
+.mdi-action-settings-bluetooth:before {
+    content: "\e664";
+}
+
+.mdi-action-settings-cell:before {
+    content: "\e665";
+}
+
+.mdi-action-settings-display:before {
+    content: "\e666";
+}
+
+.mdi-action-settings-ethernet:before {
+    content: "\e667";
+}
+
+.mdi-action-settings-input-antenna:before {
+    content: "\e668";
+}
+
+.mdi-action-settings-input-component:before {
+    content: "\e669";
+}
+
+.mdi-action-settings-input-composite:before {
+    content: "\e66a";
+}
+
+.mdi-action-settings-input-hdmi:before {
+    content: "\e66b";
+}
+
+.mdi-action-settings-input-svideo:before {
+    content: "\e66c";
+}
+
+.mdi-action-settings-overscan:before {
+    content: "\e66d";
+}
+
+.mdi-action-settings-phone:before {
+    content: "\e66e";
+}
+
+.mdi-action-settings-power:before {
+    content: "\e66f";
+}
+
+.mdi-action-settings-remote:before {
+    content: "\e670";
+}
+
+.mdi-action-settings-voice:before {
+    content: "\e671";
+}
+
+.mdi-action-settings:before {
+    content: "\e672";
+}
+
+.mdi-action-shop-two:before {
+    content: "\e673";
+}
+
+.mdi-action-shop:before {
+    content: "\e674";
+}
+
+.mdi-action-shopping-basket:before {
+    content: "\e675";
+}
+
+.mdi-action-shopping-cart:before {
+    content: "\e676";
+}
+
+.mdi-action-speaker-notes:before {
+    content: "\e677";
+}
+
+.mdi-action-spellcheck:before {
+    content: "\e678";
+}
+
+.mdi-action-star-rate:before {
+    content: "\e679";
+}
+
+.mdi-action-stars:before {
+    content: "\e67a";
+}
+
+.mdi-action-store:before {
+    content: "\e67b";
+}
+
+.mdi-action-subject:before {
+    content: "\e67c";
+}
+
+.mdi-action-supervisor-account:before {
+    content: "\e67d";
+}
+
+.mdi-action-swap-horiz:before {
+    content: "\e67e";
+}
+
+.mdi-action-swap-vert-circle:before {
+    content: "\e67f";
+}
+
+.mdi-action-swap-vert:before {
+    content: "\e680";
+}
+
+.mdi-action-system-update-tv:before {
+    content: "\e681";
+}
+
+.mdi-action-tab-unselected:before {
+    content: "\e682";
+}
+
+.mdi-action-tab:before {
+    content: "\e683";
+}
+
+.mdi-action-theaters:before {
+    content: "\e684";
+}
+
+.mdi-action-thumb-down:before {
+    content: "\e685";
+}
+
+.mdi-action-thumb-up:before {
+    content: "\e686";
+}
+
+.mdi-action-thumbs-up-down:before {
+    content: "\e687";
+}
+
+.mdi-action-toc:before {
+    content: "\e688";
+}
+
+.mdi-action-today:before {
+    content: "\e689";
+}
+
+.mdi-action-track-changes:before {
+    content: "\e68a";
+}
+
+.mdi-action-translate:before {
+    content: "\e68b";
+}
+
+.mdi-action-trending-down:before {
+    content: "\e68c";
+}
+
+.mdi-action-trending-neutral:before {
+    content: "\e68d";
+}
+
+.mdi-action-trending-up:before {
+    content: "\e68e";
+}
+
+.mdi-action-turned-in-not:before {
+    content: "\e68f";
+}
+
+.mdi-action-turned-in:before {
+    content: "\e690";
+}
+
+.mdi-action-verified-user:before {
+    content: "\e691";
+}
+
+.mdi-action-view-agenda:before {
+    content: "\e692";
+}
+
+.mdi-action-view-array:before {
+    content: "\e693";
+}
+
+.mdi-action-view-carousel:before {
+    content: "\e694";
+}
+
+.mdi-action-view-column:before {
+    content: "\e695";
+}
+
+.mdi-action-view-day:before {
+    content: "\e696";
+}
+
+.mdi-action-view-headline:before {
+    content: "\e697";
+}
+
+.mdi-action-view-list:before {
+    content: "\e698";
+}
+
+.mdi-action-view-module:before {
+    content: "\e699";
+}
+
+.mdi-action-view-quilt:before {
+    content: "\e69a";
+}
+
+.mdi-action-view-stream:before {
+    content: "\e69b";
+}
+
+.mdi-action-view-week:before {
+    content: "\e69c";
+}
+
+.mdi-action-visibility-off:before {
+    content: "\e69d";
+}
+
+.mdi-action-visibility:before {
+    content: "\e69e";
+}
+
+.mdi-action-wallet-giftcard:before {
+    content: "\e69f";
+}
+
+.mdi-action-wallet-membership:before {
+    content: "\e6a0";
+}
+
+.mdi-action-wallet-travel:before {
+    content: "\e6a1";
+}
+
+.mdi-action-work:before {
+    content: "\e6a2";
+}
+
+.mdi-alert-error:before {
+    content: "\e6a3";
+}
+
+.mdi-alert-warning:before {
+    content: "\e6a4";
+}
+
+.mdi-av-album:before {
+    content: "\e6a5";
+}
+
+.mdi-av-closed-caption:before {
+    content: "\e6a6";
+}
+
+.mdi-av-equalizer:before {
+    content: "\e6a7";
+}
+
+.mdi-av-explicit:before {
+    content: "\e6a8";
+}
+
+.mdi-av-fast-forward:before {
+    content: "\e6a9";
+}
+
+.mdi-av-fast-rewind:before {
+    content: "\e6aa";
+}
+
+.mdi-av-games:before {
+    content: "\e6ab";
+}
+
+.mdi-av-hearing:before {
+    content: "\e6ac";
+}
+
+.mdi-av-high-quality:before {
+    content: "\e6ad";
+}
+
+.mdi-av-loop:before {
+    content: "\e6ae";
+}
+
+.mdi-av-mic-none:before {
+    content: "\e6af";
+}
+
+.mdi-av-mic-off:before {
+    content: "\e6b0";
+}
+
+.mdi-av-mic:before {
+    content: "\e6b1";
+}
+
+.mdi-av-movie:before {
+    content: "\e6b2";
+}
+
+.mdi-av-my-library-add:before {
+    content: "\e6b3";
+}
+
+.mdi-av-my-library-books:before {
+    content: "\e6b4";
+}
+
+.mdi-av-my-library-music:before {
+    content: "\e6b5";
+}
+
+.mdi-av-new-releases:before {
+    content: "\e6b6";
+}
+
+.mdi-av-not-interested:before {
+    content: "\e6b7";
+}
+
+.mdi-av-pause-circle-fill:before {
+    content: "\e6b8";
+}
+
+.mdi-av-pause-circle-outline:before {
+    content: "\e6b9";
+}
+
+.mdi-av-pause:before {
+    content: "\e6ba";
+}
+
+.mdi-av-play-arrow:before {
+    content: "\e6bb";
+}
+
+.mdi-av-play-circle-fill:before {
+    content: "\e6bc";
+}
+
+.mdi-av-play-circle-outline:before {
+    content: "\e6bd";
+}
+
+.mdi-av-play-shopping-bag:before {
+    content: "\e6be";
+}
+
+.mdi-av-playlist-add:before {
+    content: "\e6bf";
+}
+
+.mdi-av-queue-music:before {
+    content: "\e6c0";
+}
+
+.mdi-av-queue:before {
+    content: "\e6c1";
+}
+
+.mdi-av-radio:before {
+    content: "\e6c2";
+}
+
+.mdi-av-recent-actors:before {
+    content: "\e6c3";
+}
+
+.mdi-av-repeat-one:before {
+    content: "\e6c4";
+}
+
+.mdi-av-repeat:before {
+    content: "\e6c5";
+}
+
+.mdi-av-replay:before {
+    content: "\e6c6";
+}
+
+.mdi-av-shuffle:before {
+    content: "\e6c7";
+}
+
+.mdi-av-skip-next:before {
+    content: "\e6c8";
+}
+
+.mdi-av-skip-previous:before {
+    content: "\e6c9";
+}
+
+.mdi-av-snooze:before {
+    content: "\e6ca";
+}
+
+.mdi-av-stop:before {
+    content: "\e6cb";
+}
+
+.mdi-av-subtitles:before {
+    content: "\e6cc";
+}
+
+.mdi-av-surround-sound:before {
+    content: "\e6cd";
+}
+
+.mdi-av-timer:before {
+    content: "\e6ce";
+}
+
+.mdi-av-video-collection:before {
+    content: "\e6cf";
+}
+
+.mdi-av-videocam-off:before {
+    content: "\e6d0";
+}
+
+.mdi-av-videocam:before {
+    content: "\e6d1";
+}
+
+.mdi-av-volume-down:before {
+    content: "\e6d2";
+}
+
+.mdi-av-volume-mute:before {
+    content: "\e6d3";
+}
+
+.mdi-av-volume-off:before {
+    content: "\e6d4";
+}
+
+.mdi-av-volume-up:before {
+    content: "\e6d5";
+}
+
+.mdi-av-web:before {
+    content: "\e6d6";
+}
+
+.mdi-communication-business:before {
+    content: "\e6d7";
+}
+
+.mdi-communication-call-end:before {
+    content: "\e6d8";
+}
+
+.mdi-communication-call-made:before {
+    content: "\e6d9";
+}
+
+.mdi-communication-call-merge:before {
+    content: "\e6da";
+}
+
+.mdi-communication-call-missed:before {
+    content: "\e6db";
+}
+
+.mdi-communication-call-received:before {
+    content: "\e6dc";
+}
+
+.mdi-communication-call-split:before {
+    content: "\e6dd";
+}
+
+.mdi-communication-call:before {
+    content: "\e6de";
+}
+
+.mdi-communication-chat:before {
+    content: "\e6df";
+}
+
+.mdi-communication-clear-all:before {
+    content: "\e6e0";
+}
+
+.mdi-communication-comment:before {
+    content: "\e6e1";
+}
+
+.mdi-communication-contacts:before {
+    content: "\e6e2";
+}
+
+.mdi-communication-dialer-sip:before {
+    content: "\e6e3";
+}
+
+.mdi-communication-dialpad:before {
+    content: "\e6e4";
+}
+
+.mdi-communication-dnd-on:before {
+    content: "\e6e5";
+}
+
+.mdi-communication-email:before {
+    content: "\e6e6";
+}
+
+.mdi-communication-forum:before {
+    content: "\e6e7";
+}
+
+.mdi-communication-import-export:before {
+    content: "\e6e8";
+}
+
+.mdi-communication-invert-colors-off:before {
+    content: "\e6e9";
+}
+
+.mdi-communication-invert-colors-on:before {
+    content: "\e6ea";
+}
+
+.mdi-communication-live-help:before {
+    content: "\e6eb";
+}
+
+.mdi-communication-location-off:before {
+    content: "\e6ec";
+}
+
+.mdi-communication-location-on:before {
+    content: "\e6ed";
+}
+
+.mdi-communication-message:before {
+    content: "\e6ee";
+}
+
+.mdi-communication-messenger:before {
+    content: "\e6ef";
+}
+
+.mdi-communication-no-sim:before {
+    content: "\e6f0";
+}
+
+.mdi-communication-phone:before {
+    content: "\e6f1";
+}
+
+.mdi-communication-portable-wifi-off:before {
+    content: "\e6f2";
+}
+
+.mdi-communication-quick-contacts-dialer:before {
+    content: "\e6f3";
+}
+
+.mdi-communication-quick-contacts-mail:before {
+    content: "\e6f4";
+}
+
+.mdi-communication-ring-volume:before {
+    content: "\e6f5";
+}
+
+.mdi-communication-stay-current-landscape:before {
+    content: "\e6f6";
+}
+
+.mdi-communication-stay-current-portrait:before {
+    content: "\e6f7";
+}
+
+.mdi-communication-stay-primary-landscape:before {
+    content: "\e6f8";
+}
+
+.mdi-communication-stay-primary-portrait:before {
+    content: "\e6f9";
+}
+
+.mdi-communication-swap-calls:before {
+    content: "\e6fa";
+}
+
+.mdi-communication-textsms:before {
+    content: "\e6fb";
+}
+
+.mdi-communication-voicemail:before {
+    content: "\e6fc";
+}
+
+.mdi-communication-vpn-key:before {
+    content: "\e6fd";
+}
+
+.mdi-content-add-box:before {
+    content: "\e6fe";
+}
+
+.mdi-content-add-circle-outline:before {
+    content: "\e6ff";
+}
+
+.mdi-content-add-circle:before {
+    content: "\e700";
+}
+
+.mdi-content-add:before {
+    content: "\e701";
+}
+
+.mdi-content-archive:before {
+    content: "\e702";
+}
+
+.mdi-content-backspace:before {
+    content: "\e703";
+}
+
+.mdi-content-block:before {
+    content: "\e704";
+}
+
+.mdi-content-clear:before {
+    content: "\e705";
+}
+
+.mdi-content-content-copy:before {
+    content: "\e706";
+}
+
+.mdi-content-content-cut:before {
+    content: "\e707";
+}
+
+.mdi-content-content-paste:before {
+    content: "\e708";
+}
+
+.mdi-content-create:before {
+    content: "\e709";
+}
+
+.mdi-content-drafts:before {
+    content: "\e70a";
+}
+
+.mdi-content-filter-list:before {
+    content: "\e70b";
+}
+
+.mdi-content-flag:before {
+    content: "\e70c";
+}
+
+.mdi-content-forward:before {
+    content: "\e70d";
+}
+
+.mdi-content-gesture:before {
+    content: "\e70e";
+}
+
+.mdi-content-inbox:before {
+    content: "\e70f";
+}
+
+.mdi-content-link:before {
+    content: "\e710";
+}
+
+.mdi-content-mail:before {
+    content: "\e711";
+}
+
+.mdi-content-markunread:before {
+    content: "\e712";
+}
+
+.mdi-content-redo:before {
+    content: "\e713";
+}
+
+.mdi-content-remove-circle-outline:before {
+    content: "\e714";
+}
+
+.mdi-content-remove-circle:before {
+    content: "\e715";
+}
+
+.mdi-content-remove:before {
+    content: "\e716";
+}
+
+.mdi-content-reply-all:before {
+    content: "\e717";
+}
+
+.mdi-content-reply:before {
+    content: "\e718";
+}
+
+.mdi-content-report:before {
+    content: "\e719";
+}
+
+.mdi-content-save:before {
+    content: "\e71a";
+}
+
+.mdi-content-select-all:before {
+    content: "\e71b";
+}
+
+.mdi-content-send:before {
+    content: "\e71c";
+}
+
+.mdi-content-sort:before {
+    content: "\e71d";
+}
+
+.mdi-content-text-format:before {
+    content: "\e71e";
+}
+
+.mdi-content-undo:before {
+    content: "\e71f";
+}
+
+.mdi-editor-attach-file:before {
+    content: "\e776";
+}
+
+.mdi-editor-attach-money:before {
+    content: "\e777";
+}
+
+.mdi-editor-border-all:before {
+    content: "\e778";
+}
+
+.mdi-editor-border-bottom:before {
+    content: "\e779";
+}
+
+.mdi-editor-border-clear:before {
+    content: "\e77a";
+}
+
+.mdi-editor-border-color:before {
+    content: "\e77b";
+}
+
+.mdi-editor-border-horizontal:before {
+    content: "\e77c";
+}
+
+.mdi-editor-border-inner:before {
+    content: "\e77d";
+}
+
+.mdi-editor-border-left:before {
+    content: "\e77e";
+}
+
+.mdi-editor-border-outer:before {
+    content: "\e77f";
+}
+
+.mdi-editor-border-right:before {
+    content: "\e780";
+}
+
+.mdi-editor-border-style:before {
+    content: "\e781";
+}
+
+.mdi-editor-border-top:before {
+    content: "\e782";
+}
+
+.mdi-editor-border-vertical:before {
+    content: "\e783";
+}
+
+.mdi-editor-format-align-center:before {
+    content: "\e784";
+}
+
+.mdi-editor-format-align-justify:before {
+    content: "\e785";
+}
+
+.mdi-editor-format-align-left:before {
+    content: "\e786";
+}
+
+.mdi-editor-format-align-right:before {
+    content: "\e787";
+}
+
+.mdi-editor-format-bold:before {
+    content: "\e788";
+}
+
+.mdi-editor-format-clear:before {
+    content: "\e789";
+}
+
+.mdi-editor-format-color-fill:before {
+    content: "\e78a";
+}
+
+.mdi-editor-format-color-reset:before {
+    content: "\e78b";
+}
+
+.mdi-editor-format-color-text:before {
+    content: "\e78c";
+}
+
+.mdi-editor-format-indent-decrease:before {
+    content: "\e78d";
+}
+
+.mdi-editor-format-indent-increase:before {
+    content: "\e78e";
+}
+
+.mdi-editor-format-italic:before {
+    content: "\e78f";
+}
+
+.mdi-editor-format-line-spacing:before {
+    content: "\e790";
+}
+
+.mdi-editor-format-list-bulleted:before {
+    content: "\e791";
+}
+
+.mdi-editor-format-list-numbered:before {
+    content: "\e792";
+}
+
+.mdi-editor-format-paint:before {
+    content: "\e793";
+}
+
+.mdi-editor-format-quote:before {
+    content: "\e794";
+}
+
+.mdi-editor-format-size:before {
+    content: "\e795";
+}
+
+.mdi-editor-format-strikethrough:before {
+    content: "\e796";
+}
+
+.mdi-editor-format-textdirection-l-to-r:before {
+    content: "\e797";
+}
+
+.mdi-editor-format-textdirection-r-to-l:before {
+    content: "\e798";
+}
+
+.mdi-editor-format-underline:before {
+    content: "\e799";
+}
+
+.mdi-editor-functions:before {
+    content: "\e79a";
+}
+
+.mdi-editor-insert-chart:before {
+    content: "\e79b";
+}
+
+.mdi-editor-insert-comment:before {
+    content: "\e79c";
+}
+
+.mdi-editor-insert-drive-file:before {
+    content: "\e79d";
+}
+
+.mdi-editor-insert-emoticon:before {
+    content: "\e79e";
+}
+
+.mdi-editor-insert-invitation:before {
+    content: "\e79f";
+}
+
+.mdi-editor-insert-link:before {
+    content: "\e7a0";
+}
+
+.mdi-editor-insert-photo:before {
+    content: "\e7a1";
+}
+
+.mdi-editor-merge-type:before {
+    content: "\e7a2";
+}
+
+.mdi-editor-mode-comment:before {
+    content: "\e7a3";
+}
+
+.mdi-editor-mode-edit:before {
+    content: "\e7a4";
+}
+
+.mdi-editor-publish:before {
+    content: "\e7a5";
+}
+
+.mdi-editor-vertical-align-bottom:before {
+    content: "\e7a6";
+}
+
+.mdi-editor-vertical-align-center:before {
+    content: "\e7a7";
+}
+
+.mdi-editor-vertical-align-top:before {
+    content: "\e7a8";
+}
+
+.mdi-editor-wrap-text:before {
+    content: "\e7a9";
+}
+
+.mdi-file-attachment:before {
+    content: "\e7aa";
+}
+
+.mdi-file-cloud-circle:before {
+    content: "\e7ab";
+}
+
+.mdi-file-cloud-done:before {
+    content: "\e7ac";
+}
+
+.mdi-file-cloud-download:before {
+    content: "\e7ad";
+}
+
+.mdi-file-cloud-off:before {
+    content: "\e7ae";
+}
+
+.mdi-file-cloud-queue:before {
+    content: "\e7af";
+}
+
+.mdi-file-cloud-upload:before {
+    content: "\e7b0";
+}
+
+.mdi-file-cloud:before {
+    content: "\e7b1";
+}
+
+.mdi-file-file-download:before {
+    content: "\e7b2";
+}
+
+.mdi-file-file-upload:before {
+    content: "\e7b3";
+}
+
+.mdi-file-folder-open:before {
+    content: "\e7b4";
+}
+
+.mdi-file-folder-shared:before {
+    content: "\e7b5";
+}
+
+.mdi-file-folder:before {
+    content: "\e7b6";
+}
+
+.mdi-device-access-alarm:before {
+    content: "\e720";
+}
+
+.mdi-device-access-alarms:before {
+    content: "\e721";
+}
+
+.mdi-device-access-time:before {
+    content: "\e722";
+}
+
+.mdi-device-add-alarm:before {
+    content: "\e723";
+}
+
+.mdi-device-airplanemode-off:before {
+    content: "\e724";
+}
+
+.mdi-device-airplanemode-on:before {
+    content: "\e725";
+}
+
+.mdi-device-battery-20:before {
+    content: "\e726";
+}
+
+.mdi-device-battery-30:before {
+    content: "\e727";
+}
+
+.mdi-device-battery-50:before {
+    content: "\e728";
+}
+
+.mdi-device-battery-60:before {
+    content: "\e729";
+}
+
+.mdi-device-battery-80:before {
+    content: "\e72a";
+}
+
+.mdi-device-battery-90:before {
+    content: "\e72b";
+}
+
+.mdi-device-battery-alert:before {
+    content: "\e72c";
+}
+
+.mdi-device-battery-charging-20:before {
+    content: "\e72d";
+}
+
+.mdi-device-battery-charging-30:before {
+    content: "\e72e";
+}
+
+.mdi-device-battery-charging-50:before {
+    content: "\e72f";
+}
+
+.mdi-device-battery-charging-60:before {
+    content: "\e730";
+}
+
+.mdi-device-battery-charging-80:before {
+    content: "\e731";
+}
+
+.mdi-device-battery-charging-90:before {
+    content: "\e732";
+}
+
+.mdi-device-battery-charging-full:before {
+    content: "\e733";
+}
+
+.mdi-device-battery-full:before {
+    content: "\e734";
+}
+
+.mdi-device-battery-std:before {
+    content: "\e735";
+}
+
+.mdi-device-battery-unknown:before {
+    content: "\e736";
+}
+
+.mdi-device-bluetooth-connected:before {
+    content: "\e737";
+}
+
+.mdi-device-bluetooth-disabled:before {
+    content: "\e738";
+}
+
+.mdi-device-bluetooth-searching:before {
+    content: "\e739";
+}
+
+.mdi-device-bluetooth:before {
+    content: "\e73a";
+}
+
+.mdi-device-brightness-auto:before {
+    content: "\e73b";
+}
+
+.mdi-device-brightness-high:before {
+    content: "\e73c";
+}
+
+.mdi-device-brightness-low:before {
+    content: "\e73d";
+}
+
+.mdi-device-brightness-medium:before {
+    content: "\e73e";
+}
+
+.mdi-device-data-usage:before {
+    content: "\e73f";
+}
+
+.mdi-device-developer-mode:before {
+    content: "\e740";
+}
+
+.mdi-device-devices:before {
+    content: "\e741";
+}
+
+.mdi-device-dvr:before {
+    content: "\e742";
+}
+
+.mdi-device-gps-fixed:before {
+    content: "\e743";
+}
+
+.mdi-device-gps-not-fixed:before {
+    content: "\e744";
+}
+
+.mdi-device-gps-off:before {
+    content: "\e745";
+}
+
+.mdi-device-location-disabled:before {
+    content: "\e746";
+}
+
+.mdi-device-location-searching:before {
+    content: "\e747";
+}
+
+.mdi-device-multitrack-audio:before {
+    content: "\e748";
+}
+
+.mdi-device-network-cell:before {
+    content: "\e749";
+}
+
+.mdi-device-network-wifi:before {
+    content: "\e74a";
+}
+
+.mdi-device-nfc:before {
+    content: "\e74b";
+}
+
+.mdi-device-now-wallpaper:before {
+    content: "\e74c";
+}
+
+.mdi-device-now-widgets:before {
+    content: "\e74d";
+}
+
+.mdi-device-screen-lock-landscape:before {
+    content: "\e74e";
+}
+
+.mdi-device-screen-lock-portrait:before {
+    content: "\e74f";
+}
+
+.mdi-device-screen-lock-rotation:before {
+    content: "\e750";
+}
+
+.mdi-device-screen-rotation:before {
+    content: "\e751";
+}
+
+.mdi-device-sd-storage:before {
+    content: "\e752";
+}
+
+.mdi-device-settings-system-daydream:before {
+    content: "\e753";
+}
+
+.mdi-device-signal-cellular-0-bar:before {
+    content: "\e754";
+}
+
+.mdi-device-signal-cellular-1-bar:before {
+    content: "\e755";
+}
+
+.mdi-device-signal-cellular-2-bar:before {
+    content: "\e756";
+}
+
+.mdi-device-signal-cellular-3-bar:before {
+    content: "\e757";
+}
+
+.mdi-device-signal-cellular-4-bar:before {
+    content: "\e758";
+}
+
+.mdi-signal-wifi-statusbar-connected-no-internet-after:before {
+    content: "\e8f6";
+}
+
+.mdi-device-signal-cellular-connected-no-internet-0-bar:before {
+    content: "\e759";
+}
+
+.mdi-device-signal-cellular-connected-no-internet-1-bar:before {
+    content: "\e75a";
+}
+
+.mdi-device-signal-cellular-connected-no-internet-2-bar:before {
+    content: "\e75b";
+}
+
+.mdi-device-signal-cellular-connected-no-internet-3-bar:before {
+    content: "\e75c";
+}
+
+.mdi-device-signal-cellular-connected-no-internet-4-bar:before {
+    content: "\e75d";
+}
+
+.mdi-device-signal-cellular-no-sim:before {
+    content: "\e75e";
+}
+
+.mdi-device-signal-cellular-null:before {
+    content: "\e75f";
+}
+
+.mdi-device-signal-cellular-off:before {
+    content: "\e760";
+}
+
+.mdi-device-signal-wifi-0-bar:before {
+    content: "\e761";
+}
+
+.mdi-device-signal-wifi-1-bar:before {
+    content: "\e762";
+}
+
+.mdi-device-signal-wifi-2-bar:before {
+    content: "\e763";
+}
+
+.mdi-device-signal-wifi-3-bar:before {
+    content: "\e764";
+}
+
+.mdi-device-signal-wifi-4-bar:before {
+    content: "\e765";
+}
+
+.mdi-device-signal-wifi-off:before {
+    content: "\e766";
+}
+
+.mdi-device-signal-wifi-statusbar-1-bar:before {
+    content: "\e767";
+}
+
+.mdi-device-signal-wifi-statusbar-2-bar:before {
+    content: "\e768";
+}
+
+.mdi-device-signal-wifi-statusbar-3-bar:before {
+    content: "\e769";
+}
+
+.mdi-device-signal-wifi-statusbar-4-bar:before {
+    content: "\e76a";
+}
+
+.mdi-device-signal-wifi-statusbar-connected-no-internet-:before {
+    content: "\e76b";
+}
+
+.mdi-device-signal-wifi-statusbar-connected-no-internet:before {
+    content: "\e76f";
+}
+
+.mdi-device-signal-wifi-statusbar-connected-no-internet-2:before {
+    content: "\e76c";
+}
+
+.mdi-device-signal-wifi-statusbar-connected-no-internet-3:before {
+    content: "\e76d";
+}
+
+.mdi-device-signal-wifi-statusbar-connected-no-internet-4:before {
+    content: "\e76e";
+}
+
+.mdi-signal-wifi-statusbar-not-connected-after:before {
+    content: "\e8f7";
+}
+
+.mdi-device-signal-wifi-statusbar-not-connected:before {
+    content: "\e770";
+}
+
+.mdi-device-signal-wifi-statusbar-null:before {
+    content: "\e771";
+}
+
+.mdi-device-storage:before {
+    content: "\e772";
+}
+
+.mdi-device-usb:before {
+    content: "\e773";
+}
+
+.mdi-device-wifi-lock:before {
+    content: "\e774";
+}
+
+.mdi-device-wifi-tethering:before {
+    content: "\e775";
+}
+
+.mdi-hardware-cast-connected:before {
+    content: "\e7b7";
+}
+
+.mdi-hardware-cast:before {
+    content: "\e7b8";
+}
+
+.mdi-hardware-computer:before {
+    content: "\e7b9";
+}
+
+.mdi-hardware-desktop-mac:before {
+    content: "\e7ba";
+}
+
+.mdi-hardware-desktop-windows:before {
+    content: "\e7bb";
+}
+
+.mdi-hardware-dock:before {
+    content: "\e7bc";
+}
+
+.mdi-hardware-gamepad:before {
+    content: "\e7bd";
+}
+
+.mdi-hardware-headset-mic:before {
+    content: "\e7be";
+}
+
+.mdi-hardware-headset:before {
+    content: "\e7bf";
+}
+
+.mdi-hardware-keyboard-alt:before {
+    content: "\e7c0";
+}
+
+.mdi-hardware-keyboard-arrow-down:before {
+    content: "\e7c1";
+}
+
+.mdi-hardware-keyboard-arrow-left:before {
+    content: "\e7c2";
+}
+
+.mdi-hardware-keyboard-arrow-right:before {
+    content: "\e7c3";
+}
+
+.mdi-hardware-keyboard-arrow-up:before {
+    content: "\e7c4";
+}
+
+.mdi-hardware-keyboard-backspace:before {
+    content: "\e7c5";
+}
+
+.mdi-hardware-keyboard-capslock:before {
+    content: "\e7c6";
+}
+
+.mdi-hardware-keyboard-control:before {
+    content: "\e7c7";
+}
+
+.mdi-hardware-keyboard-hide:before {
+    content: "\e7c8";
+}
+
+.mdi-hardware-keyboard-return:before {
+    content: "\e7c9";
+}
+
+.mdi-hardware-keyboard-tab:before {
+    content: "\e7ca";
+}
+
+.mdi-hardware-keyboard-voice:before {
+    content: "\e7cb";
+}
+
+.mdi-hardware-keyboard:before {
+    content: "\e7cc";
+}
+
+.mdi-hardware-laptop-chromebook:before {
+    content: "\e7cd";
+}
+
+.mdi-hardware-laptop-mac:before {
+    content: "\e7ce";
+}
+
+.mdi-hardware-laptop-windows:before {
+    content: "\e7cf";
+}
+
+.mdi-hardware-laptop:before {
+    content: "\e7d0";
+}
+
+.mdi-hardware-memory:before {
+    content: "\e7d1";
+}
+
+.mdi-hardware-mouse:before {
+    content: "\e7d2";
+}
+
+.mdi-hardware-phone-android:before {
+    content: "\e7d3";
+}
+
+.mdi-hardware-phone-iphone:before {
+    content: "\e7d4";
+}
+
+.mdi-hardware-phonelink-off:before {
+    content: "\e7d5";
+}
+
+.mdi-hardware-phonelink:before {
+    content: "\e7d6";
+}
+
+.mdi-hardware-security:before {
+    content: "\e7d7";
+}
+
+.mdi-hardware-sim-card:before {
+    content: "\e7d8";
+}
+
+.mdi-hardware-smartphone:before {
+    content: "\e7d9";
+}
+
+.mdi-hardware-speaker:before {
+    content: "\e7da";
+}
+
+.mdi-hardware-tablet-android:before {
+    content: "\e7db";
+}
+
+.mdi-hardware-tablet-mac:before {
+    content: "\e7dc";
+}
+
+.mdi-hardware-tablet:before {
+    content: "\e7dd";
+}
+
+.mdi-hardware-tv:before {
+    content: "\e7de";
+}
+
+.mdi-hardware-watch:before {
+    content: "\e7df";
+}
+
+.mdi-image-add-to-photos:before {
+    content: "\e7e0";
+}
+
+.mdi-image-adjust:before {
+    content: "\e7e1";
+}
+
+.mdi-image-assistant-photo:before {
+    content: "\e7e2";
+}
+
+.mdi-image-audiotrack:before {
+    content: "\e7e3";
+}
+
+.mdi-image-blur-circular:before {
+    content: "\e7e4";
+}
+
+.mdi-image-blur-linear:before {
+    content: "\e7e5";
+}
+
+.mdi-image-blur-off:before {
+    content: "\e7e6";
+}
+
+.mdi-image-blur-on:before {
+    content: "\e7e7";
+}
+
+.mdi-image-brightness-1:before {
+    content: "\e7e8";
+}
+
+.mdi-image-brightness-2:before {
+    content: "\e7e9";
+}
+
+.mdi-image-brightness-3:before {
+    content: "\e7ea";
+}
+
+.mdi-image-brightness-4:before {
+    content: "\e7eb";
+}
+
+.mdi-image-brightness-5:before {
+    content: "\e7ec";
+}
+
+.mdi-image-brightness-6:before {
+    content: "\e7ed";
+}
+
+.mdi-image-brightness-7:before {
+    content: "\e7ee";
+}
+
+.mdi-image-brush:before {
+    content: "\e7ef";
+}
+
+.mdi-image-camera-alt:before {
+    content: "\e7f0";
+}
+
+.mdi-image-camera-front:before {
+    content: "\e7f1";
+}
+
+.mdi-image-camera-rear:before {
+    content: "\e7f2";
+}
+
+.mdi-image-camera-roll:before {
+    content: "\e7f3";
+}
+
+.mdi-image-camera:before {
+    content: "\e7f4";
+}
+
+.mdi-image-center-focus-strong:before {
+    content: "\e7f5";
+}
+
+.mdi-image-center-focus-weak:before {
+    content: "\e7f6";
+}
+
+.mdi-image-collections:before {
+    content: "\e7f7";
+}
+
+.mdi-image-color-lens:before {
+    content: "\e7f8";
+}
+
+.mdi-image-colorize:before {
+    content: "\e7f9";
+}
+
+.mdi-image-compare:before {
+    content: "\e7fa";
+}
+
+.mdi-image-control-point-duplicate:before {
+    content: "\e7fb";
+}
+
+.mdi-image-control-point:before {
+    content: "\e7fc";
+}
+
+.mdi-image-crop-3-2:before {
+    content: "\e7fd";
+}
+
+.mdi-image-crop-5-4:before {
+    content: "\e7fe";
+}
+
+.mdi-image-crop-7-5:before {
+    content: "\e7ff";
+}
+
+.mdi-image-crop-16-9:before {
+    content: "\e800";
+}
+
+.mdi-image-crop-din:before {
+    content: "\e801";
+}
+
+.mdi-image-crop-free:before {
+    content: "\e802";
+}
+
+.mdi-image-crop-landscape:before {
+    content: "\e803";
+}
+
+.mdi-image-crop-original:before {
+    content: "\e804";
+}
+
+.mdi-image-crop-portrait:before {
+    content: "\e805";
+}
+
+.mdi-image-crop-square:before {
+    content: "\e806";
+}
+
+.mdi-image-crop:before {
+    content: "\e807";
+}
+
+.mdi-image-dehaze:before {
+    content: "\e808";
+}
+
+.mdi-image-details:before {
+    content: "\e809";
+}
+
+.mdi-image-edit:before {
+    content: "\e80a";
+}
+
+.mdi-image-exposure-minus-1:before {
+    content: "\e80b";
+}
+
+.mdi-image-exposure-minus-2:before {
+    content: "\e80c";
+}
+
+.mdi-image-exposure-plus-1:before {
+    content: "\e80d";
+}
+
+.mdi-image-exposure-plus-2:before {
+    content: "\e80e";
+}
+
+.mdi-image-exposure-zero:before {
+    content: "\e80f";
+}
+
+.mdi-image-exposure:before {
+    content: "\e810";
+}
+
+.mdi-image-filter-1:before {
+    content: "\e811";
+}
+
+.mdi-image-filter-2:before {
+    content: "\e812";
+}
+
+.mdi-image-filter-3:before {
+    content: "\e813";
+}
+
+.mdi-image-filter-4:before {
+    content: "\e814";
+}
+
+.mdi-image-filter-5:before {
+    content: "\e815";
+}
+
+.mdi-image-filter-6:before {
+    content: "\e816";
+}
+
+.mdi-image-filter-7:before {
+    content: "\e817";
+}
+
+.mdi-image-filter-8:before {
+    content: "\e818";
+}
+
+.mdi-image-filter-9-plus:before {
+    content: "\e819";
+}
+
+.mdi-image-filter-9:before {
+    content: "\e81a";
+}
+
+.mdi-image-filter-b-and-w:before {
+    content: "\e81b";
+}
+
+.mdi-image-filter-center-focus:before {
+    content: "\e81c";
+}
+
+.mdi-image-filter-drama:before {
+    content: "\e81d";
+}
+
+.mdi-image-filter-frames:before {
+    content: "\e81e";
+}
+
+.mdi-image-filter-hdr:before {
+    content: "\e81f";
+}
+
+.mdi-image-filter-none:before {
+    content: "\e820";
+}
+
+.mdi-image-filter-tilt-shift:before {
+    content: "\e821";
+}
+
+.mdi-image-filter-vintage:before {
+    content: "\e822";
+}
+
+.mdi-image-filter:before {
+    content: "\e823";
+}
+
+.mdi-image-flare:before {
+    content: "\e824";
+}
+
+.mdi-image-flash-auto:before {
+    content: "\e825";
+}
+
+.mdi-image-flash-off:before {
+    content: "\e826";
+}
+
+.mdi-image-flash-on:before {
+    content: "\e827";
+}
+
+.mdi-image-flip:before {
+    content: "\e828";
+}
+
+.mdi-image-gradient:before {
+    content: "\e829";
+}
+
+.mdi-image-grain:before {
+    content: "\e82a";
+}
+
+.mdi-image-grid-off:before {
+    content: "\e82b";
+}
+
+.mdi-image-grid-on:before {
+    content: "\e82c";
+}
+
+.mdi-image-hdr-off:before {
+    content: "\e82d";
+}
+
+.mdi-image-hdr-on:before {
+    content: "\e82e";
+}
+
+.mdi-image-hdr-strong:before {
+    content: "\e82f";
+}
+
+.mdi-image-hdr-weak:before {
+    content: "\e830";
+}
+
+.mdi-image-healing:before {
+    content: "\e831";
+}
+
+.mdi-image-image-aspect-ratio:before {
+    content: "\e832";
+}
+
+.mdi-image-image:before {
+    content: "\e833";
+}
+
+.mdi-image-iso:before {
+    content: "\e834";
+}
+
+.mdi-image-landscape:before {
+    content: "\e835";
+}
+
+.mdi-image-leak-add:before {
+    content: "\e836";
+}
+
+.mdi-image-leak-remove:before {
+    content: "\e837";
+}
+
+.mdi-image-lens:before {
+    content: "\e838";
+}
+
+.mdi-image-looks-3:before {
+    content: "\e839";
+}
+
+.mdi-image-looks-4:before {
+    content: "\e83a";
+}
+
+.mdi-image-looks-5:before {
+    content: "\e83b";
+}
+
+.mdi-image-looks-6:before {
+    content: "\e83c";
+}
+
+.mdi-image-looks-one:before {
+    content: "\e83d";
+}
+
+.mdi-image-looks-two:before {
+    content: "\e83e";
+}
+
+.mdi-image-looks:before {
+    content: "\e83f";
+}
+
+.mdi-image-loupe:before {
+    content: "\e840";
+}
+
+.mdi-image-movie-creation:before {
+    content: "\e841";
+}
+
+.mdi-image-nature-people:before {
+    content: "\e842";
+}
+
+.mdi-image-nature:before {
+    content: "\e843";
+}
+
+.mdi-image-navigate-before:before {
+    content: "\e844";
+}
+
+.mdi-image-navigate-next:before {
+    content: "\e845";
+}
+
+.mdi-image-palette:before {
+    content: "\e846";
+}
+
+.mdi-image-panorama-fisheye:before {
+    content: "\e847";
+}
+
+.mdi-image-panorama-horizontal:before {
+    content: "\e848";
+}
+
+.mdi-image-panorama-vertical:before {
+    content: "\e849";
+}
+
+.mdi-image-panorama-wide-angle:before {
+    content: "\e84a";
+}
+
+.mdi-image-panorama:before {
+    content: "\e84b";
+}
+
+.mdi-image-photo-album:before {
+    content: "\e84c";
+}
+
+.mdi-image-photo-camera:before {
+    content: "\e84d";
+}
+
+.mdi-image-photo-library:before {
+    content: "\e84e";
+}
+
+.mdi-image-photo:before {
+    content: "\e84f";
+}
+
+.mdi-image-portrait:before {
+    content: "\e850";
+}
+
+.mdi-image-remove-red-eye:before {
+    content: "\e851";
+}
+
+.mdi-image-rotate-left:before {
+    content: "\e852";
+}
+
+.mdi-image-rotate-right:before {
+    content: "\e853";
+}
+
+.mdi-image-slideshow:before {
+    content: "\e854";
+}
+
+.mdi-image-straighten:before {
+    content: "\e855";
+}
+
+.mdi-image-style:before {
+    content: "\e856";
+}
+
+.mdi-image-switch-camera:before {
+    content: "\e857";
+}
+
+.mdi-image-switch-video:before {
+    content: "\e858";
+}
+
+.mdi-image-tag-faces:before {
+    content: "\e859";
+}
+
+.mdi-image-texture:before {
+    content: "\e85a";
+}
+
+.mdi-image-timelapse:before {
+    content: "\e85b";
+}
+
+.mdi-image-timer-3:before {
+    content: "\e85c";
+}
+
+.mdi-image-timer-10:before {
+    content: "\e85d";
+}
+
+.mdi-image-timer-auto:before {
+    content: "\e85e";
+}
+
+.mdi-image-timer-off:before {
+    content: "\e85f";
+}
+
+.mdi-image-timer:before {
+    content: "\e860";
+}
+
+.mdi-image-tonality:before {
+    content: "\e861";
+}
+
+.mdi-image-transform:before {
+    content: "\e862";
+}
+
+.mdi-image-tune:before {
+    content: "\e863";
+}
+
+.mdi-image-wb-auto:before {
+    content: "\e864";
+}
+
+.mdi-image-wb-cloudy:before {
+    content: "\e865";
+}
+
+.mdi-image-wb-incandescent:before {
+    content: "\e866";
+}
+
+.mdi-image-wb-irradescent:before {
+    content: "\e867";
+}
+
+.mdi-image-wb-sunny:before {
+    content: "\e868";
+}
+
+.mdi-maps-beenhere:before {
+    content: "\e869";
+}
+
+.mdi-maps-directions-bike:before {
+    content: "\e86a";
+}
+
+.mdi-maps-directions-bus:before {
+    content: "\e86b";
+}
+
+.mdi-maps-directions-car:before {
+    content: "\e86c";
+}
+
+.mdi-maps-directions-ferry:before {
+    content: "\e86d";
+}
+
+.mdi-maps-directions-subway:before {
+    content: "\e86e";
+}
+
+.mdi-maps-directions-train:before {
+    content: "\e86f";
+}
+
+.mdi-maps-directions-transit:before {
+    content: "\e870";
+}
+
+.mdi-maps-directions-walk:before {
+    content: "\e871";
+}
+
+.mdi-maps-directions:before {
+    content: "\e872";
+}
+
+.mdi-maps-flight:before {
+    content: "\e873";
+}
+
+.mdi-maps-hotel:before {
+    content: "\e874";
+}
+
+.mdi-maps-layers-clear:before {
+    content: "\e875";
+}
+
+.mdi-maps-layers:before {
+    content: "\e876";
+}
+
+.mdi-maps-local-airport:before {
+    content: "\e877";
+}
+
+.mdi-maps-local-atm:before {
+    content: "\e878";
+}
+
+.mdi-maps-local-attraction:before {
+    content: "\e879";
+}
+
+.mdi-maps-local-bar:before {
+    content: "\e87a";
+}
+
+.mdi-maps-local-cafe:before {
+    content: "\e87b";
+}
+
+.mdi-maps-local-car-wash:before {
+    content: "\e87c";
+}
+
+.mdi-maps-local-convenience-store:before {
+    content: "\e87d";
+}
+
+.mdi-maps-local-drink:before {
+    content: "\e87e";
+}
+
+.mdi-maps-local-florist:before {
+    content: "\e87f";
+}
+
+.mdi-maps-local-gas-station:before {
+    content: "\e880";
+}
+
+.mdi-maps-local-grocery-store:before {
+    content: "\e881";
+}
+
+.mdi-maps-local-hospital:before {
+    content: "\e882";
+}
+
+.mdi-maps-local-hotel:before {
+    content: "\e883";
+}
+
+.mdi-maps-local-laundry-service:before {
+    content: "\e884";
+}
+
+.mdi-maps-local-library:before {
+    content: "\e885";
+}
+
+.mdi-maps-local-mall:before {
+    content: "\e886";
+}
+
+.mdi-maps-local-movies:before {
+    content: "\e887";
+}
+
+.mdi-maps-local-offer:before {
+    content: "\e888";
+}
+
+.mdi-maps-local-parking:before {
+    content: "\e889";
+}
+
+.mdi-maps-local-pharmacy:before {
+    content: "\e88a";
+}
+
+.mdi-maps-local-phone:before {
+    content: "\e88b";
+}
+
+.mdi-maps-local-pizza:before {
+    content: "\e88c";
+}
+
+.mdi-maps-local-play:before {
+    content: "\e88d";
+}
+
+.mdi-maps-local-post-office:before {
+    content: "\e88e";
+}
+
+.mdi-maps-local-print-shop:before {
+    content: "\e88f";
+}
+
+.mdi-maps-local-restaurant:before {
+    content: "\e890";
+}
+
+.mdi-maps-local-see:before {
+    content: "\e891";
+}
+
+.mdi-maps-local-shipping:before {
+    content: "\e892";
+}
+
+.mdi-maps-local-taxi:before {
+    content: "\e893";
+}
+
+.mdi-maps-location-history:before {
+    content: "\e894";
+}
+
+.mdi-maps-map:before {
+    content: "\e895";
+}
+
+.mdi-maps-my-location:before {
+    content: "\e896";
+}
+
+.mdi-maps-navigation:before {
+    content: "\e897";
+}
+
+.mdi-maps-pin-drop:before {
+    content: "\e898";
+}
+
+.mdi-maps-place:before {
+    content: "\e899";
+}
+
+.mdi-maps-rate-review:before {
+    content: "\e89a";
+}
+
+.mdi-maps-restaurant-menu:before {
+    content: "\e89b";
+}
+
+.mdi-maps-satellite:before {
+    content: "\e89c";
+}
+
+.mdi-maps-store-mall-directory:before {
+    content: "\e89d";
+}
+
+.mdi-maps-terrain:before {
+    content: "\e89e";
+}
+
+.mdi-maps-traffic:before {
+    content: "\e89f";
+}
+
+.mdi-navigation-apps:before {
+    content: "\e8a0";
+}
+
+.mdi-navigation-arrow-back:before {
+    content: "\e8a1";
+}
+
+.mdi-navigation-arrow-drop-down-circle:before {
+    content: "\e8a2";
+}
+
+.mdi-navigation-arrow-drop-down:before {
+    content: "\e8a3";
+}
+
+.mdi-navigation-arrow-drop-up:before {
+    content: "\e8a4";
+}
+
+.mdi-navigation-arrow-forward:before {
+    content: "\e8a5";
+}
+
+.mdi-navigation-cancel:before {
+    content: "\e8a6";
+}
+
+.mdi-navigation-check:before {
+    content: "\e8a7";
+}
+
+.mdi-navigation-chevron-left:before {
+    content: "\e8a8";
+}
+
+.mdi-navigation-chevron-right:before {
+    content: "\e8a9";
+}
+
+.mdi-navigation-close:before {
+    content: "\e8aa";
+}
+
+.mdi-navigation-expand-less:before {
+    content: "\e8ab";
+}
+
+.mdi-navigation-expand-more:before {
+    content: "\e8ac";
+}
+
+.mdi-navigation-fullscreen-exit:before {
+    content: "\e8ad";
+}
+
+.mdi-navigation-fullscreen:before {
+    content: "\e8ae";
+}
+
+.mdi-navigation-menu:before {
+    content: "\e8af";
+}
+
+.mdi-navigation-more-horiz:before {
+    content: "\e8b0";
+}
+
+.mdi-navigation-more-vert:before {
+    content: "\e8b1";
+}
+
+.mdi-navigation-refresh:before {
+    content: "\e8b2";
+}
+
+.mdi-navigation-unfold-less:before {
+    content: "\e8b3";
+}
+
+.mdi-navigation-unfold-more:before {
+    content: "\e8b4";
+}
+
+.mdi-notification-adb:before {
+    content: "\e8b5";
+}
+
+.mdi-notification-bluetooth-audio:before {
+    content: "\e8b6";
+}
+
+.mdi-notification-disc-full:before {
+    content: "\e8b7";
+}
+
+.mdi-notification-dnd-forwardslash:before {
+    content: "\e8b8";
+}
+
+.mdi-notification-do-not-disturb:before {
+    content: "\e8b9";
+}
+
+.mdi-notification-drive-eta:before {
+    content: "\e8ba";
+}
+
+.mdi-notification-event-available:before {
+    content: "\e8bb";
+}
+
+.mdi-notification-event-busy:before {
+    content: "\e8bc";
+}
+
+.mdi-notification-event-note:before {
+    content: "\e8bd";
+}
+
+.mdi-notification-folder-special:before {
+    content: "\e8be";
+}
+
+.mdi-notification-mms:before {
+    content: "\e8bf";
+}
+
+.mdi-notification-more:before {
+    content: "\e8c0";
+}
+
+.mdi-notification-network-locked:before {
+    content: "\e8c1";
+}
+
+.mdi-notification-phone-bluetooth-speaker:before {
+    content: "\e8c2";
+}
+
+.mdi-notification-phone-forwarded:before {
+    content: "\e8c3";
+}
+
+.mdi-notification-phone-in-talk:before {
+    content: "\e8c4";
+}
+
+.mdi-notification-phone-locked:before {
+    content: "\e8c5";
+}
+
+.mdi-notification-phone-missed:before {
+    content: "\e8c6";
+}
+
+.mdi-notification-phone-paused:before {
+    content: "\e8c7";
+}
+
+.mdi-notification-play-download:before {
+    content: "\e8c8";
+}
+
+.mdi-notification-play-install:before {
+    content: "\e8c9";
+}
+
+.mdi-notification-sd-card:before {
+    content: "\e8ca";
+}
+
+.mdi-notification-sim-card-alert:before {
+    content: "\e8cb";
+}
+
+.mdi-notification-sms-failed:before {
+    content: "\e8cc";
+}
+
+.mdi-notification-sms:before {
+    content: "\e8cd";
+}
+
+.mdi-notification-sync-disabled:before {
+    content: "\e8ce";
+}
+
+.mdi-notification-sync-problem:before {
+    content: "\e8cf";
+}
+
+.mdi-notification-sync:before {
+    content: "\e8d0";
+}
+
+.mdi-notification-system-update:before {
+    content: "\e8d1";
+}
+
+.mdi-notification-tap-and-play:before {
+    content: "\e8d2";
+}
+
+.mdi-notification-time-to-leave:before {
+    content: "\e8d3";
+}
+
+.mdi-notification-vibration:before {
+    content: "\e8d4";
+}
+
+.mdi-notification-voice-chat:before {
+    content: "\e8d5";
+}
+
+.mdi-notification-vpn-lock:before {
+    content: "\e8d6";
+}
+
+.mdi-social-cake:before {
+    content: "\e8d7";
+}
+
+.mdi-social-domain:before {
+    content: "\e8d8";
+}
+
+.mdi-social-group-add:before {
+    content: "\e8d9";
+}
+
+.mdi-social-group:before {
+    content: "\e8da";
+}
+
+.mdi-social-location-city:before {
+    content: "\e8db";
+}
+
+.mdi-social-mood:before {
+    content: "\e8dc";
+}
+
+.mdi-social-notifications-none:before {
+    content: "\e8dd";
+}
+
+.mdi-social-notifications-off:before {
+    content: "\e8de";
+}
+
+.mdi-social-notifications-on:before {
+    content: "\e8df";
+}
+
+.mdi-social-notifications-paused:before {
+    content: "\e8e0";
+}
+
+.mdi-social-notifications:before {
+    content: "\e8e1";
+}
+
+.mdi-social-pages:before {
+    content: "\e8e2";
+}
+
+.mdi-social-party-mode:before {
+    content: "\e8e3";
+}
+
+.mdi-social-people-outline:before {
+    content: "\e8e4";
+}
+
+.mdi-social-people:before {
+    content: "\e8e5";
+}
+
+.mdi-social-person-add:before {
+    content: "\e8e6";
+}
+
+.mdi-social-person-outline:before {
+    content: "\e8e7";
+}
+
+.mdi-social-person:before {
+    content: "\e8e8";
+}
+
+.mdi-social-plus-one:before {
+    content: "\e8e9";
+}
+
+.mdi-social-poll:before {
+    content: "\e8ea";
+}
+
+.mdi-social-public:before {
+    content: "\e8eb";
+}
+
+.mdi-social-school:before {
+    content: "\e8ec";
+}
+
+.mdi-social-share:before {
+    content: "\e8ed";
+}
+
+.mdi-social-whatshot:before {
+    content: "\e8ee";
+}
+
+.mdi-toggle-check-box-outline-blank:before {
+    content: "\e8ef";
+}
+
+.mdi-toggle-check-box:before {
+    content: "\e8f0";
+}
+
+.mdi-toggle-radio-button-off:before {
+    content: "\e8f1";
+}
+
+.mdi-toggle-radio-button-on:before {
+    content: "\e8f2";
+}
+
+.mdi-toggle-star-half:before {
+    content: "\e8f3";
+}
+
+.mdi-toggle-star-outline:before {
+    content: "\e8f4";
+}
+
+.mdi-toggle-star:before {
+    content: "\e8f5";
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/_materialbox.scss b/system/admin/static/editor/sass/components/_materialbox.scss
new file mode 100644
index 0000000..9c20176
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_materialbox.scss
@@ -0,0 +1,41 @@
+.materialboxed {
+  cursor: zoom-in;
+  position: relative;
+  @include transition(opacity .4s);
+
+  &:hover {
+    &:not(.active) {
+      opacity: .8;
+    }
+    will-change: left, top, width, height;
+  }
+}
+
+.materialboxed.active {
+  cursor: zoom-out;
+}
+
+#materialbox-overlay {
+  position:fixed;
+  top:0;
+  left:0;
+  right: 0;
+  bottom: 0;
+  background-color: #292929;
+  z-index: 999;
+
+  will-change: opacity;
+}
+.materialbox-caption {
+  position: fixed;
+  display: none;
+  color: #fff;
+  line-height: 50px;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding: 0% 15%;
+  height: 50px;
+  z-index: 1000;
+  -webkit-font-smoothing: antialiased;
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/_mixins.scss b/system/admin/static/editor/sass/components/_mixins.scss
new file mode 100644
index 0000000..4c3d373
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_mixins.scss
@@ -0,0 +1,5 @@
+@mixin box-shadow-2($args1, $args2) {
+    -webkit-box-shadow: $args1, $args2;
+    -moz-box-shadow: $args1, $args2;
+    box-shadow: $args1, $args2;
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/_modal.scss b/system/admin/static/editor/sass/components/_modal.scss
new file mode 100644
index 0000000..0a6dcfb
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_modal.scss
@@ -0,0 +1,90 @@
+.modal {
+  @extend .z-depth-4;
+
+  display: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  background-color: #fafafa;
+  padding: 0;
+  max-height: 70%;
+  width: 55%;
+  margin: auto;
+  overflow-y: auto;
+
+  border-radius: 2px;
+  will-change: top, opacity;
+
+  @media #{$medium-and-down} {
+   width: 80%;
+  }
+
+  h1,h2,h3,h4 {
+    margin-top: 0;
+  }
+
+  .modal-content {
+    padding: 24px;
+  }
+  .modal-close {
+    cursor: pointer;
+  }
+
+  .modal-footer {
+    border-radius: 0 0 2px 2px;
+    background-color: #fafafa;
+    padding: 4px 6px;
+    height: 56px;
+    width: 100%;
+
+    .btn, .btn-flat {
+      float: right;
+      margin: 6px 0;
+    }
+  }
+}
+.lean-overlay {
+    position: fixed;
+    z-index:999;
+    top: -100px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 125%;
+    width: 100%;
+    background: #000;
+    display: none;
+
+    will-change: opacity;
+}
+
+// Modal with fixed action footer
+.modal.modal-fixed-footer {
+  padding: 0;
+  height: 70%;
+
+  .modal-content {
+    position: absolute;
+    height: calc(100% - 56px);
+    max-height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  .modal-footer {
+    border-top: 1px solid rgba(0,0,0,.1);
+    position: absolute;
+    bottom: 0;
+  }
+}
+
+// Modal Bottom Sheet Style
+.modal.bottom-sheet {
+  top: auto;
+  bottom: -100%;
+  margin: 0;
+  width: 100%;
+  max-height: 45%;
+  border-radius: 0;
+  will-change: bottom, opacity;
+}
diff --git a/system/admin/static/editor/sass/components/_navbar.scss b/system/admin/static/editor/sass/components/_navbar.scss
new file mode 100644
index 0000000..65cd277
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_navbar.scss
@@ -0,0 +1,144 @@
+nav {
+  color: $navbar-font-color;
+  @extend .z-depth-1;
+  background-color: $primary-color;
+  width: 100%;
+  height: $navbar-height-mobile;
+  line-height: $navbar-height-mobile;
+
+  a { color: $navbar-font-color; }
+
+  .nav-wrapper {
+    position: relative;
+    height: 100%;
+
+    i {
+      display: block;
+      font-size: 2rem;
+    }
+  }
+
+  @media #{$large-and-up} {
+    a.button-collapse { display: none; }
+  }
+
+
+  // Collapse button
+  .button-collapse {
+    float: left;
+    position: relative;
+    z-index: 1;
+    height: $navbar-height-mobile;
+
+    i {
+      font-size: 2.7rem;
+      height: $navbar-height-mobile;
+      line-height: $navbar-height-mobile;
+    }
+  }
+
+
+  // Logo
+  .brand-logo {
+    position: absolute;
+    color: $navbar-font-color;
+    display: inline-block;
+    font-size: $navbar-brand-font-size;
+    padding: 0;
+    white-space: nowrap;
+
+    &.center {
+      left: 50%;
+      @include transform(translateX(-50%));
+    }
+
+    @media #{$medium-and-down} {
+      left: 50%;
+      @include transform(translateX(-50%));
+    }
+
+    &.right {
+      right: 0.5rem;
+      padding: 0;
+    }
+  }
+
+
+  // Navbar Links
+  ul {
+    margin: 0;
+
+    li {
+      @include transition(background-color .3s);
+      float: left;
+      padding: 0;
+
+      &:hover, &.active {
+        background-color: rgba(0,0,0,.1);
+      }
+    }
+    a {
+      font-size: 1rem;
+      color: $navbar-font-color;
+      display: block;
+      padding: 0 15px;
+    }
+
+    &.left {
+      float: left;
+    }
+  }
+
+  // Navbar Search Form
+  .input-field {
+    margin: 0;
+
+    input {
+      height: 100%;
+      font-size: 1.2rem;
+      border: none;
+      padding-left: 2rem;
+
+      &:focus, &[type=text]:valid, &[type=password]:valid,
+      &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
+        border: none;
+        box-shadow: none;
+      }
+    }
+    label {
+      top: 0;
+      left: 0;
+
+      i {
+        color: rgba(255,255,255,.7);
+        @include transition(color .3s);
+      }
+      &.active i { color: $navbar-font-color; }
+      &.active {
+        @include transform(translateY(0));
+      }
+    }
+
+  }
+
+}
+
+// Fixed Navbar
+.navbar-fixed {
+  position: relative;
+  height: $navbar-height-mobile;
+  z-index: 998;
+
+  nav {
+    position: fixed;
+  }
+}
+@media #{$medium-and-up} {
+  nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
+    height: $navbar-height;
+    line-height: $navbar-height;
+  }
+  .navbar-fixed {
+    height: $navbar-height;
+  }
+}
diff --git a/system/admin/static/editor/sass/components/_normalize.scss b/system/admin/static/editor/sass/components/_normalize.scss
new file mode 100644
index 0000000..ab626c4
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_normalize.scss
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * 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 {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * 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 Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+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.
+ */
+
+/* 1 */ html input[type="button"],
+button,
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/system/admin/static/editor/sass/components/_prefixer.scss b/system/admin/static/editor/sass/components/_prefixer.scss
new file mode 100644
index 0000000..f483eaf
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_prefixer.scss
@@ -0,0 +1,376 @@
+//---------------------------------------------------
+//  Sass Prefixer
+//  -------------------------------------------------
+//  TABLE OF CONTENTS
+//  (*) denotes a syntax-sugar helper
+//  -------------------------------------------------
+//
+//      animation($args)
+//          animation-delay($delay)
+//          animation-direction($direction)
+//          animation-duration($duration)
+//          animation-fill-mode($mode)
+//          animation-iteration-count($count)
+//          animation-name($name)
+//          animation-play-state($state)
+//          animation-timing-function($function)
+//      background-size($args)
+//          inner-shadow($args) *
+//      box-sizing($args)
+//          border-box() *
+//          content-box() *
+//      columns($args)
+//          column-count($count)
+//          column-gap($gap)
+//          column-rule($args)
+//          column-width($width)
+//      flexbox()
+//          flex($args)
+//          order($args)
+//          align($args)
+//          justify-content($args)
+//      gradient($default,$start,$stop) *
+//          linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
+//          linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
+//      transform($args)
+//          transform-origin($args)
+//          transform-style($style)
+//          rotate($deg)
+//          scale($factor)
+//          translate($x,$y)
+//          translate3d($x,$y,$z)
+//          translateHardware($x,$y) *
+//      text-shadow($args)
+//      transition($args)
+//          transition-delay($delay)
+//          transition-duration($duration)
+//          transition-property($property)
+//          transition-timing-function($function)
+
+
+// Animation
+
+@mixin animation($args) {
+    -webkit-animation: $args;
+    -moz-animation: $args;
+    -ms-animation: $args;
+    -o-animation: $args;
+    animation: $args;
+}
+@mixin animation-delay($delay) {
+    -webkit-animation-delay: $delay;
+    -moz-animation-delay: $delay;
+    -ms-animation-delay: $delay;
+    -o-animation-delay: $delay;
+    animation-delay: $delay;
+}
+@mixin animation-direction($direction) {
+    -webkit-animation-direction: $direction;
+    -moz-animation-direction: $direction;
+    -ms-animation-direction: $direction;
+    -o-animation-direction: $direction;
+}
+@mixin animation-duration($duration) {
+    -webkit-animation-duration: $duration;
+    -moz-animation-duration: $duration;
+    -ms-animation-duration: $duration;
+    -o-animation-duration: $duration;
+}
+@mixin animation-fill-mode($mode) {
+    -webkit-animation-fill-mode: $mode;
+    -moz-animation-fill-mode: $mode;
+    -ms-animation-fill-mode: $mode;
+    -o-animation-fill-mode: $mode;
+    animation-fill-mode: $mode;
+}
+@mixin animation-iteration-count($count) {
+    -webkit-animation-iteration-count: $count;
+    -moz-animation-iteration-count: $count;
+    -ms-animation-iteration-count: $count;
+    -o-animation-iteration-count: $count;
+    animation-iteration-count: $count;
+}
+@mixin animation-name($name) {
+    -webkit-animation-name: $name;
+    -moz-animation-name: $name;
+    -ms-animation-name: $name;
+    -o-animation-name: $name;
+    animation-name: $name;
+}
+@mixin animation-play-state($state) {
+    -webkit-animation-play-state: $state;
+    -moz-animation-play-state: $state;
+    -ms-animation-play-state: $state;
+    -o-animation-play-state: $state;
+    animation-play-state: $state;
+}
+@mixin animation-timing-function($function) {
+    -webkit-animation-timing-function: $function;
+    -moz-animation-timing-function: $function;
+    -ms-animation-timing-function: $function;
+    -o-animation-timing-function: $function;
+    animation-timing-function: $function;
+}
+
+// Keyframes
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+// Backface-visibility
+
+@mixin backface-visibility($args) {
+    -webkit-backface-visibility: $args;
+    -moz-backface-visibility: $args;
+    -ms-backface-visibility: $args;
+    backface-visibility: $args;
+}
+
+
+// Background Size
+
+@mixin background-size($args) {
+    -webkit-background-size: $args;
+    background-size: $args;
+}
+
+// Box Sizing
+
+@mixin box-sizing($args) {
+    -webkit-box-sizing: $args;
+    -moz-box-sizing: $args;
+    box-sizing: $args;
+}
+@mixin border-box(){
+    @include box-sizing(border-box);
+}
+@mixin content-box(){
+    @include box-sizing(content-box);
+}
+
+
+// Columns
+
+@mixin columns($args) {
+    -webkit-columns: $args;
+    -moz-columns: $args;
+    columns: $args;
+}
+@mixin column-count($count) {
+    -webkit-column-count: $count;
+    -moz-column-count: $count;
+    column-count: $count;
+}
+@mixin column-gap($gap) {
+    -webkit-column-gap: $gap;
+    -moz-column-gap: $gap;
+    column-gap: $gap;
+}
+@mixin column-width($width) {
+    -webkit-column-width: $width;
+    -moz-column-width: $width;
+    column-width: $width;
+}
+@mixin column-rule($args) {
+    -webkit-column-rule: $args;
+    -moz-column-rule: $args;
+    column-rule: $args;
+}
+
+// Filter
+@mixin filter($args) {
+    -webkit-filter: $args;
+    -moz-filter: $args;
+    -o-filter: $args;
+    -ms-filter: $args;
+}
+
+// Flexbox
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+    @mixin flex($values) {
+      -webkit-box-flex: $values;
+      -moz-box-flex:  $values;
+      -webkit-flex:  $values;
+      -ms-flex:  $values;
+      flex:  $values;
+    }
+    @mixin order($val) {
+      -webkit-box-ordinal-group: $val;
+      -moz-box-ordinal-group: $val;
+      -ms-flex-order: $val;
+      -webkit-order: $val;
+      order: $val;
+    }
+    @mixin align($align) {
+      -webkit-flex-align: $align;
+      -ms-flex-align: $align;
+      -webkit-align-items: $align;
+      align-items: $align;
+    }
+    @mixin justify-content($val) {
+      -webkit-justify-content: $val;
+      justify-content: $val;
+    }
+// Gradients
+
+@mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) {
+    @include linear-gradient-top($default,$start,0%,$stop,100%);
+}
+@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2));
+    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2);
+}
+@mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
+    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+}
+@mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
+    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+}
+@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2));
+    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2);
+}
+@mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
+    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+}
+@mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
+    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+}
+
+// Text Shadow
+
+@mixin text-shadow($args) {
+    text-shadow: $args;
+}
+
+
+// Transforms
+
+@mixin transform($args) {
+    -webkit-transform: $args;
+    -moz-transform: $args;
+    -ms-transform: $args;
+    -o-transform: $args;
+    transform: $args;
+}
+@mixin transform-origin($args) {
+    -webkit-transform-origin: $args;
+    -moz-transform-origin: $args;
+    -ms-transform-origin: $args;
+    -o-transform-origin: $args;
+    transform-origin: $args;
+}
+@mixin transform-style($style) {
+    -webkit-transform-style: $style;
+    -moz-transform-style: $style;
+    -ms-transform-style: $style;
+    -o-transform-style: $style;
+    transform-style: $style;
+}
+@mixin rotate($deg:45deg){
+    @include transform(rotate($deg));
+}
+@mixin scale($factor:.5){
+    @include transform(scale($factor));
+}
+@mixin translate($x,$y){
+    @include transform(translate($x,$y));
+}
+@mixin translate3d($x,$y,$z) {
+    @include transform(translate3d($x,$y,$z));
+}
+@mixin translateHardware($x,$y) {
+    @include translate($x,$y);
+    -webkit-transform: translate3d($x,$y,0);
+    -moz-transform: translate3d($x,$y,0);
+    -o-transform: translate3d($x,$y,0);
+    -ms-transform: translate3d($x,$y,0);
+    transform: translate3d($x,$y,0);
+}
+
+
+// Transitions
+
+@mixin transition($args:200ms) {
+    -webkit-transition: $args;
+    -moz-transition: $args;
+    -o-transition: $args;
+    -ms-transition: $args;
+    transition: $args;
+}
+@mixin transition-delay($delay:0) {
+    -webkit-transition-delay: $delay;
+    -moz-transition-delay: $delay;
+    -o-transition-delay: $delay;
+    -ms-transition-delay: $delay;
+    transition-delay: $delay;
+}
+@mixin transition-duration($duration:200ms) {
+    -webkit-transition-duration: $duration;
+    -moz-transition-duration: $duration;
+    -o-transition-duration: $duration;
+    -ms-transition-duration: $duration;
+    transition-duration: $duration;
+}
+@mixin transition-property($property:all) {
+    -webkit-transition-property: $property;
+    -moz-transition-property: $property;
+    -o-transition-property: $property;
+    -ms-transition-property: $property;
+    transition-property: $property;
+}
+@mixin transition-timing-function($function:ease) {
+    -webkit-transition-timing-function: $function;
+    -moz-transition-timing-function: $function;
+    -o-transition-timing-function: $function;
+    -ms-transition-timing-function: $function;
+    transition-timing-function: $function;
+}
diff --git a/system/admin/static/editor/sass/components/_preloader.scss b/system/admin/static/editor/sass/components/_preloader.scss
new file mode 100644
index 0000000..ab5c783
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_preloader.scss
@@ -0,0 +1,332 @@
+/*
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+/**************************/
+/* STYLES FOR THE SPINNER */
+/**************************/
+
+/*
+ * Constants:
+ *      STROKEWIDTH = 3px
+ *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+ *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+ *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+ *                                should rotate each time, 216 gives us a
+ *                                5 pointed star shape (it's 360/5 * 3).
+ *                                For a 7 pointed star, we might do
+ *                                360/7 * 3 = 154.286)
+ *      CONTAINERWIDTH = 28px
+ *      SHRINK_TIME = 400ms
+ */
+
+
+.preloader-wrapper {
+  display: inline-block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+
+  &.small {
+    width: 36px;
+    height: 36px;
+  }
+
+  &.big {
+    width: 64px;
+    height: 64px;
+  }
+
+  &.active {
+    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+    -webkit-animation: container-rotate 1568ms linear infinite;
+    animation: container-rotate 1568ms linear infinite;
+  }
+}
+
+@-webkit-keyframes container-rotate {
+  to { -webkit-transform: rotate(360deg) }
+}
+
+@keyframes container-rotate {
+  to { transform: rotate(360deg) }
+}
+
+.spinner-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.spinner-blue,
+.spinner-blue-only {
+  border-color: #4285f4;
+}
+
+.spinner-red,
+.spinner-red-only {
+  border-color: #db4437;
+}
+
+.spinner-yellow,
+.spinner-yellow-only {
+  border-color: #f4b400;
+}
+
+.spinner-green,
+.spinner-green-only {
+  border-color: #0f9d58;
+}
+
+/**
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ *
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
+ * seems).
+ *
+ * We write out each animation in full (instead of separating animation-name,
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
+ * specific properties properly, treats them as -webkit-animation, and overrides the
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
+ */
+.active .spinner-layer.spinner-blue {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.spinner-red {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.spinner-yellow {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.spinner-green {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .spinner-layer.spinner-blue-only,
+.active .spinner-layer.spinner-red-only,
+.active .spinner-layer.spinner-yellow-only,
+.active .spinner-layer.spinner-green-only {
+  /* durations: 4 * ARCTIME */
+  opacity: 1;
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes fill-unfill-rotate {
+  12.5% { -webkit-transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
+  25%   { -webkit-transform: rotate(270deg);  } /* 1   * ARCSIZE */
+  37.5% { -webkit-transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
+  50%   { -webkit-transform: rotate(540deg);  } /* 2   * ARCSIZE */
+  62.5% { -webkit-transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
+  75%   { -webkit-transform: rotate(810deg);  } /* 3   * ARCSIZE */
+  87.5% { -webkit-transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
+  to    { -webkit-transform: rotate(1080deg); } /* 4   * ARCSIZE */
+}
+
+@keyframes fill-unfill-rotate {
+  12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
+  25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
+  37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
+  50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
+  62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
+  75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
+  87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
+  to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
+}
+
+@-webkit-keyframes blue-fade-in-out {
+  from { opacity: 1; }
+  25% { opacity: 1; }
+  26% { opacity: 0; }
+  89% { opacity: 0; }
+  90% { opacity: 1; }
+  100% { opacity: 1; }
+}
+
+@keyframes blue-fade-in-out {
+  from { opacity: 1; }
+  25% { opacity: 1; }
+  26% { opacity: 0; }
+  89% { opacity: 0; }
+  90% { opacity: 1; }
+  100% { opacity: 1; }
+}
+
+@-webkit-keyframes red-fade-in-out {
+  from { opacity: 0; }
+  15% { opacity: 0; }
+  25% { opacity: 1; }
+  50% { opacity: 1; }
+  51% { opacity: 0; }
+}
+
+@keyframes red-fade-in-out {
+  from { opacity: 0; }
+  15% { opacity: 0; }
+  25% { opacity: 1; }
+  50% { opacity: 1; }
+  51% { opacity: 0; }
+}
+
+@-webkit-keyframes yellow-fade-in-out {
+  from { opacity: 0; }
+  40% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 1; }
+  76% { opacity: 0; }
+}
+
+@keyframes yellow-fade-in-out {
+  from { opacity: 0; }
+  40% { opacity: 0; }
+  50% { opacity: 1; }
+  75% { opacity: 1; }
+  76% { opacity: 0; }
+}
+
+@-webkit-keyframes green-fade-in-out {
+  from { opacity: 0; }
+  65% { opacity: 0; }
+  75% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes green-fade-in-out {
+  from { opacity: 0; }
+  65% { opacity: 0; }
+  75% { opacity: 1; }
+  90% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/**
+ * Patch the gap that appear between the two adjacent div.circle-clipper while the
+ * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+ */
+.gap-patch {
+  position: absolute;
+  top: 0;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+}
+
+.gap-patch .circle {
+  width: 1000%;
+  left: -450%;
+}
+
+.circle-clipper {
+  display: inline-block;
+  position: relative;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-color: inherit;
+
+  .circle {
+    width: 200%;
+    height: 100%;
+    border-width: 3px; /* STROKEWIDTH */
+    border-style: solid;
+    border-color: inherit;
+    border-bottom-color: transparent !important;
+    border-radius: 50%;
+    -webkit-animation: none;
+    animation: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &.left .circle {
+    left: 0;
+    border-right-color: transparent !important;
+    -webkit-transform: rotate(129deg);
+    transform: rotate(129deg);
+  }
+  &.right .circle {
+    left: -100%;
+    border-left-color: transparent !important;
+    -webkit-transform: rotate(-129deg);
+    transform: rotate(-129deg);
+  }
+}
+
+
+
+.active .circle-clipper.left .circle {
+  /* duration: ARCTIME */
+  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+.active .circle-clipper.right .circle {
+  /* duration: ARCTIME */
+  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+  animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
+}
+
+@-webkit-keyframes left-spin {
+  from { -webkit-transform: rotate(130deg); }
+  50% { -webkit-transform: rotate(-5deg); }
+  to { -webkit-transform: rotate(130deg); }
+}
+
+@keyframes left-spin {
+  from { transform: rotate(130deg); }
+  50% { transform: rotate(-5deg); }
+  to { transform: rotate(130deg); }
+}
+
+@-webkit-keyframes right-spin {
+  from { -webkit-transform: rotate(-130deg); }
+  50% { -webkit-transform: rotate(5deg); }
+  to { -webkit-transform: rotate(-130deg); }
+}
+
+@keyframes right-spin {
+  from { transform: rotate(-130deg); }
+  50% { transform: rotate(5deg); }
+  to { transform: rotate(-130deg); }
+}
+
+#spinnerContainer.cooldown {
+  /* duration: SHRINK_TIME */
+  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
+  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+@-webkit-keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/_roboto.scss b/system/admin/static/editor/sass/components/_roboto.scss
new file mode 100644
index 0000000..8bfdbd3
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_roboto.scss
@@ -0,0 +1,38 @@
+@font-face {
+    font-family: "Roboto";
+    src: url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
+    font-weight: 200;
+}
+@font-face {
+    font-family: "Roboto";
+    src: url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
+    font-weight: 700;
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/_sideNav.scss b/system/admin/static/editor/sass/components/_sideNav.scss
new file mode 100644
index 0000000..98794a1
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_sideNav.scss
@@ -0,0 +1,111 @@
+.side-nav {
+  position: fixed;
+  width: 240px;
+  left: -105%;
+  top: 0;
+  margin: 0;
+  height: 100%;
+  height: calc(100% + 60px);
+  height: -moz-calc(100%); //Temporary Firefox Fix
+  padding-bottom: 60px;
+  background-color: $sidenav-bg-color;
+  z-index: 999;
+  overflow-y: auto;
+
+  @extend .z-depth-1;
+  will-change: left;
+
+  // Right Align
+  &.right-aligned {
+    will-change: right;
+    right: -105%;
+    left: auto;
+  }
+
+  .collapsible{
+    margin: 0;
+  }
+
+
+  li {
+    float: none;
+    padding: 0 $sidenav-padding-right;
+    &:hover, &.active { background-color: #ddd; }
+  }
+  a {
+    color: #444;
+    display: block;
+    font-size: 1rem;
+    height: 64px;
+    line-height: 64px;
+    padding: 0 $sidenav-padding-right;
+  }
+}
+
+
+// Touch interaction
+.drag-target {
+  height: 100%;
+  width: 10px;
+  position: fixed;
+  top: 0;
+  z-index: 998;
+}
+
+
+// Hidden side-nav for all sizes
+.side-nav.fixed {
+  a {
+    display: block;
+    padding: 0 $sidenav-padding-right;
+    color: #444;
+  }
+}
+
+
+// Fixed side-nav shown
+.side-nav.fixed {
+  left: 0;
+  position: fixed;
+
+  // Right Align
+  &.right-aligned {
+    right: 0;
+    left: auto;
+  }
+}
+
+// Fixed sideNav hide on smaller
+@media #{$medium-and-down} {
+  .side-nav.fixed {
+    left: -105%;
+
+    &.right-aligned {
+      right: -105%;
+      left: auto;
+    }
+  }
+}
+
+
+.side-nav .collapsible-body li.active,
+.side-nav.fixed .collapsible-body li.active {
+  background-color: $primary-color;
+  a {
+    color: $sidenav-bg-color;
+  }
+}
+
+
+#sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  height: 120vh;
+  background-color: rgba(0,0,0,.5);
+  z-index: 997;
+
+  will-change: opacity;
+}
diff --git a/system/admin/static/editor/sass/components/_slider.scss b/system/admin/static/editor/sass/components/_slider.scss
new file mode 100644
index 0000000..3d2071a
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_slider.scss
@@ -0,0 +1,92 @@
+.slider {
+  position: relative;
+  height: 400px;
+  width: 100%;
+
+  // Fullscreen slider
+  &.fullscreen {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    ul.slides {
+      height: 100%;
+    }
+
+    ul.indicators {
+      z-index: 2;
+      bottom: 30px;
+    }
+  }
+
+  .slides {
+    background-color: $slider-bg-color;
+    margin: 0;
+    height: 400px;
+
+    li {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: inherit;
+      overflow: hidden;
+
+      img {
+        height: 100%;
+        width: 100%;
+        background-size: cover;
+        background-position: center;
+      }
+
+      .caption {
+        color: #fff;
+        position: absolute;
+        top: 15%;
+        left: 15%;
+        width: 70%;
+        opacity: 0;
+
+        p { color: $slider-bg-color-light; }
+      }
+
+      &.active {
+        z-index: 2;
+      }
+    }
+  }
+
+
+  .indicators {
+    position: absolute;
+    text-align: center;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+
+    .indicator-item {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      height: 16px;
+      width: 16px;
+      margin: 0 12px;
+      background-color: $slider-bg-color-light;
+
+      @include transition(background-color .3s);
+      border-radius: 50%;
+
+      &.active {
+        background-color: $slider-indicator-color;
+      }
+    }
+  }
+
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/_table_of_contents.scss b/system/admin/static/editor/sass/components/_table_of_contents.scss
new file mode 100644
index 0000000..2872bdb
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_table_of_contents.scss
@@ -0,0 +1,33 @@
+/***************
+    Nav List
+***************/
+.table-of-contents {
+  &.fixed {
+      position: fixed;
+    }
+
+  li {
+    padding: 2px 0;
+  }
+  a {
+    display: inline-block;
+    font-weight: 300;
+    color: #757575;
+    padding-left: 20px;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    letter-spacing: .4;
+    display: inline-block;
+
+    &:hover {
+      color: lighten(#757575, 20%);
+      padding-left: 19px;
+      border-left: 1px solid lighten(color("materialize-red", "base"),10%);
+    }
+    &.active {
+      font-weight: 500;
+      padding-left: 18px;
+      border-left: 2px solid lighten(color("materialize-red", "base"),10%);
+    }
+  }
+}
diff --git a/system/admin/static/editor/sass/components/_tabs.scss b/system/admin/static/editor/sass/components/_tabs.scss
new file mode 100644
index 0000000..dcf29e1
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_tabs.scss
@@ -0,0 +1,47 @@
+.tabs {
+  position: relative;
+  height: 48px;
+  background-color: $tabs-bg-color;
+  margin: 0 auto;
+  width: 100%;
+  white-space: nowrap;
+
+  .tab {
+    display: block;
+    float: left;
+    text-align: center;
+    line-height: 48px;
+    height: 48px;
+    padding: 0 20px;
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: .8px;
+    width: 15%;
+
+    a {
+      color: $tabs-text-color;
+      display: block;
+      width: 100%;
+      height: 100%;
+      @include transition( color .28s ease);
+      &:hover {
+        color: lighten($tabs-text-color, 20%);
+      }
+    }
+
+    &.disabled a {
+      color: lighten($tabs-text-color, 20%);
+      cursor: default;
+    }
+  }
+  .indicator {
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: $tabs-underline-color;
+    will-change: left, right;
+  }
+}
+
+.tabs .tab { padding: 0; }
+
diff --git a/system/admin/static/editor/sass/components/_toast.scss b/system/admin/static/editor/sass/components/_toast.scss
new file mode 100644
index 0000000..87bd7dd
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_toast.scss
@@ -0,0 +1,63 @@
+#toast-container {
+  display:block;
+  position: fixed;
+  z-index: 1001;
+
+  @media #{$small-and-down} {
+    min-width: 100%;
+    bottom: 0%;
+  }
+  @media #{$medium-only} {
+    min-width: 30%;
+    left: 5%;
+    bottom: 7%;
+  }
+  @media #{$large-and-up} {
+    min-width: 8%;
+    top: 10%;
+    right: 7%;
+  }
+}
+
+.toast {
+  @extend .z-depth-1;
+  border-radius: 2px;
+  top: 0;
+  width: auto;
+  clear: both;
+  margin-top: 10px;
+  position: relative;
+  max-width:100%;
+  height: $toast-height;
+  line-height: $toast-height;
+  background-color: $toast-color;
+  padding: 0 25px;
+  font-size: 1.1rem;
+  font-weight: 300;
+  color: $toast-text-color;
+
+  @include flexbox();
+  @include align(center);
+  @include justify-content(space-between);
+
+  .btn, .btn-flat {
+    margin: 0;
+    margin-left: 3rem;
+  }
+
+  &.rounded{
+    border-radius: 24px;
+  }
+
+  @media #{$small-and-down} {
+    width:100%;
+    border-radius: 0;
+  }
+  @media #{$medium-only} {
+    float: left;
+  }
+  @media #{$large-and-up} {
+    float: right;
+  }
+
+}
diff --git a/system/admin/static/editor/sass/components/_tooltip.scss b/system/admin/static/editor/sass/components/_tooltip.scss
new file mode 100644
index 0000000..374ace9
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_tooltip.scss
@@ -0,0 +1,34 @@
+.material-tooltip {
+    padding: 10px 8px;
+    font-size: 1rem;
+    z-index: 2000;
+    background-color: transparent;
+    border-radius: 2px;
+    color: #fff;
+    min-height: 36px;
+    line-height: 1rem;
+    // max-width: 350px;
+    opacity: 0;
+    display: none;
+    position: absolute;
+    text-align: center;
+    overflow: hidden;
+    left:0;
+    top:0;
+
+    will-change: top, left;
+}
+
+.backdrop {
+  position: absolute;
+  opacity: 0;
+  display: none;
+  height: 7px;
+  width: 14px;
+  border-radius: 0 0 14px 14px;
+  background-color: #323232;
+  z-index: -1;
+  @include transform-origin( 50% 10%);
+
+  will-change: transform, opacity;
+}
diff --git a/system/admin/static/editor/sass/components/_typography.scss b/system/admin/static/editor/sass/components/_typography.scss
new file mode 100644
index 0000000..3aec273
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_typography.scss
@@ -0,0 +1,58 @@
+a {
+  text-decoration: none;
+}
+
+html{
+  line-height: 1.5;
+
+  @media only screen and (min-width: 0) {
+    font-size: 14px;
+  }
+
+  @media only screen and (min-width: $medium-screen) {
+    font-size: 14.5px;
+  }
+
+  @media only screen and (min-width: $large-screen) {
+    font-size: 15px;
+  }
+
+  font-family: "Roboto", sans-serif;
+  font-weight: normal;
+  color: $off-black;
+}
+h1, h2, h3, h4, h5, h6 {
+	font-weight: 400;
+	line-height: 1.1;
+}
+
+// Header Styles
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
+h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
+h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
+h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
+h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
+h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
+h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
+
+// Text Styles
+em { font-style: italic; }
+strong { font-weight: 500; }
+small { font-size: 75%; }
+.light { font-weight: 300; }
+.thin { font-weight: 200; }
+
+.flow-text{
+  font-weight: 300;
+  $i: 0;
+  @while $i <= $intervals {
+    @media only screen and (min-width : 360 + ($i * $interval-size)) {
+      font-size: 1.2rem * (1 + (.02 * $i));
+    }
+    $i: $i + 1;
+  }
+  // Handle below 360px screen
+  @media only screen and (max-width: 360px) {
+    font-size: 1.2rem;
+  }
+}
diff --git a/system/admin/static/editor/sass/components/_variables.scss b/system/admin/static/editor/sass/components/_variables.scss
new file mode 100644
index 0000000..833d49f
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_variables.scss
@@ -0,0 +1,152 @@
+/*** Colors ***/
+$primary-color: color("materialize-red", "lighten-2") !default;
+$primary-color-light: lighten($primary-color, 15%) !default;
+$primary-color-dark: darken($primary-color, 15%) !default;
+
+$secondary-color: color("teal", "lighten-1") !default;
+$success-color: color("green", "base") !default;
+$error-color: color("red", "base") !default;
+$link-color: color("light-blue", "darken-1") !default;
+
+/*** Badges ***/
+$badge-bg-color: $secondary-color !default;
+
+/*** Buttons ***/
+$button-bg-color-disabled: #DFDFDF !default;
+$button-color: $secondary-color !default;
+$button-color-disabled: #9F9F9F !default;
+$button-color-flat: #343434 !default;
+$button-color-raised: #fff !default;
+$button-floating-size: 37px !default;
+$button-height: 36px !default;
+$button-font-size-shared: 1.3rem !default;
+$button-large-icon-font-size: 1.6rem !default;
+$button-line-height: 36px !default;
+
+/*** Cards ***/
+$card-padding: 20px !default;
+$card-bg-color: #fff !default;
+$card-link-color: color("orange", "accent-2") !default;
+$card-link-color-light: lighten($card-link-color, 20%) !default;
+
+/*** Collapsible ***/
+$collapsible-height: 3rem !default;
+$collapsible-header-color: #fff !default;
+$collapsible-border-color: #ddd !default;
+
+/*** Dropdown ***/
+$dropdown-bg-color: #fff !default;
+$dropdown-hover-bg-color: #eee !default;
+$dropdown-color: $secondary-color !default;
+
+/*** Fonts ***/
+$roboto-font-path: "../font/roboto/" !default;
+$icons-font-path: "../font/material-design-icons/" !default;
+
+/*** Forms ***/
+// Text Inputs + Textarea
+$input-border-color: color("grey", "base") !default;
+$input-bg-color: #fff !default;
+$input-error-color: $error-color !default;
+$input-success-color: $success-color !default;
+$input-focus-color: $secondary-color !default;
+$label-font-size: .8rem !default;
+$input-disabled-color: rgba(0,0,0, .26) !default;
+$input-disabled-solid-color: #BDBDBD !default;
+
+// Radio Buttons
+$radio-fill-color: $secondary-color !default;
+$radio-empty-color: #5a5a5a !default;
+
+// Switches
+$switch-bg-color: $secondary-color !default;
+$switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
+$switch-unchecked-bg: #F1F1F1 !default;
+$switch-unchecked-lever-bg: #818181 !default;
+
+// Date Picker
+$datepicker-weekday-bg: darken($secondary_color, 7%) !default;
+$datepicker-date-bg: $secondary_color !default;
+$datepicker-year: rgba(255, 255, 255, .4) !default;
+$datepicker-focus: rgba(0,0,0, .05) !default;
+$datepicker-selected: $secondary-color !default;
+$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
+
+
+/*** Global ***/
+// Media Query Ranges
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600px !default;
+$medium-screen: 992px !default;
+$large-screen: 1200px !default;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
+$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
+
+// Grid Variables
+$num-cols: 12 !default;
+$gutter-width: 1.5rem !default;
+$element-top-margin: $gutter-width/3 !default;
+$element-bottom-margin: ($gutter-width*2)/3 !default;
+
+/*** Navbar ***/
+$navbar-height: 64px !default;
+$navbar-height-mobile: 56px !default;
+$navbar-font-color: #fff !default;
+$navbar-brand-font-size: 2.1rem !default;
+
+/*** SideNav ***/
+$sidenav-bg-color: #fff !default;
+$sidenav-padding-right: 15px !default;
+
+/*** Photo Slider ***/
+$slider-bg-color: color('grey', 'base') !default;
+$slider-bg-color-light: color('grey', 'lighten-2') !default;
+$slider-indicator-color: color('green', 'base') !default;
+
+/*** Tabs ***/
+$tabs-underline-color: $primary-color-light !default;
+$tabs-text-color: $primary-color !default;
+$tabs-bg-color: #fff !default;
+
+/*** Tables ***/
+$table-border-color: #d0d0d0 !default;
+$table-striped-color: #f2f2f2 !default;
+
+/*** Toasts ***/
+$toast-height: 48px !default;
+$toast-color: #323232 !default;
+$toast-text-color: #fff !default;
+
+/*** Typography ***/
+$off-black: rgba(0, 0, 0, 0.87) !default;
+// Header Styles
+$h1-fontsize: 4.2rem !default;
+$h2-fontsize: 3.56rem !default;
+$h3-fontsize: 2.92rem !default;
+$h4-fontsize: 2.28rem !default;
+$h5-fontsize: 1.64rem !default;
+$h6-fontsize: 1rem !default;
+
+// Footer
+$footer-bg-color: $primary-color !default;
+
+// Flowtext
+$range : $large-screen - $small-screen !default;
+$intervals: 20 !default;
+$interval-size: $range / $intervals !default;
+
+/*** Collections ***/
+$collection-border-color: #e0e0e0 !default;
+$collection-bg-color: #fff !default;
+$collection-active-bg-color: $secondary-color !default;
+$collection-active-color: lighten($secondary-color, 55%) !default;
+$collection-hover-bg-color: #ddd !default;
+
+/* Progress Bar */
+$progress-bar-color: $secondary-color !default;
diff --git a/system/admin/static/editor/sass/components/_waves.scss b/system/admin/static/editor/sass/components/_waves.scss
new file mode 100644
index 0000000..7a8e8c0
--- /dev/null
+++ b/system/admin/static/editor/sass/components/_waves.scss
@@ -0,0 +1,167 @@
+
+/*!
+ * Waves v0.6.0
+ * http://fian.my.id/Waves
+ *
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
+ * Released under the MIT license
+ * https://github.com/fians/Waves/blob/master/LICENSE
+ */
+
+
+.waves-effect {
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    // white-space: nowrap;
+    // outline: 0;
+
+    vertical-align: middle;
+    // cursor: pointer;
+    // border: none;
+    // outline: none;
+    // color: inherit;
+    // background-color: rgba(0, 0, 0, 0);
+    // font-size: 1em;
+    // line-height:1em;
+    // text-align: center;
+    // text-decoration: none;
+    z-index: 1;
+    will-change: opacity, transform;
+    @include transition(all .3s ease-out);
+
+    .waves-ripple {
+        position: absolute;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        margin-top:-10px;
+        margin-left:-10px;
+        opacity: 0;
+
+        background: rgba(0,0,0,0.2);
+        // $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
+        // background: -webkit-radial-gradient($gradient);
+        // background: -o-radial-gradient($gradient);
+        // background: -moz-radial-gradient($gradient);
+        // background: radial-gradient($gradient);
+        @include transition(all 0.7s ease-out);
+        -webkit-transition-property: -webkit-transform, opacity;
+        -moz-transition-property: -moz-transform, opacity;
+        -o-transition-property: -o-transform, opacity;
+        transition-property: transform, opacity;
+        @include transform(scale(0));
+        pointer-events: none;
+    }
+
+    // Waves Colors
+    &.waves-light .waves-ripple {
+      background-color: rgba(255, 255, 255, 0.45);
+    }
+
+    &.waves-red .waves-ripple {
+      background-color: rgba(244, 67, 54, .70);
+    }
+    &.waves-yellow .waves-ripple {
+      background-color: rgba(255, 235, 59, .70);
+    }
+    &.waves-orange .waves-ripple {
+      background-color: rgba(255, 152, 0, .70);
+    }
+    &.waves-purple .waves-ripple {
+      background-color: rgba(156, 39, 176, 0.70);
+    }
+    &.waves-green .waves-ripple {
+      background-color: rgba(76, 175, 80, 0.70);
+    }
+    &.waves-teal .waves-ripple {
+      background-color: rgba(0, 150, 136, 0.70);
+    }
+
+}
+
+.waves-notransition {
+    @include transition(none #{"!important"});
+}
+
+.waves-circle {
+    @include transform(translateZ(0));
+    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+// .waves-button,
+// .waves-button:hover,
+// .waves-button:visited,
+// .waves-button-input {
+//     white-space: nowrap;
+//     vertical-align: middle;
+//     cursor: pointer;
+//     border: none;
+//     outline: none;
+//     color: inherit;
+//     background-color: rgba(0, 0, 0, 0);
+//     font-size: 1em;
+//     line-height:1em;
+//     text-align: center;
+//     text-decoration: none;
+//     z-index: 1;
+// }
+
+// .waves-button {
+//     padding: 0.85em 1.1em;
+//     border-radius: 0.2em;
+// }
+
+// .waves-button-input {
+//     margin: 0;
+//     padding: 0.85em 1.1em;
+// }
+
+.waves-input-wrapper {
+    border-radius: 0.2em;
+    vertical-align: bottom;
+
+    // &.waves-button {
+    //     padding: 0;
+    // }
+
+    .waves-button-input {
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
+.waves-circle {
+    text-align: center;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    border-radius: 50%;
+    -webkit-mask-image: none;
+}
+
+// .waves-float {
+    // -webkit-mask-image: none;
+    // @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
+
+    // &:active {
+        // @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
+//     }
+// }
+
+.waves-block {
+    display: block;
+}
+
+/* Firefox Bug: link not triggered */
+a.waves-effect .waves-ripple {
+    z-index: -1;
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/date_picker/_default.date.scss b/system/admin/static/editor/sass/components/date_picker/_default.date.scss
new file mode 100644
index 0000000..1cd0f93
--- /dev/null
+++ b/system/admin/static/editor/sass/components/date_picker/_default.date.scss
@@ -0,0 +1,435 @@
+/* ==========================================================================
+   $BASE-DATE-PICKER
+   ========================================================================== */
+/**
+ * The picker box.
+ */
+.picker__box {
+  padding: 0 1em;
+}
+/**
+ * The header containing the month and year stuff.
+ */
+.picker__header {
+  text-align: center;
+  position: relative;
+  margin-top: .75em;
+}
+/**
+ * The month and year labels.
+ */
+.picker__month,
+.picker__year {
+//  font-weight: 500;
+  display: inline-block;
+  margin-left: .25em;
+  margin-right: .25em;
+}
+/**
+ * The month and year selectors.
+ */
+.picker__select--month,
+.picker__select--year {
+
+  height: 2em;
+  padding: 0;
+  margin-left: .25em;
+  margin-right: .25em;
+}
+
+// Modified
+.picker__select--month.browser-default {
+  display: inline;
+  background-color: #FFFFFF;
+  width: 40%;
+}
+.picker__select--year.browser-default {
+  display: inline;
+  background-color: #FFFFFF;
+  width: 25%;
+}
+.picker__select--month:focus,
+.picker__select--year:focus {
+  border-color: $datepicker-focus;
+}
+/**
+ * The month navigation buttons.
+ */
+.picker__nav--prev,
+.picker__nav--next {
+  position: absolute;
+  padding: .5em 1.25em;
+  width: 1em;
+  height: 1em;
+  box-sizing: content-box;
+  top: -0.25em;
+}
+//@media (min-width: 24.5em) {
+//  .picker__nav--prev,
+//  .picker__nav--next {
+//    top: -0.33em;
+//  }
+//}
+.picker__nav--prev {
+  left: -1em;
+  padding-right: 1.25em;
+}
+//@media (min-width: 24.5em) {
+//  .picker__nav--prev {
+//    padding-right: 1.5em;
+//  }
+//}
+.picker__nav--next {
+  right: -1em;
+  padding-left: 1.25em;
+}
+//@media (min-width: 24.5em) {
+//  .picker__nav--next {
+//    padding-left: 1.5em;
+//  }
+//}
+
+.picker__nav--disabled,
+.picker__nav--disabled:hover,
+.picker__nav--disabled:before,
+.picker__nav--disabled:before:hover {
+  cursor: default;
+  background: none;
+  border-right-color: #f5f5f5;
+  border-left-color: #f5f5f5;
+}
+/**
+ * The calendar table of dates
+ */
+.picker__table {
+  text-align: center;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-size: 1rem;
+  width: 100%;
+  margin-top: .75em;
+  margin-bottom: .5em;
+}
+
+
+
+.picker__table th, .picker__table td {
+  text-align: center;
+}
+
+
+
+
+
+
+.picker__table td {
+  margin: 0;
+  padding: 0;
+}
+/**
+ * The weekday labels
+ */
+.picker__weekday {
+  width: 14.285714286%;
+  font-size: .75em;
+  padding-bottom: .25em;
+  color: #999999;
+  font-weight: 500;
+  /* Increase the spacing a tad */
+}
+@media (min-height: 33.875em) {
+  .picker__weekday {
+    padding-bottom: .5em;
+  }
+}
+/**
+ * The days on the calendar
+ */
+
+.picker__day--today {
+  position: relative;
+  color: #595959;
+  letter-spacing: -.3;
+  padding: .75rem 0;
+  font-weight: 400;
+  border: 1px solid transparent;
+
+}
+
+//.picker__day--today:before {
+//  content: " ";
+//  position: absolute;
+//  top: 2px;
+//  right: 2px;
+//  width: 0;
+//  height: 0;
+//  border-top: 0.5em solid #0059bc;
+//  border-left: .5em solid transparent;
+//}
+.picker__day--disabled:before {
+  border-top-color: #aaaaaa;
+}
+
+
+.picker__day--infocus:hover{
+  cursor: pointer;
+  color: #000;
+  font-weight: 500;
+}
+
+.picker__day--outfocus {
+  display: none;
+  padding: .75rem 0;
+  color: #fff;
+
+}
+.picker__day--outfocus:hover {
+  cursor: pointer;
+  color: #dddddd;
+//  background: #b1dcfb;
+  font-weight: 500;
+}
+
+
+.picker__day--highlighted {
+//  border-color: #0089ec;
+}
+.picker__day--highlighted:hover,
+.picker--focused .picker__day--highlighted {
+  cursor: pointer;
+//  color: #000000;
+//  background: #b1dcfb;
+//  font-weight: 500;
+}
+.picker__day--selected,
+.picker__day--selected:hover,
+.picker--focused .picker__day--selected {
+
+
+//  Circle background
+   border-radius: 50%;
+  @include transform(scale(.75));
+  background: #0089ec;
+  color: #ffffff;
+}
+.picker__day--disabled,
+.picker__day--disabled:hover,
+.picker--focused .picker__day--disabled {
+  background: #f5f5f5;
+  border-color: #f5f5f5;
+  color: #dddddd;
+  cursor: default;
+}
+.picker__day--highlighted.picker__day--disabled,
+.picker__day--highlighted.picker__day--disabled:hover {
+  background: #bbbbbb;
+}
+/**
+ * The footer containing the "today", "clear", and "close" buttons.
+ */
+.picker__footer {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.picker__button--today,
+.picker__button--clear,
+.picker__button--close {
+  border: 1px solid #ffffff;
+  background: #ffffff;
+  font-size: .8em;
+  padding: .66em 0;
+  font-weight: bold;
+  width: 33%;
+  display: inline-block;
+  vertical-align: bottom;
+}
+.picker__button--today:hover,
+.picker__button--clear:hover,
+.picker__button--close:hover {
+  cursor: pointer;
+  color: #000000;
+  background: #b1dcfb;
+  border-bottom-color: #b1dcfb;
+}
+.picker__button--today:focus,
+.picker__button--clear:focus,
+.picker__button--close:focus {
+  background: #b1dcfb;
+  border-color: $datepicker-focus;
+  outline: none;
+}
+.picker__button--today:before,
+.picker__button--clear:before,
+.picker__button--close:before {
+  position: relative;
+  display: inline-block;
+  height: 0;
+}
+.picker__button--today:before,
+.picker__button--clear:before {
+  content: " ";
+  margin-right: .45em;
+}
+.picker__button--today:before {
+  top: -0.05em;
+  width: 0;
+  border-top: 0.66em solid #0059bc;
+  border-left: .66em solid transparent;
+}
+.picker__button--clear:before {
+  top: -0.25em;
+  width: .66em;
+  border-top: 3px solid #ee2200;
+}
+.picker__button--close:before {
+  content: "\D7";
+  top: -0.1em;
+  vertical-align: top;
+  font-size: 1.1em;
+  margin-right: .35em;
+  color: #777777;
+}
+.picker__button--today[disabled],
+.picker__button--today[disabled]:hover {
+  background: #f5f5f5;
+  border-color: #f5f5f5;
+  color: #dddddd;
+  cursor: default;
+}
+.picker__button--today[disabled]:before {
+  border-top-color: #aaaaaa;
+}
+
+/* ==========================================================================
+   CUSTOM MATERIALIZE STYLES
+   ========================================================================== */
+.picker__box {
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.picker__date-display {
+  text-align: center;
+  background-color: $datepicker-date-bg;
+  color: #fff;
+  padding-bottom: 15px;
+  font-weight: 300;
+}
+
+.picker__nav--prev:hover,
+.picker__nav--next:hover {
+  cursor: pointer;
+  color: #000000;
+  background: $datepicker-selected-outfocus;
+}
+
+.picker__weekday-display {
+  background-color: $datepicker-weekday-bg;
+  padding: 10px;
+  font-weight: 200;
+  letter-spacing: .5;
+  font-size: 1rem;
+  margin-bottom: 15px;
+}
+
+.picker__month-display {
+  text-transform: uppercase;
+  font-size: 2rem;
+}
+.picker__day-display {
+
+  font-size: 4.5rem;
+  font-weight: 400;
+}
+.picker__year-display {
+  font-size: 1.8rem;
+  color: $datepicker-year;
+}
+
+.picker__box {
+  padding: 0;
+}
+.picker__calendar-container {
+  padding: 0 1rem;
+
+  thead {
+    border: none;
+  }
+}
+
+// Calendar
+.picker__table {
+  margin-top: 0;
+  margin-bottom: .5em;
+}
+
+.picker__day--infocus {
+  color: #595959;
+  letter-spacing: -.3;
+  padding: .75rem 0;
+  font-weight: 400;
+  border: 1px solid transparent;
+}
+
+//Today style
+.picker__day.picker__day--today {
+  color: $datepicker-selected;
+}
+
+.picker__day.picker__day--today.picker__day--selected {
+  color: #fff;
+}
+
+// Table Header
+.picker__weekday {
+  font-size: .9rem;
+}
+
+
+.picker__day--selected,
+.picker__day--selected:hover,
+.picker--focused .picker__day--selected {
+  // Circle background
+  border-radius: 50%;
+  @include transform(scale(.9));
+  background-color: $datepicker-selected;
+  &.picker__day--outfocus {
+    background-color: $datepicker-selected-outfocus;
+  }
+  color: #ffffff;
+}
+
+.picker__footer {
+  text-align: right;
+  padding: 5px 10px;
+}
+
+// Materialize modified
+.picker__close, .picker__today {
+  font-size: 1.1rem;
+  padding: 0 1rem;
+  color: $datepicker-selected;
+}
+
+//month nav buttons
+.picker__nav--prev:before,
+.picker__nav--next:before {
+  content: " ";
+  border-top: .5em solid transparent;
+  border-bottom: .5em solid transparent;
+  border-right: 0.75em solid #676767;
+  width: 0;
+  height: 0;
+  display: block;
+  margin: 0 auto;
+}
+.picker__nav--next:before {
+  border-right: 0;
+  border-left: 0.75em solid #676767;
+}
+button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
+  background-color: $datepicker-selected-outfocus;
+}
diff --git a/system/admin/static/editor/sass/components/date_picker/_default.scss b/system/admin/static/editor/sass/components/date_picker/_default.scss
new file mode 100644
index 0000000..d96395f
--- /dev/null
+++ b/system/admin/static/editor/sass/components/date_picker/_default.scss
@@ -0,0 +1,201 @@
+/* ==========================================================================
+   $BASE-PICKER
+   ========================================================================== */
+/**
+ * Note: the root picker element should *NOT* be styled more than what's here.
+ */
+.picker {
+  font-size: 16px;
+  text-align: left;
+  line-height: 1.2;
+  color: #000000;
+  position: absolute;
+  z-index: 10000;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/**
+ * The picker input element.
+ */
+.picker__input {
+  cursor: default;
+}
+/**
+ * When the picker is opened, the input element is "activated".
+ */
+.picker__input.picker__input--active {
+  border-color: #0089ec;
+}
+/**
+ * The holder is the only "scrollable" top-level container element.
+ */
+.picker__holder {
+  width: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/*!
+ * Default mobile-first, responsive styling for pickadate.js
+ * Demo: http://amsul.github.io/pickadate.js
+ */
+/**
+ * Note: the root picker element should *NOT* be styled more than what's here.
+ */
+/**
+ * Make the holder and frame fullscreen.
+ */
+.picker__holder,
+.picker__frame {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 100%;
+}
+/**
+ * The holder should overlay the entire screen.
+ */
+.picker__holder {
+  position: fixed;
+  -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
+  -moz-transition: background 0.15s ease-out, top 0s 0.15s;
+  transition: background 0.15s ease-out, top 0s 0.15s;
+  -webkit-backface-visibility: hidden;
+}
+/**
+ * The frame that bounds the box contents of the picker.
+ */
+.picker__frame {
+  position: absolute;
+  margin: 0 auto;
+  min-width: 256px;
+
+//  picker width
+  width: 300px;
+  max-height: 350px;
+
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -moz-opacity: 0;
+  opacity: 0;
+  -webkit-transition: all 0.15s ease-out;
+  -moz-transition: all 0.15s ease-out;
+  transition: all 0.15s ease-out;
+}
+@media (min-height: 28.875em) {
+  .picker__frame {
+    overflow: visible;
+    top: auto;
+    bottom: -100%;
+    max-height: 80%;
+  }
+}
+@media (min-height: 40.125em) {
+  .picker__frame {
+    margin-bottom: 7.5%;
+  }
+}
+/**
+ * The wrapper sets the stage to vertically align the box contents.
+ */
+.picker__wrap {
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+@media (min-height: 28.875em) {
+  .picker__wrap {
+    display: block;
+  }
+}
+/**
+ * The box contains all the picker contents.
+ */
+.picker__box {
+  background: #ffffff;
+  display: table-cell;
+  vertical-align: middle;
+}
+//@media (min-height: 26.5em) {
+//  .picker__box {
+////    font-size: 1.25em;
+//  }
+//}
+@media (min-height: 28.875em) {
+  .picker__box {
+    display: block;
+
+//    picker header font-size
+//    font-size: 1rem;
+
+    border: 1px solid #777777;
+    border-top-color: #898989;
+    border-bottom-width: 0;
+    -webkit-border-radius: 5px 5px 0 0;
+    -moz-border-radius: 5px 5px 0 0;
+    border-radius: 5px 5px 0 0;
+    -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
+    -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
+    box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
+  }
+}
+//@media (min-height: 40.125em) {
+//  .picker__box {
+//    font-size: 1.1rem;
+//    border-bottom-width: 1px;
+//    -webkit-border-radius: 5px;
+//    -moz-border-radius: 5px;
+//    border-radius: 5px;
+//  }
+//}
+/**
+ * When the picker opens...
+ */
+.picker--opened .picker__holder {
+  top: 0;
+  background: transparent;
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
+  zoom: 1;
+  background: rgba(0, 0, 0, 0.32);
+  -webkit-transition: background 0.15s ease-out;
+  -moz-transition: background 0.15s ease-out;
+  transition: background 0.15s ease-out;
+}
+.picker--opened .picker__frame {
+  top: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: alpha(opacity=100);
+  -moz-opacity: 1;
+  opacity: 1;
+}
+@media (min-height: 35.875em) {
+  .picker--opened .picker__frame {
+    top: 10%;
+    bottom: 20%auto;
+  }
+}
+/**
+ * For `large` screens, transform into an inline picker.
+ */
+
+/* ==========================================================================
+   CUSTOM MATERIALIZE STYLES
+   ========================================================================== */
+
+.picker__input.picker__input--active {
+  border-color: color("blue", "lighten-5");
+}
+
+.picker__frame {
+  margin: 0 auto;
+  max-width: 325px;
+}
+
+@media (min-height: 38.875em) {
+  .picker--opened .picker__frame {
+    top: 10%;
+    bottom: auto;
+  }
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/components/date_picker/_default.time.scss b/system/admin/static/editor/sass/components/date_picker/_default.time.scss
new file mode 100644
index 0000000..0b159c8
--- /dev/null
+++ b/system/admin/static/editor/sass/components/date_picker/_default.time.scss
@@ -0,0 +1,125 @@
+/* ==========================================================================
+   $BASE-TIME-PICKER
+   ========================================================================== */
+/**
+ * The list of times.
+ */
+.picker__list {
+  list-style: none;
+  padding: 0.75em 0 4.2em;
+  margin: 0;
+}
+/**
+ * The times on the clock.
+ */
+.picker__list-item {
+  border-bottom: 1px solid #dddddd;
+  border-top: 1px solid #dddddd;
+  margin-bottom: -1px;
+  position: relative;
+  background: #ffffff;
+  padding: .75em 1.25em;
+}
+@media (min-height: 46.75em) {
+  .picker__list-item {
+    padding: .5em 1em;
+  }
+}
+/* Hovered time */
+.picker__list-item:hover {
+  cursor: pointer;
+  color: #000000;
+  background: #b1dcfb;
+  border-color: #0089ec;
+  z-index: 10;
+}
+/* Highlighted and hovered/focused time */
+.picker__list-item--highlighted {
+  border-color: #0089ec;
+  z-index: 10;
+}
+.picker__list-item--highlighted:hover,
+.picker--focused .picker__list-item--highlighted {
+  cursor: pointer;
+  color: #000000;
+  background: #b1dcfb;
+}
+/* Selected and hovered/focused time */
+.picker__list-item--selected,
+.picker__list-item--selected:hover,
+.picker--focused .picker__list-item--selected {
+  background: #0089ec;
+  color: #ffffff;
+  z-index: 10;
+}
+/* Disabled time */
+.picker__list-item--disabled,
+.picker__list-item--disabled:hover,
+.picker--focused .picker__list-item--disabled {
+  background: #f5f5f5;
+  border-color: #f5f5f5;
+  color: #dddddd;
+  cursor: default;
+  border-color: #dddddd;
+  z-index: auto;
+}
+/**
+ * The clear button
+ */
+.picker--time .picker__button--clear {
+  display: block;
+  width: 80%;
+  margin: 1em auto 0;
+  padding: 1em 1.25em;
+  background: none;
+  border: 0;
+  font-weight: 500;
+  font-size: .67em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #666;
+}
+.picker--time .picker__button--clear:hover,
+.picker--time .picker__button--clear:focus {
+  color: #000000;
+  background: #b1dcfb;
+  background: #ee2200;
+  border-color: #ee2200;
+  cursor: pointer;
+  color: #ffffff;
+  outline: none;
+}
+.picker--time .picker__button--clear:before {
+  top: -0.25em;
+  color: #666;
+  font-size: 1.25em;
+  font-weight: bold;
+}
+.picker--time .picker__button--clear:hover:before,
+.picker--time .picker__button--clear:focus:before {
+  color: #ffffff;
+}
+
+/* ==========================================================================
+   $DEFAULT-TIME-PICKER
+   ========================================================================== */
+/**
+ * The frame the bounds the time picker.
+ */
+.picker--time .picker__frame {
+  min-width: 256px;
+  max-width: 320px;
+}
+/**
+ * The picker box.
+ */
+.picker--time .picker__box {
+  font-size: 1em;
+  background: #f2f2f2;
+  padding: 0;
+}
+@media (min-height: 40.125em) {
+  .picker--time .picker__box {
+    margin-bottom: 5em;
+  }
+}
diff --git a/system/admin/static/editor/sass/materialNote.scss b/system/admin/static/editor/sass/materialNote.scss
new file mode 100644
index 0000000..5faca9e
--- /dev/null
+++ b/system/admin/static/editor/sass/materialNote.scss
@@ -0,0 +1,734 @@
+@import "components/color";
+@import "components/variables";
+
+/* variables 
+=================================================================================*/
+$toolbarColor: color("grey", "lighten-2") !default;
+$toolbarTextColor: color("grey", "darken-3") !default;
+
+$borderColor: color("grey", "base") !default;
+
+$firstButtonColor: color("grey", "lighten-2") !default;
+$firstButtonHoverColor: color("grey", "base") !default;
+$secondButtonColor: color("blue", "darken-4") !default;
+$secondButtonHoverColor: color("blue", "base") !default;
+$thirdButtonColor: color("red", "darken-4") !default;
+$thirdButtonHoverColor: color("blue", "base") !default;
+
+$firstFocusColor: color("blue", "base") !default;
+$secondFocusColor: color("grey", "base") !default;
+
+$selectionColor: color("grey", "darken-1") !default;
+
+$helpBackgroundColor: color("grey", "lighten-2") !default;
+
+// base unit for table dimension picker
+$gridUnit: 26px;
+
+
+.editorDialogs .modal, .note-editor .modal {
+    background-color: lighten($toolbarColor, 100%);
+    color: $toolbarTextColor;
+    z-index: 1057 !important;
+    backface-visibility: hidden;
+
+    .input-field input:not([readonly]), .input-field input.datepicker {
+        border-color: $toolbarTextColor !important;
+    }
+    .input-field input:focus:not([readonly]), .input-field input.datepicker:focus, textarea.materialize-textarea:focus:not([readonly]) {
+        box-shadow: 0 1px 0 0 $firstFocusColor !important;
+        border-color: $firstFocusColor !important;
+    }
+    label, .input-field input:not([readonly]) + label, .input-field input.datepicker + label, .input-field .prefix, .note-editor + label {
+        color: $toolbarTextColor !important;
+    }
+    .input-field input:focus:not([readonly]) + label, .input-field input.datepicker:focus + label, .input-field .prefix.active, textarea.materialize-textarea:focus:not([readonly]) + label {
+        color: $firstFocusColor !important;
+    }
+
+    .btn {
+        background-color: $secondButtonColor;
+        color: lighten($toolbarTextColor, 100%) !important;
+    }
+    .btn:hover {
+        background-color: lighten($secondButtonColor, 10%) !important;
+    }
+
+    .btn.disabled {
+        background-color: darken($secondButtonColor, 15%) !important;
+    }
+
+    .modal-footer {
+        background-color: darken($toolbarColor, 10%);
+
+        .btnClose {
+            margin-right: 15px;
+            background-color: $thirdButtonColor;
+        }
+
+        .btnClose:hover {
+            background-color: lighten($thirdButtonColor, 10%) !important;
+        }
+    }
+
+    .canvasContainerEmpty {
+        border: solid 5px $firstFocusColor;
+    }
+}
+
+//scrollbars
+.note-editor .note-editable, .editorDialogs .modal-content, .note-editor .note-color-palette, .note-editor .note-codable, .modal.modal-fixed-footer .modal-content {
+    &::-webkit-scrollbar {
+        width: 17px !important;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: $toolbarColor !important;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: lighten($toolbarColor, 20%) !important;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: lighten($toolbarColor, 30%) !important;
+    }
+}
+
+.note-editor {
+    position: relative;
+    border: {
+        left: 1px solid $toolbarColor;
+        bottom: 1px solid $toolbarColor;
+        right: 1px solid $toolbarColor;
+    }
+
+    .img-circle {
+        border-radius: 50%;
+    }
+
+    .img-rounded {
+        border-radius: 5%;
+    }
+
+    .img-thumbnail {
+        border: solid 2px $toolbarColor;
+        height: 200px;
+    }
+
+    .img-bordered {
+        border: solid 5px $toolbarColor;
+    }
+
+    .btn:hover {
+        background-color: lighten($firstButtonColor, 10%) !important;
+    }
+
+    .btn.active {
+        background-color: $firstFocusColor;
+    }
+
+    .note-editable {
+        ul li {
+            list-style-type: square !important;
+            display: list-item;
+            list-style-position: inside;
+        }
+    }
+
+    .note-dialog {
+        & > div {
+            display: none
+        }
+        .form-group {
+            margin-right: 0;
+            margin-left: 0
+        }
+        .note-modal-form {
+            margin: 0
+        }
+        .note-image-dialog .note-dropzone {
+            min-height: 100px;
+            margin-bottom: 10px;
+            font-size: 30px;
+            line-height: 4;
+            color: lightgray;
+            text-align: center;
+            border: 4px dashed lightgray
+        }
+    }
+
+    .transparent {
+        opacity: 0;
+    }
+
+    .note-resizebar {
+        background-color: $toolbarColor;
+        width: 100%;
+        height: 13px;
+        cursor: ns-resize;
+        padding-top: 1px;
+
+        .note-icon-bar {
+            width: 20px;
+            margin: 2px auto;
+            border-top: 2px solid lighten($toolbarColor, 20%);
+        }
+    }
+    
+    .note-toolbar {
+        position: relative;
+        color: $toolbarTextColor;
+        background-color: $toolbarColor;
+        margin: 0;
+        z-index: 1052;
+
+        ul {
+            padding: 0;
+        }
+
+        .btn.disabled, button.disabled {
+            display: none;
+        }
+
+        .dropdown {
+            cursor: pointer;
+        }
+
+        .note-current-fontname {
+            min-width: 134px;
+            display: inline-block;
+            text-align: left;
+        }
+    }
+
+    .note-handle {
+        .note-control-selection {
+            position: absolute;
+            display: none;
+            border: 2px solid $firstButtonColor;
+
+            .note-control-selection-bg {
+                width: 100%;
+                height: 100%;
+                z-index: 3;
+                background-color: transparentize($selectionColor, 0.7);
+            }
+
+            & > div {
+                position: absolute
+            }
+            .note-control-handle {
+                width: 7px;
+                height: 7px;
+                border: 1px solid black;
+            }
+            .note-control-holder {
+                width: 7px;
+                height: 7px;
+                border: 1px solid black;
+            }
+            .note-control-sizing {
+                width: 15px;
+                height: 15px;
+                background-color: $firstButtonColor;
+                z-index: 5;
+                cursor: se-resize;
+            }
+            .note-control-nw {
+                top: -5px;
+                left: -5px;
+                border-right: 0;
+                border-bottom: 0;
+            }
+            .note-control-ne {
+                top: -5px;
+                right: -5px;
+                border-bottom: 0;
+                border-left: none;
+            }
+            .note-control-sw {
+                bottom: -5px;
+                left: -5px;
+                border-top: 0;
+                border-right: 0;
+            }
+            .note-control-se {
+                right: -5px;
+                bottom: -5px;
+            }
+            .note-control-selection-info {
+                right: 0;
+                bottom: 0;
+                padding: 5px;
+                margin: 17px;
+                font-size: 15px;
+                color: $toolbarTextColor;
+                background-color: $firstButtonColor;
+                z-index: 5;
+            }
+        }
+    }
+}
+
+.note-dialog .note-help-dialog {
+    color: $toolbarColor;
+
+    h4 {
+        color: $toolbarTextColor;
+    }
+
+    thead {
+        background-color: $firstFocusColor;
+    }
+
+    tbody {
+        background-color: $helpBackgroundColor;
+    }
+}
+
+.note-editor, .popover {
+    .btn-group {
+        display: inline-block;
+        margin-right: 10px;
+        position: relative;
+
+        ul {
+            padding: 0;
+        }
+
+        .closeLeft {
+            padding-right: 0 !important;
+            margin-right: 0 !important;
+
+            i {
+                margin-right: 0 !important;
+            }
+        }
+
+        i.left {
+            margin-right: 5px;
+        }
+    }
+
+    .note-toolbar .btn {
+        border-radius: 0 !important;
+        box-shadow: none !important;
+        padding: 0 9px !important;
+        background-color: $firstButtonColor;
+    }
+
+    .btnSecond {
+        background-color: $secondButtonColor !important;
+    }
+
+    .btnThird {
+        background-color: $thirdButtonColor !important;
+    }
+
+    note-toolbar button, button, .note-toolbar .btn  {
+        background-color: $firstButtonColor;
+        border: none;
+        height: 36px;
+        text-transform: uppercase;
+        color: $toolbarTextColor !important;
+    }
+
+    [type="checkbox"]:checked + label:before, [type="checkbox"]:checked + label:before {
+        border-right-color: $secondButtonColor !important;
+        border-bottom-color: $secondButtonColor !important;
+    }
+
+    .note-palette-title {
+        padding: 0 !important;
+    }
+
+    .colorName {
+        display: inline-block;
+        color: $toolbarTextColor;
+
+        @media #{$small-and-down} {
+            display: none;
+        }
+    }
+
+    .note-color-palette {
+        line-height: 10px;
+        border: solid 3px $toolbarColor;
+        padding: 0 !important;
+        overflow-x: scroll;
+        overflow-y: hidden;
+
+        .note-color-row {
+            padding: 0 !important;
+            min-width: 300px;
+        }
+
+        button.note-color-btn {
+            width: 20px;
+            height: 20px;
+            padding: 0;
+            margin: 0;
+        }
+
+        .note-color-btn:hover {
+            &:after {
+                position: absolute;
+                width: 30px;
+                height: 30px;
+                content: "";
+                background-color: inherit;
+                margin-top: -15px;
+                margin-left: -15px;
+            }
+        }
+    }
+
+    .note-dimension-picker {
+        overflow: hidden;
+    }
+
+    .largeDropdown {
+        width: 290px;
+    }
+
+    .dropdown-menu {
+        z-index: 1033;
+
+        &.note-check {
+            min-width: 80px;
+        }
+
+        label {
+            color: $toolbarTextColor !important;
+        }
+    }
+
+    ul.dropdown-menu {
+        position: absolute;
+        top: 20px;
+        background-color: lighten($toolbarColor, 10%);
+        border: {
+            left: 3px solid $toolbarColor;
+            bottom: 3px solid $toolbarColor;
+            right: 3px solid $toolbarColor;
+        }
+
+        &#colors {
+            width: 342px;
+
+            .indicator {
+                width: 50%;
+                left: 0;
+            }
+        }
+        
+        .colorTable {
+            padding: 3px 0;
+        }
+
+        .tabs {
+            background-color: $toolbarColor;
+            
+            &:hover {
+                background-color: $toolbarColor;
+            }
+
+            .tab a, .tab a:hover {
+                color: $secondFocusColor;
+            }
+
+            .indicator {
+                background-color: $secondFocusColor;
+            }
+        }
+
+        li {
+            list-style-type: none;
+            padding: 0 !important;
+
+            div {
+                padding: 3px 15px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+.note-popover .popover {
+    position: absolute;
+    max-width: none;
+    color: $toolbarTextColor;
+
+    .arrow {
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 10px 10px 10px;
+        border-color: transparent transparent $firstButtonColor transparent;
+    }
+
+    .popover-content {
+        background-color: $firstButtonColor;
+
+        & > a {
+            margin-left: 12px;
+        }
+
+        a {
+            display: inline-block;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            vertical-align: middle
+        }
+
+        .arrow {
+            left: 20px
+        }
+
+        .btn-group {
+            display: inline-block;
+
+            .btn {
+                border-radius: 0 !important;
+                box-shadow: none !important;
+                padding: 0 9px !important;
+                background-color: $firstButtonColor;
+                color: $toolbarTextColor !important;
+            }
+        }
+    }
+}
+
+.note-popover .popover .popover-content .note-para .dropdown-menu, .note-toolbar .note-para .dropdown-menu {
+    min-width: 172px;
+    padding: 5px
+}
+.note-popover .popover .popover-content .note-para .dropdown-menu > div:first-child, .note-toolbar .note-para .dropdown-menu > div:first-child {
+    margin-right: 5px
+}
+
+
+
+
+
+
+
+// the following is unchanged from original summernote css
+.note-editor .note-dropzone {
+    position: absolute;
+    z-index: 100;
+    display: none;
+    color: #87cefa;
+    background-color: white;
+    border: 2px dashed #87cefa;
+    opacity: .95;
+    pointer-event: none
+}
+.note-editor .note-dropzone .note-dropzone-message {
+    display: table-cell;
+    font-size: 28px;
+    font-weight: bold;
+    text-align: center;
+    vertical-align: middle
+}
+.note-editor .note-dropzone.hover {
+    color: #098ddf;
+    border: 2px dashed #098ddf
+}
+.note-editor.dragover .note-dropzone {
+    display: table
+}
+
+.note-editor.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2021;
+    width: 100%
+}
+.note-editor.fullscreen .note-editable {
+    background-color: white
+}
+.note-editor.fullscreen .note-resizebar {
+    display: none
+}
+.note-editor.codeview .note-editable {
+    display: none
+}
+.note-editor.codeview .note-codable {
+    display: block
+}
+.note-editor .note-statusbar {
+    background-color: #f5f5f5
+}
+.note-editor .note-editable[contenteditable=true]:empty:not(:focus):before {
+    color: #a9a9a9;
+    content: attr(data-placeholder)
+}
+.note-editor .note-editable {
+    padding: 10px;
+    overflow: auto;
+    outline: 0
+}
+.note-editor .note-editable[contenteditable="false"] {
+    background-color: #e5e5e5
+}
+.note-editor .note-codable {
+    display: none;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 0;
+    font-family: Menlo, Monaco, monospace, sans-serif;
+    font-size: 14px;
+    color: #ccc;
+    background-color: #222;
+    border: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    resize: none
+}
+.note-air-editor {
+    outline: 0
+}
+
+.note-popover .popover .popover-content,
+.note-toolbar {
+    padding: 0;
+    margin: 0
+}
+.note-popover .popover .popover-content > .btn-group,
+.note-toolbar > .btn-group {
+    margin-top: 0;
+    margin-right: 5px;
+    margin-left: 0
+}
+.note-popover .popover .popover-content .btn-group .note-table,
+.note-toolbar .btn-group .note-table {
+    min-width: 0;
+    padding: 5px
+}
+.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker,
+.note-toolbar .btn-group .note-table .note-dimension-picker {
+    font-size: 18px
+}
+.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher,
+.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher {
+    position: absolute!important;
+    z-index: 3;
+    width: $gridUnit * 10;
+    height:$gridUnit * 10;
+    cursor: pointer
+}
+.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted,
+.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted {
+    position: relative !important;
+    z-index: 1;
+    width: $gridUnit * 12;
+    height: $gridUnit * 5;
+    background-size: 26px 26px;    
+    background-image:repeating-linear-gradient(0deg, #3b3b3b, #3b3b3b 4px, transparent 4px, transparent 26px), 
+        repeating-linear-gradient(-90deg, transparent, transparent 4px, #fff 4px, #fff 26px);
+}
+.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted,
+.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted {
+    position: absolute !important;
+    z-index: 2;
+    width: $gridUnit;
+    height: $gridUnit;
+    background-size: 26px 26px;    
+    background-image:repeating-linear-gradient(0deg, #3b3b3b, #3b3b3b 4px, transparent 4px, transparent 26px), 
+        repeating-linear-gradient(-90deg, transparent, transparent 4px, $firstFocusColor 4px, $firstFocusColor 26px);
+}
+
+.note-popover .popover .popover-content .note-style h1,
+.note-toolbar .note-style h1,
+.note-popover .popover .popover-content .note-style h2,
+.note-toolbar .note-style h2,
+.note-popover .popover .popover-content .note-style h3,
+.note-toolbar .note-style h3,
+.note-popover .popover .popover-content .note-style h4,
+.note-toolbar .note-style h4,
+.note-popover .popover .popover-content .note-style h5,
+.note-toolbar .note-style h5,
+.note-popover .popover .popover-content .note-style h6,
+.note-toolbar .note-style h6,
+.note-popover .popover .popover-content .note-style blockquote,
+.note-toolbar .note-style blockquote {
+    margin: 0
+}
+.note-popover .popover .popover-content .note-color .dropdown-toggle,
+.note-toolbar .note-color .dropdown-toggle {
+    width: 20px;
+    padding-left: 5px
+}
+.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group,
+.note-toolbar .note-color .dropdown-menu .btn-group {
+    margin: 0
+}
+.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group:first-child,
+.note-toolbar .note-color .dropdown-menu .btn-group:first-child {
+    margin: 0 5px
+}
+.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-palette-title,
+.note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title {
+    margin: 2px 7px;
+    font-size: 12px;
+    text-align: center;
+    border-bottom: 1px solid #eee
+}
+.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset,
+.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset {
+    padding: 0 3px;
+    margin: 3px;
+    font-size: 11px;
+    cursor: pointer;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px
+}
+.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-row,
+.note-toolbar .note-color .dropdown-menu .btn-group .note-color-row {
+    height: 20px
+}
+.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset:hover,
+.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover {
+    background: #eee
+}
+/*.note-popover .popover .popover-content .dropdown-menu,
+.note-toolbar .dropdown-menu {
+    min-width: 90px
+}*/
+.note-popover .popover .popover-content .dropdown-menu.right,
+.note-toolbar .dropdown-menu.right {
+    right: 0;
+    left: auto
+}
+.note-popover .popover .popover-content .dropdown-menu.right::before,
+.note-toolbar .dropdown-menu.right::before {
+    right: 9px;
+    left: auto!important
+}
+.note-popover .popover .popover-content .dropdown-menu.right::after,
+.note-toolbar .dropdown-menu.right::after {
+    right: 10px;
+    left: auto!important
+}
+.note-popover .popover .popover-content .dropdown-menu.note-check li a i,
+.note-toolbar .dropdown-menu.note-check li a i {
+    color: deepskyblue;
+    visibility: hidden
+}
+.note-popover .popover .popover-content .dropdown-menu.note-check li a.checked i,
+.note-toolbar .dropdown-menu.note-check li a.checked i {
+    visibility: visible
+}
+.note-popover .popover .popover-content .note-fontsize-10,
+.note-toolbar .note-fontsize-10 {
+    font-size: 10px
+}
+\ No newline at end of file
diff --git a/system/admin/static/editor/sass/materialize.scss b/system/admin/static/editor/sass/materialize.scss
new file mode 100644
index 0000000..4421631
--- /dev/null
+++ b/system/admin/static/editor/sass/materialize.scss
@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+// Mixins
+@import "components/prefixer";
+@import "components/mixins";
+@import "components/color";
+
+// Variables;
+@import "components/variables";
+
+// Reset
+@import "components/normalize";
+
+// components
+@import "components/global";
+@import "components/icons-material-design";
+@import "components/grid";
+@import "components/navbar";
+@import "components/roboto";
+@import "components/typography";
+@import "components/cards";
+@import "components/toast";
+@import "components/tabs";
+@import "components/tooltip";
+@import "components/buttons";
+@import "components/dropdown";
+@import "components/waves";
+@import "components/modal";
+@import "components/collapsible";
+@import "components/materialbox";
+@import "components/form";
+@import "components/table_of_contents";
+@import "components/sideNav";
+@import "components/preloader";
+@import "components/slider";
+@import "components/date_picker/default.scss";
+@import "components/date_picker/default.date.scss";
+@import "components/date_picker/default.time.scss";
+\ No newline at end of file
author	Steve Manuel <nilslice@gmail.com>	2016-10-02 23:14:31 -0700
committer	Steve Manuel <nilslice@gmail.com>	2016-10-02 23:14:31 -0700
commit	2d33ab3dd1f72b5b737e8af3a2c001ecbca6b14b (patch)
tree	72cfbf4943f24d28d3f504cf60790cd569b1c225 /system/admin/static/editor/sass
parent	37d3f13e071cfdb5e063c67dec604c10dbc6ddde (diff)