1 files changed, 124 insertions, 0 deletions
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;
+        }
+    }
+}