Issue #620: Format mail-view and convert to normal CSS rule

1 files changed, 154 insertions, 137 deletions

diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 236a7c7c..77ff958d 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -1,171 +1,188 @@
 /* MAIL PANE */
 
-@mixin read-msg {
-  #mail-view {
+#mail-view {
     .msg-header {
-      display: flex;
-      flex-wrap: nowrap;
-
-      top: 0;
-      z-index: 10;
-      background-color: white;
-      font-size: 0.9em;
-      padding: 0px 0;
-      margin: 1px 0 0 0;
-      .recipients {
-        padding-bottom: 5px;
-        line-height: 1.5em;
-        i {
-          padding: 0 5px;
+        display: flex;
+        flex-wrap: nowrap;
+        top: 0;
+        z-index: 10;
+        background-color: white;
+        font-size: 0.9em;
+        padding: 0px 0;
+        margin: 1px 0 0 0;
+
+        .recipients {
+            padding-bottom: 5px;
+            line-height: 1.5em;
+
+            i {
+                padding: 0 5px;
+            }
+
+            .from {
+                font-weight: 700;
+            }
         }
-        .from {
-          font-weight: 700;
+
+        .close-mail-button {
+            position: relative;
+            float: none;
+            flex-shrink: 0;
+            display: inline-block;
+            vertical-align: top;
+            height: 27px;
+            margin-right: 3px;
+        }
+
+        .full-view-header {
+            display: inline-block;
+            padding-top: 5px;
+            width: 95%;
+            flex-shrink: 1;
+        }
+
+        .headline-area {
+            clear: both;
+            border-top: 1px solid $lighter_gray;
         }
-      }
-      .close-mail-button {
-        position: relative;
-        float: none;
-        flex-shrink: 0;
-        display: inline-block;
-        vertical-align: top;
-        height: 27px;
-        margin-right: 3px;
-      }
-
-      .full-view-header {
-        display:inline-block;
-        padding-top: 5px;
-        width:95%;
-        flex-shrink:1;
-      }
-      .headline-area {
-        clear: both;
-        border-top: 1px solid $lighter_gray;
-      }
     }
+
     h3 {
-      margin-bottom: 0;
+        margin-bottom: 0;
     }
+
     .tagsArea {
-      clear: both;
-      margin: 0 0 10px;
-      @include tags;
-      ul li {
-        &.tag:hover {
-          &:before {
-            content: "click to remove";
-            text-transform: lowercase;
-            font-size: 0.5rem;
-            @include tooltip(18px, 8px);
-          }
+        clear: both;
+        margin: 0 0 10px;
+
+        @include tags;
+
+        ul li {
+            &.tag:hover {
+                &:before {
+                    content: "click to remove";
+                    text-transform: lowercase;
+                    font-size: 0.5rem;
+
+                    @include tooltip(18px, 8px);
+                }
+            }
         }
-      }
     }
-  }
 }
 
 .bodyArea {
-  padding: 10px 30px 0 30px;
-  box-sizing: border-box;
-
-  iframe {
-    box-sizing: inherit;
-    border: none;
-    width: 100%;
-  }
+    padding: 10px 30px 0 30px;
+    box-sizing: border-box;
+
+    iframe {
+        box-sizing: inherit;
+        border: none;
+        width: 100%;
+    }
 }
 
 .attachmentsAreaWrap {
-  padding: 0 30px;
+    padding: 0 30px;
 
-  .attachmentsArea {
-    border-top: 1px solid $lighter_gray;
-    padding: 10px 0 0;
+    .attachmentsArea {
+        border-top: 1px solid $lighter_gray;
+        padding: 10px 0 0;
 
-    li {
-        position: relative;
-        display: block;
-        border: 1px solid $border_light_grey;
-        border-radius: 2px;
-        background-color: $background_light_grey;
-        margin-bottom: 8px;
+        li {
+            position: relative;
+            display: block;
+            border: 1px solid $border_light_grey;
+            border-radius: 2px;
+            background-color: $background_light_grey;
+            margin-bottom: 8px;
 
-      a {
-        color: $attachment_text;
-        display: block;
-        text-decoration: none;
-        line-height: inherit;
-        padding: 4px 5px;
+            a {
+                color: $attachment_text;
+                display: block;
+                text-decoration: none;
+                line-height: inherit;
+                padding: 4px 5px;
 
-        &:hover, &:focus {
-          i.download-icon {
-            color: lighten($attachment_icon, 15);
-          }
+                &:hover, &:focus {
+                    i.download-icon {
+                        color: lighten($attachment_icon, 15);
+                    }
 
-          color: $attachment_icon;
-          outline: none;
-        }
+                    color: $attachment_icon;
+                    outline: none;
+                }
 
-        i.download-icon {
-          position: absolute;
-          color: $attachment_icon;
-          right: 0;
-          padding: 7px 10px;
-        }
+                i.download-icon {
+                    position: absolute;
+                    color: $attachment_icon;
+                    right: 0;
+                    padding: 7px 10px;
+                }
 
-        i.remove-icon {
-          float: right;
-          padding-right: 5px;
-          padding-top: 7px;
-          color: $medium_light_grey;
+                i.remove-icon {
+                    float: right;
+                    padding-right: 5px;
+                    padding-top: 7px;
+                    color: $medium_light_grey;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 #mail-actions {
-  text-align: right;
-  padding: 10px 0;
-  button {
-    display: inline-block;
-    display: inline;
-    line-height: 2em;
-    border: 1px solid $lighter_gray;
-    &#reply-button-top {
-      @include border-right-radius(0);
-      padding: 0 20px;
-    }
-    &#view-more-actions {
-      @include border-left-radius(0);
-      padding: 0 5px;
-      margin-left: -4px;
-    }
-    &:hover {
-      @include btn-transition;
-      background: darken($contrast, 5%)
+    text-align: right;
+    padding: 10px 0;
+
+    button {
+        display: inline-block;
+        display: inline;
+        line-height: 2em;
+        border: 1px solid $lighter_gray;
+
+        &#reply-button-top {
+            @include border-right-radius(0);
+
+            padding: 0 20px;
+        }
+
+        &#view-more-actions {
+            @include border-left-radius(0);
+
+            padding: 0 5px;
+            margin-left: -4px;
+        }
+
+        &:hover {
+            @include btn-transition;
+
+            background: darken($contrast, 5%);
+        }
     }
-  }
-  ul#more-actions {
-    padding: 5px 0;
-    width: 170px;
-    text-align: left;
-    display: block;
-    position: absolute;
-    background: $white;
-    border: 1px solid $lighter_gray;
-    right: 0;
-    top: 40px;
-    z-index: 10;
-    li {
-      span, a {
-        padding: 5px 10px;
+
+    ul#more-actions {
+        padding: 5px 0;
+        width: 170px;
+        text-align: left;
         display: block;
-        &:hover {
-          cursor: pointer;
-          background: $contrast;
+        position: absolute;
+        background: $white;
+        border: 1px solid $lighter_gray;
+        right: 0;
+        top: 40px;
+        z-index: 10;
+
+        li {
+            span, a {
+                padding: 5px 10px;
+                display: block;
+
+                &:hover {
+                    cursor: pointer;
+                    background: $contrast;
+                }
+            }
         }
-      }
     }
-  }
 }