merging files

webapp/sass/base/_module.scss

@@ -0,0 +1,3 @@
+// Only for combining all the files in this folder
+@import 'typography';
+@import 'structure';

webapp/sass/base/_structure.scss

@@ -0,0 +1,57 @@
+@charset 'UTF-8';
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    background: $bg--gray;
+    position: relative;
+
+    &.sticky {
+        background: $bg--white;
+
+        > .container-fluid {
+            overflow: auto;
+        }
+
+        .inner-wrap {
+            > .row.content {
+                min-height: 100%;
+                margin-bottom: -89px;
+            }
+        }
+    }
+}
+
+.inner-wrap {
+    height: 100%;
+
+    > .row.main {
+        height: 100%;
+        position: relative;
+    }
+}
+
+.container-fluid {
+    @include legacy-pie-clearfix;
+    height: 100%;
+    position: relative;
+}
+
+.channel-view {
+    @include clearfix;
+    height: 100%;
+    position: relative;
+}
+
+img {
+    max-width: 100%;
+
+    &.rounded {
+        @include border-radius(100%);
+    }
+}

webapp/sass/base/_typography.scss

@@ -0,0 +1,27 @@
+@charset 'UTF-8';
+
+b,
+strong {
+    font-weight: 600;
+}
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+    word-break: break-word;
+    color: $color--primary;
+}
+
+a:focus,
+a:hover {
+    color: $color--primary--hover;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+.word-break--all {
+    word-break: break-all;
+}

webapp/sass/components/_alerts.scss

@@ -0,0 +1,13 @@
+@charset 'UTF-8';
+
+.alert {
+    padding: 8px 12px;
+    @include border-radius($border-rad);
+}
+
+.alert--confirm {
+    display: inline-block;
+    float: left;
+    padding: 4px 10px;
+    margin: 1px 0 0 10px;
+}

webapp/sass/components/_buttons.scss

@@ -0,0 +1,23 @@
+@charset 'UTF-8';
+
+.btn {
+    @include single-transition(all, .25s, ease-in);
+    @include border-radius($border-rad);
+
+    &.btn-primary {
+        border-color: transparent;
+        background: $color--primary;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background: $color--primary--hover;
+        }
+    }
+
+    &.btn-inactive {
+        border-color: transparent;
+        background: #707070;
+        color: #fff;
+    }
+}

webapp/sass/components/_dropdown.scss

@@ -0,0 +1,16 @@
+@charset 'UTF-8';
+
+.dropdown-menu {
+    .divider {
+        @include opacity(.15);
+    }
+
+    > li > a {
+        color: inherit;
+
+        &:focus,
+        &:hover {
+            color: inherit;
+        }
+    }
+}

webapp/sass/components/_emoticons.scss

@@ -0,0 +1,27 @@
+@charset 'UTF-8';
+
+.emoticon {
+    width: 1.5em;
+    height: 1.5em;
+    display: inline-block;
+    margin-bottom: .25em;
+    background-size: contain;
+}
+
+.emoticon-suggestion {
+    @include clearfix;
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 30px;
+}
+
+.emoticon-suggestion__image {
+    width: 20px;
+    height: 20px;
+    margin: 6px 6px 0 5px;
+    padding: 0;
+    text-align: center;
+    vertical-align: top;
+}

webapp/sass/components/_error-bar.scss

@@ -0,0 +1,30 @@
+@charset 'UTF-8';
+
+.error-bar {
+    background-color: #09f;
+    text-align: center;
+    position: relative;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 9999;
+    padding: 5px 30px;
+
+    &__close {
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: #fff;
+        font-size: 20px;
+        font-weight: 600;
+        text-decoration: none;
+        padding: 0 10px;
+        font-family: 'Open Sans', sans-serif;
+
+        &:hover {
+            color: #fff;
+            text-decoration: none;
+        }
+    }
+}

webapp/sass/components/_files.scss

@@ -0,0 +1,294 @@
+@charset 'UTF-8';
+
+.file-preview__container {
+    position: relative;
+    margin: 1px 0 10px;
+    width: 100%;
+    max-height: 100px;
+    height: 100px;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.file-preview {
+    display: inline-block;
+    width: 120px;
+    height: 100px;
+    margin: 0 0 0 10px;
+    position: relative;
+    border: 1px solid #ddd;
+    @include clearfix;
+
+    &:hover .file-preview__remove:after {
+        @include opacity(1);
+    }
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    .spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -16px;
+        margin-top: -16px;
+        width: 32px;
+        height: 32px;
+    }
+}
+
+.file-preview__image {
+    display: block;
+    height: auto;
+    max-width: 100%;
+}
+
+.file-preview__remove {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    &:after {
+        background: rgba(0, 0, 0, .4);
+        content: '';
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        @include opacity(0);
+    }
+
+    i {
+        top: 5px;
+        right: 5px;
+        position: absolute;
+        color: #fff;
+        cursor: pointer;
+        z-index: 5;
+        opacity: inherit;
+        text-shadow: 0 0px 3px #444;
+        text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
+    }
+}
+
+.image-comment {
+    background-position: left top;
+    background-repeat: no-repeat;
+    width: 300px;
+    height: 300px;
+}
+
+
+.file-icon {
+    width: 100%;
+    height: 100%;
+
+    &.audio {
+        @include file-icon('../images/icons/audio.png');
+    }
+
+    &.video {
+        @include file-icon('../images/icons/video.png');
+    }
+
+    &.ppt {
+        @include file-icon('../images/icons/ppt.png');
+    }
+
+    &.generic {
+        @include file-icon('../images/icons/generic.png');
+    }
+
+    &.code {
+        @include file-icon('../images/icons/code.png');
+    }
+
+    &.excel {
+        @include file-icon('../images/icons/excel.png');
+    }
+
+    &.word {
+        @include file-icon('../images/icons/word.png');
+    }
+
+    &.pdf {
+        @include file-icon('../images/icons/pdf.png');
+    }
+
+    &.patch {
+        @include file-icon('../images/icons/patch.png');
+    }
+
+    &.image {
+        @include file-icon('../images/icons/image.png');
+    }
+}
+
+.post-image__column {
+    position: relative;
+    width: 240px;
+    height: 100px;
+    float: left;
+    margin: 5px 10px 5px 0;
+    border: 1px solid lightgrey;
+
+    a {
+        text-decoration: none;
+        color: grey;
+    }
+}
+
+.post-image__load {
+    height: 100%;
+    width: 100%;
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url('~images/load.gif');
+}
+
+.post-image {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+
+    &.small {
+        background-position: center;
+    }
+
+    &.normal {
+        background-position: top left;
+    }
+
+    .spinner.file__loading {
+        position: absolute;
+        left: 50%;
+        margin-left: -16px;
+        top: 50%;
+        margin-top: -16px;
+    }
+
+    .file__loaded {
+        max-width: initial;
+        &.landscape,
+        &.quadrat {
+            height: 100px;
+        }
+        &.portrait {
+            width: 120px;
+        }
+    }
+
+    &:hover .file-playback__controls.stop {
+        @include opacity(1);
+    }
+}
+
+.post-image__thumbnail {
+    float: left;
+    width: 50%;
+    height: 100%;
+    cursor: zoom-in;
+    cursor: -webkit-zoom-in;
+}
+
+.post-image__details {
+    float: left;
+    @include clearfix;
+    word-break: break-word;
+    width: 50%;
+    height: 100%;
+    background: white;
+    border-left: 1px solid #ddd;
+    font-size: 13px;
+    padding: 7px;
+    color: #333;
+
+    .post-image__name {
+        margin-bottom: 3px;
+        display: block;
+    }
+
+    .post-image__download {
+        display: inline-block;
+        padding-right: 7px;
+        cursor: pointer;
+        @include opacity(.7);
+    }
+
+    .post-image__type {
+        @include opacity(.6);
+    }
+
+    .post-image__size {
+        margin-left: 4px;
+        @include opacity(.6);
+    }
+}
+
+.file-details__container {
+    @include display-flex;
+    display: -ms-flexbox;
+
+    .file-details {
+        width: 320px;
+        height: 270px;
+        padding: 14px;
+        text-align: left;
+        vertical-align: top;
+
+        .file-details__name {
+            color: #333;
+            font-size: 16px;
+        }
+
+        .file-details__info {
+            color: grey;
+        }
+    }
+    .file-details__preview {
+        width: 320px;
+        height: 270px;
+        border-right: 1px solid #ddd;
+        vertical-align: center;
+
+        // helper to center the image icon in the preview window
+        .file-details__preview-helper {
+            height: 100%;
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
+
+.file-playback__controls {
+    position: absolute;
+    right: 5px;
+    bottom: 0;
+    font-size: 22px;
+    cursor: pointer;
+    z-index: 2;
+    -webkit-transition: opacity .6s;
+    -moz-transition: opacity .6s;
+    -o-transition: opacity .6s;
+    transition: opacity .6s;
+
+    &.stop {
+        @include opacity(0);
+    }
+}
+
+.view-image__loading {
+    background: black;
+    min-height: 100px;
+}

webapp/sass/components/_inputs.scss

@@ -0,0 +1,26 @@
+@charset 'UTF-8';
+
+.form-control {
+    @include border-radius($border-rad);
+
+    &:focus {
+        @include box-shadow(none);
+    }
+
+    &.no-padding {
+        line-height: 32px;
+        padding: 0;
+    }
+
+    &.no-resize {
+        resize: none;
+    }
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+    cursor: auto;
+    background: rgba(#fff, .1);
+    color: inherit;
+}

webapp/sass/components/_links.scss

@@ -0,0 +1,23 @@
+@charset 'UTF-8';
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+    word-break: break-word;
+    color: $color--primary;
+}
+
+a:focus,
+a:hover {
+    color: $color--primary--hover;
+}
+
+.text-danger,
+a.text-danger {
+    color: #e05f5d;
+
+    &:hover,
+    &:focus {
+        color: #e05f5d;
+    }
+}

webapp/sass/components/_mentions.scss

@@ -0,0 +1,56 @@
+@charset 'UTF-8';
+
+.mention {
+    color: #fff;
+    background: $color--primary;
+    position: relative;
+    z-index: 10;
+    padding-bottom: 2px;
+    @include border-radius(3px);
+}
+
+.mentions__name {
+    position: relative;
+    width: 100%;
+    height: 36px;
+    padding: 2px;
+    z-index: 101;
+    line-height: 36px;
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+
+    .mention-align {
+        @include clearfix;
+        text-overflow: ellipsis;
+        width: calc(100% - 50px);
+    }
+}
+
+.mention__image {
+    margin-right: 6px;
+    height: 32px;
+    width: 32px;
+    line-height: 36px;
+    display: block;
+    font-size: 20px;
+    text-align: center;
+    @include border-radius(32px);
+
+    .mention--align {
+        max-width: 80%;
+        overflow: hidden;
+        display: inline-block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.mention__fullname {
+    color: grey;
+    padding-left: 10px;
+}
+
+.mention--highlight {
+    background-color: #fff2bb;
+}

webapp/sass/components/_modal.scss

@@ -0,0 +1,508 @@
+@charset 'UTF-8';
+
+#channel_members_modal .modal-body {
+    min-height: 110px;
+}
+
+.modal-body {
+    padding: 20px 15px;
+    overflow: auto;
+}
+
+.more-table {
+    margin: 0;
+    table-layout: fixed;
+}
+
+.modal {
+    width: 100%;
+    color: #333;
+
+    body.browser--IE & {
+        .modal-dialog {
+            @include translateY(0);
+        }
+    }
+
+    &.image_modal {
+        .modal-backdrop.in {
+            @include opacity(.7);
+        }
+    }
+
+    .custom-textarea {
+        color: inherit;
+        border-color: #ccc;
+
+        &:focus {
+            border-color: #ccc;
+            box-shadow: none;
+        }
+    }
+
+    .btn {
+        font-size: 13px;
+
+        &.btn-default {
+            border: none;
+            background: transparent;
+        }
+    }
+
+    .info__label {
+        font-weight: 600;
+        text-align: right;
+        padding-right: 0;
+    }
+
+    .team-member-list {
+        width: 100%;
+    }
+
+    .remove__member {
+        float: right;
+        color: #999;
+        font-size: 20px;
+        line-height: 0;
+        padding: 6px;
+
+        &:hover {
+            color: #e56565;
+        }
+    }
+
+    .modal-dialog {
+        max-width: 95%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .modal-push-down {
+        margin-top: 5%;
+    }
+
+    .modal-next-bar {
+        position: absolute;
+        top: 0px;
+        right: 0;
+        height: 100%;
+    }
+
+    .modal-header {
+        border-radius: 0;
+        background: $color--primary;
+        color: #fff;
+        padding: 15px 15px 11px;
+        border: 1px solid #ddd;
+        min-height: 56px;
+        @include clearfix;
+
+        .modal-title {
+            float: left;
+            font-size: 17px;
+            line-height: 27px;
+            color: #f4f4f4;
+
+            .name {
+                font-weight: 600;
+                color: #fff;
+            }
+        }
+
+        .modal-action {
+            padding: 0;
+            margin: 0;
+        }
+
+        button.close {
+            color: #fff;
+            @include opacity(1);
+            z-index: 5;
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+            @include single-transition(all, .25s, ease-in);
+            position: absolute;
+            right: 10px;
+
+            &:hover {
+                background: rgba(0, 0, 0, .1);
+            }
+
+            span {
+                font-family: 'Open Sans', sans-serif;
+                line-height: 10px;
+            }
+        }
+
+        .btn {
+            &.btn-primary {
+                float: right;
+                margin: -4px 25px 0 0;
+                position: relative;
+
+                i {
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+
+    .no-channel-message {
+        text-align: center;
+        padding: 2em 1em;
+
+        .primary-message {
+            font-size: 1.25em;
+        }
+
+        .secondary-message {
+            @include opacity(.8);
+            margin: 1em 0 0;
+        }
+    }
+
+    .modal-content {
+        border-radius: 0;
+        box-shadow: none;
+    }
+
+    .modal-chevron-icon {
+        top: 50%;
+        font-size: 120%;
+    }
+
+    .modal-prev-bar {
+        position: absolute;
+        top: 0px;
+        left: 0;
+        height: 100%;
+    }
+
+    &#more_channels {
+        .modal-body {
+            padding: 0;
+        }
+    }
+
+    .modal-image {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        max-width: 100%;
+
+        .modal-body {
+            @include clearfix;
+            height: 100%;
+            display: table;
+            table-layout: fixed;
+            width: 100%;
+            max-height: 100%;
+        }
+
+        .image-wrapper {
+            position: relative;
+            max-width: 90%;
+            @include border-radius(3px);
+            display: table-cell;
+            vertical-align: middle;
+            text-align: center;
+            width: 100%;
+
+            &:hover {
+                @include border-radius(3px 3px 0 0);
+            }
+
+            &.default {
+                width: 100%;
+                height: 80%;
+            }
+
+            audio,
+            canvas,
+            progress,
+            video {
+                max-width: 100%;
+                height: auto;
+                display: block;
+            }
+
+            .modal-close {
+                background: url('../images/close.png') no-repeat;
+                @include background-size(100% 100%);
+                width: 37px;
+                height: 37px;
+                position: absolute;
+                right: -13px;
+                top: -13px;
+                @include opacity(0);
+                -webkit-transition: opacity .6s;
+                -moz-transition: opacity .6s;
+                -o-transition: opacity .6s;
+                transition: opacity .6s;
+                cursor: pointer;
+                z-index: 9999;
+
+                &.modal-close--show {
+                    @include opacity(1);
+                }
+            }
+
+            > div {
+                min-height: 100px;
+                min-width: 320px;
+                background: #fff;
+                display: inline-block;
+                position: relative;
+
+                &:hover .file-playback__controls.stop {
+                    @include opacity(1);
+                }
+            }
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            .spinner.file__loading {
+                z-index: 2;
+                position: absolute;
+                left: 50%;
+                margin-left: -16px;
+                top: 50%;
+                margin-top: -16px;
+            }
+        }
+
+        .modal-content {
+            box-shadow: none;
+            background: rgba(0, 0, 0, 0);
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            border: none;
+        }
+
+        .image-body {
+            vertical-align: middle;
+            display: table-cell;
+            text-align: center;
+            height: 100%;
+            padding: 0;
+            position: relative;
+            overflow: visible;
+        }
+
+        .image-control {
+            width: 50px;
+            height: 45px;
+            float: left;
+            background: url(../images/prev.png) left no-repeat;
+            top: 50%;
+            position: relative;
+            margin-top: -23px;
+            &.image-next {
+                float: right;
+                background: url(../images/next.png) left no-repeat;
+            }
+        }
+
+        .loader-image {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+
+        .loader-percent {
+            position: absolute;
+            top: 55px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            color: grey;
+            height: 20px;
+        }
+
+        .modal-button-bar {
+            position: absolute;
+            bottom: -40px;
+            left: 0px;
+            right: 0px;
+            background-color: #222;
+            @include border-radius(0 0 3px 3px);
+            @include opacity(0);
+            -webkit-transition: opacity .6s;
+            -moz-transition: opacity .6s;
+            -o-transition: opacity .6s;
+            transition: opacity .6s;
+            line-height: 40px;
+            padding: 0 10px;
+
+            &.footer--show {
+                @include opacity(1);
+            }
+
+            .image-links {
+                a,
+                span {
+                    float: right;
+                }
+            }
+
+            .text {
+                vertical-align: middle;
+                bottom: 0;
+                color: white;
+                margin-left: 5px;
+            }
+
+            .public-link {
+                margin-right: 5px;
+            }
+        }
+    }
+}
+
+
+// Invite New Member
+.invite {
+    margin-right: 40px;
+}
+
+.row--invite {
+    margin-right: 40px;
+    @include clearfix;
+
+    .col-sm-6 {
+        padding: 0 0 0 15px;
+        &:first-child {
+            padding-left: 0;
+        }
+    }
+}
+
+.more-modal {
+    .user-list {
+        overflow-y: auto;
+        overflow-x: hidden;
+        margin-top: 10px;
+        position: relative;
+    }
+
+    .modal-body {
+        padding: 10px 0 20px;
+        overflow-x: hidden;
+    }
+
+    .filter-row {
+        margin: 10px 0;
+        @include clearfix;
+    }
+
+    .member-count {
+        margin-top: 5px;
+        float: right;
+        @include opacity(.8);
+    }
+
+    .more-purpose {
+        @include opacity(.7);
+    }
+}
+
+.modal-body.edit-modal-body {
+    overflow: visible;
+
+    .suggestion-list__content {
+        max-height: 150px;
+    }
+}
+
+.more-modal__list {
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .popover & {
+        font-size: 0.95em;
+
+        .more-modal__row {
+            padding: 5px 10px;
+        }
+
+        .more-modal__name {
+            font-weight: normal;
+        }
+    }
+
+    .more-modal__image {
+        flex-grow: 0;
+        flex-shrink: 0;
+        @include border-radius(60px);
+        margin-right: 8px;
+    }
+
+    .more-modal__details {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .more-modal__actions {
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-left: 20px;
+    }
+
+    .more-modal__name {
+        font-weight: 600;
+        font-size: .95em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .more-modal__description {
+        @include opacity(.7);
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .more-modal__row {
+        display: flex;
+        padding: 8px 15px;
+        border-bottom: 1px solid;
+    }
+
+    p {
+        font-size: .9em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        @include opacity(.8);
+        margin: 5px 0;
+    }
+}
+
+.filtered-user-list {
+    display: flex;
+    flex-direction: column;
+
+    .filter-row {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .user-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}

webapp/sass/components/_module.scss

@@ -0,0 +1,19 @@
+// Only for combining all the files in this folder
+@import 'alerts';
+@import 'buttons';
+@import 'dropdown';
+@import 'emoticons';
+@import 'error-bar';
+@import 'files';
+@import 'inputs';
+@import 'links';
+@import 'mentions';
+@import 'modal';
+@import 'oauth';
+@import 'popover';
+@import 'scrollbar';
+@import 'search';
+@import 'suggestion-list';
+@import 'tooltip';
+@import 'tutorial';
+@import 'videos';

webapp/sass/components/_oauth.scss

@@ -0,0 +1,38 @@
+@charset 'UTF-8';
+
+.prompt {
+    background: #fff;
+    border: 1px solid #ddd;
+    padding: 1em 2em 0;
+    margin: 50px auto;
+    max-width: 90%;
+    width: 600px;
+
+    .prompt__heading {
+        font-size: em(20px);
+        line-height: normal;
+        margin: 1em 0;
+        display: table;
+        width: 100%;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+
+        img {
+            margin-right: 15px;
+        }
+    }
+
+    .prompt__allow {
+        margin: 1em 0;
+        font-size: em(24px);
+    }
+
+    .prompt__buttons {
+        text-align: right;
+        border-top: 1px solid #ddd;
+        padding: 1.5em 0;
+    }
+}

webapp/sass/components/_popover.scss

@@ -0,0 +1,185 @@
+@charset 'UTF-8';
+@import 'compass/css3/transition';
+
+.popover {
+    @include border-radius($border-rad);
+    color: #333;
+
+    &.bottom,
+    &.right,
+    &.top,
+    &.left {
+        > .arrow:after {
+            border-color: transparent;
+        }
+    }
+
+    .popover-title {
+        background: rgba(black, .05);
+        padding: 8px 10px;
+    }
+
+    .popover-content {
+        p:last-child {
+            margin-bottom: 5px;
+        }
+    }
+}
+
+.channel-header__info .popover-content {
+    max-height: 250px;
+    overflow: auto;
+}
+
+.user-popover {
+    cursor: pointer;
+    display: inline-block;
+}
+
+.code-popover .popover-content {
+    padding: 5px;
+}
+
+.user-popover__image {
+    margin: 0 0 10px;
+    @include border-radius(128px);
+}
+
+.user-popover__email {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+}
+
+.search-help-popover {
+    visibility: hidden;
+    max-width: none;
+    width: 100%;
+    top: 36px;
+    @include single-transition(opacity, .3s, ease-in);
+    font-size: em(13px);
+
+    &.autocomplete {
+        display: block;
+        .popover-content {
+            padding: 10px;
+            position: relative;
+        }
+    }
+
+    .search-autocomplete__divider {
+        margin: 10px 0 5px;
+        line-height: 21px;
+        position: relative;
+        &:first-child {
+            margin-top: 5px;
+        }
+        span {
+            display: inline-block;
+            padding-right: 10px;
+            background: #fff;
+            z-index: 5;
+            position: relative;
+        }
+        &:before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 1px;
+            background: #ddd;
+            top: 10px;
+            left: 0;
+            @include opacity(.2);
+        }
+    }
+
+    .search-autocomplete__item {
+        cursor: pointer;
+        padding: 6px 8px;
+        margin: 3px 0 0 5px;
+        @include border-radius(2px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+            background: rgba(black, .1);
+        }
+
+        &.selected {
+            background: rgba(black, .2);
+        }
+
+        .fa {
+            margin-right: 5px;
+            @include opacity(.5);
+        }
+
+        .profile-img {
+            margin-top: -1px;
+            height: 16px;
+            margin-right: 6px;
+            width: 16px;
+        }
+    }
+
+    &.bottom > .arrow {
+        top: -18px;
+        border-width: 9px;
+        left: 30px;
+    }
+
+    .popover-content {
+        max-height: 500px;
+        overflow: auto;
+        padding: 3px 13px;
+    }
+
+    h4 {
+        font-size: 1em;
+    }
+
+    ul {
+        padding-left: 17px;
+        span {
+            @include opacity(.8);
+        }
+        strong,
+        b {
+            @include opacity(1);
+        }
+    }
+
+    .tooltip-inner {
+        max-width: 100%;
+    }
+
+    &.visible {
+        visibility: visible;
+        @include opacity(1);
+    }
+}
+
+#member-list-popover {
+    max-width: initial;
+    .popover-content {
+        position: relative;
+        padding: 0;
+        width: 260px;
+        max-height: 350px;
+        .text-nowrap {
+            padding: 6px 10px;
+            width: 100%;
+            overflow: hidden;
+            line-height: 26px;
+            font-size: 13px;
+        }
+        .more__name {
+            margin-left: 6px;
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}

webapp/sass/components/_scrollbar.scss

@@ -0,0 +1,28 @@
+@charset 'UTF-8';
+
+::-webkit-scrollbar
+{
+  width: 8px;  /* for vertical scrollbars */
+  height: 8px; /* for horizontal scrollbars */
+}
+
+::-webkit-scrollbar-track
+{
+  background: rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-thumb
+{
+    @include border-radius($border-rad * 2);
+    background: rgba(0, 0, 0, 0.4);
+}
+
+body{
+    scrollbar-face-color: rgba(0, 0, 0, 0.1);
+    scrollbar-shadow-color: #2D2C4D;
+    scrollbar-highlight-color:#7D7E94;
+    scrollbar-3dlight-color: #7D7E94;
+    scrollbar-darkshadow-color: #2D2C4D;
+    scrollbar-track-color: rgba(0, 0, 0, 0.1);
+    scrollbar-arrow-color: #C1C1D1;
+}

webapp/sass/components/_search.scss

@@ -0,0 +1,175 @@
+@charset 'UTF-8';
+
+#channel-header .search-bar__container {
+    padding: 0 9px 0 3px;
+}
+
+.search-bar__container {
+    padding: 12px 8px 0 0;
+    @include flex(0 0 56px);
+
+    .sidebar--right.move--left & {
+        padding-right: 42px;
+    }
+}
+
+.glyphicon-refresh-animate {
+    @include animation(spin .7s infinite linear);
+}
+
+.search__clear {
+    display: none;
+    position: absolute;
+    right: 0;
+    line-height: 45px;
+    margin-right: 13px;
+    @include single-transition(all, .2s, linear);
+    @include translateX(60px);
+    z-index: 5;
+    cursor: pointer;
+}
+
+.search-item-snippet {
+    @include clearfix;
+    text-overflow: ellipsis;
+}
+
+.sidebar__collapse {
+    cursor: pointer;
+    z-index: 5;
+    fill: #fff;
+    position: absolute;
+    left: 0;
+    font-size: 35px;
+    width: 49px;
+    @include single-transition(all, .2s, linear);
+    @include translateX(0px);
+    text-align: center;
+    padding-left: 1px;
+    line-height: 40px;
+    display: none;
+}
+
+.search-item-snippet {
+    ul,
+    ol {
+        padding-left: 20px;
+    }
+}
+
+.sidebar__search-icon {
+    position: absolute;
+    top: 15px;
+    margin-left: 10px;
+    font-size: 14px;
+    @include opacity(.5);
+    display: none;
+    color: #777;
+}
+
+.search__form {
+    position: relative;
+
+    .search-bar__container & {
+        margin: 0;
+        border: 1px solid #ddd;
+        @include border-radius(2px);
+        width: 300px;
+    }
+
+    .sidebar--right & {
+        width: 100%;
+    }
+
+    .search-bar {
+        height: 40px;
+        padding-right: 30px;
+        box-shadow: none;
+
+        .search-bar__container & {
+            height: 30px;
+            border: none;
+        }
+    }
+
+    .glyphicon-refresh-animate {
+        top: 27px;
+        position: absolute;
+        right: 27px;
+        color: #999;
+
+        .search-bar__container & {
+            right: 7px;
+            top: 8px;
+        }
+    }
+}
+
+.search-items-container {
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
+    height: calc(100% - 56px);
+    padding-top: 10px;
+}
+
+.search-results-header {
+    font-size: 1em;
+    text-transform: uppercase;
+    color: #999;
+    font-weight: 400;
+    color: #888;
+    height: 44px;
+    line-height: 44px;
+    padding: 0 10px 0 10px;
+    border-bottom: $border-gray;
+}
+
+.search-item__container {
+    .post {
+        padding: 0 1em 1em;
+        margin: 0;
+
+        &:first-child {
+            border: none;
+        }
+
+        .search-channel__name {
+            font-weight: 600;
+            margin: 0 0 10px 0;
+        }
+    }
+}
+
+.search-item__jump {
+    position: absolute;
+    right: 0;
+    top: 0px;
+    font-size: 13px;
+    @include opacity(.8);
+
+    &:hover {
+        @include opacity(1);
+    }
+}
+
+.search-item__comment {
+    position: absolute;
+    right: 0;
+    margin-right: 35px;
+    top: 0;
+}
+
+.search-item-time {
+    @include opacity(.7);
+    font-size: .9em;
+}
+
+.search-results-none {
+    padding: 10px;
+}
+
+.search-highlight {
+    background-color: #fff2bb;
+}

webapp/sass/components/_suggestion-list.scss

@@ -0,0 +1,41 @@
+@charset 'UTF-8';
+
+.suggestion-list {
+    width: 100%;
+    z-index: 100;
+    @extend %popover-box-shadow;
+}
+
+.suggestion-list--top {
+    position: absolute;
+}
+
+.suggestion-list__content {
+    width: 100%;
+    max-height: 292px;
+    background-color: #fff;
+    border: $border-gray;
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    .command {
+        position: relative;
+        width: 100%;
+        line-height: 24px;
+        padding: 5px 10px 8px;
+        z-index: 101;
+        font-size: .95em;
+        border-bottom: 1px solid #ddd;
+
+        .command__desc {
+            margin-left: 5px;
+            @include opacity(.5);
+            line-height: normal;
+        }
+    }
+}
+
+.suggestion-list__content--top {
+    position: absolute;
+    bottom: 0;
+}

webapp/sass/components/_tooltip.scss

@@ -0,0 +1,10 @@
+@charset 'UTF-8';
+
+.tooltip {
+    .tooltip-inner {
+        word-break: break-word;
+        font-size: 13px;
+        padding: 3px 10px 4px;
+        font-weight: 500;
+    }
+}

webapp/sass/components/_tutorial.scss

@@ -0,0 +1,208 @@
+@charset 'UTF-8';
+
+.tip-backdrop {
+    background: rgba(black, .5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}
+
+.tip-overlay {
+    width: 350px;
+    max-width: 90%;
+    position: absolute;
+    background-color: #fff;
+    @include border-radius(3px);
+    padding: 20px;
+    z-index: 1000;
+
+    .arrow {
+        border-width: 10px;
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    &.tip-overlay--sidebar {
+        max-width: 75%;
+        margin: 50px 0 0 10px;
+        min-height: 330px;
+        .tutorial__footer {
+            position: absolute;
+            width: 100%;
+            bottom: 20px;
+            left: 0;
+            padding: 0 20px;
+        }
+        .arrow {
+            top: 80px;
+            left: -10px;
+            margin-top: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--header {
+        margin: 10px 0 0 10px;
+        .arrow {
+            top: 15px;
+            left: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--chat {
+        margin-top: -10px;
+        .arrow {
+            left: 50%;
+            margin-left: -10px;
+            border-bottom-width: 0;
+            border-top-color: #fff;
+            bottom: -10px;
+        }
+    }
+
+    h4 {
+        font-size: em(16px);
+        font-weight: 600;
+        margin: 5px 0 15px;
+    }
+
+    p {
+        font-size: 13px;
+        line-height: 1.6;
+
+        strong {
+            font-weight: 600;
+        }
+    }
+
+    .btn {
+        background: #ccc;
+        color: #fff;
+        @include border-radius(3px);
+        border: none;
+        margin: 10px 0;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: #fff;
+            border: none;
+            background: #bbb;
+        }
+    }
+
+    .tip-opt {
+        font-size: 12px;
+
+        span {
+            @include opacity(.9);
+        }
+    }
+
+    .tutorial__circles {
+        margin: 1.5em 0px -1.7em -4px;
+
+        .circle {
+            width: 7px;
+            height: 7px;
+            margin: 0 4px;
+        }
+    }
+}
+
+.tip-button {
+    z-index: 998;
+    right: -10px;
+    top: -10px;
+    position: relative;
+    cursor: pointer;
+}
+
+.tip-div {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+
+    &.tip-overlay--header {
+        top: 21px;
+        right: 2px;
+        .tip-button {
+            @include opacity(.8);
+        }
+    }
+
+    &.tip-overlay--sidebar {
+        left: 0;
+        @include opacity(.8);
+        top: -9px;
+    }
+}
+
+.tutorial-steps__container {
+    text-align: center;
+    width: 100%;
+    display: table;
+    height: 100%;
+    .tutorial__content {
+        display: table-cell;
+        vertical-align: middle;
+        padding-bottom: 100px;
+        padding: 20px 40px 40px;
+        .tutorial__steps {
+            position: relative;
+            max-width: 310px;
+            min-height: 370px;
+            margin-bottom: 50px;
+            text-align: left;
+            display: inline-block;
+        }
+    }
+    .tutorial__footer {
+        position: absolute;
+        bottom: 0;
+    }
+    h1 {
+        font-size: em(40px);
+        margin: -20px 0 30px;
+        font-weight: 600;
+    }
+    h3 {
+        font-size: em(24px);
+        margin-bottom: 30px;
+        font-weight: 600;
+    }
+    .tutorial__circles {
+        position: absolute;
+        bottom: 40px;
+    }
+    .tutorial-skip {
+        margin-left: 13px;
+    }
+}
+
+.tutorial__circles {
+    margin: 2em 0;
+    .circle {
+        width: 9px;
+        height: 9px;
+        @include border-radius(9px);
+        @include opacity(.2);
+        background: #000;
+        display: inline-block;
+        margin: 0 5px;
+        &.active {
+            background: $color--primary;
+            @include opacity(1);
+        }
+    }
+}

webapp/sass/components/_videos.scss

@@ -0,0 +1,66 @@
+@charset 'UTF-8';
+
+.video-div {
+    position: relative;
+    max-width: 480px;
+    margin-bottom: 8px;
+    .video-thumbnail {
+        max-width: 100%;
+        height: auto;
+    }
+    .block {
+        background-color: rgba(0,0,0,.5);
+        border-radius: 10px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -100px;
+        width: 200px;
+        margin: -75px 0 0 -100px;
+        height: 150px;
+    }
+}
+
+.video-type {
+    @include opacity(.8);
+    font-size: 15px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.video-title {
+    font-size: 15px;
+    margin-top: 3px;
+}
+.play-button {
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    top: 26px;
+    right: 51px;
+    border: 4px solid;
+    border-color: rgba(255,255,255,.4);
+    border-radius: 14px;
+}
+.play-button span {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-top: 36px solid transparent;
+    border-bottom: 36px solid transparent;
+    border-left: 60px solid rgba(255,255,255,.4);
+}
+
+.img-div {
+    -moz-force-broken-image-icon: 1;
+    position: relative;
+    max-width: 450px;
+    max-height: 500px;
+    margin-bottom: 8px;
+    border-radius: 5px;
+    &.placeholder {
+        height: 500px;
+    }
+}

webapp/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;
+}

webapp/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;
+}
+
+

webapp/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;
+    }
+}
+

webapp/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;
+        }
+    }
+}

webapp/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;
+}

webapp/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';

webapp/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;
+}

webapp/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;
+}

webapp/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;
+}

webapp/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;
+}

webapp/sass/layout/_sidebar-menu.scss

@@ -0,0 +1,71 @@
+@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 {
+                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;
+                }
+            }
+        }
+    }
+}

webapp/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%;
+}

webapp/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;
+    }
+}

webapp/sass/responsive/_desktop.scss

@@ -0,0 +1,65 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 1800px) {
+    .inner-wrap {
+        &.move--left {
+            .date-separator,
+            .new-separator {
+                &.hovered--comment {
+                    &:before,
+                    &:after {
+                        background: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1440px) {
+    .date-separator,
+    .new-separator {
+        &.hovered--comment {
+            &:before,
+            &:after {
+                background: none !important;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1140px) {
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin: -10px 0 0 -10px;
+            .arrow {
+                right: 15px;
+                left: auto;
+            }
+        }
+    }
+    .inner-wrap {
+        &.move--left {
+            .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;
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    .modal-lg {
+        width: 700px;
+    }
+}

webapp/sass/responsive/_mobile.scss

@@ -0,0 +1,900 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 768px) {
+    .signup-team__container {
+        font-size: 1em;
+    }
+
+    .date-separator.hovered--before:after,
+    .date-separator.hovered--after:before,
+    .new-separator.hovered--after:before,
+    .new-separator.hovered--before:after {
+        background: none !important;
+    }
+
+    .post {
+        .post__dropdown {
+            line-height: 9px;
+            text-decoration: none;
+            width: 20px;
+            display: inline-block;
+            text-align: center;
+            height: 20px;
+
+            &:after {
+                font-size: 20px;
+                content: '...';
+                top: -3px;
+            }
+        }
+
+        .comment-icon__container {
+            visibility: visible;
+            display: none;
+
+            &.icon--show {
+                display: inline-block;
+            }
+        }
+
+        .post-list__content & {
+            &:hover {
+                background: transparent;
+            }
+
+            .comment-icon__container {
+                visibility: visible;
+            }
+        }
+
+        .dropdown,
+        .post__reply {
+            visibility: visible;
+        }
+
+        .post__body {
+            width: calc(100% - 75px);
+        }
+
+        .post__reply {
+            margin-right: 20px;
+            float: right;
+
+            svg {
+                top: 1px;
+            }
+        }
+
+        &.other--root .post__reply {
+            &.post__reply--hide {
+                visibility: hidden;
+            }
+        }
+
+        .post__header {
+            .col__reply {
+                width: 65px;
+            }
+
+            .col__name {
+                pointer-events: none;
+
+                .user-popover {
+                    max-width: 130px;
+                }
+            }
+        }
+
+        &.same--root {
+            &.same--user {
+                .post__time {
+                    display: none;
+                }
+            }
+        }
+
+        .post__img {
+            width: 40px;
+
+            img {
+                width: 32px;
+                height: 32px;
+            }
+        }
+    }
+
+    .post-image__column {
+        width: 200px;
+        height: 95px;
+    }
+
+    .textarea-wrapper {
+        .textbox-preview-link,
+        .textbox-help-link {
+            display: none;
+        }
+    }
+    .form-control {
+        &.min-height {
+            min-height: 100px;
+        }
+    }
+
+    .img-div {
+        max-width: 100%;
+    }
+
+    .tip-div {
+        left: 15px;
+        right: auto;
+    }
+
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin-left: 10px;
+            .arrow {
+                left: 32px;
+            }
+        }
+    }
+
+    .file-details__container {
+        display: block;
+
+        .file-details__preview {
+            display: block;
+            width: 100%;
+            height: 150px;
+            border-right: none;
+            border-bottom: 1px solid #ddd;
+            img {
+                width: 64px;
+                height: 64px;
+            }
+        }
+
+        .file-details {
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    .search-help-popover.visible {
+        visibility: hidden;
+    }
+
+    .modal-direct-channels {
+        .member-count {
+            float: none;
+            margin-top: 10px;
+            display: block;
+        }
+    }
+
+    .file-overlay {
+        font-size: em(18px);
+
+        &.center-file-overlay {
+            .overlay__indent {
+                margin-left: 0;
+            }
+        }
+
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .date-separator,
+    .new-separator {
+        &.hovered--after {
+            &:before {
+                background: none;
+            }
+        }
+
+        &.hovered--before {
+            &:after {
+                background: none;
+            }
+        }
+    }
+
+    .post-list__timestamp {
+        display: block;
+    }
+
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: .9em;
+
+        .signup-team__name {
+            font-size: 2em;
+        }
+
+        .btn.btn-full {
+            padding-left: 10px;
+        }
+
+        .btn {
+            .icon,
+            .fa {
+                margin-right: 6px;
+            }
+        }
+    }
+
+    .row--invite {
+        .col-sm-6 {
+            padding: 0;
+        }
+    }
+
+    .modal {
+        .info__label {
+            text-align: left;
+            padding-bottom: 5px;
+        }
+
+        .modal-header {
+            .modal-action {
+                margin-top: 10px;
+            }
+
+            button.close {
+                font-weight: normal;
+                font-size: 27px;
+            }
+
+            .modal-title {
+                float: none;
+                max-width: 90%;
+            }
+
+            .btn {
+                &.btn-primary {
+                    display: block;
+                    margin: 10px 0 6px;
+                    width: 100%;
+                    float: none;
+                }
+            }
+        }
+
+        .settings-modal {
+            &.display--content {
+                .modal-header {
+                    display: none;
+                }
+
+                .settings-table {
+                    display: block;
+
+                    .settings-content {
+                        &.minimize-settings {
+                            display: block;
+                        }
+
+                        .section-min:hover {
+                            background: none;
+                        }
+
+                        .no-padding--left {
+                            padding-left: 15px;
+                        }
+                    }
+
+                    .settings-links {
+                        display: none;
+                    }
+
+                    .modal-header {
+                        display: block;
+                        position: absolute;
+                        top: 0;
+                        width: 100%;
+                        z-index: 5;
+
+                        .modal-title {
+                            width: 100%;
+                            text-align: center;
+                        }
+                    }
+
+                    .user-settings {
+                        .tab-header {
+                            display: none;
+                        }
+
+                        .divider-dark.first {
+                            display: none;
+                        }
+                    }
+                }
+            }
+
+            .settings-table {
+                padding: 0;
+                .nav {
+                    position: relative;
+                    top: auto;
+                    width: 100%;
+
+                    &.position--top {
+                        top: auto;
+                    }
+                }
+
+                .settings-content {
+                    .section-edit {
+                        position: absolute;
+                        top: 14px;
+                        right: 0;
+                        padding-right: 0;
+                        .fa {
+                            display: inline-block;
+                        }
+                    }
+
+                    &.minimize-settings {
+                        padding: 0;
+                        display: none;
+                        .user-settings {
+                            padding: 70px 20px 30px;
+                        }
+                    }
+
+                    .section-min:hover {
+                        background: none !important;
+                    }
+                }
+
+                .nav {
+                    > li {
+                        > a {
+                            border-top: 1px solid #ddd;
+                            font-size: 1.1em;
+                            line-height: 2.7;
+                            color: #555;
+
+                            .glyphicon {
+                                margin-left: 7px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .post-create__container {
+        .post-right__container & {
+            padding: 0 1em;
+
+            .msg-typing {
+                display: none;
+            }
+        }
+
+        form {
+            padding: .5em 0;
+        }
+
+        .post-create-footer {
+            padding: 0 1em;
+
+            .msg-typing {
+                display: none;
+            }
+
+            .control-label {
+                top: 0;
+            }
+        }
+
+        .post-create-body {
+            display: table;
+            width: 100%;
+
+            .post-body__cell {
+                display: table-cell;
+                padding-left: 45px;
+                .sidebar--right & {
+                    padding-left: 0;
+                }
+            }
+
+            .app__content & {
+                .btn-file {
+                    width: 45px;
+                    padding: 0;
+                    line-height: 36px;
+                    bottom: -2px;
+                    left: 0;
+                    top: auto;
+                }
+            }
+
+            .send-button {
+                display: table-cell;
+            }
+        }
+    }
+
+    .file-preview__container {
+        margin: 5px 0 0;
+    }
+
+    .file-preview {
+        margin-top: 0;
+    }
+
+    .file-preview__remove {
+        width: 28px;
+        height: 28px;
+        left: auto;
+        right: 0;
+        top: 0;
+        background: #444;
+        background: rgba(#000, .5);
+        text-align: center;
+
+        &:after {
+            display: none;
+        }
+
+        i {
+            line-height: 29px;
+            top: auto;
+            right: auto;
+            position: relative;
+            font-size: 16px;
+        }
+    }
+
+    #navbar {
+        .navbar-default {
+            .navbar-header {
+                float: none;
+                margin: 0 -15px;
+
+                .dropdown__icon {
+                    width: 4px;
+                    height: 16px;
+                    @include background-size(100% 100%);
+                    display: inline-block;
+                }
+            }
+
+            .navbar-toggle {
+                display: block;
+            }
+
+            .navbar-brand {
+                white-space: nowrap;
+            }
+        }
+    }
+
+    body {
+        &.white {
+            .inner-wrap {
+                > .row.content {
+                    margin-bottom: -185px;
+                }
+            }
+        }
+    }
+
+    .footer,
+    .footer-pane,
+    .footer-push {
+        height: 187px;
+    }
+
+    .footer-pane {
+        .footer-link {
+            padding: 0;
+            width: 100%;
+            text-align: right;
+            line-height: 1.7;
+            &.copyright {
+                width: 100%;
+            }
+        }
+    }
+
+    .search__clear {
+        display: block;
+    }
+
+    .search-bar__container {
+        padding: 0;
+        @include flex(0 0 44px);
+        background: $color--primary;
+        color: #fff;
+
+        &.focused {
+            .sidebar__collapse {
+                @include translateX(-45px);
+            }
+
+            .search__form {
+                @include translateX(-45px);
+                padding-left: 55px;
+                padding-right: 24px;
+            }
+
+            .search__clear {
+                @include translateX(0px);
+            }
+        }
+        .search__form {
+            border: none;
+            @include translateX(0px);
+            padding: 7px 20px 0 49px;
+            height: 45px;
+            position: relative;
+            @include single-transition(all, .2s, linear);
+
+            .glyphicon-refresh-animate {
+                right: 33px;
+                top: 15px;
+                color: #fff;
+                color: rgba(255,255,255,.5);
+            }
+
+            .form-control {
+                border: none;
+                padding: 0 10px 0 31px;
+                background: rgba(black, .2);
+                @include border-radius(3px);
+                color: #444;
+                background: #fff;
+            }
+        }
+    }
+    .sidebar--menu {
+        @include single-transition(transform, .5s, ease);
+        @include translate3d(290px, 0, 0);
+        width: 290px;
+        border: none;
+        display: block;
+
+        &.move--left {
+            @include translate3d(0, 0, 0);
+        }
+    }
+
+    .sidebar--left {
+        @include single-transition(transform, .5s, ease);
+        @include translate3d(-290px, 0, 0);
+        width: 290px;
+        border: none;
+        &.sidebar--padded {
+            padding-top: 0;
+        }
+
+        &.move--right {
+            @include translate3d(0, 0, 0);
+        }
+
+        > div {
+            padding-bottom: 70px;
+        }
+
+        .nav-pills__unread-indicator-bottom {
+            bottom: 10px;
+        }
+
+        .badge {
+            top: 13px;
+        }
+
+        .team__header {
+            @include clearfix;
+            pointer-events: none;
+
+            .user__name {
+                display: none;
+            }
+
+            .team__name {
+                margin: 10px 0;
+            }
+
+            .navbar-right {
+                display: none;
+            }
+        }
+
+        .search__form {
+            display: block;
+        }
+
+        .nav {
+            li {
+                &.dropdown.open {
+                    padding-bottom: 25px;
+
+                    ul {
+                        clear: both;
+                        background: #fff;
+                        border-radius: 3px;
+                        top: 5px;
+                        position: relative;
+
+                        li {
+                            a {
+                                line-height: 30px;
+                            }
+                        }
+                    }
+                }
+
+                h4 {
+                    margin: 16px 0 8px;
+                }
+
+                > a {
+                    font-size: 15px;
+                    margin: 0;
+                    line-height: 2.5;
+
+                    &:hover,
+                    &:focus {
+                        background: transparent;
+                    }
+
+                    &.has-close {
+                        .btn-close {
+                            width: 40px;
+                            text-align: center;
+                            right: 0;
+                            display: block;
+                            @include opacity(.5);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .sidebar--right {
+        width: 100%;
+        right: 0;
+        @include translate3d(100%, 0, 0);
+        z-index: 5;
+
+        &.move--left {
+            @include translate3d(0, 0, 0);
+        }
+
+        .sidebar__collapse,
+        .sidebar__search-icon {
+            display: block;
+        }
+
+        .sidebar--right__close {
+            display: none;
+        }
+
+        .sidebar-right__body {
+            height: calc(100% - 44px);
+        }
+    }
+
+    .search-items-container {
+        height: calc(100% - 44px);
+    }
+
+    .inner-wrap {
+        @include single-transition(all, .5s, ease);
+
+        &.move--right {
+            @include translate3d(290px, 0, 0);
+
+            &:before {
+                z-index: 9999;
+                content: '';
+                width: 100%;
+                height: 100%;
+                left: -15px;
+                top: 0;
+                position: absolute;
+                background: rgba(0, 0, 0, .4);
+            }
+        }
+
+        &.move--left-small {
+            @include translate3d(-290px, 0, 0);
+            &:before {
+                z-index: 9999;
+                content: '';
+                width: 100%;
+                height: 100%;
+                right: -15px;
+                top: 0;
+                position: absolute;
+                background: rgba(0, 0, 0, .4);
+            }
+        }
+
+        &.move--left {
+            margin: 0;
+            @include translate3d(-100%, 0, 0);
+        }
+    }
+
+    .modal {
+        .modal-image {
+            .image-wrapper {
+                > div {
+                    font-size: 12px;
+                    min-width: 250px;
+                }
+
+                .modal-close {
+                    @include opacity(1);
+                }
+            }
+
+            .modal-button-bar {
+                @include opacity(1);
+            }
+        }
+    }
+
+    .app__content {
+        padding-top: 45px;
+        margin: 0;
+        .channel__wrap & {
+            padding-top: 45px;
+        }
+        #channel-header {
+            display: none;
+        }
+    }
+
+    .channel__wrap {
+        .row {
+            &.header {
+                display: block;
+            }
+        }
+    }
+
+    .post-comments {
+        padding: 9px 21px 10px 10px !important;
+    }
+
+    .post-image__column .post-image .file-playback__controls.stop,
+    .image-wrapper > a .file-playback__controls.stop {
+        @include opacity(1);
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .access-history__table {
+        > div {
+            display: block;
+        }
+
+        .access__report {
+            margin: 0 0 15px 15px;
+        }
+
+        .access__date {
+            div {
+                margin-bottom: 15px;
+            }
+        }
+    }
+    .activity-log__table {
+        > div {
+            display: block;
+        }
+
+        .activity-log__report {
+            width: 100%;
+        }
+
+        .activity-log__action {
+            text-align: left;
+            margin-top: 10px;
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .modal {
+        .settings-modal {
+            .settings-table {
+                .security-links {
+                    margin-bottom: 10px;
+                    display: block;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .tip-overlay.tip-overlay--sidebar {
+        min-height: 350px;
+    }
+
+    .modal {
+        .modal-body {
+            max-height: 70%;
+        }
+
+        .settings-modal {
+            &.display--content {
+                .modal-body {
+                    max-height: 90%;
+                }
+            }
+        }
+    }
+
+    .member-div {
+        padding: 8px 0;
+
+        .member-drop,
+        .member-role {
+            position: relative;
+            margin: 0px 0 0 44px;
+            padding: 5px 0;
+            top: 0;
+            right: 0;
+        }
+
+        .open > .dropdown-menu {
+            left: 0;
+            right: auto;
+        }
+    }
+
+    .sidebar--left {
+        @include translate3d(-260px, 0, 0);
+        width: 260px;
+    }
+
+    .inner-wrap {
+        &.move--right {
+            @include translate3d(260px, 0, 0);
+        }
+    }
+
+    .modal {
+        .modal-image {
+            .modal-button-bar {
+                line-height: 30px;
+                padding: 5px;
+            }
+        }
+    }
+}
+
+@media screen and (max-height: 640px) {
+    .signup-team__container {
+        padding: 30px 0;
+        margin-bottom: 30px;
+        font-size: .9em;
+
+        .signup-team__name {
+            font-size: 2em;
+        }
+    }
+}

webapp/sass/responsive/_module.scss

@@ -0,0 +1,4 @@
+@charset 'UTF-8';
+@import 'desktop';
+@import 'tablet';
+@import 'mobile';

webapp/sass/responsive/_tablet.scss

@@ -0,0 +1,35 @@
+@charset 'UTF-8';
+
+@media screen and (max-width: 960px) {
+    .sidebar--right {
+        z-index: 5;
+        @include translateX(100%);
+        @include single-transition(all, .5s, ease);
+
+        &.move--left {
+            @include translateX(0);
+
+            .search-bar__container {
+                padding-right: 8px;
+            }
+        }
+    }
+
+    .inner-wrap {
+        &.move--left {
+            margin-right: 0;
+
+            .channel-header__links {
+                position: relative;
+                right: auto;
+                top: auto;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .second-bar {
+        display: none;
+    }
+}

webapp/sass/routes/_access-history.scss

@@ -0,0 +1,32 @@
+@charset 'UTF-8';
+
+.access-history__table {
+    display: table;
+    width: 100%;
+    padding-top: 15px;
+    line-height: 1.6;
+
+    &:first-child {
+        padding: 0;
+    }
+
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+
+    .access__date {
+        font-weight: 600;
+        font-size: 15px;
+        width: 190px;
+    }
+
+    .access__report {
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 15px;
+    }
+
+    .report__info {
+        @include opacity(.8);
+    }
+}

webapp/sass/routes/_activity-log.scss

@@ -0,0 +1,64 @@
+@charset 'UTF-8';
+
+@keyframes highlight {
+    from {
+        background: rgba(yellow, .5);
+    }
+    to {
+        background: none;
+    }
+}
+
+.animation--highlight {
+    &:before {
+        content: '';
+        animation: highlight 1.5s ease;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.activity-log__table {
+    display: table;
+    width: 100%;
+    line-height: 1.8;
+    border-top: 1px solid #ddd;
+    padding: 15px 0;
+
+    &:first-child {
+        padding-top: 0;
+        border: none;
+    }
+
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+
+    .activity-log__report {
+        width: 80%;
+    }
+
+    .activity-log__action {
+        text-align: right;
+    }
+
+    .report__platform {
+        font-size: 15px;
+        font-weight: 600;
+        .fa {
+            margin-right: 6px;
+        }
+    }
+
+    .report__info {
+        @include opacity(.8);
+    }
+}
+
+.session-help-text {
+    padding: 0 0 20px;
+}

webapp/sass/routes/_admin-console.scss

@@ -0,0 +1,363 @@
+@charset 'UTF-8';
+
+.admin-controller {
+    > div {
+        height: 100%;
+    }
+
+    .inner-wrap {
+        position: absolute;
+        width: 100%;
+    }
+
+    .row {
+        margin: 0;
+    }
+
+    h3 {
+        font-weight: 600;
+        border-bottom: 1px solid #ddd;
+        padding-bottom: .5em;
+        margin: 1em 0;
+    }
+
+    .table {
+        background: #fff;
+    }
+
+    .form-control {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        color: #555;
+
+        &:focus {
+            border-color: #66afe9;
+            outline: 0;
+            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+        }
+    }
+
+    .btn {
+        color: #333;
+
+        &.btn-primary {
+            background: #2389d7;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background: #1c6dab;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        background: #fff;
+        border: 1px solid rgba(0,0,0,.15);
+        color: inherit;
+    }
+
+    .sidebar--left {
+        &.sidebar--collapsable {
+            background: #333;
+
+            .team__header {
+                background: transparent;
+                margin-bottom: 5px;
+            }
+
+            .nav {
+                li {
+                    padding: 0;
+                    @include opacity(1);
+
+                    .icon {
+                        width: 17px;
+                    }
+
+                    > a {
+                        &:hover,
+                        &.active,
+                        &:focus {
+                            background-color: #eaeaea;
+                        }
+                    }
+
+                    > h4 {
+                        background: #333;
+                        padding: 10px 10px;
+                        margin: 1px 0 0;
+
+                        .menu-icon--right {
+                            top: 6px;
+                            right: 12px;
+                        }
+                    }
+                }
+
+                .menu-icon--right {
+                    position: absolute;
+                    right: 10px;
+                    top: 3px;
+                    font-size: 18px;
+                    font-weight: 600;
+                    width: 20px;
+                    height: 20px;
+                    line-height: 20px;
+                    text-align: center;
+
+                    .fa {
+                        font-size: 13px;
+                        right: -2px;
+                        position: relative;
+                        color: #fff;
+                    }
+                }
+
+                &.nav__sub-menu {
+                    background: #111;
+                    -webkit-font-smoothing: auto;
+
+                    &.padded {
+                        padding: 5px 0;
+                    }
+
+                    li {
+                        > a {
+                            font-size: 13px;
+                            padding: 5px 35px 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+
+                            &:hover {
+                                color: lighten($color--primary, 10);
+                            }
+
+                            &.active {
+                                color: #fff;
+                                font-weight: 600;
+                            }
+                        }
+
+                        .nav-more {
+                            font-size: 13px;
+                            padding: 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+                            display: block;
+                            cursor: pointer;
+                            &:hover {
+                                color: lighten($color--primary, 10);
+                            }
+                        }
+                    }
+                }
+
+                &.nav__inner-menu {
+                    li {
+                        > a {
+                            padding-left: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .log__panel {
+        overflow: scroll;
+        width: 100%;
+        height: 800px;
+        border: 1px solid #ddd;
+        margin-top: 10px;
+        padding: 5px;
+        background-color: white;
+    }
+
+    .compliance__panel {
+        overflow: scroll;
+        width: 100%;
+        height: 400px;
+        border: 1px solid #ddd;
+        margin-top: 10px;
+        padding: 5px;
+        background-color: white;
+    }
+
+    .audit__panel {
+        overflow: scroll;
+        width: 100%;
+        height: 400px;
+        border: 1px solid #ddd;
+        margin-top: 10px;
+        padding: 5px;
+        background-color: white;
+    }
+
+    .app__content {
+        color: #333;
+
+        &.admin {
+            overflow: auto;
+            background-color: #f1f1f1;
+            padding: 0 20px 20px;
+            min-height: 600px;
+        }
+
+        .wrapper--fixed {
+            max-width: 800px;
+        }
+
+        .form-horizontal {
+            margin-top: 40px;
+
+            .control-label {
+                text-align: left;
+                padding-right: 0;
+                font-weight: 600;
+            }
+
+            .form-group {
+                margin-bottom: 25px;
+            }
+
+            .file__upload {
+                position: relative;
+                margin: 0 10px 10px 0;
+                display: inline-block;
+
+                input {
+                    position: absolute;
+                    @include opacity(0);
+                    width: 100%;
+                    height: 100%;
+                    z-index: 5;
+                    top: 0;
+                    left: 0;
+                }
+            }
+
+            .help-text {
+                &.no-margin {
+                    margin: 0;
+                }
+
+                ul,
+                ol {
+                    padding-left: 23px;
+                }
+
+                margin: 10px 0 0 15px;
+                color: #777;
+
+                .help-link {
+                    margin-right: 5px;
+                }
+
+                .btn {
+                    font-size: 13px;
+                }
+            }
+
+            .alert {
+                display: inline-block;
+                padding: 5px 7px;
+                margin: 1em 0 0;
+                top: 1px;
+                position: relative;
+
+                .fa {
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        .banner {
+            background: #fff;
+            border: 1px solid #ddd;
+            padding: .7em 1.5em;
+            font-size: .95em;
+            margin: 2em 0;
+
+            .banner__heading {
+                font-size: 1.5em;
+            }
+
+            .banner__content {
+                width: 80%;
+            }
+
+            &.warning {
+                background: #e60000;
+            }
+        }
+
+        .popover {
+            border-radius: 3px;
+            width: 100%;
+            font-size: .95em;
+        }
+
+        .panel {
+            border: none;
+            background-color: transparent;
+        }
+
+        .panel-default {
+            > .panel-heading {
+                padding: 10px 0;
+                background-color: transparent;
+            }
+
+            .panel-body {
+                padding: 30px 0 10px;
+            }
+        }
+
+        .panel-group {
+            margin-bottom: 50px;
+        }
+
+        .panel-title {
+            font-size: 24px;
+            line-height: 1.5;
+
+            a {
+                text-decoration: none;
+                display: block;
+                @include clearfix;
+
+                &.collapsed {
+                    .fa-minus {
+                        display: none;
+                    }
+
+                    .fa-plus {
+                        display: inline-block;
+                    }
+                }
+
+                .fa {
+                    font-size: 18px;
+                    float: right;
+                    margin-top: 8px;
+                    color: #aaa;
+                }
+
+                .fa-plus {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .member-list-holder {
+        .member-role,
+        .member-drop {
+            position: absolute;
+            right: 15px;
+            top: 8px;
+        }
+    }
+}

webapp/sass/routes/_docs.scss

@@ -0,0 +1,19 @@
+@charset 'UTF-8';
+
+.docs__page {
+    line-height: 1.7;
+    padding-bottom: 20px;
+
+    > div {
+        width: 1170px;
+        margin: 0 auto;
+        padding: 0 15px;
+        max-width: 100%;
+    }
+
+    h1.markdown__heading {
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 1rem;
+        margin: 1em 0 1em;
+    }
+}

webapp/sass/routes/_error-page.scss

@@ -0,0 +1,35 @@
+@charset 'UTF-8';
+
+body {
+    &.error {
+        .container-fluid {
+            display: table;
+            height: 90%;
+        }
+
+        .error__container {
+            max-width: 800px;
+            margin: 0 auto;
+            display: table-cell;
+            vertical-align: top;
+            padding: 5em 0;
+            text-align: left;
+            color: #555;
+        }
+
+        .error__icon {
+            font-size: 4em;
+            color: #ccc;
+        }
+
+        h2 {
+            font-weight: 600;
+            font-size: 1.5em;
+            margin: .8em 0 .5em;
+        }
+
+        p {
+            font-size: 1.2em;
+        }
+    }
+}

webapp/sass/routes/_loading.scss

@@ -0,0 +1,50 @@
+@charset 'UTF-8';
+
+@import "compass/css3/animation";
+
+.loading-screen {
+    display: table;
+    width: 100%;
+    height: 100%;
+    padding: 60px;
+    text-align: center;
+
+    .loading__content {
+        display: table-cell;
+        vertical-align: middle;
+        font-size: 0;
+
+        h3 {
+            font-size: 16px;
+            font-weight: 400;
+            margin: 0 .2em 0;
+            display: inline-block;
+        }
+
+        .round {
+            background-color: #444;
+            width: 4px;
+            height: 4px;
+            display: inline-block;
+            margin: 0 2px;
+            opacity: .1;
+            @include border-radius(10px);
+            @include animation(move .75s infinite linear);
+        }
+
+        @for $i from 1 through 3 {
+            .round-#{$i} {
+                @include animation-delay(.2s*$i);
+            }
+        }
+
+        @include keyframes(move) {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: .1;
+            }
+        }
+    }
+}

webapp/sass/routes/_module.scss

@@ -0,0 +1,11 @@
+// Only for combining all the files in this folder
+@import 'access-history';
+@import 'activity-log';
+@import 'admin-console';
+@import 'docs';
+@import 'error-page';
+@import 'loading';
+@import 'print';
+@import 'settings';
+@import 'signup';
+@import 'statistics';

webapp/sass/routes/_print.scss

@@ -0,0 +1,122 @@
+@charset 'UTF-8';
+
+@media print {
+    * {
+        background: transparent !important;
+        color: black !important;
+        text-shadow: none !important;
+    }
+
+    .post-list__content,
+    .post-list__table,
+    .app__content {
+        display: block;
+    }
+
+    a:not(.mention-link),
+    a:not(.mention-link):visited {
+        text-decoration: underline;
+    }
+
+    a[href^=http]:after {
+        content: ' <' attr(href) '> ';
+    }
+
+    tr,
+    img,
+    pre,
+    blockquote,
+    code,
+    .post,
+    .date-separator {
+        page-break-inside: avoid;
+    }
+
+    .post__header {
+        page-break-after: avoid;
+    }
+
+    thead {
+        display: table-header-group;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    #sidebar-left,
+    #sidebar-right,
+    #channel-header,
+    #post-create,
+    #post-list .more-messages-text,
+    .post .post__header .col__reply,
+    .post .post__content > div.post__img,
+    .attachment__content,
+    .post__body .img-div,
+    .post-image__thumbnail,
+    .post.post--system,
+    #archive-link-home,
+    .channel-intro {
+        display: none;
+    }
+
+    #post-list,
+    #channel_view,
+    #post-list .post-list-holder-by-time {
+        overflow: visible;
+        overflow-y: visible;
+    }
+
+    #app-content {
+        margin-left: 0;
+    }
+
+    #channel_view .inner-wrap.move--left {
+        margin-right: 0;
+    }
+
+    .post-image__columns > div:first-child:before {
+        content: 'Attachments:';
+        display: block;
+        font-weight: bold;
+    }
+
+    .post-image__column {
+        width: inherit;
+        display: inline;
+        height: inherit;
+        background: transparent;
+        border-color: transparent;
+        border: 0 none;
+    }
+
+    .post-image__details {
+        width: 100%;
+        border: 0 none;
+
+        .post-image__name:before {
+            content: '[';
+        }
+
+        .post-image__name:after {
+            content: ': ' attr(href) ']';
+        }
+
+        .post-image__name + div {
+            display: none;
+        }
+    }
+
+
+    .date-separator .separator__hr,
+    .new-separator .separator__hr {
+        top: 1.7em;
+    }
+}

webapp/sass/routes/_settings.scss

@@ -0,0 +1,451 @@
+@charset 'UTF-8';
+
+.user-settings {
+    min-height: 300px;
+    .table-responsive {
+        max-width: 560px;
+        max-height: 300px;
+    }
+}
+
+.modal {
+    .settings-modal {
+        width: 800px;
+        .modal-back {
+            width: 50px;
+            height: 40px;
+            top: 12px;
+            font-size: 27px;
+            font-weight: normal;
+            line-height: 32px;
+            position: absolute;
+            left: 0;
+            text-align: center;
+            .fa {
+                line-height: inherit;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                left: 0;
+            }
+        }
+        .modal-body {
+            padding: 0;
+            margin: 0 auto;
+            min-height: calc(100% - 62px);
+        }
+        li {
+            list-style: none;
+        }
+        label {
+            font-weight: 600;
+        }
+
+        .no-padding--left {
+            padding-left: 0;
+        }
+        .padding-top {
+            padding-top: 7px;
+            &.x2 {
+                padding-top: 14px;
+            }
+            &.x3 {
+                padding-top: 21px;
+            }
+        }
+        .padding-bottom {
+            padding-bottom: 7px;
+            &.x2 {
+                padding-bottom: 14px;
+            }
+            &.x3 {
+                padding-bottom: 21px;
+            }
+            .control-label {
+                font-weight: 600;
+                &.text-left {
+                    text-align: left;
+                }
+            }
+        }
+        .profile-img {
+            width: 128px;
+            height: 128px;
+        }
+        .settings-table {
+            max-width: 1000px;
+            margin: 0 auto;
+            display: table;
+            table-layout: fixed;
+            width: 100%;
+            > div {
+                display: table-cell;
+                vertical-align: top;
+            }
+            .nav {
+                position: fixed;
+                width: 179px;
+                &.position--top {
+                    top: 57px;
+                }
+            }
+            .security-links {
+                margin-right: 20px;
+                .fa {
+                    margin-right: 6px;
+                }
+            }
+            .settings-links {
+                width: 180px;
+            }
+            .settings-content {
+                padding: 0px 20px 30px;
+                .modal-header {
+                    display: none;
+                }
+                .section-min {
+                    padding: 1em 0;
+                    margin-bottom: 0;
+                    cursor: pointer;
+                    position: relative;
+                    @include clearfix;
+                    &:hover {
+                        background: #f9f9f9;
+                    }
+                    &:hover .fa {
+                        display: inline-block;
+                    }
+                    &:hover .section-edit {
+                        text-decoration: underline;
+                    }
+                }
+
+                .section-max {
+                    background: rgba(black, .05);
+                    padding: 1em 0 1.3em;
+                    margin-bottom: 0;
+                    @include clearfix;
+                    .section-title {
+                        margin-bottom: 10px;
+                    }
+                }
+
+                .appearance-section {
+                    .theme-group {
+                        .input-group-addon {
+                            padding: 4px 5px;
+                            width: 40px;
+                        }
+                        img {
+                            border: 1px solid rgba(black, .15);
+                            width: 29px;
+                        }
+                    }
+                    .group--code {
+                        select {
+                            padding-right: 25px;
+                        }
+                        select::-ms-expand {
+                            display: none;
+                        }
+                        &:before {
+                            pointer-events: none;
+                            position: absolute;
+                            top: 11px;
+                            right: 50px;
+                            z-index: 5;
+                            content: '\f0d7';
+                            display: inline-block;
+                            font: normal normal normal 14px/1 FontAwesome;
+                            font-size: inherit;
+                            text-rendering: auto;
+                            -webkit-font-smoothing: antialiased;
+                            -moz-osx-font-smoothing: grayscale;
+                        }
+                        select {
+                            -moz-appearance: none;
+                            -webkit-appearance: none;
+                            appearance: none;
+                        }
+                    }
+                    .premade-themes {
+                        margin-bottom: 10px;
+                        .theme-label {
+                            font-weight: 400;
+                            margin-top: 5px;
+                        }
+                        img {
+                            border: 3px solid transparent;
+                        }
+                        .active {
+                            img {
+                                border-color: $color--primary;
+                            }
+                        }
+                    }
+
+                    .theme-elements {
+                        padding-left: 15px;
+
+                        .element {
+                            margin-right: 10px;
+
+                            &:nth-child(2n) {
+                                margin-right: 0;
+                            }
+                        }
+                    }
+
+                    .theme-elements__header {
+                        margin: 10px 20px 0px 0;
+                        border-bottom: 1px solid #ccc;
+                        padding: 5px 0 10px;
+                        font-size: em(13.5px);
+                        font-weight: 600;
+                        cursor: pointer;
+
+                        .fa-minus {
+                            display: none;
+                        }
+
+                        &.open {
+                            .fa-minus {
+                                display: inline-block;
+                            }
+                            .fa-plus {
+                                display: none;
+                            }
+                        }
+
+                        .header__icon {
+                            float: right;
+                            @include opacity(.5);
+                        }
+                    }
+
+                    .theme-elements__body {
+                        padding-top: 5px;
+                        display: none;
+                        @include legacy-pie-clearfix;
+                        background: rgba(255, 255, 255, .05);
+                        padding: 20px 0 0 20px;
+                        margin: 0 20px 0 0;
+                        @include border-radius(0 0 3px 3px);
+                    }
+
+                    .custom-label {
+                        white-space: nowrap;
+                        font-weight: normal;
+                        font-size: 12px;
+                        width: 100%;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        margin-bottom: 0;
+                    }
+                    .input-group-addon {
+                        background: transparent;
+                    }
+                    .radio {
+                        label {
+                            font-weight: 600;
+                        }
+                    }
+                }
+
+                .section-title {
+                    margin-bottom: 5px;
+                    font-weight: 600;
+                    padding-right: 50px;
+                }
+
+                .section-edit {
+                    text-align: right;
+                    margin-bottom: 5px;
+                    .fa {
+                        margin-right: 5px;
+                        font-size: 12px;
+                        @include opacity(.5);
+                        display: none;
+                        &.fa-chevron-down {
+                            top: -1px;
+                            margin-right: 0;
+                            position: relative;
+                        }
+                    }
+                }
+
+                .section-describe {
+                    @include opacity(.7);
+                    white-space: pre;
+                    @include clearfix;
+                    text-overflow: ellipsis;
+                }
+
+                .divider-dark {
+                    border-bottom: 1px solid #aaa;
+                }
+
+                .divider-light {
+                    border-bottom: 1px solid lightgrey;
+                }
+
+                .setting-list {
+                    padding: 0;
+                    list-style-type: none;
+                }
+
+                .setting-list__hint {
+                    margin-top: 20px;
+                }
+
+                .mentions-input {
+                    margin-top: 10px;
+                }
+
+                .setting-list-item {
+                    margin-top: 7px;
+                }
+                .has-error {
+                    color: #a94442;
+                }
+
+                .file-status {
+                    font-size: 13px;
+                    margin-top: 8px;
+                    color: #555;
+                }
+
+                .confirm-import {
+                    padding: 4px 10px;
+                    margin: 10px 0;
+                }
+            }
+        }
+    }
+    .nav-pills {
+        > li {
+            margin: 0;
+            a {
+                padding: 8px 5px 8px 15px;
+                border-radius: 0;
+                color: #777;
+            }
+            .glyphicon {
+                width: 25px;
+                top: 2px;
+            }
+            &:hover {
+                a {
+                    background-color: rgba(black, .1);
+                }
+            }
+            &.active {
+                a {
+                    color: #111;
+                    background-color: #e1e1e1;
+                    &: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;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+    }
+    h3 {
+        font-size: em(20px);
+    }
+}
+
+.channel-settings {
+    padding: 0 10px;
+}
+
+.tab-header {
+    margin-bottom: 1em;
+}
+
+.setting-name {
+    color: grey;
+    font-weight: 500;
+}
+
+.sel-btn {
+    margin-right: 5px;
+}
+
+.member-div {
+    border-bottom: 1px solid lightgrey;
+    position: relative;
+    padding: 2px;
+    margin: 0;
+    width: 100%;
+    &:first-child {
+        border-top: 1px solid lightgrey;
+    }
+    .post-profile-img {
+        @include border-radius(50px);
+        margin-right: 8px;
+    }
+}
+
+.member-role,
+.member-drop {
+    .fa {
+        margin-right: 5px;
+        @include opacity(.5);
+        font-size: 12px;
+    }
+
+    .member-menu {
+        top: -50%;
+        right: 110%;
+    }
+}
+
+.member-invite {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+}
+
+.member-menu {
+    right: 0px;
+    left: auto;
+}
+
+.member-list {
+    width: 100%;
+    overflow-x: visible;
+}
+
+.member-page {
+    padding-top: 50px;
+}
+
+.active-border {
+    border: 1px solid red;
+}
+
+.color-btn {
+    margin: 4px;
+}
+
+.no-resize {
+    resize: none;
+}

webapp/sass/routes/_signup.scss

@@ -0,0 +1,440 @@
+@charset 'UTF-8';
+
+.signup-header {
+    width: 100%;
+    line-height: 33px;
+    padding: 0 1em .2em;
+    background: $bg--gray;
+
+    .fa {
+        margin-right: 5px;
+    }
+}
+.signup-team__container {
+    padding: 100px 0px 50px 0px;
+    max-width: 380px;
+    margin: 0 auto;
+    position: relative;
+
+    &.padding--less {
+        padding-top: 50px;
+    }
+
+    .form-control:focus {
+        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6));
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+        line-height: 1.3;
+    }
+
+    h1 {
+        font-weight: 600;
+    }
+
+    h2 {
+        font-weight: 600;
+        margin-bottom: .8em;
+        letter-spacing: -.5px;
+        font-size: em(30px);
+    }
+
+    h3 {
+        font-weight: 600;
+        margin: 0 0 1.3em 0;
+        font-size: 1.5em;
+    }
+
+    h4 {
+        font-size: em(20px);
+        font-weight: 600;
+        margin-bottom: 1em;
+    }
+
+    h5 {
+        font-size: em(16px);
+    }
+
+    hr {
+        margin: 2em 0;
+    }
+
+    p {
+        color: #555;
+        line-height: 1.5;
+        margin-bottom: 1em;
+    }
+
+    .input-group {
+        &.input-group--limit {
+            table-layout: fixed;
+            width: 100%;
+
+            .tooltip-inner {
+                word-wrap: break-word;
+            }
+
+            .form-control {
+                text-align: left;
+                display: table-cell;
+                width: 100%;
+            }
+
+            .input-group-addon {
+                text-align: left;
+                width: 50%;
+                display: table-cell;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    .inner__content {
+        padding: 0 1rem;
+        margin: 30px 0 20px;
+    }
+
+    .block--gray {
+        background: #f2f2f2;
+        display: inline-block;
+        padding: .85em 1.2em;
+        font-weight: 600;
+        @include border-radius(3px);
+    }
+
+    form {
+        margin-bottom: .8em;
+    }
+
+    .signup-team-confirm__container {
+        padding: 100px 0px 100px 0px;
+    }
+
+    .signup-team-logo {
+        display: none;
+        width: 210px;
+        margin: 0 0 2em 0;
+    }
+
+    .signup-team-login {
+        padding-bottom: 10px;
+        font-weight: 600;
+    }
+
+    .signup-team__name {
+        margin: .5em 0 0;
+        font-size: 2.2em;
+        font-weight: 600;
+        padding-left: 1rem;
+    }
+
+    .signup-team__subdomain {
+        margin: .2em 0 1.2em;
+        font-size: 1.5em;
+        padding-left: 1rem;
+        font-weight: 300;
+        text-transform: uppercase;
+    }
+
+    .form-control {
+        height: em(38px);
+    }
+
+    .or__container {
+        height: 1px;
+        background: #ddd;
+        text-align: left;
+        margin: 2em 0;
+
+        span {
+            width: 40px;
+            top: -10px;
+            position: relative;
+            font-size: 1.14286em;
+            line-height: 20px;
+            font-weight: 600;
+            background: #fff;
+            display: inline-block;
+            text-align: center;
+        }
+    }
+
+    ul {
+        margin-bottom: 0;
+        padding-left: 18px;
+    }
+
+    .signup__email-container {
+        margin-left: 1rem;
+    }
+
+    .btn {
+        font-size: 1em;
+        padding: em(7px) em(15px);
+        font-weight: 600;
+        margin-right: 5px;
+
+        .fa {
+            font-size: 17px;
+            margin-right: 8px;
+        }
+
+        .icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            @include background-size(100% 100%);
+            display: inline-block;
+        }
+
+        &.btn-custom-login {
+            display: block;
+            min-width: 200px;
+            width: 200px;
+            padding: 0 1em;
+            margin: 1em 1rem;
+            height: 40px;
+            line-height: 34px;
+            color: #fff;
+            @include border-radius(2px);
+
+            &.gitlab {
+                background: #548;
+
+                &:hover {
+                    background: darken(#548, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+
+                .icon {
+                    background-image: url('../images/gitlabLogo.png');
+                }
+            }
+
+            &.google {
+                background: #dd4b39;
+
+                &:hover {
+                    background: darken(#dd4b39, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+
+                .icon {
+                    background-image: url('../images/googleLogo.png');
+                }
+            }
+
+            &.ldap {
+                background: #dd4b39;
+
+                &:hover {
+                    background: darken(#dd4b39, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+            }
+
+            &.email {
+                background: #2389d7;
+
+                &:hover {
+                    background: darken(#2389d7, 10%);
+                }
+
+                span {
+                    vertical-align: middle;
+                }
+            }
+
+            &.btn-full {
+                width: 100%;
+                text-align: left;
+                padding-left: 35px;
+            }
+        }
+
+        &.btn-default {
+            color: #444;
+        }
+
+        .glyphicon {
+            &.glyphicon-ok,
+            &.glyphicon-refresh {
+                margin-right: .5em;
+                left: -2px;
+                font-size: .9em;
+            }
+
+            &.glyphicon-chevron-right {
+                font-size: .8em;
+                right: -2px;
+                top: 0px;
+            }
+
+            &.glyphicon-chevron-left {
+                font-size: .8em;
+                left: -2px;
+                top: 0px;
+            }
+        }
+    }
+
+    .has-error {
+        .control-label {
+            background: #f2f2f2;
+            padding: .7em 1em;
+            @include border-radius(3px);
+            margin: 1em 0 0;
+            font-size: 14px;
+            font-weight: normal;
+            color: #999;
+            width: 100%;
+
+            &:before {
+                @extend .fa;
+                content: '\f071';
+                margin-right: 4px;
+                color: #aaa;
+            }
+        }
+    }
+
+    .reset-form {
+        @include border-radius(3px);
+        position: relative;
+        font-size: .95em;
+        p {
+            color: inherit;
+        }
+    }
+
+    // Modifier Styles
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        &.margin--top-none {
+            margin-top: 0;
+        }
+
+        &.margin--bottom-none {
+            margin-bottom: 0;
+        }
+
+        &.margin--less {
+            margin-bottom: .3em;
+        }
+
+        &.sub-heading {
+            font-weight: 400;
+            margin-bottom: 0;
+        }
+
+        &.color--light {
+            font-weight: 300;
+        }
+    }
+
+    p {
+        &.margin--extra {
+            margin-bottom: 1.5em;
+        }
+
+        &.margin--less {
+            margin-bottom: .3em;
+        }
+
+        .black,
+        &.black {
+            color: #000;
+        }
+    }
+
+    .color--light {
+        color: #777;
+    }
+
+    .margin--extra {
+        margin-top: 3em;
+    }
+
+    .margin--extra-2x {
+        margin-top: 6em;
+    }
+}
+
+.signup-team-all {
+    margin: 0 0 20px;
+    border: 1px solid #ddd;
+    @include border-radius(2px);
+    .signup-team-dir {
+        background: #fafafa;
+        border-top: 1px solid #d5d5d5;
+
+        &:first-child {
+            border: none;
+        }
+
+        a {
+            color: inherit;
+            display: block;
+            padding: 0 15px;
+            line-height: 3.5em;
+            height: 3.5em;
+            font-size: 1.1em;
+        }
+    }
+
+    .signup-team-dir__name {
+        white-space: nowrap;
+        float: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 90%;
+    }
+
+    .signup-team-dir__arrow {
+        float: right;
+        font-size: .9em;
+        color: #999;
+        line-height: 3.5em;
+    }
+}
+
+
+.authorize-box {
+    margin: 100px auto;
+    width: 500px;
+    height: 280px;
+    border: 1px solid black;
+}
+
+.authorize-inner {
+    padding: 20px;
+}
+
+.authorize-btn {
+    margin-right: 6px;
+}
+
+.verify_panel {
+    margin: 60px auto auto auto;
+    max-width: 380px;
+}

webapp/sass/routes/_statistics.scss

@@ -0,0 +1,85 @@
+@charset 'UTF-8';
+
+.team_statistics {
+    .total-count {
+        margin: 1em 0;
+        text-align: center;
+        background: #fff;
+        border: 1px solid #ddd;
+        width: 100%;
+        @include border-radius(3px);
+
+        .title {
+            font-weight: 400;
+            padding: 7px 10px;
+            border-bottom: 1px solid #ddd;
+            text-align: left;
+            font-size: 13px;
+
+            .fa {
+                float: right;
+                margin: 0px 0 0;
+                color: #555;
+                font-size: 16px;
+            }
+        }
+
+        .content {
+            font-size: 30px;
+            font-weight: 600;
+            color: #555;
+            padding: .3em 0 .35em;
+            overflow: auto;
+        }
+    }
+
+    .total-count--day {
+        width: 760px;
+        height: 275px;
+        border: 1px solid #ddd;
+        padding: 5px 10px 10px 10px;
+        margin: 10px 10px 10px 10px;
+        background: #fff;
+        clear: both;
+
+        > div {
+            font-size: 18px;
+            font-weight: 300;
+        }
+    }
+
+    .recent-active-users {
+        table {
+            width: 100%;
+            table-layout: fixed;
+        }
+
+        .content {
+            max-height: 400px;
+            overflow: auto;
+            padding: 0;
+        }
+
+        tr {
+            &:first-child {
+                td {
+                    border-top: none;
+                }
+            }
+
+            td {
+                font-weight: 400;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                font-size: 13px;
+                border-left: 1px solid #ddd;
+                border-top: 1px solid #ddd;
+                padding: 5px 5px 6px;
+                @include clearfix;
+                &:first-child {
+                    border-left: none;
+                }
+            }
+        }
+    }
+}

webapp/sass/styles.scss

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/utilities";
+@import "compass/css3";
+
+// styles.scss
+@import 'vendors/module';
+@import 'utils/module';
+@import 'base/module';
+@import 'routes/module';
+@import 'components/module';
+@import 'layout/module';
+@import 'responsive/module';

webapp/sass/utils/_animations.scss

@@ -0,0 +1,19 @@
+@charset 'UTF-8';
+
+@-webkit-keyframes spin2 {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: scale(1) rotate(0deg);
+    }
+    to {
+        transform: scale(1) rotate(360deg);
+    }
+}

webapp/sass/utils/_functions.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+@function em($pixels, $context: 14px) {
+	@return #{$pixels/$context}em
+}
+
+%popover-box-shadow {
+    @include box-shadow(rgba(black, .175) 1px -3px 12px);
+}

webapp/sass/utils/_mixins.scss

@@ -0,0 +1,8 @@
+@charset 'UTF-8';
+
+@mixin file-icon($path) {
+    background: #fff url($path);
+    background-position: center;
+    background-repeat: no-repeat;
+    @include background-size(60px auto);
+}

webapp/sass/utils/_module.scss

@@ -0,0 +1,5 @@
+// Only for combining all the files in this folder
+@import 'variables';
+@import 'animations';
+@import 'functions';
+@import 'mixins';

webapp/sass/utils/_variables.scss

@@ -0,0 +1,13 @@
+@charset 'UTF-8';
+
+// Color Variables
+$color--primary: rgb(35, 137, 215);
+$color--primary--hover: darken($color--primary, 10%);
+$bg--gray: rgb(245, 245, 245);
+$bg--white: rgb(255, 255, 255);
+
+// Page Variables
+$border-gray: 1px solid #ddd;
+
+// Random variables
+$border-rad: 1px;

webapp/sass/vendors/_colorpicker.scss

@@ -0,0 +1,253 @@
+@charset 'UTF-8';
+
+/*!
+ * Bootstrap Colorpicker
+ * http://mjolnic.github.io/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+
+.colorpicker-saturation {
+    float: left;
+    width: 100px;
+    height: 100px;
+    cursor: crosshair;
+    background-image: url('../images/bootstrap-colorpicker/saturation.png');
+}
+
+.colorpicker-saturation i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 5px;
+    height: 5px;
+    margin: -4px 0 0 -4px;
+    border: 1px solid #000;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.colorpicker-saturation i b {
+    display: block;
+    width: 5px;
+    height: 5px;
+    border: 1px solid #fff;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.colorpicker-hue,
+.colorpicker-alpha {
+    float: left;
+    width: 15px;
+    height: 100px;
+    margin-bottom: 4px;
+    margin-left: 4px;
+    cursor: row-resize;
+}
+
+.colorpicker-hue i,
+.colorpicker-alpha i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin-top: -1px;
+    background: #000;
+    border-top: 1px solid #fff;
+}
+
+.colorpicker-hue {
+    background-image: url('../images/bootstrap-colorpicker/hue.png');
+}
+
+.colorpicker-alpha {
+    display: none;
+    background-image: url('../images/bootstrap-colorpicker/alpha.png');
+}
+
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-alpha {
+    background-size: contain;
+}
+
+.colorpicker {
+    top: 0;
+    left: 0;
+    z-index: 2500;
+    min-width: 130px;
+    padding: 4px;
+    margin-top: 1px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    *zoom: 1;
+}
+
+.colorpicker:before,
+.colorpicker:after {
+    display: table;
+    line-height: 0;
+    content: '';
+}
+
+.colorpicker:after {
+    clear: both;
+}
+
+.colorpicker:before {
+    position: absolute;
+    top: -7px;
+    left: 6px;
+    display: inline-block;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #ccc;
+    border-left: 7px solid transparent;
+    border-bottom-color: rgba(0, 0, 0, .2);
+    content: '';
+}
+
+.colorpicker:after {
+    position: absolute;
+    top: -6px;
+    left: 7px;
+    display: inline-block;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent;
+    content: '';
+}
+
+.colorpicker div {
+    position: relative;
+}
+
+.colorpicker.colorpicker-with-alpha {
+    min-width: 140px;
+}
+
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+    display: block;
+}
+
+.colorpicker-color {
+    height: 10px;
+    margin-top: 5px;
+    clear: both;
+    background-image: url('../images/bootstrap-colorpicker/alpha.png');
+    background-position: 0 100%;
+}
+
+.colorpicker-color div {
+    height: 10px;
+}
+
+.colorpicker-selectors {
+    display: none;
+    height: 10px;
+    margin-top: 5px;
+    clear: both;
+}
+
+.colorpicker-selectors i {
+    float: left;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+}
+
+.colorpicker-selectors i + i {
+    margin-left: 3px;
+}
+
+.colorpicker-element .input-group-addon i,
+.colorpicker-element .add-on i {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: text-top;
+    cursor: pointer;
+}
+
+.colorpicker.colorpicker-inline {
+    position: relative;
+    z-index: auto;
+    display: inline-block;
+    float: none;
+}
+
+.colorpicker.colorpicker-horizontal {
+    width: 110px;
+    height: auto;
+    min-width: 110px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+    margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+    width: 100px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+    float: left;
+    width: 100px;
+    height: 15px;
+    margin-bottom: 4px;
+    margin-left: 0;
+    cursor: col-resize;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 1px;
+    height: 15px;
+    margin-top: 0;
+    background: #fff;
+    border: none;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+    background-image: url('../images/bootstrap-colorpicker/hue-horizontal.png');
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+    background-image: url('../images/bootstrap-colorpicker/alpha-horizontal.png');
+}
+
+.colorpicker.colorpicker-hidden {
+    display: none;
+}
+
+.colorpicker.colorpicker-visible {
+    display: block;
+}
+
+.colorpicker-inline.colorpicker-visible {
+    display: inline-block;
+}
+
+.colorpicker-right:before {
+    right: 6px;
+    left: auto;
+}
+
+.colorpicker-right:after {
+    right: 7px;
+    left: auto;
+}

webapp/sass/vendors/_module.scss

@@ -0,0 +1,4 @@
+// Only for combining all the files in this folder
+@import 'perfect-scrollbar';
+@import 'font-awesome';
+@import 'colorpicker';

webapp/sass/vendors/_perfect-scrollbar.scss

@@ -0,0 +1,141 @@
+@charset 'UTF-8';
+
+.ps-container {
+    overflow: hidden !important;
+}
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #999;
+}
+.ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+    filter: alpha(opacity=0);
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 3px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 8px;
+}
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-transition: background-color .2s linear;
+    -moz-transition: background-color .2s linear;
+    -o-transition: background-color .2s linear;
+    transition: background-color .2s linear;
+    bottom: 0;
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px;
+}
+.ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+    filter: alpha(opacity=0);
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 3px;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+}
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-transition: background-color .2s linear;
+    -moz-transition: background-color .2s linear;
+    -o-transition: background-color .2s linear;
+    transition: background-color .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 8px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #999;
+}
+.ps-container:hover > .ps-scrollbar-x-rail,
+.ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: .6;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
+    filter: alpha(opacity=60);
+}
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+    background-color: #999;
+}