Revert "[#801] Merge branch 'signup'"

This reverts commit d10f607a4d40587510b0dc31b31fe4750bf4a3a3, reversing
changes made to c28abba2f5b1186c671ebef508d40ffaae6d5bc5.

11 files changed, 1647 insertions, 0 deletions

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..40e677b0
--- /dev/null
+++ b/web-ui/app/scss/views/_action-bar.scss
@@ -0,0 +1,159 @@
+#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: $white;
+        clear: both;
+        overflow: hidden;
+        padding-left: 10px;
+
+        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: $background_light_grey;
+                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: attr(data-label);
+                font-size: 0.8em;
+                padding-right: 5px;
+            }
+        }
+    }
+}
diff --git a/web-ui/app/scss/views/_close-button.scss b/web-ui/app/scss/views/_close-button.scss
new file mode 100644
index 00000000..37171c18
--- /dev/null
+++ b/web-ui/app/scss/views/_close-button.scss
@@ -0,0 +1,22 @@
+.close-mail-button {
+    $button-size: 27px;
+
+    margin-right: 3px;
+    float: left;
+    background: $lighter_gray;
+    color: $medium_light_grey;
+    width: $button-size;
+    height: $button-size;
+    padding: 0;
+    border-radius: 0;
+
+    &:hover, &:focus, &:active {
+        background-color: darken($lighter_gray, 2);
+        color: darken($medium_light_grey, 10);
+    }
+
+    i {
+        padding: 0;
+        margin: 0;
+    }
+}
diff --git a/web-ui/app/scss/views/_compose-button.scss b/web-ui/app/scss/views/_compose-button.scss
new file mode 100644
index 00000000..81e0bb33
--- /dev/null
+++ b/web-ui/app/scss/views/_compose-button.scss
@@ -0,0 +1,27 @@
+// COMPOSE BUTTON
+#compose {
+  margin-bottom: 5px;
+  padding-right: 4px;
+  #compose-trigger {
+    width: 100%;
+    display: inline-block;
+    padding: 5px;
+    #compose-mails-trigger {
+      background: $action_buttons;
+      color: $white;
+      padding: 10px 30px;
+      text-align: center;
+      font-weight: 400;
+      font-size: 1.2em;
+      width: 100%;
+      height: 100%;
+      margin-bottom: 0px;
+      @include btn-transition;
+      &:hover {
+        background: lighten($action_buttons, 10%);
+        cursor: pointer;
+      }
+    }
+  }
+}
+
diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
new file mode 100644
index 00000000..9e120357
--- /dev/null
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -0,0 +1,451 @@
+.compose-view {
+    overflow: auto;
+
+    &__buttons {
+        &-attachment {
+            cursor: pointer;
+            margin-left: 18px;
+            padding-top: 0px;
+            display: inline;
+            border: 1px $contrast solid;
+            background: $background_light_grey;
+            padding: 7px 4px;
+            font-size: 0.8em;
+
+            span {
+              -ms-transform: rotate(224deg);
+              -webkit-transform: rotate(224deg);
+              transform: rotate(224deg);
+              outline: 0;
+            }
+
+            i.fa-paperclip {
+                font-size: 1.7em;
+            }
+
+            &--busy {
+                color: lighten($recipients_font_color, 10%);
+                cursor: progress;
+            }
+        }
+    }
+
+    &__attachments {
+        &-wrapper {
+            padding: 0;
+            margin-top: 30px;
+        }
+
+        &-list {
+            &-item {
+                display: block;
+                position: relative;
+                margin-bottom: 8px;
+                padding: 5px;
+                border: 1px solid $border_light_grey;
+                border-radius: 2px;
+                background-color: $contrast;
+
+                &-label {
+                    color: $attachment_text;
+                    text-decoration: none;
+
+                    &:hover, &:focus {
+                        color: $attachment_icon;
+                        outline: none;
+                    }
+                }
+
+                &-icon {
+                    color: #a2a2a2;
+                    float: right;
+                    margin-top: 7px;
+                    cursor: pointer;
+                }
+
+                &-progress {
+                    width: 0%;
+                    position: absolute;
+                    right: 0;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    min-height: 100%;
+
+                    &-bar {
+                        height: 100%;
+                        background-color: rgba($light_blue, 0.3);
+                    }
+                }
+
+            }
+
+            &--upload {
+                display: none;
+            }
+
+        }
+
+        &-error {
+            background-color: $background_light_grey;
+            border-radius: 2px;
+            border: 1px solid $error;
+            display: block;
+            font-size: 0.9rem;
+            margin-bottom: 20px;
+            padding: 5px;
+            width: 100%;
+
+            &-close {
+                float: left;
+                margin: 5px 5px 0 0;
+            }
+
+            & > * {
+                color: $error;
+            }
+
+            & > a {
+                display: inline-block;
+                text-decoration: underline;
+                padding: 5px;
+            }
+        }
+    }
+
+}
+
+// COMPOSE PANE
+#compose-box, #draft-box, #reply-box, #feedback-box {
+    div.floatlabel {
+        position: relative;
+    }
+
+    .input-container {
+        padding: 1px;
+    }
+
+    label, span {
+        color: $recipients_font_color;
+        padding: 0.5rem;
+        display: inline-block;
+    }
+
+    label {
+        padding: 13px 10px;
+    }
+
+    span {
+        padding: 3px;
+
+        &.attachment-size {
+            color: $attachment_size;
+            cursor: pointer;
+        }
+    }
+
+    label.floatlabel {
+        padding: 0.4rem !important;
+        position: absolute;
+        font-size: 0.6rem;
+        transition: all 0.1s linear;
+        opacity: 0;
+        font-weight: bold;
+    }
+
+    label.showfloatlabel {
+        color: $light_blue !important;
+        top: -0.3rem;
+        opacity: 1;
+    }
+
+    input, textarea {
+        margin: 0;
+        border: none;
+        transition: all 0.1s linear;
+    }
+
+    input.showfloatlabel, textarea.showfloatlabel {
+        padding-top: 1rem !important;
+    }
+
+    input#subject, #feedback-subject {
+        font-size: 1.6875rem;
+        line-height: 1.4;
+        border-top: 1px solid $lighter_gray;
+    }
+
+    #feedback-subject {
+        color: $dark_grey;
+    }
+
+    textarea {
+        border-bottom: 2px solid $lighter_gray;
+        min-height: 400px;
+        font-family: inherit;
+        font-weight: normal;
+        font-size: 1rem;
+        line-height: 1.6;
+        text-rendering: optimizeLegibility;
+    }
+
+    &.reply-box, &.forward-box {
+        margin: 0;
+
+        h4 {
+            font-size: 0.9em;
+            font-style: italic;
+            color: $medium_grey;
+            margin: 2px 0;
+            clear: both;
+            cursor: pointer;
+
+            &:hover {
+                background: $contrast;
+            }
+        }
+
+        textarea {
+            min-height: 200px;
+            margin: 10px 0;
+        }
+
+        p {
+            padding: 5px;
+            margin: 10px 0;
+            font-style: italic;
+            cursor: pointer;
+
+            &:hover {
+                background: $contrast;
+            }
+        }
+    }
+
+    button.close-mail-button {
+        margin: 1px;
+    }
+
+    .buttons-group {
+        margin-top: 0px;
+    }
+
+    .recipients-area {
+        -webkit-appearance: none;
+        background-color: white;
+        font-family: inherit;
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 0.898em;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        position: relative;
+
+        .compose-column-label {
+            width: 5%;
+            display: inline-block;
+        }
+
+        .compose-column-recipients {
+            width: 95%;
+            display: inline-block;
+        }
+
+        .recipients-label {
+            width: 100%;
+            height: 100%;
+        }
+
+        .recipients-navigation-handler {
+            z-index: -1;
+            position: absolute;
+            top: -200px;
+        }
+
+        .twitter-typeahead {
+            flex: 1 1 50px;
+
+            .tt-dropdown-menu {
+              background: $dark_white;
+
+              div div {
+                padding: 8px;
+
+                &:hover {
+                  background: $background_dropdown_grey;
+                }
+              }
+            }
+        }
+
+        .invalid-format {
+            border-bottom: 1px dotted $error;
+        }
+
+        input[type=text] {
+            vertical-align: top;
+            height: 35px;
+            margin-left: 1px;
+            font-size: 0.9em;
+            width: 100%;
+        }
+
+        .fixed-recipient {
+            display: inline-block;
+            margin-right: -3px;
+            flex: none;
+            position: relative;
+
+            .recipient-value {
+                &.selected {
+                    border: 1px solid $medium_dark_grey;
+                }
+
+                &:before {
+                    font-family: FontAwesome;
+                    padding-right: 6px;
+                    font-size: 1.4em;
+                }
+
+                &.encrypted {
+                    border-bottom-color: $will_be_encrypted;
+
+                    &:before {
+                        color: $will_be_encrypted;
+                        content: "\f023 ";
+                    }
+                }
+
+                &.not-encrypted {
+                    border-bottom-color: $wont_be_encrypted;
+
+                    &:before {
+                        color: $wont_be_encrypted;
+                        content: "\f09c";
+                    }
+                }
+
+                &.deleting span {
+                    text-decoration: line-through;
+                }
+
+                & span {
+                    margin: 0px;
+                    padding: 0px 0px 0px 0px;
+                    vertical-align: top;
+                    cursor: pointer;
+                }
+
+                margin: 3px;
+                padding: 5px;
+                background-color: $background_light_grey;
+                border: 1px solid $border_light_grey;
+                border-radius: 2px;
+            }
+
+            .recipient-del {
+                position: relative;
+                color: $recipients_font_color;
+
+                &:hover, &:focus {
+                    color: $recipients_font_color;
+                }
+
+                &:before {
+                    margin-left: 0.4em;
+                    font-weight: bold;
+                    content: "x";
+                }
+
+                &.deleteTooltip:hover:after {
+                    position: absolute;
+                    content: attr(data-label);
+                    font-size: 0.5rem;
+
+                    @include tooltip(25px, 0px);
+                }
+            }
+        }
+
+        input.recipients-input:focus {
+            background-color: $dark_white !important;
+            border-color: $medium_light_grey;
+            outline: none;
+            width: 270px;
+        }
+    }
+
+    .collapse {
+        display: block;
+        position: absolute;
+        right: 10px;
+        padding-right: 15px;
+        padding-left: 15px;
+        font-family: 'FontAwesome';
+        font-weight: bolder;
+        font-size: larger;
+        cursor: pointer;
+    }
+
+    .collapse + input, .collapse + input + * {
+        display: none;
+    }
+
+    .collapse + input:checked + * {
+        display: block;
+    }
+}
+
+#reply-section {
+    padding-left: 30px;
+
+    .reply-container {
+        margin: 10px 0;
+        padding: 10px;
+        border: 1px dashed darken($contrast, 10%);
+
+        @include btn-transition;
+    }
+
+    button {
+        margin: 0;
+    }
+
+    #all-recipients {
+        color: $black;
+    }
+
+    #all-recipients:focus {
+        background-color: darken($contrast, 10%);
+    }
+
+    #reply-button, #reply-all-button, #forward-button {
+        text-align: center;
+        font-weight: 100;
+        font-size: 1.1em;
+        background: $white;
+        color: $medium_light_grey;
+        padding: 25px;
+        margin: 0;
+
+        @include border-radius(0);
+
+        &:hover {
+            background: darken($contrast, 5%);
+            cursor: pointer;
+        }
+    }
+}
+
+.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/_mail-list.scss b/web-ui/app/scss/views/_mail-list.scss
new file mode 100644
index 00000000..f5c4c60f
--- /dev/null
+++ b/web-ui/app/scss/views/_mail-list.scss
@@ -0,0 +1,124 @@
+.mail-list-entry {
+    @include scut-clearfix;
+
+    border-bottom: 1px solid white;
+    transition: background-color 150ms ease-out;
+    font-weight: bold;
+    height: 80px;
+    position: relative;
+
+    // Workaround:
+    // Foundation is of the opinion that a 1.6 line height for all lists
+    // is a totally good idea. Please remove when Foundation is gone
+    line-height: normal;
+
+    &.status-read {
+        font-weight: normal;
+        color: $attachment_text;
+
+        .mail-list-entry__checkbox::after {
+          display: none;
+        }
+    }
+
+
+    &.selected {
+        background: $light_blue;
+        z-index: 10; // overlay the box-shadow of the right page (z-index: 2)
+
+        &:hover {
+            background: $light_blue;
+        }
+
+        a {
+          color: $white;
+        }
+    }
+
+    &:hover {
+        background: darken($contrast, 5%);
+    }
+
+    &__checkbox {
+        margin-right: 5px;
+        display: block;
+        float: left;
+        margin: {
+          top: 8px;
+          left: 20px;
+        }
+
+        &::after {
+          content: '';
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          -moz-border-radius: 15px;
+          -webkit-border-radius: 15px;
+          border-radius: 15px;
+          background-color: $bullet-blue;
+          position: absolute;
+          left: 48px;
+          top: 13px;
+        }
+
+        & > input[type=checkbox] {
+            @include check-box;
+        }
+    }
+
+    &__item {
+        display: block;
+        color: $dark_grey;
+        padding: 8px 10px 10px 67px;
+        height: 100%;
+
+        &-from {
+            white-space: nowrap;
+            font-size: 0.8em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+        }
+
+        &-date {
+            font-size: 0.7em;
+            float: right;
+            display: inline-block;
+        }
+
+        &-subject {
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 85%;
+
+            &-icon {
+                color: $light_gray;
+            }
+        }
+
+        &-attachment {
+            width: 14px;
+            text-align: right;
+            display: inline-block;
+            float: right;
+            color: $light_gray;
+        }
+
+        &-tags {
+            @include tags;
+
+            // Workaround:
+            // Foundation is of the opinion that a 1.6 line height and a 0.6 rem margin-bottom
+            // for all lists is a totally good idea. Please remove when Foundation is gone
+            line-height: normal;
+            margin-bottom: 0;
+        }
+
+        &:hover, &:focus, &:active {
+            color: $dark_grey;
+        }
+    }
+}
diff --git a/web-ui/app/scss/views/_message-panel.scss b/web-ui/app/scss/views/_message-panel.scss
new file mode 100644
index 00000000..4a0a7a6b
--- /dev/null
+++ b/web-ui/app/scss/views/_message-panel.scss
@@ -0,0 +1,26 @@
+.message-panel {
+  width: 100%;
+  margin: 10px auto;
+  position: fixed;
+  z-index: 10000;
+  text-align: center;
+
+  &__growl {
+    padding: 5px 60px;
+
+    &--success {
+      background: $warning;
+      color: darken($warning, 50%);
+      border: 1px solid darken($warning, 10%);
+      @include box-shadow(1px 1px 3px darken($warning, 60%));
+    }
+
+    &--error {
+      font-weight: bold;
+      color: white;
+      background: $error;
+      border: 1px solid darken($error, 10%);
+      @include box-shadow(1px 1px 3px darken($error, 60%));
+    }
+  }
+}
diff --git a/web-ui/app/scss/views/_navigation.scss b/web-ui/app/scss/views/_navigation.scss
new file mode 100644
index 00000000..2c33a791
--- /dev/null
+++ b/web-ui/app/scss/views/_navigation.scss
@@ -0,0 +1,589 @@
+#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;
+        }
+
+        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;
+        }
+    }
+}
+
+@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;
+
+    .fa-navicon {
+        font-size: 24px;
+        &:before {
+            margin-left: -5px;
+        }
+    }
+}
+
+.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 {
+
+        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 {
+                    font-family: "icomoon";
+                    content: "\e900";
+                    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;
+            }
+        }
+
+        .unread-count, .total-count {
+            padding: 1px 4px;
+            position: relative;
+        }
+
+    }
+
+    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 {
+    @extend .mail-count;
+
+    background: $secondary_callout;
+}
+
+.total-count {
+    @extend .mail-count;
+
+    background: $medium_light_grey;
+}
diff --git a/web-ui/app/scss/views/_no-mails-available.scss b/web-ui/app/scss/views/_no-mails-available.scss
new file mode 100644
index 00000000..bf5d256a
--- /dev/null
+++ b/web-ui/app/scss/views/_no-mails-available.scss
@@ -0,0 +1,3 @@
+.no-mails-available-pane {
+   @extend .no-content-placeholder;
+}
diff --git a/web-ui/app/scss/views/_no-message-selected.scss b/web-ui/app/scss/views/_no-message-selected.scss
new file mode 100644
index 00000000..0e367bf2
--- /dev/null
+++ b/web-ui/app/scss/views/_no-message-selected.scss
@@ -0,0 +1,14 @@
+.no-message-selected-pane {
+    background: $contrast;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &__text {
+        @extend .no-content-placeholder;
+
+        margin-bottom: 40px; // aligns label with "no results for XYZ"
+    }
+}
diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss
new file mode 100644
index 00000000..f69d51a5
--- /dev/null
+++ b/web-ui/app/scss/views/_read-view.scss
@@ -0,0 +1,165 @@
+.mail-read-view {
+    $component-vertical-spacing: 10px;
+    $view-top-spacing: 3px;
+
+    // NB! Setting overflow: hidden on an element causes
+    // a new float context to be created, so elements that
+    // are floated inside an element that has overflow: hidden
+    // applied are cleared.
+    overflow: hidden;
+
+    hr {
+        margin: 0;
+    }
+
+    &__header {
+        @include scut-clearfix;
+
+        font-size: 0.9em;
+        margin: 0;
+        margin: $view-top-spacing 0 $component-vertical-spacing 0;
+
+        &-recipients {
+            display: inline;
+            margin-bottom: 5px;
+            line-height: 1.5em;
+
+            &-separator {
+                margin: 0 10px;
+            }
+
+            &--highlight-sender {
+                font-weight: bold;
+            }
+        }
+
+        &-date {
+            display: inline;
+            float: right;
+        }
+
+        &-subject {
+            display: inline;
+            float: left;
+            max-width: 80%;
+        }
+
+        &-actions {
+            display: inline;
+            float: right;
+            max-width: 20%;
+            background: $white;
+            white-space: nowrap;
+            margin-top: $component-vertical-spacing;
+
+            &-button {
+                color: $medium_light_grey;
+                background-color: inherit;
+                display: inline;
+                border: 1px solid $lighter_gray;
+                line-height: 2em;
+
+                margin-bottom: 0;
+
+                i {
+                    // workaround: remove padding and margin inserted by font-awesome
+                    margin: 0;
+                    padding: 0;
+                }
+
+                &:hover, &:active, &:focus {
+                    @include btn-transition;
+
+                    background: darken($contrast, 5%);
+                    color: inherit;
+                }
+
+                &--reply {
+                    padding: 0 20px;
+                    margin-right: -4px; // force buttons together
+
+                }
+
+                &--more {
+                    padding: 0 5px;
+                }
+            }
+
+            &-dropdown {
+                $container-right-padding: 10px;
+
+                background: inherit;
+                position: absolute;
+                border: 1px solid $lighter_gray;
+                right: $container-right-padding;
+
+                &-entry {
+                    box-sizing: border-box;
+                    background: inherit;
+                    padding: 5px 10px;
+                    display: block;
+                    border-bottom: 1px solid $lighter_gray;
+
+                    &:last-child {
+                        border-bottom: none;
+                    }
+
+                    &:hover {
+                        cursor: pointer;
+                        background: $contrast;
+                    }
+                }
+            }
+        }
+
+        &-tags {
+            @include tags-editable;
+
+            clear: both;
+            margin: 0 0 10px;
+        }
+    }
+
+    &__body {
+        margin: $component-vertical-spacing 0;
+        width: 100%;
+        border: none;
+    }
+
+    &__attachments {
+        margin: $component-vertical-spacing 0;
+
+        &-header {
+            font-weight: bold;
+        }
+
+        &-item {
+            display: block;
+            margin-bottom: 8px;
+            padding: 5px;
+            border: 1px solid $border_light_grey;
+            border-radius: 2px;
+            background-color: $background_light_grey;
+
+            &-label {
+                color: $attachment_text;
+                text-decoration: none;
+
+                &:hover, &:focus {
+                    i.download-icon {
+                        color: lighten($attachment_icon, 15);
+                    }
+
+                    color: $attachment_icon;
+                    outline: none;
+                }
+            }
+
+            &-download {
+                color: #a2a2a2;
+                float: right;
+                margin-top: 5px;
+            }
+        }
+    }
+}
diff --git a/web-ui/app/scss/views/_security-labels.scss b/web-ui/app/scss/views/_security-labels.scss
new file mode 100644
index 00000000..ac966ded
--- /dev/null
+++ b/web-ui/app/scss/views/_security-labels.scss
@@ -0,0 +1,67 @@
+.security-status {
+  margin: 0 0 5px;
+
+  &__label {
+    display: inline-block;
+    padding: 2px 6px;
+    white-space: nowrap;
+    background: $success;
+    color: $white;
+    border-radius: 12px;
+
+    &:before {
+      font-family: FontAwesome;
+    }
+
+    &--encrypted {
+      &:before {
+        content: "\f023";
+      }
+
+      &--with-error {
+        background: $attention;
+        &:before {
+          content: "\f023 \f057";
+        }
+      }
+    }
+
+    &--not-encrypted {
+      background: $attention;
+
+      &:before {
+        content: "\f09c";
+      }
+    }
+
+    &--signed {
+      &:before {
+        content: "\f00c";
+      }
+
+      &--revoked, &--expired {
+        background: $attention;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+
+      &--not-trusted {
+        background: $error;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+    }
+
+    &--not-signed {
+      background: $attention;
+
+      &:before {
+        content: "\f05e";
+      }
+    }
+  }
+}