From f600b1dc2b39ff7b2b3d8450cba43ebb643adddd Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Wed, 16 Mar 2016 20:31:21 +0500
Subject: Updating asss lint stuff with other scss improvements

---
 webapp/sass/layout/_content.scss       |  45 +---
 webapp/sass/layout/_footer.scss        |   6 +-
 webapp/sass/layout/_forms.scss         |  20 +-
 webapp/sass/layout/_headers.scss       | 141 +++++-----
 webapp/sass/layout/_markdown.scss      |  55 ++--
 webapp/sass/layout/_navigation.scss    |  58 ++--
 webapp/sass/layout/_post-right.scss    |  46 ++--
 webapp/sass/layout/_post.scss          | 480 ++++++++++++++++++---------------
 webapp/sass/layout/_sidebar-left.scss  | 111 +++++---
 webapp/sass/layout/_sidebar-menu.scss  |  47 ++--
 webapp/sass/layout/_sidebar-right.scss |  62 ++---
 webapp/sass/layout/_webhooks.scss      |  18 +-
 12 files changed, 570 insertions(+), 519 deletions(-)

(limited to 'webapp/sass/layout')

diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss
index 71bef0d7f..bbc09a80e 100644
--- a/webapp/sass/layout/_content.scss
+++ b/webapp/sass/layout/_content.scss
@@ -15,21 +15,22 @@
 }
 
 .app__content {
+    @include display-flex;
+    @include flex-direction(column);
+    background: $white;
     height: 100%;
-    padding-top: 50px;
     margin-left: 220px;
+    padding-top: 50px;
     position: relative;
-    background: #fff;
-    @include display-flex;
-    @include flex-direction(column);
 
     .channel__wrap & {
         padding-top: 0;
     }
 }
+
 #post-create {
     @include flex(0 0 auto);
-    background: #fff;
+    background: $white;
     width: 100%;
     z-index: 3;
 }
@@ -37,12 +38,12 @@
 #archive-link-home {
     @include flex(0 0 auto);
     cursor: pointer;
-    padding: 10px 20px;
     font-size: 13px;
+    padding: 10px 20px;
 
     .fa {
-        font-size: 11px;
         @include opacity(.7);
+        font-size: 11px;
     }
 
     a {
@@ -50,36 +51,6 @@
     }
 }
 
-.post-list {
-    .new-messages-hr {
-        margin-top: 5px;
-        margin-bottom: 0px;
-        border: 0;
-        border-top: 1px solid #f80;
-    }
-
-    .new-messages-text {
-        margin-top: 2px;
-        margin-bottom: 5px;
-        color: #f80;
-        text-align: center;
-    }
-}
-
-.new-messages-hr {
-    margin-top: 5px;
-    margin-bottom: 0px;
-    border: 0;
-    border-top: 1px solid #f80;
-}
-
-.new-messages-text {
-    margin-top: 2px;
-    margin-bottom: 5px;
-    color: #f80;
-    text-align: center;
-}
-
 .delete-message-text {
     margin-top: 10px;
 }
diff --git a/webapp/sass/layout/_footer.scss b/webapp/sass/layout/_footer.scss
index 5624e6376..36f1fbc70 100644
--- a/webapp/sass/layout/_footer.scss
+++ b/webapp/sass/layout/_footer.scss
@@ -1,22 +1,22 @@
 @charset 'UTF-8';
 
 .footer-pane {
-    background: #eee;
+    background: $light-gray;
     padding-bottom: 1em;
 
     .footer-link {
         padding: 0 1.5em;
 
         &.copyright {
-            color: #999;
+            color: $dark-gray;
             padding-right: 0;
         }
     }
 
     .footer-site-name {
-        padding: 1.5em 0 1em;
         font-size: 14px;
         font-weight: bold;
+        padding: 1.5em 0 1em;
         text-transform: uppercase;
     }
 }
diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index 1f51603cc..259beeb57 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/webapp/sass/layout/_forms.scss
@@ -6,32 +6,32 @@
     }
 
     .form__label {
-        text-align: left;
-        padding-right: 3px;
-        font-weight: 600;
         font-size: 1.1em;
+        font-weight: 600;
+        padding-right: 3px;
+        text-align: left;
 
         &.light {
-            font-weight: normal;
-            color: #999;
+            color: $dark-gray;
             font-size: 1.05em;
             font-style: italic;
+            font-weight: normal;
             padding-top: 2px;
         }
     }
 
     .input__help {
+        @include opacity(.8);
         color: inherit;
         margin: 10px 0 0 10px;
         word-break: break-word;
-        @include opacity(.8);
 
         &.dark {
             @include opacity(1);
         }
 
         &.error {
-            color: #a94442;
+            color: darken($red, 20%);
         }
     }
 
@@ -49,13 +49,9 @@
 }
 
 .help-block {
+    color: $dark-gray;
     font-size: .95em;
     margin: 10px 0 0;
-    color: #999;
-}
-
-.disabled-input {
-    background-color: #ddd !important;
 }
 
 .form-group {
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 0a6b9f920..9b631d00f 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -1,6 +1,6 @@
 @charset 'UTF-8';
 
-#channel-header {
+.channel-header {
     @include flex(0 0 56px);
 }
 
@@ -15,8 +15,8 @@
 }
 
 .header-dropdown__icon {
-    font-size: 11px;
     color: inherit;
+    font-size: 11px;
     top: 3px;
 }
 
@@ -31,12 +31,12 @@
         word-break: break-word;
 
         &.dropdown {
+            float: left;
             max-width: 100%;
             padding-right: 1em;
-            float: left;
 
             .header-dropdown__icon {
-                color: #777;
+                color: $dark-gray;
             }
 
             a {
@@ -49,10 +49,11 @@
         }
 
         &.description {
-            overflow: hidden;
-            text-overflow: ellipsis;
             margin-top: 2px;
             max-height: 45px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
             .markdown-inline-img {
                 max-height: 45px;
             }
@@ -65,14 +66,14 @@
 }
 
 .channel-intro {
+    border-bottom: 1px solid $light-gray;
     margin: 0 auto 35px;
-    padding: 0 1em 5px;
     max-width: 1000px;
-    border-bottom: 1px solid lightgrey;
+    padding: 0 1em 5px;
 
     .intro-links {
-        margin: 0 1.5em 10px 0;
         display: inline-block;
+        margin: 0 1.5em 10px 0;
 
         .fa {
             margin-right: 5px;
@@ -80,28 +81,30 @@
     }
 
     .channel-intro-profile {
-        margin-top: 5px;
         margin-left: 63px;
+        margin-top: 5px;
     }
 
     .channel-intro-img {
         float: left;
+
         img {
             @include border-radius(100px);
         }
     }
 
     .channel-intro__title {
-        font-weight: 600;
         font-size: 20px;
+        font-weight: 600;
         margin-bottom: 15px;
     }
 
     .channel-intro__content {
-        background: #f7f7f7;
-        padding: 10px 15px;
         @include border-radius(3px);
+        background: $bg--gray;
+        padding: 10px 15px;
     }
+
     .channel-intro-text {
         margin-top: 35px;
     }
@@ -111,28 +114,28 @@
 .sidebar--left,
 .sidebar--menu {
     .team__header {
-        position: relative;
-        padding: 9px 10px;
         @include legacy-pie-clearfix;
+        padding: 9px 10px;
+        position: relative;
 
         &:before {
             @include single-transition(all, .05s, linear);
-            content: '';
             background: none;
-            top: 0;
-            left: 0;
-            width: 100%;
+            content: '';
             height: 100%;
+            left: 0;
             position: absolute;
+            top: 0;
+            width: 100%;
         }
 
         &:hover {
             &:before {
-                background: rgba(black, .1);
+                @include alpha-property(background, $black, .1);
             }
 
             .user__name {
-                color: #fff;
+                color: $white;
             }
 
             .navbar-right {
@@ -145,95 +148,88 @@
         .navbar-right {
             font-size: .85em;
             position: absolute;
-            top: 10px;
             right: 22px;
+            top: 10px;
             z-index: 5;
 
             .dropdown-toggle {
+                @include opacity(.8);
                 @include single-transition(all, .1s, linear);
                 padding: 10px;
-                @include opacity(.8);
             }
 
             .dropdown-menu {
-                li a {
+                a {
+                    overflow: hidden;
                     padding: 3px 20px;
                     text-overflow: ellipsis;
-                    overflow: hidden;
                 }
             }
 
             .dropdown__icon {
-                fill: #fff;
+                fill: $white;
             }
         }
 
-        .settings__link a:hover,
-        a:visited,
-        a:link,
-        a:active {
-            text-decoration: none;
-        }
-
         .user__picture {
-            width: 36px;
-            height: 36px;
-            float: left;
             @include border-radius(36px);
+            float: left;
+            height: 36px;
             margin-right: 6px;
+            width: 36px;
         }
 
         .header__info {
-            color: #fff;
             @include clearfix;
+            color: $white;
             padding-left: 2px;
-            z-index: 1;
             position: relative;
+            z-index: 1;
         }
 
         .team__name,
         .user__name {
             display: block;
-            font-weight: 600;
             font-size: 16px;
+            font-weight: 600;
             max-width: 85%;
             overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             text-decoration: none;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         .team__name {
+            float: left;
             line-height: 22px;
             margin-top: -2px;
-            float: left;
         }
 
         .user__name {
             @include single-transition(all, .1s, linear);
+            @include alpha-property(color, $white, .8);
             font-size: 14px;
-            line-height: 18px;
             font-weight: 400;
-            color: #eee;
-            color: rgba(#fff, .8);
+            line-height: 18px;
         }
 
         > .nav {
             > li {
                 > a {
+                    background: none;
                     float: right;
-                    background: none !important;
                     padding: 2px;
+                }
 
-                    &.dropdown-toggle {
-                        line-height: 1.8;
-                        font-size: 1em;
-                        color: #fff;
-                    }
+                .dropdown-toggle {
+                    color: $white;
+                    font-size: 1em;
+                    line-height: 1.8;
                 }
             }
         }
     }
+
     .search__clear {
         display: none;
     }
@@ -250,27 +246,29 @@
 }
 
 .channel-header {
-    width: 100%;
     border-left: none;
     font-size: 14px;
     line-height: 56px;
+    width: 100%;
 
     #member_popover {
-        width: 50px;
-        color: #999;
+        color: #999999;
         cursor: pointer;
+        width: 50px;
 
         .fa {
-            margin-left: 4px;
             font-size: 16px;
+            margin-left: 4px;
         }
     }
 
     &.alt {
         margin: 0;
+
         th {
             font-weight: normal !important;
         }
+
         td {
             border: none;
         }
@@ -278,37 +276,39 @@
 
     th {
         text-align: center;
+
         &:first-child {
-            text-align: left !important;
             border-left: none;
-            width: 100%;
             padding-left: 1em;
+            text-align: left !important;
+            width: 100%;
         }
+
         &:last-child {
             width: 8.9%;
         }
     }
 
     td {
-        padding: 5px 25px 5px !important;
         font-size: 13px;
+        padding: 5px 25px 5px !important;
         text-align: center !important;
+
         &:first-child {
             text-align: left !important;
         }
     }
 
     .heading {
-        margin: 0;
-        color: #555;
+        color: #555555;
+        display: inline-block;
         font-size: 1.3em;
         font-weight: 600;
+        margin: 0 4px 0 0;
+        max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
-        max-width: 100%;
-        display: inline-block;
         vertical-align: middle;
-        margin-right: 4px;
     }
 
     .caret {
@@ -318,13 +318,13 @@
     .more {
         color: #81848b;
         display: inline-block;
-        vertical-align: top;
-        text-transform: capitalize;
         font-size: 13px;
+        text-transform: capitalize;
+        vertical-align: top;
     }
 
     .disabled {
-        color: #999;
+        color: #999999;
     }
 }
 
@@ -342,11 +342,11 @@
 
 .channel-header__links {
     font-family: 'Open Sans', sans-serif;
+    font-size: 22px;
     height: 30px;
-    width: 24px;
     line-height: 26px;
     margin-right: 9px;
-    font-size: 22px;
+    width: 24px;
 
     .channel__wrap.move--left & {
         position: absolute;
@@ -355,14 +355,15 @@
     }
 
     > a {
-        color: inherit;
-        text-decoration: none;
         @include opacity(.6);
         @include single-transition(all, .1s, ease-in);
+        color: inherit;
+        text-decoration: none;
 
         &:hover {
             @include opacity(1);
         }
+
         &:focus {
             color: inherit;
         }
diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss
index 307060ac3..e2180c64d 100644
--- a/webapp/sass/layout/_markdown.scss
+++ b/webapp/sass/layout/_markdown.scss
@@ -16,8 +16,8 @@
 #post-list {
     .markdown-inline-img {
         -moz-force-broken-image-icon: 1;
-        max-height: 500px;
         height: 500px;
+        max-height: 500px;
     }
 }
 
@@ -26,33 +26,33 @@
 
     pre {
         margin-bottom: 0;
-        word-break: normal;
         overflow: auto;
+        word-break: normal;
         word-wrap: normal;
     }
 }
 
 .post-body--code__language {
-    -webkit-transform: translate3d(0,0,0);
-    position: absolute;
-    top: 0;
-    right: 0;
-    color: #fff;
+    @include translate3d(0, 0, 0);
     background: #21586d;
-    padding: 4px 10px 5px 10px;
+    color: $white;
     font-size: 13px;
     opacity: .7;
+    padding: 4px 10px 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
     z-index: 5;
 }
 
 .post__body {
     hr {
-        height: 4px;
-        padding: 0;
-        margin: 15px 0 16px;
+        @include opacity(.2);
         background-color: #e7e7e7;
         border: 0 none;
-        @include opacity(.2);
+        height: 4px;
+        margin: 15px 0 16px;
+        padding: 0;
     }
 
     code {
@@ -67,50 +67,53 @@
 }
 
 .markdown__table {
-    background: #fff;
+    background: $white;
     margin: 5px 0 10px;
 
     th,
     td {
-        padding: 6px 13px;
         border: 1px solid #ddd;
+        padding: 6px 13px;
     }
 
     tbody tr {
-        background: #fff;
+        background: $white;
 
         &:nth-child(2n) {
             background-color: #f8f8f8;
         }
     }
 }
+
 blockquote {
     border: none;
-    position: relative;
     font-size: 16px;
-    padding: 10px 10px 10px 38px;
     margin-bottom: 0;
+    padding: 10px 10px 10px 38px;
+    position: relative;
 
     &:before {
+        @include opacity(.6);
+        content: '\f10d';
+        display: inline-block;
         font-family: FontAwesome;
-        font-weight: normal;
+        font-size: 20px;
         font-style: normal;
-        display: inline-block;
-        text-decoration: inherit;
-        content: '\f10d';
+        font-weight: normal;
         left: 8px;
-        top: 5px;
         position: absolute;
-        font-size: 20px;
-        @include opacity(.6);
+        text-decoration: inherit;
+        top: 5px;
     }
 }
+
 pre {
     border: none;
-    margin: 5px 0;
     color: inherit;
+    margin: 5px 0;
 }
+
 code {
-    background: #fff;
+    background: $white;
     color: inherit;
 }
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 65c62cb17..87e4b4d27 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -7,14 +7,14 @@
 
 #navbar {
     input {
-        margin: 0px 5px 0px 2px;
+        margin: 0 5px 0 2px;
     }
 
     .navbar-default {
-        position: absolute;
+        background: $primary-color;
         border: none;
         min-height: 45px;
-        background: $color--primary;
+        position: absolute;
 
         .navbar-nav {
             > li {
@@ -30,19 +30,19 @@
         }
 
         .navbar-toggle {
-            width: 43px;
-            float: left;
             border-color: transparent;
             border-radius: 0;
+            fill: $white;
+            float: left;
+            height: 44px;
+            line-height: 48px;
             margin: 0;
             padding: 0 10px;
-            line-height: 48px;
-            height: 44px;
+            width: 43px;
             z-index: 5;
-            fill: #fff;
 
             .icon-bar {
-                background: #fff;
+                background: $white;
                 width: 21px;
             }
 
@@ -51,7 +51,7 @@
             }
 
             .icon--white {
-                color: #fff;
+                color: $white;
             }
 
             &:hover,
@@ -62,16 +62,16 @@
         }
 
         .navbar-brand {
-            padding: 0 .5em;
-            height: 45px;
-            line-height: 45px;
             float: none;
             font-size: 16px;
+            height: 45px;
+            line-height: 45px;
+            padding: 0 .5em;
 
             .heading {
-                margin-right: 3px;
+                color: $white;
                 font-weight: 600;
-                color: #fff;
+                margin-right: 3px;
             }
 
             .header-dropdown__icon {
@@ -79,36 +79,36 @@
             }
 
             .dropdown-toggle {
-                color: #fff;
+                color: $white;
             }
 
             .description {
+                color: $white;
                 display: inline-block;
                 margin-right: .5em;
-                color: #fff;
 
                 &.info-popover {
-                    width: 19px;
-                    height: 19px;
-                    background: url('../images/info__icon.png');
                     @include background-size(100% 100%);
-                    vertical-align: middle;
-                    top: -1px;
-                    position: relative;
+                    background: url('../images/info__icon.png');
                     cursor: pointer;
+                    height: 19px;
+                    position: relative;
+                    top: -1px;
+                    vertical-align: middle;
+                    width: 19px;
                 }
             }
         }
     }
 
     .sidebar-channel {
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
 
         span {
-            white-space: nowrap;
             margin-left: 2px;
+            white-space: nowrap;
         }
     }
 
@@ -117,11 +117,13 @@
     }
 
     .more-channel-table {
-        width: 100%;
         border: 1px solid #dbdbdc;
+        width: 100%;
+
         td {
             padding: 7px;
         }
+
         button {
             width: 110px;
         }
@@ -129,9 +131,9 @@
 }
 
 .badge-notify {
-    background: red;
-    position: absolute;
+    background: $red;
     left: 4px;
+    position: absolute;
     top: 3px;
     z-index: 100;
 }
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 595577564..529f73995 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -27,8 +27,8 @@
 
     .post {
         &.post--root {
-            padding-bottom: 1.2em;
             border-bottom: 1px solid #ddd;
+            padding-bottom: 1.2em;
 
             .post__body {
                 background: transparent !important;
@@ -37,8 +37,8 @@
 
         .post__header {
             .col__reply {
-                top: 0;
                 text-align: right;
+                top: 0;
             }
         }
 
@@ -48,13 +48,13 @@
     }
 
     hr {
-        margin-bottom: 0;
         border: none;
+        margin-bottom: 0;
     }
 
     .post-create__container {
-        width: 100%;
         margin-top: 10px;
+        width: 100%;
 
         .textarea-wrapper {
             min-height: 100px;
@@ -70,48 +70,46 @@
 
         .msg-typing {
             @include opacity(.7);
+            display: block;
             float: left;
-            margin-top: 3px;
             font-size: 13px;
-            line-height: 20px;
-            min-width: 1px;
-            display: block;
             height: 20px;
+            line-height: 20px;
+            margin-top: 3px;
             max-width: 230px;
+            min-width: 1px;
         }
 
         .post-create-footer {
-            width: 100%;
             padding: 5px 0 10px;
+            width: 100%;
         }
 
         .post-right-comments-upload-in-progress {
-            padding: 6px 0;
             color: #a8adb7;
             margin-right: 10px;
+            padding: 6px 0;
         }
     }
 }
+
 .post-right-header {
-    font-size: 1em;
-    text-transform: uppercase;
+    border-bottom: $border-gray;
     color: #999;
+    font-size: 1em;
     font-weight: 400;
-    color: #888;
     height: 39px;
     padding: 10px 10px 0 15px;
-    border-bottom: $border-gray;
+    text-transform: uppercase;
 }
 
 .post-right-root-container {
-    padding: 5px 10px;
     border-bottom: $border-gray;
-}
+    padding: 5px 10px;
 
-.post-right-root-container {
     ul {
-        padding-left: 0;
         margin-bottom: 2px;
+        padding-left: 0;
     }
 }
 
@@ -131,19 +129,19 @@
 }
 
 .post-right-create-comment-container {
-    padding: 5px;
-    margin-bottom: 18px;
-    position: absolute;
     bottom: 0;
     left: 0;
+    margin-bottom: 18px;
+    padding: 5px;
+    position: absolute;
     width: 100%;
 }
 
 .post-right__scroll {
-    position: relative;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
     @include flex(1 1 auto);
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    position: relative;
 
     .file-preview__container {
         margin-top: 5px;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index ce055035d..9d5be239a 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -1,19 +1,20 @@
 @charset 'UTF-8';
 
 .custom-textarea {
-    white-space: pre-wrap;
-    word-wrap: break-word;
     background: transparent;
-    border: 1px solid #ccc;
-    position: absolute;
-    top: 0px;
+    border: 1px solid #cccccc;
     height: auto;
-    resize: none;
     line-height: 20px;
     min-height: 36px;
     overflow-x: hidden;
+    position: absolute;
+    resize: none;
+    top: 0px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+
     &:focus {
-        border-color: #ccc;
+        border-color: #cccccc;
         box-shadow: none;
     }
 }
@@ -24,23 +25,23 @@
 }
 
 .textarea-div {
-    white-space: pre-wrap;
-    word-wrap: normal;
+    border: 0;
     color: rgba(0,0,0,0);
-    position: absolute;
-    top: 0px;
-    word-break: break-word;
+    height: auto;
     left: 1px;
     line-height: 20px;
     min-height: 36px;
-    height: auto;
-    border: 0;
+    position: absolute;
+    top: 0px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    word-wrap: normal;
 }
 
 body.ios {
     .textarea-div {
-        padding: 7px 17px 7px 15px;
         -webkit-overflow-scrolling: auto;
+        padding: 7px 17px 7px 15px;
     }
 }
 
@@ -49,133 +50,146 @@ body.ios {
 }
 
 .textarea-wrapper {
+    min-height: 36px;
     position: relative;
+
     .textbox-preview-area {
+        box-shadow: none;
+        left: 0;
         position: absolute;
-        z-index: 2;
         top: 0;
-        left: 0;
-        box-shadow: none;
         white-space: normal;
+        z-index: 2;
     }
+
     .help__text {
-        right: 0;
-        position: absolute;
-        z-index: 3;
         bottom: -23px;
-        font-size: 13px;
         cursor: pointer;
+        font-size: 13px;
+        position: absolute;
+        right: 0;
+        z-index: 3;
     }
+
     .textbox-preview-link {
         margin-right: 8px;
     }
-    min-height: 36px;
 }
 
 .help_format_text {
-    display: none !important;
-    position: absolute;
+    @include opacity(0);
+    @include single-transition(all .2s ease);
     bottom: -23px;
-    left: 0px;
+    display: none !important;
+    font-size: .85em;
+    left: 0;
     overflow: hidden;
+    position: absolute;
     text-overflow: ellipsis;
-    font-size: .85em;
-    @include opacity(0);
-    @include single-transition(all .2s ease);
 
     b,
     i,
     code {
         margin-right: 3px;
     }
+
     .textbox-preview-link {
-        font-size: 13px;
         cursor: pointer;
+        font-size: 13px;
         margin-left: 15px;
     }
 }
 
 .date-separator,
 .new-separator {
-    text-align: center;
     height: 2em;
     margin: 0;
     position: relative;
+    text-align: center;
     z-index: 0;
+
     &:before,
     &:after {
         content: '';
+        display: none;
         height: 1em;
-        position: absolute;
         left: 0;
+        position: absolute;
         width: 100%;
-        display: none;
     }
+
     &:before {
         bottom: 0;
     }
+
     &:after {
         top: 0;
     }
+
     &.hovered--after {
         &:before {
             background: #f5f5f5;
             display: block;
         }
     }
+
     &.hovered--before {
         &:after {
             background: #f5f5f5;
             display: block;
         }
     }
+
     .separator__hr {
-        border-color: #ccc;
+        border-color: #cccccc;
         margin: 0;
         position: relative;
-        z-index: 5;
         top: 1em;
+        z-index: 5;
     }
+
     .separator__text {
-        line-height: 2em;
-        color: #555;
-        background: #fff;
+        @include border-radius(50px);
+        background: #ffffff;
+        color: #555555;
         display: inline-block;
-        padding: 0 1em;
+        font-size: 13px;
         font-weight: 700;
-        @include border-radius(50px);
+        line-height: 2em;
+        padding: 0 1em;
         position: relative;
         z-index: 5;
-        font-size: 13px;
     }
 }
+
 .new-separator {
     .separator__hr {
         border-color: #ffaf53;
     }
+
     .separator__text {
-        color: #f80;
+        color: #ff8800;
         font-weight: normal;
     }
 }
 
 .file-overlay {
+    color: #ffffff;
+    font-size: em(20px);
+    font-weight: 600;
+    height: 100%;
+    left: 0;
     position: absolute;
+    text-align: center;
     top: 0;
-    left: 0;
     width: 100%;
-    height: 100%;
-    text-align: center;
-    color: #fff;
-    font-size: em(20px);
-    font-weight: 600;
     z-index: 6;
 
     .overlay__indent {
-        background-color: rgba(0, 0, 0, .6);
-        position: relative;
-        height: 100%;
         @include clearfix;
+        @include alpha-property(background-color, $black, .6);
+        height: 100%;
+        position: relative;
     }
 
     &.center-file-overlay {
@@ -186,11 +200,13 @@ body.ios {
 
     &.right-file-overlay {
         font-size: em(18px);
+
         .overlay__circle {
-            width: 300px;
             height: 300px;
             margin: -150px 0 0 -150px;
+            width: 300px;
         }
+
         .overlay__files {
             margin: 60px auto 15px;
             width: 150px;
@@ -198,16 +214,15 @@ body.ios {
     }
 
     .overlay__circle {
-        background: #111;
-        background: rgba(black, .7);
-        width: 370px;
+        @include border-radius(500px);
+        @include alpha-property(background, $black, .7);
         height: 370px;
+        left: 50%;
         margin: -185px 0 0 -185px;
-        @include border-radius(500px);
+        pointer-events: none;
         position: absolute;
         top: 50%;
-        left: 50%;
-        pointer-events: none;
+        width: 370px;
     }
 
     .overlay__files {
@@ -216,11 +231,11 @@ body.ios {
     }
 
     .overlay__logo {
-        position: absolute;
-        left: 50%;
+        @include opacity(.3);
         bottom: 30px;
+        left: 50%;
         margin-left: -50px;
-        @include opacity(.3);
+        position: absolute;
     }
 
     .fa {
@@ -232,62 +247,64 @@ body.ios {
 
 #post-list {
     @include flex(1 1 auto);
-    position: relative;
-    overflow-y: hidden;
     height: 100%;
+    overflow-y: hidden;
+    position: relative;
 
     .inactive {
         display: none;
     }
 
     .post-list-holder-by-time {
-        background: #fff;
+        -webkit-overflow-scrolling: touch;
+        background: #ffffff;
+        height: 100%;
         overflow-y: scroll;
-        width: 100%;
         padding: 1em 0 0;
         position: absolute;
-        height: 100%;
-        -webkit-overflow-scrolling: touch;
+        width: 100%;
+
         &.active {
             display: inline;
         }
     }
 
     .more-messages-text {
-        margin: 5px 0 10px;
-        display: block;
-        text-align: center;
-        outline: none;
         border: none;
+        display: block;
         font-size: 13px;
+        margin: 5px 0 10px;
+        outline: none;
+        text-align: center;
     }
+
     .beginning-messages-text {
-        margin-top: 2px;
-        margin-bottom: 5px;
+        color: grey;
         display: block;
+        margin-bottom: 5px;
+        margin-top: 2px;
         text-align: center;
-        color: grey;
     }
 }
 
 .post-list__timestamp {
-    position: absolute;
-    top: 8px;
-    left: 50%;
-    z-index: 50;
-    width: 120px;
-    text-align: center;
-    background: $color--primary;
-    color: #fff;
     @include border-radius(3px);
-    font-size: 12px;
-    line-height: 25px;
-    margin-left: -60px;
-    -webkit-font-smoothing: initial;
+    @include opacity(0);
     @include single-transition(all, .6s, ease);
     @include translateY(-45px);
-    @include opacity(0);
+    @include font-smoothing(initial);
+    background: $primary-color;
+    color: $white;
     display: none;
+    font-size: 12px;
+    left: 50%;
+    line-height: 25px;
+    margin-left: -60px;
+    position: absolute;
+    text-align: center;
+    top: 8px;
+    width: 120px;
+    z-index: 50;
 
     &.scrolling {
         @include translateY(0);
@@ -296,147 +313,162 @@ body.ios {
 }
 
 .post-list__arrows {
+    @include opacity(0);
+    @include single-transition(all, .6s);
     background-repeat: no-repeat;
-    width: 40px;
-    height: 40px;
-    text-align: center;
-    fill: #444;
-    position: absolute;
     bottom: 0;
+    display: none;
+    fill: #444444;
+    height: 40px;
     left: 9px;
+    position: absolute;
+    text-align: center;
+    width: 40px;
     z-index: 50;
-    @include opacity(0);
-    @include single-transition(all, .6s);
-    display: none;
 
     svg {
         color: inherit;
-        width: 28px;
         height: 28px;
+        width: 28px;
     }
 
     &.scrolling {
-        display: block;
         @include opacity(1);
+        display: block;
     }
 }
 
 .post-create__container {
     form {
-        width: 100%;
-        padding: .5em 14px 0;
         margin: 0 auto;
         max-width: 1028px;
+        padding: .5em 14px 0;
+        width: 100%;
     }
+
     .post-create-body {
-        position: relative;
         padding: 0 0 2px;
+        position: relative;
+
         .post-body__cell {
-            vertical-align: top;
             position: relative;
+            vertical-align: top;
+
             &.scroll {
                 .btn-file {
                     right: 15px;
                 }
+
                 .custom-textarea {
                     padding-right: 43px;
                 }
             }
         }
+
         .send-button {
-            display: none;
+            @include single-transition(all, .15s);
             cursor: pointer;
-            padding-right: 4px;
-            width: 45px;
-            height: 37px;
+            display: none;
             font-size: 18px;
+            height: 37px;
             line-height: 37px;
-            vertical-align: bottom;
+            padding-right: 4px;
             text-align: center;
-            @include single-transition(all, .15s);
+            vertical-align: bottom;
+            width: 45px;
+
             &:active {
                 @include opacity(.75);
             }
         }
+
         .custom-textarea {
-            padding-top: 8px;
-            padding-right: 28px;
-            max-height: 162px !important;
             line-height: 1.5;
+            max-height: 162px !important;
+            padding-right: 28px;
+            padding-top: 8px;
         }
+
         .textarea-div {
-            padding-top: 8px;
-            padding-right: 30px;
+            line-height: 1.5;
             max-height: 163px !important;
             overflow: auto;
-            line-height: 1.5;
+            padding-right: 30px;
+            padding-top: 8px;
         }
+
         .btn-file {
-            right: 0;
-            position: absolute;
-            top: 1px;
-            color: #444;
             @include opacity(.5);
             @include single-transition(all, .15s);
+            color: #444444;
             font-size: 16px;
             padding: 7px 9px 6px;
+            position: absolute;
+            right: 0;
+            top: 1px;
+
             &:hover,
             &:active {
                 @include opacity(.9);
                 box-shadow: none;
             }
         }
+
         textarea {
             box-shadow: none;
         }
     }
+
     .post-create-footer {
         @include clearfix;
-        padding: 3px 0 0 0;
         font-size: 13px;
+        padding: 3px 0 0 0;
         .control-label {
             font-weight: normal;
             margin-bottom: 0;
-            top: -5px;
             position: relative;
+            top: -5px;
         }
     }
+
     .msg-typing {
-        display: block;
         @include opacity(.7);
-        white-space: nowrap;
+        display: block;
+        font-size: .95em;
+        height: 20px;
         margin-bottom: 5px;
         overflow: hidden;
-        font-size: .95em;
         text-overflow: ellipsis;
-        height: 20px;
+        white-space: nowrap;
     }
 }
 
 .post-list__table {
     display: table;
+    height: 100%;
+    min-height: 100%;
     table-layout: fixed;
     width: 100%;
-    min-height: 100%;
-    height: 100%;
+
     .post-list__content {
         display: table-cell;
         vertical-align: bottom;
+
         .dropdown-menu {
             &.bottom {
-                top: auto;
                 bottom: 25px;
+                top: auto;
             }
         }
     }
 }
 
 .post {
-    word-wrap: break-word;
+    @include legacy-pie-clearfix;
+    max-width: 100%;
     padding: 8px .5em 0 1em;
     position: relative;
-    max-width: 100%;
-    @include legacy-pie-clearfix;
+    word-wrap: break-word;
 
     &:hover {
         .dropdown,
@@ -445,6 +477,7 @@ body.ios {
         .post__remove {
             visibility: visible;
         }
+
         .permalink-icon {
             visibility: visible;
         }
@@ -455,9 +488,9 @@ body.ios {
     }
 
     p {
-        margin: 0;
-        line-height: 1.6em;
         font-size: .97em;
+        line-height: 1.6em;
+        margin: 0;
         white-space: pre-wrap;
 
         &:last-child {
@@ -488,8 +521,8 @@ body.ios {
             }
 
             .post__header {
-                margin: 0;
                 height: 0;
+                margin: 0;
 
                 .col__name {
                     display: none;
@@ -501,20 +534,13 @@ body.ios {
             }
 
             .post__time {
-                top: 24px;
-            }
-
-            .post__time {
-                font: normal normal normal FontAwesome;
-                text-rendering: auto;
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                position: absolute;
-                top: -2px;
-                left: -7px;
+                @include opacity(0);
                 font-size: 11px;
+                left: -7px;
                 line-height: 37px;
-                @include opacity(0);
+                position: absolute;
+                text-rendering: auto;
+                top: -2px;
             }
         }
 
@@ -528,11 +554,9 @@ body.ios {
                     display: none;
                 }
             }
-        }
 
-        &.post--comment {
             .post__body {
-                border-left: 4px solid #ddd;
+                border-left: 4px solid #dddddd;
             }
         }
     }
@@ -562,12 +586,12 @@ body.ios {
     }
 
     .post__content {
+        display: table;
         margin: 0 auto;
-        position: relative;
         max-width: 1000px;
-        display: table;
-        width: 100%;
+        position: relative;
         table-layout: fixed;
+        width: 100%;
 
         > div {
             display: table-cell;
@@ -576,9 +600,9 @@ body.ios {
     }
 
     .post__header {
-        padding: 0;
         list-style: none;
         margin-bottom: 2px;
+        padding: 0;
 
         li {
             display: inline-block;
@@ -586,12 +610,12 @@ body.ios {
         }
 
         .col__name {
-            margin-right: 7px;
             font-weight: 600;
+            margin-right: 7px;
 
             .user-popover {
-                max-width: 200px;
                 @include clearfix;
+                max-width: 200px;
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
@@ -601,8 +625,8 @@ body.ios {
             position: absolute;
             right: 0;
             top: 30px;
-            width: 65px;
             white-space: nowrap;
+            width: 65px;
         }
 
         .permalink-popover {
@@ -616,27 +640,29 @@ body.ios {
             .btn {
                 font-size: 13px;
                 height: 30px;
-                padding: 0 8px;
                 line-height: 30px;
+                padding: 0 8px;
             }
         }
     }
 
     .post__img {
         width: 46px;
+
         img {
-            width: 36px;
+            @include border-radius(50px);
             height: 36px;
             vertical-align: inherit;
-            @include border-radius(50px);
+            width: 36px;
         }
     }
 
     .post__embed-container {
+        @include single-transition(max-height, .5, ease);
         display: block;
         max-height: 1000px;
-        transition: max-height .5s ease;
         overflow: hidden;
+
         &[hidden] {
             max-height: 0;
         }
@@ -644,15 +670,15 @@ body.ios {
 
     .dropdown {
         display: inline-block;
-        visibility: hidden;
         margin-right: 5px;
         top: -1px;
+        visibility: hidden;
 
         .dropdown-menu {
-            right: 0;
             left: auto;
             min-width: 130px;
             padding: 2px 0;
+            right: 0;
 
             li {
                 display: block;
@@ -667,27 +693,27 @@ body.ios {
     .post__dropdown {
         &:after {
             content: '[...]';
-            top: -1px;
             position: relative;
+            top: -1px;
         }
     }
 
     .post__remove {
-        font-family: 'Open Sans', sans-serif;
-        position: relative;
+        @include opacity(.5);
+        color: inherit;
         display: inline-block;
-        vertical-align: top;
-        right: 15px;
-        top: -5px;
+        font-family: 'Open Sans', sans-serif;
         font-size: 20px;
-        width: 20px;
+        font-weight: 600;
         height: 20px;
         line-height: 20px;
-        font-weight: 600;
-        visibility: hidden;
-        color: inherit;
-        @include opacity(.5);
+        position: relative;
+        right: 15px;
         text-decoration: none;
+        top: -5px;
+        vertical-align: top;
+        visibility: hidden;
+        width: 20px;
 
         &:hover {
             @include opacity(.8);
@@ -695,10 +721,10 @@ body.ios {
     }
 
     .post__body {
-        word-wrap: break-word;
-        padding: .2em .5em;
         @include legacy-pie-clearfix;
+        padding: .2em .5em;
         width: calc(100% - 75px);
+        word-wrap: break-word;
 
         p {
             margin: 0 0 .4em;
@@ -725,6 +751,7 @@ body.ios {
             p {
                 margin-bottom: 0;
             }
+
             li ul,
             li ol {
                 padding: 0 0 0 20px;
@@ -745,8 +772,8 @@ body.ios {
             }
 
             li input[type='checkbox']:disabled {
-                vertical-align: top;
                 cursor: default;
+                vertical-align: top;
             }
         }
 
@@ -766,21 +793,21 @@ body.ios {
     }
 
     .post__link {
-        margin: 2px 0 5px;
         font-size: 13px;
-        text-overflow: ellipsis;
+        margin: 2px 0 5px;
         overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
     }
 
     .post__embed-visibility {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
         cursor: pointer;
+        display: inline-block;
         font: normal normal normal 14px/1 FontAwesome;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
         margin: 5px 0 10px;
-        display: inline-block;
+        text-rendering: auto;
 
         &:hover {
             text-decoration: none;
@@ -807,8 +834,8 @@ body.ios {
 
     .post-loading-gif {
         height: 10px;
-        width: 10px;
         margin-top: 6px;
+        width: 10px;
     }
 
     .post-fail {
@@ -816,12 +843,12 @@ body.ios {
     }
 
     .post-waiting {
-        color: #999;
+        color: #999999;
     }
 
     .permalink-icon {
+        color: $primary-color;
         display: inline-block;
-        color: $color--primary;
         visibility: hidden;
     }
 
@@ -830,16 +857,16 @@ body.ios {
         margin-right: 6px;
         visibility: hidden;
         svg {
-            width: 18px;
-            top: 3px;
             fill: inherit;
             position: relative;
+            top: 3px;
+            width: 18px;
         }
     }
 
     .comment-icon__container {
-        fill: $color--primary;
         display: inline-block;
+        fill: $primary-color;
         visibility: hidden;
 
         &:focus {
@@ -857,10 +884,10 @@ body.ios {
 
         .comment-icon {
             display: inline-block;
-            top: 2px;
-            position: relative;
-            margin-right: 3px;
             fill: inherit;
+            margin-right: 3px;
+            position: relative;
+            top: 2px;
         }
 
         path {
@@ -869,28 +896,30 @@ body.ios {
     }
 
     .web-embed-data {
-        padding: 2px 0 0 10px;
-        background: #f9f9f9;
-        background: rgba(0, 0, 0, .05);
         @include border-radius(2px);
+        @include alpha-property(background, $black, 0.05);
         height: 50px;
         overflow: hidden;
+        padding: 2px 0 0 10px;
         text-overflow: ellipsis;
+
         .embed-title {
-            margin: 3px 0 1px;
-            color: #555;
+            color: #555555;
             font-weight: 600;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+            margin: 3px 0 1px;
             overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
+
         .embed-description {
+            color: #888888;
             margin: 0;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             overflow: hidden;
-            color: #888;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
+
         .embed-link {
             display: none;
         }
@@ -898,89 +927,104 @@ body.ios {
 }
 
 .bot-indicator {
+    border-radius: 2px;
     font-family: inherit;
     font-size: 11px;
-    padding: 2px 4px;
-    border-radius: 2px;
     font-weight: 600;
     margin: 0 0 0 -4px;
+    padding: 2px 4px;
 }
 
 .attachment {
     .attachment__content {
-        border-width: 1px;
-        border-style: solid;
         border-radius: 4px;
-        padding: 2px 5px;
+        border-style: solid;
+        border-width: 1px;
         margin: 0 0 5px 0;
+        padding: 2px 5px;
     }
+
     .attachment__thumb-pretext {
-        border: 0 none;
         background: transparent;
+        border: none;
+        margin-left: 5px;
     }
+
     .attachment__container {
-        border-left-width: 4px;
         border-left-style: solid;
+        border-left-width: 4px;
         padding: 2px 0 2px 10px;
+
         &.attachment__container--good {
             border-left-color: #00c100;
         }
+
         &.attachment__container--warning {
             border-left-color: #dede01;
         }
+
         &.attachment__container--danger {
             border-left-color: #e40303;
         }
     }
+
     .attachment__body {
         float: left;
-        width: 80%;
-        padding-right: 5px;
         overflow-x: auto;
         overflow-y: hidden;
+        padding-right: 5px;
+        width: 80%;
+
         &.attachment__body--no_thumb {
             width: 100%;
         }
     }
+
     .attachment__text p:last-of-type {
         display: inline-block;
     }
-    .attachment__thumb-pretext {
-        margin-left: 5px;
-    }
+
     .attachment__title {
+        font-size: 16px;
+        height: 22px;
+        line-height: 16px;
         margin: 5px 0;
         padding: 0;
-        line-height: 16px;
-        height: 22px;
-        font-size: 16px;
+
         a {
             font-size: 16px;
         }
     }
+
     .attachment__author-icon {
         @include border-radius(50px);
+        height: 14px;
         margin-right: 5px;
         width: 14px;
-        height: 14px;
     }
+
     .attachment__image {
-        max-width: 100%;
         margin-bottom: 1em;
+        max-width: 100%;
     }
+
     .attachment__thumb-container {
-        width: 20%;
         float: right;
+        width: 20%;
+
         img {
             max-height: 75px;
             max-width: 100%;
         }
     }
+
     .attachment___fields {
         width: 100%;
+
         .attachment___field-caption {
             font-weight: 700;
         }
+
         .attachment___field p {
             margin: 0;
         }
@@ -992,6 +1036,6 @@ body.ios {
 }
 
 .permalink-popover {
-    min-width: 320px;
     margin-left: 50px !important;
+    min-width: 320px;
 }
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;
 }
diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss
index 9438491f9..d11c4edbb 100644
--- a/webapp/sass/layout/_sidebar-menu.scss
+++ b/webapp/sass/layout/_sidebar-menu.scss
@@ -1,69 +1,80 @@
 @charset 'UTF-8';
 
 .sidebar--menu {
-    position: absolute;
-    width: 220px;
-    right: 0;
-    height: 100%;
-    border-right: $border-gray;
-    padding: 0 0 2em 0;
     background: #fafafa;
+    border-right: $border-gray;
     display: none;
+    height: 100%;
+    padding: 0 0 2em;
+    position: absolute;
+    right: 0;
+    width: 220px;
+
     .nav-pills__container {
         padding-top: 5px;
     }
+
     .team__header {
+        @include legacy-pie-clearfix;
         display: none;
         padding: 0 15px;
-        @include legacy-pie-clearfix;
+
         a {
-            color: #fff;
+            color: $white;
         }
+
         .navbar-right {
             font-size: .85em;
             margin: 16px -5px 0;
+
             .dropdown-toggle {
                 padding: 0 10px;
             }
+
             .dropdown-menu {
                 li a {
-                    padding: 3 20px;
                     color: #555;
+                    padding: 3 20px;
                 }
             }
+
             .dropdown__icon {
-                width: 4px;
-                height: 16px;
                 @include background-size(100% 100%);
+                background: url('../images/dropdown-icon.png');
                 display: inline-block;
+                height: 16px;
+                width: 4px;
             }
         }
+
         .team__name {
             float: left;
-            line-height: 50px;
-            font-weight: 600;
             font-size: 1.2em;
+            font-weight: 600;
+            line-height: 50px;
             max-width: 80%;
             overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             text-decoration: none;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
+
     .nav {
         > li {
             > a {
-                font-size: 15px;
                 background: none !important;
                 color: inherit;
+                font-size: 15px;
                 line-height: 40px;
                 padding: 0 15px;
+
                 .fa,
                 .glyphicon {
-                    width: 25px;
-                    text-align: center;
                     left: -5px;
                     position: relative;
+                    text-align: center;
+                    width: 25px;
                 }
             }
         }
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index e1a7d7641..a7b631047 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -1,13 +1,13 @@
 @charset 'UTF-8';
 
 .sidebar--right {
-    position: fixed;
-    width: 400px;
+    @include translateX(400px);
+    background: $white;
     height: 100%;
-    right: 0px;
     padding: 0;
-    background: #fff;
-    @include translateX(400px);
+    position: fixed;
+    right: 0;
+    width: 400px;
 
     .post-body {
         img {
@@ -26,39 +26,39 @@
     }
 
     .sidebar--right__content {
-        height: 100%;
         @include display-flex;
         @include flex-direction(column);
+        height: 100%;
     }
 
     .sidebar--right__back {
-        color: inherit;
         @include opacity(.8);
-        width: 30px;
-        text-align: center;
-        margin: 0 0 0 -14px;
-        font-size: 13px;
+        color: inherit;
         display: inline-block;
+        font-size: 13px;
+        margin: 0 0 0 -14px;
+        text-align: center;
+        width: 30px;
     }
 
     .sidebar-right__body {
+        @include border-radius(2px 0 0 0);
+        @include display-flex;
         @include flex(1 1 auto);
+        @include flex-direction(column);
         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);
+        background-color: $yellow;
+        height: 100%;
+        pointer-events: none;
         position: absolute;
+        width: 100%;
         z-index: 5;
-        pointer-events: none;
     }
 
     .input-group {
@@ -66,17 +66,17 @@
     }
 
     .sidebar--right__close {
-        margin: 11px 0 0 0;
-        width: 22px;
-        height: 22px;
-        opacity: .5;
-        font-size: 22px;
-        line-height: 0;
+        @include single-transition(all, .2s, ease-in);
         background: none;
+        border: none;
         float: right;
+        font-size: 22px;
+        height: 22px;
+        line-height: 0;
+        margin: 11px 0 0;
+        opacity: .5;
         outline: none;
-        border: none;
-        @include single-transition(all, .2s, ease-in);
+        width: 22px;
 
         &:hover,
         &:active {
@@ -90,14 +90,14 @@
     }
 
     .sidebar--right__header {
-        font-size: 1em;
-        text-transform: uppercase;
+        @include flex(0 0 44px);
+        border-bottom: $border-gray;
         color: inherit;
+        font-size: 1em;
         height: 44px;
-        padding: 0 1em;
         line-height: 44px;
-        @include flex(0 0 44px);
-        border-bottom: $border-gray;
+        padding: 0 1em;
+        text-transform: uppercase;
     }
 
     .sidebar--right__subheader {
diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index d6e367218..ffd8dd7dc 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/webapp/sass/layout/_webhooks.scss
@@ -1,11 +1,11 @@
 @charset 'UTF-8';
 
 .webhooks__container {
-    background: rgba(black, .1);
-    border: 1px solid;
     @include border-radius(3px);
-    padding: 0 13px 15px;
+    @include alpha-property(background, $black, .1);
+    border: 1px solid;
     margin-top: 10px;
+    padding: 0 13px 15px;
 }
 
 .webhook__item {
@@ -19,16 +19,16 @@
     }
 
     .webhook__remove {
-        position: absolute;
-        right: -7px;
-        top: 8px;
-        width: 30px;
-        height: 30px;
+        color: #e05f5d;
         font-size: 22px;
         font-weight: bold;
+        height: 30px;
+        position: absolute;
+        right: -7px;
         text-align: center;
         text-decoration: none;
-        color: #e05f5d;
+        top: 8px;
+        width: 30px;
     }
 
     .webhook__url {
-- 
cgit v1.2.3-1-g7c22