Introduce linting for SASS/CSS (#525)

Pedantic cleanup:

- Add SASS / SCSS linting
- Add autofix for SASS linter & update configuration
- Fix various CSS properties that are redundant, get overwritten by another property, are arcane or simply never existed
- Remove arcane/irrelevant CSS vendor prefixes
- Fix div not allowed inside h1
- Fix h1 is already a block element and (#logo is a child)
- Adjust some line breaks and comment style for consistency
- Introduce "concentric" property sort order
- Lots of stylistic changes to SCSS files

.sass-lint.yml

@@ -0,0 +1,40 @@
+# Linter Options
+options:
+  # Treat warnings as errors
+  max-warnings: 0
+
+# File Options
+files:
+  include: 'src/sass/**/*.scss'
+
+# Rule Configuration
+rules:
+  force-element-nesting:
+    - 0
+  hex-length:
+    - 2
+    - style: long
+  indentation:
+    - 2
+    - size: 4
+  nesting-depth:
+    - 2
+    - max-depth: 6
+  no-color-literals:
+    - 0  # TODO: Remove this when resolving #9
+  no-ids:
+    - 0
+  no-important:
+    - 0
+  no-qualifying-elements:
+    - 0
+  property-sort-order:
+    - 2
+    - order: concentric
+
+# Auto-Fix Configuration
+resolvers:
+  # Prevent removing comments
+  no-css-comments: 0
+  # Prevent removing "!important"
+  no-important: 0

index.html

@@ -70,7 +70,7 @@
     <div id="main-wrapper" ng-cloak ng-class="{wide: ctrl.wide()}">
         <header>
             <h1 id="title" aria-label="Threema Web Logo">
-                <div id="logo" ng-include src="'img/logo.svg?v=[[VERSION]]'"></div>
+                <span id="logo" ng-include src="'img/logo.svg?v=[[VERSION]]'"></span>
             </h1>
         </header>
 

package.json

@@ -17,7 +17,10 @@
     "test": "echo -e 'NOTE: Use either \"npm run test:unit\" or \"npm run test:ui\"\n' && exit 1",
     "test:unit": "npm run build:unittests && karma start --single-run --log-level=debug --colors",
     "test:ui": "npm run build:uitests && bash tests/ui/run.sh",
-    "lint": "tslint -c tslint.json --project tsconfig.json --exclude \"**/src/config.ts\"",
+    "lint": "npm run lint:ts && npm run lint:sass",
+    "lint:ts": "tslint -c tslint.json --project tsconfig.json --exclude \"**/src/config.ts\"",
+    "lint:sass": "sass-lint -c .sass-lint.yml -v -q",
+    "lint:sass:fix": "sass-lint-auto-fix -c .sass-lint.yml",
     "clean": "rm -rf js/ build/ dist/app*"
   },
   "keywords": [
@@ -88,6 +91,8 @@
     "karma-chrome-launcher": "^2.2.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^2.0.1",
+    "sass-lint": "^1.12.1",
+    "sass-lint-auto-fix": "^0.15.1",
     "selenium-webdriver": "^4.0.0-alpha.1",
     "term-color": "^1.0.1",
     "ts-node": "^7.0.1",

src/directives/compose_area.ts

@@ -753,7 +753,7 @@ export default [
                                 offset = pos;
                                 break;
                             case Node.ELEMENT_NODE:
-                                size = getOuterHtml(node).length ;
+                                size = getOuterHtml(node).length;
                                 break;
                             default:
                                 $log.warn(logTag, 'Unhandled node:', node);

src/sass/app.scss

@@ -6,59 +6,58 @@
 
 // Base: Boilerplate content. It holds the styles every page of your site
 // should receive.
-@import "base/reset";
-@import "base/typography";
-@import "base/colors";
-@import "base/cloak";
+@import 'base/reset';
+@import 'base/typography';
+@import 'base/colors';
+@import 'base/cloak';
 
 // Helpers: Tools, helper files, variables, config files.
-@import "helpers/colors";
-@import "helpers/sizes";
-@import "helpers/mouse";
-@import "helpers/message_bubble";
-@import "helpers/texts";
+@import 'helpers/colors';
+@import 'helpers/sizes';
+@import 'helpers/message_bubble';
+@import 'helpers/texts';
 
 // Layouts: Macro layout files. Styles for major sections of the layout like a
 // header or footer and styles for a grid system would belong here.
-@import "layout/main";
-@import "layout/responsive";
+@import 'layout/main';
+@import 'layout/responsive';
 
 // Components: Micro layout files. Your styles for buttons and navigation and
 // similar page components.
-//@import "components/lists";
-@import "components/spinner";
-@import "components/links";
-@import "components/scrollbars";
-@import "components/avatar";
-@import "components/verification_level";
-@import "components/typing_indicator";
-@import "components/fade_blink";
-@import "components/no_lastpass";
-@import "components/dialogs";
-@import "components/message_media";
-@import "components/emoji_picker";
-@import "components/placeholder";
-@import "components/receiver_badge";
-@import "components/avatar_editor";
-@import "components/avatar_area";
-@import "components/drag_file";
-@import "components/buttons";
-@import "components/mediabox";
-@import "components/mention";
-@import "components/backbutton";
-@import "components/emoji";
-@import "components/battery";
-@import "components/message_voip_status";
+//@import 'components/lists';
+@import 'components/spinner';
+@import 'components/links';
+@import 'components/scrollbars';
+@import 'components/avatar';
+@import 'components/verification_level';
+@import 'components/typing_indicator';
+@import 'components/fade_blink';
+@import 'components/no_lastpass';
+@import 'components/dialogs';
+@import 'components/message_media';
+@import 'components/emoji_picker';
+@import 'components/placeholder';
+@import 'components/receiver_badge';
+@import 'components/avatar_editor';
+@import 'components/avatar_area';
+@import 'components/drag_file';
+@import 'components/buttons';
+@import 'components/mediabox';
+@import 'components/mention';
+@import 'components/backbutton';
+@import 'components/emoji';
+@import 'components/battery';
+@import 'components/message_voip_status';
 
 // Sections: Styles specific to individual pages or sections.
-@import "sections/header";
-@import "sections/welcome";
-@import "sections/navigation";
-@import "sections/conversation";
-@import "sections/compose_area";
-@import "sections/footer";
-@import "sections/status_bar";
-@import "sections/noscript";
+@import 'sections/header';
+@import 'sections/welcome';
+@import 'sections/navigation';
+@import 'sections/conversation';
+@import 'sections/compose_area';
+@import 'sections/footer';
+@import 'sections/status_bar';
+@import 'sections/noscript';
 
 // Vendors: Third party code.
 // Nothing to see here yet!

src/sass/base/_colors.scss

@@ -1,13 +1,13 @@
 body {
-    background-color: white;
-    padding: 0;
     margin: 0;
+    background-color: #ffffff;
+    padding: 0;
 }
 
 #main {
-    background-color: white;
+    background-color: #ffffff;
 }
 
 footer {
-    color: white;
+    color: #ffffff;
 }

src/sass/base/_reset.scss

@@ -1,3 +1,4 @@
+// sass-lint:disable single-line-per-selector
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -12,34 +13,41 @@ figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
     margin: 0;
-    padding: 0;
     border: 0;
-    font-size: 100%;
-    font: inherit;
+    padding: 0;
     vertical-align: baseline;
+    font: inherit;
 }
-/* HTML5 display-role reset for older browsers */
+
+// HTML5 display-role reset for older browsers
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
     display: block;
 }
+// sass-lint:enable single-line-per-selector
 
-blockquote, q {
-    quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
+blockquote,
+q {
     content: none;
+    quotes: none;
+
+    &::before,
+    &::after {
+        content: none;
+    }
 }
+
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
-html, body {
+
+html,
+body {
     height: 100%;
     line-height: 1;
 }
+
 body {
     z-index: 0;
 }

src/sass/base/_typography.scss

@@ -1,15 +1,23 @@
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
     font-weight: 700;
 }
+
 h1 {
     font-size: 2.2em;
 }
+
 h2 {
     font-size: 1.5em;
 }
 
-html, input, textarea {
-    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
+html,
+input,
+textarea {
+    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 em {

src/sass/components/_avatar.scss

@@ -1,5 +1,6 @@
 .avatar {
     position: relative;
+
     > img {
         width: 100%;
     }
@@ -7,11 +8,12 @@
     // Different resolutions
     &.avatar-low {
         > img {
+            border-radius: 50%;
             width: 48px;
             height: 48px;
-            border-radius: 50%;
         }
     }
+
     &.avatar-high {
         max-width: 540px;
         max-height: 540px;
@@ -22,25 +24,31 @@
         &.avatar-high {
             // Show default blured
             > img {
-                filter: blur(40px);
                 border-radius: 0;
+                filter: blur(40px);
             }
         }
 
     }
+
     .avatar-loading {
+        $thickness: 10px;
+        $circle-diameter: 160px;
+        @include loading-spinner(
+            $circle-diameter - $thickness * 2,
+            $thickness,
+            rgba(255, 255, 255, .87),
+            rgba(255, 255, 255, .1)
+        );
         position: absolute;
+        z-index: 10;
         width: 100%;
         height: 100%;
-        z-index: 10;
 
-        $circle-diameter: 160px;
-        $thickness: 10px;
-        @include loading-spinner($circle-diameter - $thickness * 2, $thickness, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.1));
-        &>:first-child {
+        > :first-child {
             position: relative;
-            left: calc(50% - #{$circle-diameter / 2});
             top: calc(50% - #{$circle-diameter / 2});
+            left: calc(50% - #{$circle-diameter / 2});
         }
     }
 
@@ -50,6 +58,7 @@
         $indicator-size: 18px;
         position: absolute;
         top: 48px - $indicator-size;
+
         img {
             width: $indicator-size;
             height: $indicator-size;
@@ -58,11 +67,11 @@
 
     // If a receiver is "blocked"
     .blocked-indicator {
-        position: absolute;
         $indicator-size: 18px;
         position: absolute;
         top: 48px - $indicator-size;
         right: 0;
+
         img {
             width: $indicator-size;
             height: $indicator-size;

src/sass/components/_avatar_area.scss

@@ -1,28 +1,27 @@
 .avatar-area {
     &.overview {
+        $avatar-area-size: 250px;
         display: inline-block;
         text-align: center;
-        $avatar-area_size: 250px;
 
         > .avatar-image {
             position: relative;
             margin: auto;
-            width: $avatar-area_size;
-            height: $avatar-area_size;
+            border-radius: 50%;
             background-color: rgb(198, 198, 198);
-
+            width: $avatar-area-size;
+            height: $avatar-area-size;
             overflow: hidden;
-            border-radius: 50%;
+
             img {
                 width: 100%;
             }
 
-
             .loading-element {
-                position: absolute;
                 display: none;
+                position: absolute;
+                margin-top: $avatar-area-size / 3;
                 width: 100%;
-                margin-top: ($avatar-area_size/3);
 
                 &.active {
                     display: block;
@@ -30,7 +29,4 @@
             }
         }
     }
-    &.editor {
-
-    }
-}
+}

src/sass/components/_avatar_editor.scss

@@ -3,15 +3,17 @@
 
     &.is-dragover {
         .avatar-editor-drag {
-            border-color: black !important;
+            border-color: #000000 !important;
         }
     }
+
     .avatar-editor-drag {
-        margin: auto auto !important;
+        margin: auto !important;
         width: $avatar-size;
         height: $avatar-size;
+
         &:not(.has-image) {
-            border: 5px dotted gray;
+            border: 5px dotted #808080;
         }
     }
-}
+}

src/sass/components/_backbutton.scss

@@ -1,14 +1,16 @@
 .md-button.md-icon-button.header-back-button {
-    @include mouse-hand;
-    min-width: 24px;
-    width: 24px;
     margin: 0 4px 0 0;
+    cursor: pointer;
     padding: 0;
+    width: 24px;
+    min-width: 24px;
+
     md-icon {
-        color: $material-grey-dark;
         transform: scale(1.2);
+        color: $material-grey-dark;
     }
+
     &.md-focused {
-        background-color: transparent !important; /* fix bug in md-no-ink */
+        background-color: transparent !important; // fix bug in md-no-ink
     }
 }

src/sass/components/_battery.scss

@@ -8,25 +8,28 @@
     }
 
     md-icon {
+        // sass-lint:disable no-vendor-prefixes
         -webkit-touch-callout: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         user-select: none;
+        // sass-lint:enable no-vendor-prefixes
     }
 
-    md-icon, span {
+    md-icon,
+    span {
+        position: absolute;
+        top: 1px;
         width: 24px;
         height: 24px;
         line-height: 24px;
-        position: absolute;
-        top: 1px;
     }
 
     .battery-percent {
-        font-size: 0.8em;
-        font-family: monospace;
-        text-align: center;
         top: 20px;
         left: 1px;
+        text-align: center;
+        font-family: monospace;
+        font-size: .8em;
     }
 }

src/sass/components/_buttons.scss

@@ -1,6 +1,6 @@
 button {
     i.material-icons {
-        vertical-align: middle;
         margin-bottom: 3px;
+        vertical-align: middle;
     }
 }

src/sass/components/_dialogs.scss

@@ -1,35 +1,45 @@
 md-dialog {
     min-width: 520px;
     max-width: 750px;
+
     p {
         margin-bottom: 16px;
         line-height: 1.3em;
+
         &:last-of-type {
             margin-bottom: 0;
         }
     }
+
     h2 {
-        font-size: 1.4em;
         margin-top: 24px;
         margin-bottom: 16px;
+        font-size: 1.4em;
     }
+
     ul {
         margin-left: 1.3em;
+
         li {
             line-height: 1.5em;
         }
     }
+
     md-dialog-content {
         line-height: 1.3em;
 
         // If a h2 is the first child of a dialog, remove the top margin
-        .md-dialog-content>h2:first-child {
-            margin-top: 0;
+        .md-dialog-content > h2 {
+            &:first-child {
+                margin-top: 0;
+            }
         }
     }
+
     .md-subheader-inner {
         padding-left: 0;
     }
+
     .status {
         padding-left: 16px;
     }
@@ -39,15 +49,17 @@ md-dialog.send-file-dialog {
     md-input-container.input-caption {
         margin-bottom: 0;
     }
+
     md-input-container.input-send-as-file {
         margin-top: 0;
         margin-bottom: 0;
     }
+
     .preview {
         display: block;
-        margin: 0px auto;
-        max-height: 250px;
+        margin: 0 auto;
         max-width: 100%;
+        max-height: 250px;
     }
 }
 
@@ -58,8 +70,9 @@ md-dialog.message-history-dialog {
 
     .event-type {
         font-weight: bold;
-    }
-    .event-type:after {
-        content: ':';
+
+        &::after {
+            content: ':';
+        }
     }
 }

src/sass/components/_drag_file.scss

@@ -5,31 +5,28 @@
             display: flex;
         }
     }
+
     drag-file {
         > .drag-file-overlay {
+            display: none;
             position: absolute;
+            z-index: 19;
+            background-color: rgba(0, 0, 0, .4);
             width: calc(100%);
             height: calc(100%);
-            background-color: rgba(0,0,0, 0.4);
-            display: none;
-
-            z-index: 19;
-
-            //padding: $main-padding;
 
             > div {
-                margin: $main-padding/2;
-                flex-grow: 1;
-                border: 4px dotted white;
-
                 display: flex;
-
+                flex-grow: 1;
                 align-items: center;
                 justify-content: center;
+                margin: $main-padding / 2;
+                border: 4px dotted #ffffff;
+
                 > span {
-                    font-size: 20pt;
-                    color: white;
                     text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
+                    color: #ffffff;
+                    font-size: 20pt;
                 }
             }
         }

src/sass/components/_emoji.scss

@@ -2,16 +2,16 @@ $emoji-height-normal: 1em;
 $emoji-height-large: 32px;
 
 img.em {
-    height: $emoji-height-normal;
-    width: $emoji-height-normal;
     margin: 0 .05em 0 .1em;
-    vertical-align: -0.1em;
+    width: $emoji-height-normal;
+    height: $emoji-height-normal;
+    vertical-align: -.1em;
 }
 
 #conversation .message-text {
     .em.large-emoji {
-        height: $emoji-height-large;
+        margin: 1px 4px 1px 0;
         width: $emoji-height-large;
-        margin: 1px 4px 1px 0px;
+        height: $emoji-height-large;
     }
 }

src/sass/components/_emoji_picker.scss

@@ -1,12 +1,12 @@
 .twemoji-picker {
-    min-height: 216px;
     margin: 0;
-    padding: 0 8px 0;
     background-color: $background-grey;
+    padding: 0 8px;
+    min-height: 216px;
 
     &.outline {
-        border-radius: 4px;
         border: 2px solid #dbdbdb;
+        border-radius: 4px;
         width: 366px;
     }
 }
@@ -15,24 +15,24 @@
     float: left;
 
     .em {
-        @include mouse-hand;
-        margin-bottom: 8px;
-        margin-right: 5px;
-        margin-bottom: 12px;
         display: inline-block;
+        margin-right: 5px;
+        margin-bottom: 8px;
+        cursor: pointer;
         text-indent: -99999px;
     }
 
     label {
-        background: $background-grey;
         display: block;
-        height: 32px;
-        padding: 4px;
-        border: 1px solid $background-grey;
         position: relative;
         left: 1px;
         margin-left: -1px;
-        @include mouse-hand;
+        border: 1px solid $background-grey;
+        background: $background-grey;
+        cursor: pointer;
+        padding: 4px;
+        height: 32px;
+
         img {
             position: relative;
             margin: 3px 4px 0;
@@ -40,32 +40,33 @@
     }
 
     .content {
+        @include scrollbar;
         position: absolute;
         top: 32px + 8px + 1px;
-        left: 0;
         right: 0;
         bottom: 0;
+        left: 0;
+        border: 1px solid #ffffff;
+        background: #ffffff;
         padding: 10px 10px 0;
-        background: white;
-        border: 1px solid white;
         overflow-y: scroll;
-        @include scrollbar;
+
         &::selection {
-            background: rgba(255, 255, 255, 0.0);
+            background: rgba(255, 255, 255, 0);
         }
     }
 
-    [type=radio] {
+    [type='radio'] {
         display: none;
-    }
 
-    [type=radio]:checked ~ label {
-        background: white;
-        border-bottom: 1px solid white;
-        z-index: 2;
-    }
+        &:checked ~ label {
+            z-index: 2;
+            border-bottom: 1px solid #ffffff;
+            background: #ffffff;
+        }
 
-    [type=radio]:checked ~ label ~ .content {
-        z-index: 1;
+        &:checked ~ label ~ .content {
+            z-index: 1;
+        }
     }
 }

src/sass/components/_fade_blink.scss

@@ -1,10 +1,13 @@
 .blink-fade {
-  animation: blinker 1.2s ease-in-out infinite alternate;
+    animation: blinker 1.2s ease-in-out infinite alternate;
 }
+
 .blink-fast {
-  animation-duration: 0.8s;
+    animation-duration: .8s;
 }
+
 .blink-slow {
-  animation-duration: 2s;
+    animation-duration: 2s;
 }
-@keyframes blinker { to { opacity: 0.1; } }
+
+@keyframes blinker { to { opacity: .1; } }

src/sass/components/_links.scss

@@ -1,17 +1,20 @@
 // Based on http://mrmrs.io/links/
 a {
-    text-decoration: none;
     transition: color .4s;
-    color: #265C83;
+    text-decoration: none;
+    color: #265c83;
 
-    &:link, &:visited {
-        color: #265C83;
+    &:link,
+    &:visited {
+        color: #265c83;
     }
+
     &:hover {
-        color: lighten(#265C83, 30%);
+        color: lighten(#265c83, 30%);
     }
+
     &:active {
         transition: color .3s;
-        color: #007BE6;
+        color: #007be6;
     }
 }

src/sass/components/_lists.scss

@@ -1,3 +1,4 @@
-ol, ul {
+ol,
+ul {
     padding-left: 20px;
 }

src/sass/components/_mediabox.scss

@@ -1,69 +1,75 @@
 mediabox {
     .box {
+        $mediabox-transition-duration: .1s;
         position: absolute;
-        left: 0;
         top: 0;
         right: 0;
         bottom: 0;
-        padding: 24px;
+        left: 0;
         z-index: 41;
-        background-color: rgba(0, 0, 0, 0.75);
+        background-color: rgba(0, 0, 0, .75);
+        padding: 24px;
 
-        // Transitions
-        $mediabox-transition-duration: 0.1s;
         &.ng-enter {
-            opacity: 0;
             transition: $mediabox-transition-duration linear opacity;
+            opacity: 0;
+
             img {
-                transform: scale(0.95);
+                transform: scale(.95);
                 transition: $mediabox-transition-duration linear transform;
             }
         }
+
         &.ng-enter-active {
             opacity: 1;
+
             img {
-                transform: scale(1.0);
+                transform: scale(1);
             }
         }
+
         &.ng-leave {
-            opacity: 1;
             transition: $mediabox-transition-duration linear opacity;
+            opacity: 1;
+
             img {
-                transform: scale(1.0);
+                transform: scale(1);
                 transition: $mediabox-transition-duration linear transform;
             }
         }
+
         &.ng-leave-active {
             opacity: 0;
+
             img {
-                transform: scale(0.95);
+                transform: scale(.95);
             }
         }
 
 
         md-icon {
             display: block;
-            box-sizing: border-box;
             position: absolute;
-            height: 28px;
-            width: 28px;
             top: 24px;
-            color: rgba(255, 255, 255, 0.8);
-            background-color: rgba(0, 0, 0, 0.7);
-            border: 2px solid rgba(255, 255, 255, 0.8);
+            border: 2px solid rgba(255, 255, 255, .8);
             border-radius: 50%;
+            background-color: rgba(0, 0, 0, .7);
+            cursor: pointer;
+            width: 28px;
+            height: 28px;
+            color: rgba(255, 255, 255, .8);
+            box-sizing: border-box;
             user-select: none;
-            @include mouse-hand;
 
             &:focus {
-                color: rgba(255, 255, 255, 1.0);
-                border: 2px solid rgba(255, 255, 255, 1.0);
+                border: 2px solid rgba(255, 255, 255, 1);
+                color: rgba(255, 255, 255, 1);
             }
 
             &.save {
                 right: 60px;
-                font-size: 20px;
                 padding: 2px;
+                font-size: 20px;
             }
 
             &.close {
@@ -72,34 +78,34 @@ mediabox {
         }
 
         .inner {
-            width: 100%;
-            height: 100%;
             display: flex;
             flex-direction: column;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
 
             &:focus {
                 outline: 0;
             }
 
             img {
-                max-height: calc(100% - 28px - 28px);
+                box-shadow: 0 0 50px rgba(0, 0, 0, .7);
                 max-width: 100%;
+                max-height: calc(100% - 28px - 28px);
                 user-select: none;
-                box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
             }
 
             .caption {
-                margin: 4px 0 0;
-                color: rgba(255, 255, 255, 0.8);
-                font-size: 1.3em;
                 display: block;
+                margin: 4px 0 0;
                 max-width: 90%;
                 overflow: hidden;
-                white-space: nowrap;
                 text-overflow: ellipsis;
                 line-height: 1.3em;
+                white-space: nowrap;
+                color: rgba(255, 255, 255, .8);
+                font-size: 1.3em;
             }
         }
     }

src/sass/components/_mention.scss

@@ -1,31 +1,30 @@
 .mention {
+    border-radius: 5px;
     padding: 0 5px 0 20px;
-    -webkit-border-radius:5px;
-    -moz-border-radius:5px;
-    border-radius:5px;
     line-height: 10pt !important;
 
-    &.me,&.all {
+    &.me,
+    &.all {
         background-color: #8b8b8b;
-        color: white;
+        color: #ffffff;
     }
 
     &.id {
-        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-        color: black;
-        background-color: #E0E0E0;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+        background-color: #e0e0e0;
+        color: #000000;
     }
 
-    &:before {
-        content: '@';
-        font-size: 10pt;
+    &::before {
         position: relative;
         top: -2px;
+        opacity: .6;
         margin-left: -16px;
-        opacity: 0.6;
+        font-size: 10pt;
+        content: '@';
     }
 
     &.link {
-        @include mouse-hand;
+        cursor: pointer;
     }
 }

src/sass/components/_message_media.scss

@@ -4,19 +4,17 @@ $circle-size: 50px;
 $loading-ring-thickness: 5px;
 
 // Animations
-
 @keyframes file-download-rotater {
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
 }
 
-
 // Styling
-
 .message-media {
 
     .in-view-indicator {
@@ -27,107 +25,106 @@ $loading-ring-thickness: 5px;
 
     // up/downloading circle element
     .circle {
-        height: $circle-size;
+        display: flex;
+        position: relative;
+        outline: none;
+        border-radius: $circle-size / 2;
+        background-color: #808080;
         width: $circle-size;
         min-width: $circle-size;
+        height: $circle-size;
         min-height: $circle-size;
-        background-color: grey;
-        outline: none;
-        position: relative;
-        border-radius: $circle-size / 2;
-        display: flex;
+
         // centering element
         &.center {
             margin: 0 auto;
         }
+
         i,
         img {
-            color: white;
-            margin: auto auto;
             position: relative;
-            background: rgba(128, 128, 128, .3);
+            margin: auto;
             border-radius: $material-radius;
+            background: rgba(128, 128, 128, .3);
+            color: #ffffff;
         }
     }
 
     // Loading indicator
     .loading.active {
         display: block;
-        width: $circle-size - 2 * $loading-ring-thickness;
-        height: $circle-size - 2 * $loading-ring-thickness;
-        border: $loading-ring-thickness solid rgba(0, 0, 0, 0.1);
-        border-left-color: lightgreen;
-        animation: file-download-rotater 1.1s infinite linear;
-        border-radius: 50%;
         position: absolute;
         top: 0;
         left: 0;
+        animation: file-download-rotater 1.1s infinite linear;
+        border: $loading-ring-thickness solid rgba(0, 0, 0, .1);
+        border-radius: 50%;
+        border-left-color: #90ee90;
+        width: $circle-size - (2 * $loading-ring-thickness);
+        height: $circle-size - (2 * $loading-ring-thickness);
     }
 
     // Thumbnails (Images, GIFs, Locations, ...)
     .thumbnail {
-        // For absolute positioning of children
+        // Make it clickable
         position: relative;
-
-        // for big pictures
+        // For absolute positioning of children
+        cursor: pointer;
+        // For big pictures
         overflow: hidden;
 
-        // Make it clickable
-        @include mouse-hand;
-
-        // Show/hide logic
+        // Styling of loader
         .loading-wrapper {
             display: none;
+            position: absolute;
+            background-color: rgba(0, 0, 0, .2);
+            width: 100%;
+            height: 100%;
+
             &.active {
-                z-index: 10;
                 display: block;
+                z-index: 10;
             }
-        }
-
-        // max size of a thumbnail
 
-        // Styling of loader
-        .loading-wrapper {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.2);
             .loading {
                 display: block;
                 position: absolute;
-                top: calc(50% - #{$circle-size/2} - 1em);
-                left: calc(50% - #{$circle-size/2});
-                width: $circle-size - 2 * $loading-ring-thickness;
-                height: $circle-size - 2 * $loading-ring-thickness;
-                border: $loading-ring-thickness solid rgba(255, 255, 255, 0.3);
-                border-left-color: lightgreen;
+                top: calc(50% - #{$circle-size / 2} - 1em);
+                left: calc(50% - #{$circle-size / 2});
                 animation: file-download-rotater 1.1s infinite linear;
+                border: $loading-ring-thickness solid rgba(255, 255, 255, .3);
                 border-radius: 50%;
+                border-left-color: #90ee90;
+                width: $circle-size - (2 * $loading-ring-thickness);
+                height: $circle-size - (2 * $loading-ring-thickness);
             }
+
             .loading-text {
                 display: block;
-                text-align: center;
-                width: 100%;
-                color: white;
-                height: 1em;
                 position: absolute;
                 top: calc(50% + #{$circle-size/2});
+                width: 100%;
+                height: 1em;
+                text-align: center;
+                color: #ffffff;
             }
         }
 
         .overlay {
-            &.video, &.gif {
+            &.video,
+            &.gif {
                 position: absolute;
                 width: 100%;
                 height: 100%;
+
                 i {
-                    line-height: $circle-size;
-                    font-size: $circle-size;
                     position: absolute;
-                    top: calc(50% - #{$circle-size/2});
-                    left: calc(50% - #{$circle-size/2});
-                    background: rgba(128, 128, 128, 0.6);
+                    top: calc(50% - #{$circle-size / 2});
+                    left: calc(50% - #{$circle-size / 2});
                     border-radius: $circle-size - (2 * $loading-ring-thickness);
+                    background: rgba(128, 128, 128, .6);
+                    line-height: $circle-size;
+                    font-size: $circle-size;
                 }
             }
         }
@@ -135,8 +132,8 @@ $loading-ring-thickness: 5px;
 
     // File messages (Files, Audio, ...)
     .file-message {
+        cursor: pointer;
         height: $circle-size;
-        @include mouse-hand;
 
         .message-text {
             padding-top: 8px;
@@ -144,21 +141,22 @@ $loading-ring-thickness: 5px;
 
         .info {
             position: relative;
-            margin-left: $circle-size + 16px;
             top: -$circle-size;
+            margin-left: $circle-size + 16px;
             height: $circle-size;
             line-height: $circle-size;
+
             p {
                 margin: 0;
-                line-height: normal;
                 padding: 0;
-                font-size: 10pt;
-                text-overflow: ellipsis;
                 overflow: hidden;
-            }
+                text-overflow: ellipsis;
+                line-height: normal;
+                font-size: 10pt;
 
-            p:first-child {
-                font-size: 100%;
+                &:first-child {
+                    font-size: 100%;
+                }
             }
         }
 

src/sass/components/_message_voip_status.scss

@@ -3,8 +3,9 @@ eee-message-voip-status {
         display: flex;
         flex-direction: row;
         align-items: center;
+
         md-icon {
-            margin-right: $main-padding/2;
+            margin-right: $main-padding / 2;
         }
-  }
+    }
 }

src/sass/components/_no_lastpass.scss

@@ -1,10 +1,15 @@
 // Hide LastPass input control on forms that set autocomplete=off
 // Source: http://stackoverflow.com/a/29473242/284318
-form[autocomplete=off] {
-    input[type=text] {
-        background-position: 150% 50% !important;
-    }
-    input[type=password] {
-        background-position: 150% 50% !important;
+form {
+    &[autocomplete='off'] {
+        input {
+            &[type='text'] {
+                background-position: 150% 50% !important;
+            }
+
+            &[type='password'] {
+                background-position: 150% 50% !important;
+            }
+        }
     }
 }

src/sass/components/_placeholder.scss

@@ -1,7 +1,13 @@
 // Hack to show placeholder text on non-input-elements.
 // Simply set the data-placeholder attribute.
-[contentEditable]:empty:not(:focus):before {
-    content:attr(data-placeholder);
-    cursor: text;
-    color: $material-grey;
+[contentEditable] {
+    &:empty {
+        &:not(:focus) {
+            &::before {
+                cursor: text;
+                color: $material-grey;
+                content: attr(data-placeholder);
+            }
+        }
+    }
 }

src/sass/components/_receiver_badge.scss

@@ -1,18 +1,22 @@
-.md-autocomplete-suggestions{
+.md-autocomplete-suggestions {
     $avatar-size-in-autocomplete: 30px;
+
     .receiver-badge {
         .avatar-box {
             height: $avatar-size-in-autocomplete;
+
             img {
-                height: $avatar-size-in-autocomplete;
                 width: auto;
+                height: $avatar-size-in-autocomplete;
             }
+
             .work-indicator,
             .home-indicator {
                 // Override configuration.
                 // This is a bit of a hack
                 $indicator-size: 12px;
                 top: $avatar-size-in-autocomplete - $indicator-size - 18px;
+
                 img {
                     width: $indicator-size;
                     height: $indicator-size;
@@ -21,55 +25,44 @@
         }
     }
 }
-.receiver-badge {
-  display: flex;
-  flex-direction: row;
-  align-items: center !important;
-  width: 100%;
 
-  .avatar-box {
-    margin-right: $main-padding;
-  }
+.receiver-badge {
+    display: flex;
+    flex-direction: row;
+    align-items: center !important;
+    width: 100%;
 
-  .receiver-badge-name {
-    margin-right: $main-padding;
-  }
+    .avatar-box {
+        margin-right: $main-padding;
+    }
 
-  &.inactive {
-    opacity: 0.5;
-  }
+    .receiver-badge-name {
+        margin-right: $main-padding;
+    }
 
-  /**
-    Contact badge specific rules
-   */
-  &.contact-badge {
-    .contact-badge-identity {
-      flex: 1;
-      text-align: right;
-      font-size: 10pt;
-      color: #757575;
+    &.inactive {
+        opacity: .5;
     }
-  }
 
-  /**
-    Distribution List badge specific rules
-   */
-  &.distribution-list-badge {
-  }
+    &.contact-badge {
+        .contact-badge-identity {
+            flex: 1;
+            text-align: right;
+            color: #757575;
+            font-size: 10pt;
+        }
+    }
 
-  /**
-    Group badge specific rules
-   */
-  &.group-badge {
-    .receiver-role {
-      flex: 1;
-      text-align: right;
-      font-size: 10pt;
-      color: #757575;
+    &.group-badge {
+        .receiver-role {
+            flex: 1;
+            text-align: right;
+            color: #757575;
+            font-size: 10pt;
+        }
     }
-  }
 }
 
 .linked .receiver-badge {
-    @include mouse-hand;
+    cursor: pointer;
 }

src/sass/components/_scrollbars.scss

@@ -1,18 +1,21 @@
 // Webkit specific global styling
-
+// sass-lint:disable no-vendor-prefixes
 ::-webkit-scrollbar {
-    width: 6px;
-    background-color: $scrollbar-color-bg;
     border: 1px solid #f9f9f9;
+    background-color: $scrollbar-color-bg;
+    width: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
     background-color: $scrollbar-color-thumb;
 }
+// sass-lint:enable no-vendor-prefixes
 
 // Mixin for browsers that support the "CSS Scrollbars Module Level 1" draft
-
 @mixin scrollbar {
+    // Note: Linter doesn't recognise 'scrollbar-*' properties, yet.
+    // sass-lint:disable no-misspelled-properties
     scrollbar-width: thin;  // Unfortunately Firefox does not support exact pixel values
     scrollbar-color: $scrollbar-color-thumb $scrollbar-color-bg;
+    // sass-lint:enable no-misspelled-properties
 }

src/sass/components/_spinner.scss

@@ -1,5 +1,6 @@
 .loading-element {
     display: block;
+
     md-progress-circular {
         margin: 0 auto;
     }
@@ -9,23 +10,27 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
 }
 
-@mixin loading-spinner($diameter,
-                       $thickness: 5px,
-                       $color-fg: $material-grey-dark,
-                       $color-bg: rgba(0, 0, 0, 0.1)) {
+@mixin loading-spinner(
+    $diameter,
+    $thickness: 5px,
+    $color-fg: $material-grey-dark,
+    $color-bg: rgba(0, 0, 0, .1)
+) {
     display: block;
-    &>:first-child {
+
+    > :first-child {
         display: block;
-        width: $diameter;
-        height: $diameter;
-        border: $thickness solid $color-bg;
-        border-left-color: $color-fg;
         animation: rotater 1.1s infinite linear;
+        border: $thickness solid $color-bg;
         border-radius: 50%;
+        border-left-color: $color-fg;
+        width: $diameter;
+        height: $diameter;
     }
 }

src/sass/components/_typing_indicator.scss

@@ -1,24 +1,17 @@
 .typing-animation {
     display: inline-block;
-}
-.typing-animation:after {
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: bottom;
-    -webkit-animation: ellipsis steps(4,end) 900ms infinite;
-    animation: ellipsis steps(4,end) 900ms infinite;
-    content: "\2026"; /* ascii code for the ellipsis character */
-    width: 0px;
-
-}
 
-@keyframes ellipsis {
-    to {
-        width: 20px;
+    &::after {
+        display: inline-block;
+        animation: ellipsis steps(4, end) 900ms infinite;
+        width: 0;
+        overflow: hidden;
+        vertical-align: bottom;
+        content: '\2026'; // ASCII code for the ellipsis character
     }
 }
 
-@-webkit-keyframes ellipsis {
+@keyframes ellipsis {
     to {
         width: 20px;
     }

src/sass/components/_verification_level.scss

@@ -1,56 +1,53 @@
-/*
- * Verification level.
- */
-
+// Verification level
 .verification-dots {
-
-   div {
-     display: inline-block;
-     height: 11px;
-     width: 11px;
-     border-radius: 50%;
-     background-color: #e0e0e0;
-     margin-right: 2px;
-   }
-
-  &.level1 {
     div {
-      &:nth-of-type(1) {
-        background-color: $status-error;
-      }
+        display: inline-block;
+        margin-right: 2px;
+        border-radius: 50%;
+        background-color: #e0e0e0;
+        width: 11px;
+        height: 11px;
     }
-  }
 
-  &.level2 {
-    div {
-      &:nth-of-type(1),
-      &:nth-of-type(2) {
-        background-color: $status-warning;
-      }
-    }
-    &.work {
-      div {
-        &:nth-of-type(1),
-        &:nth-of-type(2) {
-          background-color: $work-blue;
+    &.level1 {
+        div {
+            &:nth-of-type(1) {
+                background-color: $status-error;
+            }
         }
-      }
     }
-  }
 
-  &.level3 {
-    div {
-        background-color: $status-ok;
-    }
-    &.work {
-      div {
-        &:nth-of-type(1),
-        &:nth-of-type(2),
-        &:nth-of-type(3) {
-          background-color: $work-blue;
+    &.level2 {
+        div {
+            &:nth-of-type(1),
+            &:nth-of-type(2) {
+                background-color: $status-warning;
+            }
+        }
+
+        &.work {
+            div {
+                &:nth-of-type(1),
+                &:nth-of-type(2) {
+                    background-color: $work-blue;
+                }
+            }
         }
-      }
     }
-  }
 
+    &.level3 {
+        div {
+            background-color: $status-ok;
+        }
+
+        &.work {
+            div {
+                &:nth-of-type(1),
+                &:nth-of-type(2),
+                &:nth-of-type(3) {
+                    background-color: $work-blue;
+                }
+            }
+        }
+    }
 }

src/sass/helpers/_colors.scss

@@ -4,8 +4,8 @@ $status-error: #f44336;
 $status-starred: #ffc107;
 $border-grey: #dddddd;
 $background-grey: lighten($border-grey, 7%);
-$material-grey: rgba(0, 0, 0, 0.54);
-$material-grey-dark: rgba(0, 0, 0, 0.87);
+$material-grey: rgba(0, 0, 0, .54);
+$material-grey-dark: rgba(0, 0, 0, .87);
 $url-light-blue: #63a6cf;
 $work-blue: #3b84df;
 
@@ -13,11 +13,11 @@ $dark-background-color: #f6f6f6;
 $light-background-color: #ffffff;
 
 $scrollbar-color-bg: $dark-background-color;
-$scrollbar-color-thumb: #ccc;
+$scrollbar-color-thumb: #cccccc;
 
-$material-card-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16),0px 2px 5px 0px rgba(0,0,0,0.23);
+$material-card-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 5px 0 rgba(0, 0, 0, .23);
 
-$active-placeholder-color: lightgray;
+$active-placeholder-color: #d3d3d3;
 
 .color-status-ok {
     color: $status-ok;
@@ -31,5 +31,5 @@ $active-placeholder-color: lightgray;
     color: $status-error;
 }
 
-.material-icons.md-medium-dark { color: rgba(0, 0, 0, 0.54); }
-.material-icons.md-medium-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+.material-icons.md-medium-dark { color: rgba(0, 0, 0, .54); }
+.material-icons.md-medium-dark.md-inactive { color: rgba(0, 0, 0, .26); }

src/sass/helpers/_message_bubble.scss

@@ -3,16 +3,16 @@ $message-bubble-color-out: #dff0d8;
 $bubble-triangle-size: $main-padding;
 
 @mixin message-bubble-shadow {
-  box-shadow: 0 1px 1px rgba(0,0,0,0.25);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
 }
 
 @mixin message-bubble-triangle {
-  content: "";
-  position: absolute;
-  border-radius: 1px;
-  transform: rotate(-45deg);
-  width: $bubble-triangle-size;
-  height: $bubble-triangle-size;
-  left: ($bubble-triangle-size/2);
-  top: $bubble-triangle-size;
-}
+    position: absolute;
+    top: $bubble-triangle-size;
+    left: $bubble-triangle-size / 2;
+    transform: rotate(-45deg);
+    border-radius: 1px;
+    width: $bubble-triangle-size;
+    height: $bubble-triangle-size;
+    content: '';
+}

src/sass/helpers/_mouse.scss

@@ -1,4 +0,0 @@
-@mixin mouse-hand {
-      cursor: pointer;
-      cursor: hand;
-}

src/sass/helpers/_texts.scss

@@ -1,15 +1,13 @@
-@mixin word-wrap() {
-	overflow-wrap: break-word;
-	word-wrap: break-word;
-	-ms-word-break: break-all;
-	word-break: break-word;
-	-ms-hyphens: auto;
-	-moz-hyphens: auto;
-	-webkit-hyphens: auto;
-	hyphens: auto;
+@mixin word-wrap {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    -webkit-hyphens: auto; // sass-lint:disable-line no-vendor-prefixes
+    hyphens: auto;
+}
+
+@mixin ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-@mixin ellipsis() {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}

src/sass/layout/_main.scss

@@ -1,40 +1,30 @@
 #background-image {
-    min-height: 100%;
-    min-width: 1024px;
-    width: 100%;
-    height: auto;
     position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
-    -moz-user-select: none;
-    -webkit-user-select: none;
+    width: 100%;
+    min-width: 1024px;
+    height: auto;
+    min-height: 100%;
+    -moz-user-select: none; // sass-lint:disable-line no-vendor-prefixes
+    -webkit-user-select: none; // sass-lint:disable-line no-vendor-prefixes
     user-select: none;
     pointer-events: none;
 }
 
 #main-wrapper {
-    height: 100%;
     margin: 0 auto;
     width: 98vw;
     max-width: 450px;
+    height: calc(
+        100vh - #{$header-height} - #{$footer-height} - #{$main-padding} * 2 - #{$main-border-top});
     max-height: 575px;
-    height: calc(100vh - #{$header-height} - #{$footer-height} - #{$main-padding} * 2 - #{$main-border-top});
+
     &.wide {
         max-width: 1500px;
         max-height: inherit;
     }
-}
-
-#main {
-    border-radius: $material-radius;
-    width: 100%;
-    height: 100%;
-    box-shadow: $material-card-shadow;
-    overflow: hidden;
-}
-
-#main-wrapper {
 
     // Set min height of messenger
     &.wide #main {
@@ -43,10 +33,17 @@
 
     // Set min height of welcome screen
     &:not(.wide) #main {
-        min-height: 620px;
         height: auto;
+        min-height: 620px;
     }
+}
 
+#main {
+    border-radius: $material-radius;
+    box-shadow: $material-card-shadow;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 }
 
 #main-content {
@@ -55,36 +52,33 @@
 }
 
 #messenger {
-
-    transition: all 1s ease-out;
     display: flex;
-    width: 100%;
-    // height calculation in _status_bar.scss
     flex-direction: row;
+    // height calculation in _status_bar.scss
+    width: 100%;
 
     #navigation {
-        height: 100%;
         display: flex;
         flex-direction: column;
+        height: 100%;
     }
 
     #detail {
         height: 100%;
-        &>div.ng-scope {
-            height: 100%;
+
+        > div.ng-scope {
             background-color: #efebe9;
+            height: 100%;
 
-            /**
-                Default style for the header in the detail
-             */
+            // Default style for the header in the detail
             .detail-header {
-                box-shadow: 1px 2px 4px -2px rgba(0, 0, 0, 0.2);
-                background-color: $dark-background-color;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding: 0 $main-padding;
                 z-index: 18;
+                box-shadow: 1px 2px 4px -2px rgba(0, 0, 0, .2);
+                background-color: $dark-background-color;
+                padding: 0 $main-padding;
                 min-height: 68px;
 
                 > * {
@@ -96,13 +90,14 @@
                     flex-direction: column;
                     flex-grow: 1;
                     overflow: hidden;
+
                     > * {
-                        color: black;
                         display: flex;
-                        line-height: 100%;
                         flex-direction: row;
                         flex-grow: 1;
                         justify-content: space-between;
+                        line-height: 100%;
+                        color: #000000;
 
                         &:first-child {
                             font-weight: bold;
@@ -114,7 +109,7 @@
                     flex: 1;
                     text-align: right;
 
-                    /* loading indicator */
+                    // Loading indicator
                     md-progress-circular {
                         display: inline-block;
                     }
@@ -124,10 +119,10 @@
             .detail-content {
 
                 ul {
-                    list-style-type: none;
                     margin: 0;
                     padding: 0;
                     width: 100%;
+                    list-style-type: none;
 
                     > li {
                         margin-bottom: $main-padding;
@@ -143,21 +138,23 @@
 
                 &.readonly {
                     .form-header {
-                        overflow: hidden;
                         height: 400px;
+                        overflow: hidden;
+
                         eee-avatar {
                             img {
                                 position: relative;
                                 top: calc(-100%);
+                                border-radius: 0;
                                 width: 100%;
                                 max-width: 100%;
-                                max-height: none;
                                 height: auto;
-                                border-radius: 0;
+                                max-height: none;
                             }
                         }
                     }
                 }
+
                 .detail-content {
                     flex-grow: 1;
                     overflow: auto;
@@ -167,29 +164,33 @@
                         flex-flow: row;
 
                         &.div {
-                            >:first-child {
-                                border-right: 1px solid rgba(0,0,0,0.12);
-                                padding-right: 4*$main-padding;
-                                margin-right: 4*$main-padding;
+                            > :first-child {
+                                margin-right: 4 * $main-padding;
+                                border-right: 1px solid rgba(0, 0, 0, .12);
+                                padding-right: 4 * $main-padding;
                             }
                         }
+
                         > * {
                             flex: 1;
 
-                            //be sure the avatar has always the same height as width
+                            // be sure the avatar has always the same height as width
                             &.avatar {
+                                position: relative;
                                 width: 50%;
                                 overflow: hidden;
-                                position: relative;
-                                &:before {
-                                    content: "";
+
+                                &::before {
                                     display: block;
                                     margin-top: 100%;
+                                    content: '';
                                 }
+
                                 eee-avatar {
                                     position: absolute;
-                                    top:0;
+                                    top: 0;
                                     width: 100%;
+
                                     img {
                                         border-radius: 0;
                                         width: 100%;
@@ -200,9 +201,11 @@
                             }
                         }
                     }
+
                     .form-content {
                         padding: $main-padding;
                     }
+
                     .loading-overlay {
                         display: none;
                     }
@@ -213,8 +216,8 @@
 
     &:not(.show-detail) {
         #navigation {
-            max-width: 100%;
             flex: 1 6 100%;
+            max-width: 100%;
         }
 
         #detail {
@@ -224,11 +227,10 @@
 
     &.show-detail {
         #navigation {
-            max-width: 30%;
-            min-width: 200px;
             flex: 1 6 30%;
-
-            border-right: 1px solid #ddd;
+            border-right: 1px solid #dddddd;
+            min-width: 200px;
+            max-width: 30%;
         }
 
         #detail {
@@ -241,8 +243,9 @@
 
 .material-icons {
     &.as-button {
-        opacity: 0.5;
+        opacity: .5;
         cursor: pointer;
+
         &:hover {
             opacity: 1;
         }
@@ -261,59 +264,64 @@ input.threema-id {
 }
 
 a.click-action {
-    @include mouse-hand;
+    cursor: pointer;
 }
 
 .android-ios-only {
-    width: 100%;
     margin: 10px auto 0;
-    background-color: white;
-    text-align: center;
     border-radius: $material-radius;
     box-shadow: $material-card-shadow;
+    background-color: #ffffff;
+    width: 100%;
+    text-align: center;
+
     div {
-        padding: 16px;
-        line-height: 24px;
         display: inline-flex;
-        vertical-align: middle;
         align-items: center;
-        font-weight: 300;
+        padding: 16px;
+        vertical-align: middle;
+        line-height: 24px;
         white-space: nowrap;
+        font-weight: 300;
+
         i.material-icons {
             margin-right: 8px;
         }
+
         img {
-            height: 26px;
             margin-right: 8px;
+            height: 26px;
         }
     }
 }
 
 
-//show dt as threema green subjects
+// show dt as threema green subjects
 .key-values {
     dt {
-        color: rgb(0,150,136);
         padding-bottom: ($main-padding);
+        color: rgb(0, 150, 136);
     }
 
     dd {
-        word-break: normal;
-        margin-bottom: $main-padding*2;
         display: block;
+        margin-bottom: $main-padding * 2;
+        word-break: normal;
 
         > .complex-values {
             display: flex;
-            justify-items: center;
-            align-items: center;
             flex-direction: row;
+            align-items: center;
+            justify-items: center;
 
             > *:not(:last-child) {
                 margin-right: $main-padding;
             }
+
             .indicator-icon {
                 $indicator-size: 18px;
                 top: 48px - $indicator-size;
+
                 img {
                     width: $indicator-size;
                     height: $indicator-size;
@@ -324,11 +332,12 @@ a.click-action {
 }
 
 
-//angular material extensions
+// angular material extensions
 md-toast.md-center {
     left: 50%;
     transform: translate3d(-50%, 0, 0);
 }
+
 md-toast .md-toast-content {
     span {
         text-align: center;
@@ -346,11 +355,23 @@ md-list-item .md-list-item-inner > md-checkbox .md-label {
 
 .status span {
     display: inline;
-    line-height: 24px;
     vertical-align: top;
+    line-height: 24px;
 }
 
-.status-yes i { color: #4caf50; }
-.status-no i { color: #f44336; }
-.status-unknown i { color: #0277BD; }
-.small { font-size: 0.8em; font-weight: 300; }
+.status-yes i {
+    color: #4caf50;
+}
+
+.status-no i {
+    color: #f44336;
+}
+
+.status-unknown i {
+    color: #0277bd;
+}
+
+.small {
+    font-size: .8em;
+    font-weight: 300;
+}

src/sass/layout/_responsive.scss

@@ -1,5 +1,5 @@
 @media (max-width: 880px) {
-    /* Hide some of the navigation elements */
+    // Hide some of the navigation elements
     .conversation {
         .message-date,
         .nickname {
@@ -7,8 +7,7 @@
         }
     }
 
-    //try to resize thumbnails
-
+    // try to resize thumbnails
     .message-body {
         max-width: 70% !important;
     }
@@ -21,15 +20,14 @@
         width: auto !important;
         height: auto !important;
     }
-
 }
 
 @media (max-width: 600px) {
     #messenger {
         &.show-detail {
             #navigation {
-                flex: 0 !important;
                 display: none;
+                flex: 0 !important;
                 min-width: 0 !important;
                 max-width: none !important;
             }
@@ -49,5 +47,4 @@
         }
     }
 
-
-}
+}

src/sass/sections/_compose_area.scss

@@ -1,82 +1,92 @@
 compose-area {
-
     > div {
-        box-shadow: 0 -2px 4px -2px rgba(0, 0, 0, 0.2);
-    }
+        box-shadow: 0 -2px 4px -2px rgba(0, 0, 0, .2);
 
-    > div:first-child {
-        display: flex;
-        flex-direction: row;
-        margin: 0;
-
-        > div {
-            justify-content: center;
-            align-content: center;
-            margin: $main-padding $main-padding $main-padding 0;
-            &:first-child {
-                margin-left: $main-padding;
-            }
+        &:first-child {
+            display: flex;
+            flex-direction: row;
+            margin: 0;
+
+            > div {
+                align-content: center;
+                justify-content: center;
+                margin: $main-padding $main-padding $main-padding 0;
+
+                &:first-child {
+                    margin-left: $main-padding;
+                }
+
+                &:nth-of-type(2) {
+                    flex-grow: 1;
+                    border: 1px solid $border-grey;
+                    border-radius: $material-radius;
+                    background-color: $light-background-color;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+
+                    // This is where the user enters text
+                    div.compose {
+                        top: 0;
+                        left: 0;
+                        outline: none;
+                        cursor: text;
+                        padding: $main-padding;
+                        min-height: 22px;
+                        max-height: calc(1.3em * 5);
+                        line-height: 20px;
 
-            &:nth-of-type(2) {
-                border: 1px solid $border-grey;
-                border-radius: $material-radius;
-                background-color: $light-background-color;
-                flex-grow: 1;
-                overflow-x: hidden;
-                overflow-y: auto;
-                // This is where the user enters text
-                div.compose {
-                    // show placeholder if field is on focus
-                    &:empty:before{
-                        content: attr(data-placeholder);
-                        display: block;
-                        color: $active-placeholder-color;
+                        // show placeholder if field is on focus
+                        &:empty {
+                            &::before {
+                                display: block;
+                                color: $active-placeholder-color;
+                                content: attr(data-placeholder);
+                            }
+                        }
                     }
-                    padding: $main-padding;
-                    top: 0;
-                    left: 0;
-                    outline: none;
-                    line-height: 20px;
-                    max-height: calc(1.3em * 5);
-                    min-height: 22px;
-                    cursor: text;
+                }
+
+                &:first-child,
+                &:last-child {
+                    padding-top: $main-padding;
+                    text-align: center;
                 }
             }
-            &:first-child,
-            &:last-child {
-                padding-top: $main-padding;
-                text-align: center;
-            }
-        }
-        // configure all triggers
-        .trigger {
-            opacity: 0.5;
-            &::selection {
-                background: white;
-            }
-            &.is-enabled {
-                @include mouse-hand;
-                &:hover {
+
+            // configure all triggers
+            .trigger {
+                opacity: .5;
+
+                &::selection {
+                    background: #ffffff;
+                }
+
+                &.is-enabled {
+                    cursor: pointer;
+
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+
+                &.is-active {
                     opacity: 1;
                 }
-            }
 
-            &.is-active {
-                opacity: 1;
-            }
-            &:not(.is-enabled) {
-                opacity: 0.1;
+                &:not(.is-enabled) {
+                    opacity: .1;
+                }
             }
-        }
 
-        .file-input {
-            position: absolute;
+            .file-input {
+                position: absolute;
+            }
         }
     }
 
     // On dragover
     &.is-dragover div.compose {
-        border: 4px dashed lightgrey;
+        border: 4px dashed #d3d3d3;
         text-align: center;
         line-height: $footer-height - 20px;
         font-size: 1.4em;
@@ -86,9 +96,11 @@ compose-area {
     // Emoji picker window
     .emoji-keyboard {
         transform: scale(1);
+
         &:not(.active) {
-            max-height: 0;
             display: none;
+            max-height: 0;
+
             .tab {
                 float: none;
             }

src/sass/sections/_conversation.scss

@@ -1,89 +1,86 @@
 #conversation {
-    background-image: url("../img/wallpaper_light.png?");
-    height: 100%;
     display: flex;
-    flex-direction: column;
     position: relative;
+    flex-direction: column;
+    background-image: url('../img/wallpaper_light.png?');
+    height: 100%;
 
     .detail-header {
 
         .header-avatar {
-            @include mouse-hand;
+            cursor: pointer;
         }
 
         .header-details {
-            @include mouse-hand;
-            overflow: hidden;
             flex-grow: 1;
+            cursor: pointer;
+            overflow: hidden;
 
-            & > *:first-child {
+            > *:first-child {
                 font-weight: bold;
             }
         }
 
         h3 {
-            margin: 0 0 4px 0;
+            margin: 0 0 4px;
             padding: 0;
             font-size: 120%;
         }
 
-        .conversation-header-details-detail, .conversation-header-details-name {
-            white-space: nowrap;
+        .conversation-header-details-detail,
+        .conversation-header-details-name {
+            display: inherit;
+            max-width: 100%;
             overflow: hidden;
             text-overflow: ellipsis;
-            max-width: 100%;
-            display: inherit;
             line-height: 1.3;
+            white-space: nowrap;
         }
     }
 
     #conversation-is-private {
+        display: flex;
         flex-grow: 1;
         align-items: center;
         justify-content: center;
-        display: flex;
     }
 
     #conversation-chat {
+        @include scrollbar;
         flex-grow: 1;
         overflow: auto;
         overflow-y: scroll;
-        @include scrollbar;
     }
 
     #conversation-quote {
-        background-color: white;
-        padding: 8px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
+        background-color: #ffffff;
+        padding: 8px;
 
         .message-quote {
             @include word-wrap;
-            line-height: 1.3em;
             max-width: 85%;
-        }
-
-        .md-icon-button {
+            line-height: 1.3em;
         }
     }
 
-    $footer-height: 64px;
-
-    $scrolljump-height: 36px;
     #scrolljump {
-        align-self: flex-end;
-        height: 0;
+        $scrolljump-height: 36px;
         position: relative;
         right: 16px;
         bottom: 8px + $scrolljump-height;
+        align-self: flex-end;
         z-index: 15;
         outline: none;
+        height: 0;
+
         svg {
+            cursor: pointer;
             width: $scrolljump-height;
             height: $scrolljump-height;
-            @include mouse-hand;
         }
     }
 
@@ -91,23 +88,27 @@
         background-color: $dark-background-color;
 
         .chat-input {
-            width: 100%;
             margin: 0;
             padding: 0;
+            width: 100%;
         }
 
         #mention-selector {
             padding: 0;
+
             ul {
                 margin: 0;
                 padding: 0;
                 list-style-type: none;
 
                 > li {
-                    &:not(:hover):not(.selected) {
-                        background-color: white;
+                    cursor: pointer;
+
+                    &:not(:hover) {
+                        &:not(.selected) {
+                            background-color: #ffffff;
+                        }
                     }
-                    @include mouse-hand;
                 }
             }
 
@@ -115,13 +116,16 @@
                 .avatar-box {
                     margin: $main-padding;
                     padding: 0;
+
                     .avatar {
                         width: 28px;
                         height: 28px;
+
                         img {
                             width: inherit;
                             height: inherit;
                         }
+
                         > .work-indicator,
                         > .home-indicator {
                             top: 15px;
@@ -130,6 +134,7 @@
                         }
                     }
                 }
+
                 .contact-badge-identity {
                     margin-right: $main-padding;
                 }
@@ -138,20 +143,17 @@
     }
 }
 
-
-/**
- Quoting
- */
+// Quoting
 .message-quote-content {
-    border-left: 5px solid blue;
+    border-left: 5px solid #0000ff;
     padding-left: 5px;
-    font-size: 0.9em;
+    font-size: .9em;
 
     .message-name {
         display: block;
-        font-weight: bold;
-        font-size: 0.9em;
         margin-bottom: 8px;
+        font-size: .9em;
+        font-weight: bold;
     }
 
     .message-quote {
@@ -162,25 +164,27 @@
 #conversation-chat .chat {
     display: flex;
     flex-direction: column;
-    min-height: 100%;
     margin: 0;
     padding: 0;
+    min-height: 100%;
+
     li {
-        margin: 0 0 $main-padding 0;
-        padding: 0;
         display: inline-block;
+        margin: 0 0 $main-padding;
+        padding: 0;
 
         &.load-more {
             margin-top: $main-padding;
             text-align: center;
+
             .loading {
-                height: 30px;
-                width: 30px;
-                background-color: white;
-                border-radius: 50%;
+                @include message-bubble-shadow;
                 display: inline-block;
+                border-radius: 50%;
+                background-color: #ffffff;
                 padding: 6px;
-                @include message-bubble-shadow;
+                width: 30px;
+                height: 30px;
             }
         }
 
@@ -196,9 +200,11 @@
         flex-direction: row;
         align-items: flex-start;
 
-        md-menu:not(.md-open) {
-            visibility: hidden;
-            position: relative;
+        md-menu {
+            &:not(.md-open) {
+                position: relative;
+                visibility: hidden;
+            }
         }
 
         &:hover {
@@ -213,23 +219,25 @@
 
         .loading-element {
             margin: 0;
-            &>:first-child {
+
+            > :first-child {
                 width: 50px;
                 height: 50px;
             }
         }
 
-        /* arrow */
+        // arrow
         .bubble-triangle {
             position: relative;
             width: $bubble-triangle-size;
             height: $bubble-triangle-size;
 
-            &:after {
+            &::after {
                 @include message-bubble-triangle;
                 z-index: 3;
             }
-            &:before{
+
+            &::before {
                 @include message-bubble-triangle;
                 @include message-bubble-shadow;
                 z-index: 1;
@@ -239,107 +247,52 @@
     }
 
     .message-body {
-        -webkit-border-radius:5px;
-        -moz-border-radius:5px;
-        border-radius:5px;
+        @include message-bubble-shadow;
+        display: flex;
+        flex-direction: column;
         z-index: 2;
+        border-radius: 5px;
+        padding: 8px;
+        min-width: 64px;
         max-width: 85%;
+
         &:not(.text-message-body) {
             // set fixed height to thumbnails
             .thumbnail-loader {
                 position: absolute;
-                overflow: hidden;
                 width: calc(100%);
-                height: calc(100%);
                 max-width: 100%;
+                height: calc(100%);
                 max-height: 100%;
+                overflow: hidden;
+
                 img {
-                    filter: blur(10px);
                     width: 100%;
+                    filter: blur(10px);
                 }
             }
+
             .thumbnail {
-                text-align: center;
                 max-width: 100%;
+                text-align: center;
             }
+
             .message-text {
-                margin-top: 8px;
                 display: inline-block;
+                margin-top: 8px;
             }
         }
-    }
-
-    .message-in {
-        .message-body {
-            position: relative;
-            background-color: $message-bubble-color-in;
-        }
-
-        /* arrow */
-        .bubble-triangle {
-
-            margin-left: $main-padding;
-            &:after {
-                background-color: $message-bubble-color-in;
-            }
-            &:before{
-                background-color: $message-bubble-color-in;
-            }
-        }
-
-        .message-info {
-            justify-content: flex-start;
-        }
-    }
-
-    .message-out {
-        flex-direction: row-reverse;
-
-        .message-body {
-            background-color: $message-bubble-color-out;
-            position: relative;
-        }
-
-        /* right arrow */
-
-        /* arrow */
-        .bubble-triangle {
-            left: 0 - $bubble-triangle-size;
-
-            &:after {
-                background-color: $message-bubble-color-out;
-            }
-            &:before{
-                background-color: $message-bubble-color-out;
-            }
-        }
-
-        .message-info {
-            justify-content: flex-end;
-
-        }
-    }
-
-    .message-avatar {
-        margin-left: 8px;
-        flex-shrink: 0;
-        @include mouse-hand;
-    }
-
-    .message-body {
-        display: flex;
-        flex-direction: column;
-        padding: 8px;
-        min-width: 64px;
-        @include message-bubble-shadow;
 
         .message-name {
-            font-weight: bold;
-            font-size: 0.9em;
             margin-bottom: 8px;
+            font-size: .9em;
+            font-weight: bold;
+
             // Emoji styling
-            > span:not(.ng-binding) {
-                transform: scale(0.6);
+            > span {
+                &:not(.ng-binding) {
+                    transform: scale(.6);
+                }
             }
         }
 
@@ -348,7 +301,7 @@
             line-height: 1.3em;
 
             a {
-                @include mouse-hand;
+                cursor: pointer;
             }
 
             span {
@@ -357,20 +310,18 @@
         }
 
         .message-media {
-
             location {
                 display: flex;
-                align-items: center;
                 flex-direction: column;
+                align-items: center;
                 padding: 4px 0;
 
                 .location-message {
                     display: flex;
                     flex-direction: row;
-                    justify-content: flex-start;
                     align-items: center;
-
-                    @include mouse-hand;
+                    justify-content: flex-start;
+                    cursor: pointer;
 
                     .location-details {
                         margin-left: 8px;
@@ -380,55 +331,115 @@
                         }
 
                         .details {
-                            font-size: 0.9em;
                             line-height: 1.2em;
+                            font-size: .9em;
                         }
                     }
                 }
             }
 
-            audio:focus {
-                outline: none;
+            audio {
+                &:focus {
+                    outline: none;
+                }
             }
         }
 
-
         .message-info {
-            height: 16px;
-            margin-top: 4px;
-            color: gray; // TODO: Extract color
-            font-size: 0.8em;
             display: flex;
             flex-direction: row;
             align-items: flex-end;
+            margin-top: 4px;
+            height: 16px;
+            color: #808080;
+            font-size: .8em;
 
             .message-state {
                 margin-left: 5px;
+
                 i {
                     position: relative;
                     top: 2px;
                 }
+
                 i.timeout {
                     color: $status-error;
                 }
             }
 
             md-icon {
-                font-size: 1em;
-                height: 1em;
                 width: 1em;
-                min-height: 1em;
                 min-width: 1em;
+                height: 1em;
+                min-height: 1em;
                 vertical-align: top;
+                font-size: 1em;
+            }
+        }
+    }
+
+    .message-in {
+        .message-body {
+            position: relative;
+            background-color: $message-bubble-color-in;
+        }
+
+        // arrow
+        .bubble-triangle {
+            margin-left: $main-padding;
+
+            &::after {
+                background-color: $message-bubble-color-in;
+            }
+
+            &::before {
+                background-color: $message-bubble-color-in;
             }
         }
+
+        .message-info {
+            justify-content: flex-start;
+        }
+    }
+
+    .message-out {
+        flex-direction: row-reverse;
+
+        .message-body {
+            position: relative;
+            background-color: $message-bubble-color-out;
+        }
+
+        // arrow
+        .bubble-triangle {
+            left: 0 - $bubble-triangle-size;
+
+            &::after {
+                background-color: $message-bubble-color-out;
+            }
+
+            &::before {
+                background-color: $message-bubble-color-out;
+            }
+        }
+
+        .message-info {
+            justify-content: flex-end;
+
+        }
+    }
+
+    .message-avatar {
+        flex-shrink: 0;
+        margin-left: 8px;
+        cursor: pointer;
     }
 
     .message-status {
         justify-content: center;
 
         .message-body {
-            background-color: #fcf8e3; // TODO: Extract color
+            background-color: #fcf8e3;
 
             .message-text {
                 margin-top: 0;
@@ -437,36 +448,37 @@
     }
 
     .unread-separator {
-        width: 100%;
-        margin: 16px 8px;
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
+        margin: 16px 8px;
+        width: 100%;
 
         .line {
+            flex-grow: 1;
+            border-bottom: 1px solid #bbbbbb;
             text-align: center;
-            border-bottom: 1px solid #bbb; // TODO: Extract color
             line-height: 0;
-            flex-grow: 1;
         }
 
         .text {
-            padding: 0 10px;
             margin: 0;
+            padding: 0 10px;
+            text-shadow: 0 0 4px #bbbbbb;
+            font-size: .9em;
             font-weight: 300;
-            font-size: 0.9em;
-            text-shadow: 0px 0px 4px #bbb;
         }
     }
 
     .message-info {
         .message-meta-item {
             padding-right: 5px;
-            &:after {
-                content: "|";
+
+            &::after {
                 padding-left: 5px;
+                content: '|';
             }
         }
     }

src/sass/sections/_footer.scss

@@ -1,10 +1,10 @@
 footer {
-    height: $footer-height;
     margin-top: 12px;
+    height: $footer-height;
     text-align: center;
-    font-size: 0.9em;
-    font-weight: 300;
     line-height: 1.1em;
+    font-size: .9em;
+    font-weight: 300;
 
     ul {
         display: block;
@@ -13,17 +13,20 @@ footer {
             display: inline;
             white-space: nowrap;
 
-            &:not(:last-child):after {
-                content: " \25CF";
-                font-size: 10px;
-                position: relative;
-                top: -2px;
-                margin: 0 4px;
+            &:not(:last-child) {
+                &::after {
+                    position: relative;
+                    top: -2px;
+                    margin: 0 4px;
+                    font-size: 10px;
+                    content: ' \25CF';
+                }
             }
 
             a {
-                color: white !important;
-                @include mouse-hand;
+                cursor: pointer;
+                color: #ffffff !important;
+
                 &:hover {
                     text-decoration: underline;
                 }

src/sass/sections/_header.scss

@@ -1,20 +1,19 @@
 header {
-    text-align: center;
     height: $header-height;
-    //background-color: #009688;
+    text-align: center;
 }
 
 #title {
+    position: relative;
+    top: 8px;
+
     #logo {
-        display: block;
         width: 100%;
+
         svg {
-            width: 220px;
             margin: 0 auto;
-            fill: white;
+            width: 220px;
+            fill: #ffffff;
         }
     }
-    display: block;
-    position: relative;
-    top: 8px;
 }

src/sass/sections/_navigation.scss

@@ -1,51 +1,53 @@
 // Separator for navigation items
-@mixin nav-item-separator() {
+@mixin nav-item-separator {
     border-bottom: 1px solid $border-grey;
 }
 
 #navigation-topheader {
-    background-color: #424242;
-    padding: 0 $main-padding 0 (2*$main-padding);
-    min-height: 68px;
     display: flex;
     flex-direction: row;
-    color: white;
-    box-shadow: -2px 2px 4px -2px rgba(0,0,0,0.8);
-    z-index: 21;
     align-items: center;
     justify-content: center;
+    z-index: 21;
+    box-shadow: -2px 2px 4px -2px rgba(0, 0, 0, .8);
+    background-color: #424242;
+    padding: 0 $main-padding 0 (2 * $main-padding);
+    min-height: 68px;
+    color: #ffffff;
 
     .my-identity {
-        width: 85%;
         flex-grow: 1;
+        width: 85%;
+
         span {
-            max-width: 100%;
             display: inline-block;
-            text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.25);
-            font-size: 16pt;
-            white-space: nowrap;
+            cursor: pointer;
+            max-width: 100%;
             overflow: hidden;
+            text-shadow: .5px .5px 1px rgba(0, 0, 0, .25);
             text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 16pt;
             word-wrap: break-word;
             word-break: break-all;
-            @include mouse-hand;
         }
     }
 }
 
 #navigation-header {
-    background-color: #f5f5f5;
-    box-shadow: -2px 2px 4px -2px rgba(0,0,0,0.4);
     z-index: 18;
+    box-shadow: -2px 2px 4px -2px rgba(0, 0, 0, .4);
+    background-color: #f5f5f5;
+
     .main {
         display: flex;
         flex-direction: row;
-        justify-content: flex-start;
         align-items: center;
+        justify-content: flex-start;
 
-        .md-nav-item{
+        .md-nav-item {
             :first-of-type {
-                margin-left: 0px;
+                margin-left: 0;
             }
         }
 
@@ -55,119 +57,159 @@
     }
 
     .search {
-        input[type="text"] {
-            border: 1px solid #ddd;
-            border-radius: $material-radius;
-            padding: $main-padding;
-            box-sizing: border-box;
-            width: 100%;
-            margin: 0;
-            background-color: white;
-            .md-errors-spacer {
-                display: none;
-            }
-        }
-
-        $duration-opacity: 0.1s;
-        $duration-height: 0.2s;
-        max-height: 0;
-        opacity: 0;
-        visibility: hidden;
-
-        // Animation when disappearing
+        $duration-opacity: .1s;
+        $duration-height: .2s;
         transition: opacity $duration-opacity linear,
         max-height $duration-height ease-out $duration-opacity,
         visibility 0s linear $duration-height;
+        visibility: hidden;
+        opacity: 0;
+        // Animation when disappearing
+        max-height: 0;
 
-        &.visible {
-            padding: $main-padding;
-            max-height: 50px;
-            opacity: 1;
-            visibility: visible;
+        input {
+            &[type='text'] {
+                margin: 0;
+                border: 1px solid #dddddd;
+                border-radius: $material-radius;
+                background-color: #ffffff;
+                padding: $main-padding;
+                width: 100%;
+                box-sizing: border-box;
+
+                .md-errors-spacer {
+                    display: none;
+                }
+            }
+        }
 
-            // Animation when appearing
+        &.visible {
             transition: visibility 0s,
             max-height $duration-height ease-in,
             opacity $duration-opacity linear $duration-height;
+            visibility: visible;
+            opacity: 1;
+            padding: $main-padding;
+
+            // Animation when appearing
+            max-height: 50px;
         }
     }
 }
 
 #navigation-conversations,
 #navigation-contacts {
+    @include scrollbar;
+
     .empty {
-        color: $material-grey;
         margin-top: 1em;
         margin-left: 16px;
+        color: $material-grey;
         font-size: 1.2em;
         font-weight: 300;
     }
-
-    @include scrollbar;
 }
 
 #navigation-conversations {
     $border-width: 4px;
     $border-count: 2;
-    overflow-y: auto;
-    background-color: white;
     flex: 1;
+    background-color: #ffffff;
+    overflow-y: auto;
+
     .loading-element {
         margin-top: 50px;
     }
 
     .conversation-wrapper {
-        display: block;
         @include nav-item-separator;
+        display: block;
 
         .conversation {
             display: flex;
             flex-direction: row;
             align-items: center;
+            border-left: $border-width * $border-count solid #ffffff;
             padding: (1.5 * $main-padding) $main-padding - ($border-width * ($border-count - 1));
-            border-left: $border-width * $border-count solid white;
 
-            &.active, &:hover {
-                background-color: $dark-background-color;
+            &.active,
+            &:hover {
                 border-color: $dark-background-color;
+                background-color: $dark-background-color;
             }
-            &:hover:not(.active) {
-                @include mouse-hand;
+
+            &:hover {
+                &:not(.active) {
+                    cursor: pointer;
+                }
             }
 
             // Only unread
             &.unread {
-                border-image: linear-gradient(to right, $status-error, $status-error 50%, white 50%, white 100%) 1 100%;
+                border-image: linear-gradient(
+                    to right,
+                    $status-error,
+                    $status-error 50%,
+                    #ffffff 50%,
+                    #ffffff 100%
+                ) 1 100%;
+
                 &.active {
-                    border-image: linear-gradient(to right, $status-error, $status-error 50%, $dark-background-color 50%, $dark-background-color 100%) 1 100%;
+                    border-image: linear-gradient(
+                        to right,
+                        $status-error,
+                        $status-error 50%,
+                        $dark-background-color 50%,
+                        $dark-background-color 100%
+                    ) 1 100%;
                 }
             }
 
             // Only starred
             &.starred {
-                border-image: linear-gradient(to right, $status-starred, $status-starred 50%, white 50%, white 100%) 1 100%;
+                border-image: linear-gradient(
+                    to right,
+                    $status-starred,
+                    $status-starred 50%,
+                    #ffffff 50%,
+                    #ffffff 100%
+                ) 1 100%;
+
                 &.active {
-                    border-image: linear-gradient(to right, $status-starred, $status-starred 50%, $dark-background-color 50%, $dark-background-color 100%) 1 100%;
+                    border-image: linear-gradient(
+                        to right,
+                        $status-starred,
+                        $status-starred 50%,
+                        $dark-background-color 50%,
+                        $dark-background-color 100%
+                    ) 1 100%;
                 }
             }
 
             // Both starred and unread
             &.starred.unread {
-                border-image: linear-gradient(to right, $status-error, $status-error 50%, $status-starred 50%, $status-starred 100%) 1 100%;
+                border-image: linear-gradient(
+                    to right,
+                    $status-error,
+                    $status-error 50%,
+                    $status-starred 50%,
+                    $status-starred 100%
+                ) 1 100%;
             }
 
             .avatar-box {
-                margin-right: 8px;
                 position: relative;
+                margin-right: 8px;
+
                 .loading {
                     position: absolute;
                 }
             }
 
             .conversation-box {
-                flex-grow: 1;
                 display: flex;
                 flex-direction: column;
+                flex-grow: 1;
                 overflow: hidden;
 
                 .receiver-box,
@@ -178,22 +220,25 @@
                 }
 
                 .receiver-box {
-                    flex-grow: 1;
                     display: flex;
                     flex-direction: row;
+                    flex-grow: 1;
                     justify-content: space-between;
+                    color: #000000;
                     font-weight: bold;
-                    color: black;
+
                     .title {
                         flex: 1;
-                        white-space: nowrap;
+                        margin-right: $main-padding;
                         overflow: hidden;
                         text-overflow: ellipsis;
-                        margin-right: $main-padding;
+                        white-space: nowrap;
                     }
+
                     .disabled {
                         text-decoration: line-through;
                     }
+
                     .notification-settings {
                         margin: 1px 0 0 4px;
                         padding: 0;
@@ -207,41 +252,44 @@
                     .latest-message {
                         display: flex;
                         flex-direction: row;
-                        justify-content: space-between;
                         align-items: center;
+                        justify-content: space-between;
                         color: $material-grey;
 
                         .left {
-                            white-space: nowrap;
+                            display: flex;
                             overflow: hidden;
                             text-overflow: ellipsis;
-                            display: flex;
+                            white-space: nowrap;
 
                         }
 
                         .right {
                             flex-shrink: 0;
-                            text-align: right;
                             margin-left: 24px;
+                            text-align: right;
 
                             .draft {
-                                color: #C62828;
+                                color: #c62828;
                             }
                         }
 
-                        .message-name, .message-text {
+                        .message-name,
+                        .message-text {
                             line-height: 1.7em;
                         }
 
-                        .message-name:after {
-                            content: ':';
-                            margin-right: 4px;
+                        .message-name {
+                            &::after {
+                                margin-right: 4px;
+                                content: ':';
+                            }
                         }
 
                         .message-text {
-                            white-space: nowrap;
                             overflow: hidden;
                             text-overflow: ellipsis;
+                            white-space: nowrap;
                         }
 
                         &.is-hidden {
@@ -267,6 +315,7 @@
                                 display: none;
                             }
                         }
+
                         &:not(.show-draft) {
                             .draft {
                                 display: none;
@@ -283,39 +332,38 @@
             }
 
             .badge.unread-count {
-                background-color: $status-error;
+                margin-left: 4px;
                 border-radius: 5px;
-                color: white;
-                font-size: 0.9em;
+                background-color: $status-error;
                 padding: 0 5px;
-                margin-left: 4px;
+                color: #ffffff;
+                font-size: .9em;
             }
         }
     }
 }
 
 #navigation-contacts {
-    overflow-y: scroll;
     flex: 1;
+    overflow-y: scroll;
 
     .contact {
+        @include nav-item-separator;
         display: flex;
         flex-direction: row;
-        justify-content: flex-start;
         align-items: center;
+        justify-content: flex-start;
+        border-left: 4px solid #ffffff;
         padding: 12px 8px;
-        border-left: 4px solid white;
-
-        @include nav-item-separator;
 
         .avatar-box {
             padding-right: 8px;
         }
 
         .left {
-            flex-grow: 1;
             display: flex;
             flex-direction: column;
+            flex-grow: 1;
         }
 
         .right {
@@ -329,17 +377,17 @@
         }
 
         .nickname {
-            font-size: 0.8em;
+            font-size: .8em;
         }
-    }
 
-    .contact:hover {
-        @include mouse-hand;
-        background-color: #f5f5f5;
+        &:hover {
+            background-color: #f5f5f5;
+            cursor: pointer;
+        }
     }
 
     .contact.inactive {
-        opacity: 0.5;
+        opacity: .5;
     }
 
     .hide-inactive .contact.inactive {
@@ -351,16 +399,18 @@
     position: relative;
 
     md-icon {
-        color: white;
+        color: #ffffff;
     }
 
     .fab-button-add-contact {
-        background-color: #D32F2F;
+        background-color: #d32f2f;
     }
+
     .fab-button-add-group {
-        background-color: #FF9800;
+        background-color: #ff9800;
     }
+
     .fab-button-add-distribution-list {
-        background-color: #3F51B5;
+        background-color: #3f51b5;
     }
 }

src/sass/sections/_noscript.scss

@@ -1,18 +1,18 @@
 noscript {
     div {
-        background-color: white;
         display: block;
         margin: 16px auto 0;
+        background-color: #ffffff;
+        padding: 16px;
         width: 50%;
         text-align: center;
-        padding: 16px;
     }
 
-    img#logo-noscript {
+    #logo-noscript {
         display: block;
+        margin: 16px auto;
         min-width: 100px;
         max-width: 300px;
-        margin: 16px auto;
         text-align: center;
     }
 

src/sass/sections/_status_bar.scss

@@ -1,9 +1,6 @@
-/*
- * Connection status
- */
-
+// Connection status
 #status-bar {
-    transition: all 1s ease-out;
+    transition: 1s ease-out;
     height: 5px;
 }
 
@@ -15,6 +12,7 @@ body {
             height: calc(100% - 5px) !important;
         }
     }
+
     &.expanded {
         &.status-warning,
         &.status-error {
@@ -22,22 +20,27 @@ body {
             #status-bar {
                 height: 50px;
             }
+
             // Resize messenger
             #messenger {
                 height: calc(100% - 50px);
             }
+
             @media (max-width: 640px) {
                 #status-bar {
                     height: 65px;
                 }
+
                 #messenger {
                     height: calc(100% - 65px);
                 }
             }
+
             @media (max-width: 380px) {
                 #status-bar {
                     height: 80px;
                 }
+
                 #messenger {
                     height: calc(100% - 80px);
                 }
@@ -70,6 +73,7 @@ body {
     #status-bar {
         background-color: $status-error;
     }
+
     #title .dot {
         fill: $status-error;
     }
@@ -95,14 +99,15 @@ body {
 
     // Loading indicator color
     .loading {
-        @include loading-spinner(26px, 3px, white, rgba(255, 255, 255, 0.2));
+        $light-transparent: rgba(255, 255, 255, .2);
+        @include loading-spinner(26px, 3px, #ffffff, $light-transparent);
     }
 
     > div {
-        color: white;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
-
+        $half-transparent: rgba(0, 0, 0, .5);
         margin: 8px;
+        text-shadow: 0 1px 1px $half-transparent;
+        color: #ffffff;
 
         &:first-of-type {
             margin-left: 16px;
@@ -120,5 +125,4 @@ body {
     h1 {
         font-size: inherit;
     }
-
 }

src/sass/sections/_welcome.scss

@@ -15,28 +15,31 @@
         margin-bottom: 20px;
     }
 
-    &, input {
+    &,
+    input {
         text-align: center;
     }
 
     md-input-container {
-        margin-left: 32px;
         margin-right: 32px;
+        margin-left: 32px;
     }
 
     .scan {
         .ios-only-warning {
             display: flex;
             flex-direction: horizontal;
-            padding: 8px;
-            background-color: $status-warning;
             margin-bottom: 16px;
+            background-color: $status-warning;
+            padding: 8px;
+
             p {
-                font-size: 0.8em;
-                letter-spacing: -0.2px;
-                line-height: 1.4em;
                 text-align: left;
+                line-height: 1.4em;
+                letter-spacing: -.2px;
+                font-size: .8em;
             }
+
             img {
                 margin-right: 8px;
                 width: 32px;
@@ -78,8 +81,8 @@
 
         button {
             margin-top: 0;
-            margin-left: 0;
             margin-bottom: 32px;
+            margin-left: 0;
         }
     }
 
@@ -90,8 +93,8 @@
         }
 
         ol {
-            width: 90%;
             margin: 16px auto 0;
+            width: 90%;
             list-style-position: inside;
 
             li {
@@ -113,33 +116,35 @@
 
         md-progress-circular {
             margin: 0 auto;
+
             svg path {
                 stroke-width: 12px !important;
             }
         }
 
         .info {
-            height: 250px;
+            display: flex;
             position: relative;
             top: -250px;
-            display: flex;
             flex-direction: column;
             justify-content: center;
+            height: 250px;
+
             .percentage {
-                font-size: 4em;
                 margin-bottom: 8px;
+                vertical-align: center;
                 line-height: 1em;
+                font-size: 4em;
                 font-weight: 300;
-                vertical-align: center;
             }
         }
 
         .troubleshoot {
             $troubleshoot-height: 190px;
-            height: $troubleshoot-height;
-            width: 100%;
             position: absolute;
             bottom: -$troubleshoot-height - 32px;
+            width: 100%;
+            height: $troubleshoot-height;
 
             h3 {
                 margin-bottom: 8px;
@@ -147,13 +152,13 @@
             }
 
             ul {
+                font-size: .9em;
                 list-style-type: none;
-                font-size: 0.9em;
             }
 
             li {
+                padding-bottom: .3em;
                 line-height: 1.2em;
-                padding-bottom: 0.3em;
             }
 
             .forget {
@@ -161,7 +166,7 @@
             }
 
             .reload-btn {
-                margin: 20px 10px 0px;
+                margin: 20px 10px 0;
                 padding: 0 10px;
                 height: 35px;
             }
@@ -170,15 +175,16 @@
 
     .notification {
         flex-direction: horizontal;
-        padding: 8px;
-        background-color: #ff9800;
         margin-bottom: 16px;
+        background-color: #ff9800;
+        padding: 8px;
+
         p {
-            font-size: 0.8em;
+            width: 100%;
+            text-align: center;
             line-height: 1.4em;
+            font-size: .8em;
             font-weight: bold;
-            text-align: center;
-            width: 100%;
         }
     }
 }

troubleshoot/index.html

@@ -91,8 +91,8 @@
         .small { font-size: 0.8em; font-weight: 300; }
 
         .log-data {
-            background-color: #eee;
-            border: 1px solid #ccc;
+            background-color: #eeeeee;
+            border: 1px solid #cccccc;
             padding: 8px;
         }