1 files changed, 68 insertions, 43 deletions

diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index ece054a15..4c65d0a65 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -1,86 +1,97 @@
 @charset 'UTF-8';
 
 .sidebar--left {
+    background: #fafafa;
+    border-right: $border-gray;
+    height: 100%;
+    left: 0;
     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;
+        max-width: 200px;
         overflow-x: hidden;
         overflow-y: auto;
-        max-width: 200px;
         width: 200px;
     }
+
     .search__form {
+        display: none;
         margin: 0;
         padding: 1em 1em 0;
-        display: none;
     }
+
     .badge {
-        background-color: $color--primary;
+        background-color: $primary-color;
         position: absolute;
         right: 10px;
         top: 5px;
     }
+
     .status {
+        display: inline-block;
+        margin-right: 6px;
         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;
+            top: -1px;
         }
     }
+
     .nav-pills__container {
+        -webkit-overflow-scrolling: touch;
         height: calc(100% - 80px);
-        position: relative;
         overflow: auto;
-        -webkit-overflow-scrolling: touch;
+        position: relative;
     }
 
     .nav-pills__unread-indicator {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 72%;
-        color: #fff;
-        background: #2389d7;
         @include border-radius(50px);
+        background: #2389d7;
+        color: #ffffff;
+        font-size: 13.5px;
+        left: 0;
         margin: 0 auto;
         padding: 3px 0 4px;
-        font-size: 13.5px;
+        position: absolute;
+        right: 0;
         text-align: center;
+        width: 72%;
         z-index: 1;
     }
 
     .nav-pills__unread-indicator-top {
         top: 66px;
     }
+
     .nav-pills__unread-indicator-bottom {
         bottom: 20px;
     }
@@ -91,71 +102,83 @@
                 margin: 0;
             }
         }
+
         li {
             > h4 {
+                color: #aaaaaa;
                 font-size: 1em;
-                text-transform: uppercase;
-                margin: 1.1em 0 .5em;
                 font-weight: 400;
-                color: #aaa;
                 letter-spacing: -.3px;
+                margin: 1.1em 0 .5em;
                 padding: 0 10px 0 15px;
+                text-transform: uppercase;
             }
+
             > a {
-                padding: 3px 10px 3px 25px;
-                line-height: 1.5;
                 border-radius: 0;
-                white-space: nowrap;
+                line-height: 1.5;
                 overflow: hidden;
+                padding: 3px 10px 3px 25px;
                 text-overflow: ellipsis;
+                white-space: nowrap;
+
                 &.has-badge {
                     padding-right: 30px;
                 }
+
                 &.has-close {
                     padding-right: 30px;
+
                     &:hover {
                         .btn-close {
-                            display: block;
                             @include opacity(.8);
+                            display: block;
                         }
                     }
+
                     .btn-close {
+                        @include opacity(0);
+                        display: none;
                         font-family: 'Open Sans', sans-serif;
+                        font-size: 20px;
+                        font-weight: 600;
                         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 {
+                        background: $black;
                         content: '';
+                        height: 100%;
+                        left: 0;
                         position: absolute;
                         top: 0;
-                        left: 0;
                         width: 5px;
-                        height: 100%;
-                        background: #000;
                     }
                 }
+
                 a,
                 a:hover,
                 a:focus {
-                    background-color: rgba(black, .1);
+                    @include alpha-property(background-color, $black, .1);
                     border-radius: 0;
                     font-weight: 400;
                     position: relative;
@@ -163,35 +186,37 @@
             }
         }
     }
+
     .modal-title {
         line-height: 2em;
     }
 
     .add-channel-btn {
+        color: #aaaaaa;
         float: right;
-        outline: none;
+        font-size: 22px;
+        font-weight: 700;
+        line-height: 18px;
         margin: -2px 0 0 0;
-        color: #aaa;
+        outline: none;
         padding: 0 5px;
         text-decoration: none;
-        font-size: 22px;
-        line-height: 18px;
-        font-weight: 700;
+
         &:hover {
-            color: #666;
+            color: #666666;
         }
     }
 }
 
 .channel-loading-gif {
     height: 15px;
-    width: 15px;
     margin-top: 2px;
+    width: 15px;
 }
 
 .join-channel-loading-gif {
-    margin-top: 5px;
-    margin-left: 10px;
     height: 25px;
+    margin-left: 10px;
+    margin-top: 5px;
     width: 25px;
 }