Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 129 insertions, 0 deletions

diff --git a/web/sass-files/sass/layout/_sidebar-right.scss b/web/sass-files/sass/layout/_sidebar-right.scss
new file mode 100644
index 000000000..e1a7d7641
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-right.scss
@@ -0,0 +1,129 @@
+@charset 'UTF-8';
+
+.sidebar--right {
+    position: fixed;
+    width: 400px;
+    height: 100%;
+    right: 0px;
+    padding: 0;
+    background: #fff;
+    @include translateX(400px);
+
+    .post-body {
+        img {
+            max-height: 200px;
+        }
+    }
+
+    .post {
+        .post__header {
+            .col__name {
+                .user-popover {
+                    max-width: 130px;
+                }
+            }
+        }
+    }
+
+    .sidebar--right__content {
+        height: 100%;
+        @include display-flex;
+        @include flex-direction(column);
+    }
+
+    .sidebar--right__back {
+        color: inherit;
+        @include opacity(.8);
+        width: 30px;
+        text-align: center;
+        margin: 0 0 0 -14px;
+        font-size: 13px;
+        display: inline-block;
+    }
+
+    .sidebar-right__body {
+        @include flex(1 1 auto);
+        border-left: $border-gray;
+        border-top: $border-gray;
+        @include display-flex;
+        @include flex-direction(column);
+        height: calc(100% - 56px);
+        @include border-radius(2px 0 0 0);
+    }
+
+    .sidebar__overlay {
+        width: 100%;
+        height: 100%;
+        background-color: yellow;
+        @include opacity(.1);
+        position: absolute;
+        z-index: 5;
+        pointer-events: none;
+    }
+
+    .input-group {
+        word-break: break-word;
+    }
+
+    .sidebar--right__close {
+        margin: 11px 0 0 0;
+        width: 22px;
+        height: 22px;
+        opacity: .5;
+        font-size: 22px;
+        line-height: 0;
+        background: none;
+        float: right;
+        outline: none;
+        border: none;
+        @include single-transition(all, .2s, ease-in);
+
+        &:hover,
+        &:active {
+            opacity: .8;
+        }
+
+        i {
+            position: relative;
+            top: -2px;
+        }
+    }
+
+    .sidebar--right__header {
+        font-size: 1em;
+        text-transform: uppercase;
+        color: inherit;
+        height: 44px;
+        padding: 0 1em;
+        line-height: 44px;
+        @include flex(0 0 44px);
+        border-bottom: $border-gray;
+    }
+
+    .sidebar--right__subheader {
+        font-size: 1em;
+        padding: 1em 1em 0;
+
+        h4 {
+            font-size: 1em;
+        }
+
+        ul {
+            @include opacity(.7);
+            padding: 10px 0 0 30px;
+        }
+
+        li {
+            font-size: .95em;
+            padding-bottom: 10px;
+        }
+    }
+
+    .suggestion-list__content {
+        max-height: 120px;
+    }
+}
+
+.sidebar-right-container {
+    height: 100%;
+}