PLT-963 - Improving scss structure

13 files changed, 2404 insertions, 0 deletions

diff --git a/web/sass-files/sass/layout/_content.scss b/web/sass-files/sass/layout/_content.scss
new file mode 100644
index 000000000..71bef0d7f
--- /dev/null
+++ b/web/sass-files/sass/layout/_content.scss
@@ -0,0 +1,85 @@
+@charset 'UTF-8';
+
+.inner-wrap {
+    &.move--left {
+        .search-bar__container {
+            display: none;
+        }
+    }
+
+    &.move--right {
+        .search-bar__container {
+            display: none;
+        }
+    }
+}
+
+.app__content {
+    height: 100%;
+    padding-top: 50px;
+    margin-left: 220px;
+    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;
+    width: 100%;
+    z-index: 3;
+}
+
+#archive-link-home {
+    @include flex(0 0 auto);
+    cursor: pointer;
+    padding: 10px 20px;
+    font-size: 13px;
+
+    .fa {
+        font-size: 11px;
+        @include opacity(.7);
+    }
+
+    a {
+        color: inherit;
+    }
+}
+
+.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/web/sass-files/sass/layout/_footer.scss b/web/sass-files/sass/layout/_footer.scss
new file mode 100644
index 000000000..5624e6376
--- /dev/null
+++ b/web/sass-files/sass/layout/_footer.scss
@@ -0,0 +1,30 @@
+@charset 'UTF-8';
+
+.footer-pane {
+    background: #eee;
+    padding-bottom: 1em;
+
+    .footer-link {
+        padding: 0 1.5em;
+
+        &.copyright {
+            color: #999;
+            padding-right: 0;
+        }
+    }
+
+    .footer-site-name {
+        padding: 1.5em 0 1em;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+}
+
+.footer,
+.footer-pane,
+.footer-push {
+    height: 89px;
+}
+
+
diff --git a/web/sass-files/sass/layout/_forms.scss b/web/sass-files/sass/layout/_forms.scss
new file mode 100644
index 000000000..1f51603cc
--- /dev/null
+++ b/web/sass-files/sass/layout/_forms.scss
@@ -0,0 +1,66 @@
+@charset 'UTF-8';
+
+.form-horizontal {
+    .modal-intro {
+        margin: -10px 0 30px;
+    }
+
+    .form__label {
+        text-align: left;
+        padding-right: 3px;
+        font-weight: 600;
+        font-size: 1.1em;
+
+        &.light {
+            font-weight: normal;
+            color: #999;
+            font-size: 1.05em;
+            font-style: italic;
+            padding-top: 2px;
+        }
+    }
+
+    .input__help {
+        color: inherit;
+        margin: 10px 0 0 10px;
+        word-break: break-word;
+        @include opacity(.8);
+
+        &.dark {
+            @include opacity(1);
+        }
+
+        &.error {
+            color: #a94442;
+        }
+    }
+
+    .form-control {
+        font-weight: normal;
+    }
+
+    .form-group {
+        margin-bottom: 25px;
+
+        &.less {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.help-block {
+    font-size: .95em;
+    margin: 10px 0 0;
+    color: #999;
+}
+
+.disabled-input {
+    background-color: #ddd !important;
+}
+
+.form-group {
+    &.form-group--small {
+        margin-bottom: 10px;
+    }
+}
+
diff --git a/web/sass-files/sass/layout/_headers.scss b/web/sass-files/sass/layout/_headers.scss
new file mode 100644
index 000000000..0a6b9f920
--- /dev/null
+++ b/web/sass-files/sass/layout/_headers.scss
@@ -0,0 +1,370 @@
+@charset 'UTF-8';
+
+#channel-header {
+    @include flex(0 0 56px);
+}
+
+.row {
+    &.header {
+        position: relative;
+
+        .channel__wrap & {
+            display: none;
+        }
+    }
+}
+
+.header-dropdown__icon {
+    font-size: 11px;
+    color: inherit;
+    top: 3px;
+}
+
+.channel-header__info {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    > div {
+        display: block;
+        white-space: nowrap;
+        word-break: break-word;
+
+        &.dropdown {
+            max-width: 100%;
+            padding-right: 1em;
+            float: left;
+
+            .header-dropdown__icon {
+                color: #777;
+            }
+
+            a {
+                text-decoration: none;
+            }
+
+            .modal {
+                white-space: normal;
+            }
+        }
+
+        &.description {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-top: 2px;
+            max-height: 45px;
+            .markdown-inline-img {
+                max-height: 45px;
+            }
+        }
+
+        &.popover {
+            white-space: normal;
+        }
+    }
+}
+
+.channel-intro {
+    margin: 0 auto 35px;
+    padding: 0 1em 5px;
+    max-width: 1000px;
+    border-bottom: 1px solid lightgrey;
+
+    .intro-links {
+        margin: 0 1.5em 10px 0;
+        display: inline-block;
+
+        .fa {
+            margin-right: 5px;
+        }
+    }
+
+    .channel-intro-profile {
+        margin-top: 5px;
+        margin-left: 63px;
+    }
+
+    .channel-intro-img {
+        float: left;
+        img {
+            @include border-radius(100px);
+        }
+    }
+
+    .channel-intro__title {
+        font-weight: 600;
+        font-size: 20px;
+        margin-bottom: 15px;
+    }
+
+    .channel-intro__content {
+        background: #f7f7f7;
+        padding: 10px 15px;
+        @include border-radius(3px);
+    }
+    .channel-intro-text {
+        margin-top: 35px;
+    }
+}
+
+// Team Header in Sidebar
+.sidebar--left,
+.sidebar--menu {
+    .team__header {
+        position: relative;
+        padding: 9px 10px;
+        @include legacy-pie-clearfix;
+
+        &:before {
+            @include single-transition(all, .05s, linear);
+            content: '';
+            background: none;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+
+        &:hover {
+            &:before {
+                background: rgba(black, .1);
+            }
+
+            .user__name {
+                color: #fff;
+            }
+
+            .navbar-right {
+                .dropdown-toggle {
+                    @include opacity(1);
+                }
+            }
+        }
+
+        .navbar-right {
+            font-size: .85em;
+            position: absolute;
+            top: 10px;
+            right: 22px;
+            z-index: 5;
+
+            .dropdown-toggle {
+                @include single-transition(all, .1s, linear);
+                padding: 10px;
+                @include opacity(.8);
+            }
+
+            .dropdown-menu {
+                li a {
+                    padding: 3px 20px;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+
+            .dropdown__icon {
+                fill: #fff;
+            }
+        }
+
+        .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);
+            margin-right: 6px;
+        }
+
+        .header__info {
+            color: #fff;
+            @include clearfix;
+            padding-left: 2px;
+            z-index: 1;
+            position: relative;
+        }
+
+        .team__name,
+        .user__name {
+            display: block;
+            font-weight: 600;
+            font-size: 16px;
+            max-width: 85%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-decoration: none;
+        }
+
+        .team__name {
+            line-height: 22px;
+            margin-top: -2px;
+            float: left;
+        }
+
+        .user__name {
+            @include single-transition(all, .1s, linear);
+            font-size: 14px;
+            line-height: 18px;
+            font-weight: 400;
+            color: #eee;
+            color: rgba(#fff, .8);
+        }
+
+        > .nav {
+            > li {
+                > a {
+                    float: right;
+                    background: none !important;
+                    padding: 2px;
+
+                    &.dropdown-toggle {
+                        line-height: 1.8;
+                        font-size: 1em;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    .search__clear {
+        display: none;
+    }
+}
+
+#navbar {
+    .navbar-default {
+        .navbar-toggle {
+            &.menu-toggle {
+                padding: 0 1em;
+            }
+        }
+    }
+}
+
+.channel-header {
+    width: 100%;
+    border-left: none;
+    font-size: 14px;
+    line-height: 56px;
+
+    #member_popover {
+        width: 50px;
+        color: #999;
+        cursor: pointer;
+
+        .fa {
+            margin-left: 4px;
+            font-size: 16px;
+        }
+    }
+
+    &.alt {
+        margin: 0;
+        th {
+            font-weight: normal !important;
+        }
+        td {
+            border: none;
+        }
+    }
+
+    th {
+        text-align: center;
+        &:first-child {
+            text-align: left !important;
+            border-left: none;
+            width: 100%;
+            padding-left: 1em;
+        }
+        &:last-child {
+            width: 8.9%;
+        }
+    }
+
+    td {
+        padding: 5px 25px 5px !important;
+        font-size: 13px;
+        text-align: center !important;
+        &:first-child {
+            text-align: left !important;
+        }
+    }
+
+    .heading {
+        margin: 0;
+        color: #555;
+        font-size: 1.3em;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 4px;
+    }
+
+    .caret {
+        margin-top: 3px;
+    }
+
+    .more {
+        color: #81848b;
+        display: inline-block;
+        vertical-align: top;
+        text-transform: capitalize;
+        font-size: 13px;
+    }
+
+    .disabled {
+        color: #999;
+    }
+}
+
+.channel-header__navbar {
+    font-size: 16px;
+
+    .heading {
+        margin-right: 3px;
+    }
+
+    .header-dropdown__icon {
+        top: 1px;
+    }
+}
+
+.channel-header__links {
+    font-family: 'Open Sans', sans-serif;
+    height: 30px;
+    width: 24px;
+    line-height: 26px;
+    margin-right: 9px;
+    font-size: 22px;
+
+    .channel__wrap.move--left & {
+        position: absolute;
+        right: -400px;
+        top: 14px;
+    }
+
+    > a {
+        color: inherit;
+        text-decoration: none;
+        @include opacity(.6);
+        @include single-transition(all, .1s, ease-in);
+
+        &:hover {
+            @include opacity(1);
+        }
+        &:focus {
+            color: inherit;
+        }
+    }
+}
diff --git a/web/sass-files/sass/layout/_markdown.scss b/web/sass-files/sass/layout/_markdown.scss
new file mode 100644
index 000000000..307060ac3
--- /dev/null
+++ b/web/sass-files/sass/layout/_markdown.scss
@@ -0,0 +1,116 @@
+@charset 'UTF-8';
+
+.markdown__heading {
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+.markdown__paragraph-inline {
+    display: inline;
+
+    + .markdown__paragraph-inline {
+        margin-left: 4px;
+    }
+}
+
+#post-list {
+    .markdown-inline-img {
+        -moz-force-broken-image-icon: 1;
+        max-height: 500px;
+        height: 500px;
+    }
+}
+
+.post-body--code {
+    position: relative;
+
+    pre {
+        margin-bottom: 0;
+        word-break: normal;
+        overflow: auto;
+        word-wrap: normal;
+    }
+}
+
+.post-body--code__language {
+    -webkit-transform: translate3d(0,0,0);
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #fff;
+    background: #21586d;
+    padding: 4px 10px 5px 10px;
+    font-size: 13px;
+    opacity: .7;
+    z-index: 5;
+}
+
+.post__body {
+    hr {
+        height: 4px;
+        padding: 0;
+        margin: 15px 0 16px;
+        background-color: #e7e7e7;
+        border: 0 none;
+        @include opacity(.2);
+    }
+
+    code {
+        white-space: pre;
+    }
+
+    .codespan__pre-wrap {
+        code {
+            white-space: pre-wrap;
+        }
+    }
+}
+
+.markdown__table {
+    background: #fff;
+    margin: 5px 0 10px;
+
+    th,
+    td {
+        padding: 6px 13px;
+        border: 1px solid #ddd;
+    }
+
+    tbody tr {
+        background: #fff;
+
+        &:nth-child(2n) {
+            background-color: #f8f8f8;
+        }
+    }
+}
+blockquote {
+    border: none;
+    position: relative;
+    font-size: 16px;
+    padding: 10px 10px 10px 38px;
+    margin-bottom: 0;
+
+    &:before {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+        text-decoration: inherit;
+        content: '\f10d';
+        left: 8px;
+        top: 5px;
+        position: absolute;
+        font-size: 20px;
+        @include opacity(.6);
+    }
+}
+pre {
+    border: none;
+    margin: 5px 0;
+    color: inherit;
+}
+code {
+    background: #fff;
+    color: inherit;
+}
diff --git a/web/sass-files/sass/layout/_module.scss b/web/sass-files/sass/layout/_module.scss
new file mode 100644
index 000000000..39ab2c6f8
--- /dev/null
+++ b/web/sass-files/sass/layout/_module.scss
@@ -0,0 +1,13 @@
+// Only for combining all the files in this folder
+@import 'content';
+@import 'footer';
+@import 'forms';
+@import 'headers';
+@import 'markdown';
+@import 'navigation';
+@import 'post';
+@import 'post-right';
+@import 'sidebar-left';
+@import 'sidebar-menu';
+@import 'sidebar-right';
+@import 'webhooks';
diff --git a/web/sass-files/sass/layout/_navigation.scss b/web/sass-files/sass/layout/_navigation.scss
new file mode 100644
index 000000000..65c62cb17
--- /dev/null
+++ b/web/sass-files/sass/layout/_navigation.scss
@@ -0,0 +1,137 @@
+@charset 'UTF-8';
+
+.nav > li > a:focus,
+.nav > li > a:hover {
+    background: transparent;
+}
+
+#navbar {
+    input {
+        margin: 0px 5px 0px 2px;
+    }
+
+    .navbar-default {
+        position: absolute;
+        border: none;
+        min-height: 45px;
+        background: $color--primary;
+
+        .navbar-nav {
+            > li {
+                > a {
+                    height: 45px;
+                    padding: 0 1.3em;
+
+                    i {
+                        line-height: 45px;
+                    }
+                }
+            }
+        }
+
+        .navbar-toggle {
+            width: 43px;
+            float: left;
+            border-color: transparent;
+            border-radius: 0;
+            margin: 0;
+            padding: 0 10px;
+            line-height: 48px;
+            height: 44px;
+            z-index: 5;
+            fill: #fff;
+
+            .icon-bar {
+                background: #fff;
+                width: 21px;
+            }
+
+            .glyphicon-search {
+                top: -1px;
+            }
+
+            .icon--white {
+                color: #fff;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background: inherit;
+            }
+        }
+
+        .navbar-brand {
+            padding: 0 .5em;
+            height: 45px;
+            line-height: 45px;
+            float: none;
+            font-size: 16px;
+
+            .heading {
+                margin-right: 3px;
+                font-weight: 600;
+                color: #fff;
+            }
+
+            .header-dropdown__icon {
+                top: 1px;
+            }
+
+            .dropdown-toggle {
+                color: #fff;
+            }
+
+            .description {
+                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;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .sidebar-channel {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        span {
+            white-space: nowrap;
+            margin-left: 2px;
+        }
+    }
+
+    .channel-create-btn {
+        margin-right: 15px;
+    }
+
+    .more-channel-table {
+        width: 100%;
+        border: 1px solid #dbdbdc;
+        td {
+            padding: 7px;
+        }
+        button {
+            width: 110px;
+        }
+    }
+}
+
+.badge-notify {
+    background: red;
+    position: absolute;
+    left: 4px;
+    top: 3px;
+    z-index: 100;
+}
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;
+}
diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss
new file mode 100644
index 000000000..22c905aa6
--- /dev/null
+++ b/web/sass-files/sass/layout/_post.scss
@@ -0,0 +1,997 @@
+@charset 'UTF-8';
+
+.custom-textarea {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: transparent;
+    border: 1px solid #ccc;
+    position: absolute;
+    top: 0px;
+    height: auto;
+    resize: none;
+    line-height: 20px;
+    min-height: 36px;
+    overflow-x: hidden;
+    &:focus {
+        border-color: #ccc;
+        box-shadow: none;
+    }
+}
+
+.bad-connection {
+    background: #ffffac !important;
+    color: #d04444 !important;
+}
+
+.textarea-div {
+    white-space: pre-wrap;
+    word-wrap: normal;
+    color: rgba(0,0,0,0);
+    position: absolute;
+    top: 0px;
+    word-break: break-word;
+    left: 1px;
+    line-height: 20px;
+    min-height: 36px;
+    height: auto;
+    border: 0;
+}
+
+body.ios {
+    .textarea-div {
+        padding: 7px 17px 7px 15px;
+        -webkit-overflow-scrolling: auto;
+    }
+}
+
+.textarea-div::-webkit-scrollbar {
+    display: none;
+}
+
+.textarea-wrapper {
+    position: relative;
+    .textbox-preview-area {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        box-shadow: none;
+        white-space: normal;
+    }
+    .help__text {
+        right: 0;
+        position: absolute;
+        z-index: 3;
+        bottom: -23px;
+        font-size: 13px;
+        cursor: pointer;
+    }
+    .textbox-preview-link {
+        margin-right: 8px;
+    }
+    min-height: 36px;
+}
+
+.help_format_text {
+    display: none !important;
+    position: absolute;
+    bottom: -23px;
+    left: 0px;
+    overflow: hidden;
+    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;
+        margin-left: 15px;
+    }
+}
+
+.date-separator,
+.new-separator {
+    text-align: center;
+    height: 2em;
+    margin: 0;
+    position: relative;
+    z-index: 0;
+    &:before,
+    &:after {
+        content: '';
+        height: 1em;
+        position: absolute;
+        left: 0;
+        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;
+        margin: 0;
+        position: relative;
+        z-index: 5;
+        top: 1em;
+    }
+    .separator__text {
+        line-height: 2em;
+        color: #555;
+        background: #fff;
+        display: inline-block;
+        padding: 0 1em;
+        font-weight: 700;
+        @include border-radius(50px);
+        position: relative;
+        z-index: 5;
+        font-size: 13px;
+    }
+}
+.new-separator {
+    .separator__hr {
+        border-color: #ffaf53;
+    }
+    .separator__text {
+        color: #f80;
+        font-weight: normal;
+    }
+}
+
+.file-overlay {
+    position: absolute;
+    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;
+    }
+
+    &.center-file-overlay {
+        .overlay__indent {
+            margin-left: 220px;
+        }
+    }
+
+    &.right-file-overlay {
+        font-size: em(18px);
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .overlay__circle {
+        background: #111;
+        background: rgba(black, .7);
+        width: 370px;
+        height: 370px;
+        margin: -185px 0 0 -185px;
+        @include border-radius(500px);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        pointer-events: none;
+    }
+
+    .overlay__files {
+        display: block;
+        margin: 75px auto 20px;
+    }
+
+    .overlay__logo {
+        position: absolute;
+        left: 50%;
+        bottom: 30px;
+        margin-left: -50px;
+        @include opacity(.3);
+    }
+
+    .fa {
+        display: inline-block;
+        font-size: 1.1em;
+        margin-right: 8px;
+    }
+}
+
+#post-list {
+    @include flex(1 1 auto);
+    position: relative;
+    overflow-y: hidden;
+    height: 100%;
+
+    .inactive {
+        display: none;
+    }
+
+    .post-list-holder-by-time {
+        background: #fff;
+        overflow-y: scroll;
+        width: 100%;
+        padding: 1em 0 0;
+        position: absolute;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+        &.active {
+            display: inline;
+        }
+    }
+
+    .more-messages-text {
+        margin: 5px 0 10px;
+        display: block;
+        text-align: center;
+        outline: none;
+        border: none;
+        font-size: 13px;
+    }
+    .beginning-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        display: block;
+        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 single-transition(all, .6s, ease);
+    @include translateY(-45px);
+    @include opacity(0);
+    display: none;
+
+    &.scrolling {
+        @include translateY(0);
+        @include opacity(.8);
+    }
+}
+
+.post-list__arrows {
+    background-repeat: no-repeat;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    fill: #444;
+    position: absolute;
+    bottom: 0;
+    left: 9px;
+    z-index: 50;
+    @include opacity(0);
+    @include single-transition(all, .6s);
+    display: none;
+
+    svg {
+        color: inherit;
+        width: 28px;
+        height: 28px;
+    }
+
+    &.scrolling {
+        display: block;
+        @include opacity(1);
+    }
+}
+
+.post-create__container {
+    form {
+        width: 100%;
+        padding: .5em 14px 0;
+        margin: 0 auto;
+        max-width: 1028px;
+    }
+    .post-create-body {
+        position: relative;
+        padding: 0 0 2px;
+        .post-body__cell {
+            vertical-align: top;
+            position: relative;
+            &.scroll {
+                .btn-file {
+                    right: 15px;
+                }
+                .custom-textarea {
+                    padding-right: 43px;
+                }
+            }
+        }
+        .send-button {
+            display: none;
+            cursor: pointer;
+            padding-right: 4px;
+            width: 45px;
+            height: 37px;
+            font-size: 18px;
+            line-height: 37px;
+            vertical-align: bottom;
+            text-align: center;
+            @include single-transition(all, .15s);
+            &:active {
+                @include opacity(.75);
+            }
+        }
+        .custom-textarea {
+            padding-top: 8px;
+            padding-right: 28px;
+            max-height: 162px !important;
+            line-height: 1.5;
+        }
+        .textarea-div {
+            padding-top: 8px;
+            padding-right: 30px;
+            max-height: 163px !important;
+            overflow: auto;
+            line-height: 1.5;
+        }
+        .btn-file {
+            right: 0;
+            position: absolute;
+            top: 1px;
+            color: #444;
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            font-size: 16px;
+            padding: 7px 9px 6px;
+            &: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;
+        .control-label {
+            font-weight: normal;
+            margin-bottom: 0;
+            top: -5px;
+            position: relative;
+        }
+    }
+    .msg-typing {
+        display: block;
+        @include opacity(.7);
+        white-space: nowrap;
+        margin-bottom: 5px;
+        overflow: hidden;
+        font-size: .95em;
+        text-overflow: ellipsis;
+        height: 20px;
+    }
+}
+
+.post-list__table {
+    display: table;
+    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;
+            }
+        }
+    }
+}
+
+.post {
+    word-wrap: break-word;
+    padding: 8px .5em 0 1em;
+    position: relative;
+    max-width: 100%;
+    @include legacy-pie-clearfix;
+
+    &:hover {
+        .dropdown,
+        .comment-icon__container,
+        .post__reply,
+        .post__remove {
+            visibility: visible;
+        }
+        .permalink-icon {
+            visibility: visible;
+        }
+    }
+
+    &.post--highlight {
+        background-color: beige;
+    }
+
+    p {
+        margin: 0;
+        line-height: 1.6em;
+        font-size: .97em;
+        white-space: pre-wrap;
+
+        &:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    span {
+        p:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    &.post--root {
+        .comment-icon__container {
+            visibility: visible;
+        }
+    }
+
+    &.same--root {
+        &.same--user {
+            padding: 0 .5em 0 1em;
+
+            &:hover {
+                .post__time {
+                    @include opacity(.5);
+                }
+            }
+
+            .post__header {
+                margin: 0;
+                height: 0;
+
+                .col__name {
+                    display: none;
+                }
+
+                .col__reply {
+                    top: 6px;
+                }
+            }
+
+            .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;
+                font-size: 11px;
+                line-height: 37px;
+                @include opacity(0);
+            }
+        }
+
+        &.post--comment {
+            .post__link {
+                display: none;
+            }
+
+            .post__img {
+                img {
+                    display: none;
+                }
+            }
+        }
+
+        &.post--comment {
+            .post__body {
+                border-left: 4px solid #ddd;
+            }
+        }
+    }
+
+    &.other--root {
+        .comment-icon__container {
+            &.icon--show {
+                visibility: visible;
+            }
+        }
+
+        &.post--comment {
+            .popover {
+                margin-top: 84px;
+
+                > .arrow {
+                    top: 21px !important;
+                }
+            }
+
+            .post__header {
+                .col__reply {
+                    top: 53px;
+                }
+            }
+        }
+    }
+
+    .post__content {
+        margin: 0 auto;
+        position: relative;
+        max-width: 1000px;
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+    }
+
+    .post__header {
+        padding: 0;
+        list-style: none;
+        margin-bottom: 2px;
+
+        li {
+            display: inline-block;
+            vertical-align: top;
+        }
+
+        .col__name {
+            margin-right: 7px;
+            font-weight: 600;
+
+            .user-popover {
+                max-width: 200px;
+                @include clearfix;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .col__reply {
+            position: absolute;
+            right: 0;
+            top: 30px;
+            width: 65px;
+            white-space: nowrap;
+        }
+
+        .permalink-popover {
+            min-width: 0;
+
+            .popover-content {
+                padding: 5px;
+            }
+
+            .form-control,
+            .btn {
+                font-size: 13px;
+                height: 30px;
+                padding: 0 8px;
+                line-height: 30px;
+            }
+        }
+    }
+
+    .post__img {
+        width: 46px;
+        img {
+            width: 36px;
+            height: 36px;
+            vertical-align: inherit;
+            @include border-radius(50px);
+        }
+    }
+
+    .post__embed-container {
+        display: block;
+        max-height: 1000px;
+        transition: max-height .5s ease;
+        overflow: hidden;
+        &[hidden] {
+            max-height: 0;
+        }
+    }
+
+    .dropdown {
+        display: inline-block;
+        visibility: hidden;
+        margin-right: 5px;
+        top: -1px;
+
+        .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 130px;
+            padding: 2px 0;
+
+            li {
+                display: block;
+            }
+
+            a {
+                padding: 5px 15px;
+            }
+        }
+    }
+
+    .post__dropdown {
+        &:after {
+            content: '[...]';
+            top: -1px;
+            position: relative;
+        }
+    }
+
+    .post__remove {
+        font-family: 'Open Sans', sans-serif;
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        right: 15px;
+        top: -5px;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        font-weight: 600;
+        visibility: hidden;
+        color: inherit;
+        @include opacity(.5);
+        text-decoration: none;
+
+        &:hover {
+            @include opacity(.8);
+        }
+    }
+
+    .post__body {
+        word-wrap: break-word;
+        padding: .2em .5em;
+        @include legacy-pie-clearfix;
+        width: calc(100% - 75px);
+
+        p {
+            margin: 0 0 .4em;
+        }
+
+        p + p {
+            margin-top: 1.4em;
+        }
+
+        li {
+            > p {
+                margin-top: 10px;
+            }
+        }
+
+        img {
+            max-height: 400px;
+        }
+
+        ul,
+        ol {
+            margin-bottom: .4em;
+
+            p {
+                margin-bottom: 0;
+            }
+            li ul,
+            li ol {
+                padding: 0 0 0 20px;
+            }
+
+            li.list-item--task-list ul,
+            li.list-item--task-list ol {
+                margin-left: 20px;
+            }
+
+            li.list-item--task-list ul {
+                padding-left: 0;
+            }
+
+            li:not(.list-item--task-list) li.list-item--task-list,
+            li:not(.list-item--task-list) li.list-item--task-list ~ li {
+                margin-left: -20px;
+            }
+
+            li input[type='checkbox']:disabled {
+                vertical-align: top;
+                cursor: default;
+            }
+        }
+
+        ul li.list-item--task-list,
+        ul li.list-item--task-list ~ li {
+            list-style-type: none;
+        }
+
+        ul li.list-item--task-list ~ li:not(.list-item--task-list) {
+            text-indent: 3px;
+
+            &:before {
+                content: '⦁';
+                margin-right: 8px;
+            }
+        }
+    }
+
+    .post__link {
+        margin: 2px 0 5px;
+        font-size: 13px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .post__embed-visibility {
+        cursor: pointer;
+        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;
+
+        &:hover {
+            text-decoration: none;
+        }
+
+        &:before {
+            content: '\f065';
+            font-size: 14px;
+        }
+
+        &[data-expanded='true']:before {
+            content: '\f066';
+        }
+    }
+
+    .post__time {
+        font-size: .9em;
+    }
+
+    .post__time,
+    &.post--system .post__body {
+        @include opacity(.6);
+    }
+
+    .post-loading-gif {
+        height: 10px;
+        width: 10px;
+        margin-top: 6px;
+    }
+
+    .post-fail {
+        color: #d58a8a;
+    }
+
+    .post-waiting {
+        color: #999;
+    }
+
+    .permalink-icon {
+        display: inline-block;
+        color: $color--primary;
+        visibility: hidden;
+    }
+
+    .post__reply {
+        display: inline-block;
+        margin-right: 6px;
+        visibility: hidden;
+        svg {
+            width: 18px;
+            top: 3px;
+            fill: inherit;
+            position: relative;
+        }
+    }
+
+    .comment-icon__container {
+        fill: $color--primary;
+        display: inline-block;
+        visibility: hidden;
+
+        &:focus {
+            outline: none;
+        }
+
+        &.icon--visible {
+            visibility: visible;
+        }
+
+        svg {
+            height: 17px;
+            width: 17px;
+        }
+
+        .comment-icon {
+            display: inline-block;
+            top: 2px;
+            position: relative;
+            margin-right: 3px;
+            fill: inherit;
+        }
+
+        path {
+            fill: inherit;
+        }
+    }
+
+    .web-embed-data {
+        padding: 2px 0 0 10px;
+        background: #f9f9f9;
+        background: rgba(0, 0, 0, .05);
+        @include border-radius(2px);
+        height: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .embed-title {
+            margin: 3px 0 1px;
+            color: #555;
+            font-weight: 600;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .embed-description {
+            margin: 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            color: #888;
+        }
+        .embed-link {
+            display: none;
+        }
+    }
+}
+
+.bot-indicator {
+    font-family: inherit;
+    font-size: 11px;
+    padding: 2px 4px;
+    border-radius: 2px;
+    font-weight: 600;
+    margin: 0 0 0 -4px;
+}
+
+.attachment {
+    .attachment__content {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 4px;
+        padding: 2px 5px;
+        margin: 0 0 5px 0;
+    }
+    .attachment__thumb-pretext {
+        border: 0 none;
+        background: transparent;
+    }
+    .attachment__container {
+        border-left-width: 4px;
+        border-left-style: solid;
+        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;
+        &.attachment__body--no_thumb {
+            width: 100%;
+        }
+    }
+    .attachment__text p:last-of-type {
+        display: inline-block;
+    }
+    .attachment__thumb-pretext {
+        margin-left: 5px;
+    }
+    .attachment__title {
+        margin: 5px 0;
+        padding: 0;
+        line-height: 16px;
+        height: 22px;
+        font-size: 16px;
+        a {
+            font-size: 16px;
+        }
+    }
+    .attachment__author-icon {
+        @include border-radius(50px);
+        margin-right: 5px;
+        width: 14px;
+        height: 14px;
+    }
+    .attachment__image {
+        max-width: 100%;
+        margin-bottom: 1em;
+    }
+    .attachment__thumb-container {
+        width: 20%;
+        float: right;
+        img {
+            max-height: 75px;
+            max-width: 100%;
+        }
+    }
+    .attachment___fields {
+        width: 100%;
+        .attachment___field-caption {
+            font-weight: 700;
+        }
+        .attachment___field p {
+            margin: 0;
+        }
+    }
+}
+
+.permalink-text {
+    overflow: hidden;
+}
+
+.permalink-popover {
+    min-width: 320px;
+    margin-left: 50px !important;
+}
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;
+}
diff --git a/web/sass-files/sass/layout/_sidebar-menu.scss b/web/sass-files/sass/layout/_sidebar-menu.scss
new file mode 100644
index 000000000..167b24ba0
--- /dev/null
+++ b/web/sass-files/sass/layout/_sidebar-menu.scss
@@ -0,0 +1,72 @@
+@charset 'UTF-8';
+
+.sidebar--menu {
+    position: absolute;
+    width: 220px;
+    right: 0;
+    height: 100%;
+    border-right: $border-gray;
+    padding: 0 0 2em 0;
+    background: #fafafa;
+    display: none;
+    .nav-pills__container {
+        padding-top: 5px;
+    }
+    .team__header {
+        display: none;
+        padding: 0 15px;
+        @include legacy-pie-clearfix;
+        a {
+            color: #fff;
+        }
+        .navbar-right {
+            font-size: .85em;
+            margin: 16px -5px 0;
+            .dropdown-toggle {
+                padding: 0 10px;
+            }
+            .dropdown-menu {
+                li a {
+                    padding: 3 20px;
+                    color: #555;
+                }
+            }
+            .dropdown__icon {
+                background: url('../images/dropdown-icon.png');
+                width: 4px;
+                height: 16px;
+                @include background-size(100% 100%);
+                display: inline-block;
+            }
+        }
+        .team__name {
+            float: left;
+            line-height: 50px;
+            font-weight: 600;
+            font-size: 1.2em;
+            max-width: 80%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-decoration: none;
+        }
+    }
+    .nav {
+        > li {
+            > a {
+                font-size: 15px;
+                background: none !important;
+                color: inherit;
+                line-height: 40px;
+                padding: 0 15px;
+                .fa,
+                .glyphicon {
+                    width: 25px;
+                    text-align: center;
+                    left: -5px;
+                    position: relative;
+                }
+            }
+        }
+    }
+}
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%;
+}
diff --git a/web/sass-files/sass/layout/_webhooks.scss b/web/sass-files/sass/layout/_webhooks.scss
new file mode 100644
index 000000000..d6e367218
--- /dev/null
+++ b/web/sass-files/sass/layout/_webhooks.scss
@@ -0,0 +1,37 @@
+@charset 'UTF-8';
+
+.webhooks__container {
+    background: rgba(black, .1);
+    border: 1px solid;
+    @include border-radius(3px);
+    padding: 0 13px 15px;
+    margin-top: 10px;
+}
+
+.webhook__item {
+    font-size: 13px;
+    position: relative;
+
+    &:last-child {
+        .divider-light:last-child {
+            display: none;
+        }
+    }
+
+    .webhook__remove {
+        position: absolute;
+        right: -7px;
+        top: 8px;
+        width: 30px;
+        height: 30px;
+        font-size: 22px;
+        font-weight: bold;
+        text-align: center;
+        text-decoration: none;
+        color: #e05f5d;
+    }
+
+    .webhook__url {
+        padding-right: 20px;
+    }
+}