Issue #620: Float composer right of close button

1 files changed, 178 insertions, 0 deletions

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..5d6fe0b2
--- /dev/null
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -0,0 +1,178 @@
+.compose-view {
+    overflow: auto;
+}
+
+// COMPOSE PANE
+#compose-box, #draft-box, #reply-box, #feedback-box {
+    div.floatlabel {
+        position: relative;
+    }
+
+    margin: 5px 0 50px 30px;
+    padding: 0;
+
+    .input-container {
+        padding: 1px;
+    }
+
+    label, span {
+        color: $recipients_font_color;
+        padding: 0.5rem;
+        cursor: text;
+        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;
+    }
+
+    #attachment-upload-item {
+        display: none;
+
+        .progress {
+            width: 0%;
+            position: absolute;
+            right: 0;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            min-height: 100%;
+
+            .progress-bar {
+                height: 100%;
+                background-color: rgba($light_blue, 0.3);
+            }
+        }
+    }
+
+    .attachmentsAreaWrap {
+        padding: 0;
+
+        .attachmentsArea {
+            padding: 0;
+            border-top: 0;
+
+            #upload-error {
+                color: $error;
+                margin-bottom: 20px;
+
+                .close-icon {
+                    font-size: 1.0rem;
+                    cursor: pointer;
+                }
+
+                span, a {
+                    color: $error;
+                    font-size: 0.9rem;
+                }
+
+                a {
+                    text-decoration: underline;
+                    padding: 5px;
+                }
+            }
+        }
+    }
+
+    @include recipients;
+}
+
+#reply-box {
+    @include recipients;
+}
+