Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 155 insertions, 0 deletions

diff --git a/web/sass-files/sass/layout/_post-right.scss b/web/sass-files/sass/layout/_post-right.scss
new file mode 100644
index 000000000..595577564
--- /dev/null
+++ b/web/sass-files/sass/layout/_post-right.scss
@@ -0,0 +1,155 @@
+@charset 'UTF-8';
+
+.post-right__container {
+    @include display-flex;
+    @include flex-direction(column);
+    height: 100%;
+
+    .post-right-root-message {
+        padding: 1em 1em 0;
+    }
+
+    .post-right-comments-container {
+        position: relative;
+
+        .post {
+            &:first-child {
+                padding-top: 15px;
+            }
+        }
+    }
+
+
+    .help_format_text {
+        bottom: -63px;
+        right: auto;
+    }
+
+    .post {
+        &.post--root {
+            padding-bottom: 1.2em;
+            border-bottom: 1px solid #ddd;
+
+            .post__body {
+                background: transparent !important;
+            }
+        }
+
+        .post__header {
+            .col__reply {
+                top: 0;
+                text-align: right;
+            }
+        }
+
+        .post__body {
+            width: 100%;
+        }
+    }
+
+    hr {
+        margin-bottom: 0;
+        border: none;
+    }
+
+    .post-create__container {
+        width: 100%;
+        margin-top: 10px;
+
+        .textarea-wrapper {
+            min-height: 100px;
+        }
+
+        .btn {
+            margin-bottom: 10px;
+        }
+
+        .custom-textarea {
+            min-height: 100px;
+        }
+
+        .msg-typing {
+            @include opacity(.7);
+            float: left;
+            margin-top: 3px;
+            font-size: 13px;
+            line-height: 20px;
+            min-width: 1px;
+            display: block;
+            height: 20px;
+            max-width: 230px;
+        }
+
+        .post-create-footer {
+            width: 100%;
+            padding: 5px 0 10px;
+        }
+
+        .post-right-comments-upload-in-progress {
+            padding: 6px 0;
+            color: #a8adb7;
+            margin-right: 10px;
+        }
+    }
+}
+.post-right-header {
+    font-size: 1em;
+    text-transform: uppercase;
+    color: #999;
+    font-weight: 400;
+    color: #888;
+    height: 39px;
+    padding: 10px 10px 0 15px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    padding: 5px 10px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    ul {
+        padding-left: 0;
+        margin-bottom: 2px;
+    }
+}
+
+.post-right-channel__name {
+    font-weight: 600;
+    margin: 0 0 10px 0;
+}
+
+.post-right-root-container li {
+    display: inline;
+    list-style-type: none;
+    padding-right: 3px;
+}
+
+.post-right-root-time {
+    color: #a8adb7;
+}
+
+.post-right-create-comment-container {
+    padding: 5px;
+    margin-bottom: 18px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.post-right__scroll {
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
+
+    .file-preview__container {
+        margin-top: 5px;
+    }
+}
+
+.post-right-comment-time {
+    color: #a8adb7;
+}