Issue #670: Split up _styles.scss

7 files changed, 830 insertions, 797 deletions

diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 099a216c..e6e7a9a2 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -1,5 +1,3 @@
-@import 'base/colors';
-
 // SHARED MIXINS
 @mixin btn-transition {
   @include transition-property(background-color);
@@ -218,39 +216,14 @@
   }
 }
 
-@mixin logo {
-  @keyframes hideshow {
-    0% { fill: lighten($logo_color, 30); }
-    25% { opacity: 1; }
-    100% { opacity: 0; }
-  } 
-
-  .logo-part-animation-off {
-      animation: none;
-  }
-
-  .logo-part-animation-on {
-      animation: hideshow 0.6s ease infinite;
-      opacity: 1;
-
-      &:nth-child(2) {
-        opacity: 0;
-        animation-delay: 0.1s;
-      }
-
-      &:nth-child(3) {
-        animation-delay: 0.2s;
-      }
-      &:nth-child(4) {
-        animation-delay: 0.3s;
-      }
-      &:nth-child(5) {
-        animation-delay: 0.4s;
-      }
-      &:nth-child(6) {
-        animation-delay: 0.5s;
-      }
-  }
+@mixin mail-count($bg_color) {
+  background: $bg_color;
+  color: $white;
+  padding: 2px 5px;
+  font-size: 0.7em;
+  margin-left: 5px;
+  font-weight: 700;
+  position: relative;
+  @include border-radius(100px);
 }
 
-@include logo;
diff --git a/web-ui/app/scss/_others.scss b/web-ui/app/scss/_others.scss
index 317a1066..a5796ebe 100644
--- a/web-ui/app/scss/_others.scss
+++ b/web-ui/app/scss/_others.scss
@@ -1,5 +1,5 @@
 .hidden {
-  display: none;
+    display: none;
 }
 
 .no-padding {
@@ -9,3 +9,64 @@
 .text-right {
     text-align: right;
 }
+
+.search-highlight {
+    background-color: $search-highlight;
+}
+
+button {
+    border: 1px solid transparent;
+
+    i {
+        margin-left: 5px;
+    }
+
+    &#trash-button {
+        background: $white;
+        border: 1px solid $medium_light_grey;
+        color: $medium_light_grey;
+        float: right;
+        margin-left: 5px;
+
+        &:hover, &:focus {
+            background: $contrast;
+        }
+    }
+
+    &.no-style {
+        background: transparent;
+        color: $medium_light_grey;
+        padding: 0;
+        margin: 0;
+
+        i {
+            margin: 0;
+            padding: 0;
+            vertical-align: middle;
+        }
+    }
+}
+
+section {
+    display: inline-block;
+    vertical-align: top;
+    height: 100vh;
+    overflow-y: scroll;
+
+    &#left-pane {
+        background-color: $navigation_background;
+        color: white;
+    }
+
+    &#middle-pane {
+        background: $contrast;
+    }
+
+    &#right-pane {
+        padding: 0 10px 60px 0px;
+        background: $white;
+        box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.12);
+        z-index: 2;
+        overflow-y: auto;
+    }
+}
diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss
index 5a073296..e69de29b 100644
--- a/web-ui/app/scss/_styles.scss
+++ b/web-ui/app/scss/_styles.scss
@@ -1,757 +0,0 @@
-/*
- * Miscellaneous styles without apparent grouping
- */
-
-#logo {
-  color: $white;
-}
-
-#logout {
-  color: $white;
-  cursor: pointer;
-}
-
-.search-highlight {
-  background-color: $search-highlight;
-}
-
-#user-settings-box {
-  position: fixed;
-  z-index: 10;
-
-  &>div {
-    position: fixed;
-    left: 70px;
-    bottom: 0px;
-    z-index: 1;
-    padding: 10px 16px 10px 18px;
-    background-color: rgba($dark_slate_gray, 0.9);
-    min-width: 230px;
-
-    &.extra-bottom-space{
-      bottom: 33px
-    }
-
-    header {
-      border-bottom: 1px solid white;
-      margin-bottom: 10px;
-    }
-
-    #user-settings-close {
-      float: right;
-    }
-
-    h1, i {
-      font-size: 1.2em;
-      color: white;
-      line-height: 1.2em;
-    }
-
-    h2 {
-      font-size: 1.1em;
-      color: white;
-      line-height: 1.1em;
-      display: inline;
-      margin-left: 5px;
-    }
-
-    i.fa-user {
-      margin-right: 10px;
-      float: left;
-    }
-
-    i.fa-close{
-      margin-left: 10px;
-      float: right;
-      cursor: pointer;
-    }
-
-    p {
-      font-size: 1.1em;
-      color: $light_orange;
-    }
-  }
-}
-
-.arrow-box:before {
-  right: 100%;
-  top: 65%;
-  border: 20px solid transparent;
-  content: " ";
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-  border-right-color: rgba($dark_slate_gray, 0.9);
-  margin-top: -20px;
-}
-
-@mixin mail-count($bg_color) {
-  background: $bg_color;
-  color: $white;
-  padding: 2px 5px;
-  font-size: 0.7em;
-  margin-left: 5px;
-  font-weight: 700;
-  position: relative;
-  @include border-radius(100px);
-}
-
-section {
-  display: inline-block;
-  vertical-align: top;
-  height: 100vh;
-  overflow-y: scroll;
-  &#top-pane {
-    height: auto;
-    overflow: hidden;
-    background: $top_pane;
-    border-top: 1px solid $top_pane;
-
-    #list-actions {
-      width: 100%;
-      height: 34px;
-      margin: 0;
-      border-top: 1px solid $white;
-      border-bottom: 2px solid lighten($top_pane, 30%);
-      background: $top_pane;
-      clear: both;
-      overflow: hidden;
-      li {
-        display: inline-block;
-        margin: 1px -3px;
-        vertical-align: top;
-        input[type=checkbox] {
-          @include check-box;
-          margin: 7px 13px 7px;
-        }
-        select {
-          padding: 1px 3px;
-          margin: 0;
-        }
-        input[type=button] {
-          margin: 2px;
-          padding: 4px 10px;
-          background: lighten($contrast, 70%);
-          color: $dark_grey;
-          text-transform: uppercase;
-          font-weight: 400;
-          font-size: 0.8em;
-          opacity: 0.7;
-          border: 1px solid darken($contrast, 10%);
-          @include border-radius(1px);
-          @include btn-transition;
-          &:hover {
-            opacity: 1;
-          }
-          &[disabled=disabled] {
-            opacity: 0.5;
-            cursor: default;
-          }
-        }
-      }
-
-      #pagination-trigger {
-        cursor: pointer;
-        margin: 4px 12px 0 5px;
-
-        span {
-          padding-left: 5px;
-        }
-      }
-    }
-    #compose-search-trigger {
-      padding: 4px;
-    }
-    #actions {
-      ul {
-        margin: 0;
-        li {
-          display: inline-block;
-          margin-right: -5px;
-          a {
-            transition: background-color 150ms ease-out;
-            background: $top_pane;
-            color: $white;
-            font-size: 1.5em;
-            display: block;
-            padding: 14px 20px;
-            margin: 0 1px 0px;
-            opacity: 0.35;
-            &.selected {
-              background: $top_pane;
-              opacity: 1;
-              cursor: default;
-            }
-            &:hover {
-              opacity: 1;
-            }
-          }
-        }
-      }
-    }
-    #search-trigger {
-      padding: 5px;
-      padding-left: 0;
-      input {
-        margin: 0;
-        padding: 8px 30px;
-        color: $navigation_background;
-        background: white;
-        border: none;
-        transition: background-color 150ms ease-out;
-        &:hover {
-          background: darken(white, 2%);
-        }
-        &:focus {
-          background: darken(white, 5%);
-        }
-      }
-      form:before {
-        font-family: "FontAwesome";
-        content: "\f002";
-        position: absolute;
-        padding: 0 10px;
-        top: 15px;
-        color: $medium_light_grey;
-      }
-    }
-  }
-
-  &#left-pane {
-    background-color: $navigation_background;
-    color: white;
-    nav {
-      border-right: 1px solid lighten($navigation_background, 10%);
-      ul#default-tag-list, #custom-tag-list {
-        li {
-          transition: background-color 150ms ease-out;
-          padding: 2px 10px;
-          cursor: pointer;
-          &:hover {
-            background: $light_gray;
-            color: $navigation_background;
-          }
-          &.selected {
-            font-weight: bold;
-            background: $contrast;
-            color: $navigation_background;
-          }
-        }
-      }
-
-      ul#default-tag-list {
-          .unread-count, .total-count {
-          font-size: 0.7em;
-          padding: 0px 5px 0;
-          top: 1px;
-          left: 0;
-          border: 1px solid $white;
-          border-bottom: 1px solid white;
-          position: absolute;
-          opacity: 0.95;
-        }
-        .total-count {
-          background: $medium_light_grey;
-        }
-        span.tag-label {
-          padding-left: 2px;
-        }
-        li {
-          padding: 5px 10px 5px 18px;
-          position: relative;
-          @include searching(4px, 19px, $dark_grey, 0.7em);
-
-          &:before {
-            font-size: 1.5em;
-            font-family: "FontAwesome";
-            margin-right: 16px;
-            font-weight: normal;
-            position: relative;
-            top: 2px;
-            margin-left: -3px;
-          }
-
-          &:after {
-            padding-left: 10px;
-          }
-
-          &:nth-child(1) {
-            &:before {
-              content: "\f01c";
-            }
-          }
-          &:nth-child(2) {
-            &:before {
-              content: "\f1d8";
-              margin-left: -5px;
-            }
-          }
-          &:nth-child(3) {
-            &:before {
-              content: "\f040";
-            }
-          }
-          &:nth-child(4) {
-            &:before {
-              content: "\f014";
-            }
-          }
-          &:nth-child(5) {
-            &:before {
-              content: "\f187";
-              margin-left: -5px;
-            }
-          }
-        }
-      }
-
-      ul#custom-tag-list {
-        visibility: hidden;
-        opacity: 0;
-        transition-duration: 500ms;
-        height: 100%;
-        max-height: 220px;
-        overflow: auto;
-        background-color: lighten($navigation_background,1);
-
-        li {
-          white-space: nowrap;
-          overflow: hidden;
-          font-size: 0.8em;
-          padding: 5px 10px 5px 15px;
-
-          &.custom-tag {
-            text-overflow: ellipsis;
-          }
-
-          span.tag-label {
-            padding: 5px 20px 5px 38px;
-          }
-        }
-      }
-
-      ul#custom-tag-list.expanded {
-        visibility: visible;
-        opacity: 1;
-      }
-
-      div.tags-icon {
-        border-top: 1px solid white;
-        padding-top: 25px;
-        margin-bottom: 20px;
-        i {
-          font-size: 1.5em;
-          font-family: "FontAwesome";
-          margin-right: 13px;
-          font-weight: normal;
-          position: relative;
-          top: 2px;
-          left: 16px;
-        }
-        span.tag-label {
-          font-size: 0.9rem;
-          padding-left: 16px;
-          margin-bottom: 10px;
-        }
-      }
-
-      ul#logout, ul#feedback, ul#user-settings-icon {
-        margin-bottom: 0;
-
-        li {
-          background-color: $navigation_background;
-          padding: 5px 10px;
-          position: relative;
-          @include searching(4px, 19px, $dark_grey, 0.7em);
-
-          &:hover {
-            color: $navigation_background;
-          }
-
-          div {
-            padding-left: 7px;
-            &:before {
-              font-size: 1.5em;
-              font-family: "FontAwesome";
-              margin-right: 13px;
-              font-weight: normal;
-              position: relative;
-              top: 2px;
-            }
-          }
-        }
-      }
-
-      ul {
-        &#logout li {
-          color: $action_buttons;
-          &:hover {
-            background-color: $action_buttons;
-          }
-        }
-
-        &#user-settings-icon {
-            li {
-                color: white;
-                &:hover {
-                    background-color: white;
-                }
-            }
-        }
-
-
-        &#feedback {
-          margin-bottom: 0;
-
-          li {
-            color: $light_orange;
-            &:hover {
-              background-color: $light_orange;
-            }
-          }
-        }
-      }
-      h3 {
-        color: white;
-        text-transform: uppercase;
-        font-size: 0.6em;
-        padding: 5px;
-        font-weight: 600;
-        margin: 0 10px;
-        border-bottom: 1px dotted lighten($navigation_background, 10%);
-      }
-    }
-  }
-
-  &#middle-pane {
-    background: $contrast;
-  }
-
-  &#right-pane {
-    padding: 0 10px 60px 0px;
-    background: $white;
-    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.12);
-    z-index: 2;
-    overflow-y: auto;
-  }
-}
-
-.unread-count {
-  @include mail-count($secondary_callout);
-}
-.total-count {
-  @include mail-count($medium_light_grey);
-}
-
-
-/* ACTIONS */
-#refresh-mails-trigger {
-  i {
-    margin-top: 3px;
-    cursor: pointer;
-    opacity: 0.9;
-    padding: 4px;
-    &:hover {
-      opacity: 1;
-      &:after {
-        content: "\f021";
-      }
-      &:before {
-        content: "refresh";
-        font-size: 0.8em;
-        padding-right: 5px;
-      }
-    }
-  }
-}
-
-.buttons-group {
-  clear: both;
-  margin: 20px 0 0;
-  padding: 0;
-}
-
-#draft-save-status {
-  float: right;
-  padding: 0.4rem 1.1rem;
-  color: $lighter_blue;
-}
-
-button {
-  border: 1px solid transparent;
-
-  i {
-    margin-left: 5px;
-  }
-
-  &#trash-button {
-    background: $white;
-    border: 1px solid $medium_light_grey;
-    color: $medium_light_grey;
-    float: right;
-    margin-left: 5px;
-    &:hover, &:focus {
-      background: $contrast;
-    }
-  }
-
-
-  &.no-style {
-    background: transparent;
-    color: $medium_light_grey;
-    padding: 0;
-    margin: 0;
-    i {
-      margin: 0;
-      padding: 0;
-      vertical-align: middle;
-    }
-  }
-}
-
-.side-nav-toggle, .side-nav-toggle-icon {
-  color: white;
-  cursor: pointer;
-
-  &:hover, &:focus {
-    color: white;
-  }
-  background: $navigation_background;
-  &.logout {
-    color: $action_buttons;
-  }
-}
-
-.side-nav-toggle-icon {
-  padding: 6px 0px 8px 19px;
-  display: block;
-  left: 0;
-  top: 0;
-  position: relative;
-}
-
-.left-off-canvas-logo {
-  svg {
-    width: 162px;
-    height: 56px;
-    padding-left: 6px;
-    padding-top: 2px;
-    path, polygon, rect {
-      fill: $logo_color;
-    }
-  }
-}
-
-.collapsed-nav {
-  width: 50px;
-  position: absolute;
-  height: 100vh;
-  background: $navigation_background;
-
-  ul.shortcuts {
-    li {
-      position: relative;
-      margin-bottom: 5px;
-      opacity: 0.8;
-      &.selected {
-        background: $contrast;
-        opacity: 1;
-        cursor: default;
-        a {
-          color: $navigation_background;
-          }
-        }
-      @include searching(6px, 26px, $medium_dark_grey, 0.9em);
-      a {
-        display: block;
-        position: relative;
-        font-size: 1.4em;
-        padding: 5px;
-        color: white;
-        text-align: center;
-        &:hover {
-          background: darken($contrast, 10%);
-          color: $navigation_background;
-          @include btn-transition;
-          &.logout{
-            color: $black;
-            background: $action_buttons;
-          }
-        }
-        &[title]:hover:after {
-          content: attr(title);
-          @include tooltip;
-        }
-      }
-      .unread-count, .total-count {
-        font-size: 0.5em;
-        padding: 1px 5px 0;
-        top: 1px;
-        left: 0;
-        border: 1px solid $white;
-        position: absolute;
-        opacity: 0.95;
-      }
-      .total-count {
-        background: $medium_light_grey;
-      }
-    }
-  }
-  #custom-tags-shortcuts {
-    li {
-      border-top: 1px solid $lighter_gray;
-    }
-  }
-  div.shortcut-label {
-      font-size: xx-small;
-      text-transform: uppercase;
-      text-align: center;
-  }
-}
-.move-right {
-  ul.shortcuts {
-    li {
-      display: none;
-    }
-  }
-}
-
-.left-off-canvas-menu {
-  width: 222px;
-  -webkit-backface-visibility: hidden;
-  box-sizing: content-box;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  overflow-y: auto;
-}
-
-.left-off-canvas-menu * {
-  -webkit-backface-visibility: hidden;
-}
-
-
-.off-canvas-wrap {
-  -webkit-backface-visibility: hidden;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
-  min-height: 100%;
-  -webkit-overflow-scrolling: touch;
-}
-
-.inner-wrap {
-  -webkit-backface-visibility: hidden;
-  width: 100%;
-}
-
-.inner-wrap:before, .inner-wrap:after {
-  content: " ";
-  display: table;
-}
-
-.inner-wrap:after {
-  clear: both;
-}
-
-.off-canvas-wrap.content {
-  -webkit-transition: -webkit-transform 500ms ease;
-  -moz-transition: -moz-transform 500ms ease;
-  -ms-transition: -ms-transform 500ms ease;
-  -o-transition: -o-transform 500ms ease;
-  transition: transform 500ms ease;
-
-  &.move-right {
-    -webkit-transform: translate3d(10rem, 0, 0);
-    -moz-transform: translate3d(10rem, 0, 0);
-    -ms-transform: translate3d(10rem, 0, 0);
-    -o-transform: translate3d(10rem, 0, 0);
-    transform: translate3d(10rem, 0, 0);
-
-    #user-settings-box>div {
-        left: 20px;
-    }
-  }
-}
-
-.move-right .exit-off-canvas {
-  -webkit-backface-visibility: hidden;
-  transition: background 300ms ease;
-  cursor: pointer;
-  display: block;
-  position: absolute;
-  background: rgba(255, 255, 255, 0.2);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-@media only screen and (min-width:40.063em) {
-  .move-right .exit-off-canvas:hover {
-    background: rgba(255, 255, 255, 0.05);
-  }
-}
-
-.off-canvas-wrap.move-right.menu {
-  position: absolute;
-}
-
-.off-canvas-wrap.content {
-  left: 50px;
-  padding-right: 50px;
-}
-
-.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
-  -ms-transform: none;
-  -webkit-transform: none;
-  -moz-transform: none;
-  -o-transform: none;
-  transform: none;
-}
-
-.offcanvas-overlap .exit-offcanvas-menu {
-  -webkit-backface-visibility: hidden;
-  transition: background 300ms ease;
-  cursor: pointer;
-  display: block;
-  position: absolute;
-  background: rgba(255, 255, 255, 0.2);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-
-#delete-modal {
-  button#trash-button, button#archive-button {
-    width: 40%;
-    margin: 0 22px 30px;
-    height: 80px;
-  }
-  small {
-    font-size: 80%;
-    display: block;
-  }
-}
-
-div.side-nav-bottom {
-  width: 100%;
-  position: fixed;
-  bottom: 20px;
-  background-color: $navigation_background;
-
-  .version {
-    padding-left: 55px;
-    padding-bottom: 3px;
-  }
-}
-
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index 4468bd28..79262d0b 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -29,10 +29,9 @@
 @import "views/compose-view";
 @import "views/compose-button";
 @import "views/mail-list";
+@import "views/_action-bar.scss";
+@import "views/_navigation.scss";
 
 // misc stuff
 @import "others";
 
-// TODO
-@import "styles";
-
diff --git a/web-ui/app/scss/views/_action-bar.scss b/web-ui/app/scss/views/_action-bar.scss
new file mode 100644
index 00000000..ef4a8cc3
--- /dev/null
+++ b/web-ui/app/scss/views/_action-bar.scss
@@ -0,0 +1,158 @@
+#top-pane {
+    height: auto;
+    overflow: hidden;
+    background: $top_pane;
+    border-top: 1px solid $top_pane;
+
+    #list-actions {
+        width: 100%;
+        height: 34px;
+        margin: 0;
+        border-top: 1px solid $white;
+        border-bottom: 2px solid lighten($top_pane, 30%);
+        background: $top_pane;
+        clear: both;
+        overflow: hidden;
+
+        li {
+            display: inline-block;
+            margin: 1px -3px;
+            vertical-align: top;
+
+            input[type=checkbox] {
+                @include check-box;
+
+                margin: 7px 13px 7px;
+            }
+
+            select {
+                padding: 1px 3px;
+                margin: 0;
+            }
+
+            input[type=button] {
+                margin: 2px;
+                padding: 4px 10px;
+                background: lighten($contrast, 70%);
+                color: $dark_grey;
+                text-transform: uppercase;
+                font-weight: 400;
+                font-size: 0.8em;
+                opacity: 0.7;
+                border: 1px solid darken($contrast, 10%);
+
+                @include border-radius(1px);
+
+                @include btn-transition;
+
+                &:hover {
+                    opacity: 1;
+                }
+
+                &[disabled=disabled] {
+                    opacity: 0.5;
+                    cursor: default;
+                }
+            }
+        }
+
+        #pagination-trigger {
+            cursor: pointer;
+            margin: 4px 12px 0 5px;
+
+            span {
+                padding-left: 5px;
+            }
+        }
+    }
+
+    #compose-search-trigger {
+        padding: 4px;
+    }
+
+    #actions {
+        ul {
+            margin: 0;
+
+            li {
+                display: inline-block;
+                margin-right: -5px;
+
+                a {
+                    transition: background-color 150ms ease-out;
+                    background: $top_pane;
+                    color: $white;
+                    font-size: 1.5em;
+                    display: block;
+                    padding: 14px 20px;
+                    margin: 0 1px 0px;
+                    opacity: 0.35;
+
+                    &.selected {
+                        background: $top_pane;
+                        opacity: 1;
+                        cursor: default;
+                    }
+
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+    #search-trigger {
+        padding: 5px;
+        padding-left: 0;
+
+        input {
+            margin: 0;
+            padding: 8px 30px;
+            color: $navigation_background;
+            background: white;
+            border: none;
+            transition: background-color 150ms ease-out;
+
+            &:hover {
+                background: darken(white, 2%);
+            }
+
+            &:focus {
+                background: darken(white, 5%);
+            }
+        }
+
+        form:before {
+            font-family: "FontAwesome";
+            content: "\f002";
+            position: absolute;
+            padding: 0 10px;
+            top: 15px;
+            color: $medium_light_grey;
+        }
+    }
+}
+
+#refresh-mails-trigger {
+    i {
+        margin-top: 3px;
+        cursor: pointer;
+        opacity: 0.9;
+        padding: 4px;
+
+        &:hover {
+            opacity: 1;
+
+            &:after {
+                content: "\f021";
+            }
+
+            &:before {
+                content: "refresh";
+                font-size: 0.8em;
+                padding-right: 5px;
+            }
+        }
+    }
+}
diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
index ebfae1da..146aacf5 100644
--- a/web-ui/app/scss/views/_compose-view.scss
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -382,3 +382,15 @@
         }
     }
 }
+
+.buttons-group {
+    clear: both;
+    margin: 20px 0 0;
+    padding: 0;
+}
+
+#draft-save-status {
+    float: right;
+    padding: 0.4rem 1.1rem;
+    color: $lighter_blue;
+}
diff --git a/web-ui/app/scss/views/_navigation.scss b/web-ui/app/scss/views/_navigation.scss
new file mode 100644
index 00000000..49600c05
--- /dev/null
+++ b/web-ui/app/scss/views/_navigation.scss
@@ -0,0 +1,587 @@
+#logo {
+    color: $white;
+}
+
+#logout {
+    color: $white;
+    cursor: pointer;
+}
+
+#user-settings-box {
+    position: fixed;
+    z-index: 10;
+
+    & > div {
+        position: fixed;
+        left: 70px;
+        bottom: 0px;
+        z-index: 1;
+        padding: 10px 16px 10px 18px;
+        background-color: rgba($dark_slate_gray, 0.9);
+        min-width: 230px;
+
+        &.extra-bottom-space {
+            bottom: 33px;
+        }
+
+        #user-settings-close {
+            float: right;
+        }
+
+        h1, i {
+            font-size: 1.2em;
+            color: white;
+            line-height: 1.2em;
+        }
+
+        i.fa-user {
+            margin-right: 10px;
+            float: left;
+        }
+
+        i.fa-close {
+            margin-left: 10px;
+            float: right;
+            cursor: pointer;
+        }
+
+        p {
+            font-size: 1.2em;
+            color: $light_orange;
+        }
+    }
+}
+
+@keyframes hideshow {
+    0% {
+        fill: lighten($logo_color, 30);
+    }
+
+    25% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.logo-part-animation-off {
+    animation: none;
+}
+
+.logo-part-animation-on {
+    animation: hideshow 0.6s ease infinite;
+    opacity: 1;
+
+    &:nth-child(2) {
+        opacity: 0;
+        animation-delay: 0.1s;
+    }
+
+    &:nth-child(3) {
+        animation-delay: 0.2s;
+    }
+
+    &:nth-child(4) {
+        animation-delay: 0.3s;
+    }
+
+    &:nth-child(5) {
+        animation-delay: 0.4s;
+    }
+
+    &:nth-child(6) {
+        animation-delay: 0.5s;
+    }
+}
+
+.arrow-box:before {
+    right: 100%;
+    top: 65%;
+    border: 20px solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-right-color: rgba($dark_slate_gray, 0.9);
+    margin-top: -20px;
+}
+
+.side-nav-toggle, .side-nav-toggle-icon {
+    color: white;
+    cursor: pointer;
+
+    &:hover, &:focus {
+        color: white;
+    }
+
+    background: $navigation_background;
+
+    &.logout {
+        color: $action_buttons;
+    }
+}
+
+.side-nav-toggle-icon {
+    padding: 6px 0px 8px 19px;
+    display: block;
+    left: 0;
+    top: 0;
+    position: relative;
+}
+
+.left-off-canvas-logo {
+    svg {
+        width: 162px;
+        height: 56px;
+        padding-left: 6px;
+        padding-top: 2px;
+
+        path, polygon, rect {
+            fill: $logo_color;
+        }
+    }
+}
+
+.collapsed-nav {
+    width: 50px;
+    position: absolute;
+    height: 100vh;
+    background: $navigation_background;
+
+    ul.shortcuts {
+        li {
+            position: relative;
+            margin-bottom: 5px;
+            opacity: 0.8;
+
+            &.selected {
+                background: $contrast;
+                opacity: 1;
+                cursor: default;
+
+                a {
+                    color: $navigation_background;
+                }
+            }
+
+            @include searching(6px, 26px, $medium_dark_grey, 0.9em);
+
+            a {
+                display: block;
+                position: relative;
+                font-size: 1.4em;
+                padding: 5px;
+                color: white;
+                text-align: center;
+
+                &:hover {
+                    background: darken($contrast, 10%);
+                    color: $navigation_background;
+
+                    @include btn-transition;
+
+                    &.logout {
+                        color: $black;
+                        background: $action_buttons;
+                    }
+                }
+
+                &[title]:hover:after {
+                    content: attr(title);
+
+                    @include tooltip;
+                }
+            }
+        }
+    }
+
+    #custom-tags-shortcuts {
+        li {
+            border-top: 1px solid $lighter_gray;
+        }
+    }
+
+    div.shortcut-label {
+        font-size: xx-small;
+        text-transform: uppercase;
+        text-align: center;
+    }
+}
+
+.move-right {
+    ul.shortcuts {
+        li {
+            display: none;
+        }
+    }
+}
+
+.left-off-canvas-menu {
+    width: 222px;
+    -webkit-backface-visibility: hidden;
+    box-sizing: content-box;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    overflow-y: auto;
+}
+
+.left-off-canvas-menu * {
+    -webkit-backface-visibility: hidden;
+}
+
+.off-canvas-wrap {
+    -webkit-backface-visibility: hidden;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
+    min-height: 100%;
+    -webkit-overflow-scrolling: touch;
+}
+
+.inner-wrap {
+    -webkit-backface-visibility: hidden;
+    width: 100%;
+}
+
+.inner-wrap:before, .inner-wrap:after {
+    content: " ";
+    display: table;
+}
+
+.inner-wrap:after {
+    clear: both;
+}
+
+.off-canvas-wrap.content {
+    -webkit-ransition: -webkit-transform 500ms ease;
+    -moz-transition: -moz-transform 500ms ease;
+    -ms-transition: -ms-transform 500ms ease;
+    -o-transition: -o-transform 500ms ease;
+    transition: transform 500ms ease;
+
+    &.move-right {
+        -webkit-transform: translate3d(10rem, 0, 0);
+        -moz-transform: translate3d(10rem, 0, 0);
+        -ms-transform: translate3d(10rem, 0, 0);
+        -o-transform: translate3d(10rem, 0, 0);
+        transform: translate3d(10rem, 0, 0);
+
+        #user-settings-box > div {
+            left: 20px;
+        }
+    }
+}
+
+.move-right .exit-off-canvas {
+    -webkit-backface-visibility: hidden;
+    transition: background 300ms ease;
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.2);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+@media only screen and (min-width: 40.063em) {
+    .move-right .exit-off-canvas:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+}
+
+.off-canvas-wrap.move-right.menu {
+    position: absolute;
+}
+
+.off-canvas-wrap.content {
+    left: 50px;
+    padding-right: 50px;
+}
+
+.offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
+    -ms-transform: none;
+    -webkit-transform: none;
+    -moz-transform: none;
+    -o-transform: none;
+    transform: none;
+}
+
+.offcanvas-overlap .exit-offcanvas-menu {
+    -webkit-backface-visibility: hidden;
+    transition: background 300ms ease;
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.2);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+div.side-nav-bottom {
+    width: 100%;
+    position: fixed;
+    bottom: 20px;
+    background-color: $navigation_background;
+
+    .version {
+        padding-left: 55px;
+        padding-bottom: 3px;
+    }
+}
+
+#left-pane nav {
+    border-right: 1px solid lighten($navigation_background, 10%);
+
+    ul#default-tag-list, #custom-tag-list {
+        li {
+            transition: background-color 150ms ease-out;
+            padding: 2px 10px;
+            cursor: pointer;
+
+            &:hover {
+                background: $light_gray;
+                color: $navigation_background;
+            }
+
+            &.selected {
+                font-weight: bold;
+                background: $contrast;
+                color: $navigation_background;
+            }
+        }
+    }
+
+    ul#default-tag-list {
+//            .unread-count, .total-count {
+//                font-size: 0.5em;
+//                padding: 1px 5px 0;
+//                top: 1px;
+//                left: 0;
+//                border: 1px solid $white;
+//                position: absolute;
+//                opacity: 0.95;
+//            }
+//
+//            .total-count {
+//                background: $medium_light_grey;
+//            }
+
+        .unread-count, .total-count {
+            font-size: 0.7em;
+            padding: 0px 5px 0;
+            top: 1px;
+            left: 0;
+            border: 1px solid $white;
+            border-bottom: 1px solid white;
+            position: absolute;
+            opacity: 0.95;
+        }
+
+        .total-count {
+            background: $medium_light_grey;
+        }
+
+        span.tag-label {
+            padding-left: 2px;
+        }
+
+        li {
+            padding: 5px 10px 5px 18px;
+            position: relative;
+
+            @include searching(4px, 19px, $dark_grey, 0.7em);
+
+            &:before {
+                font-size: 1.5em;
+                font-family: "FontAwesome";
+                margin-right: 16px;
+                font-weight: normal;
+                position: relative;
+                top: 2px;
+                margin-left: -3px;
+            }
+
+            &:after {
+                padding-left: 10px;
+            }
+
+            &:nth-child(1) {
+                &:before {
+                    content: "\f01c";
+                }
+            }
+
+            &:nth-child(2) {
+                &:before {
+                    content: "\f1d8";
+                    margin-left: -5px;
+                }
+            }
+
+            &:nth-child(3) {
+                &:before {
+                    content: "\f040";
+                }
+            }
+
+            &:nth-child(4) {
+                &:before {
+                    content: "\f014";
+                }
+            }
+
+            &:nth-child(5) {
+                &:before {
+                    content: "\f187";
+                    margin-left: -5px;
+                }
+            }
+        }
+    }
+
+    ul#custom-tag-list {
+        visibility: hidden;
+        opacity: 0;
+        transition-duration: 500ms;
+        height: 100%;
+        max-height: 220px;
+        overflow: auto;
+        background-color: lighten($navigation_background, 1);
+
+        li {
+            white-space: nowrap;
+            overflow: hidden;
+            font-size: 0.8em;
+            padding: 5px 10px 5px 15px;
+
+            &.custom-tag {
+                text-overflow: ellipsis;
+            }
+
+            span.tag-label {
+                padding: 5px 20px 5px 38px;
+            }
+        }
+    }
+
+    ul#custom-tag-list.expanded {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    div.tags-icon {
+        border-top: 1px solid white;
+        padding-top: 25px;
+        margin-bottom: 20px;
+
+        i {
+            font-size: 1.5em;
+            font-family: "FontAwesome";
+            margin-right: 13px;
+            font-weight: normal;
+            position: relative;
+            top: 2px;
+            left: 16px;
+        }
+
+        span.tag-label {
+            font-size: 0.9rem;
+            padding-left: 16px;
+            margin-bottom: 10px;
+        }
+    }
+
+    ul#logout, ul#feedback, ul#user-settings-icon {
+        margin-bottom: 0;
+
+        li {
+            background-color: $navigation_background;
+            padding: 5px 10px;
+            position: relative;
+
+            @include searching(4px, 19px, $dark_grey, 0.7em);
+
+            &:hover {
+                color: $navigation_background;
+            }
+
+            div {
+                padding-left: 7px;
+
+                &:before {
+                    font-size: 1.5em;
+                    font-family: "FontAwesome";
+                    margin-right: 13px;
+                    font-weight: normal;
+                    position: relative;
+                    top: 2px;
+                }
+            }
+        }
+    }
+
+    ul {
+        &#logout li {
+            color: $action_buttons;
+
+            &:hover {
+                background-color: $action_buttons;
+            }
+        }
+
+        &#user-settings-icon {
+            li {
+                color: white;
+
+                &:hover {
+                    background-color: white;
+                }
+            }
+        }
+
+        &#feedback {
+            margin-bottom: 0;
+
+            li {
+                color: $light_orange;
+
+                &:hover {
+                    background-color: $light_orange;
+                }
+            }
+        }
+    }
+
+    h3 {
+        color: white;
+        text-transform: uppercase;
+        font-size: 0.6em;
+        padding: 5px;
+        font-weight: 600;
+        margin: 0 10px;
+        border-bottom: 1px dotted lighten($navigation_background, 10%);
+    }
+}
+
+.unread-count {
+  @include mail-count($secondary_callout);
+}
+
+.total-count {
+  @include mail-count($medium_light_grey);
+}
+