Converting to Webpack. Stage 1.

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