From e214aae719c10953c4c3a7949c9bd02d6983b045 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Mon, 14 Mar 2016 22:35:57 +0500
Subject: [PATCH 1/4] PLT-963 - Improving scss structure

---
 config/config.json                            |   33 +-
 model/version.go                              |    2 +-
 templates/error.html                          |    2 +-
 .../admin_console/admin_controller.jsx        |    7 +-
 .../components/admin_console/team_users.jsx   |    2 +-
 .../components/admin_console/user_item.jsx    |    8 +-
 web/react/components/authorize.jsx            |    2 +-
 web/react/components/center_panel.jsx         |    2 +-
 web/react/components/file_attachment.jsx      |    6 +-
 web/react/components/file_preview.jsx         |   16 +-
 web/react/components/filtered_user_list.jsx   |    6 +-
 web/react/components/get_link_modal.jsx       |    2 +-
 web/react/components/more_channels.jsx        |   31 +-
 web/react/components/navbar.jsx               |    8 +-
 web/react/components/not_logged_in.jsx        |    4 +-
 web/react/components/popover_list_members.jsx |   12 +-
 web/react/components/search_bar.jsx           |    2 +-
 web/react/components/search_results_item.jsx  |    2 +-
 web/react/components/sidebar_right.jsx        |   14 +-
 .../suggestion/at_mention_provider.jsx        |   12 +-
 .../suggestion/command_provider.jsx           |    2 +-
 .../components/suggestion/suggestion_list.jsx |    2 +-
 web/react/components/user_list.jsx            |   22 +-
 web/react/components/user_list_row.jsx        |   46 +-
 web/react/utils/emoticons.jsx                 |    2 +-
 web/react/utils/text_formatting.jsx           |    4 +-
 web/react/utils/utils.jsx                     |   30 +-
 web/sass-files/sass/base/_module.scss         |    3 +
 web/sass-files/sass/base/_structure.scss      |   57 +
 web/sass-files/sass/base/_typography.scss     |   27 +
 web/sass-files/sass/components/_alerts.scss   |   13 +
 web/sass-files/sass/components/_buttons.scss  |   23 +
 web/sass-files/sass/components/_dropdown.scss |   16 +
 .../sass/components/_emoticons.scss           |   27 +
 .../{partials => components}/_error-bar.scss  |   12 +-
 web/sass-files/sass/components/_files.scss    |  293 ++++
 web/sass-files/sass/components/_inputs.scss   |   26 +
 web/sass-files/sass/components/_links.scss    |   23 +
 web/sass-files/sass/components/_mentions.scss |   56 +
 web/sass-files/sass/components/_modal.scss    |  508 +++++++
 web/sass-files/sass/components/_module.scss   |   19 +
 web/sass-files/sass/components/_oauth.scss    |   38 +
 .../{partials => components}/_popover.scss    |   66 +-
 .../sass/components/_scrollbar.scss           |   28 +
 web/sass-files/sass/components/_search.scss   |  175 +++
 .../sass/components/_suggestion-list.scss     |   41 +
 web/sass-files/sass/components/_tooltip.scss  |   10 +
 .../{partials => components}/_tutorial.scss   |   34 +-
 web/sass-files/sass/components/_videos.scss   |   66 +
 web/sass-files/sass/layout/_content.scss      |   85 ++
 .../sass/{partials => layout}/_footer.scss    |   19 +-
 web/sass-files/sass/layout/_forms.scss        |   66 +
 web/sass-files/sass/layout/_headers.scss      |  370 +++++
 web/sass-files/sass/layout/_markdown.scss     |  116 ++
 web/sass-files/sass/layout/_module.scss       |   13 +
 web/sass-files/sass/layout/_navigation.scss   |  137 ++
 web/sass-files/sass/layout/_post-right.scss   |  155 +++
 web/sass-files/sass/layout/_post.scss         |  997 ++++++++++++++
 .../_sidebar-left.scss}                       |   42 +-
 .../_sidebar-menu.scss}                       |    9 +-
 .../_sidebar-right.scss}                      |   41 +-
 .../sass/{partials => layout}/_webhooks.scss  |   12 +-
 .../{partials => pages}/_access-history.scss  |   11 +-
 .../{partials => pages}/_activity-log.scss    |   23 +-
 .../{partials => pages}/_admin-console.scss   |  108 +-
 web/sass-files/sass/pages/_docs.scss          |   19 +
 web/sass-files/sass/pages/_error-page.scss    |   35 +
 web/sass-files/sass/pages/_loading.scss       |   48 +
 web/sass-files/sass/pages/_module.scss        |   11 +
 web/sass-files/sass/pages/_print.scss         |  Bin 0 -> 4392 bytes
 .../sass/{partials => pages}/_settings.scss   |  102 +-
 .../sass/{partials => pages}/_signup.scss     |  120 +-
 web/sass-files/sass/pages/_statistics.scss    |   85 ++
 web/sass-files/sass/partials/_base.scss       |  256 ----
 .../sass/partials/_colorpicker.scss           |  253 ----
 web/sass-files/sass/partials/_content.scss    |   82 --
 web/sass-files/sass/partials/_docs.scss       |   19 -
 web/sass-files/sass/partials/_error.scss      |   31 -
 web/sass-files/sass/partials/_files.scss      |  264 ----
 web/sass-files/sass/partials/_forms.scss      |   51 -
 web/sass-files/sass/partials/_get-link.scss   |    8 -
 web/sass-files/sass/partials/_headers.scss    |  320 -----
 web/sass-files/sass/partials/_loading.scss    |   42 -
 web/sass-files/sass/partials/_markdown.scss   |  106 --
 web/sass-files/sass/partials/_mentions.scss   |   61 -
 web/sass-files/sass/partials/_modal.scss      |  489 -------
 web/sass-files/sass/partials/_navbar.scss     |  112 --
 web/sass-files/sass/partials/_oauth.scss      |   33 -
 .../sass/partials/_perfect-scrollbar.scss     |  122 --
 web/sass-files/sass/partials/_post.scss       | 1013 --------------
 web/sass-files/sass/partials/_post_right.scss |  159 ---
 web/sass-files/sass/partials/_print.scss      |  Bin 3604 -> 0 bytes
 web/sass-files/sass/partials/_search.scss     |  160 ---
 web/sass-files/sass/partials/_statistics.scss |   87 --
 .../sass/partials/_suggestion_list.scss       |   67 -
 web/sass-files/sass/partials/_tooltips.scss   |    7 -
 web/sass-files/sass/partials/_variables.scss  |   16 -
 web/sass-files/sass/partials/_videos.scss     |   66 -
 web/sass-files/sass/partials/_welcome.scss    |   15 -
 web/sass-files/sass/responsive/_desktop.scss  |   65 +
 .../_mobile.scss}                             |  369 ++---
 web/sass-files/sass/responsive/_module.scss   |    4 +
 web/sass-files/sass/responsive/_tablet.scss   |   35 +
 web/sass-files/sass/styles.scss               |   57 +-
 web/sass-files/sass/utils/_animations.scss    |   19 +
 web/sass-files/sass/utils/_functions.scss     |    9 +
 web/sass-files/sass/utils/_mixins.scss        |    8 +
 web/sass-files/sass/utils/_module.scss        |    5 +
 web/sass-files/sass/utils/_variables.scss     |   13 +
 web/sass-files/sass/vendors/_colorpicker.scss |  253 ++++
 .../{partials => vendors}/_font-awesome.scss  | 1224 ++++++++---------
 web/sass-files/sass/vendors/_module.scss      |    4 +
 .../sass/vendors/_perfect-scrollbar.scss      |  141 ++
 113 files changed, 5493 insertions(+), 5018 deletions(-)
 create mode 100644 web/sass-files/sass/base/_module.scss
 create mode 100644 web/sass-files/sass/base/_structure.scss
 create mode 100644 web/sass-files/sass/base/_typography.scss
 create mode 100644 web/sass-files/sass/components/_alerts.scss
 create mode 100644 web/sass-files/sass/components/_buttons.scss
 create mode 100644 web/sass-files/sass/components/_dropdown.scss
 create mode 100644 web/sass-files/sass/components/_emoticons.scss
 rename web/sass-files/sass/{partials => components}/_error-bar.scss (79%)
 create mode 100644 web/sass-files/sass/components/_files.scss
 create mode 100644 web/sass-files/sass/components/_inputs.scss
 create mode 100644 web/sass-files/sass/components/_links.scss
 create mode 100644 web/sass-files/sass/components/_mentions.scss
 create mode 100644 web/sass-files/sass/components/_modal.scss
 create mode 100644 web/sass-files/sass/components/_module.scss
 create mode 100644 web/sass-files/sass/components/_oauth.scss
 rename web/sass-files/sass/{partials => components}/_popover.scss (72%)
 create mode 100644 web/sass-files/sass/components/_scrollbar.scss
 create mode 100644 web/sass-files/sass/components/_search.scss
 create mode 100644 web/sass-files/sass/components/_suggestion-list.scss
 create mode 100644 web/sass-files/sass/components/_tooltip.scss
 rename web/sass-files/sass/{partials => components}/_tutorial.scss (90%)
 create mode 100644 web/sass-files/sass/components/_videos.scss
 create mode 100644 web/sass-files/sass/layout/_content.scss
 rename web/sass-files/sass/{partials => layout}/_footer.scss (56%)
 create mode 100644 web/sass-files/sass/layout/_forms.scss
 create mode 100644 web/sass-files/sass/layout/_headers.scss
 create mode 100644 web/sass-files/sass/layout/_markdown.scss
 create mode 100644 web/sass-files/sass/layout/_module.scss
 create mode 100644 web/sass-files/sass/layout/_navigation.scss
 create mode 100644 web/sass-files/sass/layout/_post-right.scss
 create mode 100644 web/sass-files/sass/layout/_post.scss
 rename web/sass-files/sass/{partials/_sidebar--left.scss => layout/_sidebar-left.scss} (86%)
 rename web/sass-files/sass/{partials/_sidebar--menu.scss => layout/_sidebar-menu.scss} (90%)
 rename web/sass-files/sass/{partials/_sidebar--right.scss => layout/_sidebar-right.scss} (87%)
 rename web/sass-files/sass/{partials => layout}/_webhooks.scss (88%)
 rename web/sass-files/sass/{partials => pages}/_access-history.scss (89%)
 rename web/sass-files/sass/{partials => pages}/_activity-log.scss (81%)
 rename web/sass-files/sass/{partials => pages}/_admin-console.scss (83%)
 create mode 100644 web/sass-files/sass/pages/_docs.scss
 create mode 100644 web/sass-files/sass/pages/_error-page.scss
 create mode 100644 web/sass-files/sass/pages/_loading.scss
 create mode 100644 web/sass-files/sass/pages/_module.scss
 create mode 100644 web/sass-files/sass/pages/_print.scss
 rename web/sass-files/sass/{partials => pages}/_settings.scss (86%)
 rename web/sass-files/sass/{partials => pages}/_signup.scss (85%)
 create mode 100644 web/sass-files/sass/pages/_statistics.scss
 delete mode 100644 web/sass-files/sass/partials/_base.scss
 delete mode 100644 web/sass-files/sass/partials/_colorpicker.scss
 delete mode 100644 web/sass-files/sass/partials/_content.scss
 delete mode 100644 web/sass-files/sass/partials/_docs.scss
 delete mode 100644 web/sass-files/sass/partials/_error.scss
 delete mode 100644 web/sass-files/sass/partials/_files.scss
 delete mode 100644 web/sass-files/sass/partials/_forms.scss
 delete mode 100644 web/sass-files/sass/partials/_get-link.scss
 delete mode 100644 web/sass-files/sass/partials/_headers.scss
 delete mode 100644 web/sass-files/sass/partials/_loading.scss
 delete mode 100644 web/sass-files/sass/partials/_markdown.scss
 delete mode 100644 web/sass-files/sass/partials/_mentions.scss
 delete mode 100644 web/sass-files/sass/partials/_modal.scss
 delete mode 100644 web/sass-files/sass/partials/_navbar.scss
 delete mode 100644 web/sass-files/sass/partials/_oauth.scss
 delete mode 100755 web/sass-files/sass/partials/_perfect-scrollbar.scss
 delete mode 100644 web/sass-files/sass/partials/_post.scss
 delete mode 100644 web/sass-files/sass/partials/_post_right.scss
 delete mode 100644 web/sass-files/sass/partials/_print.scss
 delete mode 100644 web/sass-files/sass/partials/_search.scss
 delete mode 100644 web/sass-files/sass/partials/_statistics.scss
 delete mode 100644 web/sass-files/sass/partials/_suggestion_list.scss
 delete mode 100644 web/sass-files/sass/partials/_tooltips.scss
 delete mode 100644 web/sass-files/sass/partials/_variables.scss
 delete mode 100644 web/sass-files/sass/partials/_videos.scss
 delete mode 100644 web/sass-files/sass/partials/_welcome.scss
 create mode 100644 web/sass-files/sass/responsive/_desktop.scss
 rename web/sass-files/sass/{partials/_responsive.scss => responsive/_mobile.scss} (81%)
 create mode 100644 web/sass-files/sass/responsive/_module.scss
 create mode 100644 web/sass-files/sass/responsive/_tablet.scss
 create mode 100644 web/sass-files/sass/utils/_animations.scss
 create mode 100644 web/sass-files/sass/utils/_functions.scss
 create mode 100644 web/sass-files/sass/utils/_mixins.scss
 create mode 100644 web/sass-files/sass/utils/_module.scss
 create mode 100644 web/sass-files/sass/utils/_variables.scss
 create mode 100644 web/sass-files/sass/vendors/_colorpicker.scss
 rename web/sass-files/sass/{partials => vendors}/_font-awesome.scss (51%)
 create mode 100644 web/sass-files/sass/vendors/_module.scss
 create mode 100755 web/sass-files/sass/vendors/_perfect-scrollbar.scss

diff --git a/config/config.json b/config/config.json
index b211b16d31..7e8b427084 100644
--- a/config/config.json
+++ b/config/config.json
@@ -11,7 +11,7 @@
         "EnableOnlyAdminIntegrations": true,
         "EnablePostUsernameOverride": false,
         "EnablePostIconOverride": false,
-        "EnableTesting": false,
+        "EnableTesting": true,
         "EnableDeveloper": false,
         "EnableSecurityFixAlert": true,
         "EnableInsecureOutgoingConnections": false,
@@ -19,7 +19,9 @@
         "SessionLengthWebInDays": 30,
         "SessionLengthMobileInDays": 30,
         "SessionLengthSSOInDays": 30,
-        "SessionCacheInMinutes": 10
+        "SessionCacheInMinutes": 10,
+        "WebsocketSecurePort": 443,
+        "WebsocketPort": 80
     },
     "TeamSettings": {
         "SiteName": "Mattermost",
@@ -72,7 +74,7 @@
         "EnableSignUpWithEmail": true,
         "EnableSignInWithEmail": true,
         "EnableSignInWithUsername": false,
-        "SendEmailNotifications": false,
+        "SendEmailNotifications": true,
         "RequireEmailVerification": false,
         "FeedbackName": "",
         "FeedbackEmail": "",
@@ -113,5 +115,28 @@
         "AuthEndpoint": "",
         "TokenEndpoint": "",
         "UserApiEndpoint": ""
+    },
+    "GoogleSettings": {
+        "Enable": false,
+        "Secret": "",
+        "Id": "",
+        "Scope": "",
+        "AuthEndpoint": "",
+        "TokenEndpoint": "",
+        "UserApiEndpoint": ""
+    },
+    "LdapSettings": {
+        "Enable": false,
+        "LdapServer": null,
+        "LdapPort": 389,
+        "BaseDN": null,
+        "BindUsername": null,
+        "BindPassword": null,
+        "FirstNameAttribute": null,
+        "LastNameAttribute": null,
+        "EmailAttribute": null,
+        "UsernameAttribute": null,
+        "IdAttribute": null,
+        "QueryTimeout": 60
     }
-}
+}
\ No newline at end of file
diff --git a/model/version.go b/model/version.go
index 6011a92459..46f34b81eb 100644
--- a/model/version.go
+++ b/model/version.go
@@ -31,7 +31,7 @@ var CurrentVersion string = versions[0]
 var BuildNumber = "_BUILD_NUMBER_"
 var BuildDate = "_BUILD_DATE_"
 var BuildHash = "_BUILD_HASH_"
-var BuildEnterpriseReady = "_BUILD_ENTERPRISE_READY_"
+var BuildEnterpriseReady = "false"
 var versionsWithoutHotFixes []string
 
 func init() {
diff --git a/templates/error.html b/templates/error.html
index b86039ca38..5aa48098fc 100644
--- 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">
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx
index 4c4f21f08b..6dca391d0e 100644
--- 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'>
diff --git a/web/react/components/admin_console/team_users.jsx b/web/react/components/admin_console/team_users.jsx
index 256576f9b5..708907ddb7 100644
--- 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>
diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx
index 7d6cfb5c38..722da922ab 100644
--- 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='#'
diff --git a/web/react/components/authorize.jsx b/web/react/components/authorize.jsx
index 35ad7ac10e..4b1cebcf4c 100644
--- 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
diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx
index 2ea840c1ec..9a5f7a5d13 100644
--- 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/>
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index 8abcac8c39..3835292125 100644
--- 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)'}}
                 />
             );
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx
index 265d3f3675..97949ca3dc 100644
--- 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>
         );
diff --git a/web/react/components/filtered_user_list.jsx b/web/react/components/filtered_user_list.jsx
index ffd6ebf530..77a8c88105 100644
--- 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}
diff --git a/web/react/components/get_link_modal.jsx b/web/react/components/get_link_modal.jsx
index 3309d690c6..dd21f21e01 100644
--- 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'
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index 3309ef52ed..2ba4354499 100644
--- 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 = (
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 974f026d0c..8382cb47aa 100644
--- 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() {
diff --git a/web/react/components/not_logged_in.jsx b/web/react/components/not_logged_in.jsx
index 7af293e778..cf3effcd5e 100644
--- 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>
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 1943fb4097..8f6948ee44 100644
--- 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>
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index eaf8b5069b..3afd0e8405 100644
--- 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'
diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx
index 3a091bdd1b..9c3b0336b9 100644
--- 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');
         }
     }
 
diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx
index 14853d3a31..fc98886267 100644
--- 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>
diff --git a/web/react/components/suggestion/at_mention_provider.jsx b/web/react/components/suggestion/at_mention_provider.jsx
index c5bd13c267..b53b351d9d 100644
--- 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>
diff --git a/web/react/components/suggestion/command_provider.jsx b/web/react/components/suggestion/command_provider.jsx
index 21d6d0e0e1..fffb2df076 100644
--- 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';
         }
diff --git a/web/react/components/suggestion/suggestion_list.jsx b/web/react/components/suggestion/suggestion_list.jsx
index ccebeb990b..0f59071792 100644
--- 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>
diff --git a/web/react/components/user_list.jsx b/web/react/components/user_list.jsx
index 39453a8270..783d552dc6 100644
--- 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>
         );
     }
 }
diff --git a/web/react/components/user_list_row.jsx b/web/react/components/user_list_row.jsx
index 1ca40687f3..8c664ba822 100644
--- 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>
     );
 }
 
diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx
index 18cce3bded..bed798b3e8 100644
--- 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
             });
 
diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx
index a930e9ecef..552d93facb 100644
--- 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
         });
 
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 88777164b8..360d1f4a5e 100644
--- 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();
diff --git a/web/sass-files/sass/base/_module.scss b/web/sass-files/sass/base/_module.scss
new file mode 100644
index 0000000000..987b9200bf
--- /dev/null
+++ 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';
diff --git a/web/sass-files/sass/base/_structure.scss b/web/sass-files/sass/base/_structure.scss
new file mode 100644
index 0000000000..56888f8dcd
--- /dev/null
+++ 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%);
+    }
+}
diff --git a/web/sass-files/sass/base/_typography.scss b/web/sass-files/sass/base/_typography.scss
new file mode 100644
index 0000000000..676a2c4058
--- /dev/null
+++ 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;
+}
diff --git a/web/sass-files/sass/components/_alerts.scss b/web/sass-files/sass/components/_alerts.scss
new file mode 100644
index 0000000000..49ca3e8aff
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/components/_buttons.scss b/web/sass-files/sass/components/_buttons.scss
new file mode 100644
index 0000000000..bb8efbb149
--- /dev/null
+++ 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;
+    }
+}
diff --git a/web/sass-files/sass/components/_dropdown.scss b/web/sass-files/sass/components/_dropdown.scss
new file mode 100644
index 0000000000..f48e12c873
--- /dev/null
+++ 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;
+        }
+    }
+}
diff --git a/web/sass-files/sass/components/_emoticons.scss b/web/sass-files/sass/components/_emoticons.scss
new file mode 100644
index 0000000000..661b25d94d
--- /dev/null
+++ 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;
+}
diff --git a/web/sass-files/sass/partials/_error-bar.scss b/web/sass-files/sass/components/_error-bar.scss
similarity index 79%
rename from web/sass-files/sass/partials/_error-bar.scss
rename to web/sass-files/sass/components/_error-bar.scss
index 0bfcbe0be6..2b74a33ae0 100644
--- a/web/sass-files/sass/partials/_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;
         }
     }
diff --git a/web/sass-files/sass/components/_files.scss b/web/sass-files/sass/components/_files.scss
new file mode 100644
index 0000000000..17ffb206fa
--- /dev/null
+++ 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;
+}
diff --git a/web/sass-files/sass/components/_inputs.scss b/web/sass-files/sass/components/_inputs.scss
new file mode 100644
index 0000000000..5e33111824
--- /dev/null
+++ 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;
+}
diff --git a/web/sass-files/sass/components/_links.scss b/web/sass-files/sass/components/_links.scss
new file mode 100644
index 0000000000..f31008b4f8
--- /dev/null
+++ 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;
+    }
+}
diff --git a/web/sass-files/sass/components/_mentions.scss b/web/sass-files/sass/components/_mentions.scss
new file mode 100644
index 0000000000..98efc599d5
--- /dev/null
+++ 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;
+}
diff --git a/web/sass-files/sass/components/_modal.scss b/web/sass-files/sass/components/_modal.scss
new file mode 100644
index 0000000000..a8e8a99f78
--- /dev/null
+++ 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;
+    }
+}
diff --git a/web/sass-files/sass/components/_module.scss b/web/sass-files/sass/components/_module.scss
new file mode 100644
index 0000000000..24488df962
--- /dev/null
+++ 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';
diff --git a/web/sass-files/sass/components/_oauth.scss b/web/sass-files/sass/components/_oauth.scss
new file mode 100644
index 0000000000..cd8382a5ca
--- /dev/null
+++ 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;
+    }
+}
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/components/_popover.scss
similarity index 72%
rename from web/sass-files/sass/partials/_popover.scss
rename to web/sass-files/sass/components/_popover.scss
index bf762d2c9c..588a71946f 100644
--- a/web/sass-files/sass/partials/_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;
diff --git a/web/sass-files/sass/components/_scrollbar.scss b/web/sass-files/sass/components/_scrollbar.scss
new file mode 100644
index 0000000000..4ecb38b1fd
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/components/_search.scss b/web/sass-files/sass/components/_search.scss
new file mode 100644
index 0000000000..faf0b81772
--- /dev/null
+++ 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;
+}
diff --git a/web/sass-files/sass/components/_suggestion-list.scss b/web/sass-files/sass/components/_suggestion-list.scss
new file mode 100644
index 0000000000..125a3cf329
--- /dev/null
+++ 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;
+}
diff --git a/web/sass-files/sass/components/_tooltip.scss b/web/sass-files/sass/components/_tooltip.scss
new file mode 100644
index 0000000000..44c10edb94
--- /dev/null
+++ 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;
+    }
+}
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/components/_tutorial.scss
similarity index 90%
rename from web/sass-files/sass/partials/_tutorial.scss
rename to web/sass-files/sass/components/_tutorial.scss
index b21a2b7c36..f159190090 100644
--- a/web/sass-files/sass/partials/_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);
         }
     }
diff --git a/web/sass-files/sass/components/_videos.scss b/web/sass-files/sass/components/_videos.scss
new file mode 100644
index 0000000000..91db750bd3
--- /dev/null
+++ 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;
+    }
+}
diff --git a/web/sass-files/sass/layout/_content.scss b/web/sass-files/sass/layout/_content.scss
new file mode 100644
index 0000000000..71bef0d7fd
--- /dev/null
+++ b/web/sass-files/sass/layout/_content.scss
@@ -0,0 +1,85 @@
+@charset 'UTF-8';
+
+.inner-wrap {
+    &.move--left {
+        .search-bar__container {
+            display: none;
+        }
+    }
+
+    &.move--right {
+        .search-bar__container {
+            display: none;
+        }
+    }
+}
+
+.app__content {
+    height: 100%;
+    padding-top: 50px;
+    margin-left: 220px;
+    position: relative;
+    background: #fff;
+    @include display-flex;
+    @include flex-direction(column);
+
+    .channel__wrap & {
+        padding-top: 0;
+    }
+}
+#post-create {
+    @include flex(0 0 auto);
+    background: #fff;
+    width: 100%;
+    z-index: 3;
+}
+
+#archive-link-home {
+    @include flex(0 0 auto);
+    cursor: pointer;
+    padding: 10px 20px;
+    font-size: 13px;
+
+    .fa {
+        font-size: 11px;
+        @include opacity(.7);
+    }
+
+    a {
+        color: inherit;
+    }
+}
+
+.post-list {
+    .new-messages-hr {
+        margin-top: 5px;
+        margin-bottom: 0px;
+        border: 0;
+        border-top: 1px solid #f80;
+    }
+
+    .new-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        color: #f80;
+        text-align: center;
+    }
+}
+
+.new-messages-hr {
+    margin-top: 5px;
+    margin-bottom: 0px;
+    border: 0;
+    border-top: 1px solid #f80;
+}
+
+.new-messages-text {
+    margin-top: 2px;
+    margin-bottom: 5px;
+    color: #f80;
+    text-align: center;
+}
+
+.delete-message-text {
+    margin-top: 10px;
+}
diff --git a/web/sass-files/sass/partials/_footer.scss b/web/sass-files/sass/layout/_footer.scss
similarity index 56%
rename from web/sass-files/sass/partials/_footer.scss
rename to web/sass-files/sass/layout/_footer.scss
index deed14d67f..5624e63762 100644
--- a/web/sass-files/sass/partials/_footer.scss
+++ b/web/sass-files/sass/layout/_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;
 }
 
 
diff --git a/web/sass-files/sass/layout/_forms.scss b/web/sass-files/sass/layout/_forms.scss
new file mode 100644
index 0000000000..1f51603cc6
--- /dev/null
+++ b/web/sass-files/sass/layout/_forms.scss
@@ -0,0 +1,66 @@
+@charset 'UTF-8';
+
+.form-horizontal {
+    .modal-intro {
+        margin: -10px 0 30px;
+    }
+
+    .form__label {
+        text-align: left;
+        padding-right: 3px;
+        font-weight: 600;
+        font-size: 1.1em;
+
+        &.light {
+            font-weight: normal;
+            color: #999;
+            font-size: 1.05em;
+            font-style: italic;
+            padding-top: 2px;
+        }
+    }
+
+    .input__help {
+        color: inherit;
+        margin: 10px 0 0 10px;
+        word-break: break-word;
+        @include opacity(.8);
+
+        &.dark {
+            @include opacity(1);
+        }
+
+        &.error {
+            color: #a94442;
+        }
+    }
+
+    .form-control {
+        font-weight: normal;
+    }
+
+    .form-group {
+        margin-bottom: 25px;
+
+        &.less {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.help-block {
+    font-size: .95em;
+    margin: 10px 0 0;
+    color: #999;
+}
+
+.disabled-input {
+    background-color: #ddd !important;
+}
+
+.form-group {
+    &.form-group--small {
+        margin-bottom: 10px;
+    }
+}
+
diff --git a/web/sass-files/sass/layout/_headers.scss b/web/sass-files/sass/layout/_headers.scss
new file mode 100644
index 0000000000..0a6b9f920a
--- /dev/null
+++ b/web/sass-files/sass/layout/_headers.scss
@@ -0,0 +1,370 @@
+@charset 'UTF-8';
+
+#channel-header {
+    @include flex(0 0 56px);
+}
+
+.row {
+    &.header {
+        position: relative;
+
+        .channel__wrap & {
+            display: none;
+        }
+    }
+}
+
+.header-dropdown__icon {
+    font-size: 11px;
+    color: inherit;
+    top: 3px;
+}
+
+.channel-header__info {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    > div {
+        display: block;
+        white-space: nowrap;
+        word-break: break-word;
+
+        &.dropdown {
+            max-width: 100%;
+            padding-right: 1em;
+            float: left;
+
+            .header-dropdown__icon {
+                color: #777;
+            }
+
+            a {
+                text-decoration: none;
+            }
+
+            .modal {
+                white-space: normal;
+            }
+        }
+
+        &.description {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-top: 2px;
+            max-height: 45px;
+            .markdown-inline-img {
+                max-height: 45px;
+            }
+        }
+
+        &.popover {
+            white-space: normal;
+        }
+    }
+}
+
+.channel-intro {
+    margin: 0 auto 35px;
+    padding: 0 1em 5px;
+    max-width: 1000px;
+    border-bottom: 1px solid lightgrey;
+
+    .intro-links {
+        margin: 0 1.5em 10px 0;
+        display: inline-block;
+
+        .fa {
+            margin-right: 5px;
+        }
+    }
+
+    .channel-intro-profile {
+        margin-top: 5px;
+        margin-left: 63px;
+    }
+
+    .channel-intro-img {
+        float: left;
+        img {
+            @include border-radius(100px);
+        }
+    }
+
+    .channel-intro__title {
+        font-weight: 600;
+        font-size: 20px;
+        margin-bottom: 15px;
+    }
+
+    .channel-intro__content {
+        background: #f7f7f7;
+        padding: 10px 15px;
+        @include border-radius(3px);
+    }
+    .channel-intro-text {
+        margin-top: 35px;
+    }
+}
+
+// Team Header in Sidebar
+.sidebar--left,
+.sidebar--menu {
+    .team__header {
+        position: relative;
+        padding: 9px 10px;
+        @include legacy-pie-clearfix;
+
+        &:before {
+            @include single-transition(all, .05s, linear);
+            content: '';
+            background: none;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+
+        &:hover {
+            &:before {
+                background: rgba(black, .1);
+            }
+
+            .user__name {
+                color: #fff;
+            }
+
+            .navbar-right {
+                .dropdown-toggle {
+                    @include opacity(1);
+                }
+            }
+        }
+
+        .navbar-right {
+            font-size: .85em;
+            position: absolute;
+            top: 10px;
+            right: 22px;
+            z-index: 5;
+
+            .dropdown-toggle {
+                @include single-transition(all, .1s, linear);
+                padding: 10px;
+                @include opacity(.8);
+            }
+
+            .dropdown-menu {
+                li a {
+                    padding: 3px 20px;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+
+            .dropdown__icon {
+                fill: #fff;
+            }
+        }
+
+        .settings__link a:hover,
+        a:visited,
+        a:link,
+        a:active {
+            text-decoration: none;
+        }
+
+        .user__picture {
+            width: 36px;
+            height: 36px;
+            float: left;
+            @include border-radius(36px);
+            margin-right: 6px;
+        }
+
+        .header__info {
+            color: #fff;
+            @include clearfix;
+            padding-left: 2px;
+            z-index: 1;
+            position: relative;
+        }
+
+        .team__name,
+        .user__name {
+            display: block;
+            font-weight: 600;
+            font-size: 16px;
+            max-width: 85%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-decoration: none;
+        }
+
+        .team__name {
+            line-height: 22px;
+            margin-top: -2px;
+            float: left;
+        }
+
+        .user__name {
+            @include single-transition(all, .1s, linear);
+            font-size: 14px;
+            line-height: 18px;
+            font-weight: 400;
+            color: #eee;
+            color: rgba(#fff, .8);
+        }
+
+        > .nav {
+            > li {
+                > a {
+                    float: right;
+                    background: none !important;
+                    padding: 2px;
+
+                    &.dropdown-toggle {
+                        line-height: 1.8;
+                        font-size: 1em;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    .search__clear {
+        display: none;
+    }
+}
+
+#navbar {
+    .navbar-default {
+        .navbar-toggle {
+            &.menu-toggle {
+                padding: 0 1em;
+            }
+        }
+    }
+}
+
+.channel-header {
+    width: 100%;
+    border-left: none;
+    font-size: 14px;
+    line-height: 56px;
+
+    #member_popover {
+        width: 50px;
+        color: #999;
+        cursor: pointer;
+
+        .fa {
+            margin-left: 4px;
+            font-size: 16px;
+        }
+    }
+
+    &.alt {
+        margin: 0;
+        th {
+            font-weight: normal !important;
+        }
+        td {
+            border: none;
+        }
+    }
+
+    th {
+        text-align: center;
+        &:first-child {
+            text-align: left !important;
+            border-left: none;
+            width: 100%;
+            padding-left: 1em;
+        }
+        &:last-child {
+            width: 8.9%;
+        }
+    }
+
+    td {
+        padding: 5px 25px 5px !important;
+        font-size: 13px;
+        text-align: center !important;
+        &:first-child {
+            text-align: left !important;
+        }
+    }
+
+    .heading {
+        margin: 0;
+        color: #555;
+        font-size: 1.3em;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 4px;
+    }
+
+    .caret {
+        margin-top: 3px;
+    }
+
+    .more {
+        color: #81848b;
+        display: inline-block;
+        vertical-align: top;
+        text-transform: capitalize;
+        font-size: 13px;
+    }
+
+    .disabled {
+        color: #999;
+    }
+}
+
+.channel-header__navbar {
+    font-size: 16px;
+
+    .heading {
+        margin-right: 3px;
+    }
+
+    .header-dropdown__icon {
+        top: 1px;
+    }
+}
+
+.channel-header__links {
+    font-family: 'Open Sans', sans-serif;
+    height: 30px;
+    width: 24px;
+    line-height: 26px;
+    margin-right: 9px;
+    font-size: 22px;
+
+    .channel__wrap.move--left & {
+        position: absolute;
+        right: -400px;
+        top: 14px;
+    }
+
+    > a {
+        color: inherit;
+        text-decoration: none;
+        @include opacity(.6);
+        @include single-transition(all, .1s, ease-in);
+
+        &:hover {
+            @include opacity(1);
+        }
+        &:focus {
+            color: inherit;
+        }
+    }
+}
diff --git a/web/sass-files/sass/layout/_markdown.scss b/web/sass-files/sass/layout/_markdown.scss
new file mode 100644
index 0000000000..307060ac37
--- /dev/null
+++ b/web/sass-files/sass/layout/_markdown.scss
@@ -0,0 +1,116 @@
+@charset 'UTF-8';
+
+.markdown__heading {
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+.markdown__paragraph-inline {
+    display: inline;
+
+    + .markdown__paragraph-inline {
+        margin-left: 4px;
+    }
+}
+
+#post-list {
+    .markdown-inline-img {
+        -moz-force-broken-image-icon: 1;
+        max-height: 500px;
+        height: 500px;
+    }
+}
+
+.post-body--code {
+    position: relative;
+
+    pre {
+        margin-bottom: 0;
+        word-break: normal;
+        overflow: auto;
+        word-wrap: normal;
+    }
+}
+
+.post-body--code__language {
+    -webkit-transform: translate3d(0,0,0);
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #fff;
+    background: #21586d;
+    padding: 4px 10px 5px 10px;
+    font-size: 13px;
+    opacity: .7;
+    z-index: 5;
+}
+
+.post__body {
+    hr {
+        height: 4px;
+        padding: 0;
+        margin: 15px 0 16px;
+        background-color: #e7e7e7;
+        border: 0 none;
+        @include opacity(.2);
+    }
+
+    code {
+        white-space: pre;
+    }
+
+    .codespan__pre-wrap {
+        code {
+            white-space: pre-wrap;
+        }
+    }
+}
+
+.markdown__table {
+    background: #fff;
+    margin: 5px 0 10px;
+
+    th,
+    td {
+        padding: 6px 13px;
+        border: 1px solid #ddd;
+    }
+
+    tbody tr {
+        background: #fff;
+
+        &:nth-child(2n) {
+            background-color: #f8f8f8;
+        }
+    }
+}
+blockquote {
+    border: none;
+    position: relative;
+    font-size: 16px;
+    padding: 10px 10px 10px 38px;
+    margin-bottom: 0;
+
+    &:before {
+        font-family: FontAwesome;
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+        text-decoration: inherit;
+        content: '\f10d';
+        left: 8px;
+        top: 5px;
+        position: absolute;
+        font-size: 20px;
+        @include opacity(.6);
+    }
+}
+pre {
+    border: none;
+    margin: 5px 0;
+    color: inherit;
+}
+code {
+    background: #fff;
+    color: inherit;
+}
diff --git a/web/sass-files/sass/layout/_module.scss b/web/sass-files/sass/layout/_module.scss
new file mode 100644
index 0000000000..39ab2c6f88
--- /dev/null
+++ b/web/sass-files/sass/layout/_module.scss
@@ -0,0 +1,13 @@
+// Only for combining all the files in this folder
+@import 'content';
+@import 'footer';
+@import 'forms';
+@import 'headers';
+@import 'markdown';
+@import 'navigation';
+@import 'post';
+@import 'post-right';
+@import 'sidebar-left';
+@import 'sidebar-menu';
+@import 'sidebar-right';
+@import 'webhooks';
diff --git a/web/sass-files/sass/layout/_navigation.scss b/web/sass-files/sass/layout/_navigation.scss
new file mode 100644
index 0000000000..65c62cb17d
--- /dev/null
+++ b/web/sass-files/sass/layout/_navigation.scss
@@ -0,0 +1,137 @@
+@charset 'UTF-8';
+
+.nav > li > a:focus,
+.nav > li > a:hover {
+    background: transparent;
+}
+
+#navbar {
+    input {
+        margin: 0px 5px 0px 2px;
+    }
+
+    .navbar-default {
+        position: absolute;
+        border: none;
+        min-height: 45px;
+        background: $color--primary;
+
+        .navbar-nav {
+            > li {
+                > a {
+                    height: 45px;
+                    padding: 0 1.3em;
+
+                    i {
+                        line-height: 45px;
+                    }
+                }
+            }
+        }
+
+        .navbar-toggle {
+            width: 43px;
+            float: left;
+            border-color: transparent;
+            border-radius: 0;
+            margin: 0;
+            padding: 0 10px;
+            line-height: 48px;
+            height: 44px;
+            z-index: 5;
+            fill: #fff;
+
+            .icon-bar {
+                background: #fff;
+                width: 21px;
+            }
+
+            .glyphicon-search {
+                top: -1px;
+            }
+
+            .icon--white {
+                color: #fff;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background: inherit;
+            }
+        }
+
+        .navbar-brand {
+            padding: 0 .5em;
+            height: 45px;
+            line-height: 45px;
+            float: none;
+            font-size: 16px;
+
+            .heading {
+                margin-right: 3px;
+                font-weight: 600;
+                color: #fff;
+            }
+
+            .header-dropdown__icon {
+                top: 1px;
+            }
+
+            .dropdown-toggle {
+                color: #fff;
+            }
+
+            .description {
+                display: inline-block;
+                margin-right: .5em;
+                color: #fff;
+
+                &.info-popover {
+                    width: 19px;
+                    height: 19px;
+                    background: url('../images/info__icon.png');
+                    @include background-size(100% 100%);
+                    vertical-align: middle;
+                    top: -1px;
+                    position: relative;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .sidebar-channel {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        span {
+            white-space: nowrap;
+            margin-left: 2px;
+        }
+    }
+
+    .channel-create-btn {
+        margin-right: 15px;
+    }
+
+    .more-channel-table {
+        width: 100%;
+        border: 1px solid #dbdbdc;
+        td {
+            padding: 7px;
+        }
+        button {
+            width: 110px;
+        }
+    }
+}
+
+.badge-notify {
+    background: red;
+    position: absolute;
+    left: 4px;
+    top: 3px;
+    z-index: 100;
+}
diff --git a/web/sass-files/sass/layout/_post-right.scss b/web/sass-files/sass/layout/_post-right.scss
new file mode 100644
index 0000000000..595577564d
--- /dev/null
+++ b/web/sass-files/sass/layout/_post-right.scss
@@ -0,0 +1,155 @@
+@charset 'UTF-8';
+
+.post-right__container {
+    @include display-flex;
+    @include flex-direction(column);
+    height: 100%;
+
+    .post-right-root-message {
+        padding: 1em 1em 0;
+    }
+
+    .post-right-comments-container {
+        position: relative;
+
+        .post {
+            &:first-child {
+                padding-top: 15px;
+            }
+        }
+    }
+
+
+    .help_format_text {
+        bottom: -63px;
+        right: auto;
+    }
+
+    .post {
+        &.post--root {
+            padding-bottom: 1.2em;
+            border-bottom: 1px solid #ddd;
+
+            .post__body {
+                background: transparent !important;
+            }
+        }
+
+        .post__header {
+            .col__reply {
+                top: 0;
+                text-align: right;
+            }
+        }
+
+        .post__body {
+            width: 100%;
+        }
+    }
+
+    hr {
+        margin-bottom: 0;
+        border: none;
+    }
+
+    .post-create__container {
+        width: 100%;
+        margin-top: 10px;
+
+        .textarea-wrapper {
+            min-height: 100px;
+        }
+
+        .btn {
+            margin-bottom: 10px;
+        }
+
+        .custom-textarea {
+            min-height: 100px;
+        }
+
+        .msg-typing {
+            @include opacity(.7);
+            float: left;
+            margin-top: 3px;
+            font-size: 13px;
+            line-height: 20px;
+            min-width: 1px;
+            display: block;
+            height: 20px;
+            max-width: 230px;
+        }
+
+        .post-create-footer {
+            width: 100%;
+            padding: 5px 0 10px;
+        }
+
+        .post-right-comments-upload-in-progress {
+            padding: 6px 0;
+            color: #a8adb7;
+            margin-right: 10px;
+        }
+    }
+}
+.post-right-header {
+    font-size: 1em;
+    text-transform: uppercase;
+    color: #999;
+    font-weight: 400;
+    color: #888;
+    height: 39px;
+    padding: 10px 10px 0 15px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    padding: 5px 10px;
+    border-bottom: $border-gray;
+}
+
+.post-right-root-container {
+    ul {
+        padding-left: 0;
+        margin-bottom: 2px;
+    }
+}
+
+.post-right-channel__name {
+    font-weight: 600;
+    margin: 0 0 10px 0;
+}
+
+.post-right-root-container li {
+    display: inline;
+    list-style-type: none;
+    padding-right: 3px;
+}
+
+.post-right-root-time {
+    color: #a8adb7;
+}
+
+.post-right-create-comment-container {
+    padding: 5px;
+    margin-bottom: 18px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.post-right__scroll {
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
+
+    .file-preview__container {
+        margin-top: 5px;
+    }
+}
+
+.post-right-comment-time {
+    color: #a8adb7;
+}
diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss
new file mode 100644
index 0000000000..22c905aa60
--- /dev/null
+++ b/web/sass-files/sass/layout/_post.scss
@@ -0,0 +1,997 @@
+@charset 'UTF-8';
+
+.custom-textarea {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: transparent;
+    border: 1px solid #ccc;
+    position: absolute;
+    top: 0px;
+    height: auto;
+    resize: none;
+    line-height: 20px;
+    min-height: 36px;
+    overflow-x: hidden;
+    &:focus {
+        border-color: #ccc;
+        box-shadow: none;
+    }
+}
+
+.bad-connection {
+    background: #ffffac !important;
+    color: #d04444 !important;
+}
+
+.textarea-div {
+    white-space: pre-wrap;
+    word-wrap: normal;
+    color: rgba(0,0,0,0);
+    position: absolute;
+    top: 0px;
+    word-break: break-word;
+    left: 1px;
+    line-height: 20px;
+    min-height: 36px;
+    height: auto;
+    border: 0;
+}
+
+body.ios {
+    .textarea-div {
+        padding: 7px 17px 7px 15px;
+        -webkit-overflow-scrolling: auto;
+    }
+}
+
+.textarea-div::-webkit-scrollbar {
+    display: none;
+}
+
+.textarea-wrapper {
+    position: relative;
+    .textbox-preview-area {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        box-shadow: none;
+        white-space: normal;
+    }
+    .help__text {
+        right: 0;
+        position: absolute;
+        z-index: 3;
+        bottom: -23px;
+        font-size: 13px;
+        cursor: pointer;
+    }
+    .textbox-preview-link {
+        margin-right: 8px;
+    }
+    min-height: 36px;
+}
+
+.help_format_text {
+    display: none !important;
+    position: absolute;
+    bottom: -23px;
+    left: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: .85em;
+    @include opacity(0);
+    @include single-transition(all .2s ease);
+
+    b,
+    i,
+    code {
+        margin-right: 3px;
+    }
+    .textbox-preview-link {
+        font-size: 13px;
+        cursor: pointer;
+        margin-left: 15px;
+    }
+}
+
+.date-separator,
+.new-separator {
+    text-align: center;
+    height: 2em;
+    margin: 0;
+    position: relative;
+    z-index: 0;
+    &:before,
+    &:after {
+        content: '';
+        height: 1em;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        display: none;
+    }
+    &:before {
+        bottom: 0;
+    }
+    &:after {
+        top: 0;
+    }
+    &.hovered--after {
+        &:before {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    &.hovered--before {
+        &:after {
+            background: #f5f5f5;
+            display: block;
+        }
+    }
+    .separator__hr {
+        border-color: #ccc;
+        margin: 0;
+        position: relative;
+        z-index: 5;
+        top: 1em;
+    }
+    .separator__text {
+        line-height: 2em;
+        color: #555;
+        background: #fff;
+        display: inline-block;
+        padding: 0 1em;
+        font-weight: 700;
+        @include border-radius(50px);
+        position: relative;
+        z-index: 5;
+        font-size: 13px;
+    }
+}
+.new-separator {
+    .separator__hr {
+        border-color: #ffaf53;
+    }
+    .separator__text {
+        color: #f80;
+        font-weight: normal;
+    }
+}
+
+.file-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: #fff;
+    font-size: em(20px);
+    font-weight: 600;
+    z-index: 6;
+
+    .overlay__indent {
+        background-color: rgba(0, 0, 0, .6);
+        position: relative;
+        height: 100%;
+        @include clearfix;
+    }
+
+    &.center-file-overlay {
+        .overlay__indent {
+            margin-left: 220px;
+        }
+    }
+
+    &.right-file-overlay {
+        font-size: em(18px);
+        .overlay__circle {
+            width: 300px;
+            height: 300px;
+            margin: -150px 0 0 -150px;
+        }
+        .overlay__files {
+            margin: 60px auto 15px;
+            width: 150px;
+        }
+    }
+
+    .overlay__circle {
+        background: #111;
+        background: rgba(black, .7);
+        width: 370px;
+        height: 370px;
+        margin: -185px 0 0 -185px;
+        @include border-radius(500px);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        pointer-events: none;
+    }
+
+    .overlay__files {
+        display: block;
+        margin: 75px auto 20px;
+    }
+
+    .overlay__logo {
+        position: absolute;
+        left: 50%;
+        bottom: 30px;
+        margin-left: -50px;
+        @include opacity(.3);
+    }
+
+    .fa {
+        display: inline-block;
+        font-size: 1.1em;
+        margin-right: 8px;
+    }
+}
+
+#post-list {
+    @include flex(1 1 auto);
+    position: relative;
+    overflow-y: hidden;
+    height: 100%;
+
+    .inactive {
+        display: none;
+    }
+
+    .post-list-holder-by-time {
+        background: #fff;
+        overflow-y: scroll;
+        width: 100%;
+        padding: 1em 0 0;
+        position: absolute;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+        &.active {
+            display: inline;
+        }
+    }
+
+    .more-messages-text {
+        margin: 5px 0 10px;
+        display: block;
+        text-align: center;
+        outline: none;
+        border: none;
+        font-size: 13px;
+    }
+    .beginning-messages-text {
+        margin-top: 2px;
+        margin-bottom: 5px;
+        display: block;
+        text-align: center;
+        color: grey;
+    }
+}
+
+.post-list__timestamp {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    z-index: 50;
+    width: 120px;
+    text-align: center;
+    background: $color--primary;
+    color: #fff;
+    @include border-radius(3px);
+    font-size: 12px;
+    line-height: 25px;
+    margin-left: -60px;
+    -webkit-font-smoothing: initial;
+    @include single-transition(all, .6s, ease);
+    @include translateY(-45px);
+    @include opacity(0);
+    display: none;
+
+    &.scrolling {
+        @include translateY(0);
+        @include opacity(.8);
+    }
+}
+
+.post-list__arrows {
+    background-repeat: no-repeat;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    fill: #444;
+    position: absolute;
+    bottom: 0;
+    left: 9px;
+    z-index: 50;
+    @include opacity(0);
+    @include single-transition(all, .6s);
+    display: none;
+
+    svg {
+        color: inherit;
+        width: 28px;
+        height: 28px;
+    }
+
+    &.scrolling {
+        display: block;
+        @include opacity(1);
+    }
+}
+
+.post-create__container {
+    form {
+        width: 100%;
+        padding: .5em 14px 0;
+        margin: 0 auto;
+        max-width: 1028px;
+    }
+    .post-create-body {
+        position: relative;
+        padding: 0 0 2px;
+        .post-body__cell {
+            vertical-align: top;
+            position: relative;
+            &.scroll {
+                .btn-file {
+                    right: 15px;
+                }
+                .custom-textarea {
+                    padding-right: 43px;
+                }
+            }
+        }
+        .send-button {
+            display: none;
+            cursor: pointer;
+            padding-right: 4px;
+            width: 45px;
+            height: 37px;
+            font-size: 18px;
+            line-height: 37px;
+            vertical-align: bottom;
+            text-align: center;
+            @include single-transition(all, .15s);
+            &:active {
+                @include opacity(.75);
+            }
+        }
+        .custom-textarea {
+            padding-top: 8px;
+            padding-right: 28px;
+            max-height: 162px !important;
+            line-height: 1.5;
+        }
+        .textarea-div {
+            padding-top: 8px;
+            padding-right: 30px;
+            max-height: 163px !important;
+            overflow: auto;
+            line-height: 1.5;
+        }
+        .btn-file {
+            right: 0;
+            position: absolute;
+            top: 1px;
+            color: #444;
+            @include opacity(.5);
+            @include single-transition(all, .15s);
+            font-size: 16px;
+            padding: 7px 9px 6px;
+            &:hover,
+            &:active {
+                @include opacity(.9);
+                box-shadow: none;
+            }
+        }
+        textarea {
+            box-shadow: none;
+        }
+    }
+    .post-create-footer {
+        @include clearfix;
+        padding: 3px 0 0 0;
+        font-size: 13px;
+        .control-label {
+            font-weight: normal;
+            margin-bottom: 0;
+            top: -5px;
+            position: relative;
+        }
+    }
+    .msg-typing {
+        display: block;
+        @include opacity(.7);
+        white-space: nowrap;
+        margin-bottom: 5px;
+        overflow: hidden;
+        font-size: .95em;
+        text-overflow: ellipsis;
+        height: 20px;
+    }
+}
+
+.post-list__table {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    .post-list__content {
+        display: table-cell;
+        vertical-align: bottom;
+        .dropdown-menu {
+            &.bottom {
+                top: auto;
+                bottom: 25px;
+            }
+        }
+    }
+}
+
+.post {
+    word-wrap: break-word;
+    padding: 8px .5em 0 1em;
+    position: relative;
+    max-width: 100%;
+    @include legacy-pie-clearfix;
+
+    &:hover {
+        .dropdown,
+        .comment-icon__container,
+        .post__reply,
+        .post__remove {
+            visibility: visible;
+        }
+        .permalink-icon {
+            visibility: visible;
+        }
+    }
+
+    &.post--highlight {
+        background-color: beige;
+    }
+
+    p {
+        margin: 0;
+        line-height: 1.6em;
+        font-size: .97em;
+        white-space: pre-wrap;
+
+        &:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    span {
+        p:last-child {
+            margin-bottom: .5em;
+        }
+    }
+
+    &.post--root {
+        .comment-icon__container {
+            visibility: visible;
+        }
+    }
+
+    &.same--root {
+        &.same--user {
+            padding: 0 .5em 0 1em;
+
+            &:hover {
+                .post__time {
+                    @include opacity(.5);
+                }
+            }
+
+            .post__header {
+                margin: 0;
+                height: 0;
+
+                .col__name {
+                    display: none;
+                }
+
+                .col__reply {
+                    top: 6px;
+                }
+            }
+
+            .post__time {
+                top: 24px;
+            }
+
+            .post__time {
+                font: normal normal normal FontAwesome;
+                text-rendering: auto;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                position: absolute;
+                top: -2px;
+                left: -7px;
+                font-size: 11px;
+                line-height: 37px;
+                @include opacity(0);
+            }
+        }
+
+        &.post--comment {
+            .post__link {
+                display: none;
+            }
+
+            .post__img {
+                img {
+                    display: none;
+                }
+            }
+        }
+
+        &.post--comment {
+            .post__body {
+                border-left: 4px solid #ddd;
+            }
+        }
+    }
+
+    &.other--root {
+        .comment-icon__container {
+            &.icon--show {
+                visibility: visible;
+            }
+        }
+
+        &.post--comment {
+            .popover {
+                margin-top: 84px;
+
+                > .arrow {
+                    top: 21px !important;
+                }
+            }
+
+            .post__header {
+                .col__reply {
+                    top: 53px;
+                }
+            }
+        }
+    }
+
+    .post__content {
+        margin: 0 auto;
+        position: relative;
+        max-width: 1000px;
+        display: table;
+        width: 100%;
+        table-layout: fixed;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+        }
+    }
+
+    .post__header {
+        padding: 0;
+        list-style: none;
+        margin-bottom: 2px;
+
+        li {
+            display: inline-block;
+            vertical-align: top;
+        }
+
+        .col__name {
+            margin-right: 7px;
+            font-weight: 600;
+
+            .user-popover {
+                max-width: 200px;
+                @include clearfix;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .col__reply {
+            position: absolute;
+            right: 0;
+            top: 30px;
+            width: 65px;
+            white-space: nowrap;
+        }
+
+        .permalink-popover {
+            min-width: 0;
+
+            .popover-content {
+                padding: 5px;
+            }
+
+            .form-control,
+            .btn {
+                font-size: 13px;
+                height: 30px;
+                padding: 0 8px;
+                line-height: 30px;
+            }
+        }
+    }
+
+    .post__img {
+        width: 46px;
+        img {
+            width: 36px;
+            height: 36px;
+            vertical-align: inherit;
+            @include border-radius(50px);
+        }
+    }
+
+    .post__embed-container {
+        display: block;
+        max-height: 1000px;
+        transition: max-height .5s ease;
+        overflow: hidden;
+        &[hidden] {
+            max-height: 0;
+        }
+    }
+
+    .dropdown {
+        display: inline-block;
+        visibility: hidden;
+        margin-right: 5px;
+        top: -1px;
+
+        .dropdown-menu {
+            right: 0;
+            left: auto;
+            min-width: 130px;
+            padding: 2px 0;
+
+            li {
+                display: block;
+            }
+
+            a {
+                padding: 5px 15px;
+            }
+        }
+    }
+
+    .post__dropdown {
+        &:after {
+            content: '[...]';
+            top: -1px;
+            position: relative;
+        }
+    }
+
+    .post__remove {
+        font-family: 'Open Sans', sans-serif;
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        right: 15px;
+        top: -5px;
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        font-weight: 600;
+        visibility: hidden;
+        color: inherit;
+        @include opacity(.5);
+        text-decoration: none;
+
+        &:hover {
+            @include opacity(.8);
+        }
+    }
+
+    .post__body {
+        word-wrap: break-word;
+        padding: .2em .5em;
+        @include legacy-pie-clearfix;
+        width: calc(100% - 75px);
+
+        p {
+            margin: 0 0 .4em;
+        }
+
+        p + p {
+            margin-top: 1.4em;
+        }
+
+        li {
+            > p {
+                margin-top: 10px;
+            }
+        }
+
+        img {
+            max-height: 400px;
+        }
+
+        ul,
+        ol {
+            margin-bottom: .4em;
+
+            p {
+                margin-bottom: 0;
+            }
+            li ul,
+            li ol {
+                padding: 0 0 0 20px;
+            }
+
+            li.list-item--task-list ul,
+            li.list-item--task-list ol {
+                margin-left: 20px;
+            }
+
+            li.list-item--task-list ul {
+                padding-left: 0;
+            }
+
+            li:not(.list-item--task-list) li.list-item--task-list,
+            li:not(.list-item--task-list) li.list-item--task-list ~ li {
+                margin-left: -20px;
+            }
+
+            li input[type='checkbox']:disabled {
+                vertical-align: top;
+                cursor: default;
+            }
+        }
+
+        ul li.list-item--task-list,
+        ul li.list-item--task-list ~ li {
+            list-style-type: none;
+        }
+
+        ul li.list-item--task-list ~ li:not(.list-item--task-list) {
+            text-indent: 3px;
+
+            &:before {
+                content: '⦁';
+                margin-right: 8px;
+            }
+        }
+    }
+
+    .post__link {
+        margin: 2px 0 5px;
+        font-size: 13px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .post__embed-visibility {
+        cursor: pointer;
+        font: normal normal normal 14px/1 FontAwesome;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        margin: 5px 0 10px;
+        display: inline-block;
+
+        &:hover {
+            text-decoration: none;
+        }
+
+        &:before {
+            content: '\f065';
+            font-size: 14px;
+        }
+
+        &[data-expanded='true']:before {
+            content: '\f066';
+        }
+    }
+
+    .post__time {
+        font-size: .9em;
+    }
+
+    .post__time,
+    &.post--system .post__body {
+        @include opacity(.6);
+    }
+
+    .post-loading-gif {
+        height: 10px;
+        width: 10px;
+        margin-top: 6px;
+    }
+
+    .post-fail {
+        color: #d58a8a;
+    }
+
+    .post-waiting {
+        color: #999;
+    }
+
+    .permalink-icon {
+        display: inline-block;
+        color: $color--primary;
+        visibility: hidden;
+    }
+
+    .post__reply {
+        display: inline-block;
+        margin-right: 6px;
+        visibility: hidden;
+        svg {
+            width: 18px;
+            top: 3px;
+            fill: inherit;
+            position: relative;
+        }
+    }
+
+    .comment-icon__container {
+        fill: $color--primary;
+        display: inline-block;
+        visibility: hidden;
+
+        &:focus {
+            outline: none;
+        }
+
+        &.icon--visible {
+            visibility: visible;
+        }
+
+        svg {
+            height: 17px;
+            width: 17px;
+        }
+
+        .comment-icon {
+            display: inline-block;
+            top: 2px;
+            position: relative;
+            margin-right: 3px;
+            fill: inherit;
+        }
+
+        path {
+            fill: inherit;
+        }
+    }
+
+    .web-embed-data {
+        padding: 2px 0 0 10px;
+        background: #f9f9f9;
+        background: rgba(0, 0, 0, .05);
+        @include border-radius(2px);
+        height: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .embed-title {
+            margin: 3px 0 1px;
+            color: #555;
+            font-weight: 600;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .embed-description {
+            margin: 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            color: #888;
+        }
+        .embed-link {
+            display: none;
+        }
+    }
+}
+
+.bot-indicator {
+    font-family: inherit;
+    font-size: 11px;
+    padding: 2px 4px;
+    border-radius: 2px;
+    font-weight: 600;
+    margin: 0 0 0 -4px;
+}
+
+.attachment {
+    .attachment__content {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 4px;
+        padding: 2px 5px;
+        margin: 0 0 5px 0;
+    }
+    .attachment__thumb-pretext {
+        border: 0 none;
+        background: transparent;
+    }
+    .attachment__container {
+        border-left-width: 4px;
+        border-left-style: solid;
+        padding: 2px 0 2px 10px;
+        &.attachment__container--good {
+            border-left-color: #00c100;
+        }
+        &.attachment__container--warning {
+            border-left-color: #dede01;
+        }
+        &.attachment__container--danger {
+            border-left-color: #e40303;
+        }
+    }
+    .attachment__body {
+        float: left;
+        width: 80%;
+        padding-right: 5px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        &.attachment__body--no_thumb {
+            width: 100%;
+        }
+    }
+    .attachment__text p:last-of-type {
+        display: inline-block;
+    }
+    .attachment__thumb-pretext {
+        margin-left: 5px;
+    }
+    .attachment__title {
+        margin: 5px 0;
+        padding: 0;
+        line-height: 16px;
+        height: 22px;
+        font-size: 16px;
+        a {
+            font-size: 16px;
+        }
+    }
+    .attachment__author-icon {
+        @include border-radius(50px);
+        margin-right: 5px;
+        width: 14px;
+        height: 14px;
+    }
+    .attachment__image {
+        max-width: 100%;
+        margin-bottom: 1em;
+    }
+    .attachment__thumb-container {
+        width: 20%;
+        float: right;
+        img {
+            max-height: 75px;
+            max-width: 100%;
+        }
+    }
+    .attachment___fields {
+        width: 100%;
+        .attachment___field-caption {
+            font-weight: 700;
+        }
+        .attachment___field p {
+            margin: 0;
+        }
+    }
+}
+
+.permalink-text {
+    overflow: hidden;
+}
+
+.permalink-popover {
+    min-width: 320px;
+    margin-left: 50px !important;
+}
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/layout/_sidebar-left.scss
similarity index 86%
rename from web/sass-files/sass/partials/_sidebar--left.scss
rename to web/sass-files/sass/layout/_sidebar-left.scss
index 44681291c4..ece054a15a 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/layout/_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;
-
 }
diff --git a/web/sass-files/sass/partials/_sidebar--menu.scss b/web/sass-files/sass/layout/_sidebar-menu.scss
similarity index 90%
rename from web/sass-files/sass/partials/_sidebar--menu.scss
rename to web/sass-files/sass/layout/_sidebar-menu.scss
index 443b7dbb0a..167b24ba00 100644
--- a/web/sass-files/sass/partials/_sidebar--menu.scss
+++ b/web/sass-files/sass/layout/_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;
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/layout/_sidebar-right.scss
similarity index 87%
rename from web/sass-files/sass/partials/_sidebar--right.scss
rename to web/sass-files/sass/layout/_sidebar-right.scss
index aaa6f4c925..e1a7d76410 100644
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ b/web/sass-files/sass/layout/_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;
     }
 }
diff --git a/web/sass-files/sass/partials/_webhooks.scss b/web/sass-files/sass/layout/_webhooks.scss
similarity index 88%
rename from web/sass-files/sass/partials/_webhooks.scss
rename to web/sass-files/sass/layout/_webhooks.scss
index 4b0215a9eb..d6e3672185 100644
--- a/web/sass-files/sass/partials/_webhooks.scss
+++ b/web/sass-files/sass/layout/_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;
     }
-}
\ No newline at end of file
+}
diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/pages/_access-history.scss
similarity index 89%
rename from web/sass-files/sass/partials/_access-history.scss
rename to web/sass-files/sass/pages/_access-history.scss
index dcb5f3c5fc..7ede7b0859 100644
--- a/web/sass-files/sass/partials/_access-history.scss
+++ b/web/sass-files/sass/pages/_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);
     }
-}
\ No newline at end of file
+}
diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/pages/_activity-log.scss
similarity index 81%
rename from web/sass-files/sass/partials/_activity-log.scss
rename to web/sass-files/sass/pages/_activity-log.scss
index df5869b4cf..6e8d0a9256 100644
--- a/web/sass-files/sass/partials/_activity-log.scss
+++ b/web/sass-files/sass/pages/_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;
-}
\ No newline at end of file
+}
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/pages/_admin-console.scss
similarity index 83%
rename from web/sass-files/sass/partials/_admin-console.scss
rename to web/sass-files/sass/pages/_admin-console.scss
index 76081710fd..f83ce487e6 100644
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/web/sass-files/sass/pages/_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;
diff --git a/web/sass-files/sass/pages/_docs.scss b/web/sass-files/sass/pages/_docs.scss
new file mode 100644
index 0000000000..24e96772b3
--- /dev/null
+++ b/web/sass-files/sass/pages/_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;
+    }
+}
diff --git a/web/sass-files/sass/pages/_error-page.scss b/web/sass-files/sass/pages/_error-page.scss
new file mode 100644
index 0000000000..8cd0716caa
--- /dev/null
+++ b/web/sass-files/sass/pages/_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;
+        }
+    }
+}
diff --git a/web/sass-files/sass/pages/_loading.scss b/web/sass-files/sass/pages/_loading.scss
new file mode 100644
index 0000000000..5e4e7359ad
--- /dev/null
+++ b/web/sass-files/sass/pages/_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;
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/pages/_module.scss b/web/sass-files/sass/pages/_module.scss
new file mode 100644
index 0000000000..48c1af1d9d
--- /dev/null
+++ b/web/sass-files/sass/pages/_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';
diff --git a/web/sass-files/sass/pages/_print.scss b/web/sass-files/sass/pages/_print.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1c2ef9c0f4f083dc96486de6c39d90de101e6082
GIT binary patch
literal 4392
zcmb_g+iuf95S?ef!YD#*0Y@!;0ELUn3ts?Fs8mj3lBl^6r#DsnI&jWxC%bE}8&^UW
zjlJHTIdkUB?3zD+<xEC0l|nXBNhw>&<Uqd3SNS5jyu<x_d4}su7I-_B8D?g(#_X9a
zb@n~pW)Ig({D#jqKE$e#T*?INR&s@vV;NxX7S9EqDp(|f^1<eFSYKdlg|V&9*eVXQ
zXTKxNnCmQB8{*#i$)u}=Eqva>M-B{RVGL_GifxIzCEo70^;;P-Ont>&sm(d!;N1l-
zVkKiP#@7LBZ7Uc#V=5({UBJUSVKdD=b4Gs2&7DR@n=8!+b8EQcC<@FZ16w(izUH3T
zXBtC}_00aI97V{wt{KR+Vwx!%V<1Rr#%E>>2FM<@Vi=fjr=t?%4o?|rq#n<A<d+Kj
zDL>>R?zgzsa*j9)jM3Ys1xcJadOpCv5BisgsN%z&^&@@%N&mL<%QazEsrN}V!WxS+
z@ALKxu`@UEd*UQlp<S=7cyz2>ma6*_Jh1v03t3L*gL5XZo<oyFRv`bm>Y&13`Xw_3
za=X&!_Siip*2Pq9asAUg`>b{KyWROpN7$?sUxE2<Epg_%PPTqTb1tW8UkfmG3p+Q;
z6_GKD6FJ890(blRSFG-Jl=G>)sXd>z<doT7!?)|fL~t6#W4*zlWM`}tXFMy$(!(65
z2X=jO#SX>_3l-R$#T{h=EcJPAcUo#Mp2J$Gm)Iir3)go?@Jof(E2M{LZI1QkO#2&|
zptiZoRk)niD~wnl3VnG6bG6xQs=2RyYp%VT_SuE+A|Cwex}~`5WWtU@g<jV@HakaO
zBd2!B9V24z?z#tY-ViK}fs~k>{rtgqng#X&Dw_R)>#64}j11wqz`J=%%s%=YOjq#8
z{FPW4`su;OMq^?0%#!UtRKrRm4Cj+|r)lor)Qmf;@a&PU#%AT)?%&?UQd$a8^lB(B
zbk{3UL-8zAkBf@&hf46HF4nnrT2|E%Y*C$Lo~M-59=cM#HmE-C`0iX|d#^iLgz;Im
z*H`86#NN=pvfcsQ2_**u;h86mk-FJHIn0so74&x;^`g3uILDq{r&-r8$kPq16Aw=@
zE;4G(dQulmzBBDZ73w*z2r@C(n&4?StmXl-GXqBJTvI$T%L8PXebaTOG|re`qC1e!
z&_uoV*|ptC-g0ceP38MjMoJsR!)`)eOCWU}o1WP-h&x;r=d2q$=}6;!l3L+Dz|5q-
z44QFqP3oLzOwe8!&wd|I`>F|fF`wjYv#V&Q5sr}0^taJID^8&qVs&3H;ry=I;8~0c
zq7JFm``|0VkjMG3b4%#WW`;4Q(D^SAThXo)?k4PZU24OurE27ROEts{nT0NR{Ao1J
zm)T08AuIf%X#18p|IcVMc?ECoEb%znW)-D$WwDXH@Sgu~V9$N{bLTPc^UW`geqz*}
ir{eFVK9tQp^yya8k@AaYt@U<-9pWu)FB%;Tas30}ym%7;

literal 0
HcmV?d00001

diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/pages/_settings.scss
similarity index 86%
rename from web/sass-files/sass/partials/_settings.scss
rename to web/sass-files/sass/pages/_settings.scss
index 6574dd9274..3c735be3c3 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/pages/_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;
 }
diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/pages/_signup.scss
similarity index 85%
rename from web/sass-files/sass/partials/_signup.scss
rename to web/sass-files/sass/pages/_signup.scss
index 6d396d21cf..53c59c222e 100644
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/web/sass-files/sass/pages/_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;
 }
 
diff --git a/web/sass-files/sass/pages/_statistics.scss b/web/sass-files/sass/pages/_statistics.scss
new file mode 100644
index 0000000000..b48c137c38
--- /dev/null
+++ b/web/sass-files/sass/pages/_statistics.scss
@@ -0,0 +1,85 @@
+@charset 'UTF-8';
+
+.team_statistics {
+    .total-count {
+        margin: 1em 0;
+        text-align: center;
+        background: #fff;
+        border: 1px solid #ddd;
+        width: 100%;
+        @include border-radius(3px);
+
+        .title {
+            font-weight: 400;
+            padding: 7px 10px;
+            border-bottom: 1px solid #ddd;
+            text-align: left;
+            font-size: 13px;
+
+            .fa {
+                float: right;
+                margin: 0px 0 0;
+                color: #555;
+                font-size: 16px;
+            }
+        }
+
+        .content {
+            font-size: 30px;
+            font-weight: 600;
+            color: #555;
+            padding: .3em 0 .35em;
+            overflow: auto;
+        }
+    }
+
+    .total-count--day {
+        width: 760px;
+        height: 275px;
+        border: 1px solid #ddd;
+        padding: 5px 10px 10px 10px;
+        margin: 10px 10px 10px 10px;
+        background: #fff;
+        clear: both;
+
+        > div {
+            font-size: 18px;
+            font-weight: 300;
+        }
+    }
+
+    .recent-active-users {
+        table {
+            width: 100%;
+            table-layout: fixed;
+        }
+
+        .content {
+            max-height: 400px;
+            overflow: auto;
+            padding: 0;
+        }
+
+        tr {
+            &:first-child {
+                td {
+                    border-top: none;
+                }
+            }
+
+            td {
+                font-weight: 400;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                font-size: 13px;
+                border-left: 1px solid #ddd;
+                border-top: 1px solid #ddd;
+                padding: 5px 5px 6px;
+                @include clearfix;
+                &:first-child {
+                    border-left: none;
+                }
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
deleted file mode 100644
index 4dcf0ff85c..0000000000
--- a/web/sass-files/sass/partials/_base.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_colorpicker.scss b/web/sass-files/sass/partials/_colorpicker.scss
deleted file mode 100644
index 7c79844ae8..0000000000
--- a/web/sass-files/sass/partials/_colorpicker.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
deleted file mode 100644
index fb2355da75..0000000000
--- a/web/sass-files/sass/partials/_content.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_docs.scss b/web/sass-files/sass/partials/_docs.scss
deleted file mode 100644
index f4e7cc3145..0000000000
--- a/web/sass-files/sass/partials/_docs.scss
+++ /dev/null
@@ -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;
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_error.scss b/web/sass-files/sass/partials/_error.scss
deleted file mode 100644
index e09a751d25..0000000000
--- a/web/sass-files/sass/partials/_error.scss
+++ /dev/null
@@ -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;
-		}
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
deleted file mode 100644
index 62e067437e..0000000000
--- a/web/sass-files/sass/partials/_files.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_forms.scss b/web/sass-files/sass/partials/_forms.scss
deleted file mode 100644
index a2d6eaf991..0000000000
--- a/web/sass-files/sass/partials/_forms.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_get-link.scss b/web/sass-files/sass/partials/_get-link.scss
deleted file mode 100644
index d4365d1e6c..0000000000
--- a/web/sass-files/sass/partials/_get-link.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@charset "UTF-8";
-
-.copy-link-confirm {
-	display: inline-block;
-	float: left;
-	padding: 4px 10px;
-	margin: 1px 0 0 10px;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
deleted file mode 100644
index 93cb04198b..0000000000
--- a/web/sass-files/sass/partials/_headers.scss
+++ /dev/null
@@ -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;
-		}
-	}
-}
diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss
deleted file mode 100644
index e9863ddbd0..0000000000
--- a/web/sass-files/sass/partials/_loading.scss
+++ /dev/null
@@ -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; }
-		}
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss
deleted file mode 100644
index f34b5ec197..0000000000
--- a/web/sass-files/sass/partials/_markdown.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss
deleted file mode 100644
index aa654e9e88..0000000000
--- a/web/sass-files/sass/partials/_mentions.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
deleted file mode 100644
index 5b02652af1..0000000000
--- a/web/sass-files/sass/partials/_modal.scss
+++ /dev/null
@@ -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;
-    }
-}
diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss
deleted file mode 100644
index 28ab61ec18..0000000000
--- a/web/sass-files/sass/partials/_navbar.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_oauth.scss b/web/sass-files/sass/partials/_oauth.scss
deleted file mode 100644
index 2bd9a0de58..0000000000
--- a/web/sass-files/sass/partials/_oauth.scss
+++ /dev/null
@@ -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;
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_perfect-scrollbar.scss b/web/sass-files/sass/partials/_perfect-scrollbar.scss
deleted file mode 100755
index 0e0967d81b..0000000000
--- a/web/sass-files/sass/partials/_perfect-scrollbar.scss
+++ /dev/null
@@ -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; }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
deleted file mode 100644
index 209f8e27f5..0000000000
--- a/web/sass-files/sass/partials/_post.scss
+++ /dev/null
@@ -1,1013 +0,0 @@
-@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: 0.85em;
-	@include opacity(0);
-	@include single-transition(all 0.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, 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, 0.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(0.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: $primary-color;
-	color: #fff;
-	@include border-radius(3px);
-	font-size: 12px;
-	line-height: 25px;
-	margin-left: -60px;
-	-webkit-font-smoothing: initial;
-	@include single-transition(all, 0.6s, ease);
-	@include translateY(-45px);
-	@include opacity(0);
-	display: none;
-
-	&.scrolling {
-		@include translateY(0);
-		@include opacity(0.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, 0.6s);
-	display: none;
-
-	svg {
-		color: inherit;
-		width: 28px;
-		height: 28px;
-	}
-
-	&.scrolling {
-		display: block;
-		@include opacity(1);
-	}
-}
-
-.post-create__container {
-	form {
-		width: 100%;
-		padding: 0.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, 0.15s);
-			&:active {
-				@include opacity(0.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(0.5);
-			@include single-transition(all, 0.15s);
-			font-size: 16px;
-			padding: 7px 9px 6px;
-			&:hover, &:active {
-				@include opacity(0.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(0.7);
-		white-space: nowrap;
-		margin-bottom: 5px;
-		overflow: hidden;
-		font-size: 0.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: 0.97em;
-		white-space: pre-wrap;
-
-		&:last-child {
-			margin-bottom: 0.5em;
-		}
-
-	}
-
-	span {
-
-		p:last-child {
-			margin-bottom: 0.5em;
-		}
-
-	}
-
-	&.post--root {
-
-		.comment-icon__container {
-			visibility: visible;
-		}
-
-	}
-
-	&.same--root {
-
-		&.same--user {
-			padding: 0 .5em 0 1em;
-
-			&:hover {
-
-				.post__time {
-					@include opacity(0.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(0.5);
-		text-decoration: none;
-
-		&:hover {
-			@include opacity(0.8);
-		}
-
-	}
-
-	.post__body {
-		word-wrap: break-word;
-		padding: 0.2em 0.5em;
-		@include legacy-pie-clearfix;
-		width: calc(100% - 75px);
-
-		p {
-			margin: 0 0 0.4em;
-		}
-
-		p + p {
-			margin-top: 1.4em;
-		}
-
-		li {
-			> p {
-				margin-top: 10px;
-			}
-		}
-
-		img {
-			max-height: 400px;
-		}
-
-		ul, ol {
-			margin-bottom: 0.4em;
-
-			p {
-				margin-bottom: 0;
-			}
-			li ul, li ol {
-				padding: 0 0 0 20px
-			}
-
-			li.list-item--task-list ul, li.list-item--task-list ol {
-				margin-left: 20px;
-			}
-
-			li.list-item--task-list ul {
-				padding-left: 0;
-			}
-
-			li:not(.list-item--task-list) li.list-item--task-list, li:not(.list-item--task-list) li.list-item--task-list ~ li {
-				margin-left: -20px;
-			}
-
-			li input[type="checkbox"]:disabled {
-				vertical-align: top;
-				cursor: default;
-			}
-		}
-
-		ul li.list-item--task-list, ul li.list-item--task-list ~ li {
-			list-style-type: none;
-		}
-
-		ul li.list-item--task-list ~ li:not(.list-item--task-list) {
-			text-indent: 3px;
-
-			&:before {
-				content: "⦁";
-				margin-right: 8px;
-			}
-		}
-	}
-
-	.post__link {
-		margin: 2px 0 5px;
-		font-size: 13px;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-	}
-
-	.post__embed-visibility {
-		cursor: pointer;
-		font: normal normal normal 14px/1 FontAwesome;
-		text-rendering: auto;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		margin: 5px 0 10px;
-		display: inline-block;
-
-		&:hover{
-			text-decoration: none;
-		}
-
-		&:before {
-			content: "\f065";
-			font-size: 14px;
-		}
-
-		&[data-expanded="true"]:before{
-			content: "\f066";
-		}
-	}
-
-	.post__time{
-		font-size: 0.9em;
-	}
-
-	.post__time, &.post--system .post__body {
-		@include opacity(0.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: $primary-color;
-		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: $primary-color;
-		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, 0.05);
-		@include border-radius(2px);
-		height: 50px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		.embed-title {
-			margin: 3px 0 1px;
-			color: #555;
-			font-weight: 600;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-		.embed-description {
-			margin: 0;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			color: #888;
-		}
-		.embed-link {
-			display: none;
-		}
-	}
-}
-
-.bot-indicator {
-	font-family: inherit;
-	font-size: 11px;
-	padding: 2px 4px;
-	border-radius: 2px;
-	font-weight: 600;
-	margin: 0 0 0 -4px;
-}
-
-.attachment {
-	.attachment__content {
-		border-width: 1px;
-		border-style: solid;
-		border-radius: 4px;
-		padding: 2px 5px;
-		margin: 0 0 5px 0;
-	}
-	.attachment__thumb-pretext {
-		border: 0 none;
-		background: transparent;
-	}
-	.attachment__container {
-		border-left-width: 4px;
-		border-left-style: solid;
-		padding: 2px 0 2px 10px;
-		&.attachment__container--good {
-			border-left-color: #00C100;
-		}
-		&.attachment__container--warning {
-			border-left-color: #DEDE01;
-		}
-		&.attachment__container--danger {
-			border-left-color: #E40303;
-		}
-	}
-	.attachment__body {
-		float: left;
-		width: 80%;
-		padding-right: 5px;
-		overflow-x: auto;
-		overflow-y: hidden;
-		&.attachment__body--no_thumb {
-			width: 100%;
-		}
-	}
-	.attachment__text p:last-of-type {
-		display: inline-block;
-	}
-	.attachment__thumb-pretext {
-		margin-left: 5px;
-	}
-	.attachment__title {
-		margin: 5px 0;
-		padding: 0;
-		line-height: 16px;
-		height: 22px;
-		font-size: 16px;
-		a {
-			font-size: 16px;
-		}
-	}
-	.attachment__author-icon {
-		@include border-radius(50px);
-		margin-right: 5px;
-		width: 14px;
-		height: 14px;
-	}
-	.attachment__image {
-		max-width: 100%;
-		margin-bottom: 1em;
-	}
-	.attachment__thumb-container {
-		width: 20%;
-		float: right;
-		img {
-			max-height: 75px;
-			max-width: 100%;
-		}
-	}
-	.attachment___fields {
-		width: 100%;
-		.attachment___field-caption {
-			font-weight: 700;
-		}
-		.attachment___field p {
-			margin: 0;
-		}
-	}
-}
-
-.permalink-text {
-	overflow: hidden;
-}
-
-.permalink-popover {
-	min-width: 320px;
-	margin-left: 50px !important;
-}
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
deleted file mode 100644
index 5df6fdc018..0000000000
--- a/web/sass-files/sass/partials/_post_right.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_print.scss b/web/sass-files/sass/partials/_print.scss
deleted file mode 100644
index 143ec2915684ae713c12f4992fd69511f3d75381..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3604
zcmbuC-HsDS5QXb@@)TxQk$^B3go{LmMC2w<kX#{x?Db^V!d^SJ!63w|Cpll0+dVxq
z-mr>B^3HTu*WWo+UHkVx_R6m8#-_Hloi(<%kzLsD_M81`wf(5~7xs;wSGLmb+!m4?
z*+$X}yLIW$+O6!dR^zR*nPjf)on1?6ZSN&Fw~6-m`kv}*r}Nlrjv5|F*Gg+^t?gZ6
z?^Y}6z0&H^chE4?d*~k7U8nZa{ZYDV*&?>NG#uQATfN<C_pb9_JmSj6?$gfoEaf9_
zZ}s34v4{Upr0bj{(cp7qAvKl8&47-aJ2Fgui1U+s%=xwF6C^52-c7YjG<$m}`=EnQ
z3-_(o8Sr^$kKFRt%1-Qq+h2Heb48Xg%^97`5*Yx?WDjft=SJ&cyE$T*{e3MgK>bhq
z!+z5HUeCtfD2}Ptu&`}eEVDcj6G!&af3XXf9-j0)(%yyr?7wA}kR$gn?AqVpZs3tK
z`<J{Yld+CvqAZb(uenFvII|jg50CMOeB^Agek~2P(8t<TNYswVPQU0TV^d{&?cb%(
znN6_m#?N!+zb)iE-lczk(wRN(^Dc9@KFQ-leX8qC2jR$Z*11xIA0>bA7_o|1&+Mt5
zZ}oP*f)i&pj=_z6fBgHrm18o#k<RESXnua`8ex%|-?`1Slk{F{J#e5`5fe2E2SK^N
zOSik0t+XE<^Hvqs=wz9n&_Fkf&T%FEFd(t(QeLOM)K%ypE9VfLp_X@gf<rs4r0RR(
z9U$|g-Ff<486UeRJNQ6X`P5-`S3_BKBd;mA@uAh@(3k6J?6JWXvXc4`GNrDr??}uP
z^ISgRMQE(`jkU7&s2$iuO>qt`z1PZ22u!uN?8xT~)ym#Z7Qmv>i9iR;@fJ&DJatQu
zTzd>*zl(F+dE9E5<^9S@cT8E;L%4@GrIokxX(6u;M_-58(q9eVm)>1q^h{C195Tm!
zmpb{{W8RAG+$(V_rmi1%Rrp<Lm+WN8S{kXdA?aLMamUpi^s{|%+zLr@nd=U{PdokO
z(lMgGqt0?>f-kYYbw(Vd6U$LYfoj%%&U&uvA^U9>mHdO*OJ^X{OuI@Z%IiYDq}qpL
zU@{RNbQro;8;!C?@Z!RL5o+CfqL0Na##GejT)xW^de~wjp#L`VBKj8=s5*Qq`T2Fx
z=1i7d9W=SA$Y`G4`hFr;&IgsBYx_5>>wZ&Z$^x-&Pc;#^u|gh(=h2~)!H$u9kLeK^
zX0fW(AMb;FoJ}=TPMRgtxcA`#EP`pDk9I4e$_>`NRg?Ej;W_g2{@-Pr-b(K{$K5oa
z=UEs#7xucv)I6^ueV$|4R-R$n(Z+uQT}xq)Nosf^eDgm%8QFJ=CT^qBlRm54ydchq
zI{yu%L47QZF$-`n^(V;jz$!N$lXKij^umLx`o5=g3{0yVuYhOr=LhLqwR*vqe*t0k
BLx}(Y

diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
deleted file mode 100644
index aa398e9160..0000000000
--- a/web/sass-files/sass/partials/_search.scss
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_statistics.scss b/web/sass-files/sass/partials/_statistics.scss
deleted file mode 100644
index f867402706..0000000000
--- a/web/sass-files/sass/partials/_statistics.scss
+++ /dev/null
@@ -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;
-				}
-			}
-		}
-	}
-}
diff --git a/web/sass-files/sass/partials/_suggestion_list.scss b/web/sass-files/sass/partials/_suggestion_list.scss
deleted file mode 100644
index 28c113c6d8..0000000000
--- a/web/sass-files/sass/partials/_suggestion_list.scss
+++ /dev/null
@@ -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;
-}
diff --git a/web/sass-files/sass/partials/_tooltips.scss b/web/sass-files/sass/partials/_tooltips.scss
deleted file mode 100644
index c2de3c5908..0000000000
--- a/web/sass-files/sass/partials/_tooltips.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-#recentMentionsTooltip {
-	.tooltip-arrow {
-		margin-left: 10px;
-	}
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_variables.scss b/web/sass-files/sass/partials/_variables.scss
deleted file mode 100644
index 514be2e8b3..0000000000
--- a/web/sass-files/sass/partials/_variables.scss
+++ /dev/null
@@ -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);
-}
diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss
deleted file mode 100644
index 43f30ce84c..0000000000
--- a/web/sass-files/sass/partials/_videos.scss
+++ /dev/null
@@ -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;
-    }
-}
diff --git a/web/sass-files/sass/partials/_welcome.scss b/web/sass-files/sass/partials/_welcome.scss
deleted file mode 100644
index 0be43d29c1..0000000000
--- a/web/sass-files/sass/partials/_welcome.scss
+++ /dev/null
@@ -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;
-  }
-}
\ No newline at end of file
diff --git a/web/sass-files/sass/responsive/_desktop.scss b/web/sass-files/sass/responsive/_desktop.scss
new file mode 100644
index 0000000000..dcabb807f1
--- /dev/null
+++ 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;
+    }
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/responsive/_mobile.scss
similarity index 81%
rename from web/sass-files/sass/partials/_responsive.scss
rename to web/sass-files/sass/responsive/_mobile.scss
index 06ce17041f..a452cb4208 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/responsive/_mobile.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;
         }
diff --git a/web/sass-files/sass/responsive/_module.scss b/web/sass-files/sass/responsive/_module.scss
new file mode 100644
index 0000000000..a799c145e3
--- /dev/null
+++ b/web/sass-files/sass/responsive/_module.scss
@@ -0,0 +1,4 @@
+@charset 'UTF-8';
+@import 'desktop';
+@import 'tablet';
+@import 'mobile';
diff --git a/web/sass-files/sass/responsive/_tablet.scss b/web/sass-files/sass/responsive/_tablet.scss
new file mode 100644
index 0000000000..14641cfa5e
--- /dev/null
+++ 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;
+    }
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss
index 7bf3574d25..4a49e439ea 100644
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -5,55 +5,14 @@
  * Import this file using the following HTML or equivalent:
  * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
 
-// Base Css
 @import "compass/utilities";
 @import "compass/css3";
-@import "partials/variables";
-@import "partials/perfect-scrollbar";
-@import "partials/font-awesome";
-@import "partials/base";
-@import "partials/colorpicker";
 
-// Channel Css
-@import "partials/headers";
-@import "partials/footer";
-@import "partials/content";
-@import "partials/popover";
-@import "partials/post";
-@import "partials/post_right";
-@import "partials/navbar";
-@import "partials/search";
-@import "partials/sidebar--left";
-@import "partials/sidebar--right";
-@import "partials/sidebar--menu";
-@import "partials/admin-console";
-@import "partials/signup";
-@import "partials/files";
-@import "partials/videos";
-@import "partials/settings";
-@import "partials/modal";
-@import "partials/forms";
-@import "partials/mentions";
-@import "partials/error";
-@import "partials/error-bar";
-@import "partials/loading";
-@import "partials/get-link";
-@import "partials/markdown";
-@import "partials/tutorial";
-@import "partials/statistics";
-@import "partials/suggestion_list";
-
-// Elements
-@import "partials/tooltips";
-
-// Responsive Css
-@import "partials/responsive";
-
-// Docs Css
-@import "partials/docs";
-
-// Standalone Css
-@import "partials/oauth";
-
-// Print
-@import "partials/print";
\ No newline at end of file
+// styles.scss
+@import 'vendors/module';
+@import 'utils/module';
+@import 'base/module';
+@import 'pages/module';
+@import 'components/module';
+@import 'layout/module';
+@import 'responsive/module';
\ No newline at end of file
diff --git a/web/sass-files/sass/utils/_animations.scss b/web/sass-files/sass/utils/_animations.scss
new file mode 100644
index 0000000000..767e30847b
--- /dev/null
+++ b/web/sass-files/sass/utils/_animations.scss
@@ -0,0 +1,19 @@
+@charset 'UTF-8';
+
+@-webkit-keyframes spin2 {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: scale(1) rotate(0deg);
+    }
+    to {
+        transform: scale(1) rotate(360deg);
+    }
+}
diff --git a/web/sass-files/sass/utils/_functions.scss b/web/sass-files/sass/utils/_functions.scss
new file mode 100644
index 0000000000..9013920fa5
--- /dev/null
+++ b/web/sass-files/sass/utils/_functions.scss
@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+@function em($pixels, $context: 14px) {
+	@return #{$pixels/$context}em
+}
+
+%popover-box-shadow {
+    @include box-shadow(rgba(black, .175) 1px -3px 12px);
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/utils/_mixins.scss b/web/sass-files/sass/utils/_mixins.scss
new file mode 100644
index 0000000000..28723e1a5f
--- /dev/null
+++ b/web/sass-files/sass/utils/_mixins.scss
@@ -0,0 +1,8 @@
+@charset 'UTF-8';
+
+@mixin file-icon($path) {
+    background: #fff url($path);
+    background-position: center;
+    background-repeat: no-repeat;
+    @include background-size(60px auto);
+}
diff --git a/web/sass-files/sass/utils/_module.scss b/web/sass-files/sass/utils/_module.scss
new file mode 100644
index 0000000000..e7f0c0c468
--- /dev/null
+++ b/web/sass-files/sass/utils/_module.scss
@@ -0,0 +1,5 @@
+// Only for combining all the files in this folder
+@import 'variables';
+@import 'animations';
+@import 'functions';
+@import 'mixins';
diff --git a/web/sass-files/sass/utils/_variables.scss b/web/sass-files/sass/utils/_variables.scss
new file mode 100644
index 0000000000..065c37a171
--- /dev/null
+++ b/web/sass-files/sass/utils/_variables.scss
@@ -0,0 +1,13 @@
+@charset 'UTF-8';
+
+// Color Variables
+$color--primary: rgb(35, 137, 215);
+$color--primary--hover: darken($color--primary, 10%);
+$bg--gray: rgb(245, 245, 245);
+$bg--white: rgb(255, 255, 255);
+
+// Page Variables
+$border-gray: 1px solid #ddd;
+
+// Random variables
+$border-rad: 1px;
diff --git a/web/sass-files/sass/vendors/_colorpicker.scss b/web/sass-files/sass/vendors/_colorpicker.scss
new file mode 100644
index 0000000000..291145e809
--- /dev/null
+++ b/web/sass-files/sass/vendors/_colorpicker.scss
@@ -0,0 +1,253 @@
+@charset 'UTF-8';
+
+/*!
+ * Bootstrap Colorpicker
+ * http://mjolnic.github.io/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+
+.colorpicker-saturation {
+    float: left;
+    width: 100px;
+    height: 100px;
+    cursor: crosshair;
+    background-image: url('../images/bootstrap-colorpicker/saturation.png');
+}
+
+.colorpicker-saturation i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 5px;
+    height: 5px;
+    margin: -4px 0 0 -4px;
+    border: 1px solid #000;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.colorpicker-saturation i b {
+    display: block;
+    width: 5px;
+    height: 5px;
+    border: 1px solid #fff;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.colorpicker-hue,
+.colorpicker-alpha {
+    float: left;
+    width: 15px;
+    height: 100px;
+    margin-bottom: 4px;
+    margin-left: 4px;
+    cursor: row-resize;
+}
+
+.colorpicker-hue i,
+.colorpicker-alpha i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin-top: -1px;
+    background: #000;
+    border-top: 1px solid #fff;
+}
+
+.colorpicker-hue {
+    background-image: url('../images/bootstrap-colorpicker/hue.png');
+}
+
+.colorpicker-alpha {
+    display: none;
+    background-image: url('../images/bootstrap-colorpicker/alpha.png');
+}
+
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-alpha {
+    background-size: contain;
+}
+
+.colorpicker {
+    top: 0;
+    left: 0;
+    z-index: 2500;
+    min-width: 130px;
+    padding: 4px;
+    margin-top: 1px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    *zoom: 1;
+}
+
+.colorpicker:before,
+.colorpicker:after {
+    display: table;
+    line-height: 0;
+    content: '';
+}
+
+.colorpicker:after {
+    clear: both;
+}
+
+.colorpicker:before {
+    position: absolute;
+    top: -7px;
+    left: 6px;
+    display: inline-block;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #ccc;
+    border-left: 7px solid transparent;
+    border-bottom-color: rgba(0, 0, 0, .2);
+    content: '';
+}
+
+.colorpicker:after {
+    position: absolute;
+    top: -6px;
+    left: 7px;
+    display: inline-block;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent;
+    content: '';
+}
+
+.colorpicker div {
+    position: relative;
+}
+
+.colorpicker.colorpicker-with-alpha {
+    min-width: 140px;
+}
+
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+    display: block;
+}
+
+.colorpicker-color {
+    height: 10px;
+    margin-top: 5px;
+    clear: both;
+    background-image: url('../images/bootstrap-colorpicker/alpha.png');
+    background-position: 0 100%;
+}
+
+.colorpicker-color div {
+    height: 10px;
+}
+
+.colorpicker-selectors {
+    display: none;
+    height: 10px;
+    margin-top: 5px;
+    clear: both;
+}
+
+.colorpicker-selectors i {
+    float: left;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+}
+
+.colorpicker-selectors i + i {
+    margin-left: 3px;
+}
+
+.colorpicker-element .input-group-addon i,
+.colorpicker-element .add-on i {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: text-top;
+    cursor: pointer;
+}
+
+.colorpicker.colorpicker-inline {
+    position: relative;
+    z-index: auto;
+    display: inline-block;
+    float: none;
+}
+
+.colorpicker.colorpicker-horizontal {
+    width: 110px;
+    height: auto;
+    min-width: 110px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+    margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+    width: 100px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+    float: left;
+    width: 100px;
+    height: 15px;
+    margin-bottom: 4px;
+    margin-left: 0;
+    cursor: col-resize;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 1px;
+    height: 15px;
+    margin-top: 0;
+    background: #fff;
+    border: none;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+    background-image: url('../images/bootstrap-colorpicker/hue-horizontal.png');
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+    background-image: url('../images/bootstrap-colorpicker/alpha-horizontal.png');
+}
+
+.colorpicker.colorpicker-hidden {
+    display: none;
+}
+
+.colorpicker.colorpicker-visible {
+    display: block;
+}
+
+.colorpicker-inline.colorpicker-visible {
+    display: inline-block;
+}
+
+.colorpicker-right:before {
+    right: 6px;
+    left: auto;
+}
+
+.colorpicker-right:after {
+    right: 7px;
+    left: auto;
+}
diff --git a/web/sass-files/sass/partials/_font-awesome.scss b/web/sass-files/sass/vendors/_font-awesome.scss
similarity index 51%
rename from web/sass-files/sass/partials/_font-awesome.scss
rename to web/sass-files/sass/vendors/_font-awesome.scss
index 74580a7e81..49ab318cdd 100644
--- a/web/sass-files/sass/partials/_font-awesome.scss
+++ b/web/sass-files/sass/vendors/_font-awesome.scss
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@charset 'UTF-8';
 
 /*!
  *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
@@ -7,1797 +7,1797 @@
 /* FONT PATH
  * -------------------------- */
 @font-face {
-  font-family: 'FontAwesome';
-  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
-  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'FontAwesome';
+    src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
+    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
 }
 .fa {
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  transform: translate(0, 0);
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transform: translate(0, 0);
 }
 /* makes the font 33% larger relative to the icon container */
 .fa-lg {
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  vertical-align: -15%;
+    font-size: 1.33333333em;
+    line-height: .75em;
+    vertical-align: -15%;
 }
 .fa-2x {
-  font-size: 2em;
+    font-size: 2em;
 }
 .fa-3x {
-  font-size: 3em;
+    font-size: 3em;
 }
 .fa-4x {
-  font-size: 4em;
+    font-size: 4em;
 }
 .fa-5x {
-  font-size: 5em;
+    font-size: 5em;
 }
 .fa-fw {
-  width: 1.28571429em;
-  text-align: center;
+    width: 1.28571429em;
+    text-align: center;
 }
 .fa-ul {
-  padding-left: 0;
-  margin-left: 2.14285714em;
-  list-style-type: none;
+    padding-left: 0;
+    margin-left: 2.14285714em;
+    list-style-type: none;
 }
 .fa-ul > li {
-  position: relative;
+    position: relative;
 }
 .fa-li {
-  position: absolute;
-  left: -2.14285714em;
-  width: 2.14285714em;
-  top: 0.14285714em;
-  text-align: center;
+    position: absolute;
+    left: -2.14285714em;
+    width: 2.14285714em;
+    top: .14285714em;
+    text-align: center;
 }
 .fa-li.fa-lg {
-  left: -1.85714286em;
+    left: -1.85714286em;
 }
 .fa-border {
-  padding: .2em .25em .15em;
-  border: solid 0.08em #eeeeee;
-  border-radius: .1em;
+    padding: .2em .25em .15em;
+    border: solid .08em #eee;
+    border-radius: .1em;
 }
 .pull-right {
-  float: right;
+    float: right;
 }
 .pull-left {
-  float: left;
+    float: left;
 }
 .fa.pull-left {
-  margin-right: .3em;
+    margin-right: .3em;
 }
 .fa.pull-right {
-  margin-left: .3em;
+    margin-left: .3em;
 }
 .fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-  animation: fa-spin 2s infinite linear;
+    -webkit-animation: fa-spin 2s infinite linear;
+    animation: fa-spin 2s infinite linear;
 }
 .fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
-  animation: fa-spin 1s infinite steps(8);
+    -webkit-animation: fa-spin 1s infinite steps(8);
+    animation: fa-spin 1s infinite steps(8);
 }
 @-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
 }
 @keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
 }
 .fa-rotate-90 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 .fa-rotate-180 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
 }
 .fa-rotate-270 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-  -webkit-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  transform: rotate(270deg);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+    -webkit-transform: rotate(270deg);
+    -ms-transform: rotate(270deg);
+    transform: rotate(270deg);
 }
 .fa-flip-horizontal {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-  -webkit-transform: scale(-1, 1);
-  -ms-transform: scale(-1, 1);
-  transform: scale(-1, 1);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+    -webkit-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+    transform: scale(-1, 1);
 }
 .fa-flip-vertical {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-  -webkit-transform: scale(1, -1);
-  -ms-transform: scale(1, -1);
-  transform: scale(1, -1);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+    -webkit-transform: scale(1, -1);
+    -ms-transform: scale(1, -1);
+    transform: scale(1, -1);
 }
 :root .fa-rotate-90,
 :root .fa-rotate-180,
 :root .fa-rotate-270,
 :root .fa-flip-horizontal,
 :root .fa-flip-vertical {
-  filter: none;
+    filter: none;
 }
 .fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    vertical-align: middle;
 }
 .fa-stack-1x,
 .fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
 }
 .fa-stack-1x {
-  line-height: inherit;
+    line-height: inherit;
 }
 .fa-stack-2x {
-  font-size: 2em;
+    font-size: 2em;
 }
 .fa-inverse {
-  color: #ffffff;
+    color: #fff;
 }
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .fa-glass:before {
-  content: "\f000";
+    content: '\f000';
 }
 .fa-music:before {
-  content: "\f001";
+    content: '\f001';
 }
 .fa-search:before {
-  content: "\f002";
+    content: '\f002';
 }
 .fa-envelope-o:before {
-  content: "\f003";
+    content: '\f003';
 }
 .fa-heart:before {
-  content: "\f004";
+    content: '\f004';
 }
 .fa-star:before {
-  content: "\f005";
+    content: '\f005';
 }
 .fa-star-o:before {
-  content: "\f006";
+    content: '\f006';
 }
 .fa-user:before {
-  content: "\f007";
+    content: '\f007';
 }
 .fa-film:before {
-  content: "\f008";
+    content: '\f008';
 }
 .fa-th-large:before {
-  content: "\f009";
+    content: '\f009';
 }
 .fa-th:before {
-  content: "\f00a";
+    content: '\f00a';
 }
 .fa-th-list:before {
-  content: "\f00b";
+    content: '\f00b';
 }
 .fa-check:before {
-  content: "\f00c";
+    content: '\f00c';
 }
 .fa-remove:before,
 .fa-close:before,
 .fa-times:before {
-  content: "\f00d";
+    content: '\f00d';
 }
 .fa-search-plus:before {
-  content: "\f00e";
+    content: '\f00e';
 }
 .fa-search-minus:before {
-  content: "\f010";
+    content: '\f010';
 }
 .fa-power-off:before {
-  content: "\f011";
+    content: '\f011';
 }
 .fa-signal:before {
-  content: "\f012";
+    content: '\f012';
 }
 .fa-gear:before,
 .fa-cog:before {
-  content: "\f013";
+    content: '\f013';
 }
 .fa-trash-o:before {
-  content: "\f014";
+    content: '\f014';
 }
 .fa-home:before {
-  content: "\f015";
+    content: '\f015';
 }
 .fa-file-o:before {
-  content: "\f016";
+    content: '\f016';
 }
 .fa-clock-o:before {
-  content: "\f017";
+    content: '\f017';
 }
 .fa-road:before {
-  content: "\f018";
+    content: '\f018';
 }
 .fa-download:before {
-  content: "\f019";
+    content: '\f019';
 }
 .fa-arrow-circle-o-down:before {
-  content: "\f01a";
+    content: '\f01a';
 }
 .fa-arrow-circle-o-up:before {
-  content: "\f01b";
+    content: '\f01b';
 }
 .fa-inbox:before {
-  content: "\f01c";
+    content: '\f01c';
 }
 .fa-play-circle-o:before {
-  content: "\f01d";
+    content: '\f01d';
 }
 .fa-rotate-right:before,
 .fa-repeat:before {
-  content: "\f01e";
+    content: '\f01e';
 }
 .fa-refresh:before {
-  content: "\f021";
+    content: '\f021';
 }
 .fa-list-alt:before {
-  content: "\f022";
+    content: '\f022';
 }
 .fa-lock:before {
-  content: "\f023";
+    content: '\f023';
 }
 .fa-flag:before {
-  content: "\f024";
+    content: '\f024';
 }
 .fa-headphones:before {
-  content: "\f025";
+    content: '\f025';
 }
 .fa-volume-off:before {
-  content: "\f026";
+    content: '\f026';
 }
 .fa-volume-down:before {
-  content: "\f027";
+    content: '\f027';
 }
 .fa-volume-up:before {
-  content: "\f028";
+    content: '\f028';
 }
 .fa-qrcode:before {
-  content: "\f029";
+    content: '\f029';
 }
 .fa-barcode:before {
-  content: "\f02a";
+    content: '\f02a';
 }
 .fa-tag:before {
-  content: "\f02b";
+    content: '\f02b';
 }
 .fa-tags:before {
-  content: "\f02c";
+    content: '\f02c';
 }
 .fa-book:before {
-  content: "\f02d";
+    content: '\f02d';
 }
 .fa-bookmark:before {
-  content: "\f02e";
+    content: '\f02e';
 }
 .fa-print:before {
-  content: "\f02f";
+    content: '\f02f';
 }
 .fa-camera:before {
-  content: "\f030";
+    content: '\f030';
 }
 .fa-font:before {
-  content: "\f031";
+    content: '\f031';
 }
 .fa-bold:before {
-  content: "\f032";
+    content: '\f032';
 }
 .fa-italic:before {
-  content: "\f033";
+    content: '\f033';
 }
 .fa-text-height:before {
-  content: "\f034";
+    content: '\f034';
 }
 .fa-text-width:before {
-  content: "\f035";
+    content: '\f035';
 }
 .fa-align-left:before {
-  content: "\f036";
+    content: '\f036';
 }
 .fa-align-center:before {
-  content: "\f037";
+    content: '\f037';
 }
 .fa-align-right:before {
-  content: "\f038";
+    content: '\f038';
 }
 .fa-align-justify:before {
-  content: "\f039";
+    content: '\f039';
 }
 .fa-list:before {
-  content: "\f03a";
+    content: '\f03a';
 }
 .fa-dedent:before,
 .fa-outdent:before {
-  content: "\f03b";
+    content: '\f03b';
 }
 .fa-indent:before {
-  content: "\f03c";
+    content: '\f03c';
 }
 .fa-video-camera:before {
-  content: "\f03d";
+    content: '\f03d';
 }
 .fa-photo:before,
 .fa-image:before,
 .fa-picture-o:before {
-  content: "\f03e";
+    content: '\f03e';
 }
 .fa-pencil:before {
-  content: "\f040";
+    content: '\f040';
 }
 .fa-map-marker:before {
-  content: "\f041";
+    content: '\f041';
 }
 .fa-adjust:before {
-  content: "\f042";
+    content: '\f042';
 }
 .fa-tint:before {
-  content: "\f043";
+    content: '\f043';
 }
 .fa-edit:before,
 .fa-pencil-square-o:before {
-  content: "\f044";
+    content: '\f044';
 }
 .fa-share-square-o:before {
-  content: "\f045";
+    content: '\f045';
 }
 .fa-check-square-o:before {
-  content: "\f046";
+    content: '\f046';
 }
 .fa-arrows:before {
-  content: "\f047";
+    content: '\f047';
 }
 .fa-step-backward:before {
-  content: "\f048";
+    content: '\f048';
 }
 .fa-fast-backward:before {
-  content: "\f049";
+    content: '\f049';
 }
 .fa-backward:before {
-  content: "\f04a";
+    content: '\f04a';
 }
 .fa-play:before {
-  content: "\f04b";
+    content: '\f04b';
 }
 .fa-pause:before {
-  content: "\f04c";
+    content: '\f04c';
 }
 .fa-stop:before {
-  content: "\f04d";
+    content: '\f04d';
 }
 .fa-forward:before {
-  content: "\f04e";
+    content: '\f04e';
 }
 .fa-fast-forward:before {
-  content: "\f050";
+    content: '\f050';
 }
 .fa-step-forward:before {
-  content: "\f051";
+    content: '\f051';
 }
 .fa-eject:before {
-  content: "\f052";
+    content: '\f052';
 }
 .fa-chevron-left:before {
-  content: "\f053";
+    content: '\f053';
 }
 .fa-chevron-right:before {
-  content: "\f054";
+    content: '\f054';
 }
 .fa-plus-circle:before {
-  content: "\f055";
+    content: '\f055';
 }
 .fa-minus-circle:before {
-  content: "\f056";
+    content: '\f056';
 }
 .fa-times-circle:before {
-  content: "\f057";
+    content: '\f057';
 }
 .fa-check-circle:before {
-  content: "\f058";
+    content: '\f058';
 }
 .fa-question-circle:before {
-  content: "\f059";
+    content: '\f059';
 }
 .fa-info-circle:before {
-  content: "\f05a";
+    content: '\f05a';
 }
 .fa-crosshairs:before {
-  content: "\f05b";
+    content: '\f05b';
 }
 .fa-times-circle-o:before {
-  content: "\f05c";
+    content: '\f05c';
 }
 .fa-check-circle-o:before {
-  content: "\f05d";
+    content: '\f05d';
 }
 .fa-ban:before {
-  content: "\f05e";
+    content: '\f05e';
 }
 .fa-arrow-left:before {
-  content: "\f060";
+    content: '\f060';
 }
 .fa-arrow-right:before {
-  content: "\f061";
+    content: '\f061';
 }
 .fa-arrow-up:before {
-  content: "\f062";
+    content: '\f062';
 }
 .fa-arrow-down:before {
-  content: "\f063";
+    content: '\f063';
 }
 .fa-mail-forward:before,
 .fa-share:before {
-  content: "\f064";
+    content: '\f064';
 }
 .fa-expand:before {
-  content: "\f065";
+    content: '\f065';
 }
 .fa-compress:before {
-  content: "\f066";
+    content: '\f066';
 }
 .fa-plus:before {
-  content: "\f067";
+    content: '\f067';
 }
 .fa-minus:before {
-  content: "\f068";
+    content: '\f068';
 }
 .fa-asterisk:before {
-  content: "\f069";
+    content: '\f069';
 }
 .fa-exclamation-circle:before {
-  content: "\f06a";
+    content: '\f06a';
 }
 .fa-gift:before {
-  content: "\f06b";
+    content: '\f06b';
 }
 .fa-leaf:before {
-  content: "\f06c";
+    content: '\f06c';
 }
 .fa-fire:before {
-  content: "\f06d";
+    content: '\f06d';
 }
 .fa-eye:before {
-  content: "\f06e";
+    content: '\f06e';
 }
 .fa-eye-slash:before {
-  content: "\f070";
+    content: '\f070';
 }
 .fa-warning:before,
 .fa-exclamation-triangle:before {
-  content: "\f071";
+    content: '\f071';
 }
 .fa-plane:before {
-  content: "\f072";
+    content: '\f072';
 }
 .fa-calendar:before {
-  content: "\f073";
+    content: '\f073';
 }
 .fa-random:before {
-  content: "\f074";
+    content: '\f074';
 }
 .fa-comment:before {
-  content: "\f075";
+    content: '\f075';
 }
 .fa-magnet:before {
-  content: "\f076";
+    content: '\f076';
 }
 .fa-chevron-up:before {
-  content: "\f077";
+    content: '\f077';
 }
 .fa-chevron-down:before {
-  content: "\f078";
+    content: '\f078';
 }
 .fa-retweet:before {
-  content: "\f079";
+    content: '\f079';
 }
 .fa-shopping-cart:before {
-  content: "\f07a";
+    content: '\f07a';
 }
 .fa-folder:before {
-  content: "\f07b";
+    content: '\f07b';
 }
 .fa-folder-open:before {
-  content: "\f07c";
+    content: '\f07c';
 }
 .fa-arrows-v:before {
-  content: "\f07d";
+    content: '\f07d';
 }
 .fa-arrows-h:before {
-  content: "\f07e";
+    content: '\f07e';
 }
 .fa-bar-chart-o:before,
 .fa-bar-chart:before {
-  content: "\f080";
+    content: '\f080';
 }
 .fa-twitter-square:before {
-  content: "\f081";
+    content: '\f081';
 }
 .fa-facebook-square:before {
-  content: "\f082";
+    content: '\f082';
 }
 .fa-camera-retro:before {
-  content: "\f083";
+    content: '\f083';
 }
 .fa-key:before {
-  content: "\f084";
+    content: '\f084';
 }
 .fa-gears:before,
 .fa-cogs:before {
-  content: "\f085";
+    content: '\f085';
 }
 .fa-comments:before {
-  content: "\f086";
+    content: '\f086';
 }
 .fa-thumbs-o-up:before {
-  content: "\f087";
+    content: '\f087';
 }
 .fa-thumbs-o-down:before {
-  content: "\f088";
+    content: '\f088';
 }
 .fa-star-half:before {
-  content: "\f089";
+    content: '\f089';
 }
 .fa-heart-o:before {
-  content: "\f08a";
+    content: '\f08a';
 }
 .fa-sign-out:before {
-  content: "\f08b";
+    content: '\f08b';
 }
 .fa-linkedin-square:before {
-  content: "\f08c";
+    content: '\f08c';
 }
 .fa-thumb-tack:before {
-  content: "\f08d";
+    content: '\f08d';
 }
 .fa-external-link:before {
-  content: "\f08e";
+    content: '\f08e';
 }
 .fa-sign-in:before {
-  content: "\f090";
+    content: '\f090';
 }
 .fa-trophy:before {
-  content: "\f091";
+    content: '\f091';
 }
 .fa-github-square:before {
-  content: "\f092";
+    content: '\f092';
 }
 .fa-upload:before {
-  content: "\f093";
+    content: '\f093';
 }
 .fa-lemon-o:before {
-  content: "\f094";
+    content: '\f094';
 }
 .fa-phone:before {
-  content: "\f095";
+    content: '\f095';
 }
 .fa-square-o:before {
-  content: "\f096";
+    content: '\f096';
 }
 .fa-bookmark-o:before {
-  content: "\f097";
+    content: '\f097';
 }
 .fa-phone-square:before {
-  content: "\f098";
+    content: '\f098';
 }
 .fa-twitter:before {
-  content: "\f099";
+    content: '\f099';
 }
 .fa-facebook-f:before,
 .fa-facebook:before {
-  content: "\f09a";
+    content: '\f09a';
 }
 .fa-github:before {
-  content: "\f09b";
+    content: '\f09b';
 }
 .fa-unlock:before {
-  content: "\f09c";
+    content: '\f09c';
 }
 .fa-credit-card:before {
-  content: "\f09d";
+    content: '\f09d';
 }
 .fa-rss:before {
-  content: "\f09e";
+    content: '\f09e';
 }
 .fa-hdd-o:before {
-  content: "\f0a0";
+    content: '\f0a0';
 }
 .fa-bullhorn:before {
-  content: "\f0a1";
+    content: '\f0a1';
 }
 .fa-bell:before {
-  content: "\f0f3";
+    content: '\f0f3';
 }
 .fa-certificate:before {
-  content: "\f0a3";
+    content: '\f0a3';
 }
 .fa-hand-o-right:before {
-  content: "\f0a4";
+    content: '\f0a4';
 }
 .fa-hand-o-left:before {
-  content: "\f0a5";
+    content: '\f0a5';
 }
 .fa-hand-o-up:before {
-  content: "\f0a6";
+    content: '\f0a6';
 }
 .fa-hand-o-down:before {
-  content: "\f0a7";
+    content: '\f0a7';
 }
 .fa-arrow-circle-left:before {
-  content: "\f0a8";
+    content: '\f0a8';
 }
 .fa-arrow-circle-right:before {
-  content: "\f0a9";
+    content: '\f0a9';
 }
 .fa-arrow-circle-up:before {
-  content: "\f0aa";
+    content: '\f0aa';
 }
 .fa-arrow-circle-down:before {
-  content: "\f0ab";
+    content: '\f0ab';
 }
 .fa-globe:before {
-  content: "\f0ac";
+    content: '\f0ac';
 }
 .fa-wrench:before {
-  content: "\f0ad";
+    content: '\f0ad';
 }
 .fa-tasks:before {
-  content: "\f0ae";
+    content: '\f0ae';
 }
 .fa-filter:before {
-  content: "\f0b0";
+    content: '\f0b0';
 }
 .fa-briefcase:before {
-  content: "\f0b1";
+    content: '\f0b1';
 }
 .fa-arrows-alt:before {
-  content: "\f0b2";
+    content: '\f0b2';
 }
 .fa-group:before,
 .fa-users:before {
-  content: "\f0c0";
+    content: '\f0c0';
 }
 .fa-chain:before,
 .fa-link:before {
-  content: "\f0c1";
+    content: '\f0c1';
 }
 .fa-cloud:before {
-  content: "\f0c2";
+    content: '\f0c2';
 }
 .fa-flask:before {
-  content: "\f0c3";
+    content: '\f0c3';
 }
 .fa-cut:before,
 .fa-scissors:before {
-  content: "\f0c4";
+    content: '\f0c4';
 }
 .fa-copy:before,
 .fa-files-o:before {
-  content: "\f0c5";
+    content: '\f0c5';
 }
 .fa-paperclip:before {
-  content: "\f0c6";
+    content: '\f0c6';
 }
 .fa-save:before,
 .fa-floppy-o:before {
-  content: "\f0c7";
+    content: '\f0c7';
 }
 .fa-square:before {
-  content: "\f0c8";
+    content: '\f0c8';
 }
 .fa-navicon:before,
 .fa-reorder:before,
 .fa-bars:before {
-  content: "\f0c9";
+    content: '\f0c9';
 }
 .fa-list-ul:before {
-  content: "\f0ca";
+    content: '\f0ca';
 }
 .fa-list-ol:before {
-  content: "\f0cb";
+    content: '\f0cb';
 }
 .fa-strikethrough:before {
-  content: "\f0cc";
+    content: '\f0cc';
 }
 .fa-underline:before {
-  content: "\f0cd";
+    content: '\f0cd';
 }
 .fa-table:before {
-  content: "\f0ce";
+    content: '\f0ce';
 }
 .fa-magic:before {
-  content: "\f0d0";
+    content: '\f0d0';
 }
 .fa-truck:before {
-  content: "\f0d1";
+    content: '\f0d1';
 }
 .fa-pinterest:before {
-  content: "\f0d2";
+    content: '\f0d2';
 }
 .fa-pinterest-square:before {
-  content: "\f0d3";
+    content: '\f0d3';
 }
 .fa-google-plus-square:before {
-  content: "\f0d4";
+    content: '\f0d4';
 }
 .fa-google-plus:before {
-  content: "\f0d5";
+    content: '\f0d5';
 }
 .fa-money:before {
-  content: "\f0d6";
+    content: '\f0d6';
 }
 .fa-caret-down:before {
-  content: "\f0d7";
+    content: '\f0d7';
 }
 .fa-caret-up:before {
-  content: "\f0d8";
+    content: '\f0d8';
 }
 .fa-caret-left:before {
-  content: "\f0d9";
+    content: '\f0d9';
 }
 .fa-caret-right:before {
-  content: "\f0da";
+    content: '\f0da';
 }
 .fa-columns:before {
-  content: "\f0db";
+    content: '\f0db';
 }
 .fa-unsorted:before,
 .fa-sort:before {
-  content: "\f0dc";
+    content: '\f0dc';
 }
 .fa-sort-down:before,
 .fa-sort-desc:before {
-  content: "\f0dd";
+    content: '\f0dd';
 }
 .fa-sort-up:before,
 .fa-sort-asc:before {
-  content: "\f0de";
+    content: '\f0de';
 }
 .fa-envelope:before {
-  content: "\f0e0";
+    content: '\f0e0';
 }
 .fa-linkedin:before {
-  content: "\f0e1";
+    content: '\f0e1';
 }
 .fa-rotate-left:before,
 .fa-undo:before {
-  content: "\f0e2";
+    content: '\f0e2';
 }
 .fa-legal:before,
 .fa-gavel:before {
-  content: "\f0e3";
+    content: '\f0e3';
 }
 .fa-dashboard:before,
 .fa-tachometer:before {
-  content: "\f0e4";
+    content: '\f0e4';
 }
 .fa-comment-o:before {
-  content: "\f0e5";
+    content: '\f0e5';
 }
 .fa-comments-o:before {
-  content: "\f0e6";
+    content: '\f0e6';
 }
 .fa-flash:before,
 .fa-bolt:before {
-  content: "\f0e7";
+    content: '\f0e7';
 }
 .fa-sitemap:before {
-  content: "\f0e8";
+    content: '\f0e8';
 }
 .fa-umbrella:before {
-  content: "\f0e9";
+    content: '\f0e9';
 }
 .fa-paste:before,
 .fa-clipboard:before {
-  content: "\f0ea";
+    content: '\f0ea';
 }
 .fa-lightbulb-o:before {
-  content: "\f0eb";
+    content: '\f0eb';
 }
 .fa-exchange:before {
-  content: "\f0ec";
+    content: '\f0ec';
 }
 .fa-cloud-download:before {
-  content: "\f0ed";
+    content: '\f0ed';
 }
 .fa-cloud-upload:before {
-  content: "\f0ee";
+    content: '\f0ee';
 }
 .fa-user-md:before {
-  content: "\f0f0";
+    content: '\f0f0';
 }
 .fa-stethoscope:before {
-  content: "\f0f1";
+    content: '\f0f1';
 }
 .fa-suitcase:before {
-  content: "\f0f2";
+    content: '\f0f2';
 }
 .fa-bell-o:before {
-  content: "\f0a2";
+    content: '\f0a2';
 }
 .fa-coffee:before {
-  content: "\f0f4";
+    content: '\f0f4';
 }
 .fa-cutlery:before {
-  content: "\f0f5";
+    content: '\f0f5';
 }
 .fa-file-text-o:before {
-  content: "\f0f6";
+    content: '\f0f6';
 }
 .fa-building-o:before {
-  content: "\f0f7";
+    content: '\f0f7';
 }
 .fa-hospital-o:before {
-  content: "\f0f8";
+    content: '\f0f8';
 }
 .fa-ambulance:before {
-  content: "\f0f9";
+    content: '\f0f9';
 }
 .fa-medkit:before {
-  content: "\f0fa";
+    content: '\f0fa';
 }
 .fa-fighter-jet:before {
-  content: "\f0fb";
+    content: '\f0fb';
 }
 .fa-beer:before {
-  content: "\f0fc";
+    content: '\f0fc';
 }
 .fa-h-square:before {
-  content: "\f0fd";
+    content: '\f0fd';
 }
 .fa-plus-square:before {
-  content: "\f0fe";
+    content: '\f0fe';
 }
 .fa-angle-double-left:before {
-  content: "\f100";
+    content: '\f100';
 }
 .fa-angle-double-right:before {
-  content: "\f101";
+    content: '\f101';
 }
 .fa-angle-double-up:before {
-  content: "\f102";
+    content: '\f102';
 }
 .fa-angle-double-down:before {
-  content: "\f103";
+    content: '\f103';
 }
 .fa-angle-left:before {
-  content: "\f104";
+    content: '\f104';
 }
 .fa-angle-right:before {
-  content: "\f105";
+    content: '\f105';
 }
 .fa-angle-up:before {
-  content: "\f106";
+    content: '\f106';
 }
 .fa-angle-down:before {
-  content: "\f107";
+    content: '\f107';
 }
 .fa-desktop:before {
-  content: "\f108";
+    content: '\f108';
 }
 .fa-laptop:before {
-  content: "\f109";
+    content: '\f109';
 }
 .fa-tablet:before {
-  content: "\f10a";
+    content: '\f10a';
 }
 .fa-mobile-phone:before,
 .fa-mobile:before {
-  content: "\f10b";
+    content: '\f10b';
 }
 .fa-circle-o:before {
-  content: "\f10c";
+    content: '\f10c';
 }
 .fa-quote-left:before {
-  content: "\f10d";
+    content: '\f10d';
 }
 .fa-quote-right:before {
-  content: "\f10e";
+    content: '\f10e';
 }
 .fa-spinner:before {
-  content: "\f110";
+    content: '\f110';
 }
 .fa-circle:before {
-  content: "\f111";
+    content: '\f111';
 }
 .fa-mail-reply:before,
 .fa-reply:before {
-  content: "\f112";
+    content: '\f112';
 }
 .fa-github-alt:before {
-  content: "\f113";
+    content: '\f113';
 }
 .fa-folder-o:before {
-  content: "\f114";
+    content: '\f114';
 }
 .fa-folder-open-o:before {
-  content: "\f115";
+    content: '\f115';
 }
 .fa-smile-o:before {
-  content: "\f118";
+    content: '\f118';
 }
 .fa-frown-o:before {
-  content: "\f119";
+    content: '\f119';
 }
 .fa-meh-o:before {
-  content: "\f11a";
+    content: '\f11a';
 }
 .fa-gamepad:before {
-  content: "\f11b";
+    content: '\f11b';
 }
 .fa-keyboard-o:before {
-  content: "\f11c";
+    content: '\f11c';
 }
 .fa-flag-o:before {
-  content: "\f11d";
+    content: '\f11d';
 }
 .fa-flag-checkered:before {
-  content: "\f11e";
+    content: '\f11e';
 }
 .fa-terminal:before {
-  content: "\f120";
+    content: '\f120';
 }
 .fa-code:before {
-  content: "\f121";
+    content: '\f121';
 }
 .fa-mail-reply-all:before,
 .fa-reply-all:before {
-  content: "\f122";
+    content: '\f122';
 }
 .fa-star-half-empty:before,
 .fa-star-half-full:before,
 .fa-star-half-o:before {
-  content: "\f123";
+    content: '\f123';
 }
 .fa-location-arrow:before {
-  content: "\f124";
+    content: '\f124';
 }
 .fa-crop:before {
-  content: "\f125";
+    content: '\f125';
 }
 .fa-code-fork:before {
-  content: "\f126";
+    content: '\f126';
 }
 .fa-unlink:before,
 .fa-chain-broken:before {
-  content: "\f127";
+    content: '\f127';
 }
 .fa-question:before {
-  content: "\f128";
+    content: '\f128';
 }
 .fa-info:before {
-  content: "\f129";
+    content: '\f129';
 }
 .fa-exclamation:before {
-  content: "\f12a";
+    content: '\f12a';
 }
 .fa-superscript:before {
-  content: "\f12b";
+    content: '\f12b';
 }
 .fa-subscript:before {
-  content: "\f12c";
+    content: '\f12c';
 }
 .fa-eraser:before {
-  content: "\f12d";
+    content: '\f12d';
 }
 .fa-puzzle-piece:before {
-  content: "\f12e";
+    content: '\f12e';
 }
 .fa-microphone:before {
-  content: "\f130";
+    content: '\f130';
 }
 .fa-microphone-slash:before {
-  content: "\f131";
+    content: '\f131';
 }
 .fa-shield:before {
-  content: "\f132";
+    content: '\f132';
 }
 .fa-calendar-o:before {
-  content: "\f133";
+    content: '\f133';
 }
 .fa-fire-extinguisher:before {
-  content: "\f134";
+    content: '\f134';
 }
 .fa-rocket:before {
-  content: "\f135";
+    content: '\f135';
 }
 .fa-maxcdn:before {
-  content: "\f136";
+    content: '\f136';
 }
 .fa-chevron-circle-left:before {
-  content: "\f137";
+    content: '\f137';
 }
 .fa-chevron-circle-right:before {
-  content: "\f138";
+    content: '\f138';
 }
 .fa-chevron-circle-up:before {
-  content: "\f139";
+    content: '\f139';
 }
 .fa-chevron-circle-down:before {
-  content: "\f13a";
+    content: '\f13a';
 }
 .fa-html5:before {
-  content: "\f13b";
+    content: '\f13b';
 }
 .fa-css3:before {
-  content: "\f13c";
+    content: '\f13c';
 }
 .fa-anchor:before {
-  content: "\f13d";
+    content: '\f13d';
 }
 .fa-unlock-alt:before {
-  content: "\f13e";
+    content: '\f13e';
 }
 .fa-bullseye:before {
-  content: "\f140";
+    content: '\f140';
 }
 .fa-ellipsis-h:before {
-  content: "\f141";
+    content: '\f141';
 }
 .fa-ellipsis-v:before {
-  content: "\f142";
+    content: '\f142';
 }
 .fa-rss-square:before {
-  content: "\f143";
+    content: '\f143';
 }
 .fa-play-circle:before {
-  content: "\f144";
+    content: '\f144';
 }
 .fa-ticket:before {
-  content: "\f145";
+    content: '\f145';
 }
 .fa-minus-square:before {
-  content: "\f146";
+    content: '\f146';
 }
 .fa-minus-square-o:before {
-  content: "\f147";
+    content: '\f147';
 }
 .fa-level-up:before {
-  content: "\f148";
+    content: '\f148';
 }
 .fa-level-down:before {
-  content: "\f149";
+    content: '\f149';
 }
 .fa-check-square:before {
-  content: "\f14a";
+    content: '\f14a';
 }
 .fa-pencil-square:before {
-  content: "\f14b";
+    content: '\f14b';
 }
 .fa-external-link-square:before {
-  content: "\f14c";
+    content: '\f14c';
 }
 .fa-share-square:before {
-  content: "\f14d";
+    content: '\f14d';
 }
 .fa-compass:before {
-  content: "\f14e";
+    content: '\f14e';
 }
 .fa-toggle-down:before,
 .fa-caret-square-o-down:before {
-  content: "\f150";
+    content: '\f150';
 }
 .fa-toggle-up:before,
 .fa-caret-square-o-up:before {
-  content: "\f151";
+    content: '\f151';
 }
 .fa-toggle-right:before,
 .fa-caret-square-o-right:before {
-  content: "\f152";
+    content: '\f152';
 }
 .fa-euro:before,
 .fa-eur:before {
-  content: "\f153";
+    content: '\f153';
 }
 .fa-gbp:before {
-  content: "\f154";
+    content: '\f154';
 }
 .fa-dollar:before,
 .fa-usd:before {
-  content: "\f155";
+    content: '\f155';
 }
 .fa-rupee:before,
 .fa-inr:before {
-  content: "\f156";
+    content: '\f156';
 }
 .fa-cny:before,
 .fa-rmb:before,
 .fa-yen:before,
 .fa-jpy:before {
-  content: "\f157";
+    content: '\f157';
 }
 .fa-ruble:before,
 .fa-rouble:before,
 .fa-rub:before {
-  content: "\f158";
+    content: '\f158';
 }
 .fa-won:before,
 .fa-krw:before {
-  content: "\f159";
+    content: '\f159';
 }
 .fa-bitcoin:before,
 .fa-btc:before {
-  content: "\f15a";
+    content: '\f15a';
 }
 .fa-file:before {
-  content: "\f15b";
+    content: '\f15b';
 }
 .fa-file-text:before {
-  content: "\f15c";
+    content: '\f15c';
 }
 .fa-sort-alpha-asc:before {
-  content: "\f15d";
+    content: '\f15d';
 }
 .fa-sort-alpha-desc:before {
-  content: "\f15e";
+    content: '\f15e';
 }
 .fa-sort-amount-asc:before {
-  content: "\f160";
+    content: '\f160';
 }
 .fa-sort-amount-desc:before {
-  content: "\f161";
+    content: '\f161';
 }
 .fa-sort-numeric-asc:before {
-  content: "\f162";
+    content: '\f162';
 }
 .fa-sort-numeric-desc:before {
-  content: "\f163";
+    content: '\f163';
 }
 .fa-thumbs-up:before {
-  content: "\f164";
+    content: '\f164';
 }
 .fa-thumbs-down:before {
-  content: "\f165";
+    content: '\f165';
 }
 .fa-youtube-square:before {
-  content: "\f166";
+    content: '\f166';
 }
 .fa-youtube:before {
-  content: "\f167";
+    content: '\f167';
 }
 .fa-xing:before {
-  content: "\f168";
+    content: '\f168';
 }
 .fa-xing-square:before {
-  content: "\f169";
+    content: '\f169';
 }
 .fa-youtube-play:before {
-  content: "\f16a";
+    content: '\f16a';
 }
 .fa-dropbox:before {
-  content: "\f16b";
+    content: '\f16b';
 }
 .fa-stack-overflow:before {
-  content: "\f16c";
+    content: '\f16c';
 }
 .fa-instagram:before {
-  content: "\f16d";
+    content: '\f16d';
 }
 .fa-flickr:before {
-  content: "\f16e";
+    content: '\f16e';
 }
 .fa-adn:before {
-  content: "\f170";
+    content: '\f170';
 }
 .fa-bitbucket:before {
-  content: "\f171";
+    content: '\f171';
 }
 .fa-bitbucket-square:before {
-  content: "\f172";
+    content: '\f172';
 }
 .fa-tumblr:before {
-  content: "\f173";
+    content: '\f173';
 }
 .fa-tumblr-square:before {
-  content: "\f174";
+    content: '\f174';
 }
 .fa-long-arrow-down:before {
-  content: "\f175";
+    content: '\f175';
 }
 .fa-long-arrow-up:before {
-  content: "\f176";
+    content: '\f176';
 }
 .fa-long-arrow-left:before {
-  content: "\f177";
+    content: '\f177';
 }
 .fa-long-arrow-right:before {
-  content: "\f178";
+    content: '\f178';
 }
 .fa-apple:before {
-  content: "\f179";
+    content: '\f179';
 }
 .fa-windows:before {
-  content: "\f17a";
+    content: '\f17a';
 }
 .fa-android:before {
-  content: "\f17b";
+    content: '\f17b';
 }
 .fa-linux:before {
-  content: "\f17c";
+    content: '\f17c';
 }
 .fa-dribbble:before {
-  content: "\f17d";
+    content: '\f17d';
 }
 .fa-skype:before {
-  content: "\f17e";
+    content: '\f17e';
 }
 .fa-foursquare:before {
-  content: "\f180";
+    content: '\f180';
 }
 .fa-trello:before {
-  content: "\f181";
+    content: '\f181';
 }
 .fa-female:before {
-  content: "\f182";
+    content: '\f182';
 }
 .fa-male:before {
-  content: "\f183";
+    content: '\f183';
 }
 .fa-gittip:before,
 .fa-gratipay:before {
-  content: "\f184";
+    content: '\f184';
 }
 .fa-sun-o:before {
-  content: "\f185";
+    content: '\f185';
 }
 .fa-moon-o:before {
-  content: "\f186";
+    content: '\f186';
 }
 .fa-archive:before {
-  content: "\f187";
+    content: '\f187';
 }
 .fa-bug:before {
-  content: "\f188";
+    content: '\f188';
 }
 .fa-vk:before {
-  content: "\f189";
+    content: '\f189';
 }
 .fa-weibo:before {
-  content: "\f18a";
+    content: '\f18a';
 }
 .fa-renren:before {
-  content: "\f18b";
+    content: '\f18b';
 }
 .fa-pagelines:before {
-  content: "\f18c";
+    content: '\f18c';
 }
 .fa-stack-exchange:before {
-  content: "\f18d";
+    content: '\f18d';
 }
 .fa-arrow-circle-o-right:before {
-  content: "\f18e";
+    content: '\f18e';
 }
 .fa-arrow-circle-o-left:before {
-  content: "\f190";
+    content: '\f190';
 }
 .fa-toggle-left:before,
 .fa-caret-square-o-left:before {
-  content: "\f191";
+    content: '\f191';
 }
 .fa-dot-circle-o:before {
-  content: "\f192";
+    content: '\f192';
 }
 .fa-wheelchair:before {
-  content: "\f193";
+    content: '\f193';
 }
 .fa-vimeo-square:before {
-  content: "\f194";
+    content: '\f194';
 }
 .fa-turkish-lira:before,
 .fa-try:before {
-  content: "\f195";
+    content: '\f195';
 }
 .fa-plus-square-o:before {
-  content: "\f196";
+    content: '\f196';
 }
 .fa-space-shuttle:before {
-  content: "\f197";
+    content: '\f197';
 }
 .fa-slack:before {
-  content: "\f198";
+    content: '\f198';
 }
 .fa-envelope-square:before {
-  content: "\f199";
+    content: '\f199';
 }
 .fa-wordpress:before {
-  content: "\f19a";
+    content: '\f19a';
 }
 .fa-openid:before {
-  content: "\f19b";
+    content: '\f19b';
 }
 .fa-institution:before,
 .fa-bank:before,
 .fa-university:before {
-  content: "\f19c";
+    content: '\f19c';
 }
 .fa-mortar-board:before,
 .fa-graduation-cap:before {
-  content: "\f19d";
+    content: '\f19d';
 }
 .fa-yahoo:before {
-  content: "\f19e";
+    content: '\f19e';
 }
 .fa-google:before {
-  content: "\f1a0";
+    content: '\f1a0';
 }
 .fa-reddit:before {
-  content: "\f1a1";
+    content: '\f1a1';
 }
 .fa-reddit-square:before {
-  content: "\f1a2";
+    content: '\f1a2';
 }
 .fa-stumbleupon-circle:before {
-  content: "\f1a3";
+    content: '\f1a3';
 }
 .fa-stumbleupon:before {
-  content: "\f1a4";
+    content: '\f1a4';
 }
 .fa-delicious:before {
-  content: "\f1a5";
+    content: '\f1a5';
 }
 .fa-digg:before {
-  content: "\f1a6";
+    content: '\f1a6';
 }
 .fa-pied-piper:before {
-  content: "\f1a7";
+    content: '\f1a7';
 }
 .fa-pied-piper-alt:before {
-  content: "\f1a8";
+    content: '\f1a8';
 }
 .fa-drupal:before {
-  content: "\f1a9";
+    content: '\f1a9';
 }
 .fa-joomla:before {
-  content: "\f1aa";
+    content: '\f1aa';
 }
 .fa-language:before {
-  content: "\f1ab";
+    content: '\f1ab';
 }
 .fa-fax:before {
-  content: "\f1ac";
+    content: '\f1ac';
 }
 .fa-building:before {
-  content: "\f1ad";
+    content: '\f1ad';
 }
 .fa-child:before {
-  content: "\f1ae";
+    content: '\f1ae';
 }
 .fa-paw:before {
-  content: "\f1b0";
+    content: '\f1b0';
 }
 .fa-spoon:before {
-  content: "\f1b1";
+    content: '\f1b1';
 }
 .fa-cube:before {
-  content: "\f1b2";
+    content: '\f1b2';
 }
 .fa-cubes:before {
-  content: "\f1b3";
+    content: '\f1b3';
 }
 .fa-behance:before {
-  content: "\f1b4";
+    content: '\f1b4';
 }
 .fa-behance-square:before {
-  content: "\f1b5";
+    content: '\f1b5';
 }
 .fa-steam:before {
-  content: "\f1b6";
+    content: '\f1b6';
 }
 .fa-steam-square:before {
-  content: "\f1b7";
+    content: '\f1b7';
 }
 .fa-recycle:before {
-  content: "\f1b8";
+    content: '\f1b8';
 }
 .fa-automobile:before,
 .fa-car:before {
-  content: "\f1b9";
+    content: '\f1b9';
 }
 .fa-cab:before,
 .fa-taxi:before {
-  content: "\f1ba";
+    content: '\f1ba';
 }
 .fa-tree:before {
-  content: "\f1bb";
+    content: '\f1bb';
 }
 .fa-spotify:before {
-  content: "\f1bc";
+    content: '\f1bc';
 }
 .fa-deviantart:before {
-  content: "\f1bd";
+    content: '\f1bd';
 }
 .fa-soundcloud:before {
-  content: "\f1be";
+    content: '\f1be';
 }
 .fa-database:before {
-  content: "\f1c0";
+    content: '\f1c0';
 }
 .fa-file-pdf-o:before {
-  content: "\f1c1";
+    content: '\f1c1';
 }
 .fa-file-word-o:before {
-  content: "\f1c2";
+    content: '\f1c2';
 }
 .fa-file-excel-o:before {
-  content: "\f1c3";
+    content: '\f1c3';
 }
 .fa-file-powerpoint-o:before {
-  content: "\f1c4";
+    content: '\f1c4';
 }
 .fa-file-photo-o:before,
 .fa-file-picture-o:before,
 .fa-file-image-o:before {
-  content: "\f1c5";
+    content: '\f1c5';
 }
 .fa-file-zip-o:before,
 .fa-file-archive-o:before {
-  content: "\f1c6";
+    content: '\f1c6';
 }
 .fa-file-sound-o:before,
 .fa-file-audio-o:before {
-  content: "\f1c7";
+    content: '\f1c7';
 }
 .fa-file-movie-o:before,
 .fa-file-video-o:before {
-  content: "\f1c8";
+    content: '\f1c8';
 }
 .fa-file-code-o:before {
-  content: "\f1c9";
+    content: '\f1c9';
 }
 .fa-vine:before {
-  content: "\f1ca";
+    content: '\f1ca';
 }
 .fa-codepen:before {
-  content: "\f1cb";
+    content: '\f1cb';
 }
 .fa-jsfiddle:before {
-  content: "\f1cc";
+    content: '\f1cc';
 }
 .fa-life-bouy:before,
 .fa-life-buoy:before,
 .fa-life-saver:before,
 .fa-support:before,
 .fa-life-ring:before {
-  content: "\f1cd";
+    content: '\f1cd';
 }
 .fa-circle-o-notch:before {
-  content: "\f1ce";
+    content: '\f1ce';
 }
 .fa-ra:before,
 .fa-rebel:before {
-  content: "\f1d0";
+    content: '\f1d0';
 }
 .fa-ge:before,
 .fa-empire:before {
-  content: "\f1d1";
+    content: '\f1d1';
 }
 .fa-git-square:before {
-  content: "\f1d2";
+    content: '\f1d2';
 }
 .fa-git:before {
-  content: "\f1d3";
+    content: '\f1d3';
 }
 .fa-hacker-news:before {
-  content: "\f1d4";
+    content: '\f1d4';
 }
 .fa-tencent-weibo:before {
-  content: "\f1d5";
+    content: '\f1d5';
 }
 .fa-qq:before {
-  content: "\f1d6";
+    content: '\f1d6';
 }
 .fa-wechat:before,
 .fa-weixin:before {
-  content: "\f1d7";
+    content: '\f1d7';
 }
 .fa-send:before,
 .fa-paper-plane:before {
-  content: "\f1d8";
+    content: '\f1d8';
 }
 .fa-send-o:before,
 .fa-paper-plane-o:before {
-  content: "\f1d9";
+    content: '\f1d9';
 }
 .fa-history:before {
-  content: "\f1da";
+    content: '\f1da';
 }
 .fa-genderless:before,
 .fa-circle-thin:before {
-  content: "\f1db";
+    content: '\f1db';
 }
 .fa-header:before {
-  content: "\f1dc";
+    content: '\f1dc';
 }
 .fa-paragraph:before {
-  content: "\f1dd";
+    content: '\f1dd';
 }
 .fa-sliders:before {
-  content: "\f1de";
+    content: '\f1de';
 }
 .fa-share-alt:before {
-  content: "\f1e0";
+    content: '\f1e0';
 }
 .fa-share-alt-square:before {
-  content: "\f1e1";
+    content: '\f1e1';
 }
 .fa-bomb:before {
-  content: "\f1e2";
+    content: '\f1e2';
 }
 .fa-soccer-ball-o:before,
 .fa-futbol-o:before {
-  content: "\f1e3";
+    content: '\f1e3';
 }
 .fa-tty:before {
-  content: "\f1e4";
+    content: '\f1e4';
 }
 .fa-binoculars:before {
-  content: "\f1e5";
+    content: '\f1e5';
 }
 .fa-plug:before {
-  content: "\f1e6";
+    content: '\f1e6';
 }
 .fa-slideshare:before {
-  content: "\f1e7";
+    content: '\f1e7';
 }
 .fa-twitch:before {
-  content: "\f1e8";
+    content: '\f1e8';
 }
 .fa-yelp:before {
-  content: "\f1e9";
+    content: '\f1e9';
 }
 .fa-newspaper-o:before {
-  content: "\f1ea";
+    content: '\f1ea';
 }
 .fa-wifi:before {
-  content: "\f1eb";
+    content: '\f1eb';
 }
 .fa-calculator:before {
-  content: "\f1ec";
+    content: '\f1ec';
 }
 .fa-paypal:before {
-  content: "\f1ed";
+    content: '\f1ed';
 }
 .fa-google-wallet:before {
-  content: "\f1ee";
+    content: '\f1ee';
 }
 .fa-cc-visa:before {
-  content: "\f1f0";
+    content: '\f1f0';
 }
 .fa-cc-mastercard:before {
-  content: "\f1f1";
+    content: '\f1f1';
 }
 .fa-cc-discover:before {
-  content: "\f1f2";
+    content: '\f1f2';
 }
 .fa-cc-amex:before {
-  content: "\f1f3";
+    content: '\f1f3';
 }
 .fa-cc-paypal:before {
-  content: "\f1f4";
+    content: '\f1f4';
 }
 .fa-cc-stripe:before {
-  content: "\f1f5";
+    content: '\f1f5';
 }
 .fa-bell-slash:before {
-  content: "\f1f6";
+    content: '\f1f6';
 }
 .fa-bell-slash-o:before {
-  content: "\f1f7";
+    content: '\f1f7';
 }
 .fa-trash:before {
-  content: "\f1f8";
+    content: '\f1f8';
 }
 .fa-copyright:before {
-  content: "\f1f9";
+    content: '\f1f9';
 }
 .fa-at:before {
-  content: "\f1fa";
+    content: '\f1fa';
 }
 .fa-eyedropper:before {
-  content: "\f1fb";
+    content: '\f1fb';
 }
 .fa-paint-brush:before {
-  content: "\f1fc";
+    content: '\f1fc';
 }
 .fa-birthday-cake:before {
-  content: "\f1fd";
+    content: '\f1fd';
 }
 .fa-area-chart:before {
-  content: "\f1fe";
+    content: '\f1fe';
 }
 .fa-pie-chart:before {
-  content: "\f200";
+    content: '\f200';
 }
 .fa-line-chart:before {
-  content: "\f201";
+    content: '\f201';
 }
 .fa-lastfm:before {
-  content: "\f202";
+    content: '\f202';
 }
 .fa-lastfm-square:before {
-  content: "\f203";
+    content: '\f203';
 }
 .fa-toggle-off:before {
-  content: "\f204";
+    content: '\f204';
 }
 .fa-toggle-on:before {
-  content: "\f205";
+    content: '\f205';
 }
 .fa-bicycle:before {
-  content: "\f206";
+    content: '\f206';
 }
 .fa-bus:before {
-  content: "\f207";
+    content: '\f207';
 }
 .fa-ioxhost:before {
-  content: "\f208";
+    content: '\f208';
 }
 .fa-angellist:before {
-  content: "\f209";
+    content: '\f209';
 }
 .fa-cc:before {
-  content: "\f20a";
+    content: '\f20a';
 }
 .fa-shekel:before,
 .fa-sheqel:before,
 .fa-ils:before {
-  content: "\f20b";
+    content: '\f20b';
 }
 .fa-meanpath:before {
-  content: "\f20c";
+    content: '\f20c';
 }
 .fa-buysellads:before {
-  content: "\f20d";
+    content: '\f20d';
 }
 .fa-connectdevelop:before {
-  content: "\f20e";
+    content: '\f20e';
 }
 .fa-dashcube:before {
-  content: "\f210";
+    content: '\f210';
 }
 .fa-forumbee:before {
-  content: "\f211";
+    content: '\f211';
 }
 .fa-leanpub:before {
-  content: "\f212";
+    content: '\f212';
 }
 .fa-sellsy:before {
-  content: "\f213";
+    content: '\f213';
 }
 .fa-shirtsinbulk:before {
-  content: "\f214";
+    content: '\f214';
 }
 .fa-simplybuilt:before {
-  content: "\f215";
+    content: '\f215';
 }
 .fa-skyatlas:before {
-  content: "\f216";
+    content: '\f216';
 }
 .fa-cart-plus:before {
-  content: "\f217";
+    content: '\f217';
 }
 .fa-cart-arrow-down:before {
-  content: "\f218";
+    content: '\f218';
 }
 .fa-diamond:before {
-  content: "\f219";
+    content: '\f219';
 }
 .fa-ship:before {
-  content: "\f21a";
+    content: '\f21a';
 }
 .fa-user-secret:before {
-  content: "\f21b";
+    content: '\f21b';
 }
 .fa-motorcycle:before {
-  content: "\f21c";
+    content: '\f21c';
 }
 .fa-street-view:before {
-  content: "\f21d";
+    content: '\f21d';
 }
 .fa-heartbeat:before {
-  content: "\f21e";
+    content: '\f21e';
 }
 .fa-venus:before {
-  content: "\f221";
+    content: '\f221';
 }
 .fa-mars:before {
-  content: "\f222";
+    content: '\f222';
 }
 .fa-mercury:before {
-  content: "\f223";
+    content: '\f223';
 }
 .fa-transgender:before {
-  content: "\f224";
+    content: '\f224';
 }
 .fa-transgender-alt:before {
-  content: "\f225";
+    content: '\f225';
 }
 .fa-venus-double:before {
-  content: "\f226";
+    content: '\f226';
 }
 .fa-mars-double:before {
-  content: "\f227";
+    content: '\f227';
 }
 .fa-venus-mars:before {
-  content: "\f228";
+    content: '\f228';
 }
 .fa-mars-stroke:before {
-  content: "\f229";
+    content: '\f229';
 }
 .fa-mars-stroke-v:before {
-  content: "\f22a";
+    content: '\f22a';
 }
 .fa-mars-stroke-h:before {
-  content: "\f22b";
+    content: '\f22b';
 }
 .fa-neuter:before {
-  content: "\f22c";
+    content: '\f22c';
 }
 .fa-facebook-official:before {
-  content: "\f230";
+    content: '\f230';
 }
 .fa-pinterest-p:before {
-  content: "\f231";
+    content: '\f231';
 }
 .fa-whatsapp:before {
-  content: "\f232";
+    content: '\f232';
 }
 .fa-server:before {
-  content: "\f233";
+    content: '\f233';
 }
 .fa-user-plus:before {
-  content: "\f234";
+    content: '\f234';
 }
 .fa-user-times:before {
-  content: "\f235";
+    content: '\f235';
 }
 .fa-hotel:before,
 .fa-bed:before {
-  content: "\f236";
+    content: '\f236';
 }
 .fa-viacoin:before {
-  content: "\f237";
+    content: '\f237';
 }
 .fa-train:before {
-  content: "\f238";
+    content: '\f238';
 }
 .fa-subway:before {
-  content: "\f239";
+    content: '\f239';
 }
 .fa-medium:before {
-  content: "\f23a";
+    content: '\f23a';
 }
diff --git a/web/sass-files/sass/vendors/_module.scss b/web/sass-files/sass/vendors/_module.scss
new file mode 100644
index 0000000000..ed8a124a2e
--- /dev/null
+++ b/web/sass-files/sass/vendors/_module.scss
@@ -0,0 +1,4 @@
+// Only for combining all the files in this folder
+@import 'perfect-scrollbar';
+@import 'font-awesome';
+@import 'colorpicker';
diff --git a/web/sass-files/sass/vendors/_perfect-scrollbar.scss b/web/sass-files/sass/vendors/_perfect-scrollbar.scss
new file mode 100755
index 0000000000..212a226874
--- /dev/null
+++ b/web/sass-files/sass/vendors/_perfect-scrollbar.scss
@@ -0,0 +1,141 @@
+@charset 'UTF-8';
+
+.ps-container {
+    overflow: hidden !important;
+}
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #999;
+}
+.ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+    filter: alpha(opacity=0);
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 3px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 8px;
+}
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-transition: background-color .2s linear;
+    -moz-transition: background-color .2s linear;
+    -o-transition: background-color .2s linear;
+    transition: background-color .2s linear;
+    bottom: 0;
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px;
+}
+.ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
+    filter: alpha(opacity=0);
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 3px;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+}
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-transition: background-color .2s linear;
+    -moz-transition: background-color .2s linear;
+    -o-transition: background-color .2s linear;
+    transition: background-color .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 8px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #999;
+}
+.ps-container:hover > .ps-scrollbar-x-rail,
+.ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: .6;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
+    filter: alpha(opacity=60);
+}
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+    background-color: #999;
+}
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: .9;
+    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
+    filter: alpha(opacity=90);
+}
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+    background-color: #999;
+}

From 595ca0efca91bd2450ad4d4f80c42f7d017875f3 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Mon, 14 Mar 2016 22:37:42 +0500
Subject: [PATCH 2/4] Reverting changes for core files

---
 config/config.json | 33 ++++-----------------------------
 model/version.go   |  2 +-
 2 files changed, 5 insertions(+), 30 deletions(-)

diff --git a/config/config.json b/config/config.json
index 7e8b427084..b211b16d31 100644
--- a/config/config.json
+++ b/config/config.json
@@ -11,7 +11,7 @@
         "EnableOnlyAdminIntegrations": true,
         "EnablePostUsernameOverride": false,
         "EnablePostIconOverride": false,
-        "EnableTesting": true,
+        "EnableTesting": false,
         "EnableDeveloper": false,
         "EnableSecurityFixAlert": true,
         "EnableInsecureOutgoingConnections": false,
@@ -19,9 +19,7 @@
         "SessionLengthWebInDays": 30,
         "SessionLengthMobileInDays": 30,
         "SessionLengthSSOInDays": 30,
-        "SessionCacheInMinutes": 10,
-        "WebsocketSecurePort": 443,
-        "WebsocketPort": 80
+        "SessionCacheInMinutes": 10
     },
     "TeamSettings": {
         "SiteName": "Mattermost",
@@ -74,7 +72,7 @@
         "EnableSignUpWithEmail": true,
         "EnableSignInWithEmail": true,
         "EnableSignInWithUsername": false,
-        "SendEmailNotifications": true,
+        "SendEmailNotifications": false,
         "RequireEmailVerification": false,
         "FeedbackName": "",
         "FeedbackEmail": "",
@@ -115,28 +113,5 @@
         "AuthEndpoint": "",
         "TokenEndpoint": "",
         "UserApiEndpoint": ""
-    },
-    "GoogleSettings": {
-        "Enable": false,
-        "Secret": "",
-        "Id": "",
-        "Scope": "",
-        "AuthEndpoint": "",
-        "TokenEndpoint": "",
-        "UserApiEndpoint": ""
-    },
-    "LdapSettings": {
-        "Enable": false,
-        "LdapServer": null,
-        "LdapPort": 389,
-        "BaseDN": null,
-        "BindUsername": null,
-        "BindPassword": null,
-        "FirstNameAttribute": null,
-        "LastNameAttribute": null,
-        "EmailAttribute": null,
-        "UsernameAttribute": null,
-        "IdAttribute": null,
-        "QueryTimeout": 60
     }
-}
\ No newline at end of file
+}
diff --git a/model/version.go b/model/version.go
index 46f34b81eb..6011a92459 100644
--- a/model/version.go
+++ b/model/version.go
@@ -31,7 +31,7 @@ var CurrentVersion string = versions[0]
 var BuildNumber = "_BUILD_NUMBER_"
 var BuildDate = "_BUILD_DATE_"
 var BuildHash = "_BUILD_HASH_"
-var BuildEnterpriseReady = "false"
+var BuildEnterpriseReady = "_BUILD_ENTERPRISE_READY_"
 var versionsWithoutHotFixes []string
 
 func init() {

From 9bff9be5e716e0b581f82db9e36bf49ecb16cdb2 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Tue, 15 Mar 2016 18:21:58 +0500
Subject: [PATCH 3/4] Updating character in post.scss

---
 web/sass-files/sass/layout/_post.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/sass-files/sass/layout/_post.scss b/web/sass-files/sass/layout/_post.scss
index 22c905aa60..ce055035de 100644
--- a/web/sass-files/sass/layout/_post.scss
+++ b/web/sass-files/sass/layout/_post.scss
@@ -759,7 +759,7 @@ body.ios {
             text-indent: 3px;
 
             &:before {
-                content: '⦁';
+                content: '&#10625;';
                 margin-right: 8px;
             }
         }

From 7d79a916dd58d51989d35721060cfca6dce1baca Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Tue, 15 Mar 2016 22:24:01 +0500
Subject: [PATCH 4/4] Updating pages to routes

---
 .../sass/{pages => routes}/_access-history.scss     |   0
 .../sass/{pages => routes}/_activity-log.scss       |   0
 .../sass/{pages => routes}/_admin-console.scss      |   0
 web/sass-files/sass/{pages => routes}/_docs.scss    |   0
 .../sass/{pages => routes}/_error-page.scss         |   0
 web/sass-files/sass/{pages => routes}/_loading.scss |   0
 web/sass-files/sass/{pages => routes}/_module.scss  |   0
 web/sass-files/sass/{pages => routes}/_print.scss   | Bin
 .../sass/{pages => routes}/_settings.scss           |   0
 web/sass-files/sass/{pages => routes}/_signup.scss  |   0
 .../sass/{pages => routes}/_statistics.scss         |   0
 web/sass-files/sass/styles.scss                     |   2 +-
 12 files changed, 1 insertion(+), 1 deletion(-)
 rename web/sass-files/sass/{pages => routes}/_access-history.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_activity-log.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_admin-console.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_docs.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_error-page.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_loading.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_module.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_print.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_settings.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_signup.scss (100%)
 rename web/sass-files/sass/{pages => routes}/_statistics.scss (100%)

diff --git a/web/sass-files/sass/pages/_access-history.scss b/web/sass-files/sass/routes/_access-history.scss
similarity index 100%
rename from web/sass-files/sass/pages/_access-history.scss
rename to web/sass-files/sass/routes/_access-history.scss
diff --git a/web/sass-files/sass/pages/_activity-log.scss b/web/sass-files/sass/routes/_activity-log.scss
similarity index 100%
rename from web/sass-files/sass/pages/_activity-log.scss
rename to web/sass-files/sass/routes/_activity-log.scss
diff --git a/web/sass-files/sass/pages/_admin-console.scss b/web/sass-files/sass/routes/_admin-console.scss
similarity index 100%
rename from web/sass-files/sass/pages/_admin-console.scss
rename to web/sass-files/sass/routes/_admin-console.scss
diff --git a/web/sass-files/sass/pages/_docs.scss b/web/sass-files/sass/routes/_docs.scss
similarity index 100%
rename from web/sass-files/sass/pages/_docs.scss
rename to web/sass-files/sass/routes/_docs.scss
diff --git a/web/sass-files/sass/pages/_error-page.scss b/web/sass-files/sass/routes/_error-page.scss
similarity index 100%
rename from web/sass-files/sass/pages/_error-page.scss
rename to web/sass-files/sass/routes/_error-page.scss
diff --git a/web/sass-files/sass/pages/_loading.scss b/web/sass-files/sass/routes/_loading.scss
similarity index 100%
rename from web/sass-files/sass/pages/_loading.scss
rename to web/sass-files/sass/routes/_loading.scss
diff --git a/web/sass-files/sass/pages/_module.scss b/web/sass-files/sass/routes/_module.scss
similarity index 100%
rename from web/sass-files/sass/pages/_module.scss
rename to web/sass-files/sass/routes/_module.scss
diff --git a/web/sass-files/sass/pages/_print.scss b/web/sass-files/sass/routes/_print.scss
similarity index 100%
rename from web/sass-files/sass/pages/_print.scss
rename to web/sass-files/sass/routes/_print.scss
diff --git a/web/sass-files/sass/pages/_settings.scss b/web/sass-files/sass/routes/_settings.scss
similarity index 100%
rename from web/sass-files/sass/pages/_settings.scss
rename to web/sass-files/sass/routes/_settings.scss
diff --git a/web/sass-files/sass/pages/_signup.scss b/web/sass-files/sass/routes/_signup.scss
similarity index 100%
rename from web/sass-files/sass/pages/_signup.scss
rename to web/sass-files/sass/routes/_signup.scss
diff --git a/web/sass-files/sass/pages/_statistics.scss b/web/sass-files/sass/routes/_statistics.scss
similarity index 100%
rename from web/sass-files/sass/pages/_statistics.scss
rename to web/sass-files/sass/routes/_statistics.scss
diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss
index 4a49e439ea..88c098f18a 100644
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -12,7 +12,7 @@
 @import 'vendors/module';
 @import 'utils/module';
 @import 'base/module';
-@import 'pages/module';
+@import 'routes/module';
 @import 'components/module';
 @import 'layout/module';
 @import 'responsive/module';
\ No newline at end of file