Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure

1 files changed, 197 insertions, 0 deletions

diff --git a/web/sass-files/sass/layout/_sidebar-left.scss b/web/sass-files/sass/layout/_sidebar-left.scss
new file mode 100644
index 000000000..ece054a15
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-left.scss
@@ -0,0 +1,197 @@
+@charset 'UTF-8';
+
+.sidebar--left {
+    position: absolute;
+    width: 220px;
+    left: 0;
+    height: 100%;
+    border-right: $border-gray;
+    background: #fafafa;
+    z-index: 5;
+
+    &.sidebar--padded {
+        padding-top: 44px;
+    }
+    .dropdown-menu {
+        max-height: 400px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        max-width: 200px;
+        width: 200px;
+    }
+    .search__form {
+        margin: 0;
+        padding: 1em 1em 0;
+        display: none;
+    }
+    .badge {
+        background-color: $color--primary;
+        position: absolute;
+        right: 10px;
+        top: 5px;
+    }
+    .status {
+        position: relative;
+        top: 1px;
+        margin-right: 6px;
+        width: 12px;
+        display: inline-block;
+        svg {
+            max-height: 14px;
+        }
+        i,
+        path,
+        ellipse {
+            @include opacity(.5);
+            &.online--icon,
+            &.away--icon {
+                @include opacity(1);
+            }
+        }
+        .fa-lock {
+            margin-left: 1px;
+        }
+        .fa-globe {
+            top: -1px;
+            position: relative;
+        }
+    }
+    .nav-pills__container {
+        height: calc(100% - 80px);
+        position: relative;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .nav-pills__unread-indicator {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: 72%;
+        color: #fff;
+        background: #2389d7;
+        @include border-radius(50px);
+        margin: 0 auto;
+        padding: 3px 0 4px;
+        font-size: 13.5px;
+        text-align: center;
+        z-index: 1;
+    }
+
+    .nav-pills__unread-indicator-top {
+        top: 66px;
+    }
+    .nav-pills__unread-indicator-bottom {
+        bottom: 20px;
+    }
+
+    .nav {
+        &.nav-stacked {
+            > li + li {
+                margin: 0;
+            }
+        }
+        li {
+            > h4 {
+                font-size: 1em;
+                text-transform: uppercase;
+                margin: 1.1em 0 .5em;
+                font-weight: 400;
+                color: #aaa;
+                letter-spacing: -.3px;
+                padding: 0 10px 0 15px;
+            }
+            > a {
+                padding: 3px 10px 3px 25px;
+                line-height: 1.5;
+                border-radius: 0;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &.has-badge {
+                    padding-right: 30px;
+                }
+                &.has-close {
+                    padding-right: 30px;
+                    &:hover {
+                        .btn-close {
+                            display: block;
+                            @include opacity(.8);
+                        }
+                    }
+                    .btn-close {
+                        font-family: 'Open Sans', sans-serif;
+                        position: absolute;
+                        right: 15px;
+                        top: -1px;
+                        font-size: 20px;
+                        font-weight: 600;
+                        @include opacity(0);
+                        display: none;
+                        &:hover {
+                            @include opacity(1);
+                        }
+                    }
+                }
+                &.nav-more {
+                    text-decoration: underline;
+                }
+                &.unread-title {
+                    font-weight: 600;
+                }
+            }
+            &.active {
+                a {
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 5px;
+                        height: 100%;
+                        background: #000;
+                    }
+                }
+                a,
+                a:hover,
+                a:focus {
+                    background-color: rgba(black, .1);
+                    border-radius: 0;
+                    font-weight: 400;
+                    position: relative;
+                }
+            }
+        }
+    }
+    .modal-title {
+        line-height: 2em;
+    }
+
+    .add-channel-btn {
+        float: right;
+        outline: none;
+        margin: -2px 0 0 0;
+        color: #aaa;
+        padding: 0 5px;
+        text-decoration: none;
+        font-size: 22px;
+        line-height: 18px;
+        font-weight: 700;
+        &:hover {
+            color: #666;
+        }
+    }
+}
+
+.channel-loading-gif {
+    height: 15px;
+    width: 15px;
+    margin-top: 2px;
+}
+
+.join-channel-loading-gif {
+    margin-top: 5px;
+    margin-left: 10px;
+    height: 25px;
+    width: 25px;
+}