polish mail list and delete old scss modules

src/css/global.scss

@@ -1,44 +0,0 @@
-/* global */
-
-body, input, button {
-    font-family: 'PT Sans', Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    color: $default-text-color;
-}
-
-.address-headers {
-    color: $header-text-color;
-
-    p {
-        line-height: 2.2em;
-    }
-}
-
-.address {
-    margin-left: 0.3em;
-    padding: 0.25em 1em;
-}
-
-.address-verified {
-    color: $lightgrey-color;
-    background-color: $blue-color;
-    border-radius: 1em;
-    box-shadow: 1px 1px 0px $blue-box-shadow-color;
-}
-
-.btn-shadow {
-    cursor: pointer;
-
-    &:hover {
-        box-shadow: 2px 2px 4px $blue-box-shadow-color;
-    }
-    &:active {
-        box-shadow: none;
-        margin-top: 0.2em;
-    }
-}
-
-.mail-text-body {
-    line-height: 1.5em;
-}

src/css/icon-font.scss

@@ -1,36 +0,0 @@
-@font-face {
-    font-family: 'icomoon';
-    font-weight: normal;
-    font-style: normal;
-    src: url('icons.ttf') format('truetype');
-}
-
-.icon-reply, .icon-new-mail, .icon-delete, .icon-add-user, .icon-attachment {
-    font-family: 'icomoon';
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-}
-.icon-reply:before {
-    content: "\e000";
-    margin-left: -0.15em;
-}
-.icon-new-mail:before {
-    content: "\e001";
-    margin-left: -0.05em;
-}
-.icon-delete:before {
-    content: "\e002";
-    font-size: 1.15em;
-    margin-left: 0.03em;
-}
-.icon-add-user:before {
-    content: "\e003";
-}
-.icon-attachment:before {
-    content: "\e004";
-}

src/css/message-list-desktop.scss

@@ -1,13 +0,0 @@
-/* message-list-desktop */
-
-.left-listing {
-    float: left;
-    width: 344px;
-    border: 1px;
-    border-right-style: solid;
-    border-color: $grey-text-color;
-}
-
-.right-reader {
-    margin-left: 344px;
-}

src/css/message-list.scss

@@ -1,131 +0,0 @@
-/* folder name */
-
-.folder-name {
-    position: absolute;
-    padding: 13px 15px;
-
-    p {
-        font-size: 1.5em;
-    }
-}
-
-.hamburger-btn {
-    float: left;
-    background-color: $lightgrey-color;
-    height: 1em;
-    width: 1.3em;
-    margin-right: 10px;
-
-    .blue-box {
-        float: inherit;
-        background-color: $blue-color;
-        height: 5px;
-        width: 100%;
-        box-shadow: 1px 1px 1px $lightgrey-box-shadow-color;
-        margin-bottom: 0.16em;
-    }
-}
-
-/* message list */
-
-.message-list {
-    background-color: $lightgrey-color;
-    padding: 46px 15px;
-    width: inherit;
-
-    @mixin marked {
-        background-color: $blue-color;
-        color: $lightgrey-color;
-         .sent-date, .from {
-            color: $lightgrey-color;
-        }
-    }
-
-    @mixin read-bubble {
-        position: absolute;
-        margin-top: 1.95em;
-        margin-left: 0.5em;
-        width: 0.9em;
-        height: 0.9em;
-        border-radius: 50%;
-    }
-    @mixin read-bubble-grey {
-            background: $lightgrey-color;
-            box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
-    }
-    @mixin read-bubble-blue {
-        background: $blue-color;
-        box-shadow: inset 0.5px 1px 1px $blue-box-shadow-color;
-    }
-
-    .unread {
-        @include read-bubble;
-        @include read-bubble-blue;
-    }
-
-    .read {
-        @include read-bubble;
-        @include read-bubble-grey;
-    }
-
-    .icon-attachment {
-        float: right;
-        margin-top: 1.9em;
-        margin-right: 0.5em;
-    }
-
-    li {
-        background-color: white;
-        margin: 8px 0;
-        padding: 10px 0;
-        height: 85px;
-        .from {
-            color: $blue-color;
-        }
-
-        &:hover {
-            background-color: $lightgrey-color;
-        }
-        &:hover.selected {    
-            @include marked;
-        }
-
-        p {
-            margin-left: 32px;
-            margin-right: 32px;
-        }
-        .from {
-            font-size: 1.5em;
-        }
-        .subject-line {
-            font-size: 0.875em;
-            margin-top: 0.5em;
-            margin-bottom: 0.5em;
-        }
-        .subject {
-            font-weight: bold;
-            width: 13.571em;
-            height: 1em;
-            overflow: hidden;
-            display: inline-block;
-        }
-        .sent-date {
-            float: right;
-            color: $grey-text-color;
-        }
-        .text-preview {
-            font-size: 0.875em;
-            line-height: 1.2em;
-            height: 2.35em;
-            overflow: hidden;
-        }
-    }
-
-    li.selected {
-        @include marked;
-
-        .unread {
-            @include read-bubble-grey;
-        }
-    }
-}

src/css/read.scss

@@ -1,45 +0,0 @@
-/* read view */
-
-.read-message {
-    padding: 10px 15px;
-
-    .subject {
-        font-size: 1.5em;
-    }
-
-    .date {
-        color: $grey-text-color;
-        font-size: 0.875em;
-        margin-top: 0.5em;
-        margin-bottom: 1.5em;
-    }
-
-    .seperator-line {
-        height: 1px;
-        color: $grey-border-color;
-        background-color: $grey-border-color;
-        margin-top: 1em;
-        margin-bottom: 1.5em;
-    }
-}
-
-.buttons {
-    float: right;
-    margin: 10px 15px;
-    color: $blue-color;
-}
-
-.circle {
-    float: right;
-    width: 2em;
-    height: 2em;
-    border: 2px;
-    border-style: solid;
-    border-color: $blue-color;
-    border-radius: 50%;
-    margin-left: 0.5em;
-
-    div {
-        margin: 0.5em;
-    }
-}

src/css/reset.css

@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

src/css/style.scss

@@ -1,30 +0,0 @@
-/* colors */
-
-$default-text-color: #333333;
-$header-text-color: #666666;
-$grey-text-color: #cccccc;
-$grey-border-color: #dddddd;
-
-$blue-color: #00c6ff;
-$lightgrey-color: #f9f9f9;
-$blue-box-shadow-color: #A4A4A4;
-$lightgrey-box-shadow-color: #D8D8D8;
-
-/* fonts */
-
-@font-face {
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    src: local('PT Sans'), local('PTSans-Regular'), url('../font/pt-sans.ttf') format('truetype');
-}
-
-@import "icon-font";
-
-/* import view modules */
-
-@import "global";
-@import "message-list-desktop";
-@import "message-list";
-@import "read";
-@import "write";

src/css/write.scss

@@ -1,84 +0,0 @@
-/* write view */
-
-.write-message {
-    padding: 10px;
-
-    .title {
-        text-align: center;
-        font-size: 1.5em;
-        margin-bottom: 20px;
-    }
-
-    input {
-        font-size: 1em;
-        border: 0!important;
-        outline: 0px;
-    }
-
-    button {
-        font-size: 1em;
-        border: 0!important;
-    }
-
-    .address-input {
-        width: 90%;
-    }
-
-    .subject-box {
-        margin: 20px 0;
-        width: inherit;
-        border: 1px;
-        border-style: solid;
-        border-color: $grey-border-color;
-        height: 2.625em;
-
-        .subject-line {
-            float: left;
-            padding: 0.5em;
-            width: 80%;
-            color: $header-text-color;
-        }
-
-        .subject {
-            font-weight: bold;
-            width: 100%;
-        }
-
-        .attachment-btn {
-            float: right;
-            padding: 0.5em;
-            margin: 0.3125em;
-            color: $lightgrey-color;
-            background-color: $blue-color;
-        }
-    }
-
-    *[contentEditable] {
-        outline: 0px;
-    }
-
-    .encrypt-preview {
-        margin-top: 1.5em;
-        font-family: monospace;
-        color: $grey-text-color;
-        word-wrap: break-word;
-    }
-
-    .send-btn {
-        background-color: $blue-color;
-        color: $lightgrey-color;
-        padding: 0.813em;
-        position: absolute;
-        bottom: 10px;
-        right: 10px;
-        box-shadow: 1px 1px 0px $blue-box-shadow-color;
-
-        &:hover {
-            box-shadow: 2px 2px 4px $blue-box-shadow-color;
-        }
-        &:active {
-            box-shadow: none;
-            margin-top: 0.2em;
-        }
-    }
-}

src/sass/components/_mail-list.scss

@@ -1,5 +1,5 @@
 .mail-list {
-    $padding-vertical: 15px;
+    $padding-vertical: 12px;
     $padding-horizontal: 30px;
 
     list-style: none;
@@ -12,7 +12,7 @@
 
     li {
         display: block;
-        margin-bottom: 5px;
+        margin-bottom: 7px;
         padding: $padding-vertical $padding-horizontal;
         background: $color-white;
         cursor: pointer;
@@ -33,13 +33,14 @@
         .head {
             position: relative;
             padding-right: 6.5em;
+            margin-bottom: 0.25em;
 
             .subject {
                 @include text-overflow;
 
                 color: $color-grey-dark;
                 font-weight: bold;
-                line-height: 1.8em;
+                line-height: 1.5em;
             }
             time {
                 position: absolute;
@@ -49,14 +50,14 @@
                 color: $color-grey-light;
                 font-size: $font-size-smaller;
                 text-align: right;
-                line-height: 1.8em * ($font-size-small / $font-size-smaller);
+                line-height: 1.5em * ($font-size-small / $font-size-smaller);
             }
             &:before {
                 content: "";
-                width: 0.8em;
+                width: 1em;
-                height: 0.8em;
+                height: 1em;
                 border-radius: 50%;
-                box-shadow: inset 0 2px 2px $color-grey-light;
+                box-shadow: inset 1px 1px 1px $color-grey-light;
                 position: absolute;
                 top: 0;
                 left: 0;
@@ -66,9 +67,9 @@
             }
         }
         .body {
-            @include text-overflow;
-
             color: $color-grey;
+            height: 2.5em;
+            overflow: hidden;
         }
 
         &:hover {
@@ -78,11 +79,12 @@
         &.mail-list-attachment {
             .head:after {
                 content: "\e003";
-                color: $color-grey-light;
+                color: $color-grey-medium;
                 font-family: $font-family-icons;
                 position: absolute;
                 right: 0;
                 top: 0;
+                margin-top: -0.3em;
                 margin-right: -1 * $padding-horizontal;
                 text-align: center;
                 line-height: 1.8em;
@@ -93,14 +95,14 @@
         &.mail-list-unread {
             .head:before {
                 background-color: $color-blue;
-                box-shadow: inset 0 1px 2px $color-grey;
+                box-shadow: inset 0.5px 1px 1px $color-grey-medium;
             }
         }
 
         &.mail-list-replied {
             .head:before {
                 content: "\e002";
-                color: $color-grey-light;
+                color: $color-grey-medium;
                 font-family: $font-family-icons;
                 position: absolute;
                 left: 0;
@@ -135,7 +137,7 @@
                 color: $color-white;
             }
             .head:before {
-                box-shadow: inset 0 2px 2px $color-grey-light;
+                box-shadow: inset 1px 1px 1px $color-grey-light;
                 background-color: $color-white;
             }
             &.mail-list-attachment {
@@ -145,7 +147,7 @@
             }
             &.mail-list-unread {
                 .head:before {
-                    box-shadow: inset 0 2px 2px $color-grey-light;
+                    box-shadow: inset 1px 1px 1px $color-grey-light;
                     background-color: $color-white;
                 }
             }