Updating asss lint stuff with other scss improvements

.sass-lint.yml

@@ -0,0 +1,178 @@
+# sass-lint config generated by make-sass-lint-config v0.1.1
+#
+# The following scss-lint Linters are not yet supported by sass-lint:
+# DisableLinterReason, ElsePlacement, PropertyCount, SelectorDepth
+# SpaceAroundOperator, TrailingWhitespace, UnnecessaryParentReference, Compass::*
+#
+# The following settings/values are unsupported by sass-lint:
+# Linter Indentation, option "allow_non_nested_indentation"
+# Linter Indentation, option "character"
+# Linter NestingDepth, option "ignore_parent_selectors"
+# Linter PropertySortOrder, option "min_properties"
+# Linter PropertySortOrder, option "separate_groups"
+# Linter SpaceBeforeBrace, option "allow_single_line_padding"
+# Linter VendorPrefix, option "identifier_list"
+
+files:
+  include: '**/*.scss'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  bem-depth:
+    - 1
+    - max-depth: 3
+  border-zero:
+    - 1
+    - convention: none
+  brace-style:
+    - 2
+    - allow-single-line: true
+  class-name-format:
+    - 1
+    - convention: hyphenatedbem
+  clean-import-paths:
+    - 1
+    - filename-extension: false
+      leading-underscore: false
+  empty-line-between-blocks:
+    - 2
+    - ignore-single-line-rulesets: true
+  extends-before-declarations: 1
+  extends-before-mixins: 1
+  final-newline:
+    - 1
+    - include: true
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+  function-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  hex-length:
+    - 1
+    - style: short
+  hex-notation:
+    - 1
+    - style: lowercase
+  id-name-format:
+    - 1
+    - convention: hyphenatedbem
+  indentation:
+    - 2
+    - size: 4
+  leading-zero:
+    - 1
+    - include: false
+  mixin-name-format:
+    - 0
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  mixins-before-declarations: 1
+  nesting-depth:
+    - 1
+    - max-depth: 4
+  no-color-keyword: 1
+  no-color-literals: 1
+  no-css-comments: 1
+  no-debug: 1
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 1
+  no-important: 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties:
+    - 1
+    - extra-properties: ['overflow-scrolling', 'font-smoothing']
+  no-qualifying-elements:
+    - 1
+    - allow-element-with-attribute: false
+      allow-element-with-class: false
+      allow-element-with-id: false
+  no-trailing-zero: 1
+  no-transition-all: 0
+  no-url-protocols: 1
+  no-vendor-prefixes:
+    - 1
+    - additional-identifiers: []
+      excluded-identifiers: []
+  placeholder-in-extend: 1
+  placeholder-name-format:
+    - 1
+    - convention: hyphenatedlowercase
+  property-sort-order:
+    - 1
+    - ignore-custom-properties: false
+  property-units:
+    - 1
+    - global:
+        - ch
+        - em
+        - ex
+        - rem
+        - cm
+        - in
+        - mm
+        - pc
+        - pt
+        - px
+        - q
+        - vh
+        - vw
+        - vmin
+        - vmax
+        - deg
+        - grad
+        - rad
+        - turn
+        - ms
+        - s
+        - Hz
+        - kHz
+        - dpi
+        - dpcm
+        - dppx
+        - '%'
+      per-property: {}
+  quotes:
+    - 1
+    - style: single
+  shorthand-values:
+    - 1
+    - allowed-shorthands:
+        - 1
+        - 2
+        - 3
+  single-line-per-selector: 2
+  space-after-bang:
+    - 2
+    - include: false
+  space-after-colon:
+    - 2
+    - include: true
+  space-after-comma:
+    - 1
+    - include: true
+  space-before-bang:
+    - 2
+    - include: true
+  space-before-brace:
+    - 2
+    - include: true
+  space-before-colon: 1
+  space-between-parens:
+    - 2
+    - include: false
+  trailing-semicolon: 2
+  url-quotes: 1
+  variable-for-property:
+    - 0
+    - properties: []
+  variable-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  zero-unit: 1

web/react/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "mattermost",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "autolinker": "0.24.0",
+    "fastclick": "1.0.6",
+    "flux": "2.1.1",
+    "highlight.js": "9.1.0",
+    "keymirror": "0.1.1",
+    "marked": "mattermost/marked#cb85e5cc81bc7937dbb73c3c53d9532b1b97e3ca",
+    "mm-intl": "mattermost/mm-intl#805442fd474fa40cd586ddeda404dbbe8e60626d",
+    "object-assign": "4.0.1",
+    "react": "0.14.3",
+    "react-router": "2.0.0",
+    "twemoji": "1.4.1"
+  },
+  "devDependencies": {
+    "babel-eslint": "5.0.0",
+    "babel-plugin-transform-runtime": "6.5.2",
+    "babel-preset-es2015": "6.5.0",
+    "babel-preset-react": "6.5.0",
+    "babel-preset-stage-0": "6.5.0",
+    "babelify": "7.2.0",
+    "browserify": "13.0.0",
+    "eslint": "2.2.0",
+    "eslint-plugin-react": "4.0.0",
+    "exorcist": "0.4.0",
+    "sass-lint": "^1.5.1",
+    "uglify-js": "2.6.1",
+    "watchify": "3.7.0"
+  },
+  "scripts": {
+    "check": "",
+    "build-libs": "browserify -r crypto -r autolinker -r flux -r keymirror -r marked -r object-assign -r twemoji | uglifyjs -c -m --screw-ie8 > ../static/js/libs.min.js",
+    "start": "watchify --fast -x crypto -x node -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji -o ../static/js/bundle.js -v -d ./**/*.jsx",
+    "build": "browserify -x crypto -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji -d ./**/*.jsx | exorcist ../static/js/inter.js.map > ../static/js/tmp.js && uglifyjs ../static/js/tmp.js --in-source-map \"../static/js/inter.js.map\" --source-map \"../static/js/bundle.min.js.map\" --source-map-url \"/static/js/bundle.min.js.map\" -c -m --screw-ie8 > ../static/js/bundle.min.js && rm ../static/js/tmp.js && rm ../static/js/inter.js.map"
+  },
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015",
+            "react",
+            "stage-0"
+          ],
+          "plugins": [
+            "transform-runtime"
+          ]
+        }
+      ]
+    ]
+  }
+}

webapp/components/center_panel.jsx

@@ -120,7 +120,10 @@ export default class CenterPanel extends React.Component {
                         id='app-content'
                         className='app__content'
                     >
-                        <div id='channel-header'>
+                        <div
+                            id='channel-header'
+                            className='channel-header'
+                        >
                             <ChannelHeader
                                 user={this.state.user}
                             />

webapp/components/more_channels.jsx

@@ -160,7 +160,7 @@ export default class MoreChannels extends React.Component {
 
         return (
             <div
-                className='modal fade'
+                className='modal fade more-channel__modal'
                 id='more_channels'
                 ref='modal'
                 tabIndex='-1'

webapp/components/new_channel_modal.jsx

@@ -38,7 +38,7 @@ class NewChannelModal extends React.Component {
     }
     componentDidMount() {
         if (Utils.isBrowserIE()) {
-            $('body').addClass('browser--IE');
+            $('body').addClass('browser--ie');
         }
     }
     handleSubmit(e) {

webapp/components/popover_list_members.jsx

@@ -158,6 +158,7 @@ export default class PopoverListMembers extends React.Component {
                     <Popover
                         ref='memebersPopover'
                         title={title}
+                        className='member-list__popover'
                         id='member-list-popover'
                     >
                         <div className='more-modal__list'>{popoverHtml}</div>

webapp/components/view_image.jsx

@@ -311,15 +311,15 @@ class ViewImageModal extends React.Component {
             <Modal
                 show={this.props.show}
                 onHide={this.props.onModalDismissed}
-                className='image_modal'
+                className='modal-image'
                 dialogClassName='modal-image'
             >
                 <Modal.Body
-                    modalClassName='image-body'
+                    modalClassName='modal-image__body'
                     onClick={this.props.onModalDismissed}
                 >
                     <div
-                        className={'image-wrapper'}
+                        className={'modal-image__wrapper'}
                         onClick={this.props.onModalDismissed}
                     >
                         <div

webapp/sass/base/_structure.scss

@@ -6,22 +6,24 @@ body {
 }
 
 body {
-    width: 100%;
-    height: 100%;
     background: $bg--gray;
+    height: 100%;
     position: relative;
+    width: 100%;
+}
 
-    &.sticky {
+.sticky {
-        background: $bg--white;
+    background: $white;
 
-        > .container-fluid {
+    > .container-fluid {
-            overflow: auto;
+        overflow: auto;
-        }
+    }
 
-        .inner-wrap {
+    .inner-wrap {
-            > .row.content {
+        > .row {
-                min-height: 100%;
+            &.content {
                 margin-bottom: -89px;
+                min-height: 100%;
             }
         }
     }
@@ -30,9 +32,11 @@ body {
 .inner-wrap {
     height: 100%;
 
-    > .row.main {
+    > .row {
-        height: 100%;
+        &.main {
-        position: relative;
+            height: 100%;
+            position: relative;
+        }
     }
 }
 

webapp/sass/base/_typography.scss

@@ -6,20 +6,20 @@ strong {
 }
 
 a {
+    color: $primary-color;
     cursor: pointer;
     text-decoration: none;
     word-break: break-word;
-    color: $color--primary;
-}
 
-a:focus,
+    &:focus,
-a:hover {
+    &:hover {
-    color: $color--primary--hover;
+        color: $primary-color--hover;
+    }
 }
 
 body {
+    @include font-smoothing;
     font-family: 'Open Sans', sans-serif;
-    -webkit-font-smoothing: antialiased;
 }
 
 .word-break--all {

webapp/sass/components/_alerts.scss

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

webapp/sass/components/_buttons.scss

@@ -5,19 +5,19 @@
     @include border-radius($border-rad);
 
     &.btn-primary {
+        background: $primary-color;
         border-color: transparent;
-        background: $color--primary;
 
         &:hover,
         &:focus,
         &:active {
-            background: $color--primary--hover;
+            background: $primary-color--hover;
         }
     }
 
     &.btn-inactive {
+        background: $light-gray;
         border-color: transparent;
-        background: #707070;
+        color: $white;
-        color: #fff;
     }
 }

webapp/sass/components/_emoticons.scss

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

webapp/sass/components/_error-bar.scss

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

webapp/sass/components/_files.scss

@@ -1,27 +1,31 @@
 @charset 'UTF-8';
 
 .file-preview__container {
-    position: relative;
-    margin: 1px 0 10px;
-    width: 100%;
-    max-height: 100px;
     height: 100px;
-    white-space: nowrap;
+    margin: 1px 0 10px;
+    max-height: 100px;
     overflow-x: auto;
     overflow-y: hidden;
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
 }
 
 .file-preview {
+    @include clearfix;
+    border: 1px solid $light-gray;
     display: inline-block;
-    width: 120px;
     height: 100px;
     margin: 0 0 0 10px;
     position: relative;
-    border: 1px solid #ddd;
+    width: 120px;
-    @include clearfix;
 
-    &:hover .file-preview__remove:after {
+    &:hover {
-        @include opacity(1);
+        .file-preview__remove {
+            &:after {
+                @include opacity(1);
+            }
+        }
     }
 
     &:first-child {
@@ -29,13 +33,13 @@
     }
 
     .spinner {
-        position: absolute;
+        height: 32px;
-        top: 50%;
         left: 50%;
         margin-left: -16px;
         margin-top: -16px;
+        position: absolute;
+        top: 50%;
         width: 32px;
-        height: 32px;
     }
 }
 
@@ -46,14 +50,15 @@
 }
 
 .file-preview__remove {
-    position: absolute;
-    width: 100%;
     height: 100%;
     left: 0;
+    position: absolute;
     top: 0;
+    width: 100%;
 
     &:after {
-        background: rgba(0, 0, 0, .4);
+        @include opacity(0);
+        @include alpha-property(background, $black, .4);
         content: '';
         height: 100%;
         left: 0;
@@ -61,33 +66,31 @@
         position: absolute;
         top: 0;
         width: 100%;
-        @include opacity(0);
     }
 
     i {
-        top: 5px;
+        color: $white;
-        right: 5px;
-        position: absolute;
-        color: #fff;
         cursor: pointer;
-        z-index: 5;
         opacity: inherit;
-        text-shadow: 0 0px 3px #444;
+        position: absolute;
-        text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
+        right: 5px;
+        text-shadow: 0 0 3px alpha-color($black, .7);
+        top: 5px;
+        z-index: 5;
     }
 }
 
 .image-comment {
     background-position: left top;
     background-repeat: no-repeat;
-    width: 300px;
     height: 300px;
+    width: 300px;
 }
 
 
 .file-icon {
-    width: 100%;
     height: 100%;
+    width: 100%;
 
     &.audio {
         @include file-icon('../images/icons/audio.png');
@@ -131,36 +134,30 @@
 }
 
 .post-image__column {
+    border: 1px solid alpha-color($black, .2);
+    float: left;
+    height: 100px;
+    margin: 5px 10px 5px 0;
     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 {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
     height: 100%;
     width: 100%;
-    background-size: 20px 20px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url('~images/load.gif');
 }
 
 .post-image {
-    width: 100%;
+    background-color: $white;
-    height: 100%;
-    background-color: #fff;
     background-repeat: no-repeat;
+    height: 100%;
     overflow: hidden;
     position: relative;
     text-align: center;
+    width: 100%;
 
     &.small {
         background-position: center;
@@ -170,60 +167,59 @@
         background-position: top left;
     }
 
-    .spinner.file__loading {
+    .spinner {
-        position: absolute;
+        .file__loading {
-        left: 50%;
+            left: 50%;
-        margin-left: -16px;
+            margin-left: -16px;
-        top: 50%;
+            margin-top: -16px;
-        margin-top: -16px;
+            position: absolute;
+            top: 50%;
+        }
     }
 
     .file__loaded {
         max-width: initial;
+
         &.landscape,
         &.quadrat {
             height: 100px;
         }
+
         &.portrait {
             width: 120px;
         }
     }
-
-    &:hover .file-playback__controls.stop {
-        @include opacity(1);
-    }
 }
 
 .post-image__thumbnail {
+    @include cursor(zoom-in);
     float: left;
-    width: 50%;
     height: 100%;
-    cursor: zoom-in;
+    width: 50%;
-    cursor: -webkit-zoom-in;
 }
 
 .post-image__details {
-    float: left;
     @include clearfix;
-    word-break: break-word;
+    background: $white;
-    width: 50%;
+    border-left: 1px solid $light-gray;
-    height: 100%;
+    color: alpha-color($black, .8);
-    background: white;
+    float: left;
-    border-left: 1px solid #ddd;
     font-size: 13px;
+    height: 100%;
     padding: 7px;
-    color: #333;
+    width: 50%;
+    word-break: break-word;
 
     .post-image__name {
-        margin-bottom: 3px;
         display: block;
+        margin-bottom: 3px;
     }
 
     .post-image__download {
+        @include opacity(.7);
+        cursor: pointer;
         display: inline-block;
         padding-right: 7px;
-        cursor: pointer;
-        @include opacity(.7);
     }
 
     .post-image__type {
@@ -231,57 +227,55 @@
     }
 
     .post-image__size {
-        margin-left: 4px;
         @include opacity(.6);
+        margin-left: 4px;
     }
 }
 
 .file-details__container {
     @include display-flex;
-    display: -ms-flexbox;
 
     .file-details {
-        width: 320px;
         height: 270px;
         padding: 14px;
         text-align: left;
         vertical-align: top;
+        width: 320px;
 
         .file-details__name {
-            color: #333;
+            color: alpha-color($black, .9);
             font-size: 16px;
         }
 
         .file-details__info {
-            color: grey;
+            color: alpha-color($black, .5);
         }
     }
+
     .file-details__preview {
-        width: 320px;
+        border-right: 1px solid $light-gray;
         height: 270px;
-        border-right: 1px solid #ddd;
         vertical-align: center;
+        width: 320px;
 
         // helper to center the image icon in the preview window
         .file-details__preview-helper {
-            height: 100%;
             display: inline-block;
+            height: 100%;
             vertical-align: middle;
         }
     }
 }
 
 .file-playback__controls {
+    @include single-transition(opacity, .6s);
+    bottom: 0;
+    cursor: pointer;
+    font-size: 22px;
     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;
+    z-index: 2;
 
     &.stop {
         @include opacity(0);
@@ -289,6 +283,6 @@
 }
 
 .view-image__loading {
-    background: black;
+    background: $black;
     min-height: 100px;
 }

webapp/sass/components/_inputs.scss

@@ -15,12 +15,21 @@
     &.no-resize {
         resize: none;
     }
+
+    &[disabled],
+    [readonly] {
+        @include alpha-property(background, $white, .1);
+        color: inherit;
+        cursor: auto;
+    }
 }
 
-.form-control[disabled],
+fieldset {
-.form-control[readonly],
+    &[disabled] {
-fieldset[disabled] .form-control {
+        .form-control {
-    cursor: auto;
+            @include alpha-property(background, $white, .1);
-    background: rgba(#fff, .1);
+            color: inherit;
-    color: inherit;
+            cursor: auto;
+        }
+    }
 }

webapp/sass/components/_links.scss

@@ -1,23 +1,22 @@
 @charset 'UTF-8';
 
 a {
+    color: $primary-color;
     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;
+        color: $primary-color--hover;
+    }
+}
+
+.text-danger {
+    color: desaturate($red, 20%);
+
+    &:hover,
+    &:focus {
+        color: desaturate($red, 20%);
     }
 }

webapp/sass/components/_mentions.scss

@@ -1,24 +1,24 @@
 @charset 'UTF-8';
 
 .mention {
-    color: #fff;
+    @include border-radius(3px);
-    background: $color--primary;
+    background: $primary-color;
+    color: $white;
+    padding-bottom: 2px;
     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;
+    font-size: 13px;
+    height: 36px;
+    line-height: 36px;
+    padding: 2px;
+    position: relative;
     white-space: nowrap;
+    width: 100%;
+    z-index: 101;
 
     .mention-align {
         @include clearfix;
@@ -28,29 +28,29 @@
 }
 
 .mention__image {
-    margin-right: 6px;
+    @include border-radius(32px);
-    height: 32px;
-    width: 32px;
-    line-height: 36px;
     display: block;
     font-size: 20px;
+    height: 32px;
+    line-height: 36px;
+    margin-right: 6px;
     text-align: center;
-    @include border-radius(32px);
+    width: 32px;
 
     .mention--align {
+        display: inline-block;
         max-width: 80%;
         overflow: hidden;
-        display: inline-block;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }
 
 .mention__fullname {
-    color: grey;
+    color: $dark-gray;
     padding-left: 10px;
 }
 
 .mention--highlight {
-    background-color: #fff2bb;
+    background-color: $yellow;
 }

webapp/sass/components/_modal.scss

@@ -1,12 +1,24 @@
 @charset 'UTF-8';
 
-#channel_members_modal .modal-body {
+.browser--ie {
-    min-height: 110px;
+    .modal {
+        .modal-dialog {
+            @include translateY(0);
+        }
+    }
 }
 
 .modal-body {
-    padding: 20px 15px;
     overflow: auto;
+    padding: 20px 15px;
+
+    .edit-modal-body {
+        overflow: visible;
+
+        .suggestion-list__content {
+            max-height: 150px;
+        }
+    }
 }
 
 .more-table {
@@ -15,27 +27,23 @@
 }
 
 .modal {
+    color: alpha-color($black, .9);
     width: 100%;
-    color: #333;
 
-    body.browser--IE & {
+    &.modal-image {
-        .modal-dialog {
+        .modal-backdrop {
-            @include translateY(0);
+            &.in {
-        }
+                @include opacity(.7);
-    }
+            }
-
-    &.image_modal {
-        .modal-backdrop.in {
-            @include opacity(.7);
         }
     }
 
     .custom-textarea {
+        border-color: $light-gray;
         color: inherit;
-        border-color: #ccc;
 
         &:focus {
-            border-color: #ccc;
+            border-color: $light-gray;
             box-shadow: none;
         }
     }
@@ -44,15 +52,15 @@
         font-size: 13px;
 
         &.btn-default {
-            border: none;
             background: transparent;
+            border: none;
         }
     }
 
     .info__label {
         font-weight: 600;
-        text-align: right;
         padding-right: 0;
+        text-align: right;
     }
 
     .team-member-list {
@@ -60,21 +68,21 @@
     }
 
     .remove__member {
+        color: $dark-gray;
         float: right;
-        color: #999;
         font-size: 20px;
         line-height: 0;
         padding: 6px;
 
         &:hover {
-            color: #e56565;
+            color: $red;
         }
     }
 
     .modal-dialog {
-        max-width: 95%;
         margin-left: auto;
         margin-right: auto;
+        max-width: 95%;
     }
 
     .modal-push-down {
@@ -82,51 +90,51 @@
     }
 
     .modal-next-bar {
-        position: absolute;
-        top: 0px;
-        right: 0;
         height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
     }
 
     .modal-header {
-        border-radius: 0;
+        @include border-radius(0);
-        background: $color--primary;
-        color: #fff;
-        padding: 15px 15px 11px;
-        border: 1px solid #ddd;
-        min-height: 56px;
         @include clearfix;
+        background: $primary-color;
+        border: 1px solid $light-gray;
+        color: $white;
+        min-height: 56px;
+        padding: 15px 15px 11px;
 
         .modal-title {
+            color: $bg--gray;
             float: left;
             font-size: 17px;
             line-height: 27px;
-            color: #f4f4f4;
 
             .name {
+                color: $white;
                 font-weight: 600;
-                color: #fff;
             }
         }
 
         .modal-action {
-            padding: 0;
             margin: 0;
+            padding: 0;
         }
 
-        button.close {
+        .close {
-            color: #fff;
             @include opacity(1);
-            z-index: 5;
+            @include single-transition(all, .25s, ease-in);
-            width: 30px;
+            color: $white;
             height: 30px;
             line-height: 30px;
-            @include single-transition(all, .25s, ease-in);
             position: absolute;
             right: 10px;
+            width: 30px;
+            z-index: 5;
 
             &:hover {
-                background: rgba(0, 0, 0, .1);
+                @include alpha-property(background, $black, .1);
             }
 
             span {
@@ -149,8 +157,8 @@
     }
 
     .no-channel-message {
-        text-align: center;
         padding: 2em 1em;
+        text-align: center;
 
         .primary-message {
             font-size: 1.25em;
@@ -168,46 +176,46 @@
     }
 
     .modal-chevron-icon {
-        top: 50%;
         font-size: 120%;
+        top: 50%;
     }
 
     .modal-prev-bar {
-        position: absolute;
-        top: 0px;
-        left: 0;
         height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
     }
 
-    &#more_channels {
+    &.more-channel__modal {
         .modal-body {
             padding: 0;
         }
     }
 
     .modal-image {
-        position: relative;
-        width: 100%;
         height: 100%;
         margin: 0 auto;
         max-width: 100%;
+        position: relative;
+        width: 100%;
 
         .modal-body {
             @include clearfix;
-            height: 100%;
             display: table;
+            height: 100%;
+            max-height: 100%;
             table-layout: fixed;
             width: 100%;
-            max-height: 100%;
         }
 
-        .image-wrapper {
+        .modal-image__wrapper {
-            position: relative;
-            max-width: 90%;
             @include border-radius(3px);
             display: table-cell;
-            vertical-align: middle;
+            max-width: 90%;
+            position: relative;
             text-align: center;
+            vertical-align: middle;
             width: 100%;
 
             &:hover {
@@ -215,33 +223,31 @@
             }
 
             &.default {
-                width: 100%;
                 height: 80%;
+                width: 100%;
             }
 
             audio,
             canvas,
             progress,
             video {
-                max-width: 100%;
-                height: auto;
                 display: block;
+                height: auto;
+                max-width: 100%;
             }
 
             .modal-close {
-                background: url('../images/close.png') no-repeat;
+                @include single-transition(opacity, .6s);
                 @include background-size(100% 100%);
-                width: 37px;
+                @include opacity(0);
+                background-image: url('../images/close.png');
+                cursor: pointer;
                 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;
+                width: 37px;
                 z-index: 9999;
 
                 &.modal-close--show {
@@ -250,99 +256,95 @@
             }
 
             > div {
+                background: $white;
+                display: inline-block;
                 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%;
+                max-width: 100%;
             }
 
-            .spinner.file__loading {
+            .spinner {
-                z-index: 2;
+                .file__loading {
-                position: absolute;
+                    left: 50%;
-                left: 50%;
+                    margin-left: -16px;
-                margin-left: -16px;
+                    margin-top: -16px;
-                top: 50%;
+                    position: absolute;
-                margin-top: -16px;
+                    top: 50%;
+                    z-index: 2;
+                }
             }
         }
 
         .modal-content {
+            background: alpha-color($black, 0);
+            border: none;
             box-shadow: none;
-            background: rgba(0, 0, 0, 0);
-            width: 100%;
             height: 100%;
             padding: 0;
-            border: none;
+            width: 100%;
         }
 
-        .image-body {
+        .modal-image__body {
-            vertical-align: middle;
             display: table-cell;
-            text-align: center;
             height: 100%;
+            overflow: visible;
             padding: 0;
             position: relative;
-            overflow: visible;
+            text-align: center;
+            vertical-align: middle;
         }
 
         .image-control {
-            width: 50px;
+            background: url('../images/prev.png') left no-repeat;
-            height: 45px;
             float: left;
-            background: url(../images/prev.png) left no-repeat;
+            height: 45px;
-            top: 50%;
-            position: relative;
             margin-top: -23px;
+            position: relative;
+            top: 50%;
+            width: 50px;
+
             &.image-next {
+                background: url('../images/next.png') left no-repeat;
                 float: right;
-                background: url(../images/next.png) left no-repeat;
             }
         }
 
         .loader-image {
-            position: absolute;
-            top: 0;
             bottom: 0;
             left: 0;
-            right: 0;
             margin: auto;
+            position: absolute;
+            right: 0;
+            top: 0;
         }
 
         .loader-percent {
-            position: absolute;
-            top: 55px;
             bottom: 0;
-            left: 0;
+            color: $dark-gray;
-            right: 0;
-            margin: auto;
-            color: grey;
             height: 20px;
+            left: 0;
+            margin: auto;
+            position: absolute;
+            right: 0;
+            top: 55px;
         }
 
         .modal-button-bar {
-            position: absolute;
+            @include single-transition(opacity, .6s);
-            bottom: -40px;
-            left: 0px;
-            right: 0px;
-            background-color: #222;
             @include border-radius(0 0 3px 3px);
             @include opacity(0);
-            -webkit-transition: opacity .6s;
+            background-color: $black;
-            -moz-transition: opacity .6s;
+            bottom: -40px;
-            -o-transition: opacity .6s;
+            left: 0;
-            transition: opacity .6s;
             line-height: 40px;
             padding: 0 10px;
+            position: absolute;
+            right: 0;
 
             &.footer--show {
                 @include opacity(1);
@@ -356,10 +358,10 @@
             }
 
             .text {
-                vertical-align: middle;
                 bottom: 0;
-                color: white;
+                color: $white;
                 margin-left: 5px;
+                vertical-align: middle;
             }
 
             .public-link {
@@ -376,11 +378,12 @@
 }
 
 .row--invite {
-    margin-right: 40px;
     @include clearfix;
+    margin-right: 40px;
 
     .col-sm-6 {
         padding: 0 0 0 15px;
+
         &:first-child {
             padding-left: 0;
         }
@@ -389,26 +392,26 @@
 
 .more-modal {
     .user-list {
-        overflow-y: auto;
-        overflow-x: hidden;
         margin-top: 10px;
+        overflow-x: hidden;
+        overflow-y: auto;
         position: relative;
     }
 
     .modal-body {
-        padding: 10px 0 20px;
         overflow-x: hidden;
+        padding: 10px 0 20px;
     }
 
     .filter-row {
-        margin: 10px 0;
         @include clearfix;
+        margin: 10px 0;
     }
 
     .member-count {
-        margin-top: 5px;
-        float: right;
         @include opacity(.8);
+        float: right;
+        margin-top: 5px;
     }
 
     .more-purpose {
@@ -416,21 +419,13 @@
     }
 }
 
-.modal-body.edit-modal-body {
-    overflow: visible;
-
-    .suggestion-list__content {
-        max-height: 150px;
-    }
-}
-
 .more-modal__list {
-    overflow: auto;
     display: flex;
     flex-direction: column;
+    overflow: auto;
 
     .popover & {
-        font-size: 0.95em;
+        font-size: .95em;
 
         .more-modal__row {
             padding: 5px 10px;
@@ -442,9 +437,9 @@
     }
 
     .more-modal__image {
+        @include border-radius(60px);
         flex-grow: 0;
         flex-shrink: 0;
-        @include border-radius(60px);
         margin-right: 8px;
     }
 
@@ -462,33 +457,33 @@
     }
 
     .more-modal__name {
-        font-weight: 600;
         font-size: .95em;
-        white-space: nowrap;
+        font-weight: 600;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .more-modal__description {
         @include opacity(.7);
         display: block;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .more-modal__row {
+        border-bottom: 1px solid;
         display: flex;
         padding: 8px 15px;
-        border-bottom: 1px solid;
     }
 
     p {
+        @include opacity(.8);
         font-size: .9em;
+        margin: 5px 0;
         overflow: hidden;
         text-overflow: ellipsis;
-        @include opacity(.8);
-        margin: 5px 0;
     }
 }
 

webapp/sass/components/_oauth.scss

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

webapp/sass/components/_popover.scss

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

webapp/sass/components/_scrollbar.scss

@@ -1,28 +1,25 @@
 @charset 'UTF-8';
 
-::-webkit-scrollbar
+::-webkit-scrollbar {
-{
+    height: 8px; // for horizontal scrollbars
-  width: 8px;  /* for vertical scrollbars */
+    width: 8px;  // for vertical scrollbars
-  height: 8px; /* for horizontal scrollbars */
 }
 
-::-webkit-scrollbar-track
+::-webkit-scrollbar-track {
-{
+    background: rgba(0, 0, 0, .1);
-  background: rgba(0, 0, 0, 0.1);
 }
 
-::-webkit-scrollbar-thumb
+::-webkit-scrollbar-thumb {
-{
     @include border-radius($border-rad * 2);
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(0, 0, 0, .4);
 }
 
-body{
+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;
+    scrollbar-darkshadow-color: #2D2C4D;
+    scrollbar-face-color: rgba(0, 0, 0, .1);
+    scrollbar-highlight-color: #7D7E94;
+    scrollbar-shadow-color: #2D2C4D;
+    scrollbar-track-color: rgba(0, 0, 0, .1);
 }

webapp/sass/components/_search.scss

@@ -1,15 +1,19 @@
 @charset 'UTF-8';
 
-#channel-header .search-bar__container {
+.channel-header {
-    padding: 0 9px 0 3px;
+    .search-bar__container {
+        padding: 0 9px 0 3px;
+    }
 }
 
 .search-bar__container {
-    padding: 12px 8px 0 0;
     @include flex(0 0 56px);
+    padding: 12px 8px 0 0;
 
-    .sidebar--right.move--left & {
+    .sidebar--right {
-        padding-right: 42px;
+        &.move--left & {
+            padding-right: 42px;
+        }
     }
 }
 
@@ -18,62 +22,60 @@
 }
 
 .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;
+    display: none;
+    line-height: 45px;
+    margin-right: 13px;
+    position: absolute;
+    right: 0;
+    z-index: 5;
 }
 
 .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__collapse {
+    @include single-transition(all, .2s, linear);
+    @include translateX(0);
+    cursor: pointer;
+    display: none;
+    fill: $white;
+    font-size: 35px;
+    left: 0;
+    line-height: 40px;
+    padding-left: 1px;
+    position: absolute;
+    text-align: center;
+    width: 49px;
+    z-index: 5;
+}
+
 .sidebar__search-icon {
+    @include opacity(.5);
+    color: $dark-gray;
+    display: none;
+    font-size: 14px;
+    margin-left: 10px;
     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);
+        border: 1px solid $light-gray;
+        margin: 0;
         width: 300px;
     }
 
@@ -82,21 +84,21 @@
     }
 
     .search-bar {
+        box-shadow: none;
         height: 40px;
         padding-right: 30px;
-        box-shadow: none;
 
         .search-bar__container & {
-            height: 30px;
             border: none;
+            height: 30px;
         }
     }
 
     .glyphicon-refresh-animate {
-        top: 27px;
+        color: $dark-gray;
         position: absolute;
         right: 27px;
-        color: #999;
+        top: 27px;
 
         .search-bar__container & {
             right: 7px;
@@ -106,30 +108,29 @@
 }
 
 .search-items-container {
-    position: relative;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
     @include flex(1 1 auto);
+    -webkit-overflow-scrolling: touch;
     height: calc(100% - 56px);
+    overflow: auto;
     padding-top: 10px;
+    position: relative;
 }
 
 .search-results-header {
+    border-bottom: $border-gray;
+    color: #999999;
     font-size: 1em;
-    text-transform: uppercase;
-    color: #999;
     font-weight: 400;
-    color: #888;
     height: 44px;
     line-height: 44px;
-    padding: 0 10px 0 10px;
+    padding: 0 10px;
-    border-bottom: $border-gray;
+    text-transform: uppercase;
 }
 
 .search-item__container {
     .post {
-        padding: 0 1em 1em;
         margin: 0;
+        padding: 0 1em 1em;
 
         &:first-child {
             border: none;
@@ -137,17 +138,17 @@
 
         .search-channel__name {
             font-weight: 600;
-            margin: 0 0 10px 0;
+            margin: 0 0 10px;
         }
     }
 }
 
 .search-item__jump {
+    @include opacity(.8);
+    font-size: 13px;
     position: absolute;
     right: 0;
-    top: 0px;
+    top: 0;
-    font-size: 13px;
-    @include opacity(.8);
 
     &:hover {
         @include opacity(1);
@@ -155,9 +156,9 @@
 }
 
 .search-item__comment {
+    margin-right: 35px;
     position: absolute;
     right: 0;
-    margin-right: 35px;
     top: 0;
 }
 
@@ -171,5 +172,5 @@
 }
 
 .search-highlight {
-    background-color: #fff2bb;
+    background-color: $yellow;
 }

webapp/sass/components/_suggestion-list.scss

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

webapp/sass/components/_tooltip.scss

@@ -2,9 +2,9 @@
 
 .tooltip {
     .tooltip-inner {
-        word-break: break-word;
         font-size: 13px;
-        padding: 3px 10px 4px;
         font-weight: 500;
+        padding: 3px 10px 4px;
+        word-break: break-word;
     }
 }

webapp/sass/components/_tutorial.scss

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

webapp/sass/components/_videos.scss

@@ -1,65 +1,68 @@
 @charset 'UTF-8';
 
 .video-div {
-    position: relative;
-    max-width: 480px;
     margin-bottom: 8px;
+    max-width: 480px;
+    position: relative;
+
     .video-thumbnail {
-        max-width: 100%;
         height: auto;
+        max-width: 100%;
     }
+
     .block {
-        background-color: rgba(0,0,0,.5);
+        background-color: alpha-color($black, .5);
         border-radius: 10px;
+        height: 150px;
+        left: 50%;
+        margin: -75px 0 0 -100px;
         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;
+    margin: 0;
-    padding: 0px;
+    padding: 0;
 }
 
 .video-title {
     font-size: 15px;
     margin-top: 3px;
 }
+
 .play-button {
-    width: 100px;
+    @include border-radius(14px);
+    border: 4px solid alpha-color($white, .4);
     height: 100px;
     position: absolute;
-    top: 26px;
     right: 51px;
-    border: 4px solid;
+    top: 26px;
-    border-color: rgba(255,255,255,.4);
+    width: 100px;
-    border-radius: 14px;
+
-}
+    span {
-.play-button span {
+        border-bottom: 36px solid transparent;
-    position: absolute;
+        border-left: 60px solid alpha-color($white, .4);
-    top: 10px;
+        border-top: 36px solid transparent;
-    left: 20px;
+        height: 0;
-    width: 0;
+        left: 20px;
-    height: 0;
+        position: absolute;
-    border-top: 36px solid transparent;
+        top: 10px;
-    border-bottom: 36px solid transparent;
+        width: 0;
-    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;
+    margin-bottom: 8px;
+    max-height: 500px;
+    max-width: 450px;
+    position: relative;
+
     &.placeholder {
         height: 500px;
     }

webapp/sass/layout/_content.scss

@@ -15,21 +15,22 @@
 }
 
 .app__content {
-    height: 100%;
-    padding-top: 50px;
-    margin-left: 220px;
-    position: relative;
-    background: #fff;
     @include display-flex;
     @include flex-direction(column);
+    background: $white;
+    height: 100%;
+    margin-left: 220px;
+    padding-top: 50px;
+    position: relative;
 
     .channel__wrap & {
         padding-top: 0;
     }
 }
+
 #post-create {
     @include flex(0 0 auto);
-    background: #fff;
+    background: $white;
     width: 100%;
     z-index: 3;
 }
@@ -37,12 +38,12 @@
 #archive-link-home {
     @include flex(0 0 auto);
     cursor: pointer;
-    padding: 10px 20px;
     font-size: 13px;
+    padding: 10px 20px;
 
     .fa {
-        font-size: 11px;
         @include opacity(.7);
+        font-size: 11px;
     }
 
     a {
@@ -50,36 +51,6 @@
     }
 }
 
-.post-list {
-    .new-messages-hr {
-        margin-top: 5px;
-        margin-bottom: 0px;
-        border: 0;
-        border-top: 1px solid #f80;
-    }
-
-    .new-messages-text {
-        margin-top: 2px;
-        margin-bottom: 5px;
-        color: #f80;
-        text-align: center;
-    }
-}
-
-.new-messages-hr {
-    margin-top: 5px;
-    margin-bottom: 0px;
-    border: 0;
-    border-top: 1px solid #f80;
-}
-
-.new-messages-text {
-    margin-top: 2px;
-    margin-bottom: 5px;
-    color: #f80;
-    text-align: center;
-}
-
 .delete-message-text {
     margin-top: 10px;
 }

webapp/sass/layout/_footer.scss

@@ -1,22 +1,22 @@
 @charset 'UTF-8';
 
 .footer-pane {
-    background: #eee;
+    background: $light-gray;
     padding-bottom: 1em;
 
     .footer-link {
         padding: 0 1.5em;
 
         &.copyright {
-            color: #999;
+            color: $dark-gray;
             padding-right: 0;
         }
     }
 
     .footer-site-name {
-        padding: 1.5em 0 1em;
         font-size: 14px;
         font-weight: bold;
+        padding: 1.5em 0 1em;
         text-transform: uppercase;
     }
 }

webapp/sass/layout/_forms.scss

@@ -6,32 +6,32 @@
     }
 
     .form__label {
-        text-align: left;
-        padding-right: 3px;
-        font-weight: 600;
         font-size: 1.1em;
+        font-weight: 600;
+        padding-right: 3px;
+        text-align: left;
 
         &.light {
-            font-weight: normal;
+            color: $dark-gray;
-            color: #999;
             font-size: 1.05em;
             font-style: italic;
+            font-weight: normal;
             padding-top: 2px;
         }
     }
 
     .input__help {
+        @include opacity(.8);
         color: inherit;
         margin: 10px 0 0 10px;
         word-break: break-word;
-        @include opacity(.8);
 
         &.dark {
             @include opacity(1);
         }
 
         &.error {
-            color: #a94442;
+            color: darken($red, 20%);
         }
     }
 
@@ -49,13 +49,9 @@
 }
 
 .help-block {
+    color: $dark-gray;
     font-size: .95em;
     margin: 10px 0 0;
-    color: #999;
-}
-
-.disabled-input {
-    background-color: #ddd !important;
 }
 
 .form-group {

webapp/sass/layout/_headers.scss

@@ -1,6 +1,6 @@
 @charset 'UTF-8';
 
-#channel-header {
+.channel-header {
     @include flex(0 0 56px);
 }
 
@@ -15,8 +15,8 @@
 }
 
 .header-dropdown__icon {
-    font-size: 11px;
     color: inherit;
+    font-size: 11px;
     top: 3px;
 }
 
@@ -31,12 +31,12 @@
         word-break: break-word;
 
         &.dropdown {
+            float: left;
             max-width: 100%;
             padding-right: 1em;
-            float: left;
 
             .header-dropdown__icon {
-                color: #777;
+                color: $dark-gray;
             }
 
             a {
@@ -49,10 +49,11 @@
         }
 
         &.description {
-            overflow: hidden;
-            text-overflow: ellipsis;
             margin-top: 2px;
             max-height: 45px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
             .markdown-inline-img {
                 max-height: 45px;
             }
@@ -65,14 +66,14 @@
 }
 
 .channel-intro {
+    border-bottom: 1px solid $light-gray;
     margin: 0 auto 35px;
-    padding: 0 1em 5px;
     max-width: 1000px;
-    border-bottom: 1px solid lightgrey;
+    padding: 0 1em 5px;
 
     .intro-links {
-        margin: 0 1.5em 10px 0;
         display: inline-block;
+        margin: 0 1.5em 10px 0;
 
         .fa {
             margin-right: 5px;
@@ -80,28 +81,30 @@
     }
 
     .channel-intro-profile {
-        margin-top: 5px;
         margin-left: 63px;
+        margin-top: 5px;
     }
 
     .channel-intro-img {
         float: left;
+
         img {
             @include border-radius(100px);
         }
     }
 
     .channel-intro__title {
-        font-weight: 600;
         font-size: 20px;
+        font-weight: 600;
         margin-bottom: 15px;
     }
 
     .channel-intro__content {
-        background: #f7f7f7;
-        padding: 10px 15px;
         @include border-radius(3px);
+        background: $bg--gray;
+        padding: 10px 15px;
     }
+
     .channel-intro-text {
         margin-top: 35px;
     }
@@ -111,28 +114,28 @@
 .sidebar--left,
 .sidebar--menu {
     .team__header {
-        position: relative;
-        padding: 9px 10px;
         @include legacy-pie-clearfix;
+        padding: 9px 10px;
+        position: relative;
 
         &:before {
             @include single-transition(all, .05s, linear);
-            content: '';
             background: none;
-            top: 0;
+            content: '';
-            left: 0;
-            width: 100%;
             height: 100%;
+            left: 0;
             position: absolute;
+            top: 0;
+            width: 100%;
         }
 
         &:hover {
             &:before {
-                background: rgba(black, .1);
+                @include alpha-property(background, $black, .1);
             }
 
             .user__name {
-                color: #fff;
+                color: $white;
             }
 
             .navbar-right {
@@ -145,95 +148,88 @@
         .navbar-right {
             font-size: .85em;
             position: absolute;
-            top: 10px;
             right: 22px;
+            top: 10px;
             z-index: 5;
 
             .dropdown-toggle {
+                @include opacity(.8);
                 @include single-transition(all, .1s, linear);
                 padding: 10px;
-                @include opacity(.8);
             }
 
             .dropdown-menu {
-                li a {
+                a {
+                    overflow: hidden;
                     padding: 3px 20px;
                     text-overflow: ellipsis;
-                    overflow: hidden;
                 }
             }
 
             .dropdown__icon {
-                fill: #fff;
+                fill: $white;
             }
         }
 
-        .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);
+            float: left;
+            height: 36px;
             margin-right: 6px;
+            width: 36px;
         }
 
         .header__info {
-            color: #fff;
             @include clearfix;
+            color: $white;
             padding-left: 2px;
-            z-index: 1;
             position: relative;
+            z-index: 1;
         }
 
         .team__name,
         .user__name {
             display: block;
-            font-weight: 600;
             font-size: 16px;
+            font-weight: 600;
             max-width: 85%;
             overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             text-decoration: none;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
         .team__name {
+            float: left;
             line-height: 22px;
             margin-top: -2px;
-            float: left;
         }
 
         .user__name {
             @include single-transition(all, .1s, linear);
+            @include alpha-property(color, $white, .8);
             font-size: 14px;
-            line-height: 18px;
             font-weight: 400;
-            color: #eee;
+            line-height: 18px;
-            color: rgba(#fff, .8);
         }
 
         > .nav {
             > li {
                 > a {
+                    background: none;
                     float: right;
-                    background: none !important;
                     padding: 2px;
+                }
 
-                    &.dropdown-toggle {
+                .dropdown-toggle {
-                        line-height: 1.8;
+                    color: $white;
-                        font-size: 1em;
+                    font-size: 1em;
-                        color: #fff;
+                    line-height: 1.8;
-                    }
                 }
             }
         }
     }
+
     .search__clear {
         display: none;
     }
@@ -250,27 +246,29 @@
 }
 
 .channel-header {
-    width: 100%;
     border-left: none;
     font-size: 14px;
     line-height: 56px;
+    width: 100%;
 
     #member_popover {
-        width: 50px;
+        color: #999999;
-        color: #999;
         cursor: pointer;
+        width: 50px;
 
         .fa {
-            margin-left: 4px;
             font-size: 16px;
+            margin-left: 4px;
         }
     }
 
     &.alt {
         margin: 0;
+
         th {
             font-weight: normal !important;
         }
+
         td {
             border: none;
         }
@@ -278,37 +276,39 @@
 
     th {
         text-align: center;
+
         &:first-child {
-            text-align: left !important;
             border-left: none;
-            width: 100%;
             padding-left: 1em;
+            text-align: left !important;
+            width: 100%;
         }
+
         &:last-child {
             width: 8.9%;
         }
     }
 
     td {
-        padding: 5px 25px 5px !important;
         font-size: 13px;
+        padding: 5px 25px 5px !important;
         text-align: center !important;
+
         &:first-child {
             text-align: left !important;
         }
     }
 
     .heading {
-        margin: 0;
+        color: #555555;
-        color: #555;
+        display: inline-block;
         font-size: 1.3em;
         font-weight: 600;
+        margin: 0 4px 0 0;
+        max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
-        max-width: 100%;
-        display: inline-block;
         vertical-align: middle;
-        margin-right: 4px;
     }
 
     .caret {
@@ -318,13 +318,13 @@
     .more {
         color: #81848b;
         display: inline-block;
-        vertical-align: top;
-        text-transform: capitalize;
         font-size: 13px;
+        text-transform: capitalize;
+        vertical-align: top;
     }
 
     .disabled {
-        color: #999;
+        color: #999999;
     }
 }
 
@@ -342,11 +342,11 @@
 
 .channel-header__links {
     font-family: 'Open Sans', sans-serif;
+    font-size: 22px;
     height: 30px;
-    width: 24px;
     line-height: 26px;
     margin-right: 9px;
-    font-size: 22px;
+    width: 24px;
 
     .channel__wrap.move--left & {
         position: absolute;
@@ -355,14 +355,15 @@
     }
 
     > a {
-        color: inherit;
-        text-decoration: none;
         @include opacity(.6);
         @include single-transition(all, .1s, ease-in);
+        color: inherit;
+        text-decoration: none;
 
         &:hover {
             @include opacity(1);
         }
+
         &:focus {
             color: inherit;
         }

webapp/sass/layout/_markdown.scss

@@ -16,8 +16,8 @@
 #post-list {
     .markdown-inline-img {
         -moz-force-broken-image-icon: 1;
-        max-height: 500px;
         height: 500px;
+        max-height: 500px;
     }
 }
 
@@ -26,33 +26,33 @@
 
     pre {
         margin-bottom: 0;
-        word-break: normal;
         overflow: auto;
+        word-break: normal;
         word-wrap: normal;
     }
 }
 
 .post-body--code__language {
-    -webkit-transform: translate3d(0,0,0);
+    @include translate3d(0, 0, 0);
-    position: absolute;
-    top: 0;
-    right: 0;
-    color: #fff;
     background: #21586d;
-    padding: 4px 10px 5px 10px;
+    color: $white;
     font-size: 13px;
     opacity: .7;
+    padding: 4px 10px 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
     z-index: 5;
 }
 
 .post__body {
     hr {
-        height: 4px;
+        @include opacity(.2);
-        padding: 0;
-        margin: 15px 0 16px;
         background-color: #e7e7e7;
         border: 0 none;
-        @include opacity(.2);
+        height: 4px;
+        margin: 15px 0 16px;
+        padding: 0;
     }
 
     code {
@@ -67,50 +67,53 @@
 }
 
 .markdown__table {
-    background: #fff;
+    background: $white;
     margin: 5px 0 10px;
 
     th,
     td {
-        padding: 6px 13px;
         border: 1px solid #ddd;
+        padding: 6px 13px;
     }
 
     tbody tr {
-        background: #fff;
+        background: $white;
 
         &:nth-child(2n) {
             background-color: #f8f8f8;
         }
     }
 }
+
 blockquote {
     border: none;
-    position: relative;
     font-size: 16px;
-    padding: 10px 10px 10px 38px;
     margin-bottom: 0;
+    padding: 10px 10px 10px 38px;
+    position: relative;
 
     &: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);
+        content: '\f10d';
+        display: inline-block;
+        font-family: FontAwesome;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: normal;
+        left: 8px;
+        position: absolute;
+        text-decoration: inherit;
+        top: 5px;
     }
 }
+
 pre {
     border: none;
+    color: inherit;
     margin: 5px 0;
-    color: inherit;
 }
+
 code {
-    background: #fff;
+    background: $white;
     color: inherit;
 }

webapp/sass/layout/_navigation.scss

@@ -7,14 +7,14 @@
 
 #navbar {
     input {
-        margin: 0px 5px 0px 2px;
+        margin: 0 5px 0 2px;
     }
 
     .navbar-default {
-        position: absolute;
+        background: $primary-color;
         border: none;
         min-height: 45px;
-        background: $color--primary;
+        position: absolute;
 
         .navbar-nav {
             > li {
@@ -30,19 +30,19 @@
         }
 
         .navbar-toggle {
-            width: 43px;
-            float: left;
             border-color: transparent;
             border-radius: 0;
+            fill: $white;
+            float: left;
+            height: 44px;
+            line-height: 48px;
             margin: 0;
             padding: 0 10px;
-            line-height: 48px;
+            width: 43px;
-            height: 44px;
             z-index: 5;
-            fill: #fff;
 
             .icon-bar {
-                background: #fff;
+                background: $white;
                 width: 21px;
             }
 
@@ -51,7 +51,7 @@
             }
 
             .icon--white {
-                color: #fff;
+                color: $white;
             }
 
             &:hover,
@@ -62,16 +62,16 @@
         }
 
         .navbar-brand {
-            padding: 0 .5em;
-            height: 45px;
-            line-height: 45px;
             float: none;
             font-size: 16px;
+            height: 45px;
+            line-height: 45px;
+            padding: 0 .5em;
 
             .heading {
-                margin-right: 3px;
+                color: $white;
                 font-weight: 600;
-                color: #fff;
+                margin-right: 3px;
             }
 
             .header-dropdown__icon {
@@ -79,36 +79,36 @@
             }
 
             .dropdown-toggle {
-                color: #fff;
+                color: $white;
             }
 
             .description {
+                color: $white;
                 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;
+                    background: url('../images/info__icon.png');
-                    top: -1px;
-                    position: relative;
                     cursor: pointer;
+                    height: 19px;
+                    position: relative;
+                    top: -1px;
+                    vertical-align: middle;
+                    width: 19px;
                 }
             }
         }
     }
 
     .sidebar-channel {
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
 
         span {
-            white-space: nowrap;
             margin-left: 2px;
+            white-space: nowrap;
         }
     }
 
@@ -117,11 +117,13 @@
     }
 
     .more-channel-table {
-        width: 100%;
         border: 1px solid #dbdbdc;
+        width: 100%;
+
         td {
             padding: 7px;
         }
+
         button {
             width: 110px;
         }
@@ -129,9 +131,9 @@
 }
 
 .badge-notify {
-    background: red;
+    background: $red;
-    position: absolute;
     left: 4px;
+    position: absolute;
     top: 3px;
     z-index: 100;
 }

webapp/sass/layout/_post-right.scss

@@ -27,8 +27,8 @@
 
     .post {
         &.post--root {
-            padding-bottom: 1.2em;
             border-bottom: 1px solid #ddd;
+            padding-bottom: 1.2em;
 
             .post__body {
                 background: transparent !important;
@@ -37,8 +37,8 @@
 
         .post__header {
             .col__reply {
-                top: 0;
                 text-align: right;
+                top: 0;
             }
         }
 
@@ -48,13 +48,13 @@
     }
 
     hr {
-        margin-bottom: 0;
         border: none;
+        margin-bottom: 0;
     }
 
     .post-create__container {
-        width: 100%;
         margin-top: 10px;
+        width: 100%;
 
         .textarea-wrapper {
             min-height: 100px;
@@ -70,48 +70,46 @@
 
         .msg-typing {
             @include opacity(.7);
-            float: left;
-            margin-top: 3px;
-            font-size: 13px;
-            line-height: 20px;
-            min-width: 1px;
             display: block;
+            float: left;
+            font-size: 13px;
             height: 20px;
+            line-height: 20px;
+            margin-top: 3px;
             max-width: 230px;
+            min-width: 1px;
         }
 
         .post-create-footer {
-            width: 100%;
             padding: 5px 0 10px;
+            width: 100%;
         }
 
         .post-right-comments-upload-in-progress {
-            padding: 6px 0;
             color: #a8adb7;
             margin-right: 10px;
+            padding: 6px 0;
         }
     }
 }
+
 .post-right-header {
-    font-size: 1em;
+    border-bottom: $border-gray;
-    text-transform: uppercase;
     color: #999;
+    font-size: 1em;
     font-weight: 400;
-    color: #888;
     height: 39px;
     padding: 10px 10px 0 15px;
-    border-bottom: $border-gray;
+    text-transform: uppercase;
 }
 
 .post-right-root-container {
+    border-bottom: $border-gray;
     padding: 5px 10px;
-    border-bottom: $border-gray;
-}
 
-.post-right-root-container {
     ul {
-        padding-left: 0;
         margin-bottom: 2px;
+        padding-left: 0;
     }
 }
 
@@ -131,19 +129,19 @@
 }
 
 .post-right-create-comment-container {
-    padding: 5px;
-    margin-bottom: 18px;
-    position: absolute;
     bottom: 0;
     left: 0;
+    margin-bottom: 18px;
+    padding: 5px;
+    position: absolute;
     width: 100%;
 }
 
 .post-right__scroll {
-    position: relative;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
     @include flex(1 1 auto);
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    position: relative;
 
     .file-preview__container {
         margin-top: 5px;

webapp/sass/layout/_sidebar-left.scss

@@ -1,86 +1,97 @@
 @charset 'UTF-8';
 
 .sidebar--left {
+    background: #fafafa;
+    border-right: $border-gray;
+    height: 100%;
+    left: 0;
     position: absolute;
     width: 220px;
-    left: 0;
-    height: 100%;
-    border-right: $border-gray;
-    background: #fafafa;
     z-index: 5;
 
     &.sidebar--padded {
         padding-top: 44px;
     }
+
     .dropdown-menu {
         max-height: 400px;
+        max-width: 200px;
         overflow-x: hidden;
         overflow-y: auto;
-        max-width: 200px;
         width: 200px;
     }
+
     .search__form {
+        display: none;
         margin: 0;
         padding: 1em 1em 0;
-        display: none;
     }
+
     .badge {
-        background-color: $color--primary;
+        background-color: $primary-color;
         position: absolute;
         right: 10px;
         top: 5px;
     }
+
     .status {
+        display: inline-block;
+        margin-right: 6px;
         position: relative;
         top: 1px;
-        margin-right: 6px;
         width: 12px;
-        display: inline-block;
+
         svg {
             max-height: 14px;
         }
+
         i,
         path,
         ellipse {
             @include opacity(.5);
+
             &.online--icon,
             &.away--icon {
                 @include opacity(1);
             }
         }
+
         .fa-lock {
             margin-left: 1px;
         }
+
         .fa-globe {
-            top: -1px;
             position: relative;
+            top: -1px;
         }
     }
+
     .nav-pills__container {
-        height: calc(100% - 80px);
-        position: relative;
-        overflow: auto;
         -webkit-overflow-scrolling: touch;
+        height: calc(100% - 80px);
+        overflow: auto;
+        position: relative;
     }
 
     .nav-pills__unread-indicator {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 72%;
-        color: #fff;
-        background: #2389d7;
         @include border-radius(50px);
+        background: #2389d7;
+        color: #ffffff;
+        font-size: 13.5px;
+        left: 0;
         margin: 0 auto;
         padding: 3px 0 4px;
-        font-size: 13.5px;
+        position: absolute;
+        right: 0;
         text-align: center;
+        width: 72%;
         z-index: 1;
     }
 
     .nav-pills__unread-indicator-top {
         top: 66px;
     }
+
     .nav-pills__unread-indicator-bottom {
         bottom: 20px;
     }
@@ -91,71 +102,83 @@
                 margin: 0;
             }
         }
+
         li {
             > h4 {
+                color: #aaaaaa;
                 font-size: 1em;
-                text-transform: uppercase;
-                margin: 1.1em 0 .5em;
                 font-weight: 400;
-                color: #aaa;
                 letter-spacing: -.3px;
+                margin: 1.1em 0 .5em;
                 padding: 0 10px 0 15px;
+                text-transform: uppercase;
             }
+
             > a {
-                padding: 3px 10px 3px 25px;
-                line-height: 1.5;
                 border-radius: 0;
-                white-space: nowrap;
+                line-height: 1.5;
                 overflow: hidden;
+                padding: 3px 10px 3px 25px;
                 text-overflow: ellipsis;
+                white-space: nowrap;
+
                 &.has-badge {
                     padding-right: 30px;
                 }
+
                 &.has-close {
                     padding-right: 30px;
+
                     &:hover {
                         .btn-close {
-                            display: block;
                             @include opacity(.8);
+                            display: block;
                         }
                     }
+
                     .btn-close {
+                        @include opacity(0);
+                        display: none;
                         font-family: 'Open Sans', sans-serif;
+                        font-size: 20px;
+                        font-weight: 600;
                         position: absolute;
                         right: 15px;
                         top: -1px;
-                        font-size: 20px;
+
-                        font-weight: 600;
-                        @include opacity(0);
-                        display: none;
                         &:hover {
                             @include opacity(1);
                         }
                     }
                 }
+
                 &.nav-more {
                     text-decoration: underline;
                 }
+
                 &.unread-title {
                     font-weight: 600;
                 }
+
             }
+
             &.active {
                 a {
                     &:before {
+                        background: $black;
                         content: '';
+                        height: 100%;
+                        left: 0;
                         position: absolute;
                         top: 0;
-                        left: 0;
                         width: 5px;
-                        height: 100%;
-                        background: #000;
                     }
                 }
+
                 a,
                 a:hover,
                 a:focus {
-                    background-color: rgba(black, .1);
+                    @include alpha-property(background-color, $black, .1);
                     border-radius: 0;
                     font-weight: 400;
                     position: relative;
@@ -163,35 +186,37 @@
             }
         }
     }
+
     .modal-title {
         line-height: 2em;
     }
 
     .add-channel-btn {
+        color: #aaaaaa;
         float: right;
-        outline: none;
+        font-size: 22px;
+        font-weight: 700;
+        line-height: 18px;
         margin: -2px 0 0 0;
-        color: #aaa;
+        outline: none;
         padding: 0 5px;
         text-decoration: none;
-        font-size: 22px;
+
-        line-height: 18px;
-        font-weight: 700;
         &:hover {
-            color: #666;
+            color: #666666;
         }
     }
 }
 
 .channel-loading-gif {
     height: 15px;
-    width: 15px;
     margin-top: 2px;
+    width: 15px;
 }
 
 .join-channel-loading-gif {
-    margin-top: 5px;
-    margin-left: 10px;
     height: 25px;
+    margin-left: 10px;
+    margin-top: 5px;
     width: 25px;
 }

webapp/sass/layout/_sidebar-menu.scss

@@ -1,69 +1,80 @@
 @charset 'UTF-8';
 
 .sidebar--menu {
-    position: absolute;
-    width: 220px;
-    right: 0;
-    height: 100%;
-    border-right: $border-gray;
-    padding: 0 0 2em 0;
     background: #fafafa;
+    border-right: $border-gray;
     display: none;
+    height: 100%;
+    padding: 0 0 2em;
+    position: absolute;
+    right: 0;
+    width: 220px;
+
     .nav-pills__container {
         padding-top: 5px;
     }
+
     .team__header {
+        @include legacy-pie-clearfix;
         display: none;
         padding: 0 15px;
-        @include legacy-pie-clearfix;
+
         a {
-            color: #fff;
+            color: $white;
         }
+
         .navbar-right {
             font-size: .85em;
             margin: 16px -5px 0;
+
             .dropdown-toggle {
                 padding: 0 10px;
             }
+
             .dropdown-menu {
                 li a {
-                    padding: 3 20px;
                     color: #555;
+                    padding: 3 20px;
                 }
             }
+
             .dropdown__icon {
-                width: 4px;
-                height: 16px;
                 @include background-size(100% 100%);
+                background: url('../images/dropdown-icon.png');
                 display: inline-block;
+                height: 16px;
+                width: 4px;
             }
         }
+
         .team__name {
             float: left;
-            line-height: 50px;
-            font-weight: 600;
             font-size: 1.2em;
+            font-weight: 600;
+            line-height: 50px;
             max-width: 80%;
             overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             text-decoration: none;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
+
     .nav {
         > li {
             > a {
-                font-size: 15px;
                 background: none !important;
                 color: inherit;
+                font-size: 15px;
                 line-height: 40px;
                 padding: 0 15px;
+
                 .fa,
                 .glyphicon {
-                    width: 25px;
-                    text-align: center;
                     left: -5px;
                     position: relative;
+                    text-align: center;
+                    width: 25px;
                 }
             }
         }

webapp/sass/layout/_sidebar-right.scss

@@ -1,13 +1,13 @@
 @charset 'UTF-8';
 
 .sidebar--right {
-    position: fixed;
-    width: 400px;
-    height: 100%;
-    right: 0px;
-    padding: 0;
-    background: #fff;
     @include translateX(400px);
+    background: $white;
+    height: 100%;
+    padding: 0;
+    position: fixed;
+    right: 0;
+    width: 400px;
 
     .post-body {
         img {
@@ -26,39 +26,39 @@
     }
 
     .sidebar--right__content {
-        height: 100%;
         @include display-flex;
         @include flex-direction(column);
+        height: 100%;
     }
 
     .sidebar--right__back {
-        color: inherit;
         @include opacity(.8);
-        width: 30px;
+        color: inherit;
-        text-align: center;
-        margin: 0 0 0 -14px;
-        font-size: 13px;
         display: inline-block;
+        font-size: 13px;
+        margin: 0 0 0 -14px;
+        text-align: center;
+        width: 30px;
     }
 
     .sidebar-right__body {
+        @include border-radius(2px 0 0 0);
+        @include display-flex;
         @include flex(1 1 auto);
+        @include flex-direction(column);
         border-left: $border-gray;
         border-top: $border-gray;
-        @include display-flex;
-        @include flex-direction(column);
         height: calc(100% - 56px);
-        @include border-radius(2px 0 0 0);
     }
 
     .sidebar__overlay {
-        width: 100%;
-        height: 100%;
-        background-color: yellow;
         @include opacity(.1);
-        position: absolute;
+        background-color: $yellow;
-        z-index: 5;
+        height: 100%;
         pointer-events: none;
+        position: absolute;
+        width: 100%;
+        z-index: 5;
     }
 
     .input-group {
@@ -66,17 +66,17 @@
     }
 
     .sidebar--right__close {
-        margin: 11px 0 0 0;
-        width: 22px;
-        height: 22px;
-        opacity: .5;
-        font-size: 22px;
-        line-height: 0;
-        background: none;
-        float: right;
-        outline: none;
-        border: none;
         @include single-transition(all, .2s, ease-in);
+        background: none;
+        border: none;
+        float: right;
+        font-size: 22px;
+        height: 22px;
+        line-height: 0;
+        margin: 11px 0 0;
+        opacity: .5;
+        outline: none;
+        width: 22px;
 
         &:hover,
         &:active {
@@ -90,14 +90,14 @@
     }
 
     .sidebar--right__header {
-        font-size: 1em;
-        text-transform: uppercase;
-        color: inherit;
-        height: 44px;
-        padding: 0 1em;
-        line-height: 44px;
         @include flex(0 0 44px);
         border-bottom: $border-gray;
+        color: inherit;
+        font-size: 1em;
+        height: 44px;
+        line-height: 44px;
+        padding: 0 1em;
+        text-transform: uppercase;
     }
 
     .sidebar--right__subheader {

webapp/sass/layout/_webhooks.scss

@@ -1,11 +1,11 @@
 @charset 'UTF-8';
 
 .webhooks__container {
-    background: rgba(black, .1);
-    border: 1px solid;
     @include border-radius(3px);
-    padding: 0 13px 15px;
+    @include alpha-property(background, $black, .1);
+    border: 1px solid;
     margin-top: 10px;
+    padding: 0 13px 15px;
 }
 
 .webhook__item {
@@ -19,16 +19,16 @@
     }
 
     .webhook__remove {
-        position: absolute;
+        color: #e05f5d;
-        right: -7px;
-        top: 8px;
-        width: 30px;
-        height: 30px;
         font-size: 22px;
         font-weight: bold;
+        height: 30px;
+        position: absolute;
+        right: -7px;
         text-align: center;
         text-decoration: none;
-        color: #e05f5d;
+        top: 8px;
+        width: 30px;
     }
 
     .webhook__url {

webapp/sass/responsive/_desktop.scss

@@ -32,21 +32,23 @@
     .tip-overlay {
         &.tip-overlay--chat {
             margin: -10px 0 0 -10px;
+
             .arrow {
-                right: 15px;
                 left: auto;
+                right: 15px;
             }
         }
     }
+
     .inner-wrap {
         &.move--left {
             .file-overlay {
                 font-size: em(18px);
 
                 .overlay__circle {
-                    width: 300px;
                     height: 300px;
                     margin: -150px 0 0 -150px;
+                    width: 300px;
                 }
 
                 .overlay__files {
@@ -62,4 +64,4 @@
     .modal-lg {
         width: 700px;
     }
-}
+}

webapp/sass/responsive/_mobile.scss

@@ -519,7 +519,7 @@
     .search-bar__container {
         padding: 0;
         @include flex(0 0 44px);
-        background: $color--primary;
+        background: $primary-color;
         color: #fff;
 
         &.focused {
@@ -756,9 +756,11 @@
     .app__content {
         padding-top: 45px;
         margin: 0;
+
         .channel__wrap & {
             padding-top: 45px;
         }
+
         #channel-header {
             display: none;
         }
@@ -775,11 +777,6 @@
     .post-comments {
         padding: 9px 21px 10px 10px !important;
     }
-
-    .post-image__column .post-image .file-playback__controls.stop,
-    .image-wrapper > a .file-playback__controls.stop {
-        @include opacity(1);
-    }
 }
 
 @media screen and (max-width: 640px) {

webapp/sass/responsive/_tablet.scss

@@ -2,9 +2,9 @@
 
 @media screen and (max-width: 960px) {
     .sidebar--right {
-        z-index: 5;
-        @include translateX(100%);
         @include single-transition(all, .5s, ease);
+        @include translateX(100%);
+        z-index: 5;
 
         &.move--left {
             @include translateX(0);
@@ -32,4 +32,4 @@
     .second-bar {
         display: none;
     }
-}
+}

webapp/sass/routes/_access-history.scss

@@ -2,9 +2,9 @@
 
 .access-history__table {
     display: table;
-    width: 100%;
-    padding-top: 15px;
     line-height: 1.6;
+    padding-top: 15px;
+    width: 100%;
 
     &:first-child {
         padding: 0;
@@ -16,8 +16,8 @@
     }
 
     .access__date {
-        font-weight: 600;
         font-size: 15px;
+        font-weight: 600;
         width: 190px;
     }
 

webapp/sass/routes/_activity-log.scss

@@ -1,36 +1,27 @@
 @charset 'UTF-8';
 
-@keyframes highlight {
-    from {
-        background: rgba(yellow, .5);
-    }
-    to {
-        background: none;
-    }
-}
-
 .animation--highlight {
     &:before {
-        content: '';
         animation: highlight 1.5s ease;
+        content: '';
+        height: 100%;
+        left: 0;
         position: absolute;
         top: 0;
-        left: 0;
         width: 100%;
-        height: 100%;
     }
 }
 
 .activity-log__table {
+    border-top: 1px solid $light-gray;
     display: table;
-    width: 100%;
     line-height: 1.8;
-    border-top: 1px solid #ddd;
     padding: 15px 0;
+    width: 100%;
 
     &:first-child {
-        padding-top: 0;
         border: none;
+        padding-top: 0;
     }
 
     > div {
@@ -49,6 +40,7 @@
     .report__platform {
         font-size: 15px;
         font-weight: 600;
+
         .fa {
             margin-right: 6px;
         }

webapp/sass/routes/_admin-console.scss

@@ -15,26 +15,25 @@
     }
 
     h3 {
-        font-weight: 600;
         border-bottom: 1px solid #ddd;
-        padding-bottom: .5em;
+        font-weight: 600;
         margin: 1em 0;
+        padding-bottom: .5em;
     }
 
     .table {
-        background: #fff;
+        background: $white;
     }
 
     .form-control {
-        background-color: #fff;
+        background-color: $white;
         border: 1px solid #ccc;
         color: #555;
 
         &:focus {
+            @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6));
             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);
         }
     }
 
@@ -42,7 +41,7 @@
         color: #333;
 
         &.btn-primary {
-            background: #2389d7;
+            background: $primary-color;
 
             &:hover,
             &:focus,
@@ -53,7 +52,7 @@
     }
 
     .dropdown-menu {
-        background: #fff;
+        background: $white;
         border: 1px solid rgba(0,0,0,.15);
         color: inherit;
     }
@@ -86,38 +85,38 @@
 
                     > h4 {
                         background: #333;
-                        padding: 10px 10px;
                         margin: 1px 0 0;
+                        padding: 10px;
 
                         .menu-icon--right {
-                            top: 6px;
                             right: 12px;
+                            top: 6px;
                         }
                     }
                 }
 
                 .menu-icon--right {
-                    position: absolute;
-                    right: 10px;
-                    top: 3px;
                     font-size: 18px;
                     font-weight: 600;
-                    width: 20px;
                     height: 20px;
                     line-height: 20px;
+                    position: absolute;
+                    right: 10px;
                     text-align: center;
+                    top: 3px;
+                    width: 20px;
 
                     .fa {
+                        color: $white;
                         font-size: 13px;
-                        right: -2px;
                         position: relative;
-                        color: #fff;
+                        right: -2px;
                     }
                 }
 
                 &.nav__sub-menu {
+                    @include font-smoothing(initial);
                     background: #111;
-                    -webkit-font-smoothing: auto;
 
                     &.padded {
                         padding: 5px 0;
@@ -125,30 +124,31 @@
 
                     li {
                         > a {
-                            font-size: 13px;
-                            padding: 5px 35px 5px 15px;
                             background: transparent;
                             color: #bbb;
+                            font-size: 13px;
+                            padding: 5px 35px 5px 15px;
 
                             &:hover {
-                                color: lighten($color--primary, 10);
+                                color: lighten($primary-color, 10);
                             }
 
                             &.active {
-                                color: #fff;
+                                color: $white;
                                 font-weight: 600;
                             }
                         }
 
                         .nav-more {
-                            font-size: 13px;
-                            padding: 5px 15px;
                             background: transparent;
                             color: #bbb;
-                            display: block;
                             cursor: pointer;
+                            display: block;
+                            font-size: 13px;
+                            padding: 5px 15px;
+
                             &:hover {
-                                color: lighten($color--primary, 10);
+                                color: lighten($primary-color, 10);
                             }
                         }
                     }
@@ -166,23 +166,23 @@
     }
 
     .log__panel {
-        overflow: scroll;
-        width: 100%;
-        height: 800px;
-        border: 1px solid #ddd;
-        margin-top: 10px;
-        padding: 5px;
         background-color: white;
+        border: 1px solid #ddd;
+        height: 800px;
+        margin-top: 10px;
+        overflow: scroll;
+        padding: 5px;
+        width: 100%;
     }
 
     .app__content {
         color: #333;
 
         &.admin {
-            overflow: auto;
             background-color: #f1f1f1;
-            padding: 0 20px 20px;
             min-height: 600px;
+            overflow: auto;
+            padding: 0 20px 20px;
         }
 
         .wrapper--fixed {
@@ -193,9 +193,9 @@
             margin-top: 40px;
 
             .control-label {
-                text-align: left;
-                padding-right: 0;
                 font-weight: 600;
+                padding-right: 0;
+                text-align: left;
             }
 
             .form-group {
@@ -203,22 +203,25 @@
             }
 
             .file__upload {
-                position: relative;
-                margin: 0 10px 10px 0;
                 display: inline-block;
+                margin: 0 10px 10px 0;
+                position: relative;
 
                 input {
-                    position: absolute;
                     @include opacity(0);
-                    width: 100%;
                     height: 100%;
-                    z-index: 5;
-                    top: 0;
                     left: 0;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                    z-index: 5;
                 }
             }
 
             .help-text {
+                color: #777;
+                margin: 10px 0 0 15px;
+
                 &.no-margin {
                     margin: 0;
                 }
@@ -228,9 +231,6 @@
                     padding-left: 23px;
                 }
 
-                margin: 10px 0 0 15px;
-                color: #777;
-
                 .help-link {
                     margin-right: 5px;
                 }
@@ -242,10 +242,10 @@
 
             .alert {
                 display: inline-block;
-                padding: 5px 7px;
                 margin: 1em 0 0;
-                top: 1px;
+                padding: 5px 7px;
                 position: relative;
+                top: 1px;
 
                 .fa {
                     margin-right: 5px;
@@ -254,11 +254,11 @@
         }
 
         .banner {
-            background: #fff;
+            background: $white;
             border: 1px solid #ddd;
-            padding: .7em 1.5em;
             font-size: .95em;
             margin: 2em 0;
+            padding: .7em 1.5em;
 
             .banner__heading {
                 font-size: 1.5em;
@@ -275,19 +275,19 @@
 
         .popover {
             border-radius: 3px;
-            width: 100%;
             font-size: .95em;
+            width: 100%;
         }
 
         .panel {
-            border: none;
             background-color: transparent;
+            border: none;
         }
 
         .panel-default {
             > .panel-heading {
-                padding: 10px 0;
                 background-color: transparent;
+                padding: 10px 0;
             }
 
             .panel-body {
@@ -304,9 +304,9 @@
             line-height: 1.5;
 
             a {
-                text-decoration: none;
-                display: block;
                 @include clearfix;
+                display: block;
+                text-decoration: none;
 
                 &.collapsed {
                     .fa-minus {
@@ -319,10 +319,10 @@
                 }
 
                 .fa {
-                    font-size: 18px;
-                    float: right;
-                    margin-top: 8px;
                     color: #aaa;
+                    float: right;
+                    font-size: 18px;
+                    margin-top: 8px;
                 }
 
                 .fa-plus {

webapp/sass/routes/_docs.scss

@@ -5,15 +5,15 @@
     padding-bottom: 20px;
 
     > div {
-        width: 1170px;
         margin: 0 auto;
-        padding: 0 15px;
         max-width: 100%;
+        padding: 0 15px;
+        width: 1170px;
     }
 
     h1.markdown__heading {
         border-bottom: 1px solid #ddd;
-        padding-bottom: 1rem;
         margin: 1em 0 1em;
+        padding-bottom: 1rem;
     }
 }

webapp/sass/routes/_error-page.scss

@@ -8,23 +8,23 @@ body {
         }
 
         .error__container {
-            max-width: 800px;
+            color: #555;
-            margin: 0 auto;
             display: table-cell;
-            vertical-align: top;
+            margin: 0 auto;
+            max-width: 800px;
             padding: 5em 0;
             text-align: left;
-            color: #555;
+            vertical-align: top;
         }
 
         .error__icon {
-            font-size: 4em;
             color: #ccc;
+            font-size: 4em;
         }
 
         h2 {
-            font-weight: 600;
             font-size: 1.5em;
+            font-weight: 600;
             margin: .8em 0 .5em;
         }
 

webapp/sass/routes/_loading.scss

@@ -4,32 +4,32 @@
 
 .loading-screen {
     display: table;
-    width: 100%;
     height: 100%;
     padding: 60px;
     text-align: center;
+    width: 100%;
 
     .loading__content {
         display: table-cell;
-        vertical-align: middle;
         font-size: 0;
+        vertical-align: middle;
 
         h3 {
+            display: inline-block;
             font-size: 16px;
             font-weight: 400;
-            margin: 0 .2em 0;
+            margin: 0 .2em;
-            display: inline-block;
         }
 
         .round {
-            background-color: #444;
+            @include animation(move .75s infinite linear);
-            width: 4px;
+            @include border-radius(10px);
-            height: 4px;
+            background-color: #444444;
             display: inline-block;
+            height: 4px;
             margin: 0 2px;
             opacity: .1;
-            @include border-radius(10px);
+            width: 4px;
-            @include animation(move .75s infinite linear);
         }
 
         @for $i from 1 through 3 {
@@ -42,6 +42,7 @@
             from {
                 opacity: 1;
             }
+
             to {
                 opacity: .1;
             }

webapp/sass/routes/_settings.scss

@@ -2,41 +2,47 @@
 
 .user-settings {
     min-height: 300px;
+
     .table-responsive {
-        max-width: 560px;
         max-height: 300px;
+        max-width: 560px;
     }
 }
 
 .modal {
     .settings-modal {
         width: 800px;
+
         .modal-back {
-            width: 50px;
-            height: 40px;
-            top: 12px;
             font-size: 27px;
             font-weight: normal;
+            height: 40px;
+            left: 0;
             line-height: 32px;
             position: absolute;
-            left: 0;
             text-align: center;
+            top: 12px;
+            width: 50px;
+
             .fa {
+                height: 100%;
+                left: 0;
                 line-height: inherit;
                 position: absolute;
                 width: 100%;
-                height: 100%;
-                left: 0;
             }
         }
+
         .modal-body {
-            padding: 0;
             margin: 0 auto;
             min-height: calc(100% - 62px);
+            padding: 0;
         }
+
         li {
             list-style: none;
         }
+
         label {
             font-weight: 600;
         }
@@ -44,87 +50,110 @@
         .no-padding--left {
             padding-left: 0;
         }
+
         .padding-top {
             padding-top: 7px;
+
             &.x2 {
                 padding-top: 14px;
             }
+
             &.x3 {
                 padding-top: 21px;
             }
         }
+
         .padding-bottom {
             padding-bottom: 7px;
+
             &.x2 {
                 padding-bottom: 14px;
             }
+
             &.x3 {
                 padding-bottom: 21px;
             }
+
             .control-label {
                 font-weight: 600;
+
                 &.text-left {
                     text-align: left;
                 }
             }
         }
+
         .profile-img {
-            width: 128px;
             height: 128px;
+            width: 128px;
         }
+
         .settings-table {
-            max-width: 1000px;
-            margin: 0 auto;
             display: table;
+            margin: 0 auto;
+            max-width: 1000px;
             table-layout: fixed;
             width: 100%;
+
             > div {
                 display: table-cell;
                 vertical-align: top;
             }
+
             .nav {
                 position: fixed;
                 width: 179px;
+
                 &.position--top {
                     top: 57px;
                 }
             }
+
             .security-links {
                 margin-right: 20px;
+
                 .fa {
                     margin-right: 6px;
                 }
             }
+
             .settings-links {
                 width: 180px;
             }
+
             .settings-content {
-                padding: 0px 20px 30px;
+                padding: 0 20px 30px;
+
                 .modal-header {
                     display: none;
                 }
+
                 .section-min {
                     padding: 1em 0;
                     margin-bottom: 0;
                     cursor: pointer;
                     position: relative;
                     @include clearfix;
+
                     &:hover {
                         background: #f9f9f9;
                     }
+
                     &:hover .fa {
                         display: inline-block;
                     }
+
                     &:hover .section-edit {
                         text-decoration: underline;
                     }
                 }
 
                 .section-max {
-                    background: rgba(black, .05);
-                    padding: 1em 0 1.3em;
-                    margin-bottom: 0;
                     @include clearfix;
+                    @include alpha-property(background, $black, .05);
+                    margin-bottom: 0;
+                    padding: 1em 0 1.3em;
+
                     .section-title {
                         margin-bottom: 10px;
                     }
@@ -136,50 +165,54 @@
                             padding: 4px 5px;
                             width: 40px;
                         }
+
                         img {
                             border: 1px solid rgba(black, .15);
                             width: 29px;
                         }
                     }
+
                     .group--code {
+
                         select {
+                            @include appearance(none);
+                            appearance: none;
                             padding-right: 25px;
+
+                            &::ms-expand {
+                                display: none;
+                            }
                         }
-                        select::-ms-expand {
+
-                            display: none;
-                        }
                         &:before {
-                            pointer-events: none;
+                            @include font-smoothing;
-                            position: absolute;
-                            top: 11px;
-                            right: 50px;
-                            z-index: 5;
                             content: '\f0d7';
                             display: inline-block;
                             font: normal normal normal 14px/1 FontAwesome;
-                            font-size: inherit;
+                            pointer-events: none;
+                            position: absolute;
+                            right: 50px;
                             text-rendering: auto;
-                            -webkit-font-smoothing: antialiased;
+                            top: 11px;
-                            -moz-osx-font-smoothing: grayscale;
+                            z-index: 5;
-                        }
-                        select {
-                            -moz-appearance: none;
-                            -webkit-appearance: none;
-                            appearance: none;
                         }
                     }
+
                     .premade-themes {
                         margin-bottom: 10px;
+
                         .theme-label {
                             font-weight: 400;
                             margin-top: 5px;
                         }
+
                         img {
                             border: 3px solid transparent;
                         }
+
                         .active {
                             img {
-                                border-color: $color--primary;
+                                border-color: $primary-color;
                             }
                         }
                     }
@@ -197,12 +230,12 @@
                     }
 
                     .theme-elements__header {
-                        margin: 10px 20px 0px 0;
                         border-bottom: 1px solid #ccc;
-                        padding: 5px 0 10px;
+                        cursor: pointer;
                         font-size: em(13.5px);
                         font-weight: 600;
-                        cursor: pointer;
+                        margin: 10px 20px 0 0;
+                        padding: 5px 0 10px;
 
                         .fa-minus {
                             display: none;
@@ -212,39 +245,41 @@
                             .fa-minus {
                                 display: inline-block;
                             }
+
                             .fa-plus {
                                 display: none;
                             }
                         }
 
                         .header__icon {
-                            float: right;
                             @include opacity(.5);
+                            float: right;
                         }
                     }
 
                     .theme-elements__body {
-                        padding-top: 5px;
-                        display: none;
-                        @include legacy-pie-clearfix;
-                        background: rgba(255, 255, 255, .05);
-                        padding: 20px 0 0 20px;
-                        margin: 0 20px 0 0;
                         @include border-radius(0 0 3px 3px);
+                        @include legacy-pie-clearfix;
+                        @include alpha-property(background-color, $white, .05);
+                        display: none;
+                        margin: 0 20px 0 0;
+                        padding: 20px 0 0 20px;
                     }
 
                     .custom-label {
-                        white-space: nowrap;
-                        font-weight: normal;
                         font-size: 12px;
-                        width: 100%;
+                        font-weight: normal;
+                        margin-bottom: 0;
                         overflow: hidden;
                         text-overflow: ellipsis;
-                        margin-bottom: 0;
+                        white-space: nowrap;
+                        width: 100%;
                     }
+
                     .input-group-addon {
                         background: transparent;
                     }
+
                     .radio {
                         label {
                             font-weight: 600;
@@ -253,32 +288,33 @@
                 }
 
                 .section-title {
-                    margin-bottom: 5px;
                     font-weight: 600;
+                    margin-bottom: 5px;
                     padding-right: 50px;
                 }
 
                 .section-edit {
-                    text-align: right;
                     margin-bottom: 5px;
+                    text-align: right;
+
                     .fa {
-                        margin-right: 5px;
-                        font-size: 12px;
                         @include opacity(.5);
                         display: none;
+                        font-size: 12px;
+                        margin-right: 5px;
                         &.fa-chevron-down {
-                            top: -1px;
                             margin-right: 0;
                             position: relative;
+                            top: -1px;
                         }
                     }
                 }
 
                 .section-describe {
-                    @include opacity(.7);
-                    white-space: pre;
                     @include clearfix;
+                    @include opacity(.7);
                     text-overflow: ellipsis;
+                    white-space: pre;
                 }
 
                 .divider-dark {
@@ -290,8 +326,8 @@
                 }
 
                 .setting-list {
-                    padding: 0;
                     list-style-type: none;
+                    padding: 0;
                 }
 
                 .setting-list__hint {
@@ -305,68 +341,77 @@
                 .setting-list-item {
                     margin-top: 7px;
                 }
+
                 .has-error {
                     color: #a94442;
                 }
 
                 .file-status {
+                    color: #555;
                     font-size: 13px;
                     margin-top: 8px;
-                    color: #555;
                 }
 
                 .confirm-import {
-                    padding: 4px 10px;
                     margin: 10px 0;
+                    padding: 4px 10px;
                 }
             }
         }
     }
+
     .nav-pills {
         > li {
             margin: 0;
+
             a {
-                padding: 8px 5px 8px 15px;
                 border-radius: 0;
                 color: #777;
+                padding: 8px 5px 8px 15px;
             }
+
             .glyphicon {
-                width: 25px;
                 top: 2px;
+                width: 25px;
             }
+
             &:hover {
                 a {
-                    background-color: rgba(black, .1);
+                    @include alpha-property(background-color, $black, .1);
                 }
             }
+
             &.active {
                 a {
-                    color: #111;
                     background-color: #e1e1e1;
+                    color: #111;
+
                     &:before {
+                        background: $black;
                         content: '';
+                        height: 100%;
+                        left: 0;
                         position: absolute;
                         top: 0;
-                        left: 0;
                         width: 5px;
-                        height: 100%;
-                        background: #000;
                     }
                 }
+
                 a,
                 a:hover,
                 a:focus {
-                    background-color: rgba(black, .1);
+                    @include alpha-property(background-color, $black, .1);
                     border-radius: 0;
                     font-weight: 400;
-                    position: relative;
-                    white-space: nowrap;
                     overflow: hidden;
+                    position: relative;
                     text-overflow: ellipsis;
+                    white-space: nowrap;
                 }
             }
         }
     }
+
     h3 {
         font-size: em(20px);
     }
@@ -391,13 +436,15 @@
 
 .member-div {
     border-bottom: 1px solid lightgrey;
-    position: relative;
-    padding: 2px;
     margin: 0;
+    padding: 2px;
+    position: relative;
     width: 100%;
+
     &:first-child {
         border-top: 1px solid lightgrey;
     }
+
     .post-profile-img {
         @include border-radius(50px);
         margin-right: 8px;
@@ -407,14 +454,14 @@
 .member-role,
 .member-drop {
     .fa {
-        margin-right: 5px;
         @include opacity(.5);
         font-size: 12px;
+        margin-right: 5px;
     }
 
     .member-menu {
-        top: -50%;
         right: 110%;
+        top: -50%;
     }
 }
 
@@ -425,13 +472,13 @@
 }
 
 .member-menu {
-    right: 0px;
     left: auto;
+    right: 0;
 }
 
 .member-list {
-    width: 100%;
     overflow-x: visible;
+    width: 100%;
 }
 
 .member-page {

webapp/sass/routes/_signup.scss

@@ -1,19 +1,19 @@
 @charset 'UTF-8';
 
 .signup-header {
-    width: 100%;
+    background: $bg--gray;
     line-height: 33px;
     padding: 0 1em .2em;
-    background: $bg--gray;
+    width: 100%;
 
     .fa {
         margin-right: 5px;
     }
 }
 .signup-team__container {
-    padding: 100px 0px 50px 0px;
-    max-width: 380px;
     margin: 0 auto;
+    max-width: 380px;
+    padding: 100px 0 50px;
     position: relative;
 
     &.padding--less {
@@ -21,7 +21,7 @@
     }
 
     .form-control:focus {
-        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6));
+        @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6));
     }
 
     h1,
@@ -39,16 +39,16 @@
     }
 
     h2 {
-        font-weight: 600;
-        margin-bottom: .8em;
-        letter-spacing: -.5px;
         font-size: em(30px);
+        font-weight: 600;
+        letter-spacing: -.5px;
+        margin-bottom: .8em;
     }
 
     h3 {
-        font-weight: 600;
-        margin: 0 0 1.3em 0;
         font-size: 1.5em;
+        font-weight: 600;
+        margin: 0 0 1.3em;
     }
 
     h4 {
@@ -66,7 +66,7 @@
     }
 
     p {
-        color: #555;
+        color: #555555;
         line-height: 1.5;
         margin-bottom: 1em;
     }
@@ -81,32 +81,32 @@
             }
 
             .form-control {
-                text-align: left;
                 display: table-cell;
+                text-align: left;
                 width: 100%;
             }
 
             .input-group-addon {
-                text-align: left;
-                width: 50%;
                 display: table-cell;
                 overflow: hidden;
+                text-align: left;
                 text-overflow: ellipsis;
+                width: 50%;
             }
         }
     }
 
     .inner__content {
-        padding: 0 1rem;
         margin: 30px 0 20px;
+        padding: 0 1rem;
     }
 
     .block--gray {
+        @include border-radius(3px);
         background: #f2f2f2;
         display: inline-block;
-        padding: .85em 1.2em;
         font-weight: 600;
-        @include border-radius(3px);
+        padding: .85em 1.2em;
     }
 
     form {
@@ -114,32 +114,32 @@
     }
 
     .signup-team-confirm__container {
-        padding: 100px 0px 100px 0px;
+        padding: 100px 0;
     }
 
     .signup-team-logo {
         display: none;
+        margin: 0 0 2em;
         width: 210px;
-        margin: 0 0 2em 0;
     }
 
     .signup-team-login {
-        padding-bottom: 10px;
         font-weight: 600;
+        padding-bottom: 10px;
     }
 
     .signup-team__name {
-        margin: .5em 0 0;
         font-size: 2.2em;
         font-weight: 600;
+        margin: .5em 0 0;
         padding-left: 1rem;
     }
 
     .signup-team__subdomain {
-        margin: .2em 0 1.2em;
         font-size: 1.5em;
-        padding-left: 1rem;
         font-weight: 300;
+        margin: .2em 0 1.2em;
+        padding-left: 1rem;
         text-transform: uppercase;
     }
 
@@ -148,21 +148,21 @@
     }
 
     .or__container {
+        background: #dddddd;
         height: 1px;
-        background: #ddd;
-        text-align: left;
         margin: 2em 0;
+        text-align: left;
 
         span {
-            width: 40px;
+            background: #ffffff;
-            top: -10px;
-            position: relative;
-            font-size: 1.14286em;
-            line-height: 20px;
-            font-weight: 600;
-            background: #fff;
             display: inline-block;
+            font-size: 1.14286em;
+            font-weight: 600;
+            line-height: 20px;
+            position: relative;
             text-align: center;
+            top: -10px;
+            width: 40px;
         }
     }
 
@@ -177,9 +177,9 @@
 
     .btn {
         font-size: 1em;
-        padding: em(7px) em(15px);
         font-weight: 600;
         margin-right: 5px;
+        padding: em(7px) em(15px);
 
         .fa {
             font-size: 17px;
@@ -187,29 +187,29 @@
         }
 
         .icon {
-            width: 18px;
-            height: 18px;
-            margin-right: 8px;
             @include background-size(100% 100%);
             display: inline-block;
+            height: 18px;
+            margin-right: 8px;
+            width: 18px;
         }
 
         &.btn-custom-login {
+            @include border-radius(2px);
+            color: $white;
             display: block;
-            min-width: 200px;
-            width: 200px;
-            padding: 0 1em;
-            margin: 1em 1rem;
             height: 40px;
             line-height: 34px;
-            color: #fff;
+            margin: 1em 1rem;
-            @include border-radius(2px);
+            min-width: 200px;
+            padding: 0 1em;
+            width: 200px;
 
             &.gitlab {
-                background: #548;
+                background: #554488;
 
                 &:hover {
-                    background: darken(#548, 10%);
+                    background: darken(#554488, 10%);
                 }
 
                 span {
@@ -250,10 +250,10 @@
             }
 
             &.email {
-                background: #2389d7;
+                background: $primary-color;
 
                 &:hover {
-                    background: darken(#2389d7, 10%);
+                    background: $primary-color--hover;
                 }
 
                 span {
@@ -269,15 +269,15 @@
         }
 
         &.btn-default {
-            color: #444;
+            color: #444444;
         }
 
         .glyphicon {
             &.glyphicon-ok,
             &.glyphicon-refresh {
-                margin-right: .5em;
-                left: -2px;
                 font-size: .9em;
+                left: -2px;
+                margin-right: .5em;
             }
 
             &.glyphicon-chevron-right {
@@ -296,28 +296,29 @@
 
     .has-error {
         .control-label {
-            background: #f2f2f2;
-            padding: .7em 1em;
             @include border-radius(3px);
-            margin: 1em 0 0;
+            background: #f2f2f2;
+            color: #999999;
             font-size: 14px;
             font-weight: normal;
-            color: #999;
+            margin: 1em 0 0;
+            padding: .7em 1em;
             width: 100%;
 
             &:before {
-                @extend .fa;
+                @extend %font-awesome;
+                color: #aaaaaa;
                 content: '\f071';
                 margin-right: 4px;
-                color: #aaa;
             }
         }
     }
 
     .reset-form {
         @include border-radius(3px);
-        position: relative;
         font-size: .95em;
+        position: relative;
+
         p {
             color: inherit;
         }
@@ -363,12 +364,12 @@
 
         .black,
         &.black {
-            color: #000;
+            color: #000000;
         }
     }
 
     .color--light {
-        color: #777;
+        color: #777777;
     }
 
     .margin--extra {
@@ -381,9 +382,10 @@
 }
 
 .signup-team-all {
-    margin: 0 0 20px;
-    border: 1px solid #ddd;
     @include border-radius(2px);
+    border: 1px solid #dddddd;
+    margin: 0 0 20px;
+
     .signup-team-dir {
         background: #fafafa;
         border-top: 1px solid #d5d5d5;
@@ -395,25 +397,25 @@
         a {
             color: inherit;
             display: block;
-            padding: 0 15px;
-            line-height: 3.5em;
-            height: 3.5em;
             font-size: 1.1em;
+            height: 3.5em;
+            line-height: 3.5em;
+            padding: 0 15px;
         }
     }
 
     .signup-team-dir__name {
-        white-space: nowrap;
         float: left;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
         width: 90%;
     }
 
     .signup-team-dir__arrow {
+        color: #999999;
         float: right;
         font-size: .9em;
-        color: #999;
         line-height: 3.5em;
     }
 }

webapp/sass/routes/_statistics.scss

@@ -2,45 +2,45 @@
 
 .team_statistics {
     .total-count {
+        @include border-radius(3px);
+        background: $white;
+        border: 1px solid $light-gray;
         margin: 1em 0;
         text-align: center;
-        background: #fff;
-        border: 1px solid #ddd;
         width: 100%;
-        @include border-radius(3px);
 
         .title {
+            border-bottom: 1px solid $light-gray;
+            font-size: 13px;
             font-weight: 400;
             padding: 7px 10px;
-            border-bottom: 1px solid #ddd;
             text-align: left;
-            font-size: 13px;
 
             .fa {
+                color: #555555;
                 float: right;
-                margin: 0px 0 0;
-                color: #555;
                 font-size: 16px;
+                margin: 0;
             }
         }
 
         .content {
+            color: #555555;
             font-size: 30px;
             font-weight: 600;
-            color: #555;
-            padding: .3em 0 .35em;
             overflow: auto;
+            padding: .3em 0 .35em;
         }
     }
 
     .total-count--day {
-        width: 760px;
+        background: $white;
-        height: 275px;
+        border: 1px solid $light-gray;
-        border: 1px solid #ddd;
-        padding: 5px 10px 10px 10px;
-        margin: 10px 10px 10px 10px;
-        background: #fff;
         clear: both;
+        height: 275px;
+        margin: 10px;
+        padding: 5px 10px 10px;
+        width: 760px;
 
         > div {
             font-size: 18px;
@@ -50,8 +50,8 @@
 
     .recent-active-users {
         table {
-            width: 100%;
             table-layout: fixed;
+            width: 100%;
         }
 
         .content {
@@ -68,14 +68,15 @@
             }
 
             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;
+                border-left: 1px solid $light-gray;
+                border-top: 1px solid $light-gray;
+                font-size: 13px;
+                font-weight: 400;
+                padding: 5px 5px 6px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
                 &:first-child {
                     border-left: none;
                 }

webapp/sass/utils/_animations.scss

@@ -1,19 +1,21 @@
 @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);
     }
 }
+
+@keyframes highlight {
+    from {
+        @include alpha-property(background, $yellow, .5);
+    }
+
+    to {
+        background: none;
+    }
+}

webapp/sass/utils/_functions.scss

@@ -4,6 +4,20 @@
 	@return #{$pixels/$context}em
 }
 
+@function alpha-color($color, $amount) {
+    @return rgba($color, $amount)
+}
+
 %popover-box-shadow {
     @include box-shadow(rgba(black, .175) 1px -3px 12px);
+}
+
+%font-awesome {
+    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);
 }

webapp/sass/utils/_mixins.scss

@@ -1,8 +1,29 @@
 @charset 'UTF-8';
 
 @mixin file-icon($path) {
-    background: #fff url($path);
+    @include background-size(60px auto);
+    background-color: $white;
+    background-image: url($path);
     background-position: center;
     background-repeat: no-repeat;
-    @include background-size(60px auto);
 }
+
+@mixin alpha-property($property, $color, $opacity) {
+    #{$property}: rgba($color, $opacity);
+}
+
+@mixin font-smoothing($value: antialiased) {
+    @if $value == antialiased {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+    @else {
+        -webkit-font-smoothing: subpixel-antialiased;
+        -moz-osx-font-smoothing: auto;
+    }
+}
+
+@mixin cursor($value) {
+    cursor: -webkit-$value;
+    cursor: zoom-$value;
+}

webapp/sass/utils/_module.scss

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

webapp/sass/utils/_variables.scss

@@ -1,10 +1,16 @@
 @charset 'UTF-8';
 
 // Color Variables
-$color--primary: rgb(35, 137, 215);
+$primary-color: rgb(35, 137, 215);
-$color--primary--hover: darken($color--primary, 10%);
+$primary-color--hover: darken($primary-color, 10%);
 $bg--gray: rgb(245, 245, 245);
-$bg--white: rgb(255, 255, 255);
+$white: rgb(255, 255, 255);
+$black: rgb(0, 0, 0);
+$red: rgb(229, 101, 101);
+$yellow: rgb(255, 255, 0);
+$light-gray: rgba(0, 0, 0, .06);
+$gray: rgba(0, 0, 0, .3);
+$dark-gray: rgba(0, 0, 0, .5);
 
 // Page Variables
 $border-gray: 1px solid #ddd;

webapp/utils/utils.jsx

@@ -763,7 +763,6 @@ 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);
     }
 
     if (theme.buttonColor) {