Merge pull request #2429 from asaadmahmoodspin/ui-improvements

PLT-963 - Improving scss structure
2016-03-15 14:05:05 -04:00
--- a/templates/error.html
+++ b/templates/error.html
@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html>
 {{template "head" . }}
-<body class="white error">
+<body class="sticky error">
    <div class="container-fluid">
        <div class="error__container">
            <div class="error__icon">
--- a/web/react/components/admin_console/admin_controller.jsx
+++ b/web/react/components/admin_console/admin_controller.jsx
@@ -172,7 +172,10 @@ export default class AdminController extends React.Component {
        }

        return (
-            <div id='admin_controller'>
+            <div
+                id='admin_controller'
+                className='admin-controller'
+            >
                <div
                    className='sidebar--menu'
                    id='sidebar-menu'
@@ -186,7 +189,7 @@ export default class AdminController extends React.Component {
                    removeSelectedTeam={this.removeSelectedTeam}
                    addSelectedTeam={this.addSelectedTeam}
                />
-                <div className='inner__wrap channel__wrap'>
+                <div className='inner-wrap channel__wrap'>
                    <div className='row header'>
                    </div>
                    <div className='row main'>
--- a/web/react/components/admin_console/team_users.jsx
+++ b/web/react/components/admin_console/team_users.jsx
@@ -163,7 +163,7 @@ export default class UserList extends React.Component {
                    className='form-horizontal'
                    role='form'
                >
-                    <table className='table more-table member-list-holder'>
+                    <table className='more-modal__list member-list-holder'>
                        <tbody>
                            {memberList}
                        </tbody>
--- a/web/react/components/admin_console/user_item.jsx
+++ b/web/react/components/admin_console/user_item.jsx
@@ -363,15 +363,15 @@ export default class UserItem extends React.Component {

        return (
            <tr>
-                <td className='row member-div padding--equal'>
+                <td className='more-modal__row'>
                    <img
-                        className='post-profile-img pull-left'
+                        className='more-modal__image pull-left'
                        src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
                        height='36'
                        width='36'
                    />
-                    <span className='more-name'>{Utils.getDisplayName(user)}</span>
-                    <span className='more-description'>{email}</span>
+                    <span className='more-modal__name'>{Utils.getDisplayName(user)}</span>
+                    <span className='more-modal__description'>{email}</span>
                    <div className='dropdown member-drop'>
                        <a
                            href='#'
--- a/web/react/components/authorize.jsx
+++ b/web/react/components/authorize.jsx
@@ -38,7 +38,7 @@ export default class Authorize extends React.Component {
    render() {
        return (
            <div className='container-fluid'>
-                <div className='oauth-prompt'>
+                <div className='prompt'>
                    <div className='prompt__heading'>
                        <div className='prompt__app-icon'>
                            <img
--- a/web/react/components/center_panel.jsx
+++ b/web/react/components/center_panel.jsx
@@ -103,7 +103,7 @@ export default class CenterPanel extends React.Component {
        }

        return (
-            <div className='inner__wrap channel__wrap'>
+            <div className='inner-wrap channel__wrap'>
                <div className='row header'>
                    <div id='navbar'>
                        <Navbar/>
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -49,8 +49,8 @@ class FileAttachment extends React.Component {
                        if (name in self.refs) {
                            var imgDiv = ReactDOM.findDOMNode(self.refs[name]);

-                            $(imgDiv).removeClass('post__load');
-                            $(imgDiv).addClass('post__image');
+                            $(imgDiv).removeClass('post-image__load');
+                            $(imgDiv).addClass('post-image');

                            var width = this.width || $(this).width();
                            var height = this.height || $(this).height();
@@ -134,7 +134,7 @@ class FileAttachment extends React.Component {
            thumbnail = (
                <div
                    ref={filename}
-                    className='post__load'
+                    className='post-image__load'
                    style={{backgroundImage: 'url(/static/images/load.gif)'}}
                />
            );
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -41,15 +41,15 @@ export default class FilePreview extends React.Component {
                previews.push(
                    <div
                        key={filename}
-                        className='preview-div'
+                        className='file-preview'
                        data-filename={originalFilename}
                    >
                        <img
-                            className='preview-img'
+                            className='file-preview__image'
                            src={filename}
                        />
                        <a
-                            className='remove-preview'
+                            className='file-preview__remove'
                            onClick={this.handleRemove}
                        >
                            <i className='glyphicon glyphicon-remove'/>
@@ -60,12 +60,12 @@ export default class FilePreview extends React.Component {
                previews.push(
                    <div
                        key={filename}
-                        className='preview-div custom-file'
+                        className='file-preview custom-file'
                        data-filename={originalFilename}
                    >
                        <div className={'file-icon ' + Utils.getIconClassName(type)}/>
                        <a
-                            className='remove-preview'
+                            className='file-preview__remove'
                            onClick={this.handleRemove}
                        >
                            <i className='glyphicon glyphicon-remove'/>
@@ -80,7 +80,7 @@ export default class FilePreview extends React.Component {
                <div
                    ref={clientId}
                    key={clientId}
-                    className='preview-div'
+                    className='file-preview'
                    data-client-id={clientId}
                >
                    <img
@@ -88,7 +88,7 @@ export default class FilePreview extends React.Component {
                        src='/static/images/load.gif'
                    />
                    <a
-                        className='remove-preview'
+                        className='file-preview__remove'
                        onClick={this.handleRemove}
                    >
                        <i className='glyphicon glyphicon-remove'/>
@@ -98,7 +98,7 @@ export default class FilePreview extends React.Component {
        });

        return (
-            <div className='preview-container'>
+            <div className='file-preview__container'>
                {previews}
            </div>
        );
--- a/web/react/components/filtered_user_list.jsx
+++ b/web/react/components/filtered_user_list.jsx
@@ -27,10 +27,6 @@ class FilteredUserList extends React.Component {
        };
    }

-    componentDidMount() {
-        $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
-    }
-
    componentDidUpdate(prevProps, prevState) {
        if (prevState.filter !== this.state.filter) {
            $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0);
@@ -109,7 +105,7 @@ class FilteredUserList extends React.Component {
                </div>
                <div
                    ref='userList'
-                    className='user-list'
+                    className='more-modal__list'
                >
                    <UserList
                        users={users}
--- a/web/react/components/get_link_modal.jsx
+++ b/web/react/components/get_link_modal.jsx
@@ -81,7 +81,7 @@ export default class GetLinkModal extends React.Component {
        var copyLinkConfirm = null;
        if (this.state.copiedLink) {
            copyLinkConfirm = (
-                <p className='alert alert-success copy-link-confirm'>
+                <p className='alert alert-success alert--confirm'>
                    <i className='fa fa-check'></i>
                    <FormattedMessage
                        id='get_link.clipboard'
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -95,17 +95,18 @@ export default class MoreChannels extends React.Component {
        }

        return (
-            <tr key={channel.id}>
-                <td className='more-row'>
-                    <div className='more-details'>
-                        <p className='more-name'>{channel.display_name}</p>
-                        <p className='more-description'>{channel.purpose}</p>
-                    </div>
-                    <div className='more-actions'>
-                        {joinButton}
-                    </div>
-                </td>
-            </tr>
+            <div
+                className='more-modal__row'
+                key={channel.id}
+            >
+                <div className='more-modal__details'>
+                    <p className='more-modal__name'>{channel.display_name}</p>
+                    <p className='more-modal__description'>{channel.purpose}</p>
+                </div>
+                <div className='more-modal__actions'>
+                    {joinButton}
+                </div>
+            </div>
        );
    }
    render() {
@@ -127,11 +128,9 @@ export default class MoreChannels extends React.Component {
                moreChannels = <LoadingScreen/>;
            } else if (channels.length) {
                moreChannels = (
-                    <table className='more-table table'>
-                        <tbody>
-                            {channels.map(this.createChannelRow)}
-                        </tbody>
-                    </table>
+                    <div className='more-modal__list'>
+                        {channels.map(this.createChannelRow)}
+                    </div>
                );
            } else {
                moreChannels = (
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -66,7 +66,7 @@ export default class Navbar extends React.Component {
    componentDidMount() {
        ChannelStore.addChangeListener(this.onChange);
        ChannelStore.addExtraInfoChangeListener(this.onChange);
-        $('.inner__wrap').click(this.hideSidebars);
+        $('.inner-wrap').click(this.hideSidebars);
        attachFastClick(document.body);
    }
    componentWillUnmount() {
@@ -101,7 +101,7 @@ export default class Navbar extends React.Component {
            });

            if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
-                $('.inner__wrap').removeClass('move--right move--left move--left-small');
+                $('.inner-wrap').removeClass('move--right move--left move--left-small');
                $('.sidebar--left').removeClass('move--right');
                $('.sidebar--right').removeClass('move--left');
                $('.sidebar--menu').removeClass('move--left');
@@ -109,11 +109,11 @@ export default class Navbar extends React.Component {
        }
    }
    toggleLeftSidebar() {
-        $('.inner__wrap').toggleClass('move--right');
+        $('.inner-wrap').toggleClass('move--right');
        $('.sidebar--left').toggleClass('move--right');
    }
    toggleRightSidebar() {
-        $('.inner__wrap').toggleClass('move--left-small');
+        $('.inner-wrap').toggleClass('move--left-small');
        $('.sidebar--menu').toggleClass('move--left');
    }
    showSearch() {
--- a/web/react/components/not_logged_in.jsx
+++ b/web/react/components/not_logged_in.jsx
@@ -5,7 +5,7 @@ import {FormattedMessage} from 'mm-intl';

 export default class NotLoggedIn extends React.Component {
    componentDidMount() {
-        $('body').attr('class', 'white');
+        $('body').attr('class', 'sticky');
        $('#root').attr('class', 'container-fluid');
    }
    componentWillUnmount() {
@@ -14,7 +14,7 @@ export default class NotLoggedIn extends React.Component {
    }
    render() {
        return (
-            <div className='inner__wrap'>
+            <div className='inner-wrap'>
                <div className='row content'>
                    {this.props.children}
                    <div className='footer-push'></div>
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -110,25 +110,25 @@ export default class PopoverListMembers extends React.Component {
                if (name) {
                    popoverHtml.push(
                        <div
-                            className='text-nowrap'
+                            className='more-modal__row'
                            key={'popover-member-' + i}
                        >

                            <img
-                                className='profile-img rounded pull-left'
+                                className='more-modal__image'
                                width='26px'
                                height='26px'
                                src={`/api/v1/users/${m.id}/image?time=${m.update_at}`}
                            />
-                            <div className='pull-left'>
+                            <div className='more-modal__details'>
                                <div
-                                    className='more-name'
+                                    className='more-modal__name'
                                >
                                    {name}
                                </div>
                            </div>
                            <div
-                                className='pull-right'
+                                className='more-modal__actions'
                            >
                                {button}
                            </div>
@@ -185,7 +185,7 @@ export default class PopoverListMembers extends React.Component {
                        title={title}
                        id='member-list-popover'
                    >
-                        {popoverHtml}
+                        <div className='more-modal__list'>{popoverHtml}</div>
                    </Popover>
                </Overlay>
            </div>
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -164,7 +164,7 @@ class SearchBar extends React.Component {
                </span>
                <form
                    role='form'
-                    className='search__form relative-div'
+                    className='search__form'
                    onSubmit={this.handleSubmit}
                    style={{overflow: 'visible'}}
                    autoComplete='off'
--- a/web/react/components/search_results_item.jsx
+++ b/web/react/components/search_results_item.jsx
@@ -25,7 +25,7 @@ export default class SearchResultsItem extends React.Component {

        if ($(window).width() < 768) {
            $('.sidebar--right').removeClass('move--left');
-            $('.inner__wrap').removeClass('move--left');
+            $('.inner-wrap').removeClass('move--left');
        }
    }

--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -55,27 +55,27 @@ export default class SidebarRight extends React.Component {
        var windowWidth = $(window).outerWidth();
        var sidebarRightWidth = $('.sidebar--right').outerWidth();

-        $('.inner__wrap').removeClass('.move--right');
-        $('.inner__wrap').addClass('move--left');
+        $('.inner-wrap').removeClass('.move--right');
+        $('.inner-wrap').addClass('move--left');
        $('.sidebar--left').removeClass('move--right');
        $('.sidebar--right').addClass('move--left');

        //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
        if (this.state.search_visible || this.state.post_right_visible) {
            if (windowWidth > 960) {
-                $('.inner__wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
+                $('.inner-wrap').velocity({marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
                $('.sidebar--right').velocity({translateX: 0}, {duration: 500, easing: 'easeOutSine'});
            } else {
-                $('.inner__wrap, .sidebar--right').attr('style', '');
+                $('.inner-wrap, .sidebar--right').attr('style', '');
            }
        } else {
            if (windowWidth > 960) {
-                $('.inner__wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
+                $('.inner-wrap').velocity({marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
                $('.sidebar--right').velocity({translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
            } else {
-                $('.inner__wrap, .sidebar--right').attr('style', '');
+                $('.inner-wrap, .sidebar--right').attr('style', '');
            }
-            $('.inner__wrap').removeClass('move--left').removeClass('move--right');
+            $('.inner-wrap').removeClass('move--left').removeClass('move--right');
            $('.sidebar--right').removeClass('move--left');
            return (
                <div></div>
--- a/web/react/components/suggestion/at_mention_provider.jsx
+++ b/web/react/components/suggestion/at_mention_provider.jsx
@@ -24,7 +24,7 @@ class AtMentionSuggestion extends React.Component {
                    defaultMessage='Notifies everyone in the team'
                />
            );
-            icon = <i className='mention-img fa fa-users fa-2x'/>;
+            icon = <i className='mention__image fa fa-users fa-2x'/>;
        } else if (item.username === 'channel') {
            username = 'channel';
            description = (
@@ -33,19 +33,19 @@ class AtMentionSuggestion extends React.Component {
                    defaultMessage='Notifies everyone in the channel'
                />
            );
-            icon = <i className='mention-img fa fa-users fa-2x'/>;
+            icon = <i className='mention__image fa fa-users fa-2x'/>;
        } else {
            username = item.username;
            description = Utils.getFullName(item);
            icon = (
                <img
-                    className='mention-img'
+                    className='mention__image'
                    src={'/api/v1/users/' + item.id + '/image?time=' + item.update_at}
                />
            );
        }

-        let className = 'mentions-name';
+        let className = 'mentions__name';
        if (isSelection) {
            className += ' suggestion--selected';
        }
@@ -58,11 +58,11 @@ class AtMentionSuggestion extends React.Component {
                <div className='pull-left'>
                    {icon}
                </div>
-                <div className='pull-left mention-align'>
+                <div className='pull-left mention--align'>
                    <span>
                        {'@' + username}
                    </span>
-                    <span className='mention-fullname'>
+                    <span className='mention__fullname'>
                        {description}
                    </span>
                </div>
--- a/web/react/components/suggestion/command_provider.jsx
+++ b/web/react/components/suggestion/command_provider.jsx
@@ -7,7 +7,7 @@ class CommandSuggestion extends React.Component {
    render() {
        const {item, isSelection, onClick} = this.props;

-        let className = 'command-name';
+        let className = 'command';
        if (isSelection) {
            className += ' suggestion--selected';
        }
--- a/web/react/components/suggestion/suggestion_list.jsx
+++ b/web/react/components/suggestion/suggestion_list.jsx
@@ -111,7 +111,7 @@ export default class SuggestionList extends React.Component {
            <div className='suggestion-list suggestion-list--top'>
                <div
                    ref='content'
-                    className='suggestion-content suggestion-content--top'
+                    className='suggestion-list__content suggestion-list__content--top'
                >
                    {items}
                </div>
--- a/web/react/components/user_list.jsx
+++ b/web/react/components/user_list.jsx
@@ -21,23 +21,19 @@ export default class UserList extends React.Component {
            });
        } else {
            content = (
-                <tr key='no-users-found'>
-                    <td>
-                        <FormattedMessage
-                            id='user_list.notFound'
-                            defaultMessage='No users found :('
-                        />
-                    </td>
-                </tr>
+                <div key='no-users-found'>
+                    <FormattedMessage
+                        id='user_list.notFound'
+                        defaultMessage='No users found :('
+                    />
+                </div>
            );
        }

        return (
-            <table className='more-table table'>
-                <tbody>
-                    {content}
-                </tbody>
-            </table>
+            <div>
+                {content}
+            </div>
        );
    }
 }
--- a/web/react/components/user_list_row.jsx
+++ b/web/react/components/user_list_row.jsx
@@ -25,32 +25,32 @@ export default function UserListRow({user, actions}) {
    });

    return (
-        <tr>
-            <td
-                key={user.id}
-                style={{display: 'flex'}}
+        <div
+            key={user.id}
+            className='more-modal__row'
+        >
+            <img
+                className='more-modal__image'
+                width='38'
+                height='38'
+                src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
+            />
+            <div
+                className='more-modal__details'
            >
-                <img
-                    className='profile-img'
-                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
-                />
-                <div
-                    className='user-list-item__details'
-                >
-                    <div className='more-name'>
-                        {name}
-                    </div>
-                    <div className='more-description'>
-                        {user.email}
-                    </div>
+                <div className='more-modal__name'>
+                    {name}
                </div>
-                <div
-                    className='user-list-item__actions'
-                >
-                    {buttons}
+                <div className='more-modal__description'>
+                    {user.email}
                </div>
-            </td>
-        </tr>
+            </div>
+            <div
+                className='more-modal__actions'
+            >
+                {buttons}
+            </div>
+        </div>
    );
 }

--- a/web/react/utils/emoticons.jsx
+++ b/web/react/utils/emoticons.jsx
@@ -132,7 +132,7 @@ export function handleEmoticons(text, tokens) {
            const alias = `MM_EMOTICON${index}`;

            tokens.set(alias, {
-                value: `<img align="absmiddle" alt="${matchText}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
+                value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${getImagePathForEmoticon(name)}" title="${matchText}" />`,
                originalText: fullMatch
            });

--- a/web/react/utils/text_formatting.jsx
+++ b/web/react/utils/text_formatting.jsx
@@ -187,7 +187,7 @@ function highlightCurrentMentions(text, tokens) {
            const newAlias = `MM_SELFMENTION${index}`;

            newTokens.set(newAlias, {
-                value: `<span class='mention-highlight'>${alias}</span>`,
+                value: `<span class='mention--highlight'>${alias}</span>`,
                originalText: token.originalText
            });
            output = output.replace(alias, newAlias);
@@ -205,7 +205,7 @@ function highlightCurrentMentions(text, tokens) {
        const alias = `MM_SELFMENTION${index}`;

        tokens.set(alias, {
-            value: `<span class='mention-highlight'>${mention}</span>`,
+            value: `<span class='mention--highlight'>${mention}</span>`,
            originalText: mention
        });

--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -676,11 +676,11 @@ export function applyTheme(theme) {
    }

    if (theme.centerChannelBg) {
-        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
        changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
        changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
        changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
-        changeCss('.post-image__column .post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.post-image__details, .search-help-popover .search-autocomplete__divider span', 'background:' + theme.centerChannelBg, 1);
        changeCss('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', 'background:' + theme.centerChannelBg, 1);
        changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1);
        changeCss('.popover.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg, 1);
@@ -694,8 +694,8 @@ export function applyTheme(theme) {

    if (theme.centerChannelColor) {
        changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
-        changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.sidebar--left, .sidebar--right .sidebar--right__header, .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .suggestion-list__content .command, .modal .modal-content, .dropdown-menu, .popover, .mentions__name, .tip-overlay', 'color:' + theme.centerChannelColor, 1);
        changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
        changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
        changeCss('.mentions--top, .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
@@ -709,17 +709,17 @@ export function applyTheme(theme) {
        changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
        changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
        changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
-        changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.custom-textarea, .custom-textarea:focus, .file-preview, .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-list__content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
        changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
        changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1);
        changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
        changeCss('.popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
        changeCss('.popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
-        changeCss('.command-name, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.suggestion-list__content .command, .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
        changeCss('.dropdown-menu .divider, .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1);
        changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1);
        changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
-        changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2);
+        changeCss('.post-image__details', 'color:' + theme.centerChannelColor, 2);
        changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1);
        changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2);
        changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
@@ -732,11 +732,11 @@ export function applyTheme(theme) {
        changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
        changeCss('.channel-intro, .modal .settings-modal .settings-table .settings-content .divider-dark, hr, .modal .settings-modal .settings-table .settings-links, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
-        changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
-        changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .more-modal__list .more-modal__row, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
+        changeCss('@media(max-width: 1800px){.inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
+        changeCss('.post:hover, .more-modal__list .more-modal__row:hover, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
        changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.command-name:hover, .mentions-name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
+        changeCss('.suggestion-list__content .command:hover, .mentions__name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
        changeCss('code, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);
        changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1);
        changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
@@ -759,7 +759,7 @@ export function applyTheme(theme) {
    if (theme.buttonBg) {
        changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1);
        changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1);
-        changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
+        changeCss('.file-playback__controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
    }

    if (theme.buttonColor) {
@@ -767,7 +767,7 @@ export function applyTheme(theme) {
    }

    if (theme.mentionHighlightBg) {
-        changeCss('.mention-highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
+        changeCss('.mention--highlight, .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
    }

    if (theme.mentionHighlightBg) {
@@ -775,7 +775,7 @@ export function applyTheme(theme) {
    }

    if (theme.mentionHighlightLink) {
-        changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
+        changeCss('.mention--highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1);
    }

    if (!theme.codeTheme) {
@@ -946,7 +946,7 @@ export function switchChannel(channel) {

    updateAddressBar(channel.name);

-    $('.inner__wrap').removeClass('move--right');
+    $('.inner-wrap').removeClass('move--right');
    $('.sidebar--left').removeClass('move--right');

    client.trackPage();
--- a/web/sass-files/sass/base/_module.scss
+++ b/web/sass-files/sass/base/_module.scss
@@ -0,0 +1,3 @@
+// Only for combining all the files in this folder
+@import 'typography';
+@import 'structure';
--- a/web/sass-files/sass/base/_structure.scss
+++ b/web/sass-files/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%);
+    }
+}
--- a/web/sass-files/sass/base/_typography.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_alerts.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_buttons.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/components/_dropdown.scss
+++ b/web/sass-files/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;
+        }
+    }
+}
--- a/web/sass-files/sass/components/_emoticons.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_error-bar.scss
+++ b/web/sass-files/sass/components/_error-bar.scss
@@ -1,8 +1,8 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .error-bar {
-    background-color: #0099FF;
-    text-align:center;
+    background-color: #09f;
+    text-align: center;
    position: relative;
    color: #fff;
    position: absolute;
@@ -10,18 +10,20 @@
    width: 100%;
    z-index: 9999;
    padding: 5px 30px;
+
    &__close {
        position: absolute;
        right: 0;
        top: 0;
-        color: #FFF;
+        color: #fff;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
        padding: 0 10px;
        font-family: 'Open Sans', sans-serif;
+
        &:hover {
-            color: #FFF;
+            color: #fff;
            text-decoration: none;
        }
    }
--- a/web/sass-files/sass/components/_files.scss
+++ b/web/sass-files/sass/components/_files.scss
@@ -0,0 +1,293 @@
+@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;
+}
+
+.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;
+}
--- a/web/sass-files/sass/components/_inputs.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_links.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/components/_mentions.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_modal.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/components/_module.scss
+++ b/web/sass-files/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';
--- a/web/sass-files/sass/components/_oauth.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/components/_popover.scss
+++ b/web/sass-files/sass/components/_popover.scss
@@ -1,13 +1,38 @@
-@charset "UTF-8";
+@charset 'UTF-8';
+
+.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;
+    max-height: 250px;
+    overflow: auto;
 }

 .user-popover {
-	cursor: pointer;
-	display: inline-block;
+    cursor: pointer;
+    display: inline-block;
 }

 .code-popover .popover-content {
@@ -15,15 +40,15 @@
 }

 .user-popover__image {
-	margin: 0 0 10px;
-	@include border-radius(128px);
+    margin: 0 0 10px;
+    @include border-radius(128px);
 }

 .user-popover__email {
-	max-width: 200px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: block;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
 }

 .search-help-popover {
@@ -31,7 +56,7 @@
    max-width: none;
    width: 100%;
    top: 36px;
-    @include single-transition(opacity, 0.3s, ease-in);
+    @include single-transition(opacity, .3s, ease-in);
    font-size: em(13px);

    &.autocomplete {
@@ -57,14 +82,14 @@
            position: relative;
        }
        &:before {
-            content: "";
+            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background: #ddd;
            top: 10px;
            left: 0;
-            @include opacity(0.2);
+            @include opacity(.2);
        }
    }

@@ -78,16 +103,16 @@
        text-overflow: ellipsis;

        &:hover {
-            background: rgba(black, 0.1);
+            background: rgba(black, .1);
        }

        &.selected {
-            background: rgba(black, 0.2);
+            background: rgba(black, .2);
        }

        .fa {
            margin-right: 5px;
-            @include opacity(0.5);
+            @include opacity(.5);
        }

        .profile-img {
@@ -117,9 +142,10 @@
    ul {
        padding-left: 17px;
        span {
-            @include opacity(0.8);
+            @include opacity(.8);
        }
-        strong, b {
+        strong,
+        b {
            @include opacity(1);
        }
    }
@@ -148,7 +174,7 @@
            line-height: 26px;
            font-size: 13px;
        }
-        .more-name {
+        .more__name {
            margin-left: 6px;
            max-width: 140px;
            overflow: hidden;
--- a/web/sass-files/sass/components/_scrollbar.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_search.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_suggestion-list.scss
+++ b/web/sass-files/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;
+}
--- a/web/sass-files/sass/components/_tooltip.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/components/_tutorial.scss
+++ b/web/sass-files/sass/components/_tutorial.scss
@@ -1,7 +1,7 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .tip-backdrop {
-    background: rgba(black, 0.5);
+    background: rgba(black, .5);
    position: absolute;
    top: 0;
    left: 0;
@@ -13,7 +13,7 @@
 .tip-overlay {
    width: 350px;
    max-width: 90%;
-    position:absolute;
+    position: absolute;
    background-color: #fff;
    @include border-radius(3px);
    padding: 20px;
@@ -83,31 +83,30 @@
        strong {
            font-weight: 600;
        }
-
    }

    .btn {
-        background: #cccccc;
+        background: #ccc;
        color: #fff;
        @include border-radius(3px);
        border: none;
        margin: 10px 0;

-        &:hover, &:active, &:focus {
+        &:hover,
+        &:active,
+        &:focus {
            color: #fff;
            border: none;
            background: #bbb;
        }
-
    }

    .tip-opt {
        font-size: 12px;

        span {
-            @include opacity(0.9);
+            @include opacity(.9);
        }
-
    }

    .tutorial__circles {
@@ -118,9 +117,7 @@
            height: 7px;
            margin: 0 4px;
        }
-
    }
-
 }

 .tip-button {
@@ -132,24 +129,23 @@
 }

 .tip-div {
-    position:absolute;
-    top:0px;
-    right:0px;
+    position: absolute;
+    top: 0px;
+    right: 0px;

    &.tip-overlay--header {
        top: 21px;
        right: 2px;
        .tip-button {
-            @include opacity(0.8);
+            @include opacity(.8);
        }
    }

    &.tip-overlay--sidebar {
        left: 0;
-        @include opacity(0.8);
+        @include opacity(.8);
        top: -9px;
    }
-
 }

 .tutorial-steps__container {
@@ -200,12 +196,12 @@
        width: 9px;
        height: 9px;
        @include border-radius(9px);
-        @include opacity(0.2);
+        @include opacity(.2);
        background: #000;
        display: inline-block;
        margin: 0 5px;
        &.active {
-            background: $primary-color;
+            background: $color--primary;
            @include opacity(1);
        }
    }
--- a/web/sass-files/sass/components/_videos.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/layout/_content.scss
+++ b/web/sass-files/sass/layout/_content.scss
@@ -0,0 +1,85 @@
+@charset 'UTF-8';
+
+.inner-wrap {
+    &.move--left {
+        .search-bar__container {
+            display: none;
+        }
+    }
+
+    &.move--right {
+        .search-bar__container {
+            display: none;
+        }
+    }
+}
+
+.app__content {
+    height: 100%;
+    padding-top: 50px;
+    margin-left: 220px;
+    position: relative;
+    background: #fff;
+    @include display-flex;
+    @include flex-direction(column);
+
+    .channel__wrap & {
+        padding-top: 0;
+    }
+}
+#post-create {
+    @include flex(0 0 auto);
+    background: #fff;
+    width: 100%;
+    z-index: 3;
+}
+
+#archive-link-home {
+    @include flex(0 0 auto);
+    cursor: pointer;
+    padding: 10px 20px;
+    font-size: 13px;
+
+    .fa {
+        font-size: 11px;
+        @include opacity(.7);
+    }
+
+    a {
+        color: inherit;
+    }
+}
+
+.post-list {
+    .new-messages-hr {
+        margin-top: 5px;
+        margin-bottom: 0px;
+        border: 0;
+        border-top: 1px solid #f80;
+    }
+
+    .new-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        color: #f80;
+        text-align: center;
+    }
+}
+
+.new-messages-hr {
+    margin-top: 5px;
+    margin-bottom: 0px;
+    border: 0;
+    border-top: 1px solid #f80;
+}
+
+.new-messages-text {
+    margin-top: 2px;
+    margin-bottom: 5px;
+    color: #f80;
+    text-align: center;
+}
+
+.delete-message-text {
+    margin-top: 10px;
+}
--- a/web/sass-files/sass/partials/_footer.scss
+++ b/web/sass-files/sass/partials/_footer.scss
@@ -1,25 +1,30 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .footer-pane {
-	background: #eee;
+    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;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
    }
 }

-.footer, .footer-pane, .footer-push {
-  height: 89px;
+.footer,
+.footer-pane,
+.footer-push {
+    height: 89px;
 }


--- a/web/sass-files/sass/layout/_forms.scss
+++ b/web/sass-files/sass/layout/_forms.scss
@@ -0,0 +1,66 @@
+@charset 'UTF-8';
+
+.form-horizontal {
+    .modal-intro {
+        margin: -10px 0 30px;
+    }
+
+    .form__label {
+        text-align: left;
+        padding-right: 3px;
+        font-weight: 600;
+        font-size: 1.1em;
+
+        &.light {
+            font-weight: normal;
+            color: #999;
+            font-size: 1.05em;
+            font-style: italic;
+            padding-top: 2px;
+        }
+    }
+
+    .input__help {
+        color: inherit;
+        margin: 10px 0 0 10px;
+        word-break: break-word;
+        @include opacity(.8);
+
+        &.dark {
+            @include opacity(1);
+        }
+
+        &.error {
+            color: #a94442;
+        }
+    }
+
+    .form-control {
+        font-weight: normal;
+    }
+
+    .form-group {
+        margin-bottom: 25px;
+
+        &.less {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.help-block {
+    font-size: .95em;
+    margin: 10px 0 0;
+    color: #999;
+}
+
+.disabled-input {
+    background-color: #ddd !important;
+}
+
+.form-group {
+    &.form-group--small {
+        margin-bottom: 10px;
+    }
+}
+
--- a/web/sass-files/sass/layout/_headers.scss
+++ b/web/sass-files/sass/layout/_headers.scss
@@ -0,0 +1,370 @@
+@charset 'UTF-8';
+
+#channel-header {
+    @include flex(0 0 56px);
+}
+
+.row {
+    &.header {
+        position: relative;
+
+        .channel__wrap & {
+            display: none;
+        }
+    }
+}
+
+.header-dropdown__icon {
+    font-size: 11px;
+    color: inherit;
+    top: 3px;
+}
+
+.channel-header__info {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    > div {
+        display: block;
+        white-space: nowrap;
+        word-break: break-word;
+
+        &.dropdown {
+            max-width: 100%;
+            padding-right: 1em;
+            float: left;
+
+            .header-dropdown__icon {
+                color: #777;
+            }
+
+            a {
+                text-decoration: none;
+            }
+
+            .modal {
+                white-space: normal;
+            }
+        }
+
+        &.description {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-top: 2px;
+            max-height: 45px;
+            .markdown-inline-img {
+                max-height: 45px;
+            }
+        }
+
+        &.popover {
+            white-space: normal;
+        }
+    }
+}
+
+.channel-intro {
+    margin: 0 auto 35px;
+    padding: 0 1em 5px;
+    max-width: 1000px;
+    border-bottom: 1px solid lightgrey;
+
+    .intro-links {
+        margin: 0 1.5em 10px 0;
+        display: inline-block;
+
+        .fa {
+            margin-right: 5px;
+        }
+    }
+
+    .channel-intro-profile {
+        margin-top: 5px;
+        margin-left: 63px;
+    }
+
+    .channel-intro-img {
+        float: left;
+        img {
+            @include border-radius(100px);
+        }
+    }
+
+    .channel-intro__title {
+        font-weight: 600;
+        font-size: 20px;
+        margin-bottom: 15px;
+    }
+
+    .channel-intro__content {
+        background: #f7f7f7;
+        padding: 10px 15px;
+        @include border-radius(3px);
+    }
+    .channel-intro-text {
+        margin-top: 35px;
+    }
+}
+
+// Team Header in Sidebar
+.sidebar--left,
+.sidebar--menu {
+    .team__header {
+        position: relative;
+        padding: 9px 10px;
+        @include legacy-pie-clearfix;
+
+        &:before {
+            @include single-transition(all, .05s, linear);
+            content: '';
+            background: none;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+
+        &:hover {
+            &:before {
+                background: rgba(black, .1);
+            }
+
+            .user__name {
+                color: #fff;
+            }
+
+            .navbar-right {
+                .dropdown-toggle {
+                    @include opacity(1);
+                }
+            }
+        }
+
+        .navbar-right {
+            font-size: .85em;
+            position: absolute;
+            top: 10px;
+            right: 22px;
+            z-index: 5;
+
+            .dropdown-toggle {
+                @include single-transition(all, .1s, linear);
+                padding: 10px;
+                @include opacity(.8);
+            }
+
+            .dropdown-menu {
+                li a {
+                    padding: 3px 20px;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+
+            .dropdown__icon {
+                fill: #fff;
+            }
+        }
+
+        .settings__link a:hover,
+        a:visited,
+        a:link,
+        a:active {
+            text-decoration: none;
+        }
+
+        .user__picture {
+            width: 36px;
+            height: 36px;
+            float: left;
+            @include border-radius(36px);
+            margin-right: 6px;
+        }
+
+        .header__info {
+            color: #fff;
+            @include clearfix;
+            padding-left: 2px;
+            z-index: 1;
+            position: relative;
+        }
+
+        .team__name,
+        .user__name {
+            display: block;
+            font-weight: 600;
+            font-size: 16px;
+            max-width: 85%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-decoration: none;
+        }
+
+        .team__name {
+            line-height: 22px;
+            margin-top: -2px;
+            float: left;
+        }
+
+        .user__name {
+            @include single-transition(all, .1s, linear);
+            font-size: 14px;
+            line-height: 18px;
+            font-weight: 400;
+            color: #eee;
+            color: rgba(#fff, .8);
+        }
+
+        > .nav {
+            > li {
+                > a {
+                    float: right;
+                    background: none !important;
+                    padding: 2px;
+
+                    &.dropdown-toggle {
+                        line-height: 1.8;
+                        font-size: 1em;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    .search__clear {
+        display: none;
+    }
+}
+
+#navbar {
+    .navbar-default {
+        .navbar-toggle {
+            &.menu-toggle {
+                padding: 0 1em;
+            }
+        }
+    }
+}
+
+.channel-header {
+    width: 100%;
+    border-left: none;
+    font-size: 14px;
+    line-height: 56px;
+
+    #member_popover {
+        width: 50px;
+        color: #999;
+        cursor: pointer;
+
+        .fa {
+            margin-left: 4px;
+            font-size: 16px;
+        }
+    }
+
+    &.alt {
+        margin: 0;
+        th {
+            font-weight: normal !important;
+        }
+        td {
+            border: none;
+        }
+    }
+
+    th {
+        text-align: center;
+        &:first-child {
+            text-align: left !important;
+            border-left: none;
+            width: 100%;
+            padding-left: 1em;
+        }
+        &:last-child {
+            width: 8.9%;
+        }
+    }
+
+    td {
+        padding: 5px 25px 5px !important;
+        font-size: 13px;
+        text-align: center !important;
+        &:first-child {
+            text-align: left !important;
+        }
+    }
+
+    .heading {
+        margin: 0;
+        color: #555;
+        font-size: 1.3em;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 4px;
+    }
+
+    .caret {
+        margin-top: 3px;
+    }
+
+    .more {
+        color: #81848b;
+        display: inline-block;
+        vertical-align: top;
+        text-transform: capitalize;
+        font-size: 13px;
+    }
+
+    .disabled {
+        color: #999;
+    }
+}
+
+.channel-header__navbar {
+    font-size: 16px;
+
+    .heading {
+        margin-right: 3px;
+    }
+
+    .header-dropdown__icon {
+        top: 1px;
+    }
+}
+
+.channel-header__links {
+    font-family: 'Open Sans', sans-serif;
+    height: 30px;
+    width: 24px;
+    line-height: 26px;
+    margin-right: 9px;
+    font-size: 22px;
+
+    .channel__wrap.move--left & {
+        position: absolute;
+        right: -400px;
+        top: 14px;
+    }
+
+    > a {
+        color: inherit;
+        text-decoration: none;
+        @include opacity(.6);
+        @include single-transition(all, .1s, ease-in);
+
+        &:hover {
+            @include opacity(1);
+        }
+        &:focus {
+            color: inherit;
+        }
+    }
+}
--- a/web/sass-files/sass/layout/_markdown.scss
+++ b/web/sass-files/sass/layout/_markdown.scss
@@ -0,0 +1,116 @@
+@charset 'UTF-8';
+
+.markdown__heading {
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+.markdown__paragraph-inline {
+    display: inline;
+
+    + .markdown__paragraph-inline {
+        margin-left: 4px;
+    }
+}
+
+#post-list {
+    .markdown-inline-img {
+        -moz-force-broken-image-icon: 1;
+        max-height: 500px;
+        height: 500px;
+    }
+}
+
+.post-body--code {
+    position: relative;
+
+    pre {
+        margin-bottom: 0;
+        word-break: normal;
+        overflow: auto;
+        word-wrap: normal;
+    }
+}
+
+.post-body--code__language {
+    -webkit-transform: translate3d(0,0,0);
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #fff;
+    background: #21586d;
+    padding: 4px 10px 5px 10px;
+    font-size: 13px;
+    opacity: .7;
+    z-index: 5;
+}
+
+.post__body {
+    hr {
+        height: 4px;
+        padding: 0;
+        margin: 15px 0 16px;
+        background-color: #e7e7e7;
+        border: 0 none;
+        @include opacity(.2);
+    }
+
+    code {
+        white-space: pre;
+    }
+
+    .codespan__pre-wrap {
+        code {
+            white-space: pre-wrap;
+        }
+    }
+}
+
+.markdown__table {
+    background: #fff;
+    margin: 5px 0 10px;
+
+    th,
+    td {
+        padding: 6px 13px;
+        border: 1px solid #ddd;
+    }
+
+    tbody tr {
+        background: #fff;
+
+        &:nth-child(2n) {
+            background-color: #f8f8f8;
+        }
+    }
+}
+blockquote {
+    border: none;
+    position: relative;
+    font-size: 16px;
+    padding: 10px 10px 10px 38px;
+    margin-bottom: 0;
+
+    &:before {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+        text-decoration: inherit;
+        content: '\f10d';
+        left: 8px;
+        top: 5px;
+        position: absolute;
+        font-size: 20px;
+        @include opacity(.6);
+    }
+}
+pre {
+    border: none;
+    margin: 5px 0;
+    color: inherit;
+}
+code {
+    background: #fff;
+    color: inherit;
+}
--- a/web/sass-files/sass/layout/_module.scss
+++ b/web/sass-files/sass/layout/_module.scss
@@ -0,0 +1,13 @@
+// Only for combining all the files in this folder
+@import 'content';
+@import 'footer';
+@import 'forms';
+@import 'headers';
+@import 'markdown';
+@import 'navigation';
+@import 'post';
+@import 'post-right';
+@import 'sidebar-left';
+@import 'sidebar-menu';
+@import 'sidebar-right';
+@import 'webhooks';
--- a/web/sass-files/sass/layout/_navigation.scss
+++ b/web/sass-files/sass/layout/_navigation.scss
@@ -0,0 +1,137 @@
+@charset 'UTF-8';
+
+.nav > li > a:focus,
+.nav > li > a:hover {
+    background: transparent;
+}
+
+#navbar {
+    input {
+        margin: 0px 5px 0px 2px;
+    }
+
+    .navbar-default {
+        position: absolute;
+        border: none;
+        min-height: 45px;
+        background: $color--primary;
+
+        .navbar-nav {
+            > li {
+                > a {
+                    height: 45px;
+                    padding: 0 1.3em;
+
+                    i {
+                        line-height: 45px;
+                    }
+                }
+            }
+        }
+
+        .navbar-toggle {
+            width: 43px;
+            float: left;
+            border-color: transparent;
+            border-radius: 0;
+            margin: 0;
+            padding: 0 10px;
+            line-height: 48px;
+            height: 44px;
+            z-index: 5;
+            fill: #fff;
+
+            .icon-bar {
+                background: #fff;
+                width: 21px;
+            }
+
+            .glyphicon-search {
+                top: -1px;
+            }
+
+            .icon--white {
+                color: #fff;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background: inherit;
+            }
+        }
+
+        .navbar-brand {
+            padding: 0 .5em;
+            height: 45px;
+            line-height: 45px;
+            float: none;
+            font-size: 16px;
+
+            .heading {
+                margin-right: 3px;
+                font-weight: 600;
+                color: #fff;
+            }
+
+            .header-dropdown__icon {
+                top: 1px;
+            }
+
+            .dropdown-toggle {
+                color: #fff;
+            }
+
+            .description {
+                display: inline-block;
+                margin-right: .5em;
+                color: #fff;
+
+                &.info-popover {
+                    width: 19px;
+                    height: 19px;
+                    background: url('../images/info__icon.png');
+                    @include background-size(100% 100%);
+                    vertical-align: middle;
+                    top: -1px;
+                    position: relative;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .sidebar-channel {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        span {
+            white-space: nowrap;
+            margin-left: 2px;
+        }
+    }
+
+    .channel-create-btn {
+        margin-right: 15px;
+    }
+
+    .more-channel-table {
+        width: 100%;
+        border: 1px solid #dbdbdc;
+        td {
+            padding: 7px;
+        }
+        button {
+            width: 110px;
+        }
+    }
+}
+
+.badge-notify {
+    background: red;
+    position: absolute;
+    left: 4px;
+    top: 3px;
+    z-index: 100;
+}
--- a/web/sass-files/sass/layout/_post-right.scss
+++ b/web/sass-files/sass/layout/_post-right.scss
@@ -0,0 +1,155 @@
+@charset 'UTF-8';
+
+.post-right__container {
+    @include display-flex;
+    @include flex-direction(column);
+    height: 100%;
+
+    .post-right-root-message {
+        padding: 1em 1em 0;
+    }
+
+    .post-right-comments-container {
+        position: relative;
+
+        .post {
+            &:first-child {
+                padding-top: 15px;
+            }
+        }
+    }
+
+
+    .help_format_text {
+        bottom: -63px;
+        right: auto;
+    }
+
+    .post {
+        &.post--root {
+            padding-bottom: 1.2em;
+            border-bottom: 1px solid #ddd;
+
+            .post__body {
+                background: transparent !important;
+            }
+        }
+
+        .post__header {
+            .col__reply {
+                top: 0;
+                text-align: right;
+            }
+        }
+
+        .post__body {
+            width: 100%;
+        }
+    }
+
+    hr {
+        margin-bottom: 0;
+        border: none;
+    }
+
+    .post-create__container {
+        width: 100%;
+        margin-top: 10px;
+
+        .textarea-wrapper {
+            min-height: 100px;
+        }
+
+        .btn {
+            margin-bottom: 10px;
+        }
+
+        .custom-textarea {
+            min-height: 100px;
+        }
+
+        .msg-typing {
+            @include opacity(.7);
+            float: left;
+            margin-top: 3px;
+            font-size: 13px;
+            line-height: 20px;
+            min-width: 1px;
+            display: block;
+            height: 20px;
+            max-width: 230px;
+        }
+
+        .post-create-footer {
+            width: 100%;
+            padding: 5px 0 10px;
+        }
+
+        .post-right-comments-upload-in-progress {
+            padding: 6px 0;
+            color: #a8adb7;
+            margin-right: 10px;
+        }
+    }
+}
+.post-right-header {
+    font-size: 1em;
+    text-transform: uppercase;
+    color: #999;
+    font-weight: 400;
+    color: #888;
+    height: 39px;
+    padding: 10px 10px 0 15px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    padding: 5px 10px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    ul {
+        padding-left: 0;
+        margin-bottom: 2px;
+    }
+}
+
+.post-right-channel__name {
+    font-weight: 600;
+    margin: 0 0 10px 0;
+}
+
+.post-right-root-container li {
+    display: inline;
+    list-style-type: none;
+    padding-right: 3px;
+}
+
+.post-right-root-time {
+    color: #a8adb7;
+}
+
+.post-right-create-comment-container {
+    padding: 5px;
+    margin-bottom: 18px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.post-right__scroll {
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
+
+    .file-preview__container {
+        margin-top: 5px;
+    }
+}
+
+.post-right-comment-time {
+    color: #a8adb7;
+}
--- a/web/sass-files/sass/layout/_post.scss
+++ b/web/sass-files/sass/layout/_post.scss
@@ -0,0 +1,997 @@
+@charset 'UTF-8';
+
+.custom-textarea {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: transparent;
+    border: 1px solid #ccc;
+    position: absolute;
+    top: 0px;
+    height: auto;
+    resize: none;
+    line-height: 20px;
+    min-height: 36px;
+    overflow-x: hidden;
+    &:focus {
+        border-color: #ccc;
+        box-shadow: none;
+    }
+}
+
+.bad-connection {
+    background: #ffffac !important;
+    color: #d04444 !important;
+}
+
+.textarea-div {
+    white-space: pre-wrap;
+    word-wrap: normal;
+    color: rgba(0,0,0,0);
+    position: absolute;
+    top: 0px;
+    word-break: break-word;
+    left: 1px;
+    line-height: 20px;
+    min-height: 36px;
+    height: auto;
+    border: 0;
+}
+
+body.ios {
+    .textarea-div {
+        padding: 7px 17px 7px 15px;
+        -webkit-overflow-scrolling: auto;
+    }
+}
+
+.textarea-div::-webkit-scrollbar {
+    display: none;
+}
+
+.textarea-wrapper {
+    position: relative;
+    .textbox-preview-area {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        box-shadow: none;
+        white-space: normal;
+    }
+    .help__text {
+        right: 0;
+        position: absolute;
+        z-index: 3;
+        bottom: -23px;
+        font-size: 13px;
+        cursor: pointer;
+    }
+    .textbox-preview-link {
+        margin-right: 8px;
+    }
+    min-height: 36px;
+}
+
+.help_format_text {
+    display: none !important;
+    position: absolute;
+    bottom: -23px;
+    left: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: .85em;
+    @include opacity(0);
+    @include single-transition(all .2s ease);
+
+    b,
+    i,
+    code {
+        margin-right: 3px;
+    }
+    .textbox-preview-link {
+        font-size: 13px;
+        cursor: pointer;
+        margin-left: 15px;
+    }
+}
+
+.date-separator,
+.new-separator {
+    text-align: center;
+    height: 2em;
+    margin: 0;
+    position: relative;
+    z-index: 0;
+    &:before,
+    &:after {
+        content: '';
+        height: 1em;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        display: none;
+    }
+    &:before {
+        bottom: 0;
+    }
+    &:after {
+        top: 0;
+    }
+    &.hovered--after {
+        &:before {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    &.hovered--before {
+        &:after {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    .separator__hr {
+        border-color: #ccc;
+        margin: 0;
+        position: relative;
+        z-index: 5;
+        top: 1em;
+    }
+    .separator__text {
+        line-height: 2em;
+        color: #555;
+        background: #fff;
+        display: inline-block;
+        padding: 0 1em;
+        font-weight: 700;
+        @include border-radius(50px);
+        position: relative;
+        z-index: 5;
+        font-size: 13px;
+    }
+}
+.new-separator {
+    .separator__hr {
+        border-color: #ffaf53;
+    }
+    .separator__text {
+        color: #f80;
+        font-weight: normal;
+    }
+}
+
+.file-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: #fff;
+    font-size: em(20px);
+    font-weight: 600;
+    z-index: 6;
+
+    .overlay__indent {
+        background-color: rgba(0, 0, 0, .6);
+        position: relative;
+        height: 100%;
+        @include clearfix;
+    }
+
+    &.center-file-overlay {
+        .overlay__indent {
+            margin-left: 220px;
+        }
+    }
+
+    &.right-file-overlay {
+        font-size: em(18px);
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .overlay__circle {
+        background: #111;
+        background: rgba(black, .7);
+        width: 370px;
+        height: 370px;
+        margin: -185px 0 0 -185px;
+        @include border-radius(500px);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        pointer-events: none;
+    }
+
+    .overlay__files {
+        display: block;
+        margin: 75px auto 20px;
+    }
+
+    .overlay__logo {
+        position: absolute;
+        left: 50%;
+        bottom: 30px;
+        margin-left: -50px;
+        @include opacity(.3);
+    }
+
+    .fa {
+        display: inline-block;
+        font-size: 1.1em;
+        margin-right: 8px;
+    }
+}
+
+#post-list {
+    @include flex(1 1 auto);
+    position: relative;
+    overflow-y: hidden;
+    height: 100%;
+
+    .inactive {
+        display: none;
+    }
+
+    .post-list-holder-by-time {
+        background: #fff;
+        overflow-y: scroll;
+        width: 100%;
+        padding: 1em 0 0;
+        position: absolute;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+        &.active {
+            display: inline;
+        }
+    }
+
+    .more-messages-text {
+        margin: 5px 0 10px;
+        display: block;
+        text-align: center;
+        outline: none;
+        border: none;
+        font-size: 13px;
+    }
+    .beginning-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        display: block;
+        text-align: center;
+        color: grey;
+    }
+}
+
+.post-list__timestamp {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    z-index: 50;
+    width: 120px;
+    text-align: center;
+    background: $color--primary;
+    color: #fff;
+    @include border-radius(3px);
+    font-size: 12px;
+    line-height: 25px;
+    margin-left: -60px;
+    -webkit-font-smoothing: initial;
+    @include single-transition(all, .6s, ease);
+    @include translateY(-45px);
+    @include opacity(0);
+    display: none;
+
+    &.scrolling {
+        @include translateY(0);
+        @include opacity(.8);
+    }
+}
+
+.post-list__arrows {
+    background-repeat: no-repeat;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    fill: #444;
+    position: absolute;
+    bottom: 0;
+    left: 9px;
+    z-index: 50;
+    @include opacity(0);
+    @include single-transition(all, .6s);
+    display: none;
+
+    svg {
+        color: inherit;
+        width: 28px;
+        height: 28px;
+    }
+
+    &.scrolling {
+        display: block;
+        @include opacity(1);
+    }
+}
+
+.post-create__container {
+    form {
+        width: 100%;
+        padding: .5em 14px 0;
+        margin: 0 auto;
+        max-width: 1028px;
+    }
+    .post-create-body {
+        position: relative;
+        padding: 0 0 2px;
+        .post-body__cell {
+            vertical-align: top;
+            position: relative;
+            &.scroll {
+                .btn-file {
+                    right: 15px;
+                }
+                .custom-textarea {
+                    padding-right: 43px;
+                }
+            }
+        }
+        .send-button {
+            display: none;
+            cursor: pointer;
+            padding-right: 4px;
+            width: 45px;
+            height: 37px;
+            font-size: 18px;
+            line-height: 37px;
+            vertical-align: bottom;
+            text-align: center;
+            @include single-transition(all, .15s);
+            &:active {
+                @include opacity(.75);
+            }
+        }
+        .custom-textarea {
+            padding-top: 8px;
+            padding-right: 28px;
+            max-height: 162px !important;
+            line-height: 1.5;
+        }
+        .textarea-div {
+            padding-top: 8px;
+            padding-right: 30px;
+            max-height: 163px !important;
+            overflow: auto;
+            line-height: 1.5;
+        }
+        .btn-file {
+            right: 0;
+            position: absolute;
+            top: 1px;
+            color: #444;
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            font-size: 16px;
+            padding: 7px 9px 6px;
+            &:hover,
+            &:active {
+                @include opacity(.9);
+                box-shadow: none;
+            }
+        }
+        textarea {
+            box-shadow: none;
+        }
+    }
+    .post-create-footer {
+        @include clearfix;
+        padding: 3px 0 0 0;
+        font-size: 13px;
+        .control-label {
+            font-weight: normal;
+            margin-bottom: 0;
+            top: -5px;
+            position: relative;
+        }
+    }
+    .msg-typing {
+        display: block;
+        @include opacity(.7);
+        white-space: nowrap;
+        margin-bottom: 5px;
+        overflow: hidden;
+        font-size: .95em;
+        text-overflow: ellipsis;
+        height: 20px;
+    }
+}
+
+.post-list__table {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    .post-list__content {
+        display: table-cell;
+        vertical-align: bottom;
+        .dropdown-menu {
+            &.bottom {
+                top: auto;
+                bottom: 25px;
+            }
+        }
+    }
+}
+
+.post {
+    word-wrap: break-word;
+    padding: 8px .5em 0 1em;
+    position: relative;
+    max-width: 100%;
+    @include legacy-pie-clearfix;
+
+    &:hover {
+        .dropdown,
+        .comment-icon__container,
+        .post__reply,
+        .post__remove {
+            visibility: visible;
+        }
+        .permalink-icon {
+            visibility: visible;
+        }
+    }
+
+    &.post--highlight {
+        background-color: beige;
+    }
+
+    p {
+        margin: 0;
+        line-height: 1.6em;
+        font-size: .97em;
+        white-space: pre-wrap;
+
+        &:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    span {
+        p:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    &.post--root {
+        .comment-icon__container {
+            visibility: visible;
+        }
+    }
+
+    &.same--root {
+        &.same--user {
+            padding: 0 .5em 0 1em;
+
+            &:hover {
+                .post__time {
+                    @include opacity(.5);
+                }
+            }
+
+            .post__header {
+                margin: 0;
+                height: 0;
+
+                .col__name {
+                    display: none;
+                }
+
+                .col__reply {
+                    top: 6px;
+                }
+            }
+
+            .post__time {
+                top: 24px;
+            }
+
+            .post__time {
+                font: normal normal normal FontAwesome;
+                text-rendering: auto;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                position: absolute;
+                top: -2px;
+                left: -7px;
+                font-size: 11px;
+                line-height: 37px;
+                @include opacity(0);
+            }
+        }
+
+        &.post--comment {
+            .post__link {
+                display: none;
+            }
+
+            .post__img {
+                img {
+                    display: none;
+                }
+            }
+        }
+
+        &.post--comment {
+            .post__body {
+                border-left: 4px solid #ddd;
+            }
+        }
+    }
+
+    &.other--root {
+        .comment-icon__container {
+            &.icon--show {
+                visibility: visible;
+            }
+        }
+
+        &.post--comment {
+            .popover {
+                margin-top: 84px;
+
+                > .arrow {
+                    top: 21px !important;
+                }
+            }
+
+            .post__header {
+                .col__reply {
+                    top: 53px;
+                }
+            }
+        }
+    }
+
+    .post__content {
+        margin: 0 auto;
+        position: relative;
+        max-width: 1000px;
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+    }
+
+    .post__header {
+        padding: 0;
+        list-style: none;
+        margin-bottom: 2px;
+
+        li {
+            display: inline-block;
+            vertical-align: top;
+        }
+
+        .col__name {
+            margin-right: 7px;
+            font-weight: 600;
+
+            .user-popover {
+                max-width: 200px;
+                @include clearfix;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .col__reply {
+            position: absolute;
+            right: 0;
+            top: 30px;
+            width: 65px;
+            white-space: nowrap;
+        }
+
+        .permalink-popover {
+            min-width: 0;
+
+            .popover-content {
+                padding: 5px;
+            }
+
+            .form-control,
+            .btn {
+                font-size: 13px;
+                height: 30px;
+                padding: 0 8px;
+                line-height: 30px;
+            }
+        }
+    }
+
+    .post__img {
+        width: 46px;
+        img {
+            width: 36px;
+            height: 36px;
+            vertical-align: inherit;
+            @include border-radius(50px);
+        }
+    }
+
+    .post__embed-container {
+        display: block;
+        max-height: 1000px;
+        transition: max-height .5s ease;
+        overflow: hidden;
+        &[hidden] {
+            max-height: 0;
+        }
+    }
+
+    .dropdown {
+        display: inline-block;
+        visibility: hidden;
+        margin-right: 5px;
+        top: -1px;
+
+        .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 130px;
+            padding: 2px 0;
+
+            li {
+                display: block;
+            }
+
+            a {
+                padding: 5px 15px;
+            }
+        }
+    }
+
+    .post__dropdown {
+        &:after {
+            content: '[...]';
+            top: -1px;
+            position: relative;
+        }
+    }
+
+    .post__remove {
+        font-family: 'Open Sans', sans-serif;
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        right: 15px;
+        top: -5px;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        font-weight: 600;
+        visibility: hidden;
+        color: inherit;
+        @include opacity(.5);
+        text-decoration: none;
+
+        &:hover {
+            @include opacity(.8);
+        }
+    }
+
+    .post__body {
+        word-wrap: break-word;
+        padding: .2em .5em;
+        @include legacy-pie-clearfix;
+        width: calc(100% - 75px);
+
+        p {
+            margin: 0 0 .4em;
+        }
+
+        p + p {
+            margin-top: 1.4em;
+        }
+
+        li {
+            > p {
+                margin-top: 10px;
+            }
+        }
+
+        img {
+            max-height: 400px;
+        }
+
+        ul,
+        ol {
+            margin-bottom: .4em;
+
+            p {
+                margin-bottom: 0;
+            }
+            li ul,
+            li ol {
+                padding: 0 0 0 20px;
+            }
+
+            li.list-item--task-list ul,
+            li.list-item--task-list ol {
+                margin-left: 20px;
+            }
+
+            li.list-item--task-list ul {
+                padding-left: 0;
+            }
+
+            li:not(.list-item--task-list) li.list-item--task-list,
+            li:not(.list-item--task-list) li.list-item--task-list ~ li {
+                margin-left: -20px;
+            }
+
+            li input[type='checkbox']:disabled {
+                vertical-align: top;
+                cursor: default;
+            }
+        }
+
+        ul li.list-item--task-list,
+        ul li.list-item--task-list ~ li {
+            list-style-type: none;
+        }
+
+        ul li.list-item--task-list ~ li:not(.list-item--task-list) {
+            text-indent: 3px;
+
+            &:before {
+                content: '&#10625;';
+                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;
+}
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .sidebar--left {
    position: absolute;
@@ -6,9 +6,9 @@
    left: 0;
    height: 100%;
    border-right: $border-gray;
-    padding: 0 0 2em 0;
    background: #fafafa;
    z-index: 5;
+
    &.sidebar--padded {
        padding-top: 44px;
    }
@@ -25,23 +25,26 @@
        display: none;
    }
    .badge {
-        background-color: $primary-color;
+        background-color: $color--primary;
        position: absolute;
        right: 10px;
        top: 5px;
    }
    .status {
-        position:relative;
-        top:1px;
+        position: relative;
+        top: 1px;
        margin-right: 6px;
        width: 12px;
        display: inline-block;
        svg {
            max-height: 14px;
        }
-        i, path, ellipse {
-            @include opacity(0.5);
-            &.online--icon, &.away--icon {
+        i,
+        path,
+        ellipse {
+            @include opacity(.5);
+            &.online--icon,
+            &.away--icon {
                @include opacity(1);
            }
        }
@@ -54,7 +57,7 @@
        }
    }
    .nav-pills__container {
-        height: 100%;
+        height: calc(100% - 80px);
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
@@ -66,7 +69,7 @@
        right: 0;
        width: 72%;
        color: #fff;
-        background: #2389D7;
+        background: #2389d7;
        @include border-radius(50px);
        margin: 0 auto;
        padding: 3px 0 4px;
@@ -84,7 +87,7 @@

    .nav {
        &.nav-stacked {
-            > li+li {
+            > li + li {
                margin: 0;
            }
        }
@@ -92,10 +95,10 @@
            > h4 {
                font-size: 1em;
                text-transform: uppercase;
-                margin: 1.1em 0 0.5em;
+                margin: 1.1em 0 .5em;
                font-weight: 400;
-                color: #AAA;
-                letter-spacing: -0.3px;
+                color: #aaa;
+                letter-spacing: -.3px;
                padding: 0 10px 0 15px;
            }
            > a {
@@ -113,7 +116,7 @@
                    &:hover {
                        .btn-close {
                            display: block;
-                            @include opacity(0.8);
+                            @include opacity(.8);
                        }
                    }
                    .btn-close {
@@ -149,8 +152,10 @@
                        background: #000;
                    }
                }
-                a, a:hover, a:focus {
-                    background-color: rgba(black, 0.1);
+                a,
+                a:hover,
+                a:focus {
+                    background-color: rgba(black, .1);
                    border-radius: 0;
                    font-weight: 400;
                    position: relative;
@@ -166,7 +171,7 @@
        float: right;
        outline: none;
        margin: -2px 0 0 0;
-        color: #AAA;
+        color: #aaa;
        padding: 0 5px;
        text-decoration: none;
        font-size: 22px;
@@ -189,5 +194,4 @@
    margin-left: 10px;
    height: 25px;
    width: 25px;
-
 }
--- a/web/sass-files/sass/partials/_sidebar--menu.scss
+++ b/web/sass-files/sass/partials/_sidebar--menu.scss
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .sidebar--menu {
    position: absolute;
@@ -20,7 +20,7 @@
            color: #fff;
        }
        .navbar-right {
-            font-size: 0.85em;
+            font-size: .85em;
            margin: 16px -5px 0;
            .dropdown-toggle {
                padding: 0 10px;
@@ -32,7 +32,7 @@
                }
            }
            .dropdown__icon {
-                background: url("../images/dropdown-icon.png");
+                background: url('../images/dropdown-icon.png');
                width: 4px;
                height: 16px;
                @include background-size(100% 100%);
@@ -59,7 +59,8 @@
                color: inherit;
                line-height: 40px;
                padding: 0 15px;
-                .fa ,.glyphicon {
+                .fa,
+                .glyphicon {
                    width: 25px;
                    text-align: center;
                    left: -5px;
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ b/web/sass-files/sass/partials/_sidebar--right.scss
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .sidebar--right {
    position: fixed;
@@ -8,28 +8,21 @@
    padding: 0;
    background: #fff;
    @include translateX(400px);
-    .post-body {

+    .post-body {
        img {
            max-height: 200px;
        }
-
    }

    .post {
-
        .post__header {
-
            .col__name {
-
                .user-popover {
                    max-width: 130px;
                }
-
            }
-
        }
-
    }

    .sidebar--right__content {
@@ -40,13 +33,14 @@

    .sidebar--right__back {
        color: inherit;
-        @include opacity(0.8);
+        @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;
@@ -56,38 +50,45 @@
        height: calc(100% - 56px);
        @include border-radius(2px 0 0 0);
    }
+
    .sidebar__overlay {
        width: 100%;
        height: 100%;
        background-color: yellow;
-        @include opacity(0.1);
+        @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: 0.5;
+        opacity: .5;
        font-size: 22px;
        line-height: 0;
        background: none;
        float: right;
        outline: none;
        border: none;
-        @include single-transition(all, 0.2s, ease-in);
-        &:hover, &:active {
-            opacity: 0.8;
+        @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;
@@ -98,23 +99,27 @@
        @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(0.7);
+            @include opacity(.7);
            padding: 10px 0 0 30px;
        }
+
        li {
-            font-size: 0.95em;
+            font-size: .95em;
            padding-bottom: 10px;
        }
    }

-    .suggestion-content {
+    .suggestion-list__content {
        max-height: 120px;
    }
 }
--- a/web/sass-files/sass/partials/_webhooks.scss
+++ b/web/sass-files/sass/partials/_webhooks.scss
@@ -1,20 +1,23 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .webhooks__container {
-    background: rgba(black, 0.1);
+    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;
@@ -25,9 +28,10 @@
        font-weight: bold;
        text-align: center;
        text-decoration: none;
-        color: #E05F5D;
+        color: #e05f5d;
    }
+
    .webhook__url {
        padding-right: 20px;
    }
-}
+}
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -1,256 +0,0 @@
-@charset "UTF-8";
-
-html, body {
-    height: 100%;
-}
-
-body {
-    font-family: 'Open Sans', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    background: $body-bg;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    &.white {
-        background: #fff;
-        > .container-fluid {
-            overflow: auto;
-        }
-        .inner__wrap {
-            > .row.content {
-                min-height: 100%;
-                margin-bottom: -89px;
-            }
-        }
-    }
-}
-
-b, strong {
-    font-weight: 600;
-}
-
-.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%;
-    height: auto;
-    &.rounded {
-        @include border-radius(100%);
-    }
-}
-
-.popover {
-    @include border-radius(3px);
-    color: #333;
-    &.bottom, &.right, &.top, &.left {
-        >.arrow:after {
-            border-color: transparent;
-        }
-    }
-    .popover-title {
-        background: rgba(black, 0.05);
-    }
-    .popover-content {
-        p:last-child {
-            margin-bottom: 5px;
-        }
-    }
-}
-
-.dropdown-menu {
-    .divider {
-        @include opacity(0.15);
-    }
-    > li > a {
-        color: inherit;
-        &:focus, &:hover {
-            color: inherit;
-        }
-    }
-}
-
-.word-break--all {
-    word-break: break-all;
-}
-
-a {
-    word-break: break-word;
-    color: $primary-color;
-    cursor: pointer;
-}
-
-a:focus, a:hover {
-    color: $primary-color;
-}
-
-.tooltip {
-    .tooltip-inner {
-        word-break: break-word;
-        font-size: 13px;
-        padding: 3px 10px 4px;
-        font-weight: 500;
-    }
-}
-
-.nopadding {
-    padding: 0;
-    margin: 0;
-}
-
-.text-danger, a.text-danger {
-    color: #E05F5D;
-    &:hover, &:focus {
-        color: #E05F5D;
-    }
-}
-
-.btn {
-    &.btn-danger {
-        color: #fff;
-        &:hover, &:active, &:focus {
-            color: #fff;
-        }
-    }
-}
-
-.form-control {
-    @include border-radius(2px);
-    &: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, 0.1);
-    color: inherit;
-}
-
-.form-group {
-    &.form-group--small {
-        margin-bottom: 10px;
-    }
-}
-
-.error-panel {
-    max-width: 275px;
-    position: absolute;
-    right: 10px;
-    top: 40px;
-    z-index: 100;
-}
-
-.nav>li>a:focus, .nav>li>a:hover {
-    background: transparent;
-}
-
-.btn {
-    @include single-transition(all, 0.25s, ease-in);
-    @include border-radius(1px);
-    &.btn-primary {
-        border-color: transparent;
-        background: $primary-color;
-        &:hover, &:focus, &:active {
-            background: $primary-color--hover;
-        }
-    }
-    &.btn-inactive {
-        border-color: transparent;
-        background: #707070;
-        color: #fff;
-    }
-}
-
-.relative-div {
-    position:relative;
-}
-
-@-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);}
-}
-
-.glyphicon-refresh-animate {
-    @include animation(spin .7s infinite linear);
-}
-
-.black-bg {
-    background-color: black !important;
-}
-
-.white-bg {
-    background-color: white !important;
-}
-
-.alert {
-    padding: 8px 12px;
-    @include border-radius(2px);
-}
-
-.emoji {
-    width: 1.5em;
-    height: 1.5em;
-    display: inline-block;
-    margin-bottom: 0.25em;
-    background-size: contain;
-}
-
-
-// Scrollbar Css
-
-::-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(5px);
-    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;
-}
--- a/web/sass-files/sass/partials/_colorpicker.scss
+++ b/web/sass-files/sass/partials/_colorpicker.scss
@@ -1,253 +0,0 @@
-@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, 0.2);
-  content: '';
-}
-
-.colorpicker:after {
-  position: absolute;
-  top: -6px;
-  left: 7px;
-  display: inline-block;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
-  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: #ffffff;
-  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;
-}
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -1,82 +0,0 @@
-@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(0.7);
-	}
-
-	a {
-		color: inherit;
-	}
-
-}
-
-.post-list {
-	.new-messages-hr {
-		margin-top: 5px;
-		margin-bottom: 0px;
-		border: 0;
-		border-top: 1px solid #FF8800;
-	}
-
-	.new-messages-text {
-		margin-top: 2px;
-		margin-bottom: 5px;
-		color: #FF8800;
-		text-align: center;
-	}
-}
-.new-messages-hr {
-	margin-top: 5px;
-	margin-bottom: 0px;
-	border: 0;
-	border-top: 1px solid #FF8800;
-}
-
-.new-messages-text {
-	margin-top: 2px;
-	margin-bottom: 5px;
-	color: #FF8800;
-	text-align: center;
-}
-
-.delete-message-text {
-	margin-top: 10px;
-}
--- a/web/sass-files/sass/partials/_docs.scss
+++ b/web/sass-files/sass/partials/_docs.scss
@@ -1,19 +0,0 @@
-@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;
-	}
-}
--- a/web/sass-files/sass/partials/_error.scss
+++ b/web/sass-files/sass/partials/_error.scss
@@ -1,31 +0,0 @@
-@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: 0.8em 0 0.5em;
-		}
-		p {
-			font-size: 1.2em;
-		}
-	}
-}
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -1,264 +0,0 @@
-@charset "UTF-8";
-
-.preview-container {
-  position: relative;
-  margin: 1px 0 10px;
-  width: 100%;
-  max-height: 100px;
-  height: 100px;
-  white-space: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  .preview-div {
-    display: inline-block;
-    width: 120px;
-    height: 100px;
-    margin: 0 0 0 5px;
-    vertical-align: top;
-    position: relative;
-    border: 1px solid #DDD;
-    @include clearfix;
-    &:hover .remove-preview: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;
-    }
-  }
-  .preview-img {
-    display: block;
-    height: auto;
-    max-width: 100%;
-  }
-  .remove-preview {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    &:after {
-      background: rgba(0, 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, 0.7);
-    }
-  }
-}
-
-.image-comment {
-  background-position:left top;
-  background-repeat:no-repeat;
-  width:300px;
-  height:300px;
-}
-
-@mixin file-icon($path) {
-  background: #fff url($path);
-  background-position: center;
-  background-repeat: no-repeat;
-  @include background-size(60px auto);
-}
-.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;
-  .post__load {
-    height: 100%;
-    width: 100%;
-    background-size: 20px 20px;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  .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(0.7);
-    }
-    .post-image__type {
-      @include opacity(0.6);
-    }
-    .post-image__size {
-      margin-left: 4px;
-      @include opacity(0.6);
-    }
-  }
-  a {
-    text-decoration: none;
-    color: grey;
-  }
-}
-
-.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 0.6s;
-    -moz-transition: opacity 0.6s;
-    -o-transition: opacity 0.6s;
-    transition: opacity 0.6s;
-
-    &.stop {
-        @include opacity(0);
-    }
-}
-
-.view-image__loading {
-    background: black;
-    min-height: 100px;
-}
--- a/web/sass-files/sass/partials/_forms.scss
+++ b/web/sass-files/sass/partials/_forms.scss
@@ -1,51 +0,0 @@
-@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(0.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: 0.95em;
-	margin: 10px 0 0;
-	color: #999;
-}
-
-.disabled-input {
-	background-color: #dddddd !important;
-}
--- a/web/sass-files/sass/partials/_get-link.scss
+++ b/web/sass-files/sass/partials/_get-link.scss
@@ -1,8 +0,0 @@
-@charset "UTF-8";
-
-.copy-link-confirm {
-	display: inline-block;
-	float: left;
-	padding: 4px 10px;
-	margin: 1px 0 0 10px;
-}
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -1,320 +0,0 @@
-@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, 0.05s, linear);
-			content: "";
-			background: none;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			position: absolute;
-		}
-		&:hover {
-			&:before {
-				background: rgba(black, 0.1);
-			}
-			.user__name {
-				color: #fff;
-			}
-			.navbar-right {
-				.dropdown-toggle {
-					@include opacity(1);
-				}
-			}
-		}
-		.navbar-right {
-			font-size: 0.85em;
-			position: absolute;
-			top: 10px;
-			right: 22px;
-			z-index: 5;
-			.dropdown-toggle {
-				@include single-transition(all, 0.1s, linear);
-				padding: 10px;
-				@include opacity(0.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, 0.1s, linear);
-			font-size: 14px;
-			line-height: 18px;
-			font-weight: 400;
-			color: #eee;
-			color: rgba(#fff, 0.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(0.6);
-		@include single-transition(all, 0.1s, ease-in);
-		&:hover {
-			@include opacity(1);
-		}
-		&:focus {
-			color: inherit;
-		}
-	}
-}
--- a/web/sass-files/sass/partials/_loading.scss
+++ b/web/sass-files/sass/partials/_loading.scss
@@ -1,42 +0,0 @@
-@charset "UTF-8";
-
-.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 0.2em 0;
-			display: inline-block;
-		}
-
-		.round {
-			background-color: #444;
-			width: 4px;
-			height: 4px;
-			display: inline-block;
-			margin: 0 2px;
-			opacity: 0.1;
-			@include border-radius(10px);
-			@include animation(move 0.75s infinite linear);
-		}
-
-		@for $i from 1 through 3 {
-			.round-#{$i} {
-				@include animation-delay(.2s*$i);
-			}
-		}
-
-		@include keyframes(move) {
-			from { opacity: 1; }
-			to { opacity: 0.1; }
-		}
-	}
-}
--- a/web/sass-files/sass/partials/_markdown.scss
+++ b/web/sass-files/sass/partials/_markdown.scss
@@ -1,106 +0,0 @@
-@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: 0.7;
-	z-index: 5;
-}
-
-.post__body {
-	hr {
-		height: 4px;
-		padding: 0;
-		margin: 15px 0 16px;
-		background-color: #e7e7e7;
-		border: 0 none;
-		@include opacity(0.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(0.6);
-	}
-}
-pre {
-	border: none;
-	margin: 5px 0;
-	color: inherit;
-}
-code {
-	background: #fff;
-	color: inherit;
-}
--- a/web/sass-files/sass/partials/_mentions.scss
+++ b/web/sass-files/sass/partials/_mentions.scss
@@ -1,61 +0,0 @@
-@charset "UTF-8";
-
-.mention {
-	color: #fff;
-	background: $primary-color;
-	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);
-	}
-}
-
-.mentions-text {
-	font-color:black;
-}
-
-.mention-img {
-	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;
-}
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -1,489 +0,0 @@
-@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;
-	p {
-		font-size: 0.9em;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		@include opacity(0.8);
-		margin: 5px 0;
-	}
-	.profile-img {
-		-moz-border-radius: 50px;
-		-webkit-border-radius: 50px;
-		border-radius: 50px;
-		margin-right: 8px;
-	}
-	.more-row {
-		display: flex;
-
-		.more-details {
-			flex-grow: 1;
-			flex-shrink: 1;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.more-actions {
-			flex-grow: 0;
-			flex-shrink: 0;
-		}
-	}
-	.more-name {
-		font-weight: 600;
-		font-size: 0.95em;
-		white-space: nowrap;
-	}
-	.more-description {
-		@include opacity(0.7);
-		display: block;
-		white-space: nowrap;
-	}
-	tbody {
-		> tr {
-			&:hover td {
-				background: #f7f7f7;
-			}
-			&:first-child {
-				td {
-					border: none;
-				}
-			}
-			td {
-				width: 100%;
-				@include legacy-pie-clearfix;
-				text-overflow: ellipsis;
-				padding: 8px 15px;
-				&.padding--equal {
-					padding: 8px;
-				}
-			}
-		}
-	}
-}
-.modal {
-	width: 100%;
-	color: #333;
-	body.browser--IE & {
-		.modal-dialog {
-			@include translateY(0);
-		}
-	}
-	&.image_modal {
-		.modal-backdrop.in {
-			@include opacity(0.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: $primary-color;
-		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, 0.25s, ease-in);
-			position: absolute;
-			right: 10px;
-			&:hover {
-				background: rgba(0, 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(0.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 0.6s;
-				-moz-transition: opacity 0.6s;
-				-o-transition: opacity 0.6s;
-				transition: opacity 0.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 0.6s;
-			-moz-transition: opacity 0.6s;
-			-o-transition: opacity 0.6s;
-			transition: opacity 0.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;
-	}
-
-	.table {
-		margin-top: 10px;
-	}
-
-	.modal-body {
-		padding: 10px 0 20px;
-		overflow-x: hidden;
-	}
-
-	.filter-row {
-		margin-top: 10px;
-		@include clearfix;
-	}
-
-	.member-count {
-		margin-top: 5px;
-		float: right;
-		@include opacity(0.8);
-	}
-
-	.more-purpose {
-		@include opacity(0.7);
-	}
-}
-
-.modal-body.edit-modal-body {
-	overflow: visible;
-
-	.suggestion-content {
-		max-height: 150px;
-	}
-}
-
-.user-list {
-    display: flex;
-    flex-direction: column;
-
-    .profile-img {
-        width: 38px;
-        height: 38px;
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-
-    .user-list-item__details {
-        flex-grow: 1;
-        flex-shrink: 1;
-        overflow:hidden;
-        text-overflow: ellipsis;
-
-        .more-name {
-            white-space: nowrap;
-        }
-
-        .more-description {
-            white-space: nowrap;
-        }
-    }
-
-    .user-list-item__actions {
-        flex-grow: 0;
-        flex-shrink: 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;
-    }
-}
--- a/web/sass-files/sass/partials/_navbar.scss
+++ b/web/sass-files/sass/partials/_navbar.scss
@@ -1,112 +0,0 @@
-@charset "UTF-8";
-
-#navbar{
-	input {
-		margin: 0px 5px 0px 2px;
-	}
-	.navbar-default {
-		position: absolute;
-		border: none;
-		min-height: 45px;
-		background: $primary-color;
-		.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 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: 0.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;
-}
--- a/web/sass-files/sass/partials/_oauth.scss
+++ b/web/sass-files/sass/partials/_oauth.scss
@@ -1,33 +0,0 @@
-@charset "UTF-8";
-
-.oauth-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;
-	}
-}
--- a/web/sass-files/sass/partials/_perfect-scrollbar.scss
+++ b/web/sass-files/sass/partials/_perfect-scrollbar.scss
@@ -1,122 +0,0 @@
-@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-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
-      background-color: #eee;
-      opacity: 0.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: 0.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-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
-      background-color: #eee;
-      opacity: 0.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: 0.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: 0.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: 0.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: 0.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; }
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -1,159 +0,0 @@
-@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(0.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);
-
-	.preview-container {
-		margin-top: 5px;
-	}
-
-}
-
-.post-right-comment-time {
-	color: #a8adb7;
-}
--- a/web/sass-files/sass/partials/_print.scss
+++ b/web/sass-files/sass/partials/_print.scss
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -1,160 +0,0 @@
-@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;
-	}
-}
-.search__clear {
-	display: none;
-	position: absolute;
-	right: 0;
-	line-height: 45px;
-	margin-right: 13px;
-	@include single-transition(all, 0.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, 0.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(0.5);
-	display: none;
-	color: #777;
-}
-.search__form {
-	.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(0.8);
-
-	&:hover {
-		@include opacity(1);
-	}
-
-}
-
-.search-item__comment {
-	position: absolute;
-	right: 0;
-	margin-right: 35px;
-	top: 0;
-}
-
-.search-item-time {
-	@include opacity(0.7);
-    font-size: 0.9em;
-}
-
-.search-results-none {
-	padding: 10px;
-}
-
-.search-highlight {
-	background-color: #FFF2BB;
-}
--- a/web/sass-files/sass/partials/_statistics.scss
+++ b/web/sass-files/sass/partials/_statistics.scss
@@ -1,87 +0,0 @@
-@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: 0.3em 0 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;
-				}
-			}
-		}
-	}
-}
--- a/web/sass-files/sass/partials/_suggestion_list.scss
+++ b/web/sass-files/sass/partials/_suggestion_list.scss
@@ -1,67 +0,0 @@
-@charset "UTF-8";
-
-.suggestion-list {
-	width: 100%;
-	z-index: 100;
-	@extend %popover-box-shadow;
-}
-
-.suggestion-list--top {
-    position: absolute;
-}
-
-.suggestion-content {
-    width: 100%;
-    max-height: 292px;
-    background-color: #fff;
-    border: $border-gray;
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
-.suggestion-content--top {
-    position: absolute;
-    bottom: 0;
-}
-
-.suggestion--selected {
-    // set by theme code
-}
-
-.command-name {
-    position: relative;
-    width: 100%;
-    line-height: 24px;
-    padding: 5px 10px 8px;
-    z-index: 101;
-    font-size: 0.95em;
-    border-bottom: 1px solid #ddd;
-
-    .command__desc {
-        margin-left: 5px;
-        @include opacity(0.5);
-        line-height: normal;
-    }
-}
-
-.command-desc {
-    color: #a7a8ab;
-}
-
-.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;
-}
--- a/web/sass-files/sass/partials/_tooltips.scss
+++ b/web/sass-files/sass/partials/_tooltips.scss
@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-#recentMentionsTooltip {
-	.tooltip-arrow {
-		margin-left: 10px;
-	}
-}
--- a/web/sass-files/sass/partials/_variables.scss
+++ b/web/sass-files/sass/partials/_variables.scss
@@ -1,16 +0,0 @@
-@charset "UTF-8";
-
-@function em($pixels, $context: 14px) {
-	@return #{$pixels/$context}em
-}
-
-// Color Variables
-$primary-color: #2389D7;
-$primary-color--hover: darken(#2389D7, 5%);
-$body-bg: #e9e9e9;
-$header-bg: #f9f9f9;
-$border-gray: 1px solid #ddd;
-
-%popover-box-shadow {
-	@include box-shadow(rgba(black, 0.175) 1px -3px 12px);
-}
--- a/web/sass-files/sass/partials/_videos.scss
+++ b/web/sass-files/sass/partials/_videos.scss
@@ -1,66 +0,0 @@
-@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,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(0.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,0.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,0.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;
-    }
-}
--- a/web/sass-files/sass/partials/_welcome.scss
+++ b/web/sass-files/sass/partials/_welcome.scss
@@ -1,15 +0,0 @@
-@charset "UTF-8";
-
-.welcome-info {
-  max-width: 550px;
-  margin-top: 50px;
-  margin-left: 25px;
-  h1 {
-      font-size: 200%;
-      margin-bottom: 20px;
-  }
-  p {
-      font-size: 125%;
-      margin-top: 12px;
-  }
-}
--- a/web/sass-files/sass/responsive/_desktop.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -1,103 +1,18 @@
-@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 screen and (max-width: 960px) {
-
-    .sidebar--right {
-        z-index: 5;
-        @include translateX(100%);
-        @include single-transition(all, 0.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;
-            }
-
-        }
-
-    }
-
-}
+@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 {
+    .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;
@@ -111,7 +26,6 @@
                content: '...';
                top: -3px;
            }
-
        }

        .comment-icon__container {
@@ -121,11 +35,9 @@
            &.icon--show {
                display: inline-block;
            }
-
        }

        .post-list__content & {
-
            &:hover {
                background: transparent;
            }
@@ -133,10 +45,10 @@
            .comment-icon__container {
                visibility: visible;
            }
-
        }

-        .dropdown, .post__reply {
+        .dropdown,
+        .post__reply {
            visibility: visible;
        }

@@ -151,19 +63,15 @@
            svg {
                top: 1px;
            }
-
        }

        &.other--root .post__reply {
-
            &.post__reply--hide {
                visibility: hidden;
            }
-
        }

        .post__header {
-
            .col__reply {
                width: 65px;
            }
@@ -174,21 +82,15 @@
                .user-popover {
                    max-width: 130px;
                }
-
            }
-
        }

        &.same--root {
-
            &.same--user {
-
                .post__time {
                    display: none;
                }
-
            }
-
        }

        .post__img {
@@ -199,7 +101,6 @@
                height: 32px;
            }
        }
-
    }

    .post-image__column {
@@ -208,7 +109,8 @@
    }

    .textarea-wrapper {
-        .textbox-preview-link, .textbox-help-link {
+        .textbox-preview-link,
+        .textbox-help-link {
            display: none;
        }
    }
@@ -217,13 +119,16 @@
            min-height: 100px;
        }
    }
+
    .img-div {
        max-width: 100%;
    }
+
    .tip-div {
        left: 15px;
        right: auto;
    }
+
    .tip-overlay {
        &.tip-overlay--chat {
            margin-left: 10px;
@@ -232,8 +137,10 @@
            }
        }
    }
+
    .file-details__container {
        display: block;
+
        .file-details__preview {
            display: block;
            width: 100%;
@@ -245,14 +152,17 @@
                height: 64px;
            }
        }
+
        .file-details {
            width: 100%;
            height: auto;
        }
    }
+
    .search-help-popover.visible {
        visibility: hidden;
    }
+
    .modal-direct-channels {
        .member-count {
            float: none;
@@ -260,76 +170,95 @@
            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 {
+
+    .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: 0.9em;
+        font-size: .9em;
+
        .signup-team__name {
            font-size: 2em;
        }
+
        .btn.btn-full {
            padding-left: 10px;
        }
+
        .btn {
-            .icon, .fa {
+            .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;
@@ -339,58 +268,71 @@
                }
            }
        }
+
        .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--top {
-                        top: auto;
-                    }
                    position: relative;
                    top: auto;
                    width: 100%;
+
+                    &.position--top {
+                        top: auto;
+                    }
                }
+
                .settings-content {
                    .section-edit {
                        position: absolute;
@@ -401,6 +343,7 @@
                            display: inline-block;
                        }
                    }
+
                    &.minimize-settings {
                        padding: 0;
                        display: none;
@@ -408,10 +351,12 @@
                            padding: 70px 20px 30px;
                        }
                    }
+
                    .section-min:hover {
                        background: none !important;
                    }
                }
+
                .nav {
                    > li {
                        > a {
@@ -419,6 +364,7 @@
                            font-size: 1.1em;
                            line-height: 2.7;
                            color: #555;
+
                            .glyphicon {
                                margin-left: 7px;
                            }
@@ -428,28 +374,36 @@
            }
        }
    }
+
    .post-create__container {
        .post-right__container & {
            padding: 0 1em;
+
            .msg-typing {
                display: none;
            }
        }
+
        form {
-            padding: 0.5em 0;
+            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;
@@ -457,6 +411,7 @@
                    padding-left: 0;
                }
            }
+
            .app__content & {
                .btn-file {
                    width: 45px;
@@ -467,70 +422,85 @@
                    top: auto;
                }
            }
+
            .send-button {
                display: table-cell;
            }
        }
    }
-    .preview-container {
+
+    .file-preview__container {
        margin: 5px 0 0;
-        .preview-div {
-            margin-top: 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;
        }
-        .remove-preview {
-            width: 28px;
-            height: 28px;
-            left: auto;
-            right: 0;
-            top: 0;
-            background: #444;
-            background: rgba(#000, 0.5);
-            text-align: center;
-            &:after {
-                display: none;
-            }
-            i {
-                line-height: 29px;
-                top: auto;
-                right: auto;
-                position: relative;
-                font-size: 16px;
-            }
+
+        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 {
-                    background: url("../images/dropdown-icon.png");
+                    background: url('../images/dropdown-icon.png');
                    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 {
+            .inner-wrap {
+                > .row.content {
                    margin-bottom: -185px;
                }
            }
        }
    }
-    .footer, .footer-pane, .footer-push {
+
+    .footer,
+    .footer-pane,
+    .footer-push {
        height: 187px;
    }
+
    .footer-pane {
        .footer-link {
            padding: 0;
@@ -542,23 +512,28 @@
            }
        }
    }
+
    .search__clear {
        display: block;
    }
+
    .search-bar__container {
        padding: 0;
        @include flex(0 0 44px);
-        background: $primary-color;
+        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);
            }
@@ -569,16 +544,19 @@
            padding: 7px 20px 0 49px;
            height: 45px;
            position: relative;
-            @include single-transition(all, 0.2s, linear);
+            @include single-transition(all, .2s, linear);
+
            .glyphicon-refresh-animate {
                right: 33px;
                top: 15px;
-                color: #aaa;
+                color: #fff;
+                color: rgba(255,255,255,.5);
            }
+
            .form-control {
                border: none;
                padding: 0 10px 0 31px;
-                background: rgba(black, 0.2);
+                background: rgba(black, .2);
                @include border-radius(3px);
                color: #444;
                background: #fff;
@@ -586,35 +564,42 @@
        }
    }
    .sidebar--menu {
-        @include single-transition(transform, 0.5s, ease);
+        @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, 0.5s, ease);
+        @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;
@@ -630,21 +615,24 @@
            .navbar-right {
                display: none;
            }
-
        }
+
        .search__form {
            display: block;
        }
+
        .nav {
            li {
                &.dropdown.open {
                    padding-bottom: 25px;
+
                    ul {
                        clear: both;
-                        background: #FFF;
+                        background: #fff;
                        border-radius: 3px;
                        top: 5px;
                        position: relative;
+
                        li {
                            a {
                                line-height: 30px;
@@ -652,83 +640,101 @@
                        }
                    }
                }
+
                h4 {
                    margin: 16px 0 8px;
                }
+
                > a {
                    font-size: 15px;
                    margin: 0;
                    line-height: 2.5;
-                    &:hover, &:focus {
+
+                    &:hover,
+                    &:focus {
                        background: transparent;
                    }
+
                    &.has-close {
                        .btn-close {
                            width: 40px;
                            text-align: center;
                            right: 0;
                            display: block;
-                            @include opacity(0.5);
+                            @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 {
+
+        .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, 0.5s, ease);
+
+    .inner-wrap {
+        @include single-transition(all, .5s, ease);
+
        &.move--right {
            @include translate3d(290px, 0, 0);
+
            &:before {
                z-index: 9999;
-                content: "";
+                content: '';
                width: 100%;
                height: 100%;
                left: -15px;
                top: 0;
                position: absolute;
-                background: rgba(0, 0, 0, 0.4);
+                background: rgba(0, 0, 0, .4);
            }
        }
+
        &.move--left-small {
            @include translate3d(-290px, 0, 0);
            &:before {
                z-index: 9999;
-                content: "";
+                content: '';
                width: 100%;
                height: 100%;
                right: -15px;
                top: 0;
                position: absolute;
-                background: rgba(0, 0, 0, 0.4);
+                background: rgba(0, 0, 0, .4);
            }
        }
+
        &.move--left {
            margin: 0;
            @include translate3d(-100%, 0, 0);
        }
    }
+
    .modal {
        .modal-image {
            .image-wrapper {
@@ -736,15 +742,18 @@
                    font-size: 12px;
                    min-width: 250px;
                }
+
                .modal-close {
                    @include opacity(1);
                }
            }
+
            .modal-button-bar {
                @include opacity(1);
            }
        }
    }
+
    .app__content {
        padding-top: 45px;
        margin: 0;
@@ -756,7 +765,6 @@
        }
    }

-
    .channel__wrap {
        .row {
            &.header {
@@ -769,18 +777,22 @@
        padding: 9px 21px 10px 10px !important;
    }

-    .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop {
+    .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;
@@ -791,21 +803,22 @@
        > 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;
@@ -813,21 +826,20 @@
                    &: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 {
@@ -836,29 +848,36 @@
            }
        }
    }
+
    .member-div {
        padding: 8px 0;
-        .member-drop, .member-role {
+
+        .member-drop,
+        .member-role {
            position: relative;
            margin: 0px 0 0 44px;
            padding: 5px 0;
            top: 0;
            right: 0;
        }
-        .open>.dropdown-menu {
+
+        .open > .dropdown-menu {
            left: 0;
            right: auto;
        }
    }
+
    .sidebar--left {
        @include translate3d(-260px, 0, 0);
        width: 260px;
    }
-    .inner__wrap {
+
+    .inner-wrap {
        &.move--right {
            @include translate3d(260px, 0, 0);
        }
    }
+
    .modal {
        .modal-image {
            .modal-button-bar {
@@ -869,24 +888,12 @@
    }
 }

-
-@media (min-width: 992px){
-    .modal-lg {
-        width: 700px;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .second-bar {
-        display: none;
-    }
-}
-
@media screen and (max-height: 640px) {
    .signup-team__container {
        padding: 30px 0;
        margin-bottom: 30px;
-        font-size: 0.9em;
+        font-size: .9em;
+
        .signup-team__name {
            font-size: 2em;
        }
--- a/web/sass-files/sass/responsive/_module.scss
+++ b/web/sass-files/sass/responsive/_module.scss
@@ -0,0 +1,4 @@
+@charset 'UTF-8';
+@import 'desktop';
+@import 'tablet';
+@import 'mobile';
--- a/web/sass-files/sass/responsive/_tablet.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/partials/_access-history.scss
+++ b/web/sass-files/sass/partials/_access-history.scss
@@ -1,27 +1,32 @@
-@charset "UTF-8";
+@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(0.8);
+        @include opacity(.8);
    }
-}
+}
--- a/web/sass-files/sass/partials/_activity-log.scss
+++ b/web/sass-files/sass/partials/_activity-log.scss
@@ -1,8 +1,12 @@
-@charset "UTF-8";
+@charset 'UTF-8';

@keyframes highlight {
-  from { background: rgba(yellow, 0.5);}
-  to { background: none;}
+    from {
+        background: rgba(yellow, .5);
+    }
+    to {
+        background: none;
+    }
 }

 .animation--highlight {
@@ -21,22 +25,27 @@
    display: table;
    width: 100%;
    line-height: 1.8;
-    border-top: 1px solid #DDD;
+    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;
@@ -44,10 +53,12 @@
            margin-right: 6px;
        }
    }
+
    .report__info {
-        @include opacity(0.8);
+        @include opacity(.8);
    }
 }
+
 .session-help-text {
    padding: 0 0 20px;
-}
+}
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/web/sass-files/sass/partials/_admin-console.scss
@@ -1,11 +1,11 @@
-@charset "UTF-8";
+@charset 'UTF-8';

-#admin_controller {
+.admin-controller {
    > div {
        height: 100%;
    }

-    .inner__wrap {
+    .inner-wrap {
        position: absolute;
        width: 100%;
    }
@@ -17,7 +17,7 @@
    h3 {
        font-weight: 600;
        border-bottom: 1px solid #ddd;
-        padding-bottom: 0.5em;
+        padding-bottom: .5em;
        margin: 1em 0;
    }

@@ -25,35 +25,77 @@
        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;
+                        &: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;
@@ -64,6 +106,7 @@
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
+
                    .fa {
                        font-size: 13px;
                        right: -2px;
@@ -71,26 +114,32 @@
                        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($primary-color, 10);
+                                color: lighten($color--primary, 10);
                            }
+
                            &.active {
                                color: #fff;
                                font-weight: 600;
                            }
                        }
+
                        .nav-more {
                            font-size: 13px;
                            padding: 5px 15px;
@@ -99,11 +148,12 @@
                            display: block;
                            cursor: pointer;
                            &:hover {
-                                color: lighten($primary-color, 10);
+                                color: lighten($color--primary, 10);
                            }
                        }
                    }
                }
+
                &.nav__inner-menu {
                    li {
                        > a {
@@ -126,29 +176,37 @@
    }

    .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);
@@ -159,91 +217,114 @@
                    left: 0;
                }
            }
+
            .help-text {
                &.no-margin {
                    margin: 0;
                }
-                ul, ol {
+
+                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: 0.7em 1.5em;
-            font-size: 0.95em;
+            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: 0.95em;
+            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;
                }
@@ -252,7 +333,8 @@
    }

    .member-list-holder {
-        .member-role, .member-drop {
+        .member-role,
+        .member-drop {
            position: absolute;
            right: 15px;
            top: 8px;
--- a/web/sass-files/sass/routes/_docs.scss
+++ b/web/sass-files/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;
+    }
+}
--- a/web/sass-files/sass/routes/_error-page.scss
+++ b/web/sass-files/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;
+        }
+    }
+}
--- a/web/sass-files/sass/routes/_loading.scss
+++ b/web/sass-files/sass/routes/_loading.scss
@@ -0,0 +1,48 @@
+@charset 'UTF-8';
+
+.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;
+            }
+        }
+    }
+}
--- a/web/sass-files/sass/routes/_module.scss
+++ b/web/sass-files/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';
--- a/web/sass-files/sass/routes/_print.scss
+++ b/web/sass-files/sass/routes/_print.scss
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -1,11 +1,7 @@
-@charset "UTF-8";
-
-@import "access-history";
-@import "activity-log";
-@import "webhooks";
+@charset 'UTF-8';

 .user-settings {
-    min-height:300px;
+    min-height: 300px;
    .table-responsive {
        max-width: 560px;
        max-height: 300px;
@@ -125,7 +121,7 @@
                }

                .section-max {
-                    background: rgba(black, 0.05);
+                    background: rgba(black, .05);
                    padding: 1em 0 1.3em;
                    margin-bottom: 0;
                    @include clearfix;
@@ -141,7 +137,7 @@
                            width: 40px;
                        }
                        img {
-                            border: 1px solid rgba(black, 0.15);
+                            border: 1px solid rgba(black, .15);
                            width: 29px;
                        }
                    }
@@ -158,7 +154,7 @@
                            top: 11px;
                            right: 50px;
                            z-index: 5;
-                            content: "\f0d7";
+                            content: '\f0d7';
                            display: inline-block;
                            font: normal normal normal 14px/1 FontAwesome;
                            font-size: inherit;
@@ -167,9 +163,9 @@
                            -moz-osx-font-smoothing: grayscale;
                        }
                        select {
-                            -moz-appearance:none;
-                            -webkit-appearance:none;
-                            appearance:none;
+                            -moz-appearance: none;
+                            -webkit-appearance: none;
+                            appearance: none;
                        }
                    }
                    .premade-themes {
@@ -183,21 +179,20 @@
                        }
                        .active {
                            img {
-                                border-color: $primary-color;
+                                border-color: $color--primary;
                            }
                        }
                    }

                    .theme-elements {
-                        padding-left:15px;
+                        padding-left: 15px;

                        .element {
-                            margin-right:10px;
+                            margin-right: 10px;

                            &:nth-child(2n) {
                                margin-right: 0;
                            }
-
                        }
                    }

@@ -224,16 +219,15 @@

                        .header__icon {
                            float: right;
-                            @include opacity(0.5);
+                            @include opacity(.5);
                        }
-
                    }

                    .theme-elements__body {
                        padding-top: 5px;
                        display: none;
                        @include legacy-pie-clearfix;
-                        background: rgba(255, 255, 255, 0.05);
+                        background: rgba(255, 255, 255, .05);
                        padding: 20px 0 0 20px;
                        margin: 0 20px 0 0;
                        @include border-radius(0 0 3px 3px);
@@ -270,7 +264,7 @@
                    .fa {
                        margin-right: 5px;
                        font-size: 12px;
-                        @include opacity(0.5);
+                        @include opacity(.5);
                        display: none;
                        &.fa-chevron-down {
                            top: -1px;
@@ -281,23 +275,23 @@
                }

                .section-describe {
-                    @include opacity(0.7);
-                    white-space:pre;
+                    @include opacity(.7);
+                    white-space: pre;
                    @include clearfix;
                    text-overflow: ellipsis;
                }

                .divider-dark {
-                    border-bottom:1px solid #aaaaaa;
+                    border-bottom: 1px solid #aaa;
                }

                .divider-light {
-                    border-bottom:1px solid lightgrey;
+                    border-bottom: 1px solid lightgrey;
                }

                .setting-list {
                    padding: 0;
-                    list-style-type:none;
+                    list-style-type: none;
                }

                .setting-list__hint {
@@ -309,7 +303,7 @@
                }

                .setting-list-item {
-                    margin-top:7px;
+                    margin-top: 7px;
                }
                .has-error {
                    color: #a94442;
@@ -325,7 +319,6 @@
                    padding: 4px 10px;
                    margin: 10px 0;
                }
-
            }
        }
    }
@@ -343,13 +336,13 @@
            }
            &:hover {
                a {
-                    background-color: rgba(black, 0.1);
+                    background-color: rgba(black, .1);
                }
            }
            &.active {
                a {
                    color: #111;
-                    background-color: #E1E1E1;
+                    background-color: #e1e1e1;
                    &:before {
                        content: '';
                        position: absolute;
@@ -360,8 +353,10 @@
                        background: #000;
                    }
                }
-                a, a:hover, a:focus {
-                    background-color: rgba(black, 0.1);
+                a,
+                a:hover,
+                a:focus {
+                    background-color: rgba(black, .1);
                    border-radius: 0;
                    font-weight: 400;
                    position: relative;
@@ -382,26 +377,26 @@
 }

 .tab-header {
-    margin-bottom:1em;
+    margin-bottom: 1em;
 }

 .setting-name {
-    color:grey;
-    font-weight:500;
+    color: grey;
+    font-weight: 500;
 }

 .sel-btn {
-    margin-right:5px;
+    margin-right: 5px;
 }

 .member-div {
-    border-bottom:1px solid lightgrey;
-    position:relative;
-    padding:2px;
+    border-bottom: 1px solid lightgrey;
+    position: relative;
+    padding: 2px;
    margin: 0;
-    width:100%;
+    width: 100%;
    &:first-child {
-        border-top:1px solid lightgrey;
+        border-top: 1px solid lightgrey;
    }
    .post-profile-img {
        @include border-radius(50px);
@@ -409,10 +404,11 @@
    }
 }

-.member-role, .member-drop {
+.member-role,
+.member-drop {
    .fa {
        margin-right: 5px;
-        @include opacity(0.5);
+        @include opacity(.5);
        font-size: 12px;
    }

@@ -423,33 +419,33 @@
 }

 .member-invite {
-    position:absolute;
-    right:10px;
-    top:7px;
+    position: absolute;
+    right: 10px;
+    top: 7px;
 }

 .member-menu {
-    right:0px;
-    left:auto;
+    right: 0px;
+    left: auto;
 }

 .member-list {
-    width:100%;
-    overflow-x:visible;
+    width: 100%;
+    overflow-x: visible;
 }

 .member-page {
-    padding-top:50px;
+    padding-top: 50px;
 }

 .active-border {
-    border:1px solid red;
+    border: 1px solid red;
 }

 .color-btn {
-    margin:4px;
+    margin: 4px;
 }

 .no-resize {
-    resize:none;
+    resize: none;
 }
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/web/sass-files/sass/partials/_signup.scss
@@ -1,29 +1,36 @@
-@charset "UTF-8";
+@charset 'UTF-8';

 .signup-header {
-    width:100%;
+    width: 100%;
    line-height: 33px;
-    padding: 0 1em 0.2em;
-    background: #EEE;
+    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 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
        line-height: 1.3;
    }

@@ -33,8 +40,8 @@

    h2 {
        font-weight: 600;
-        margin-bottom: 0.8em;
-        letter-spacing: -0.5px;
+        margin-bottom: .8em;
+        letter-spacing: -.5px;
        font-size: em(30px);
    }

@@ -68,14 +75,17 @@
        &.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%;
@@ -94,13 +104,13 @@
    .block--gray {
        background: #f2f2f2;
        display: inline-block;
-        padding: 0.85em 1.2em;
+        padding: .85em 1.2em;
        font-weight: 600;
        @include border-radius(3px);
    }

    form {
-        margin-bottom: 0.8em;
+        margin-bottom: .8em;
    }

    .signup-team-confirm__container {
@@ -119,14 +129,14 @@
    }

    .signup-team__name {
-        margin: 0.5em 0 0;
+        margin: .5em 0 0;
        font-size: 2.2em;
        font-weight: 600;
        padding-left: 1rem;
    }

    .signup-team__subdomain {
-        margin: 0.2em 0 1.2em;
+        margin: .2em 0 1.2em;
        font-size: 1.5em;
        padding-left: 1rem;
        font-weight: 300;
@@ -139,9 +149,10 @@

    .or__container {
        height: 1px;
-        background: #dddddd;
+        background: #ddd;
        text-align: left;
        margin: 2em 0;
+
        span {
            width: 40px;
            top: -10px;
@@ -169,10 +180,12 @@
        padding: em(7px) em(15px);
        font-weight: 600;
        margin-right: 5px;
+
        .fa {
            font-size: 17px;
            margin-right: 8px;
        }
+
        .icon {
            width: 18px;
            height: 18px;
@@ -180,6 +193,7 @@
            @include background-size(100% 100%);
            display: inline-block;
        }
+
        &.btn-custom-login {
            display: block;
            min-width: 200px;
@@ -190,70 +204,90 @@
            line-height: 34px;
            color: #fff;
            @include border-radius(2px);
+
            &.gitlab {
-                background: #554488;
+                background: #548;
+
                &:hover {
-                    background: darken(#554488, 10%);
+                    background: darken(#548, 10%);
                }
+
                span {
                    vertical-align: middle;
                }
+
                .icon {
-                    background-image: url("../images/gitlabLogo.png");
+                    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");
+                    background-image: url('../images/googleLogo.png');
                }
            }
+
            &.ldap {
                background: #dd4b39;
+
                &:hover {
                    background: darken(#dd4b39, 10%);
                }
+
                span {
                    vertical-align: middle;
                }
            }
+
            &.email {
-                background: #2389D7;
+                background: #2389d7;
+
                &:hover {
-                    background: darken(#2389D7, 10%);
+                    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: 0.5em;
+            &.glyphicon-ok,
+            &.glyphicon-refresh {
+                margin-right: .5em;
                left: -2px;
-                font-size: 0.9em;
+                font-size: .9em;
            }
+
            &.glyphicon-chevron-right {
-                font-size: 0.8em;
+                font-size: .8em;
                right: -2px;
                top: 0px;
            }
+
            &.glyphicon-chevron-left {
-                font-size: 0.8em;
+                font-size: .8em;
                left: -2px;
                top: 0px;
            }
@@ -263,16 +297,17 @@
    .has-error {
        .control-label {
            background: #f2f2f2;
-            padding: 0.7em 1em;
+            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";
+                content: '\f071';
                margin-right: 4px;
                color: #aaa;
            }
@@ -282,27 +317,36 @@
    .reset-form {
        @include border-radius(3px);
        position: relative;
-        font-size: 0.95em;
+        font-size: .95em;
        p {
            color: inherit;
        }
    }

    // Modifier Styles
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
        &.margin--top-none {
            margin-top: 0;
        }
+
        &.margin--bottom-none {
            margin-bottom: 0;
        }
+
        &.margin--less {
-            margin-bottom: 0.3em;
+            margin-bottom: .3em;
        }
+
        &.sub-heading {
            font-weight: 400;
            margin-bottom: 0;
        }
+
        &.color--light {
            font-weight: 300;
        }
@@ -312,10 +356,13 @@
        &.margin--extra {
            margin-bottom: 1.5em;
        }
+
        &.margin--less {
-            margin-bottom: 0.3em;
+            margin-bottom: .3em;
        }
-        .black, &.black {
+
+        .black,
+        &.black {
            color: #000;
        }
    }
@@ -331,7 +378,6 @@
    .margin--extra-2x {
        margin-top: 6em;
    }
-
 }

 .signup-team-all {
@@ -341,9 +387,11 @@
    .signup-team-dir {
        background: #fafafa;
        border-top: 1px solid #d5d5d5;
+
        &:first-child {
            border: none;
        }
+
        a {
            color: inherit;
            display: block;
@@ -353,6 +401,7 @@
            font-size: 1.1em;
        }
    }
+
    .signup-team-dir__name {
        white-space: nowrap;
        float: left;
@@ -360,9 +409,10 @@
        text-overflow: ellipsis;
        width: 90%;
    }
+
    .signup-team-dir__arrow {
        float: right;
-        font-size: 0.9em;
+        font-size: .9em;
        color: #999;
        line-height: 3.5em;
    }
@@ -371,8 +421,8 @@

 .authorize-box {
    margin: 100px auto;
-    width:500px;
-    height:280px;
+    width: 500px;
+    height: 280px;
    border: 1px solid black;
 }

--- a/Показать больше
+++ b/Показать больше