From b79035b83e81e4fd654b587426083c6033e695ad Mon Sep 17 00:00:00 2001
From: Felix Hammerl <fhammerl@thoughtworks.com>
Date: Wed, 24 Feb 2016 16:05:22 +0100
Subject: Consolidate stylesheets

This removes styles.scss as intermediate stylesheet. Only main.scss
is now built, thereby also removing duplicated imports.
---
 web-ui/app/scss/_mascot.scss |   2 -
 web-ui/app/scss/_styles.scss | 896 ++++++++++++++++++++++++++++++++++++++++++
 web-ui/app/scss/main.scss    |   8 +-
 web-ui/app/scss/styles.scss  | 906 -------------------------------------------
 4 files changed, 903 insertions(+), 909 deletions(-)
 create mode 100644 web-ui/app/scss/_styles.scss
 delete mode 100644 web-ui/app/scss/styles.scss

(limited to 'web-ui')

diff --git a/web-ui/app/scss/_mascot.scss b/web-ui/app/scss/_mascot.scss
index 5cfac90d..74279063 100644
--- a/web-ui/app/scss/_mascot.scss
+++ b/web-ui/app/scss/_mascot.scss
@@ -1,5 +1,3 @@
-/* SHEEP */
-
 #no-message-selected-pane {
   position: absolute;
   top: 0;
diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss
new file mode 100644
index 00000000..a7d6dedf
--- /dev/null
+++ b/web-ui/app/scss/_styles.scss
@@ -0,0 +1,896 @@
+/*
+ * Miscellaneous styles without apparent grouping
+ */
+
+#logo {
+  color: $white;
+}
+
+#logout {
+  color: $white;
+}
+
+.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
+    }
+
+    #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;
+    }
+  }
+}
+
+.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 list-actions {
+  #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;
+      }
+    }
+  }
+}
+
+@mixin email-list {
+  ul#mail-list {
+    clear: both;
+    li {
+      height: 66px;
+      position: relative;
+      padding: 8px 10px 10px 10px;
+      background: $contrast;
+      border-bottom: 1px solid white;
+      cursor: pointer;
+      font-weight: bold;
+      transition: background-color 150ms ease-out;
+      span {
+        display: inline-block;
+        vertical-align: top;
+        &:last-child {
+          width: 92%;
+        }
+        input[type=checkbox] {
+          @include check-box;
+          margin-right: 2px;
+        }
+        a {
+          color: $dark_grey;
+          display: block;
+          height: 62px;
+          margin-top: -8px;
+          padding-top: 3px;
+          width: 106%;
+        }
+      }
+      .subject-and-tags {
+        display: block;
+        width: 90%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        @include tags;
+        ul.tags {
+          display: block;
+          line-height: 1.2;
+          margin: -3px 0 0 0;
+          li {
+            font-size: 0.6rem;
+            background-color: lighten($action_buttons, 12);
+            color: white;
+            display: inline-block;
+            height: auto;
+            font-weight: 400;
+            border: none;
+            &.tag:hover {
+              text-decoration: none;
+            }
+          }
+        }
+
+        i.fa-pencil, i.fa-trash-o {
+            color: $indicator_icon_color;
+        }
+      }
+
+      .received-date, .sent-date {
+        position: absolute;
+        right: 10px;
+        font-size: 0.7em;
+      }
+
+      .attachment-indicator {
+        margin: 2px 0 0 25px;
+        font-size: initial;
+
+        i.fa-paperclip {
+            color: $indicator_icon_color;
+        }
+      }
+      .from {
+        white-space: nowrap;
+        font-size: 0.8em;
+        width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &.status-read {
+        a {
+          font-weight: normal;
+          color: $attachment_text;
+        }
+      }
+      &:hover {
+        background: darken($contrast, 5%);
+      }
+      &.selected {
+        background: $white;
+        z-index: 3;
+        a {
+          color: $dark_grey;
+        }
+      }
+    }
+  }
+}
+
+@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;
+    @include list-actions;
+    #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;
+    @include email-list;
+  }
+
+  &#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;
+    @include read-msg;
+    [id^=fullView-] {
+      position: relative;
+    }
+  }
+}
+
+.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;
+    }
+  }
+  &.close-mail-button {
+    background: transparent;
+    color: $medium_light_grey;
+    float: right;
+    &:hover {
+      color: darken($medium_light_grey, 10%);
+    }
+  }
+  &.close-mail-button {
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 0;
+    padding: 3px 6px 5px;
+    background: $lighter_gray;
+    opacity: 0.7;
+    @include border-radius(0);
+    &:hover {
+      opacity: 1;
+    }
+    i {
+      margin: 0;
+    }
+  }
+  &.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;
+    }
+  }
+}
+
+.hidden {
+  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;
+  }
+}
+
+.buttons-group span#attachment-button{
+  cursor: pointer;
+  outline: 0;
+  margin-left: 18px;
+  padding-top: 0px;
+  -ms-transform: rotate(224deg); /* IE 9 */
+  -webkit-transform: rotate(224deg); /* Chrome, Safari, Opera */
+  transform: rotate(224deg);
+
+  i.fa-paperclip {
+      font-size: 1.7em;
+  }
+
+  &.busy {
+    color: lighten($recipients_font_color, 10%);
+    cursor: progress;
+  }
+}
diff --git a/web-ui/app/scss/main.scss b/web-ui/app/scss/main.scss
index 7d081ad1..b582a5d5 100644
--- a/web-ui/app/scss/main.scss
+++ b/web-ui/app/scss/main.scss
@@ -2,9 +2,15 @@
 @import "reset";
 @import "foundation";
 @import "colors";
+@import "mixins";
+@import "alerts";
+@import "read";
+@import "reply";
+@import "compose";
+@import "security";
+@import "mascot";
 @import "styles";
 
-
 html {
     height:100%;
 }
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
deleted file mode 100644
index a5a6dca1..00000000
--- a/web-ui/app/scss/styles.scss
+++ /dev/null
@@ -1,906 +0,0 @@
-
-@import "compass/css3";
-@import "colors";
-@import "mixins";
-@import "alerts";
-@import "read";
-@import "reply";
-@import "compose";
-@import "security";
-
-
-#logo {
-  color: $white;
-}
-
-#logout {
-  color: $white;
-}
-
-.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
-    }
-
-    #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;
-    }
-  }
-}
-
-.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 list-actions {
-  #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;
-      }
-    }
-  }
-}
-
-@mixin email-list {
-  ul#mail-list {
-    clear: both;
-    li {
-      height: 66px;
-      position: relative;
-      padding: 8px 10px 10px 10px;
-      background: $contrast;
-      border-bottom: 1px solid white;
-      cursor: pointer;
-      font-weight: bold;
-      transition: background-color 150ms ease-out;
-      span {
-        display: inline-block;
-        vertical-align: top;
-        &:last-child {
-          width: 92%;
-        }
-        input[type=checkbox] {
-          @include check-box;
-          margin-right: 2px;
-        }
-        a {
-          color: $dark_grey;
-          display: block;
-          height: 62px;
-          margin-top: -8px;
-          padding-top: 3px;
-          width: 106%;
-        }
-      }
-      .subject-and-tags {
-        display: block;
-        width: 90%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        @include tags;
-        ul.tags {
-          display: block;
-          line-height: 1.2;
-          margin: -3px 0 0 0;
-          li {
-            font-size: 0.6rem;
-            background-color: lighten($action_buttons, 12);
-            color: white;
-            display: inline-block;
-            height: auto;
-            font-weight: 400;
-            border: none;
-            &.tag:hover {
-              text-decoration: none;
-            }
-          }
-        }
-
-        i.fa-pencil, i.fa-trash-o {
-            color: $indicator_icon_color;
-        }
-      }
-
-      .received-date, .sent-date {
-        position: absolute;
-        right: 10px;
-        font-size: 0.7em;
-      }
-
-      .attachment-indicator {
-        margin: 2px 0 0 25px;
-        font-size: initial;
-
-        i.fa-paperclip {
-            color: $indicator_icon_color;
-        }
-      }
-      .from {
-        white-space: nowrap;
-        font-size: 0.8em;
-        width: 80%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      &.status-read {
-        a {
-          font-weight: normal;
-          color: $attachment_text;
-        }
-      }
-      &:hover {
-        background: darken($contrast, 5%);
-      }
-      &.selected {
-        background: $white;
-        z-index: 3;
-        a {
-          color: $dark_grey;
-        }
-      }
-    }
-  }
-}
-
-@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;
-    @include list-actions;
-    #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;
-    @include email-list;
-  }
-
-  &#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;
-    @include read-msg;
-    [id^=fullView-] {
-      position: relative;
-    }
-  }
-}
-
-.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;
-    }
-  }
-  &.close-mail-button {
-    background: transparent;
-    color: $medium_light_grey;
-    float: right;
-    &:hover {
-      color: darken($medium_light_grey, 10%);
-    }
-  }
-  &.close-mail-button {
-    position: absolute;
-    left: 0;
-    top: 0;
-    margin: 0;
-    padding: 3px 6px 5px;
-    background: $lighter_gray;
-    opacity: 0.7;
-    @include border-radius(0);
-    &:hover {
-      opacity: 1;
-    }
-    i {
-      margin: 0;
-    }
-  }
-  &.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;
-    }
-  }
-}
-
-.hidden {
-  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;
-  }
-}
-
-.buttons-group span#attachment-button{
-  cursor: pointer;
-  outline: 0;
-  margin-left: 18px;
-  padding-top: 0px;
-  -ms-transform: rotate(224deg); /* IE 9 */
-  -webkit-transform: rotate(224deg); /* Chrome, Safari, Opera */
-  transform: rotate(224deg);
-
-  i.fa-paperclip {
-      font-size: 1.7em;
-  }
-
-  &.busy {
-    color: lighten($recipients_font_color, 10%);
-    cursor: progress;
-  }
-}
-
-
-@import "mascot.scss";
-- 
cgit v1.2.3