From 174d392e5a36d18ac4c51dfe51fce7893bcf24b3 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 8 Jun 2018 11:49:31 +0200
Subject: [PATCH] DEV: adds prettier (#5956)

Run `prettier --write "app/assets/stylesheets/**/*.scss" "plugins/**/*.scss"` after making sure you installed it with `yarn`

It's recommended to configure your editor to run prettier on file save.
---
 .prettierignore                               |   2 +
 .../stylesheets/common/admin/admin_base.scss  | 423 +++++++----
 .../common/admin/admin_reports.scss           |  12 +-
 .../stylesheets/common/admin/customize.scss   |  40 +-
 .../common/admin/dashboard_next.scss          |  89 ++-
 .../stylesheets/common/admin/flagging.scss    |   6 +-
 .../common/admin/moderation_history.scss      |   3 +-
 .../stylesheets/common/admin/suspend.scss     |   7 +-
 .../stylesheets/common/base/_topic-list.scss  |  60 +-
 app/assets/stylesheets/common/base/about.scss |   4 +-
 app/assets/stylesheets/common/base/alert.scss |   4 +-
 .../common/base/category-list.scss            |  18 +-
 .../common/base/code_highlighting.scss        |   7 +-
 .../stylesheets/common/base/colorpicker.scss  |   5 +-
 .../stylesheets/common/base/compose.scss      |  32 +-
 .../common/base/crawler_layout.scss           |   2 +-
 .../stylesheets/common/base/directory.scss    |  21 +-
 .../stylesheets/common/base/discourse.scss    |  23 +-
 .../base/edit-topic-status-update-modal.scss  |   3 +-
 app/assets/stylesheets/common/base/emoji.scss |  44 +-
 app/assets/stylesheets/common/base/faqs.scss  |   6 +-
 app/assets/stylesheets/common/base/group.scss |   5 +-
 .../stylesheets/common/base/groups.scss       |   3 +-
 .../stylesheets/common/base/header.scss       |  43 +-
 .../stylesheets/common/base/history.scss      |  40 +-
 .../stylesheets/common/base/lightbox.scss     |   9 +-
 app/assets/stylesheets/common/base/login.scss |  21 +-
 .../common/base/magnific-popup.scss           | 112 ++-
 .../stylesheets/common/base/menu-panel.scss   |  66 +-
 app/assets/stylesheets/common/base/modal.scss | 103 +--
 .../stylesheets/common/base/not-found.scss    |  12 +-
 .../stylesheets/common/base/onebox.scss       | 142 ++--
 .../common/base/request_access.scss           |   4 +-
 app/assets/stylesheets/common/base/rtl.scss   |  16 +-
 .../stylesheets/common/base/search.scss       |  61 +-
 .../stylesheets/common/base/share_link.scss   |   8 +-
 .../stylesheets/common/base/tagging.scss      |  41 +-
 .../stylesheets/common/base/tooltip.scss      |   6 +-
 .../stylesheets/common/base/topic-post.scss   | 206 ++++--
 app/assets/stylesheets/common/base/topic.scss |  31 +-
 .../stylesheets/common/base/user-badges.scss  |  25 +-
 app/assets/stylesheets/common/base/user.scss  |  43 +-
 .../common/base/username_tagsinput.scss       |  45 +-
 .../stylesheets/common/components/badges.scss |  61 +-
 .../common/components/buttons.scss            |  47 +-
 .../common/components/date-picker.scss        |   3 +-
 .../common/components/hashtag.scss            |   3 +-
 .../common/components/keyboard_shortcuts.scss |  11 +-
 .../stylesheets/common/components/navs.scss   |   6 +-
 .../common/components/user-info.scss          |   4 +-
 .../common/components/user-stream-item.scss   |  22 +-
 app/assets/stylesheets/common/d-editor.scss   |   4 +-
 .../stylesheets/common/foundation/base.scss   |  20 +-
 .../stylesheets/common/foundation/colors.scss |  18 +-
 .../common/foundation/helpers.scss            |   5 +-
 .../stylesheets/common/foundation/math.scss   |  23 +-
 .../stylesheets/common/foundation/mixins.scss |  66 +-
 .../common/foundation/variables.scss          |  87 ++-
 app/assets/stylesheets/common/input_tip.scss  |   5 +-
 .../stylesheets/common/printer-friendly.scss  |  49 +-
 .../select-kit/admin-agree-flag-dropdown.scss |   1 -
 .../common/select-kit/category-chooser.scss   |  16 +-
 .../common/select-kit/category-drop.scss      |   7 +-
 .../common/select-kit/category-row.scss       |   9 +-
 .../common/select-kit/category-selector.scss  |   5 +-
 .../common/select-kit/composer-actions.scss   |   5 +-
 .../select-kit/dropdown-select-box.scss       |  55 +-
 .../common/select-kit/mini-tag-chooser.scss   |   9 +-
 .../common/select-kit/multi-select.scss       |  13 +-
 .../select-kit/notifications-button.scss      |   2 +-
 .../common/select-kit/period-chooser.scss     |   5 +-
 .../common/select-kit/pinned-button.scss      |   8 +-
 .../common/select-kit/select-kit.scss         |  11 +-
 .../toolbar-popup-menu-options.scss           |   8 +-
 .../topic-notifications-button.scss           |   8 +-
 .../stylesheets/common/topic-entrance.scss    |   3 +-
 .../stylesheets/common/topic-timeline.scss    |  13 +-
 .../stylesheets/desktop/category-list.scss    |  14 +-
 .../desktop/components/user-stream-item.scss  |   1 -
 app/assets/stylesheets/desktop/compose.scss   |  17 +-
 app/assets/stylesheets/desktop/discourse.scss |  23 +-
 app/assets/stylesheets/desktop/group.scss     |   3 +-
 app/assets/stylesheets/desktop/header.scss    |   2 +-
 app/assets/stylesheets/desktop/history.scss   |   8 +-
 .../desktop/latest-topic-list.scss            |   6 +-
 app/assets/stylesheets/desktop/modal.scss     |  11 +-
 .../stylesheets/desktop/queued-posts.scss     |  19 +-
 .../stylesheets/desktop/topic-list.scss       | 661 +++++++++---------
 .../stylesheets/desktop/topic-post.scss       | 242 ++++---
 app/assets/stylesheets/desktop/topic.scss     |  38 +-
 app/assets/stylesheets/desktop/upload.scss    |   6 +-
 app/assets/stylesheets/desktop/user-card.scss |  52 +-
 app/assets/stylesheets/desktop/user.scss      |  19 +-
 app/assets/stylesheets/embed.scss             |  15 +-
 app/assets/stylesheets/mobile/alert.scss      |  10 +-
 app/assets/stylesheets/mobile/banner.scss     |   1 -
 .../mobile/components/user-stream-item.scss   |   6 +-
 app/assets/stylesheets/mobile/compose.scss    | 285 ++++----
 app/assets/stylesheets/mobile/discourse.scss  |   6 +-
 app/assets/stylesheets/mobile/group.scss      |   9 +-
 app/assets/stylesheets/mobile/groups.scss     |   2 +-
 app/assets/stylesheets/mobile/header.scss     |   7 +-
 app/assets/stylesheets/mobile/modal.scss      |  14 +-
 app/assets/stylesheets/mobile/search.scss     |   4 +-
 app/assets/stylesheets/mobile/topic-list.scss | 114 +--
 app/assets/stylesheets/mobile/topic-post.scss |  85 ++-
 app/assets/stylesheets/mobile/topic.scss      |  46 +-
 app/assets/stylesheets/mobile/upload.scss     |   8 +-
 app/assets/stylesheets/mobile/user.scss       |   6 +-
 app/assets/stylesheets/wizard.scss            | 114 +--
 lib/tasks/docker.rake                         |  15 +-
 package.json                                  |   1 +
 .../assets/stylesheets/details.scss           |  15 +-
 .../common/discourse-local-dates.scss         |  45 +-
 .../assets/stylesheets/presence.scss          |  16 +-
 .../poll/assets/stylesheets/common/poll.scss  |  15 +-
 .../poll/assets/stylesheets/mobile/poll.scss  |   2 +-
 yarn.lock                                     |   4 +
 118 files changed, 2558 insertions(+), 1874 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..037403136d3
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+app/assets/stylesheets/vendor/
+plugins/**/assets/stylesheets/vendor/
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 9ec5ee5f9e2..8306714be39 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -16,7 +16,9 @@ $mobile-breakpoint: 700px;
 @media (max-width: $mobile-breakpoint) {
   .admin-content {
     box-sizing: border-box;
-    *, *:before, *:after {
+    *,
+    *:before,
+    *:after {
       box-sizing: inherit;
     }
 
@@ -38,8 +40,13 @@ $mobile-breakpoint: 700px;
   width: 100%;
   margin-top: 10px;
 
-  tr {text-align: left;}
-  td, th {padding: 8px;}
+  tr {
+    text-align: left;
+  }
+  td,
+  th {
+    padding: 8px;
+  }
 
   th {
     text-align: left;
@@ -59,9 +66,15 @@ $mobile-breakpoint: 700px;
       }
     }
   }
-  tr:hover { background-color: darken($secondary, 2.5%); }
-  tr.selected { background-color: lighten($primary, 80%); }
-  .filters input { margin-bottom: 0; }
+  tr:hover {
+    background-color: darken($secondary, 2.5%);
+  }
+  tr.selected {
+    background-color: lighten($primary, 80%);
+  }
+  .filters input {
+    margin-bottom: 0;
+  }
 }
 
 .site-texts {
@@ -79,11 +92,10 @@ $mobile-breakpoint: 700px;
 
     .extra-options {
       float: right;
-      input[type=checkbox] {
+      input[type="checkbox"] {
         margin-right: 0.5em;
       }
     }
-
   }
   .text-highlight {
     font-weight: bold;
@@ -111,7 +123,6 @@ $mobile-breakpoint: 700px;
       max-height: 100px;
       color: $primary-medium;
     }
-
   }
 
   .edit-site-text {
@@ -119,7 +130,8 @@ $mobile-breakpoint: 700px;
       width: 80%;
     }
 
-    .save-messages, .title {
+    .save-messages,
+    .title {
       margin-bottom: 1em;
     }
 
@@ -235,9 +247,15 @@ $mobile-breakpoint: 700px;
       max-height: 200px;
       overflow: auto;
       width: 455px;
-      ul { margin: 0; }
-      li { list-style: none; }
-      tr td:first-of-type { width: 130px; }
+      ul {
+        margin: 0;
+      }
+      li {
+        list-style: none;
+      }
+      tr td:first-of-type {
+        width: 130px;
+      }
     }
   }
 }
@@ -323,9 +341,8 @@ $mobile-breakpoint: 700px;
   }
   button {
     margin-right: 5px;
-
   }
-  input[type=text] {
+  input[type="text"] {
     display: inline-block;
     float: left;
   }
@@ -334,7 +351,7 @@ $mobile-breakpoint: 700px;
     padding-left: 10px;
   }
   .username {
-    input[type=text] {
+    input[type="text"] {
       width: 240px;
     }
   }
@@ -391,7 +408,9 @@ $mobile-breakpoint: 700px;
   height: 150px;
 }
 
-.groups, .badges, .web-hook-container {
+.groups,
+.badges,
+.web-hook-container {
   .form-horizontal {
     & > div {
       margin-bottom: 20px;
@@ -404,11 +423,15 @@ $mobile-breakpoint: 700px;
       }
     }
 
-    input, textarea, select, .select-box {
+    input,
+    textarea,
+    select,
+    .select-box {
       width: 350px;
     }
 
-    input[type="checkbox"], input[type="radio"] {
+    input[type="checkbox"],
+    input[type="radio"] {
       width: 20px;
     }
   }
@@ -510,7 +533,8 @@ $mobile-breakpoint: 700px;
     .setting-controls {
       float: left;
     }
-    .input-setting-string, .input-setting-textarea {
+    .input-setting-string,
+    .input-setting-textarea {
       box-sizing: border-box;
       height: 30px;
       width: 100%;
@@ -537,7 +561,7 @@ $mobile-breakpoint: 700px;
         position: relative;
         line-height: $line-height-small;
         cursor: default;
-        border: 1px dashed #AAA;
+        border: 1px dashed #aaa;
         border-radius: 3px;
         background-clip: padding-box;
         -moz-user-select: none;
@@ -545,10 +569,10 @@ $mobile-breakpoint: 700px;
         width: 3em;
         height: 1em;
       }
-
     }
 
-    .desc, .validation-error {
+    .desc,
+    .validation-error {
       padding-top: 3px;
       font-size: $font-down-1;
       line-height: $line-height-large;
@@ -575,7 +599,9 @@ $mobile-breakpoint: 700px;
   }
 
   .setting.overridden.string {
-    input[type=text], input[type=password], textarea {
+    input[type="text"],
+    input[type="password"],
+    textarea {
       background-color: $highlight-medium;
     }
   }
@@ -636,7 +662,8 @@ section.details {
     background-color: $danger-low;
   }
   border-top: 1px solid $primary-low;
-  &:before, &:after {
+  &:before,
+  &:after {
     display: table;
     content: "";
   }
@@ -748,7 +775,7 @@ section.details {
         opacity: 0.5;
 
         .ace_editor {
-          pointer-events:none;
+          pointer-events: none;
 
           .ace_cursor {
             visibility: hidden;
@@ -784,7 +811,9 @@ section.details {
 }
 
 .badge-query-preview {
-  .grant-count, .sample, .error-header {
+  .grant-count,
+  .sample,
+  .error-header {
     margin-left: 10px;
   }
 
@@ -803,7 +832,12 @@ section.details {
   }
 
   .count-warning {
-    background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -60%);
+    background-color: dark-light-diff(
+      rgba($danger, 0.7),
+      $secondary,
+      50%,
+      -60%
+    );
     margin: 0 0 7px 0;
     padding: 10px 20px;
 
@@ -826,7 +860,8 @@ section.details {
       margin-right: 10px;
     }
   }
-  .next, .previous {
+  .next,
+  .previous {
     color: #333 !important;
     &.disabled {
       color: #aaa !important;
@@ -866,7 +901,7 @@ section.details {
   .section-title {
     flex: 1 1 100%;
     border-bottom: 1px solid $primary-low;
-    margin-bottom: .5em;
+    margin-bottom: 0.5em;
   }
 }
 
@@ -882,7 +917,7 @@ section.details {
   .upgrade-header {
     flex: 1 1 100%;
     @media screen and (max-width: 650px) {
-       margin: 0;
+      margin: 0;
     }
     tr {
       border: none;
@@ -928,12 +963,11 @@ section.details {
       max-width: unset;
     }
     .face {
-      margin: 0 .75em 0 0;
+      margin: 0 0.75em 0 0;
       font-size: $font-up-3;
     }
   }
 
-
   &.critical .version-notes .normal-note {
     display: none;
   }
@@ -1036,13 +1070,15 @@ table.api-keys {
         display: none;
       }
 
-      &.high-trending-up, &.trending-up {
+      &.high-trending-up,
+      &.trending-up {
         i.up {
           color: $success;
           display: inline;
         }
       }
-      &.high-trending-down, &.trending-down {
+      &.high-trending-down,
+      &.trending-down {
         i.down {
           color: $danger;
           display: inline;
@@ -1057,10 +1093,12 @@ table.api-keys {
     }
 
     tr.reverse-colors {
-      td.value.high-trending-down i.down, td.value.trending-down i.down {
+      td.value.high-trending-down i.down,
+      td.value.trending-down i.down {
         color: $success;
       }
-      td.value.high-trending-up i.up, td.value.trending-up i.up {
+      td.value.high-trending-up i.up,
+      td.value.trending-up i.up {
         color: $danger;
       }
     }
@@ -1075,22 +1113,21 @@ table.api-keys {
 
       .fa {
         font-size: $font-up-5;
-        color: $danger
+        color: $danger;
       }
     }
     @media screen and (max-width: 650px) {
-        border-left: none;
-        border-top: 1px solid $primary-low;
-        padding: 20px 0 0 0;
-        .look-here {
-          margin-left: 0;
-        }
+      border-left: none;
+      border-top: 1px solid $primary-low;
+      padding: 20px 0 0 0;
+      .look-here {
+        margin-left: 0;
+      }
     }
     h3 {
       display: flex;
     }
 
-
     .problem-messages {
       display: flex;
 
@@ -1104,21 +1141,21 @@ table.api-keys {
       ul {
         margin-left: 0;
         padding-left: 90px;
-        @media screen and (max-width:650px) {
+        @media screen and (max-width: 650px) {
           padding-left: 20px;
         }
-      li {
-        margin-bottom: 10px;
+        li {
+          margin-bottom: 10px;
         }
       }
       p.actions {
         padding-left: 75px;
-        @media screen and (max-width:650px) {
+        @media screen and (max-width: 650px) {
           padding-left: 0;
         }
       }
+    }
   }
-}
 
   &.totals {
     table {
@@ -1146,8 +1183,12 @@ table.api-keys {
 
   .referred-topic-title {
     width: 355px;
-    @include medium-width { width: 305px; }
-    @include small-width  { width: 265px; }
+    @include medium-width {
+      width: 305px;
+    }
+    @include small-width {
+      width: 265px;
+    }
   }
 }
 
@@ -1161,7 +1202,7 @@ table.api-keys {
   min-height: 500px;
 
   float: left;
-  width: 54.0540%;
+  width: 54.054%;
   margin-left: 1.8018%;
 
   p.description {
@@ -1194,7 +1235,6 @@ table.api-keys {
     top: 0;
     bottom: 0;
   }
-
 }
 
 .hook-event {
@@ -1223,7 +1263,7 @@ table.api-keys {
 }
 
 .row.groups {
-  input[type='text'] {
+  input[type="text"] {
     width: 500px;
   }
   input#group-users {
@@ -1245,11 +1285,18 @@ table.api-keys {
   }
 }
 
-.screened-emails, .screened-urls, .screened-ip-addresses {
-  .email, .url, .domain {
+.screened-emails,
+.screened-urls,
+.screened-ip-addresses {
+  .email,
+  .url,
+  .domain {
     width: 300px;
   }
-  .action, .match_count, .last_match_at, .created_at {
+  .action,
+  .match_count,
+  .last_match_at,
+  .created_at {
     text-align: center;
     width: 9.9099%;
   }
@@ -1262,7 +1309,8 @@ table.api-keys {
   }
 }
 
-.screened-emails, .screened-urls {
+.screened-emails,
+.screened-urls {
   .ip_address {
     width: 9.9099%;
     text-align: center;
@@ -1289,7 +1337,7 @@ table.api-keys {
   width: 100%;
   min-width: 990px;
   .action {
-    width: 10.810%;
+    width: 10.81%;
   }
   .staff_user {
     width: 9.009%;
@@ -1329,8 +1377,6 @@ table.api-keys {
     &:hover {
       color: $primary;
       background-color: $primary-low;
-
-
     }
     .label {
       font-weight: bold;
@@ -1352,8 +1398,13 @@ table.api-keys {
   position: absolute;
 }
 
-.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses, .permalinks, .search-logs-list, .web-hook-events {
-
+.staff-actions,
+.screened-emails,
+.screened-urls,
+.screened-ip-addresses,
+.permalinks,
+.search-logs-list,
+.web-hook-events {
   border-bottom: dotted 1px dark-light-choose($primary-low-mid, $secondary);
 
   .heading-container {
@@ -1378,7 +1429,7 @@ table.api-keys {
   }
 }
 
-.search-logs-list{
+.search-logs-list {
   .col {
     text-align: center;
     width: 15%;
@@ -1391,7 +1442,6 @@ table.api-keys {
 }
 
 .log-details-modal {
-
   pre {
     white-space: pre-wrap;
     max-height: 250px;
@@ -1422,7 +1472,7 @@ table.api-keys {
 // Backups
 // --------------------------------------------------
 
-$rollback: #3D9970;
+$rollback: #3d9970;
 $rollback-dark: darken($rollback, 10%) !default;
 $rollback-darker: darken($rollback, 20%) !default;
 
@@ -1445,7 +1495,6 @@ $rollback-darker: darken($rollback, 20%) !default;
   overflow: auto;
 }
 
-
 button.ru {
   position: relative;
   min-width: 110px;
@@ -1476,30 +1525,31 @@ button.ru {
   }
 }
 
-@media all
-and (min-width : 320px)
-and (max-width : 500px) {
+@media all and (min-width: 320px) and (max-width: 500px) {
+  .full-width {
+    margin: 0;
+  }
+  .site-settings-nav {
+    width: 100%;
+  }
+  .site-settings-detail {
+    width: 100%;
+    padding: 0;
+    border: none;
 
-.full-width { margin: 0; }
-.site-settings-nav { width: 100%; }
-.site-settings-detail {
-  width: 100%;
-  padding: 0;
-  border: none;
-
-  .settings .setting {
+    .settings .setting {
       .setting-label {
-      float: left;
-      width: 100%;
-      h3 {
-        margin-bottom: 5px;
-        font-weight: bold;
-        margin-top: 25px;
+        float: left;
+        width: 100%;
+        h3 {
+          margin-bottom: 5px;
+          font-weight: bold;
+          margin-top: 25px;
         }
       }
       .setting-value {
         width: 100%;
-        }
+      }
     }
   }
 
@@ -1515,18 +1565,28 @@ and (max-width : 500px) {
   .admin-container {
     h2 {
       float: left;
-      }
+    }
   }
 
-  .dashboard-left, .dashboard-right { width: 100%; }
-  .dashboard-stats { margin: 0; }
+  .dashboard-left,
+  .dashboard-right {
+    width: 100%;
+  }
+  .dashboard-stats {
+    margin: 0;
+  }
 
   .badges {
-    .current-badge {margin: 70px 0 0 0;}
-    .current-badge-actions {padding: 0;}
+    .current-badge {
+      margin: 70px 0 0 0;
+    }
+    .current-badge-actions {
+      padding: 0;
+    }
   }
 
-  .customize .content-list, .customize .current-style {
+  .customize .content-list,
+  .customize .current-style {
     width: 100%;
   }
 }
@@ -1549,12 +1609,16 @@ and (max-width : 500px) {
 }
 
 tr.not-activated {
-  td, td a, td a:visited {
+  td,
+  td a,
+  td a:visited {
     color: #bbb;
   }
 }
 .details.not-activated {
-  .username .value, .email .value a, .email .value a:visited {
+  .username .value,
+  .email .value a,
+  .email .value a:visited {
     color: #bbb;
   }
 }
@@ -1575,14 +1639,15 @@ tr.not-activated {
       float: left;
     }
 
-    .form-element, .form-element-desc {
+    .form-element,
+    .form-element-desc {
       float: left;
       min-height: 30px;
       padding: 0.25em 0;
 
       &.input-area {
         width: 75%;
-        input[type=text] {
+        input[type="text"] {
           width: 50%;
         }
       }
@@ -1609,7 +1674,7 @@ tr.not-activated {
 }
 
 .preview {
- margin-top: 5px;
+  margin-top: 5px;
 }
 
 table#user-badges {
@@ -1642,7 +1707,7 @@ table#user-badges {
     height: 30px;
   }
 
-  input[type=text] {
+  input[type="text"] {
     width: 90%;
   }
 }
@@ -1650,14 +1715,20 @@ table#user-badges {
 // Permalinks
 
 .permalinks {
-  .url, .topic, .category, .external_url, .post {
+  .url,
+  .topic,
+  .category,
+  .external_url,
+  .post {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .url {
     width: 200px;
   }
-  .topic, .post, .external_url {
+  .topic,
+  .post,
+  .external_url {
     width: 180px;
   }
   .category {
@@ -1673,7 +1744,6 @@ table#user-badges {
   margin-bottom: 10px;
 }
 
-
 // embedding
 
 .embeddable-hosts {
@@ -1690,7 +1760,7 @@ table#user-badges {
   margin-bottom: 2em;
 
   .embed-setting {
-    input[type=text] {
+    input[type="text"] {
       width: 50%;
     }
     margin: 0.75em 0;
@@ -1943,8 +2013,6 @@ table#user-badges {
   left: -100%;
 }
 
-
-
 .cboxcontainer {
   display: inline-block;
   padding: 8px;
@@ -1969,46 +2037,119 @@ table#user-badges {
   margin-right: 20px;
 }
 
-.admin-reports, .dashboard-next {
+.admin-reports,
+.dashboard-next {
   &.admin-contents {
     margin: 0;
   }
 }
 
-.cbox0 { background: blend-primary-secondary(0%); }
-.cbox10 { background: blend-primary-secondary(10%); }
-.cbox20 { background: blend-primary-secondary(20%); }
-.cbox30 { background: blend-primary-secondary(30%); }
-.cbox40 { background: blend-primary-secondary(40%); }
-.cbox50 { background: blend-primary-secondary(50%); }
-.cbox60 { background: blend-primary-secondary(60%); }
-.cbox70 { background: blend-primary-secondary(70%); }
-.cbox80 { background: blend-primary-secondary(80%); }
-.cbox90 { background: blend-primary-secondary(90%); }
-.cbox100 { background: blend-primary-secondary(100%); }
-.cbox5 { background: blend-primary-secondary(5%); }
-.cbox7 { background: blend-primary-secondary(7%); }
-.cbox15 { background: blend-primary-secondary(15%); }
-.cbox17 { background: blend-primary-secondary(17%); }
-.cbox25 { background: blend-primary-secondary(25%); }
-.cbox95 { background: blend-primary-secondary(95%); }
-.cbox85 { background: blend-primary-secondary(85%); }
-.cbox75 { background: blend-primary-secondary(75%); }
+.cbox0 {
+  background: blend-primary-secondary(0%);
+}
+.cbox10 {
+  background: blend-primary-secondary(10%);
+}
+.cbox20 {
+  background: blend-primary-secondary(20%);
+}
+.cbox30 {
+  background: blend-primary-secondary(30%);
+}
+.cbox40 {
+  background: blend-primary-secondary(40%);
+}
+.cbox50 {
+  background: blend-primary-secondary(50%);
+}
+.cbox60 {
+  background: blend-primary-secondary(60%);
+}
+.cbox70 {
+  background: blend-primary-secondary(70%);
+}
+.cbox80 {
+  background: blend-primary-secondary(80%);
+}
+.cbox90 {
+  background: blend-primary-secondary(90%);
+}
+.cbox100 {
+  background: blend-primary-secondary(100%);
+}
+.cbox5 {
+  background: blend-primary-secondary(5%);
+}
+.cbox7 {
+  background: blend-primary-secondary(7%);
+}
+.cbox15 {
+  background: blend-primary-secondary(15%);
+}
+.cbox17 {
+  background: blend-primary-secondary(17%);
+}
+.cbox25 {
+  background: blend-primary-secondary(25%);
+}
+.cbox95 {
+  background: blend-primary-secondary(95%);
+}
+.cbox85 {
+  background: blend-primary-secondary(85%);
+}
+.cbox75 {
+  background: blend-primary-secondary(75%);
+}
 
-.dbox0 { background: dark-light-diff($primary, $secondary, 0%, -0%); }
-.dbox10 { background: dark-light-diff($primary, $secondary, 10%, -10%); }
-.dbox20 { background: dark-light-diff($primary, $secondary, 20%, -20%); }
-.dbox30 { background: dark-light-diff($primary, $secondary, 30%, -30%); }
-.dbox40 { background: dark-light-diff($primary, $secondary, 40%, -40%); }
-.dbox50 { background: blend-primary-secondary(50%); }
-.dbox60 { background: dark-light-diff($primary, $secondary, 60%, -60%); }
-.dbox70 { background: dark-light-diff($primary, $secondary, 70%, -70%); }
-.dbox80 { background: dark-light-diff($primary, $secondary, 80%, -80%); }
-.dbox90 { background: $primary-low;  }
-.dbox100 { background: dark-light-diff($primary, $secondary, 100%, -100%); }
-.dbox5 { background: dark-light-diff($primary, $secondary, 5%, -5%); }
-.dbox15 { background: dark-light-diff($primary, $secondary, 15%, -15%); }
-.dbox25 { background: dark-light-diff($primary, $secondary, 25%, -25%); }
-.dbox95 { background: dark-light-diff($primary, $secondary, 95%, -95%); }
-.dbox85 { background: dark-light-diff($primary, $secondary, 85%, -85%); }
-.dbox75 { background: dark-light-diff($primary, $secondary, 75%, -75%); }
+.dbox0 {
+  background: dark-light-diff($primary, $secondary, 0%, -0%);
+}
+.dbox10 {
+  background: dark-light-diff($primary, $secondary, 10%, -10%);
+}
+.dbox20 {
+  background: dark-light-diff($primary, $secondary, 20%, -20%);
+}
+.dbox30 {
+  background: dark-light-diff($primary, $secondary, 30%, -30%);
+}
+.dbox40 {
+  background: dark-light-diff($primary, $secondary, 40%, -40%);
+}
+.dbox50 {
+  background: blend-primary-secondary(50%);
+}
+.dbox60 {
+  background: dark-light-diff($primary, $secondary, 60%, -60%);
+}
+.dbox70 {
+  background: dark-light-diff($primary, $secondary, 70%, -70%);
+}
+.dbox80 {
+  background: dark-light-diff($primary, $secondary, 80%, -80%);
+}
+.dbox90 {
+  background: $primary-low;
+}
+.dbox100 {
+  background: dark-light-diff($primary, $secondary, 100%, -100%);
+}
+.dbox5 {
+  background: dark-light-diff($primary, $secondary, 5%, -5%);
+}
+.dbox15 {
+  background: dark-light-diff($primary, $secondary, 15%, -15%);
+}
+.dbox25 {
+  background: dark-light-diff($primary, $secondary, 25%, -25%);
+}
+.dbox95 {
+  background: dark-light-diff($primary, $secondary, 95%, -95%);
+}
+.dbox85 {
+  background: dark-light-diff($primary, $secondary, 85%, -85%);
+}
+.dbox75 {
+  background: dark-light-diff($primary, $secondary, 75%, -75%);
+}
diff --git a/app/assets/stylesheets/common/admin/admin_reports.scss b/app/assets/stylesheets/common/admin/admin_reports.scss
index 9a064a85c02..26c54cccc89 100644
--- a/app/assets/stylesheets/common/admin/admin_reports.scss
+++ b/app/assets/stylesheets/common/admin/admin_reports.scss
@@ -1,8 +1,8 @@
 .admin-reports {
   h3 {
     border-bottom: 1px solid $primary-low;
-    margin-bottom: .5em;
-    padding-bottom: .5em;
+    margin-bottom: 0.5em;
+    padding-bottom: 0.5em;
   }
 
   .report-container {
@@ -24,18 +24,20 @@
       flex-direction: column;
       margin-left: 2em;
 
-      .date-picker  {
+      .date-picker {
         margin: 0;
         width: 195px;
       }
 
-      .combo-box, .date-picker-wrapper, .btn {
+      .combo-box,
+      .date-picker-wrapper,
+      .btn {
         width: 100%;
         margin-bottom: 1em;
       }
     }
 
-    @include small-width  {
+    @include small-width {
       flex-direction: column;
       min-width: 100%;
 
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 453af75209e..c272b1d1c17 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -19,7 +19,8 @@
   }
 
   .edit-main-nav {
-    .nav-pills:after, .nav-pills:before {
+    .nav-pills:after,
+    .nav-pills:before {
       display: inline;
       content: "";
     }
@@ -65,7 +66,7 @@
       width: 25%;
       h3 {
         margin-top: 0;
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
       }
     }
   }
@@ -93,7 +94,8 @@
   .nav.nav-pills.fields {
     margin-left: 10px;
   }
-  .content-list, .current-style {
+  .content-list,
+  .current-style {
     float: left;
   }
   .content-list ul {
@@ -187,18 +189,33 @@
   }
   .color-scheme {
     .controls {
-      span, button, a {
+      span,
+      button,
+      a {
         margin-right: 10px;
       }
     }
   }
   .colors {
-    thead th       { border: none; }
-    td.hex         { width: 160px; }
-    td.actions     { width: 200px; }
-    .hex-input     { width: 80px; margin-bottom: 0; }
-    .hex           { text-align: center; }
-    .description   { color: dark-light-choose($primary-medium, $secondary-medium); }
+    thead th {
+      border: none;
+    }
+    td.hex {
+      width: 160px;
+    }
+    td.actions {
+      width: 200px;
+    }
+    .hex-input {
+      width: 80px;
+      margin-bottom: 0;
+    }
+    .hex {
+      text-align: center;
+    }
+    .description {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+    }
 
     .invalid .hex input {
       background-color: white;
@@ -209,7 +226,7 @@
 
   .status-message {
     display: block;
-    font-size:  $font-down-1;
+    font-size: $font-down-1;
     margin-top: 8px;
   }
 
@@ -258,4 +275,3 @@
     }
   }
 }
-
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index 78e4cdf0c0b..837bf8ad177 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -7,15 +7,15 @@
     display: flex;
     justify-content: space-between;
 
-    @include small-width  {
+    @include small-width {
       flex-direction: column;
     }
 
     .section-column {
-      min-width: calc(50% - .5em);
+      min-width: calc(50% - 0.5em);
       max-width: 100%;
 
-      &:last-child, {
+      &:last-child {
         margin-left: 1em;
       }
 
@@ -23,7 +23,7 @@
         margin-right: 1em;
       }
 
-      @include small-width  {
+      @include small-width {
         min-width: 100%;
 
         &:last-child {
@@ -36,7 +36,7 @@
       }
     }
 
-    @include small-width  {
+    @include small-width {
       .section-column:last-child,
       .section-column:first-child {
         margin: 0;
@@ -47,7 +47,7 @@
   .section {
     .section-title {
       h2 {
-        margin: 0 .5em 0 0;
+        margin: 0 0.5em 0 0;
       }
 
       display: flex;
@@ -57,8 +57,8 @@
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid $primary-low;
-      margin-bottom: .5em;
-      padding-bottom: .5em;
+      margin-bottom: 0.5em;
+      padding-bottom: 0.5em;
     }
 
     .section-body {
@@ -72,7 +72,7 @@
     flex-wrap: wrap;
 
     .chart {
-      max-width: calc(100% * 1/3.2);
+      max-width: calc(100% * 1 / 3.2);
       width: 100%;
       flex-grow: 1;
       flex-basis: 100%;
@@ -80,7 +80,7 @@
       margin-bottom: 1em;
     }
 
-    @include small-width  {
+    @include small-width {
       .chart {
         max-width: 100%;
       }
@@ -101,7 +101,8 @@
     display: flex;
     border: 1px solid $primary-low;
 
-    .durability, .last-dashboard-update {
+    .durability,
+    .last-dashboard-update {
       flex: 1 1 50%;
       box-sizing: border-box;
       margin: 1em 0;
@@ -113,7 +114,8 @@
       flex-wrap: wrap;
       justify-content: space-between;
 
-      .backups, .uploads {
+      .backups,
+      .uploads {
         flex: 1 1 100%;
       }
 
@@ -128,7 +130,8 @@
 
     @media screen and (max-width: 400px) {
       flex-wrap: wrap;
-      .durability, .last-dashboard-update {
+      .durability,
+      .last-dashboard-update {
         flex: 1 1 100%;
         text-align: left;
       }
@@ -154,7 +157,8 @@
     }
   }
 
-  .top-referred-topics, .trending-search {
+  .top-referred-topics,
+  .trending-search {
     th:first-of-type {
       text-align: left;
     }
@@ -168,7 +172,8 @@
 
   .community-health {
     .period-chooser .period-chooser-header {
-      .selected-name, .d-icon {
+      .selected-name,
+      .d-icon {
         font-size: $font-up-1;
       }
 
@@ -183,19 +188,21 @@
   .status {
     display: flex;
     justify-content: space-between;
-    margin-bottom: .5em;
-    padding: 0 .45em 0 0;
+    margin-bottom: 0.5em;
+    padding: 0 0.45em 0 0;
 
     .title {
       font-size: $font-up-1;
       font-weight: 700;
       margin: 0;
 
-      a { color: $primary; }
+      a {
+        color: $primary;
+      }
 
       .info {
         cursor: pointer;
-        margin-left: .25em;
+        margin-left: 0.25em;
         color: $primary-low-mid;
 
         &:hover {
@@ -207,11 +214,13 @@
     .trend {
       align-items: center;
 
-      &.trending-down, &.high-trending-down {
+      &.trending-down,
+      &.high-trending-down {
         color: $danger;
       }
 
-      &.trending-up, &.high-trending-up {
+      &.trending-up,
+      &.high-trending-up {
         color: $success;
       }
 
@@ -239,7 +248,7 @@
     min-width: 0;
   }
 
-  @include small-width  {
+  @include small-width {
     max-width: 100%;
   }
 
@@ -265,7 +274,8 @@
 
     h3 {
       margin: 1em 0;
-      a, a:visited {
+      a,
+      a:visited {
         color: $primary;
       }
     }
@@ -280,7 +290,7 @@
     padding: 1em;
   }
 
-  @media screen and (max-width: 650px)  {
+  @media screen and (max-width: 650px) {
     table {
       tbody tr td {
         font-size: $font-down-1;
@@ -353,11 +363,17 @@
             }
           }
 
-          &.high-trending-up, &.trending-up {
-            i { color: $success; }
+          &.high-trending-up,
+          &.trending-up {
+            i {
+              color: $success;
+            }
           }
-          &.high-trending-down, &.trending-down {
-            i { color: $danger; }
+          &.high-trending-down,
+          &.trending-down {
+            i {
+              color: $danger;
+            }
           }
         }
       }
@@ -370,8 +386,9 @@
   flex-wrap: wrap;
   justify-content: space-between;
   margin-left: -5%;
-  margin: 2em 0 .75em -5%;   // Negative margin allows for a margin when in 2-columns,
-  .dashboard-inline-table { //  and "hides" margin when the item spans 100% width
+  margin: 2em 0 0.75em -5%; // Negative margin allows for a margin when in 2-columns,
+  .dashboard-inline-table {
+    //  and "hides" margin when the item spans 100% width
     flex: 1 0 auto;
     max-width: 95%;
   }
@@ -399,12 +416,13 @@
     .value {
       padding: 0 8px 0 5px;
     }
-    &.user-newuser{
+    &.user-newuser {
       .label {
         color: $primary-high;
       }
     }
-    &.user-basic , &.user-member {
+    &.user-basic,
+    &.user-member {
       border-color: $bronze;
       .label {
         border-color: $bronze;
@@ -461,7 +479,9 @@
       text-align: center;
     }
     @media screen and (max-width: 400px) {
-      .d-icon { display: none; }
+      .d-icon {
+        display: none;
+      }
       td.title {
         padding: 8px 0 8px 4px;
       }
@@ -469,10 +489,9 @@
   }
 }
 
-
 .rtl .dashboard-next {
   .section-column {
-    &:last-child, {
+    &:last-child {
       margin-right: 1em;
       margin-left: 0;
     }
diff --git a/app/assets/stylesheets/common/admin/flagging.scss b/app/assets/stylesheets/common/admin/flagging.scss
index e4d191678ea..4010a7e9c4c 100644
--- a/app/assets/stylesheets/common/admin/flagging.scss
+++ b/app/assets/stylesheets/common/admin/flagging.scss
@@ -1,11 +1,13 @@
 .flagged-post.hidden-post {
-  .flagged-post-excerpt, .flagged-post-avatar {
+  .flagged-post-excerpt,
+  .flagged-post-avatar {
     opacity: 0.5;
   }
 }
 
 .flagged-post.deleted {
-  .flagged-post-excerpt, .flagged-post-avatar {
+  .flagged-post-excerpt,
+  .flagged-post-avatar {
     background-color: $danger-low;
   }
 }
diff --git a/app/assets/stylesheets/common/admin/moderation_history.scss b/app/assets/stylesheets/common/admin/moderation_history.scss
index 37ca38e5455..66c174e0a5b 100644
--- a/app/assets/stylesheets/common/admin/moderation_history.scss
+++ b/app/assets/stylesheets/common/admin/moderation_history.scss
@@ -6,7 +6,8 @@
   td.date {
     padding-right: 1em;
   }
-  td, th {
+  td,
+  th {
     padding-bottom: 0.5em;
     vertical-align: top;
   }
diff --git a/app/assets/stylesheets/common/admin/suspend.scss b/app/assets/stylesheets/common/admin/suspend.scss
index 8e2ab667e1f..f8c0c943e5a 100644
--- a/app/assets/stylesheets/common/admin/suspend.scss
+++ b/app/assets/stylesheets/common/admin/suspend.scss
@@ -1,5 +1,4 @@
 .suspend-user-modal {
-
   .until-controls {
     margin-bottom: 1em;
   }
@@ -8,11 +7,13 @@
     width: 100%;
   }
 
-  .suspend-reason-label, .suspend-message-label {
+  .suspend-reason-label,
+  .suspend-message-label {
     margin-bottom: 0.5em;
   }
 
-  .textarea, input[type=text] {
+  .textarea,
+  input[type="text"] {
     box-sizing: border-box;
     height: 2.5em;
   }
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 82fff84febe..1b190f4e33f 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -26,20 +26,25 @@
     .select-kit-collection {
       font-size: $font-down-1;
       max-height: 40vh;
-      .texts, .icons {
+      .texts,
+      .icons {
         font-size: $font-up-1;
       }
     }
-    &.categories-admin-dropdown, &.category-notifications-button, &.tag-notifications-button {
+    &.categories-admin-dropdown,
+    &.category-notifications-button,
+    &.tag-notifications-button {
       float: right;
     }
   }
 }
-  
+
 .topic-list-item.visited,
 .latest-topic-list-item.visited,
 .category-topic-link.visited {
-  a.title:not(.badge-notification) { color: $primary-medium; }
+  a.title:not(.badge-notification) {
+    color: $primary-medium;
+  }
 }
 
 .topic-list-main-link {
@@ -103,14 +108,14 @@
     line-height: $line-height-large;
     text-align: left;
     vertical-align: middle;
-
   }
   th {
     color: dark-light-choose($primary-medium, $secondary-medium);
     font-weight: normal;
     font-size: $font-0;
-    button .d-icon {color: dark-light-choose($primary-medium, $secondary-medium);}
-
+    button .d-icon {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+    }
   }
   td {
     color: dark-light-choose($primary-medium, $secondary-medium);
@@ -172,17 +177,24 @@
       padding: 15px 5px;
     }
   }
-
 }
 
-.heatmap-high, .heatmap-high a {color: #fe7a15 !important;}
-.heatmap-med, .heatmap-med a {color: #cf7721 !important;}
-.heatmap-low, .heatmap-low a {color: #9b764f !important;}
+.heatmap-high,
+.heatmap-high a {
+  color: #fe7a15 !important;
+}
+.heatmap-med,
+.heatmap-med a {
+  color: #cf7721 !important;
+}
+.heatmap-low,
+.heatmap-low a {
+  color: #9b764f !important;
+}
 
 .topic-list.categories {
-
   .category .badge-notification {
-    background-color:transparent;
+    background-color: transparent;
     color: $primary-medium;
   }
 
@@ -202,16 +214,20 @@
     }
   }
 
-    table.categoryStats {
-      td {
-        padding: 2px;
-        vertical-align: bottom;
-        line-height: $line-height-large;
-        &.value { text-align: right; font-size: $font-up-3; }
-        &.unit  { text-align: left; }
+  table.categoryStats {
+    td {
+      padding: 2px;
+      vertical-align: bottom;
+      line-height: $line-height-large;
+      &.value {
+        text-align: right;
+        font-size: $font-up-3;
+      }
+      &.unit {
+        text-align: left;
       }
     }
-
+  }
 }
 
 .loading .topic-list {
@@ -313,4 +329,4 @@ div.education {
 //     right *
 .topic-post-badges {
   white-space: nowrap;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/common/base/about.scss b/app/assets/stylesheets/common/base/about.scss
index 65e09d27c94..c147abe6fff 100644
--- a/app/assets/stylesheets/common/base/about.scss
+++ b/app/assets/stylesheets/common/base/about.scss
@@ -12,13 +12,13 @@ section.about {
       text-align: left;
     }
 
-    td, th {
+    td,
+    th {
       padding: 10px;
     }
 
     td.title {
       width: 33%;
     }
-
   }
 }
diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index 3d93a7be470..1d5dbd1cac5 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -30,11 +30,11 @@
     -webkit-appearance: none;
   }
   &.alert-success {
-    background-color:  $success-medium;
+    background-color: $success-medium;
     color: $primary;
   }
   &.alert-error {
-    background-color:  rgba($danger-low, .5);
+    background-color: rgba($danger-low, 0.5);
     color: $primary;
   }
   &.alert-info {
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index ebd131dadbb..5289e4c48d5 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -6,7 +6,7 @@
   }
   .category-name {
     display: inline-block;
-    max-width: 100%; 
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: text-top;
@@ -14,7 +14,8 @@
   }
 }
 
-.category-boxes, .category-boxes-with-topics {
+.category-boxes,
+.category-boxes-with-topics {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
@@ -153,12 +154,17 @@
       }
     }
     li:before {
-      content: '\f0f6';
-      font-family: 'FontAwesome';
+      content: "\f0f6";
+      font-family: "FontAwesome";
       float: left;
       margin-left: -1.5em;
     }
-    li.topic-pinned:before { content: '\f08d'; }
-    li.topic-closed:before, li.topic-archived:before { content: '\f023'; }
+    li.topic-pinned:before {
+      content: "\f08d";
+    }
+    li.topic-closed:before,
+    li.topic-archived:before {
+      content: "\f023";
+    }
   }
 }
diff --git a/app/assets/stylesheets/common/base/code_highlighting.scss b/app/assets/stylesheets/common/base/code_highlighting.scss
index e8742feb4dd..bfd0866d9ca 100644
--- a/app/assets/stylesheets/common/base/code_highlighting.scss
+++ b/app/assets/stylesheets/common/base/code_highlighting.scss
@@ -56,7 +56,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .haskell .hljs-type,
 .vhdl .hljs-literal,
 .tex .hljs-command {
-  color: dark-light-choose(#458, #9AE);
+  color: dark-light-choose(#458, #9ae);
   font-weight: bold;
 }
 
@@ -110,14 +110,15 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
   color: #aaa;
 }
 
-
 /*
 --------------------------------------------------------------------------------
 |                       SHOULD NOT BE REMOVED                                  |
 --------------------------------------------------------------------------------
 */
 
-p > code, li > code, pre > code {
+p > code,
+li > code,
+pre > code {
   color: dark-light-choose(#333, #f8f8f8);
   background: dark-light-choose(#f8f8f8, #333);
 }
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index d78ff1684b7..76771e6873c 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -18,12 +18,11 @@
     max-width: 240px;
 
     .colorpicker {
-      border: 1px solid $primary-low; 
+      border: 1px solid $primary-low;
       margin-right: 2px;
       width: 16px;
       height: 16px;
-      font-size: 0.286em
-;
+      font-size: 0.286em;
       &.used-color {
         background: image-url("chosen-sprite.png") -19px 13px;
       }
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 70e8ea148b2..86ab628a50c 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -11,13 +11,14 @@
   max-width: 1475px;
   width: 100%;
   &.hide-preview {
-    max-width:740px;
+    max-width: 740px;
   }
   @media screen and (max-width: 1200px) {
     min-width: 0;
   }
-  z-index: z("composer","content");
-  transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease;
+  z-index: z("composer", "content");
+  transition: height 250ms ease, background 250ms ease, transform 250ms ease,
+    max-width 250ms ease;
   background-color: $secondary;
   box-shadow: shadow("composer");
 
@@ -78,7 +79,8 @@
     .draft-text {
       display: block;
     }
-    .grippie, .saving-text {
+    .grippie,
+    .saving-text {
       display: none;
     }
   }
@@ -116,7 +118,9 @@
         text-overflow: ellipsis;
       }
 
-      .topic-link, .user-link, .post-link {
+      .topic-link,
+      .user-link,
+      .post-link {
         margin-right: 5px;
       }
 
@@ -230,7 +234,7 @@
     flex: 1 1 25%;
     margin: 0 0 5px 0;
     background: $secondary;
-    z-index: z("composer","dropdown");
+    z-index: z("composer", "dropdown");
     @media all and (max-width: 900px) {
       margin: 0;
       flex: 1 1 100%;
@@ -238,9 +242,9 @@
   }
 
   .popup-tip {
-    z-index: z("composer","dropdown");
+    z-index: z("composer", "dropdown");
   }
-    
+
   .wmd-controls {
     position: relative;
     display: flex;
@@ -305,7 +309,8 @@
     }
   }
 
-  #draft-status, #file-uploading {
+  #draft-status,
+  #file-uploading {
     color: $primary-high;
   }
 }
@@ -315,7 +320,7 @@
 }
 
 .autocomplete {
-  z-index: z("composer","dropdown") + 1;
+  z-index: z("composer", "dropdown") + 1;
   position: absolute;
   width: 240px;
   background-color: $secondary;
@@ -361,14 +366,15 @@
 
 div.ac-wrap.disabled {
   input {
-    display:none;
+    display: none;
   }
   .item a {
-    display:none;
+    display: none;
   }
 }
 
-div.ac-wrap div.item a.remove, .remove-link {
+div.ac-wrap div.item a.remove,
+.remove-link {
   margin-left: 4px;
   font-size: $font-down-1;
   line-height: $line-height-small;
diff --git a/app/assets/stylesheets/common/base/crawler_layout.scss b/app/assets/stylesheets/common/base/crawler_layout.scss
index 9d072e7c70d..d7dcbf694d8 100644
--- a/app/assets/stylesheets/common/base/crawler_layout.scss
+++ b/app/assets/stylesheets/common/base/crawler_layout.scss
@@ -8,7 +8,7 @@ body.crawler {
     padding: 10px;
     box-shadow: shadow("header");
   }
-  div.topic-list div[itemprop='itemListElement'] {
+  div.topic-list div[itemprop="itemListElement"] {
     padding: 10px 0;
     border-bottom: 1px solid #e9e9e9;
     .page-links a {
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 3b8315da391..bedecb8d553 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -23,20 +23,22 @@
     width: 100%;
     margin-bottom: 1em;
 
-    td, th {
+    td,
+    th {
       padding: 0.5em;
       text-align: left;
       border-bottom: 1px solid $primary-low;
       @media screen and (max-width: $small-width) {
-        padding: .5em .25em;
+        padding: 0.5em 0.25em;
       }
 
-      .number, .time-read {
+      .number,
+      .time-read {
         font-size: $font-up-3;
         color: $primary-medium;
         @media screen and (max-width: $small-width) {
-         font-size: $font-up-1;
-        }          
+          font-size: $font-up-1;
+        }
       }
       .time-read {
         white-space: nowrap;
@@ -51,7 +53,8 @@
         color: $love;
         margin-right: 0.5em;
       }
-      .d-icon-chevron-down, .d-icon-chevron-up {
+      .d-icon-chevron-down,
+      .d-icon-chevron-up {
         margin-left: 0.5em;
       }
 
@@ -62,7 +65,11 @@
   }
   .me {
     background-color: dark-light-choose($highlight-low, $highlight-medium);
-    .username a, .name, .title, .number, .time-read {
+    .username a,
+    .name,
+    .title,
+    .number,
+    .time-read {
       color: $primary-medium;
     }
   }
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 6c7ab1802cf..69a262968ab 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -66,7 +66,7 @@ h4,
 h5,
 h6 {
   margin-top: 0;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 button {
@@ -107,7 +107,7 @@ img.avatar {
 //                                                      26,
 //                                                      '15
 span.relative-date {
-  white-space:nowrap;
+  white-space: nowrap;
 }
 
 label {
@@ -131,7 +131,10 @@ input {
   }
 
   &.invalid {
-    background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%));
+    background-color: dark-light-choose(
+      $danger-low,
+      scale-color($danger, $lightness: -60%)
+    );
   }
 
   .radio &[type="radio"],
@@ -188,7 +191,7 @@ input {
     display: inline-block;
     padding: $input-padding;
     margin-bottom: 9px;
-    font-size:  $font-0;
+    font-size: $font-0;
     line-height: $line-height-large;
     color: $primary;
     background-color: $secondary;
@@ -270,7 +273,7 @@ select {
 // numbers get dimmer as they get colder
 .coldmap {
   &-high {
-  color: dark-light-choose($primary-low-mid, $secondary-high) !important;
+    color: dark-light-choose($primary-low-mid, $secondary-high) !important;
   }
 
   &-med {
@@ -297,7 +300,7 @@ select {
 }
 
 .clear-transitions {
-  transition:none !important;
+  transition: none !important;
 }
 
 .tip {
@@ -340,7 +343,11 @@ select {
   height: 80px;
   top: -18px;
   right: -18px;
-  background-image: radial-gradient(40px at 50% 50% , transparent 95%, $primary 100%);
+  background-image: radial-gradient(
+    40px at 50% 50%,
+    transparent 95%,
+    $primary 100%
+  );
   opacity: 0.85;
 }
 
@@ -351,7 +358,7 @@ select {
   top: -18px !important;
   right: -18px !important;
   box-shadow: 0 0 0 9999px rgba($primary, 0.85);
-  z-index: z("modal","overlay");
+  z-index: z("modal", "overlay");
 }
 
 .ring-first-notification {
diff --git a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
index ba989a4f0d9..5e026615719 100644
--- a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
@@ -7,7 +7,8 @@
     width: 50%;
   }
 
-  input.date-picker, input[type="time"] {
+  input.date-picker,
+  input[type="time"] {
     width: 150px;
     text-align: left;
   }
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index 4588662b6df..7a3b46a5de4 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -6,7 +6,7 @@ img.emoji {
 
 .emoji-picker {
   background-clip: padding-box;
-  z-index: z("modal","content"); 
+  z-index: z("modal", "content");
   position: fixed;
   display: none;
   flex-direction: row;
@@ -38,7 +38,8 @@ img.emoji {
   }
 }
 
-.emoji-picker .category-icon.current, .emoji-picker .category-icon:hover {
+.emoji-picker .category-icon.current,
+.emoji-picker .category-icon:hover {
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
 }
@@ -72,7 +73,7 @@ img.emoji {
   color: $primary;
 }
 
-.emoji-picker .section-header .clear-recent .fa{
+.emoji-picker .section-header .clear-recent .fa {
   margin: 0;
   padding: 0;
   color: dark-light-choose($header_primary-medium, $header_primary);
@@ -123,12 +124,24 @@ img.emoji {
   justify-content: center;
   cursor: pointer;
 }
-.emoji-picker .diversity-picker .diversity-scale.default { background: #ffcc4d; }
-.emoji-picker .diversity-picker .diversity-scale.light { background: #f7dece; }
-.emoji-picker .diversity-picker .diversity-scale.medium-light { background: #f3d2a2; }
-.emoji-picker .diversity-picker .diversity-scale.medium { background: #d5ab88; }
-.emoji-picker .diversity-picker .diversity-scale.medium-dark { background: #af7e57; }
-.emoji-picker .diversity-picker .diversity-scale.dark { background: #7c533e; }
+.emoji-picker .diversity-picker .diversity-scale.default {
+  background: #ffcc4d;
+}
+.emoji-picker .diversity-picker .diversity-scale.light {
+  background: #f7dece;
+}
+.emoji-picker .diversity-picker .diversity-scale.medium-light {
+  background: #f3d2a2;
+}
+.emoji-picker .diversity-picker .diversity-scale.medium {
+  background: #d5ab88;
+}
+.emoji-picker .diversity-picker .diversity-scale.medium-dark {
+  background: #af7e57;
+}
+.emoji-picker .diversity-picker .diversity-scale.dark {
+  background: #7c533e;
+}
 
 .emoji-picker .diversity-picker .diversity-scale.selected i {
   display: block;
@@ -141,7 +154,7 @@ img.emoji {
 .emoji-picker .diversity-picker .d-icon {
   color: #fff;
   font-size: $font-0;
-  text-shadow: 0.5px 1.5px 0 rgba(0,0,0,0.3);
+  text-shadow: 0.5px 1.5px 0 rgba(0, 0, 0, 0.3);
 }
 
 .emoji-picker button.emoji {
@@ -161,7 +174,8 @@ img.emoji {
   margin: 2px;
 }
 
-.emoji-picker .section-group button.emoji:hover, .emoji-picker .results button.emoji:hover {
+.emoji-picker .section-group button.emoji:hover,
+.emoji-picker .results button.emoji:hover {
   display: inline-block;
   vertical-align: top;
   border-radius: 2px;
@@ -169,17 +183,17 @@ img.emoji {
 }
 
 .wmd-emoji-button:before {
-  content:  "\f118";
+  content: "\f118";
 }
 
 .emoji-picker-modal.fadeIn {
-  z-index: z("modal","overlay");
+  z-index: z("modal", "overlay");
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  opacity: .8;
+  opacity: 0.8;
   background-color: black;
 }
 
@@ -192,7 +206,7 @@ img.emoji {
   align-items: center;
 
   input[type="text"] {
-    width: auto!important;
+    width: auto !important;
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss
index c02f981538c..1ace584d79d 100644
--- a/app/assets/stylesheets/common/base/faqs.scss
+++ b/app/assets/stylesheets/common/base/faqs.scss
@@ -2,15 +2,14 @@
   /* intended only for /about /faq, /guidelines, /tos, and /privacy */
   width: 100%;
   max-width: 700px;
-  font-size: $font-up-1;  
+  font-size: $font-up-1;
   .mobile-view & {
     font-size: $font-0;
     margin-top: 20px;
   }
 
-
   li {
-     margin-bottom: 8px;
+    margin-bottom: 8px;
   }
 
   .nav-pills {
@@ -21,5 +20,4 @@
   ol:not(.nav-pills) {
     margin-left: 40px;
   }
-
 }
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index fa088560cd0..653989b1ae6 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -1,6 +1,6 @@
 // We should try to reuse the user page HTML for groups when possible
 // To style group content differently, use the existing classes with a .group parent class.
-// For example: .group .user-navigation 
+// For example: .group .user-navigation
 
 .group-details-container {
   background: $primary-very-low;
@@ -26,7 +26,6 @@
     margin: 0 0 5px 0;
     vertical-align: middle;
   }
-
 }
 
 .group-info {
@@ -175,7 +174,7 @@ table.group-members {
       vertical-align: middle;
     }
 
-    input[type='checkbox'] {
+    input[type="checkbox"] {
       vertical-align: middle;
     }
   }
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 9837b3f46d2..8b050b1488a 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -39,7 +39,6 @@
   }
 
   tr {
-
     td {
       padding: 0.8em;
       color: $primary-medium;
@@ -75,7 +74,7 @@
         font-size: $font-up-1;
       }
     }
-   }
+  }
 
   .groups-info {
     .groups-info-name {
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index f3615a4d90b..07e6c578733 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -8,7 +8,7 @@
 
   .docked & {
     position: fixed;
-    backface-visibility: hidden;  /** do magic for scrolling performance **/
+    backface-visibility: hidden; /** do magic for scrolling performance **/
   }
 
   .contents {
@@ -17,7 +17,8 @@
 
   .title {
     float: left;
-    a, a:visited {
+    a,
+    a:visited {
       color: $header_primary;
     }
   }
@@ -37,27 +38,34 @@
     align-items: center;
   }
 
-  .hamburger-panel, .user-menu, .search-menu {
-    width: 0; // Flexbox fix for Safari 
+  .hamburger-panel,
+  .user-menu,
+  .search-menu {
+    width: 0; // Flexbox fix for Safari
   }
 
   .header-buttons {
-    margin-top: .2em;
+    margin-top: 0.2em;
   }
 
-  .login-button, button.sign-up-button {
+  .login-button,
+  button.sign-up-button {
     padding: 6px 10px;
-    .fa { margin-right: 3px; }
+    .fa {
+      margin-right: 3px;
+    }
   }
 
   button.login-button {
     margin-left: 7px;
   }
-
 }
 
-.header-dropdown-toggle, .drop-down, .panel-body {
-  .flagged-posts, .queued-posts {
+.header-dropdown-toggle,
+.drop-down,
+.panel-body {
+  .flagged-posts,
+  .queued-posts {
     background: $danger;
     min-width: 6px;
   }
@@ -78,20 +86,24 @@
     justify-content: center;
     width: 2.2857em;
     height: 2.2857em;
-    padding: .2143em;
-    color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
+    padding: 0.2143em;
+    color: dark-light-choose(
+      scale-color($header_primary, $lightness: 50%),
+      $header_primary
+    );
     text-decoration: none;
     cursor: pointer;
     border-top: 1px solid transparent;
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
-    transition: all linear .15s;
+    transition: all linear 0.15s;
     outline: none;
     img.avatar {
       width: 2.2857em;
       height: 2.2857em;
     }
-    &:hover, &:focus { 
+    &:hover,
+    &:focus {
       color: $primary;
       background-color: $primary-low;
       border-top: 1px solid transparent;
@@ -160,7 +172,8 @@
     right: -3px;
     background-color: dark-light-choose($tertiary-medium, $tertiary);
   }
-  .unread-private-messages, .ring {
+  .unread-private-messages,
+  .ring {
     left: auto;
     right: 25px;
   }
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index 430ee671fa9..88a012961d7 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/app/assets/stylesheets/common/base/history.scss
@@ -27,18 +27,20 @@
   #revision-details {
     padding: 5px;
     margin-top: 10px;
-    border-bottom: 3px solid $primary-low;     
+    border-bottom: 3px solid $primary-low;
   }
 
   #revisions .row:first-of-type {
     margin-top: 10px;
   }
-  ins, .diff-ins {
-    code, img {
+  ins,
+  .diff-ins {
+    code,
+    img {
       border: 2px solid $success;
     }
     img {
-      opacity: .75;
+      opacity: 0.75;
       filter: alpha(opacity=75);
     }
     a {
@@ -46,11 +48,12 @@
       text-decoration: none;
     }
   }
-  img.diff-ins, code.diff-ins {
+  img.diff-ins,
+  code.diff-ins {
     border: 2px solid $success;
   }
   img.diff-ins {
-    opacity: .75;
+    opacity: 0.75;
     filter: alpha(opacity=75);
   }
   .diff-ins {
@@ -61,12 +64,14 @@
     color: $success;
     background: $success-low;
   }
-  del, .diff-del {
-    code, img {
+  del,
+  .diff-del {
+    code,
+    img {
       border: 2px solid $danger;
     }
     img {
-      opacity: .5;
+      opacity: 0.5;
       filter: alpha(opacity=50);
     }
     a {
@@ -74,11 +79,12 @@
       text-decoration: none;
     }
   }
-  img.diff-del, code.diff-del {
+  img.diff-del,
+  code.diff-del {
     border: 2px solid $danger;
   }
   img.diff-del {
-    opacity: .5;
+    opacity: 0.5;
     filter: alpha(opacity=50);
   }
   .diff-del {
@@ -99,16 +105,18 @@
     color: #f00;
   }
   .hidden-revision-either {
-    opacity: .5;
+    opacity: 0.5;
   }
   .hidden-revision-previous .row {
-    div:nth-of-type(1), td:nth-of-type(1) {
-      opacity: .5;
+    div:nth-of-type(1),
+    td:nth-of-type(1) {
+      opacity: 0.5;
     }
   }
   .hidden-revision-current .row {
-    div:nth-of-type(2), td:nth-of-type(2) {
-      opacity: .5;
+    div:nth-of-type(2),
+    td:nth-of-type(2) {
+      opacity: 0.5;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index b880a78bbe7..b6d04e4c5c9 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -4,13 +4,16 @@
 
   &:hover .meta {
     opacity: 1;
-    transition: opacity .5s;
+    transition: opacity 0.5s;
   }
 }
 
 .lightbox-wrapper {
   display: inline-block;
-  &, * { outline: 0; }
+  &,
+  * {
+    outline: 0;
+  }
 }
 
 .meta {
@@ -20,7 +23,7 @@
   color: dark-light-choose($secondary, $primary);
   background: dark-light-choose($primary, lighten($secondary, 10%));
   opacity: 0;
-  transition: opacity .2s;
+  transition: opacity 0.2s;
 
   span {
     float: left;
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 683406cfefd..eab4b09b7b9 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -31,7 +31,8 @@
 $label-width: 92px;
 $input-width: 220px;
 
-.login-modal, .create-account {
+.login-modal,
+.create-account {
   tr {
     border: none;
   }
@@ -41,7 +42,8 @@ $input-width: 220px;
     }
   }
   td {
-    label, input {
+    label,
+    input {
       margin-bottom: 0;
       width: 100%;
     }
@@ -66,7 +68,7 @@ $input-width: 220px;
 
   .disclaimer {
     color: dark-light-choose($primary-medium, $secondary-medium);
-    margin-top: .5em;
+    margin-top: 0.5em;
   }
 
   .user-field.confirm {
@@ -78,7 +80,7 @@ $input-width: 220px;
       width: $label-width;
       float: left;
     }
-    input[type=text] {
+    input[type="text"] {
       width: $input-width;
       margin-bottom: 0;
     }
@@ -118,7 +120,7 @@ $input-width: 220px;
   }
 
   .col-image {
-    position: relative;    
+    position: relative;
     width: 150px;
     margin-right: 20px;
     @media screen and (max-width: 600px) {
@@ -134,7 +136,8 @@ $input-width: 220px;
     label:not(.checkbox-label) {
       font-weight: bold;
     }
-    .controls, .input {
+    .controls,
+    .input {
       margin-bottom: 10px;
     }
     .instructions {
@@ -165,8 +168,8 @@ $input-width: 220px;
 
 // alternate login / create new account buttons should be de-emphasized
 
-button#login-link, button#new-account-link
-{
+button#login-link,
+button#new-account-link {
   background: transparent;
   color: dark-light-choose($primary-high, $secondary-low);
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index ed4addcfda1..17395ed1003 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -23,49 +23,45 @@
 //
 ////////////////////////
 
-
-
 ////////////////////////
 // 1. Default Settings
 ////////////////////////
 
-$overlay-color:                   #0b0b0b !default;
-$overlay-opacity:                 0.8 !default;
-$shadow:                          0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe
-$popup-padding-left:              8px !default; // Padding from left and from right side
-$popup-padding-left-mobile:       6px !default; // Same as above, but is applied when width of window is less than 800px
+$overlay-color: #0b0b0b !default;
+$overlay-opacity: 0.8 !default;
+$shadow: 0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe
+$popup-padding-left: 8px !default; // Padding from left and from right side
+$popup-padding-left-mobile: 6px !default; // Same as above, but is applied when width of window is less than 800px
 
-$z-index-base:                    1040 !default; // Base z-index of popup
-$include-arrows:                  true !default; // include styles for nav arrows
-$controls-opacity:                0.65 !default;
-$controls-color:                  #FFF !default;
-$inner-close-icon-color:          #333 !default;
-$controls-text-color:             #CCC !default; // Color of preloader and "1 of X" indicator
-$controls-text-color-hover:       #FFF !default;
-$IE7support:                      true !default; // Very basic IE7 support
+$z-index-base: 1040 !default; // Base z-index of popup
+$include-arrows: true !default; // include styles for nav arrows
+$controls-opacity: 0.65 !default;
+$controls-color: #fff !default;
+$inner-close-icon-color: #333 !default;
+$controls-text-color: #ccc !default; // Color of preloader and "1 of X" indicator
+$controls-text-color-hover: #fff !default;
+$IE7support: true !default; // Very basic IE7 support
 
 // Iframe-type options
-$include-iframe-type:             true !default;
-$iframe-padding-top:              40px !default;
-$iframe-background:               #000 !default;
-$iframe-max-width:                900px !default;
-$iframe-ratio:                    9/16 !default;
+$include-iframe-type: true !default;
+$iframe-padding-top: 40px !default;
+$iframe-background: #000 !default;
+$iframe-max-width: 900px !default;
+$iframe-ratio: 9/16 !default;
 
 // Image-type options
-$include-image-type:              true !default;
-$image-background:                linear-gradient(45deg, #111 0%,#333 100%) !default;
-$image-padding-top:               40px !default;
-$image-padding-bottom:            40px !default;
+$include-image-type: true !default;
+$image-background: linear-gradient(45deg, #111 0%, #333 100%) !default;
+$image-padding-top: 40px !default;
+$image-padding-bottom: 40px !default;
 $include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom
 
 // Image caption options
-$caption-title-color:             #F3F3F3 !default;
-$caption-subtitle-color:          #BDBDBD !default;
+$caption-title-color: #f3f3f3 !default;
+$caption-subtitle-color: #bdbdbd !default;
 
 // A11y
-$use-visuallyhidden:              false !default; // Hide content from browsers, but make it available for screen readers
-
-
+$use-visuallyhidden: false !default; // Hide content from browsers, but make it available for screen readers
 
 ////////////////////////
 // 2. General styles
@@ -117,7 +113,7 @@ $use-visuallyhidden:              false !default; // Hide content from browsers,
 // Vertical centerer helper
 .mfp-container {
   &:before {
-    content: '';
+    content: "";
     display: inline-block;
     height: 100%;
     vertical-align: middle;
@@ -155,7 +151,8 @@ $use-visuallyhidden:              false !default; // Hide content from browsers,
   cursor: progress;
 }
 .mfp-zoom-out-cur {
-  &, .mfp-image-holder .mfp-close {
+  &,
+  .mfp-image-holder .mfp-close {
     cursor: -moz-zoom-out;
     cursor: -webkit-zoom-out;
     cursor: zoom-out;
@@ -177,7 +174,7 @@ $use-visuallyhidden:              false !default; // Hide content from browsers,
 .mfp-arrow,
 .mfp-preloader,
 .mfp-counter {
-  -webkit-user-select:none;
+  -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
 }
@@ -208,7 +205,6 @@ $use-visuallyhidden:              false !default; // Hide content from browsers,
   }
 }
 
-
 ////////////////////////
 // 3. Appearance
 ////////////////////////
@@ -262,12 +258,11 @@ button {
     box-shadow: none;
   }
   &::-moz-focus-inner {
-      padding: 0;
-      border: 0
+    padding: 0;
+    border: 0;
   }
 }
 
-
 // Close icon
 .mfp-close {
   width: 44px;
@@ -340,7 +335,7 @@ button {
     padding: 0;
     width: 90px;
     height: 110px;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     &:active {
       margin-top: -54px;
     }
@@ -356,7 +351,7 @@ button {
     &:after,
     .mfp-b,
     .mfp-a {
-      content: '';
+      content: "";
       display: block;
       width: 0;
       height: 0;
@@ -370,10 +365,9 @@ button {
 
     &:after,
     .mfp-a {
-
       border-top-width: 13px;
       border-bottom-width: 13px;
-      top:8px;
+      top: 8px;
     }
 
     &:before,
@@ -381,7 +375,6 @@ button {
       border-top-width: 21px;
       border-bottom-width: 21px;
     }
-
   }
 
   .mfp-arrow-left {
@@ -389,7 +382,7 @@ button {
 
     &:after,
     .mfp-a {
-      border-right: 17px solid #FFF;
+      border-right: 17px solid #fff;
       margin-left: 31px;
     }
     &:before,
@@ -403,8 +396,8 @@ button {
     right: 0;
     &:after,
     .mfp-a {
-      border-left: 17px solid #FFF;
-      margin-left: 39px
+      border-left: 17px solid #fff;
+      margin-left: 39px;
     }
     &:before,
     .mfp-b {
@@ -413,8 +406,6 @@ button {
   }
 }
 
-
-
 // Iframe content type
 @if $include-iframe-type {
   .mfp-iframe-holder {
@@ -447,11 +438,8 @@ button {
   }
 }
 
-
-
 // Image content type
 @if $include-image-type {
-
   /* Main image in popup */
   img {
     &.mfp-img {
@@ -472,7 +460,7 @@ button {
   .mfp-figure {
     line-height: 0;
     &:after {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       top: $image-padding-top;
@@ -532,9 +520,9 @@ button {
     }
   }
 
-
   @if $include-mobile-layout-for-image {
-    @media all and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
+    @media all and (max-width: 800px) and (orientation: landscape),
+      screen and (max-height: 300px) {
       /**
        * Remove all paddings around the image on small screen
        */
@@ -560,7 +548,7 @@ button {
           }
         }
         .mfp-bottom-bar {
-          background: rgba(0,0,0,0.6);
+          background: rgba(0, 0, 0, 0.6);
           bottom: 0;
           margin: 0;
           top: auto;
@@ -593,8 +581,6 @@ button {
   }
 }
 
-
-
 // Scale navigation arrows and reduce padding from sides
 @media all and (max-width: 900px) {
   .mfp-arrow {
@@ -614,8 +600,6 @@ button {
   }
 }
 
-
-
 // IE7 support
 // Styles that make popup look nicier in old IE
 @if $IE7support {
@@ -644,20 +628,19 @@ button {
   }
 }
 
-
 .mfp-zoom-in {
   /* start state */
   .mfp-content {
     opacity: 0;
-    transition: all .2s;
-    -webkit-transform: scale(.8);
-        -ms-transform: scale(.8);
-            transform: scale(.8);
+    transition: all 0.2s;
+    -webkit-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    transform: scale(0.8);
   }
 
   &.mfp-bg {
     opacity: 0;
-    transition: all .3s ease-out;
+    transition: all 0.3s ease-out;
   }
 
   /* animate in */
@@ -673,9 +656,8 @@ button {
 
   /* animate out */
   &.mfp-removing {
-
     .mfp-content {
-      @include transform(scale(.8));
+      @include transform(scale(0.8));
       opacity: 0;
     }
     &.mfp-bg {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index c724aea82d5..169c9b9f628 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -55,11 +55,13 @@
 }
 
 .menu-panel {
-  ul.menu-links li, ul li.heading {
+  ul.menu-links li,
+  ul li.heading {
     a {
       padding: 0.25em 0.5em;
       display: block;
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: $highlight-medium;
         outline: none;
       }
@@ -90,7 +92,8 @@
     .badge-wrapper {
       overflow: hidden;
       text-overflow: ellipsis;
-      &.bar, &.bullet {
+      &.bar,
+      &.bullet {
         color: $primary;
       }
       &.box {
@@ -104,7 +107,7 @@
       }
     }
   }
-  
+
   // note these topic counts only appear for anons in the category hamburger drop down
   b.topics-count {
     color: dark-light-choose($primary-medium, $secondary-medium);
@@ -112,7 +115,7 @@
     font-size: $font-down-1;
   }
   .box + b.topics-count {
-      padding-top: 2px;      
+    padding-top: 2px;
   }
 
   span.badge-category {
@@ -120,11 +123,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
 }
 
 .search-menu {
-
   .search-input {
     position: relative;
   }
@@ -140,7 +141,7 @@
     }
   }
 
-  input[type='text'] {
+  input[type="text"] {
     margin: 0.5em 3px;
     box-sizing: border-box;
     width: calc(100% - 6px);
@@ -149,7 +150,9 @@
 
   .search-context {
     padding: 0 5px;
-    label { margin-bottom: 0; }
+    label {
+      margin-bottom: 0;
+    }
   }
 
   .searching {
@@ -172,7 +175,9 @@
 
   .filter {
     padding: 0;
-    &:hover {background: transparent;}
+    &:hover {
+      background: transparent;
+    }
   }
 
   .search-link {
@@ -207,7 +212,7 @@
         display: block;
         padding: 5px;
       }
-      transition: all linear .15s;
+      transition: all linear 0.15s;
 
       .user-results {
         color: dark-light-choose($primary-high, $secondary-low);
@@ -218,12 +223,13 @@
       background-color: $highlight-medium;
     }
 
-    button {margin-left: 5px;}
+    button {
+      margin-left: 5px;
+    }
   }
 }
 
 .user-menu {
-
   .notifications {
     width: 100%;
     display: table;
@@ -234,8 +240,12 @@
       margin: 0.5em 0;
     }
 
-    .fa { color: dark-light-choose($primary-medium, $secondary-medium); }
-    .icon { color: dark-light-choose($primary-high, $secondary-low); }
+    .fa {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+    }
+    .icon {
+      color: dark-light-choose($primary-high, $secondary-low);
+    }
     li {
       background-color: $tertiary-low;
 
@@ -245,17 +255,18 @@
         display: none;
       }
 
-      span { 
-        color: $primary; 
+      span {
+        color: $primary;
       }
 
-      &:hover, &:focus { 
-        background-color: $highlight-medium; 
-        outline: none; 
+      &:hover,
+      &:focus {
+        background-color: $highlight-medium;
+        outline: none;
       }
 
-      a { 
-        padding: 0; 
+      a {
+        padding: 0;
       }
 
       p {
@@ -308,7 +319,8 @@
     @include unselectable;
   }
 
-  .logout-link, .dismiss-link {
+  .logout-link,
+  .dismiss-link {
     display: inline-block;
   }
   .dismiss-link {
@@ -336,10 +348,11 @@ div.menu-links-header {
         display: inline-flex;
         min-width: 15px;
         justify-content: center;
-      } 
+      }
     }
   }
-  a:hover, a:focus {
+  a:hover,
+  a:focus {
     background-color: $highlight-medium;
     outline: none;
   }
@@ -366,7 +379,8 @@ div.menu-links-header {
   li:last-child {
     text-align: right;
   }
-  .fa, a {
+  .fa,
+  a {
     color: dark-light-choose($primary-medium, $secondary-medium);
   }
 
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 60c411eb572..3de5110dfba 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -1,19 +1,18 @@
 .modal-open {
   .dropdown-menu {
-     z-index: z("modal","dropdown");
+    z-index: z("modal", "dropdown");
   }
   .popover {
-    z-index: z("modal","popover");
+    z-index: z("modal", "popover");
   }
   .tooltip {
-    z-index: z("modal","tooltip");
+    z-index: z("modal", "tooltip");
   }
-
 }
 
 .bootbox.modal {
   position: fixed;
-  z-index: z("modal","content");
+  z-index: z("modal", "content");
   overflow: auto;
   height: auto;
   background-color: $secondary;
@@ -54,7 +53,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: z("modal","overlay");
+  z-index: z("modal", "overlay");
   background-color: #111;
   &.fade {
     opacity: 0;
@@ -63,28 +62,36 @@
 
 .modal-backdrop,
 .modal-backdrop.fade.in {
-  animation: fade .3s;
-  opacity: .9;
+  animation: fade 0.3s;
+  opacity: 0.9;
   filter: alpha(opacity=90);
 }
 
 // fade in
 @keyframes fade {
-  from { opacity: 0 }
-    to { opacity: .9 }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.9;
+  }
 }
 
 // slide in
 @keyframes slidein {
-  from { transform: translateY(-20%); }
-    to { transform: translateY(0); }
+  from {
+    transform: translateY(-20%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 .modal-outer-container {
-  display:table;
+  display: table;
   table-layout: fixed;
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
 }
 
 .modal-inner-container {
@@ -113,10 +120,9 @@
 
 .create-account.in .modal-inner-container,
 .login-modal.in .modal-inner-container {
-  animation: slidein .3s;
+  animation: slidein 0.3s;
 }
 
-
 .inline-modal {
   .modal-inner-container {
     border: 1px solid $secondary-medium;
@@ -128,7 +134,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: z("modal","content");
+  z-index: z("modal", "content");
   overflow: auto;
   &:not(.history-modal) {
     .modal-body {
@@ -144,7 +150,7 @@
   padding: 14px 15px 10px;
   border-top: 1px solid $primary-low;
   .btn {
-  margin: 0 5px 5px 0;
+    margin: 0 5px 5px 0;
   }
 }
 .modal-footer:before,
@@ -164,7 +170,7 @@
   }
   @media screen and (min-width: 524px) {
     .modal-inner-container {
-     min-width: 525px; 
+      min-width: 525px;
     }
   }
 }
@@ -177,7 +183,6 @@
       font-size: $font-0;
     }
     border-bottom: 1px solid $primary-low;
-
   }
 
   &.hidden {
@@ -225,7 +230,7 @@
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         .text {
-          color: rgb(255,255,255);
+          color: rgb(255, 255, 255);
           position: absolute;
           top: 40%;
           font-size: $font-up-6;
@@ -343,8 +348,8 @@
   }
 }
 
-.permission-list{
-  list-style:none;
+.permission-list {
+  list-style: none;
   margin: 0 0 30px;
   padding: 0;
   .name {
@@ -364,8 +369,10 @@
 }
 
 .edit-category-modal {
-  .future-date-input, .num-featured-topics-fields, .position-fields {
-    input[type=text] {
+  .future-date-input,
+  .num-featured-topics-fields,
+  .position-fields {
+    input[type="text"] {
       width: 50px;
     }
   }
@@ -406,7 +413,7 @@
   }
 
   section.minimum-required-tags {
-    input[type=number] {
+    input[type="number"] {
       width: 50px;
     }
   }
@@ -417,7 +424,8 @@
     transition: none;
     background-color: transparent;
     margin-right: 5px;
-    &:hover, &.active {
+    &:hover,
+    &.active {
       color: $primary;
     }
     &.active {
@@ -432,9 +440,10 @@
   }
   .incoming-email-content {
     height: 300px;
-    max-width: 700px;  
+    max-width: 700px;
     width: 90vw; // forcing textarea wider
-    textarea, .incoming-email-html-part {
+    textarea,
+    .incoming-email-html-part {
       height: 95%;
       border: none;
       border-top: 1px solid $primary-low;
@@ -462,27 +471,26 @@
 
 .change-timestamp,
 .poll-ui-builder {
+  .date-picker {
+    width: 9em;
+  }
 
-    .date-picker {
-      width: 9em;
+  #date-container {
+    .pika-single {
+      position: relative !important; // overriding another important
+      display: inline-block;
+      margin-top: 5px;
     }
+  }
 
-    #date-container {
-      .pika-single {
-        position: relative !important; // overriding another important
-        display: inline-block;
-        margin-top: 5px;
-      }
-    }
+  input[type="time"] {
+    width: 6em;
+    text-align: center;
+  }
 
-    input[type=time] {
-      width: 6em;
-      text-align: center;
-    }
-
-    form {
-      margin: 0;
-    }
+  form {
+    margin: 0;
+  }
 }
 
 .flag-modal {
@@ -528,7 +536,6 @@
   }
 }
 
-
 .modal-tab {
   position: absolute;
   width: 95%;
diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss
index 4f58cc362bc..1cde53d2eb1 100644
--- a/app/assets/stylesheets/common/base/not-found.scss
+++ b/app/assets/stylesheets/common/base/not-found.scss
@@ -1,4 +1,4 @@
-// Page not found styles 
+// Page not found styles
 
 h1.page-not-found {
   font-size: $font-up-5;
@@ -19,17 +19,18 @@ h1.page-not-found {
   }
 }
 
-.popular-topics, .recent-topics {
+.popular-topics,
+.recent-topics {
   box-sizing: border-box;
   width: 50%;
   max-width: 400px;
-  margin-bottom: 40px;  
+  margin-bottom: 40px;
   padding-right: 20px;
   @media screen and (max-width: 600px) {
     width: 100%;
   }
   h2 {
-    margin-bottom: 10px;    
+    margin-bottom: 10px;
   }
 }
 
@@ -39,7 +40,7 @@ h1.page-not-found {
   align-items: baseline;
   margin-bottom: 15px;
   @media screen and (max-width: 600px) {
-    &:nth-of-type(n+6) {
+    &:nth-of-type(n + 6) {
       display: none;
     }
   }
@@ -47,4 +48,3 @@ h1.page-not-found {
     flex-basis: 100%;
   }
 }
-
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 7a306a96d84..712bde8ceaa 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -5,11 +5,10 @@ a.loading-onebox {
     size: 20px;
     height: 25px;
     repeat: no-repeat;
-  };
+  }
   padding-left: 25px;
 }
 
-
 .onebox-result {
   @include post-aside;
 
@@ -37,7 +36,6 @@ a.loading-onebox {
     }
   }
 
-
   .onebox-result-body {
     padding-top: 5px;
     img {
@@ -47,7 +45,8 @@ a.loading-onebox {
       float: left;
       margin-right: 10px;
     }
-    h3, h4 {
+    h3,
+    h4 {
       margin: 0;
     }
     code {
@@ -102,23 +101,23 @@ aside.onebox {
     }
   }
 
-  @include onebox-favicon('stackexchange', 'stackexchange');
-  @include onebox-favicon('twitterstatus', 'twitter');
-  @include onebox-favicon('wikipedia', 'wikipedia');
-  @include onebox-favicon('githubblob', 'github');
-  @include onebox-favicon('githubcommit', 'github');
-  @include onebox-favicon('githubpullrequest', 'github');
-  @include onebox-favicon('githubissue', 'github');
-  @include onebox-favicon('githubgist', 'github');
-  @include onebox-favicon('amazon', 'amazon');
-  @include onebox-favicon('instagram', 'instagram');
-  @include onebox-favicon('googledocs', 'google_branding/logo_drive_48px');
-
+  @include onebox-favicon("stackexchange", "stackexchange");
+  @include onebox-favicon("twitterstatus", "twitter");
+  @include onebox-favicon("wikipedia", "wikipedia");
+  @include onebox-favicon("githubblob", "github");
+  @include onebox-favicon("githubcommit", "github");
+  @include onebox-favicon("githubpullrequest", "github");
+  @include onebox-favicon("githubissue", "github");
+  @include onebox-favicon("githubgist", "github");
+  @include onebox-favicon("amazon", "amazon");
+  @include onebox-favicon("instagram", "instagram");
+  @include onebox-favicon("googledocs", "google_branding/logo_drive_48px");
 
   .onebox-body {
     clear: both;
 
-    h3, h4 {
+    h3,
+    h4 {
       font-size: $font-up-1;
       margin: 0 0 10px 0;
     }
@@ -159,8 +158,7 @@ aside.onebox {
 
     // this allows us to load all onebox images without jiggle
     // see: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/
-    @supports (--custom:property) {
-
+    @supports (--custom: property) {
       .aspect-image {
         max-height: 170px;
         --magic-ratio: calc(var(--aspect-ratio) + 0.15);
@@ -256,7 +254,8 @@ aside.onebox {
 
 @mixin gdocs-logo($type) {
   &.g-#{$type}-logo {
-    background: image-url("favicons/google_branding/logo_#{$type}_48px.png") no-repeat;
+    background: image-url("favicons/google_branding/logo_#{$type}_48px.png")
+      no-repeat;
   }
 }
 
@@ -264,12 +263,12 @@ aside.onebox {
   width: 60px;
   height: 50px;
   float: left;
-  @include gdocs-logo('docs');
-  @include gdocs-logo('forms');
-  @include gdocs-logo('sheets');
-  @include gdocs-logo('slides');
-  @include gdocs-logo('calendar');
-  @include gdocs-logo('drive');
+  @include gdocs-logo("docs");
+  @include gdocs-logo("forms");
+  @include gdocs-logo("sheets");
+  @include gdocs-logo("slides");
+  @include gdocs-logo("calendar");
+  @include gdocs-logo("drive");
 }
 
 // Google Calendar Placeholder
@@ -282,7 +281,8 @@ aside.onebox {
     width: 128px;
     height: 128px;
     &.g-calendar-logo {
-      background: image-url("favicons/google_branding/logo_calendar_128px.png") no-repeat;
+      background: image-url("favicons/google_branding/logo_calendar_128px.png")
+        no-repeat;
     }
   }
 }
@@ -303,88 +303,86 @@ blockquote {
 // -- Onebox Github Code Blob --
 pre.onebox code ol.lines li:before {
   position: absolute;
-  display:inline-block;
-  width:35px;
+  display: inline-block;
+  width: 35px;
   left: -40px;
-  color:#AFAFAF;
-  text-align:right;
-  padding-right:5px;
+  color: #afafaf;
+  text-align: right;
+  padding-right: 5px;
   font-size: $font-down-1;
   line-height: $line-height-large;
   content: counter(li-counter);
   counter-increment: li-counter;
 }
 
-
-pre.onebox code ol{
-	margin-left:0;
-	line-height: $line-height-large;
+pre.onebox code ol {
+  margin-left: 0;
+  line-height: $line-height-large;
 }
 pre.onebox code {
   background-color: dark-light-choose(#fff, #000);
 }
-pre.onebox code li{
-	padding-left:5px;
+pre.onebox code li {
+  padding-left: 5px;
 }
 
-pre.onebox code ol.lines{
-	position:relative;
-	margin: 0 0 0 40px;
+pre.onebox code ol.lines {
+  position: relative;
+  margin: 0 0 0 40px;
 }
 
 pre.onebox code ol.lines li {
-	list-style-type: none;
-	padding-left: 5px;
-	margin-left: 0;
-	border-left: 1px solid #CFCFCF;
-	min-height: 1.5em; //show empty li lines
+  list-style-type: none;
+  padding-left: 5px;
+  margin-left: 0;
+  border-left: 1px solid #cfcfcf;
+  min-height: 1.5em; //show empty li lines
   white-space: pre;
 }
 
-pre.onebox code li.selected{
-	background-color: dark-light-choose(#F8EEC7, #541);
+pre.onebox code li.selected {
+  background-color: dark-light-choose(#f8eec7, #541);
 }
 
 pre.onebox code {
- white-space: normal;
+  white-space: normal;
 }
 
 //Onebox - Github - Pull request
 .onebox-body .github-commit-status {
-  background: #F5F5F5;
+  background: #f5f5f5;
   border-radius: 5px;
-  margin:0 0 5px 100px;
+  margin: 0 0 5px 100px;
   padding: 10px;
 }
 
 .onebox-body .status_tag {
-  display:inline-block;
-  color:#fff;
-  padding:1px 4px;
-  border-radius:3px;
-  font-weight:bold;
-  margin-bottom:5px;
-  text-transform:capitalize;
+  display: inline-block;
+  color: #fff;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  text-transform: capitalize;
 }
 
-.onebox-body .build_status
-{
+.onebox-body .build_status {
   padding: 2px;
   font-size: $font-down-1;
 }
 
 .onebox-body .status_tag.open {
-  background-color:#6cc644;
+  background-color: #6cc644;
 }
-.onebox-body .status_tag.merged{
-  background-color:#6e5494;
+.onebox-body .status_tag.merged {
+  background-color: #6e5494;
 }
 .onebox-body .status_tag.closed {
-  background-color:#bd2c00;
+  background-color: #bd2c00;
 }
 
-.onebox-body .github-content-right{
-  margin-left:100px;
+.onebox-body .github-content-right {
+  margin-left: 100px;
 }
 
 //Onebox - Twitter - Status
@@ -400,7 +398,8 @@ aside.onebox.twitterstatus .onebox-body {
     width: 48px;
     height: 48px;
   }
-  p, .tweet {
+  p,
+  .tweet {
     white-space: pre-wrap;
     padding-top: 3px;
     margin-left: 70px;
@@ -483,7 +482,8 @@ aside.onebox.stackexchange .onebox-body {
 
 // whitelistedgeneric twitter labels
 .onebox.whitelistedgeneric {
-  .label1, .label2 {
+  .label1,
+  .label2 {
     color: dark-light-choose($primary-medium, $secondary-medium);
   }
   .label1 {
@@ -519,9 +519,9 @@ aside.onebox.stackexchange .onebox-body {
 }
 
 .onebox.githubcommit {
-   pre.message {
-     padding: 0;
-   }
+  pre.message {
+    padding: 0;
+  }
 }
 
 // mobile specific style
diff --git a/app/assets/stylesheets/common/base/request_access.scss b/app/assets/stylesheets/common/base/request_access.scss
index 069511ce009..5bc4c211241 100644
--- a/app/assets/stylesheets/common/base/request_access.scss
+++ b/app/assets/stylesheets/common/base/request_access.scss
@@ -1,12 +1,12 @@
 #request-access {
   width: 325px;
   margin: 0 auto;
-  input[type=text] {
+  input[type="text"] {
     width: 320px;
     height: 30px;
     font-size: $font-up-3;
   }
-  input[type=submit] {
+  input[type="submit"] {
     font-size: $font-up-3;
     padding: 10px;
   }
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 298f458f3ec..eace234960c 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -8,14 +8,14 @@
 }
 
 // This is used to flip the .d-icon-caret-right
-@mixin rotate( $degrees ) {
+@mixin rotate($degrees) {
   -webkit-transform: rotate(#{$degrees}deg);
   -moz-transform: rotate(#{$degrees}deg);
   -ms-transform: rotate(#{$degrees}deg);
   -o-transform: rotate(#{$degrees}deg);
   transform: rotate(#{$degrees}deg);
 
-  filter:  "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
+  filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
   zoom: 1;
 }
@@ -32,8 +32,8 @@
   border-right-color: $secondary !important;
 }
 .rtl code {
-    direction: ltr !important;
-    text-align: left !important;
+  direction: ltr !important;
+  text-align: left !important;
 }
 .rtl .pull-left {
   float: right !important;
@@ -43,12 +43,12 @@
 }
 
 .rtl .admin-customize .current-style .toggle-mobile {
-position: static !important;
-float: left !important;
+  position: static !important;
+  float: left !important;
 }
 .rtl .admin-customize .current-style .toggle-maximize {
-position: static !important;
-float: left !important;
+  position: static !important;
+  float: left !important;
 }
 .rtl .dashboard-left {
   float: right !important;
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 8934fcb90f4..44f85951a0c 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -11,7 +11,7 @@
 
     .search-query {
       flex: 1;
-      margin: 0 .5em 0 0;
+      margin: 0 0.5em 0 0;
     }
 
     .search-cta {
@@ -22,7 +22,9 @@
 
   .search-advanced {
     width: 70%;
-    @include small-width  { width: 65%; }
+    @include small-width {
+      width: 65%;
+    }
 
     .search-actions,
     .search-notice,
@@ -35,8 +37,8 @@
     .search-info {
       display: flex;
       flex-wrap: wrap;
-      border-bottom: 3px solid $primary-low;      
-      padding-bottom: .5em;
+      border-bottom: 3px solid $primary-low;
+      padding-bottom: 0.5em;
       margin-bottom: 1em;
       flex-direction: row;
       align-items: center;
@@ -50,7 +52,7 @@
 
         // spans can be in different orders depending of locale
         span + span {
-          margin-left: .25em;
+          margin-left: 0.25em;
         }
       }
 
@@ -60,7 +62,7 @@
         align-items: center;
 
         .desc {
-          margin-right: .5em;
+          margin-right: 0.5em;
         }
 
         .combo-box {
@@ -75,11 +77,11 @@
       align-items: center;
 
       .bulk-select {
-        margin-left: .5em;
+        margin-left: 0.5em;
       }
 
       .fps-select a {
-        margin-left: .5em;
+        margin-left: 0.5em;
         font-size: $font-down-1;
 
         &:hover {
@@ -90,7 +92,7 @@
 
     .search-notice {
       .fps-invalid {
-        padding: .5em;
+        padding: 0.5em;
         background-color: $danger-low;
         border: 1px solid $danger-medium;
         color: $danger;
@@ -100,7 +102,9 @@
 
   .search-advanced-sidebar {
     width: 30%;
-    @include small-width  { width: 35%; }
+    @include small-width {
+      width: 35%;
+    }
     margin-left: 1em;
     display: flex;
     flex-direction: column;
@@ -115,13 +119,14 @@
       box-sizing: border-box;
       width: 100%;
       min-width: 100%;
-      input, .item {
+      input,
+      .item {
         padding-left: 4px; // temporarily normalizing input padding for this section
       }
     }
 
     .date-picker-wrapper {
-      margin-top: .5em;
+      margin-top: 0.5em;
     }
 
     .date-picker {
@@ -133,8 +138,10 @@
 
     .search-advanced-title {
       background: $primary-low;
-      padding: .358em 1em;
-      @include small-width  { padding: .358em .5em; }
+      padding: 0.358em 1em;
+      @include small-width {
+        padding: 0.358em 0.5em;
+      }
       font-weight: 700;
       text-align: left;
       font-weight: bold;
@@ -157,11 +164,14 @@
       section.field {
         margin-top: 5px;
       }
-      @include small-width  { 
-        padding: .75em .5em; 
-        .ac-wrap, .choices, .select-kit.multi-select { // overriding inline width from JS
+      @include small-width {
+        padding: 0.75em 0.5em;
+        .ac-wrap,
+        .choices,
+        .select-kit.multi-select {
+          // overriding inline width from JS
           width: 100% !important;
-        } 
+        }
         .select-kit {
           min-width: unset;
         }
@@ -170,7 +180,6 @@
   }
 }
 
-
 .fps-invalid {
   margin-bottom: 1em;
 }
@@ -184,7 +193,10 @@
 
   .like-count {
     color: dark-light-choose($primary-medium, $secondary-medium);
-    .fa { color: $love; font-size: $font-down-1; }
+    .fa {
+      color: $love;
+      font-size: $font-down-1;
+    }
   }
 
   .badge-wrapper span.badge-category {
@@ -192,14 +204,14 @@
   }
 
   .search-category {
-    padding-top:3px;
+    padding-top: 3px;
   }
 
   margin-bottom: 28px;
   max-width: 780px;
   .topic {
-     padding-bottom: 2px;
-     max-width:700px;
+    padding-bottom: 2px;
+    max-width: 700px;
   }
   .avatar {
     margin-right: 14px;
@@ -208,7 +220,8 @@
     color: $tertiary-high;
   }
   .search-link {
-    .topic-statuses, .topic-title {
+    .topic-statuses,
+    .topic-title {
       font-size: $font-up-2;
       line-height: $line-height-large;
     }
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 2914ceb9a12..2f1b11b090a 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -12,7 +12,7 @@
   &.visible {
     display: block;
   }
-  input[type=text] {
+  input[type="text"] {
     width: 96%;
   }
   .share-for-touch .overflow-ellipsis {
@@ -46,7 +46,7 @@
     float: left;
     line-height: $line-height-large;
     margin-left: 8px;
-    margin-top: .5em;
+    margin-top: 0.5em;
     .fa {
       margin-right: 5px;
     }
@@ -71,7 +71,7 @@
     color: dark-light-choose($primary-medium, $secondary-medium);
   }
 
-  input[type=text] {
+  input[type="text"] {
     font-size: $font-up-1;
     margin-bottom: 10px;
   }
@@ -81,6 +81,6 @@
   display: none;
 }
 
-.discourse-touch #share-link input[type=text] {
+.discourse-touch #share-link input[type="text"] {
   display: none;
 }
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index d459ea4f52e..5ea0ac6c8e1 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -1,4 +1,3 @@
-
 .topic-title-outlet.choose-tags {
   margin-left: 25px;
   margin-top: 3px;
@@ -31,8 +30,8 @@
 }
 
 .topic-header-extra .discourse-tag {
-  -webkit-animation: fadein .7s;
-  animation: fadein .7s;
+  -webkit-animation: fadein 0.7s;
+  animation: fadein 0.7s;
 }
 
 .bullet + .topic-header-extra {
@@ -59,7 +58,8 @@
     &.bullet .badge-category {
     }
 
-    &.box, &.bullet {
+    &.box,
+    &.bullet {
     }
 
     &.box + .topic-header-extra,
@@ -91,7 +91,8 @@ $tag-color: $primary-medium;
   margin: 0;
   color: $tag-color;
 
-  &:visited, &:hover {
+  &:visited,
+  &:hover {
     color: $tag-color;
   }
 
@@ -109,13 +110,16 @@ $tag-color: $primary-medium;
     }
   }
 
-  &.simple, &.simple:visited, &.simple:hover {
+  &.simple,
+  &.simple:visited,
+  &.simple:hover {
     margin-right: 0;
     color: $primary-high;
   }
 }
 
-.discourse-tags, .list-tags {
+.discourse-tags,
+.list-tags {
   .discourse-tag.simple:not(:last-child):after {
     content: ", ";
     margin-left: 1px;
@@ -127,7 +131,9 @@ $tag-color: $primary-medium;
     display: inline-block;
     font-size: $font-down-1;
   }
-  .topic-featured-link { margin-left: 8px; }
+  .topic-featured-link {
+    margin-left: 8px;
+  }
 }
 
 .fps-result .add-full-page-tags {
@@ -141,7 +147,7 @@ $tag-color: $primary-medium;
   clear: both;
 
   .discourse-tag.box {
-    position:relative;
+    position: relative;
     top: 2px;
   }
 }
@@ -156,28 +162,29 @@ $tag-color: $primary-medium;
   font-size: $font-down-1;
   margin-top: 0;
   .discourse-tag {
-    margin-right: .2em;
+    margin-right: 0.2em;
   }
   .discourse-tag.box {
-    position:relative;
+    position: relative;
     top: 0;
   }
 }
 
-
 .discourse-tag.bullet {
-  margin-right: .25em;
+  margin-right: 0.25em;
   &:before {
     content: "\f04d";
     font-family: FontAwesome;
     color: $primary-low-mid;
     margin-right: 5px;
     font-size: $font-down-2;
-    position:relative;
+    position: relative;
   }
 }
 
-header .discourse-tag {color: $tag-color }
+header .discourse-tag {
+  color: $tag-color;
+}
 
 .list-tags {
   display: inline-block;
@@ -212,8 +219,8 @@ header .discourse-tag {color: $tag-color }
 
 .autocomplete {
   .d-icon-tag {
-   color: dark-light-choose($primary, $primary-low-mid);
-   padding-right: 5px;
+    color: dark-light-choose($primary, $primary-low-mid);
+    padding-right: 5px;
   }
 
   a {
diff --git a/app/assets/stylesheets/common/base/tooltip.scss b/app/assets/stylesheets/common/base/tooltip.scss
index 6dd84a8de27..be10a7aaa8e 100644
--- a/app/assets/stylesheets/common/base/tooltip.scss
+++ b/app/assets/stylesheets/common/base/tooltip.scss
@@ -22,7 +22,8 @@ $discourse-tooltip-border: $primary-medium;
     background: $discourse-tooltip-background;
   }
 
-  .tooltip-pointer:before, .tooltip-pointer:after {
+  .tooltip-pointer:before,
+  .tooltip-pointer:after {
     position: absolute;
     pointer-events: none;
     border: solid transparent;
@@ -32,8 +33,7 @@ $discourse-tooltip-border: $primary-medium;
     width: 0;
   }
 
-  .tooltip-pointer:after
-  {
+  .tooltip-pointer:after {
     border-bottom-color: $discourse-tooltip-background;
     border-width: 8px;
     left: 50%;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 80668a280b0..6e91c4927ed 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -15,39 +15,47 @@
 }
 
 .names {
- float: left;
+  float: left;
 
- span.first {
-   font-weight: bold;
- }
+  span.first {
+    font-weight: bold;
+  }
 
- span {
-   font-size: $font-0;
-   margin-right: 8px;
-   display: inline-block;
-   max-width: 280px;
-   white-space: nowrap;
-   overflow: hidden;
-   text-overflow: ellipsis;
-   a {
-     color: dark-light-choose($primary-high, $secondary-low);
-   }
- }
- .fa {
-   font-size: $font-down-1;
-   margin-left: 3px;
-   color: dark-light-choose($primary-medium, $secondary-medium);
- }
- .new_user a, .user-title, .user-title a {
+  span {
+    font-size: $font-0;
+    margin-right: 8px;
+    display: inline-block;
+    max-width: 280px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    a {
+      color: dark-light-choose($primary-high, $secondary-low);
+    }
+  }
+  .fa {
+    font-size: $font-down-1;
+    margin-left: 3px;
     color: dark-light-choose($primary-medium, $secondary-medium);
- }
+  }
+  .new_user a,
+  .user-title,
+  .user-title a {
+    color: dark-light-choose($primary-medium, $secondary-medium);
+  }
 }
 
 // global styles for the cooked HTML content in posts (and preview)
-.cooked, .d-editor-preview {
+.cooked,
+.d-editor-preview {
   word-wrap: break-word;
   line-height: $line-height-large;
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     margin: 30px 0 10px;
     line-height: $line-height-medium;
   }
@@ -76,19 +84,44 @@
     font-size: $font-down-2;
   }
 
-  a { word-wrap: break-word; }
-  ins { background-color: dark-light-choose($success-low, scale-color($success, $lightness: -60%)); }
-  del { background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%)); }
+  a {
+    word-wrap: break-word;
+  }
+  ins {
+    background-color: dark-light-choose(
+      $success-low,
+      scale-color($success, $lightness: -60%)
+    );
+  }
+  del {
+    background-color: dark-light-choose(
+      $danger-low,
+      scale-color($danger, $lightness: -60%)
+    );
+  }
   // Prevents users from breaking posts with tag nesting
-  big { font-size: 1.5rem; }
-  small { font-size: 0.75rem; }
-  small small { font-size: .75em; }
-  big big { font-size: 1em; }
-  sub sub sub {bottom: 0;}
-  sup sup sup {top: 0;}
+  big {
+    font-size: 1.5rem;
+  }
+  small {
+    font-size: 0.75rem;
+  }
+  small small {
+    font-size: 0.75em;
+  }
+  big big {
+    font-size: 1em;
+  }
+  sub sub sub {
+    bottom: 0;
+  }
+  sup sup sup {
+    top: 0;
+  }
 }
 
-.cooked, .d-editor-preview {
+.cooked,
+.d-editor-preview {
   video {
     max-width: 100%;
   }
@@ -122,7 +155,9 @@ aside.quote {
   margin-top: 1em;
   margin-bottom: 1em;
 
-  .badge-wrapper { margin-left: 5px; }
+  .badge-wrapper {
+    margin-left: 5px;
+  }
 
   .title {
     @include post-aside;
@@ -131,8 +166,12 @@ aside.quote {
     // IE will screw up the blockquote underneath if bottom padding is 0px
     padding: 12px 12px 1px 12px;
     // blockquote is underneath this and has top margin
-    .avatar { margin-right: 7px; }
-    img { margin-top: -4px; }
+    .avatar {
+      margin-right: 7px;
+    }
+    img {
+      margin-top: -4px;
+    }
     @include unselectable;
   }
 
@@ -142,7 +181,8 @@ aside.quote {
   }
 }
 
-.quote-controls, .quote-controls .d-icon {
+.quote-controls,
+.quote-controls .d-icon {
   color: dark-light-choose($primary-low-mid, $secondary-high);
 }
 
@@ -153,13 +193,14 @@ aside.quote {
 }
 
 .post-action {
-  .undo-action, .act-action{
+  .undo-action,
+  .act-action {
     margin-left: 5px;
   }
 }
 
 .post-hidden {
-  opacity: 0.5;       // opacity sets a new z-index context,
+  opacity: 0.5; // opacity sets a new z-index context,
   position: relative; // so the positioning is required,
   z-index: z("base"); // otherwise post controls are stacked too low
 }
@@ -195,7 +236,8 @@ aside.quote {
   }
 }
 
-.topic-avatar, .user-card-avatar {
+.topic-avatar,
+.user-card-avatar {
   position: relative;
 }
 
@@ -259,7 +301,7 @@ aside.quote {
 
   td {
     vertical-align: top;
-    padding:1px;
+    padding: 1px;
   }
 
   .topic-links {
@@ -270,10 +312,13 @@ aside.quote {
       margin: 1px 5px 2px 0;
     }
   }
-
 }
 
-.topic-avatar, .avatar-flair-preview, .user-card-avatar, .topic-map .poster, .user-profile-avatar {
+.topic-avatar,
+.avatar-flair-preview,
+.user-card-avatar,
+.topic-map .poster,
+.user-profile-avatar {
   .avatar-flair {
     display: flex;
     align-items: center;
@@ -285,7 +330,9 @@ aside.quote {
     right: -6px;
   }
 }
-.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair, .collapsed-info .user-profile-avatar .avatar-flair {
+.topic-avatar .avatar-flair,
+.avatar-flair-preview .avatar-flair,
+.collapsed-info .user-profile-avatar .avatar-flair {
   background-size: 20px 20px;
   width: 20px;
   height: 20px;
@@ -298,7 +345,8 @@ aside.quote {
     right: -8px;
   }
 }
-.user-card-avatar .avatar-flair, .user-profile-avatar .avatar-flair {
+.user-card-avatar .avatar-flair,
+.user-profile-avatar .avatar-flair {
   background-size: 40px 40px;
   width: 40px;
   height: 40px;
@@ -368,11 +416,13 @@ aside.quote {
 }
 
 .post-info {
-
-  &.via-email, &.whisper {
+  &.via-email,
+  &.whisper {
     line-height: $line-height-medium;
   }
-  &.via-email, &.whisper, &.post-locked {
+  &.via-email,
+  &.whisper,
+  &.post-locked {
     margin-right: 5px;
     .d-icon {
       font-size: $font-0;
@@ -403,8 +453,7 @@ pre {
   }
 }
 
-kbd
-{
+kbd {
   background-color: $secondary;
   border: 1px solid $primary-low;
   border-radius: 3px;
@@ -417,14 +466,16 @@ kbd
   display: inline-block;
   font-size: $font-down-1;
   line-height: $line-height-large;
-  margin: 0 .1em;
-  padding: .1em .6em;
+  margin: 0 0.1em;
+  padding: 0.1em 0.6em;
 
   // don't allow more than 3 nested elements to prevent FF from crashing
   // cf. http://what.thedailywtf.com/t/nested-elements/7927
   // 3 levels are needed to prevent highlighted words being hidden
   // cf. https://meta.discourse.org/t/word-disappears-when-searched-and-in-details-summary-kbd-b/25741
-  * * * { display: none; }
+  * * * {
+    display: none;
+  }
 }
 
 // we assume blockquotes have their own margins, so all blockquotes
@@ -453,8 +504,8 @@ blockquote > *:last-child {
   }
 }
 
-
-.cooked table, .d-editor-preview table {
+.cooked table,
+.d-editor-preview table {
   thead {
     border-bottom: 2px solid lighten($primary, 80%);
     th {
@@ -463,7 +514,8 @@ blockquote > *:last-child {
     }
   }
 
-  td,th {
+  td,
+  th {
     padding: 3px 3px 3px 10px;
   }
 }
@@ -475,7 +527,7 @@ blockquote > *:last-child {
   border-top: 1px solid $primary-low;
   .topic-avatar {
     align-self: flex-start;
-    padding: .7em 0;
+    padding: 0.7em 0;
     border-top: none;
     margin-right: 11px;
     i {
@@ -487,11 +539,16 @@ blockquote > *:last-child {
   }
 
   .small-action.deleted {
-    background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -60%);
+    background-color: dark-light-diff(
+      rgba($danger, 0.7),
+      $secondary,
+      50%,
+      -60%
+    );
   }
 
   .small-action-desc.timegap {
-      color: $primary-medium;
+    color: $primary-medium;
   }
 
   .small-action-desc {
@@ -527,7 +584,6 @@ blockquote > *:last-child {
       margin: 0;
       line-height: $line-height-medium;
       flex: 1 1;
-
     }
   }
 
@@ -536,8 +592,8 @@ blockquote > *:last-child {
     border: 0;
     order: 9;
     &:last-of-type {
-       margin-left: auto;
-       order: 8;
+      margin-left: auto;
+      order: 8;
     }
   }
 }
@@ -554,7 +610,8 @@ blockquote > *:last-child {
   }
 }
 
-a.mention, a.mention-group {
+a.mention,
+a.mention-group {
   padding: 2px 4px;
   color: dark-light-choose($primary-high, $secondary-low);
   background: $primary-low;
@@ -577,12 +634,13 @@ a.mention, a.mention-group {
 
 .large-image-placeholder {
   > a {
-
     &.link {
       margin-right: 10px;
     }
 
-    > * { overflow: hidden; }
+    > * {
+      overflow: hidden;
+    }
 
     > i.fa {
       color: dark-light-choose($primary-medium, $secondary-medium);
@@ -614,7 +672,8 @@ a.mention, a.mention-group {
   }
 }
 
-.broken-image, .large-image {
+.broken-image,
+.large-image {
   color: dark-light-choose($primary-low-mid, $secondary-high);
   border: 1px solid $primary-low;
   font-size: $font-up-5;
@@ -623,13 +682,16 @@ a.mention, a.mention-group {
 
 /* below standard tablet portrait ----------- */
 
-@media all
-and (max-width : 767px) {
+@media all and (max-width: 767px) {
   .reply-to-tab {
-    span {display: none;}
+    span {
+      display: none;
+    }
   }
   .names {
-    span {display: block;}
+    span {
+      display: block;
+    }
   }
   .user-title {
     float: left;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 8bf9f292618..76f1c7d1de0 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -1,9 +1,19 @@
 @keyframes button-jump-up {
-  0% { bottom: 0;}
-  50% { bottom: 45px;}
-  65% { bottom: 40px;}
-  77% { bottom: 43px;}
-  100% { bottom: 40px;}
+  0% {
+    bottom: 0;
+  }
+  50% {
+    bottom: 45px;
+  }
+  65% {
+    bottom: 40px;
+  }
+  77% {
+    bottom: 43px;
+  }
+  100% {
+    bottom: 40px;
+  }
 }
 
 .progress-back-container {
@@ -92,7 +102,9 @@ a.badge-category {
     margin-top: 5px;
   }
 
-  a.edit-topic i { font-size: 0.8em; }
+  a.edit-topic i {
+    font-size: 0.8em;
+  }
 
   .edit-topic-title {
     display: flex;
@@ -105,13 +117,13 @@ a.badge-category {
     .private-message-glyph {
       margin: 5px 5px 0 0;
     }
-    .category-chooser, .mini-tag-chooser {
+    .category-chooser,
+    .mini-tag-chooser {
       flex: 1 1 49%;
       margin: 0 0 9px 0;
       @media all and (max-width: 500px) {
         flex: 1 1 100%;
       }
-
     }
     .mini-tag-chooser {
       margin-left: 2%;
@@ -141,7 +153,6 @@ a.badge-category {
   }
 }
 
-
 .topic-title-outlet {
   clear: both;
 }
@@ -243,7 +254,7 @@ a.badge-category {
     i {
       background: $secondary;
       border-radius: 20px;
-      transition: all linear .15s;
+      transition: all linear 0.15s;
     }
     &:hover {
       color: $tertiary;
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 98c47475ff5..63c87e270d7 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -50,11 +50,14 @@
   .badges-listing {
     display: block;
 
-    .info, .grant-count {
+    .info,
+    .grant-count {
       text-align: left;
     }
 
-    .row > div.info { display: none; }
+    .row > div.info {
+      display: none;
+    }
 
     .row {
       display: block;
@@ -124,8 +127,8 @@
   background-color: $primary-very-low;
   border: 1px solid $primary-low;
   margin-bottom: 2vh;
-  transition: box-shadow .25s;
-  
+  transition: box-shadow 0.25s;
+
   .check-display {
     position: absolute;
     left: 5px;
@@ -145,7 +148,7 @@
     display: flex;
     min-height: 128px;
     height: 100%;
-    
+
     .badge-link {
       display: flex;
       flex: 1 1 auto;
@@ -157,7 +160,7 @@
 
     .badge-icon {
       display: flex;
-      flex: 0 0 auto; 
+      flex: 0 0 auto;
       width: 1.23em;
       margin-right: 5%;
       align-items: center;
@@ -231,7 +234,7 @@
     align-self: flex-start;
     @media screen and (min-width: 767px) {
       max-width: calc(#{$large-width} / 2);
-      margin-right: 1.5em;      
+      margin-right: 1.5em;
     }
     .badge-contents {
       .badge-link {
@@ -240,7 +243,7 @@
         h3 {
           font-size: $font-up-3;
         }
-      }      
+      }
     }
   }
 }
@@ -257,7 +260,7 @@
   margin: 20px 0;
   color: dark-light-choose($primary-medium, $secondary-medium);
   h3 {
-    margin-bottom: 1.0em;
+    margin-bottom: 1em;
   }
 }
 
@@ -272,7 +275,7 @@
   display: flex;
   flex-wrap: wrap;
   @include small-width {
-    justify-content: space-between;    
+    justify-content: space-between;
   }
 
   .title {
@@ -305,7 +308,7 @@
   .badge-set-title {
     padding: 1.5em;
     border: 1px solid $primary-low;
-    
+
     .user-content {
       padding: 0;
       .control-group {
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index b5543ccec6d..5213b373e8b 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -48,7 +48,8 @@
         }
       }
 
-      dt, dd {
+      dt,
+      dd {
         display: inline-flex;
         align-items: center;
       }
@@ -62,10 +63,10 @@
 
         &.groups {
           span:after {
-            content: ','
+            content: ",";
           }
           span:last-of-type:after {
-            content:''
+            content: "";
           }
         }
       }
@@ -78,7 +79,7 @@
     }
 
     .details {
-      background: rgba($secondary, .8);
+      background: rgba($secondary, 0.8);
 
       blockquote {
         background-color: $secondary-low;
@@ -88,7 +89,9 @@
       h1 {
         font-size: $font-up-5;
         font-weight: normal;
-        i {font-size: .8em;}
+        i {
+          font-size: 0.8em;
+        }
       }
 
       h2 {
@@ -180,7 +183,7 @@
 
       .details {
         margin-top: 0;
-        background: rgba($secondary, .8);
+        background: rgba($secondary, 0.8);
 
         .bio {
           display: none;
@@ -227,7 +230,8 @@
     color: $secondary;
     display: flex;
     padding: 10px;
-    > div, > div a {
+    > div,
+    > div a {
       display: flex;
       align-items: baseline;
       flex: 0 1 auto;
@@ -263,15 +267,15 @@
   }
 
   .flagged-posts {
-    background-color: #E49735;
+    background-color: #e49735;
   }
 
   .warnings-received {
-    background-color: #EC441B;
+    background-color: #ec441b;
   }
 
   .deleted-posts {
-    background-color: #EC441B;
+    background-color: #ec441b;
   }
 
   .suspensions {
@@ -295,7 +299,7 @@
       }
 
       .instructions {
-      color: dark-light-choose($primary-medium, $secondary-medium);
+        color: dark-light-choose($primary-medium, $secondary-medium);
         margin-top: 5px;
         margin-bottom: 10px;
         font-size: $font-down-1;
@@ -427,7 +431,8 @@
     padding: 10px 14px;
     margin: 0 5px 10px 0;
 
-    &.linked-stat { // This makes the entire "box" (the li) clickable instead of a narrow area.
+    &.linked-stat {
+      // This makes the entire "box" (the li) clickable instead of a narrow area.
       padding: 0;
       a {
         padding: 10px 14px;
@@ -476,7 +481,7 @@
     color: dark-light-choose($primary-medium, $secondary-high);
   }
 
-  @media all and (max-width : 600px) {
+  @media all and (max-width: 600px) {
     float: none;
     width: 100%;
   }
@@ -576,7 +581,7 @@
     }
 
     // Can remove this once other languages have removed html from i18n values
-    div  {
+    div {
       .fa {
         display: none;
       }
@@ -588,11 +593,11 @@
 }
 
 .qr-code-container {
-    display: flex;
-    .qr-code {
-        padding: 5px 5px 0 5px;
-        background-color: white;
-    }
+  display: flex;
+  .qr-code {
+    padding: 5px 5px 0 5px;
+    background-color: white;
+  }
 }
 
 .primary-textual .staged,
diff --git a/app/assets/stylesheets/common/base/username_tagsinput.scss b/app/assets/stylesheets/common/base/username_tagsinput.scss
index 41fd3fa5d0d..4e69515c27a 100644
--- a/app/assets/stylesheets/common/base/username_tagsinput.scss
+++ b/app/assets/stylesheets/common/base/username_tagsinput.scss
@@ -1,9 +1,9 @@
 div.tagsinput {
-  border:1px solid #CCC;
-  background: #FFF;
-  padding:5px 5px 0;
-  width:584px;
-  height:100px;
+  border: 1px solid #ccc;
+  background: #fff;
+  padding: 5px 5px 0;
+  width: 584px;
+  height: 100px;
   overflow-y: auto;
   border-radius: 4px;
 }
@@ -14,27 +14,42 @@ div.tagsinput span.tag {
   display: block;
   float: left;
   padding: 1px 5px;
-  text-decoration:none;
+  text-decoration: none;
   background: #cde69c;
   color: #638421;
   margin-right: 5px;
-  margin-bottom:5px;
+  margin-bottom: 5px;
   font-family: helvetica;
   font-size: $font-down-1;
 }
 
-div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: $font-down-2; }
+div.tagsinput span.tag a {
+  font-weight: bold;
+  color: #82ad2b;
+  text-decoration: none;
+  font-size: $font-down-2;
+}
 div.tagsinput input {
-  width:80px;
+  width: 80px;
   font-family: helvetica;
   font-size: $font-down-1;
-  border:1px solid transparent;
-  padding:2px 5px;
+  border: 1px solid transparent;
+  padding: 2px 5px;
   background: transparent;
   color: #000;
-  outline:0;
+  outline: 0;
   margin: 0 5px 5px 0;
 }
-div.tagsinput div { display:block; float: left; }
-.tags_clear { clear: both; width: 100%; height: 0; }
-.not_valid {background: #FBD8DB !important; color: #90111A !important;}
+div.tagsinput div {
+  display: block;
+  float: left;
+}
+.tags_clear {
+  clear: both;
+  width: 100%;
+  height: 0;
+}
+.not_valid {
+  background: #fbd8db !important;
+  color: #90111a !important;
+}
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index a2f3274f728..181268994f8 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -22,22 +22,22 @@
   position: relative;
   display: inline-flex;
   align-items: baseline;
-  
+
   .badge-category {
-      display: inline-flex;
-      align-items: baseline;
-      .category-name {
-        text-overflow: ellipsis;
-        overflow: hidden;
+    display: inline-flex;
+    align-items: baseline;
+    .category-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
     .d-icon {
       margin-right: 3px;
     }
   }
 
-  // ----- Bullet 
+  // ----- Bullet
 
-  &.bullet { 
+  &.bullet {
     margin-right: 12px;
     span.badge-category {
       color: $primary;
@@ -47,31 +47,34 @@
         color: $header-primary;
       }
     }
-   .badge-category-parent-bg, .badge-category-bg {
-    width: 9px;
-    height: 9px;
-    margin-right: 5px;
-    display: inline-block;
+    .badge-category-parent-bg,
+    .badge-category-bg {
+      width: 9px;
+      height: 9px;
+      margin-right: 5px;
+      display: inline-block;
     }
-    .badge-category-parent-bg { // Subcategories
+    .badge-category-parent-bg {
+      // Subcategories
       width: 5px;
       margin-right: 0;
-      +.badge-category-bg {
+      + .badge-category-bg {
         width: 5px;
       }
     }
   }
 
-  // ----- Box 
+  // ----- Box
 
-  &.box {  
+  &.box {
     margin-right: 5px;
     padding: 2px 4px 2px 4px;
     display: inline-flex;
     span {
       overflow: hidden;
       text-overflow: ellipsis;
-      &.badge-category-bg, &.badge-category-parent-bg {
+      &.badge-category-bg,
+      &.badge-category-parent-bg {
         position: absolute;
         top: 0;
         right: 0;
@@ -79,7 +82,8 @@
         left: 0;
       }
 
-      &.badge-category-parent-bg { // Subcategories 
+      &.badge-category-parent-bg {
+        // Subcategories
         width: calc(100% - 5px);
         & + .badge-category-bg {
           left: 5px;
@@ -95,13 +99,13 @@
       }
     }
     + .topic-header-extra {
-      padding: 2px 4px 2px 4px;      
+      padding: 2px 4px 2px 4px;
     }
   }
 
-  // ----- Bar 
+  // ----- Bar
 
-  &.bar { 
+  &.bar {
     margin-right: 5px;
 
     span.badge-category {
@@ -115,7 +119,9 @@
       }
     }
 
-    .badge-category-parent-bg, .badge-category-bg { // Subcategories
+    .badge-category-parent-bg,
+    .badge-category-bg {
+      // Subcategories
       display: inline-block;
       padding: 0 1px;
 
@@ -125,16 +131,14 @@
     }
   }
 
-  // ----- No category style 
+  // ----- No category style
 
-  &.none { 
+  &.none {
     color: $primary;
     margin-right: 5px;
   }
-
 }
 
-
 // Category badge dropdown
 // --------------------------------------------------
 
@@ -171,7 +175,8 @@
 
   // New posts
 
-  &.new-posts, &.unread-posts {
+  &.new-posts,
+  &.unread-posts {
     background-color: dark-light-choose($tertiary-medium, $tertiary);
     color: dark-light-choose($secondary, $secondary);
     font-weight: dark-light-choose(normal, bold);
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index f0e2255a0dc..d8cbd89b584 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -14,12 +14,14 @@
   line-height: $line-height-medium;
   text-align: center;
   cursor: pointer;
-  transition: all .25s;
+  transition: all 0.25s;
 
-  &:active, &.btn-active {
+  &:active,
+  &.btn-active {
     text-shadow: none;
   }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
     cursor: default;
     opacity: 0.4;
   }
@@ -44,24 +46,28 @@
   border: none;
   color: $primary;
   font-weight: normal;
-  background: $primary-low; 
+  background: $primary-low;
 
   &[href] {
     color: $primary;
   }
-  &:hover, &.btn-hover {
-    background: $primary-medium; 
+  &:hover,
+  &.btn-hover {
+    background: $primary-medium;
     color: $secondary;
   }
-  &[disabled], &.disabled {
-    background: $primary-low; 
-    &:hover { color: dark-light-choose($primary-low-mid, $secondary-high); }
+  &[disabled],
+  &.disabled {
+    background: $primary-low;
+    &:hover {
+      color: dark-light-choose($primary-low-mid, $secondary-high);
+    }
     cursor: not-allowed;
   }
 
   .d-icon {
     opacity: 0.7;
-    line-height: $line-height-medium; // Match button text line-height 
+    line-height: $line-height-medium; // Match button text line-height
   }
   &.btn-primary .d-icon {
     opacity: 1;
@@ -80,15 +86,18 @@
   &[href] {
     color: $secondary;
   }
-  &:hover, &.btn-hover {
+  &:hover,
+  &.btn-hover {
     color: #fff;
     background: dark-light-choose($tertiary, $tertiary);
   }
-  &:active, &.btn-active {
+  &:active,
+  &.btn-active {
     @include linear-gradient($tertiary, $tertiary);
     color: $secondary;
   }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
     background: $tertiary;
   }
 }
@@ -103,13 +112,16 @@
   &[href] {
     color: $secondary;
   }
-  &:hover, &.btn-hover {
+  &:hover,
+  &.btn-hover {
     background: scale-color($danger, $lightness: -20%);
   }
-  &:active, &.btn-active {
+  &:active,
+  &.btn-active {
     @include linear-gradient(scale-color($danger, $lightness: -20%), $danger);
   }
-  &[disabled], &.disabled {
+  &[disabled],
+  &.disabled {
     background: $danger;
   }
 }
@@ -130,7 +142,8 @@
     font-family: FontAwesome;
     font-size: $font-0;
   }
-  &.google, &.google_oauth2 {
+  &.google,
+  &.google_oauth2 {
     background: $google;
     &:before {
       content: $fa-var-google;
diff --git a/app/assets/stylesheets/common/components/date-picker.scss b/app/assets/stylesheets/common/components/date-picker.scss
index 350927e4b5b..801e7b3a066 100644
--- a/app/assets/stylesheets/common/components/date-picker.scss
+++ b/app/assets/stylesheets/common/components/date-picker.scss
@@ -1,5 +1,6 @@
 .pika-table {
-  th, td {
+  th,
+  td {
     padding: 0 !important;
     border-top: none !important;
     border-bottom: none !important;
diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss
index 4cf0903d442..a36a1f8cc08 100644
--- a/app/assets/stylesheets/common/components/hashtag.scss
+++ b/app/assets/stylesheets/common/components/hashtag.scss
@@ -2,7 +2,8 @@ a.hashtag {
   color: dark-light-choose($primary, $primary-low-mid);
   font-weight: bold;
 
-  &:visited, &:hover {
+  &:visited,
+  &:hover {
     color: dark-light-choose($primary, $primary-low-mid);
   }
 
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index 643c314463d..d8b6312332b 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -1,8 +1,11 @@
-.topic-list-item td:first-child, .topic-post {
+.topic-list-item td:first-child,
+.topic-post {
   border-left: 1px solid transparent;
 }
 
-.topic-list tr.selected td:first-child, .topic-list-item.selected td:first-child, .topic-post.selected {
+.topic-list tr.selected td:first-child,
+.topic-list-item.selected td:first-child,
+.topic-post.selected {
   box-shadow: -3px 0 0 $danger;
 }
 
@@ -19,7 +22,7 @@
     width: 100%;
     div {
       float: left;
-      width:32%;
+      width: 32%;
     }
   }
   ul {
@@ -27,7 +30,7 @@
     margin-left: 0;
 
     li {
-      margin: 5px 0
+      margin: 5px 0;
     }
 
     b {
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 6bdc0b3961c..0baa28b8461 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -31,11 +31,11 @@
       color: $primary;
       font-size: $font-up-1;
       line-height: $line-height-medium;
-      transition: background .15s;
+      transition: background 0.15s;
 
       .d-icon {
         margin-right: 5px;
-        opacity: .65;
+        opacity: 0.65;
       }
 
       &:hover {
@@ -110,7 +110,7 @@
     font-size: $font-down-1;
     width: 1.25em;
     text-align: center;
-    margin-right: .5em;
+    margin-right: 0.5em;
     line-height: $line-height-large;
   }
 }
diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss
index fa704ab5f89..0dbacd65a60 100644
--- a/app/assets/stylesheets/common/components/user-info.scss
+++ b/app/assets/stylesheets/common/components/user-info.scss
@@ -53,7 +53,8 @@
   &.medium {
     min-height: 60px;
 
-    .username, .name {
+    .username,
+    .name {
       display: block;
     }
 
@@ -76,4 +77,3 @@
     }
   }
 }
-
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index ea79b2e3bb8..249fb188f97 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -1,6 +1,5 @@
 // Common styles for "user-stream-item" component
 .user-stream {
-
   // DEPRECATED:
   // The ".item" class should be removed because it's too generic.
   // Once ".item" has been removed, ".user-stream-item" can replace
@@ -17,7 +16,12 @@
 
     &.deleted {
       opacity: 0.8;
-      background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
+      background-color: dark-light-diff(
+        rgba($danger, 0.7),
+        $secondary,
+        50%,
+        -10%
+      );
     }
 
     &.hidden {
@@ -43,7 +47,8 @@
     font-size: $font-0;
   }
 
-  .expand-item, .collapse-item {
+  .expand-item,
+  .collapse-item {
     float: right;
     margin-right: 0.5em;
     line-height: $line-height-small;
@@ -71,7 +76,10 @@
   }
 
   .edit-reason {
-    background-color: dark-light-choose($highlight-medium, scale-color($highlight, $lightness: -50%));
+    background-color: dark-light-choose(
+      $highlight-medium,
+      scale-color($highlight, $lightness: -50%)
+    );
     padding: 3px 5px 5px 5px;
   }
 
@@ -100,7 +108,8 @@
     }
 
     // common/base/header.scss
-    .fa, .icon {
+    .fa,
+    .icon {
       color: dark-light-choose($primary-medium, $secondary-medium);
       font-size: $font-up-4;
     }
@@ -122,7 +131,7 @@
   }
 }
 
-.user-stream .child-actions, // DEPRECATED: '.user-stream .child-actions' selector
+.user-stream .child-actions, /* DEPRECATED: '.user-stream .child-actions' selector*/
 .user-stream-item-actions {
   margin-top: 8px;
 
@@ -137,4 +146,3 @@
     color: $primary;
   }
 }
-
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 5ccdd6b224f..d8168a6e688 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -8,12 +8,12 @@
   position: absolute;
   background-color: black;
   opacity: 0.8;
-  z-index: z("modal","overlay");
+  z-index: z("modal", "overlay");
 }
 
 .d-editor-modals {
   position: absolute;
-  z-index: z("modal","content");
+  z-index: z("modal", "content");
 }
 
 .d-editor {
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 247c60d4760..3a1db2ed885 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -54,12 +54,14 @@ dd {
   padding: 0;
 }
 
-
-.cooked ul, .cooked ol, .cooked dd {
+.cooked ul,
+.cooked ol,
+.cooked dd {
   clear: both;
 }
 
-.cooked ul, .d-editor-preview ul {
+.cooked ul,
+.d-editor-preview ul {
   margin: 0;
   padding-left: 40px;
 }
@@ -93,12 +95,14 @@ pre code {
 }
 
 // TODO figure out a clean place to put stuff like this
-.row:before, .row:after {
+.row:before,
+.row:after {
   display: table;
   content: "";
 }
-.row:after {clear: both;}
-
+.row:after {
+  clear: both;
+}
 
 #offscreen-content {
   display: none;
@@ -115,5 +119,5 @@ tr {
   border-bottom: 1px solid $primary-low;
   &.highlighted {
     animation: background-fade-highlight 2.5s ease-out;
-  }  
-}
\ No newline at end of file
+  }
+}
diff --git a/app/assets/stylesheets/common/foundation/colors.scss b/app/assets/stylesheets/common/foundation/colors.scss
index 72041265b9b..ddfce76228a 100644
--- a/app/assets/stylesheets/common/foundation/colors.scss
+++ b/app/assets/stylesheets/common/foundation/colors.scss
@@ -1,10 +1,10 @@
-$primary:           #222222 !default;
-$secondary:         #ffffff !default;
-$tertiary:          #0088cc !default;
-$quaternary:        #e45735 !default;
+$primary: #222222 !default;
+$secondary: #ffffff !default;
+$tertiary: #0088cc !default;
+$quaternary: #e45735 !default;
 $header_background: #ffffff !default;
-$header_primary:    #333333 !default;
-$highlight:         #ffff4d !default;
-$danger:            #e45735 !default;
-$success:           #009900 !default;
-$love:              #fa6c8d !default;
+$header_primary: #333333 !default;
+$highlight: #ffff4d !default;
+$danger: #e45735 !default;
+$success: #009900 !default;
+$love: #fa6c8d !default;
diff --git a/app/assets/stylesheets/common/foundation/helpers.scss b/app/assets/stylesheets/common/foundation/helpers.scss
index 883c8926cfa..e2f2d62dd05 100644
--- a/app/assets/stylesheets/common/foundation/helpers.scss
+++ b/app/assets/stylesheets/common/foundation/helpers.scss
@@ -36,7 +36,7 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0,0,0,0);
+  clip: rect(0, 0, 0, 0);
   border: 0;
 }
 
@@ -77,10 +77,9 @@
   cursor: pointer;
 }
 
-
 // Buttons
 // ---------------------------------------------------
 .disable-no-hover:hover {
-  background: dark-light-choose($primary-low, $secondary-medium);;
+  background: dark-light-choose($primary-low, $secondary-medium);
   color: $primary;
 }
diff --git a/app/assets/stylesheets/common/foundation/math.scss b/app/assets/stylesheets/common/foundation/math.scss
index f7132c42708..4d572575454 100644
--- a/app/assets/stylesheets/common/foundation/math.scss
+++ b/app/assets/stylesheets/common/foundation/math.scss
@@ -4,9 +4,9 @@
 // https://github.com/terkel/mathsass
 
 // Constants
-$E:     2.718281828459045;
-$PI:    3.141592653589793;
-$LN2:   0.6931471805599453;
+$E: 2.718281828459045;
+$PI: 3.141592653589793;
+$LN2: 0.6931471805599453;
 $SQRT2: 1.4142135623730951;
 
 @function error($message) {
@@ -20,8 +20,8 @@ $SQRT2: 1.4142135623730951;
 // @example
 //     fact(0) // 1
 //     fact(8) // 40320
-@function fact ($x) {
-  @if $x < 0 or  $x != floor($x) {
+@function fact($x) {
+  @if $x < 0 or $x != floor($x) {
     @warn "Argument for `fact()` must be a positive integer.";
     @return null;
   }
@@ -33,11 +33,10 @@ $SQRT2: 1.4142135623730951;
   @return $ret;
 }
 
-
 // Returns a two-element list containing the normalized fraction and exponent of number.
 // @param {Number} $x
 // @return {List} fraction, exponent
-@function frexp ($x) {
+@function frexp($x) {
   $exp: 0;
   @if $x < 0 {
     $x: $x * -1;
@@ -59,7 +58,7 @@ $SQRT2: 1.4142135623730951;
 // Returns $x * 2^$exp
 // @param {Number} $x
 // @param {Number} $exp
-@function ldexp ($x, $exp) {
+@function ldexp($x, $exp) {
   $b: if($exp >= 0, 2, 1 / 2);
   @if $exp < 0 {
     $exp: $exp * -1;
@@ -79,7 +78,7 @@ $SQRT2: 1.4142135623730951;
 // @example
 //     log(2)  // 0.69315
 //     log(10) // 2.30259
-@function log ($x) {
+@function log($x) {
   @if $x <= 0 {
     @return 0 / 0;
   }
@@ -124,7 +123,7 @@ $SQRT2: 1.4142135623730951;
 // @example
 //     exp(1)  // 2.71828
 //     exp(-1) // 0.36788
-@function exp ($x) {
+@function exp($x) {
   $ret: 0;
   @for $n from 0 to 24 {
     $ret: $ret + ipow($x, $n) / fact($n);
@@ -140,7 +139,7 @@ $SQRT2: 1.4142135623730951;
 //     pow(4, 2)   // 16
 //     pow(4, -2)  // 0.0625
 //     pow(4, 0.2) // 1.31951
-@function pow ($base, $exp) {
+@function pow($base, $exp) {
   @if $exp == floor($exp) {
     @return ipow($base, $exp);
   } @else {
@@ -153,7 +152,7 @@ $SQRT2: 1.4142135623730951;
 // @example
 //     sqrt(2) // 1.41421
 //     sqrt(5) // 2.23607
-@function sqrt ($x) {
+@function sqrt($x) {
   @if $x < 0 {
     @return error("Argument for `sqrt()` must be a positive number.");
   }
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 24d3a00a439..a6a3ed9bb8a 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -5,7 +5,6 @@
 // Media queries
 // --------------------------------------------------
 
-
 @mixin small-width {
   @media all and (max-width: 850px) {
     @content;
@@ -24,11 +23,31 @@
   }
 }
 
-@mixin mobile-portrait      { @media all and (max-width : 320px) { @content; } }
-@mixin not-mobile-portrait  { @media all and (min-width : 321px) { @content; } }
-@mixin mobile-landscape     { @media all and (min-width : 321px) and (max-width : 959px) { @content; } }
-@mixin not-tablet-landscape { @media all and (max-width : 959px) { @content; } }
-@mixin tablet-landscape     { @media all and (min-width : 960px) { @content; } }
+@mixin mobile-portrait {
+  @media all and (max-width: 320px) {
+    @content;
+  }
+}
+@mixin not-mobile-portrait {
+  @media all and (min-width: 321px) {
+    @content;
+  }
+}
+@mixin mobile-landscape {
+  @media all and (min-width: 321px) and (max-width: 959px) {
+    @content;
+  }
+}
+@mixin not-tablet-landscape {
+  @media all and (max-width: 959px) {
+    @content;
+  }
+}
+@mixin tablet-landscape {
+  @media all and (min-width: 960px) {
+    @content;
+  }
+}
 
 // CSS3 properties
 // --------------------------------------------------
@@ -36,14 +55,14 @@
 // Clearfix
 
 @mixin clearfix() {
-    &:before,
-    &:after {
-        content: "";
-        display: table;
-    }
-    &:after {
-        clear: both;
-    }
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
 }
 
 // Border radius
@@ -90,15 +109,14 @@
 
 @mixin user-select($mode) {
   -webkit-user-select: $mode;
-     -moz-user-select: $mode;
-      -ms-user-select: $mode;
+  -moz-user-select: $mode;
+  -ms-user-select: $mode;
 }
 
 @mixin unselectable {
   @include user-select(none);
 }
 
-
 // Stuff we repeat
 @mixin post-aside {
   border-left: 5px solid $primary-low;
@@ -107,13 +125,13 @@
 
 // We still need -webkit for latest iPhone and Safari
 @mixin transform($transforms) {
-	-webkit-transform: $transforms;
-            transform: $transforms;
+  -webkit-transform: $transforms;
+  transform: $transforms;
 }
 
-
-@mixin appearance-none() { // resets default browser styles
+@mixin appearance-none() {
+  // resets default browser styles
   -webkit-appearance: none;
-  -moz-appearance:    none;
-  appearance:         none;
-}
\ No newline at end of file
+  -moz-appearance: none;
+  appearance: none;
+}
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 6a91f1006ae..8f0537d4730 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -17,7 +17,7 @@ $input-padding: 4px 10px;
 $google: #5b76f7 !default;
 $instagram: #125688 !default;
 $facebook: #3b5998 !default;
-$cas: #70BA61 !default;
+$cas: #70ba61 !default;
 $twitter: #00bced !default;
 $yahoo: #810293 !default;
 $github: #6d6d6d !default;
@@ -43,12 +43,12 @@ $font-up-3: 1.5157em;
 $font-up-2: 1.3195em;
 $font-up-1: 1.1487em; // 2^(1/5)
 $font-0: 1em;
-$font-down-1: .8706em; // 2^(-1/5)
-$font-down-2: .7579em; // Smallest size we use based on the 1em base
-$font-down-3: .6599em;
-$font-down-4: .5745em;
-$font-down-5: .5em;
-$font-down-6: .4355em;
+$font-down-1: 0.8706em; // 2^(-1/5)
+$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
+$font-down-3: 0.6599em;
+$font-down-4: 0.5745em;
+$font-down-5: 0.5em;
+$font-down-6: 0.4355em;
 
 // Common line-heights
 $line-height-small: 1;
@@ -66,29 +66,29 @@ $line-height-large: 1.4; // Normal or small text
 // --------------------------------------------------
 
 $z-layers: (
-  "max":              9999,
-  "fullscreen":       1700,
+  "max": 9999,
+  "fullscreen": 1700,
   "modal": (
-    "tooltip":        1600,
-    "popover":        1500,
-    "dropdown":       1400,
-    "content":        1300,
-    "overlay":        1200,
+    "tooltip": 1600,
+    "popover": 1500,
+    "dropdown": 1400,
+    "content": 1300,
+    "overlay": 1200
   ),
-  "mobile-composer":  1100,
-  "header":           1000,
-  "tooltip":          600,
+  "mobile-composer": 1100,
+  "header": 1000,
+  "tooltip": 600,
   "composer": (
-      "dropdown":     700,
-      "tooltip":      600,      
-      "popover":      500,
-      "content":      400,
+    "dropdown": 700,
+    "tooltip": 600,
+    "popover": 500,
+    "content": 400
   ),
-  "dropdown":         300,
-  "usercard":         200,
-  "timeline":         100,
-  "base":             1
-  );
+  "dropdown": 300,
+  "usercard": 200,
+  "timeline": 100,
+  "base": 1
+);
 
 @function map-has-nested-keys($map, $keys...) {
   @each $key in $keys {
@@ -114,19 +114,21 @@ $z-layers: (
   @return map-deep-get($z-layers, $layers...);
 }
 
-
 // Box-shadow
 // --------------------------------------------------
 
 $box-shadow: (
-  "modal":        0 8px 60px rgba(0, 0, 0, 0.6),
-  "composer":     0 -1px 40px rgba(0, 0, 0, 0.12),
-  "menu-panel":   0 6px 14px rgba(0, 0, 0, 0.15),
-  "card":         0 4px 14px rgba(0, 0, 0, 0.15),
-  "dropdown":     0 2px 3px 0 rgba(0, 0, 0, 0.2),
-  "header":       0 2px 4px -1px rgba(0, 0, 0, 0.25),
-  "kbd":         (0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px dark-light-choose(#fff, #000) inset),
-  "focus":        0 0 6px 0 $tertiary,
+  "modal": 0 8px 60px rgba(0, 0, 0, 0.6),
+  "composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
+  "menu-panel": 0 6px 14px rgba(0, 0, 0, 0.15),
+  "card": 0 4px 14px rgba(0, 0, 0, 0.15),
+  "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
+  "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
+  "kbd": (
+    0 2px 0 rgba(0, 0, 0, 0.2),
+    0 0 0 1px dark-light-choose(#fff, #000) inset
+  ),
+  "focus": 0 0 6px 0 $tertiary,
   "focus-danger": 0 0 6px 0 $danger
 );
 
@@ -139,7 +141,9 @@ $box-shadow: (
 
 // w3c definition of color brightness https://www.w3.org/TR/AERT#color-contrast
 @function dc-color-brightness($color) {
-  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114));
+  @return (
+    (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
+  );
 }
 
 // Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
@@ -166,8 +170,15 @@ $box-shadow: (
   @return srgb-scale($primary, $secondary, $percent);
 }
 
-@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
-  @if dc-color-brightness($adjusted-color) < dc-color-brightness($comparison-color) {
+@function dark-light-diff(
+  $adjusted-color,
+  $comparison-color,
+  $lightness,
+  $darkness
+) {
+  @if dc-color-brightness($adjusted-color) <
+    dc-color-brightness($comparison-color)
+  {
     @return scale-color($adjusted-color, $lightness: $lightness);
   } @else {
     @return scale-color($adjusted-color, $lightness: $darkness);
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 7a57d21069a..1ca29065151 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -11,7 +11,8 @@
     color: white;
     box-shadow: shadow("dropdown");
   }
-  &.hide, &.good {
+  &.hide,
+  &.good {
     display: none;
   }
   .close {
@@ -23,6 +24,6 @@
     cursor: pointer;
   }
   .close:hover {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
diff --git a/app/assets/stylesheets/common/printer-friendly.scss b/app/assets/stylesheets/common/printer-friendly.scss
index dc7ad0e4958..7a656553088 100644
--- a/app/assets/stylesheets/common/printer-friendly.scss
+++ b/app/assets/stylesheets/common/printer-friendly.scss
@@ -35,21 +35,45 @@
   .alert-info,
   .badge-category,
   .badge-category-bg,
-  .badge-notification.clicks{
+  .badge-notification.clicks {
     display: none !important;
   }
   /* bottom border to help separate posts */
   div.row {
-    border-top: 1px solid #AAA;
+    border-top: 1px solid #aaa;
+  }
+  .cooked pre code {
+    max-height: none;
+  }
+  #main-outlet {
+    padding: 0 !important;
+  }
+  html,
+  body {
+    min-width: 0;
+    height: auto;
+  }
+  .lightbox-wrapper img {
+    max-width: 500px !important;
+    height: auto !important;
+  }
+  .topic-body {
+    width: auto;
+    margin: 0;
+    padding: 0;
+    float: none;
+  }
+  .topic-post article.boxed .select-posts {
+    width: auto;
+    left: auto;
+    right: 0;
+  }
+  .gap {
+    width: auto;
+  }
+  .gutter {
+    padding: 0;
   }
-  .cooked pre code { max-height: none; }
-  #main-outlet { padding: 0 !important; }
-  html,body { min-width: 0; height: auto; }
-  .lightbox-wrapper img { max-width: 500px !important; height: auto !important; }
-  .topic-body { width: auto; margin: 0; padding: 0; float: none; }
-  .topic-post article.boxed .select-posts { width: auto; left: auto; right: 0; }
-  .gap { width: auto; }
-  .gutter { padding: 0; }
   /* restyle div#topic-title */
   #topic-title {
     margin: 0;
@@ -62,8 +86,9 @@
     font-weight: normal;
     font-size: normal;
   }
-  a, a:visited {
-    color: #DDD;
+  a,
+  a:visited {
+    color: #ddd;
     font-weight: bold;
   }
   /* hide OP Solved plugin stuff */
diff --git a/app/assets/stylesheets/common/select-kit/admin-agree-flag-dropdown.scss b/app/assets/stylesheets/common/select-kit/admin-agree-flag-dropdown.scss
index 762b99dd44a..e6a4055c1ef 100644
--- a/app/assets/stylesheets/common/select-kit/admin-agree-flag-dropdown.scss
+++ b/app/assets/stylesheets/common/select-kit/admin-agree-flag-dropdown.scss
@@ -1,6 +1,5 @@
 .select-kit {
   &.dropdown-select-box {
-
     &.admin-agree-flag-dropdown {
       .select-kit-body {
         width: 485px;
diff --git a/app/assets/stylesheets/common/select-kit/category-chooser.scss b/app/assets/stylesheets/common/select-kit/category-chooser.scss
index 10ad31953e9..7caa003c56f 100644
--- a/app/assets/stylesheets/common/select-kit/category-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/category-chooser.scss
@@ -8,12 +8,12 @@
         display: -ms-flexbox;
         display: flex;
         -webkit-box-align: flex-start;
-            -ms-flex-align: flex-start;
-                align-items: flex-start;
+        -ms-flex-align: flex-start;
+        align-items: flex-start;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-                flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
 
         &.none {
           .topic-count {
@@ -31,14 +31,14 @@
           color: $primary;
           line-height: $line-height-large;
           -webkit-box-flex: 0;
-              -ms-flex: 1 1 auto;
-                  flex: 1 1 auto;
+          -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
         }
 
         .category-desc {
           -webkit-box-flex: 0;
-              -ms-flex: 1 1 auto;
-                  flex: 1 1 auto;
+          -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
           color: #919191;
           font-size: $font-down-1;
           line-height: $line-height-large;
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 3bc481336d0..e2b21056955 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -1,7 +1,6 @@
 .select-kit {
   &.combo-box {
     &.category-drop {
-
       .badge-wrapper {
         font-size: $font-0;
         font-weight: normal;
@@ -25,7 +24,7 @@
 
       .category-drop-header {
         padding: 5px 5px 5px 10px;
-        
+
         &.is-none .selected-name {
           color: inherit;
         }
@@ -33,7 +32,6 @@
         .badge-wrapper {
           margin-right: 0;
         }
-
       }
 
       .select-kit-body {
@@ -65,7 +63,8 @@
         }
       }
 
-      &.is-expanded .select-kit-wrapper, .select-kit-wrapper {
+      &.is-expanded .select-kit-wrapper,
+      .select-kit-wrapper {
         display: none;
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/category-row.scss b/app/assets/stylesheets/common/select-kit/category-row.scss
index 47d4d2d9204..f60acf0e03d 100644
--- a/app/assets/stylesheets/common/select-kit/category-row.scss
+++ b/app/assets/stylesheets/common/select-kit/category-row.scss
@@ -1,13 +1,14 @@
 .select-kit {
   .category-row {
-    .category-status, .category-desc {
+    .category-status,
+    .category-desc {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      max-width: 100%;      
+      max-width: 100%;
       -webkit-box-flex: 0;
-          -ms-flex: 1 1 auto;
-              flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
     }
 
     .category-status {
diff --git a/app/assets/stylesheets/common/select-kit/category-selector.scss b/app/assets/stylesheets/common/select-kit/category-selector.scss
index 2da4ad182d6..f18c0450d7a 100644
--- a/app/assets/stylesheets/common/select-kit/category-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/category-selector.scss
@@ -1,6 +1,7 @@
-.select-kit, .select-kit-box {
+.select-kit,
+.select-kit-box {
   &.category-selector {
-    .selected-name  {
+    .selected-name {
       .badge-wrapper {
         &.box {
           margin: 2px;
diff --git a/app/assets/stylesheets/common/select-kit/composer-actions.scss b/app/assets/stylesheets/common/select-kit/composer-actions.scss
index 87b81f371f1..7e5df147061 100644
--- a/app/assets/stylesheets/common/select-kit/composer-actions.scss
+++ b/app/assets/stylesheets/common/select-kit/composer-actions.scss
@@ -11,10 +11,11 @@
         .d-icon {
           border: 1px solid $primary-low;
           padding: 4px 5px;
-          margin: 0!important;
+          margin: 0 !important;
         }
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           background: $primary-low;
         }
       }
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 20345715ec1..b240227b989 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -30,13 +30,13 @@
         display: -ms-flexbox;
         display: flex;
         -webkit-box-align: start;
-            -ms-flex-align: start;
-                align-items: flex-start;
+        -ms-flex-align: start;
+        align-items: flex-start;
         -webkit-box-pack: center;
-            -ms-flex-pack: center;
-                justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
         -ms-flex-item-align: start;
-            align-self: flex-start;
+        align-self: flex-start;
         margin-right: 10px;
         margin-top: 2px;
         width: 30px;
@@ -44,7 +44,7 @@
         .d-icon {
           font-size: $font-up-2;
           -ms-flex-item-align: center;
-              align-self: center;
+          align-self: center;
           margin-right: 0;
           opacity: 1;
         }
@@ -54,25 +54,25 @@
         min-width: 0;
         line-height: $line-height-large;
         -webkit-box-flex: 1;
-            -ms-flex: 1;
-                flex: 1;
+        -ms-flex: 1;
+        flex: 1;
         -webkit-box-align: start;
-            -ms-flex-align: start;
-                align-items: flex-start;
+        -ms-flex-align: start;
+        align-items: flex-start;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-wrap: wrap;
-            flex-wrap: wrap;
+        flex-wrap: wrap;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-                flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
 
         .name {
           -webkit-box-flex: 1;
-              -ms-flex: 1;
-                  flex: 1;
+          -ms-flex: 1;
+          flex: 1;
           font-weight: bold;
           font-size: $font-0;
           color: $primary;
@@ -85,11 +85,14 @@
 
         .desc {
           -webkit-box-flex: 1;
-              -ms-flex: 1;
-                  flex: 1;
+          -ms-flex: 1;
+          flex: 1;
           font-size: $font-down-1;
           font-weight: normal;
-          color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));;
+          color: dark-light-choose(
+            scale-color($primary, $lightness: 50%),
+            scale-color($secondary, $lightness: 40%)
+          );
           white-space: normal;
         }
       }
@@ -102,20 +105,20 @@
 
     .dropdown-select-box-header {
       -webkit-box-sizing: border-box;
-         -moz-box-sizing: border-box;
-              box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
       border: 0;
 
       -webkit-box-align: center;
-          -ms-flex-align: center;
-              align-items: center;
+      -ms-flex-align: center;
+      align-items: center;
       -webkit-box-pack: justify;
-          -ms-flex-pack: justify;
-              justify-content: space-between;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
       -webkit-box-orient: horizontal;
       -webkit-box-direction: normal;
-          -ms-flex-direction: row;
-              flex-direction: row;
+      -ms-flex-direction: row;
+      flex-direction: row;
       display: -webkit-inline-box;
       display: -ms-inline-flexbox;
       display: inline-flex;
diff --git a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
index b05db54dc35..85a8d768e67 100644
--- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
@@ -36,7 +36,8 @@
         border-top: 0;
       }
 
-      &.is-expanded .select-kit-wrapper, .select-kit-wrapper {
+      &.is-expanded .select-kit-wrapper,
+      .select-kit-wrapper {
         display: none;
       }
 
@@ -74,13 +75,13 @@
             border: 0;
 
             &.is-highlighted {
-              box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0,0,0,0.05);
+              box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05);
             }
 
             &:after {
-              content: '\f00d';
+              content: "\f00d";
               color: $primary-low-mid;
-              font-family: 'FontAwesome';
+              font-family: "FontAwesome";
             }
 
             &:hover {
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index 1978d1c43ac..5d0c270f79f 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -91,7 +91,8 @@
         outline: none;
         flex: 1;
 
-        .filter-input, .filter-input:focus {
+        .filter-input,
+        .filter-input:focus {
           border: none;
           background: none;
           display: inline-block;
@@ -137,9 +138,9 @@
           align-items: center;
 
           &:after {
-            content: '\f00d';
+            content: "\f00d";
             color: $primary-low-mid;
-            font-family: 'FontAwesome';
+            font-family: "FontAwesome";
             font-size: $font-down-2;
             margin-left: 5px;
           }
@@ -178,9 +179,9 @@
           line-height: $line-height-medium;
 
           &:after {
-            content: '\f00d';
+            content: "\f00d";
             color: $primary-low-mid;
-            font-family: 'FontAwesome';
+            font-family: "FontAwesome";
             font-size: $font-down-2;
           }
 
@@ -192,7 +193,7 @@
         }
 
         &.is-highlighted {
-          box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0,0,0,0.05);
+          box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/notifications-button.scss b/app/assets/stylesheets/common/select-kit/notifications-button.scss
index 34b447ed300..45679a09b2b 100644
--- a/app/assets/stylesheets/common/select-kit/notifications-button.scss
+++ b/app/assets/stylesheets/common/select-kit/notifications-button.scss
@@ -9,7 +9,7 @@
       .select-kit-row {
         .icons {
           -ms-flex-item-align: start;
-              align-self: flex-start;
+          align-self: flex-start;
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index 1759b9ddf68..a15566040be 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -42,7 +42,8 @@
           font-size: $font-up-3;
         }
 
-        &.is-focused, &:hover {
+        &.is-focused,
+        &:hover {
           background: none;
           border: none;
           outline: none;
@@ -51,7 +52,7 @@
 
       .period-chooser-row {
         font-weight: bold;
-        padding: 5px;;
+        padding: 5px;
         font-size: $font-up-1;
         align-items: center;
         display: flex;
diff --git a/app/assets/stylesheets/common/select-kit/pinned-button.scss b/app/assets/stylesheets/common/select-kit/pinned-button.scss
index 93642050072..c0d444169b5 100644
--- a/app/assets/stylesheets/common/select-kit/pinned-button.scss
+++ b/app/assets/stylesheets/common/select-kit/pinned-button.scss
@@ -23,11 +23,11 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   margin: 0;
   min-width: auto;
 
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 1ab67344b1f..6a9fdb1617e 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -59,14 +59,14 @@
   .select-kit-header {
     box-sizing: border-box;
     overflow: hidden;
-    transition: all .25s;
+    transition: all 0.25s;
     cursor: pointer;
     outline: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: row;
-  
+
     .selected-name {
       text-align: left;
       flex: 1 1 auto;
@@ -148,7 +148,8 @@
       background: $tertiary-low;
     }
 
-    .discourse-tag, .discourse-tag-count {
+    .discourse-tag,
+    .discourse-tag-count {
       color: $primary;
     }
   }
@@ -203,7 +204,9 @@
     align-items: center;
     justify-content: space-between;
 
-    .filter-input, .filter-input:focus, .filter-input:active {
+    .filter-input,
+    .filter-input:focus,
+    .filter-input:active {
       background: none;
       margin: 0;
       padding: 0;
diff --git a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
index 21a65c57455..3d1e28dcde0 100644
--- a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
+++ b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
@@ -12,9 +12,10 @@
         margin-bottom: 5px;
         padding: 6px 3px;
         background: $primary-low;
-        transition: all .25s;
+        transition: all 0.25s;
 
-        .name, .d-icon {
+        .name,
+        .d-icon {
           font-size: $font-0;
           font-weight: normal;
           color: $primary;
@@ -27,7 +28,8 @@
         &.is-highlighted {
           background: $primary-medium;
 
-          .name, .d-icon {
+          .name,
+          .d-icon {
             color: $secondary;
           }
         }
diff --git a/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss b/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss
index 9910a3bf5f8..fc10cafa2ac 100644
--- a/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss
+++ b/app/assets/stylesheets/common/select-kit/topic-notifications-button.scss
@@ -23,11 +23,11 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   margin: 0;
 
   .topic-notifications-options {
diff --git a/app/assets/stylesheets/common/topic-entrance.scss b/app/assets/stylesheets/common/topic-entrance.scss
index 1f20b3ac562..901bcfd67e4 100644
--- a/app/assets/stylesheets/common/topic-entrance.scss
+++ b/app/assets/stylesheets/common/topic-entrance.scss
@@ -1,6 +1,5 @@
 #topic-entrance {
-
-  border: 1px solid $primary-low; 
+  border: 1px solid $primary-low;
   padding: 5px;
   background: $secondary;
   box-shadow: shadow("card");
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index e854a9c8b11..c6ef4a95db2 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -15,7 +15,7 @@
   }
 
   position: fixed;
-  -webkit-transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
 
   &.timeline-docked {
     position: absolute;
@@ -84,7 +84,7 @@
         display: -webkit-box;
         -webkit-line-clamp: 8;
         @media screen and (max-height: 425px) {
-          -webkit-line-clamp: 5;          
+          -webkit-line-clamp: 5;
         }
         -webkit-box-orient: vertical;
       }
@@ -120,7 +120,7 @@
         right: 0;
         margin-left: 0;
         i.progress {
-          display: none
+          display: none;
         }
       }
       .timeline-footer-controls {
@@ -129,7 +129,8 @@
         bottom: 10px;
         left: 10px;
 
-        button, .btn-group {
+        button,
+        .btn-group {
           float: none;
           display: inline-block;
           margin-bottom: 0;
@@ -170,13 +171,11 @@
       }
     }
 
-
     .timeline-scrollarea-wrapper::after {
       content: "";
       display: table;
       clear: both;
     }
-
   }
 
   .topic-timeline {
@@ -217,7 +216,7 @@
       border-left: 1px solid;
       border-color: dark-light-choose($tertiary-low, $tertiary-high);
       position: relative;
-      -webkit-transform: translate3d(0,0,0);
+      -webkit-transform: translate3d(0, 0, 0);
     }
 
     .timeline-padding {
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index c300929b86c..f89e2ead2ac 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -2,7 +2,8 @@
   margin-bottom: 10px;
   width: 100%;
 
-  td, th {
+  td,
+  th {
     @extend .list-cell;
   }
 
@@ -83,7 +84,6 @@
   }
 
   tbody {
-
     .category {
       border-left: 6px solid;
       h3 {
@@ -104,7 +104,8 @@
   }
 }
 
-.categories-and-latest, .categories-and-top {
+.categories-and-latest,
+.categories-and-top {
   display: flex;
   flex-flow: row wrap;
 
@@ -115,13 +116,13 @@
   }
 
   div.column.categories {
-    @media all and (max-width : 600px) {
+    @media all and (max-width: 600px) {
       margin-right: 0;
     }
-    @media all and (min-width : 600px) {
+    @media all and (min-width: 600px) {
       margin-right: 1em;
     }
-    @media all and (min-width : 700px) {
+    @media all and (min-width: 700px) {
       margin-right: 2em;
     }
   }
@@ -134,4 +135,3 @@
     padding-left: 8px;
   }
 }
-
diff --git a/app/assets/stylesheets/desktop/components/user-stream-item.scss b/app/assets/stylesheets/desktop/components/user-stream-item.scss
index fe116155cb6..af6000f3845 100644
--- a/app/assets/stylesheets/desktop/components/user-stream-item.scss
+++ b/app/assets/stylesheets/desktop/components/user-stream-item.scss
@@ -1,6 +1,5 @@
 // Desktop styles for "user-stream-item" component
 .user-stream {
-
   // DEPRECATION:
   // The ".item" class should be eventually removed because it's too generic.
   // Once ".item" has been removed, ".user-stream-item" can replace
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index ccdd3fb1060..18b97c1298f 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -16,7 +16,7 @@
   }
 
   .select-kit.is-expanded {
-    z-index: z("composer","dropdown");    
+    z-index: z("composer", "dropdown");
   }
 }
 
@@ -58,7 +58,7 @@
     padding: 4px 0;
     background: $tertiary;
     &:before {
-      content: '';
+      content: "";
       display: block;
       width: 27px;
       margin: auto;
@@ -81,14 +81,13 @@
   bottom: 10px;
   left: 51%;
   overflow-y: auto;
-  z-index: z("composer","popover");
+  z-index: z("composer", "popover");
   padding: 10px 10px 35px 10px;
   box-shadow: shadow("card");
   background: $highlight-medium;
   .hide-preview & {
-    z-index: z("composer","dropdown") + 1;    
+    z-index: z("composer", "dropdown") + 1;
   }
-  
 
   &.urgent {
     background: $danger-low;
@@ -114,17 +113,16 @@
     opacity: 0.5;
     font-size: $font-up-1;
     &:before {
-      content: 'esc';
+      content: "esc";
       font-size: $font-down-1;
       margin-right: 0.5em;
     }
   }
 
   a.close:hover {
-    opacity: 1.0;
+    opacity: 1;
   }
 
-
   ul.topics {
     list-style: none;
     margin: 0;
@@ -167,7 +165,8 @@
     padding: 0;
   }
   .search-link {
-    .fa, .blurb {
+    .fa,
+    .blurb {
       color: dark-light-choose($primary-high, $secondary-medium);
     }
     span.topic {
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index c20dbce7fb9..e116ad76703 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -27,8 +27,8 @@ header {
     line-height: $line-height-small;
 
     i {
-        font-size: $font-down-1;
-      }
+      font-size: $font-down-1;
+    }
   }
 
   .d-icon-envelope {
@@ -36,20 +36,19 @@ header {
   }
 }
 
-
 .form-vertical {
   .control-group {
     margin-bottom: 24px;
   }
 }
 
-
 /***********************/
 /* bootstrap carryover */
 /***********************/
 code,
 pre {
-  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
+  font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono",
+    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
 }
 
 // this removes the unwanted top margin on a paragraph under a heading
@@ -60,7 +59,7 @@ h4,
 h5,
 h6 {
   + p {
-    margin-top:0;
+    margin-top: 0;
   }
 }
 
@@ -88,7 +87,8 @@ textarea {
   color: $primary;
 }
 
-input, textarea {
+input,
+textarea {
   width: 210px;
 }
 
@@ -252,7 +252,6 @@ input {
         box-shadow: shadow("focus-danger");
       }
     }
-
   }
 
   &.warning {
@@ -300,7 +299,7 @@ input {
     .input-append {
       .add-on {
         color: $success;
-        background-color:  $success-low;
+        background-color: $success-low;
         border-color: $success;
       }
     }
@@ -367,12 +366,8 @@ input {
   }
 }
 
-
-
 // Media Queries
-@media all
-and (max-width : 570px) {
-
+@media all and (max-width: 570px) {
   body {
     min-width: 0;
   }
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
index 11c3f99cb45..458a6c5b258 100644
--- a/app/assets/stylesheets/desktop/group.scss
+++ b/app/assets/stylesheets/desktop/group.scss
@@ -33,8 +33,7 @@
 
 .group-activity-outlet,
 .group-messages-outlet,
-.group-manage-outlet
-{
+.group-manage-outlet {
   width: 85%;
 }
 
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 4a6f4069832..4bdac207a7f 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -45,7 +45,7 @@
 header {
   #site-text-logo {
     font-size: $font-up-3;
-    margin-top: .4em;
+    margin-top: 0.4em;
     line-height: $line-height-medium;
   }
 }
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index 36af336c15e..9f08fadb88a 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -1,7 +1,6 @@
 // styles that apply to the popup that appears when you show the edit history of a post
 
 .modal.history-modal {
-
   .modal-inner-container {
     max-width: 960px;
   }
@@ -11,7 +10,7 @@
   #revision-controls {
     .btn[disabled] {
       cursor: not-allowed;
-      background-color: $primary-low; 
+      background-color: $primary-low;
     }
     .btn-danger[disabled] {
       background-color: $danger-medium;
@@ -23,7 +22,7 @@
     float: right;
 
     .btn {
-      background-color:inherit;
+      background-color: inherit;
       color: blend-primary-secondary(50%);
     }
     .btn-primary {
@@ -59,7 +58,8 @@
       white-space: pre-wrap;
     }
   }
-  .revision-content, .markdown {
+  .revision-content,
+  .markdown {
     img {
       max-width: 100%;
       box-sizing: border-box;
diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss
index 6cdb77df6b0..cac4055b442 100644
--- a/app/assets/stylesheets/desktop/latest-topic-list.scss
+++ b/app/assets/stylesheets/desktop/latest-topic-list.scss
@@ -1,4 +1,5 @@
-.latest-topic-list, .top-topic-list {
+.latest-topic-list,
+.top-topic-list {
   @extend .topic-list-icons;
 
   .table-heading {
@@ -6,7 +7,8 @@
     color: dark-light-choose($primary-medium, $secondary-high);
   }
 
-  .no-topics, .more-topics {
+  .no-topics,
+  .more-topics {
     margin-top: 1em;
   }
 }
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index d52c0d48692..4adeaa4bfba 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -1,7 +1,7 @@
 // base styles for every modal popup used in Discourse
 
 .modal-middle-container {
-  display:table-cell;
+  display: table-cell;
   vertical-align: middle;
 }
 
@@ -17,8 +17,8 @@
 }
 
 .modal.in {
-    -webkit-animation: fade .25s;
-    animation: fade .25s;
+  -webkit-animation: fade 0.25s;
+  animation: fade 0.25s;
 }
 
 .modal-body {
@@ -117,7 +117,7 @@
       margin-top: 0;
     }
 
-    input[type=radio] {
+    input[type="radio"] {
       margin-right: 10px;
     }
 
@@ -129,7 +129,8 @@
 
     form {
       margin-top: 20px;
-      #split-topic-name, #choose-topic-title {
+      #split-topic-name,
+      #choose-topic-title {
         width: 520px;
       }
     }
diff --git a/app/assets/stylesheets/desktop/queued-posts.scss b/app/assets/stylesheets/desktop/queued-posts.scss
index b4c5ef08883..88f600fc8a4 100644
--- a/app/assets/stylesheets/desktop/queued-posts.scss
+++ b/app/assets/stylesheets/desktop/queued-posts.scss
@@ -6,13 +6,15 @@
       width: 70px;
       float: left;
     }
-     .post-info  {
-       display: inline-block;
-       float: right;
-       font-size: $font-down-1;
-       margin-top: 1px;
-       span {color: dark-light-choose($primary-medium, $secondary-medium); }
-     }
+    .post-info {
+      display: inline-block;
+      float: right;
+      font-size: $font-down-1;
+      margin-top: 1px;
+      span {
+        color: dark-light-choose($primary-medium, $secondary-medium);
+      }
+    }
 
     .cooked {
       width: $topic-body-width;
@@ -26,7 +28,7 @@
 
     .tag-chooser {
       width: 100%;
-      margin-bottom: .5em;
+      margin-bottom: 0.5em;
 
       .select-kit-collection {
         padding: 0;
@@ -47,6 +49,5 @@
         margin-left: 1em;
       }
     }
-
   }
 }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 96be4b6da7f..d94cfa62785 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -1,351 +1,358 @@
-  // --------------------------------------------------
-  // Topic lists
-  // --------------------------------------------------
+// --------------------------------------------------
+// Topic lists
+// --------------------------------------------------
 
-  // List controls
-  // --------------------------------------------------
+// List controls
+// --------------------------------------------------
 
-  .list-controls {
-    .nav {
-      float: left;
-      margin-bottom: 15px;
-    }
-
-    .btn {
-      float: right;
-      margin-left: 8px;
-      margin-bottom: 10px;
-      font-size: $font-up-1;
-      font-weight: normal;
-    }
-
-    .search .btn {
-      float: none;
-    }
-
-    a.badge-category {
-      padding: 3px 12px;
-      font-size: $font-up-1;
-    }
-
-  }
-
-  // Base list
-  // --------------------------------------------------
-
-  .topic-list-icons {
-    .d-icon-thumb-tack { color: dark-light-choose($primary-medium, $secondary-medium); }
-    .d-icon-thumb-tack.unpinned { color: dark-light-choose($primary-medium, $secondary-medium); }
-    a.title {color: $primary;}
-    .d-icon-bookmark { color: dark-light-choose($primary-medium, $secondary-medium); }
-  }
-
-  .topic-list {
-    @extend .topic-list-icons;
-
-    margin: 0 0 10px;
-    th,
-    td {
-      padding: 12px 5px;
-      &:first-of-type {
-        padding-left: 10px;
-      }
-      &:last-of-type {
-        padding-right: 10px;
-      }
-    }
-    th {
-      button .d-icon {color: dark-light-choose($primary-medium, $secondary-medium); }
-    }
-
-    button.bulk-select {
-      padding: 0;
-    }
-
-    td.bulk-select {
-      padding: 10px;
-      + .main-link {
-        padding-left: 0;
-      }
-    }
-    
-    .badge-notification {
-      position: relative;
-      top: -2px;
-      &.new-topic {
-        top: -1px;
-        padding-left: 5px;
-      }
-    }
-
-    .posters {
-    // we know there are up to 5 avatars of fixed size
-    // will be overridden by media width queries on narrow displays to 1 avatar's width
-    width: 146px;    
-      > a {
-        float: left;
-        margin-right: 4px;
-        &:last-of-type {
-          margin-right: 0;
-        }
-      }
-    }
-    td.posters {
-      height: 29px; // min-height of td with avatar glow
-    }
-    .posters a:first-child .avatar.latest:not(.single) {
-      box-shadow: 0 0 3px 1px desaturate($tertiary-medium, 35%);
-      border: 2px solid desaturate($tertiary-medium, 40%);
-      position: relative;
-      top: -2px;
-      left: -2px;
-    }
-
-
-    .sortable {
-      cursor: pointer;
-      &:hover {
-        background-color: $primary-low;
-      }
-      @include unselectable;
-    }
-    .likes {
-      width: 65px;
-    }
-    .views {
-      width: 65px;
-    }
-    .posts {
-      width: 65px;
-    }
-
-    .post-actions {
-      clear: both;
-      width: auto;
-      color: dark-light-choose($primary-medium, $secondary-medium);
-      text-align: left;
-      font-size: $font-down-1;
-      margin-top: 5px;
-      .fa {
-        margin-right: 2px;
-      }
-      a {
-        color: dark-light-choose($primary-medium, $secondary-medium);
-        margin-right: 3px;
-        line-height: $line-height-large;
-      }
-    }
-    .activity {
-      width: 60px;
-      &:lang(zh_CN) {
-        width: 80px;
-      }
-      span {
-        cursor: pointer;
-      }
-    }
-    .age {
-      width: 60px;
-    }
-    .with-year {
-      white-space: nowrap;
-    }
-  }
-
-  .topic-list.categories {
-    a.title {
-      color: $tertiary;
-    }
-
-    th.posts {
-      position: relative;
-    }
-    th.stats {
-      width: 90px;
-    }
-    td.latest {
-      vertical-align: top;
-      padding: 0 8px 8px;
-    }
-    .last-user-info {
-      font-size: $font-down-1;
-    }
-    .has-description {
-      td.category {
-        padding-top: 15px;
-      }
-    }
-    .category{
-      h3 {
-        display: inline-block;
-        font-size: $font-up-2;
-        i {
-          margin-right: 5px;
-        }
-        a[href] {
-          color: $primary;
-        }
-      }
-      .subcategories {
-        margin-top: 10px;
-      }
-      .category-description {
-        margin-top: 10px;
-      }
-      .clear-badge {
-        color: $primary;
-      }
-    }
-
-    .featured-topic {
-      margin: 10px 0 0;
-      /* topic status glyphs */
-      i {
-        color: dark-light-choose($primary-medium, $secondary-medium) !important;
-        font-size: 0.929em;
-      }
-      a.last-posted-at, a.last-posted-at:visited {
-        color: dark-light-choose($primary-medium, $secondary-medium);
-        font-size: $font-down-1;
-      }
-      .badge {
-        font-size: $font-down-1;
-        top: -1px;
-      }
-    }
-  }
-
-  .topic-list-bottom {
-    margin: 20px 0;
-  }
-
-  // Misc. stuff
-  // --------------------------------------------------
-
-  #list-area .top-lists h2 {
-    cursor: pointer;
-    margin: 5px 0 10px;
-  }
-
-  #list-area {
-    h2 {
-      margin: 20px 0 10px;
-    }
-    .show-more.has-topics {
-      top: 0;
-      .alert {
-        padding: 12px 35px 12px 14px;
-      }
-    }
-  }
-
-  #bulk-select {
-    position: fixed;
-    right: 20px;
-    top: 130px;
-    padding: 5px;
-    background-color: $secondary;
-    z-index: z("dropdown");
-  }
-
-  button.dismiss-read {
-    float: right;
-    margin-bottom: 5px;
-    margin-left: 10px;
-  }
-
-  .tags-admin-menu {
-    .dropdown-menu {
-      right: 0;
-      top: 30px;
-      bottom: auto;
-      left: auto;
-    }
-  }
-
-  .category-heading {
-    clear: both;
-    p {
-      line-height: $line-height-large;
-      font-size: $font-up-3;
-    }
-  }
-
-  .category-navigation {
-    clear: both;
-  }
-
-  .category-logo {
-    max-height: 150px;
+.list-controls {
+  .nav {
     float: left;
     margin-bottom: 15px;
-    margin-right: 15px;
   }
 
-  /* Tablet (portrait) ----------- */
+  .btn {
+    float: right;
+    margin-left: 8px;
+    margin-bottom: 10px;
+    font-size: $font-up-1;
+    font-weight: normal;
+  }
 
-  @media all
-  and (max-width : 850px) {
+  .search .btn {
+    float: none;
+  }
 
-    // slightly smaller font, tighten spacing on nav pills
-    .nav-pills {
-      > li > a {
-        font-size: $font-0;
-        padding: 7px 10px;
-        }
+  a.badge-category {
+    padding: 3px 12px;
+    font-size: $font-up-1;
+  }
+}
+
+// Base list
+// --------------------------------------------------
+
+.topic-list-icons {
+  .d-icon-thumb-tack {
+    color: dark-light-choose($primary-medium, $secondary-medium);
+  }
+  .d-icon-thumb-tack.unpinned {
+    color: dark-light-choose($primary-medium, $secondary-medium);
+  }
+  a.title {
+    color: $primary;
+  }
+  .d-icon-bookmark {
+    color: dark-light-choose($primary-medium, $secondary-medium);
+  }
+}
+
+.topic-list {
+  @extend .topic-list-icons;
+
+  margin: 0 0 10px;
+  th,
+  td {
+    padding: 12px 5px;
+    &:first-of-type {
+      padding-left: 10px;
     }
+    &:last-of-type {
+      padding-right: 10px;
+    }
+  }
+  th {
+    button .d-icon {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+    }
+  }
 
-    // new topic just a "+" no text
-    button#create-topic {
-      span {
-        display: none;
-      }
-      i {
+  button.bulk-select {
+    padding: 0;
+  }
+
+  td.bulk-select {
+    padding: 10px;
+    + .main-link {
+      padding-left: 0;
+    }
+  }
+
+  .badge-notification {
+    position: relative;
+    top: -2px;
+    &.new-topic {
+      top: -1px;
+      padding-left: 5px;
+    }
+  }
+
+  .posters {
+    // we know there are up to 5 avatars of fixed size
+    // will be overridden by media width queries on narrow displays to 1 avatar's width
+    width: 146px;
+    > a {
+      float: left;
+      margin-right: 4px;
+      &:last-of-type {
         margin-right: 0;
       }
     }
+  }
+  td.posters {
+    height: 29px; // min-height of td with avatar glow
+  }
+  .posters a:first-child .avatar.latest:not(.single) {
+    box-shadow: 0 0 3px 1px desaturate($tertiary-medium, 35%);
+    border: 2px solid desaturate($tertiary-medium, 40%);
+    position: relative;
+    top: -2px;
+    left: -2px;
+  }
 
-    .topic-list {
+  .sortable {
+    cursor: pointer;
+    &:hover {
+      background-color: $primary-low;
+    }
+    @include unselectable;
+  }
+  .likes {
+    width: 65px;
+  }
+  .views {
+    width: 65px;
+  }
+  .posts {
+    width: 65px;
+  }
 
-      // tighter table header spacing
+  .post-actions {
+    clear: both;
+    width: auto;
+    color: dark-light-choose($primary-medium, $secondary-medium);
+    text-align: left;
+    font-size: $font-down-1;
+    margin-top: 5px;
+    .fa {
+      margin-right: 2px;
+    }
+    a {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+      margin-right: 3px;
+      line-height: $line-height-large;
+    }
+  }
+  .activity {
+    width: 60px;
+    &:lang(zh_CN) {
+      width: 80px;
+    }
+    span {
+      cursor: pointer;
+    }
+  }
+  .age {
+    width: 60px;
+  }
+  .with-year {
+    white-space: nowrap;
+  }
+}
+
+.topic-list.categories {
+  a.title {
+    color: $tertiary;
+  }
+
+  th.posts {
+    position: relative;
+  }
+  th.stats {
+    width: 90px;
+  }
+  td.latest {
+    vertical-align: top;
+    padding: 0 8px 8px;
+  }
+  .last-user-info {
+    font-size: $font-down-1;
+  }
+  .has-description {
+    td.category {
+      padding-top: 15px;
+    }
+  }
+  .category {
+    h3 {
+      display: inline-block;
+      font-size: $font-up-2;
+      i {
+        margin-right: 5px;
+      }
+      a[href] {
+        color: $primary;
+      }
+    }
+    .subcategories {
+      margin-top: 10px;
+    }
+    .category-description {
+      margin-top: 10px;
+    }
+    .clear-badge {
+      color: $primary;
+    }
+  }
+
+  .featured-topic {
+    margin: 10px 0 0;
+    /* topic status glyphs */
+    i {
+      color: dark-light-choose($primary-medium, $secondary-medium) !important;
+      font-size: 0.929em;
+    }
+    a.last-posted-at,
+    a.last-posted-at:visited {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+      font-size: $font-down-1;
+    }
+    .badge {
+      font-size: $font-down-1;
+      top: -1px;
+    }
+  }
+}
+
+.topic-list-bottom {
+  margin: 20px 0;
+}
+
+// Misc. stuff
+// --------------------------------------------------
+
+#list-area .top-lists h2 {
+  cursor: pointer;
+  margin: 5px 0 10px;
+}
+
+#list-area {
+  h2 {
+    margin: 20px 0 10px;
+  }
+  .show-more.has-topics {
+    top: 0;
+    .alert {
+      padding: 12px 35px 12px 14px;
+    }
+  }
+}
+
+#bulk-select {
+  position: fixed;
+  right: 20px;
+  top: 130px;
+  padding: 5px;
+  background-color: $secondary;
+  z-index: z("dropdown");
+}
+
+button.dismiss-read {
+  float: right;
+  margin-bottom: 5px;
+  margin-left: 10px;
+}
+
+.tags-admin-menu {
+  .dropdown-menu {
+    right: 0;
+    top: 30px;
+    bottom: auto;
+    left: auto;
+  }
+}
+
+.category-heading {
+  clear: both;
+  p {
+    line-height: $line-height-large;
+    font-size: $font-up-3;
+  }
+}
+
+.category-navigation {
+  clear: both;
+}
+
+.category-logo {
+  max-height: 150px;
+  float: left;
+  margin-bottom: 15px;
+  margin-right: 15px;
+}
+
+/* Tablet (portrait) ----------- */
+
+@media all and (max-width: 850px) {
+  // slightly smaller font, tighten spacing on nav pills
+  .nav-pills {
+    > li > a {
+      font-size: $font-0;
+      padding: 7px 10px;
+    }
+  }
+
+  // new topic just a "+" no text
+  button#create-topic {
+    span {
+      display: none;
+    }
+    i {
+      margin-right: 0;
+    }
+  }
+
+  .topic-list {
+    // tighter table header spacing
     th:first-of-type {
       padding: 12px 5px;
-      }
+    }
     // smaller table cell spacing
-    th, td {
-        padding: 10px;
-        font-size: $font-0;
-      }
-      .category {
-        min-width: 0;
-        padding: 0;
-        }
-      // suppress views column
-      th.views {
+    th,
+    td {
+      padding: 10px;
+      font-size: $font-0;
+    }
+    .category {
+      min-width: 0;
+      padding: 0;
+    }
+    // suppress views column
+    th.views {
+      display: none;
+    }
+    td.views {
+      display: none;
+    }
+    // reduce width for more title space
+    .posts {
+      width: 50px;
+    }
+    .posters {
+      width: 30px;
+      text-align: center;
+    }
+    // show only the first poster
+    td.posters {
+      a:not(.latest) {
         display: none;
       }
-      td.views {
-        display: none;
-      }
-      // reduce width for more title space
-      .posts {
-        width: 50px;
-      }
-      .posters {
-        width: 30px;  
-        text-align: center;      
-      }
-      // show only the first poster
-      td.posters {
-        a:not(.latest) {
-          display: none;
-          }
-        a.latest {
-          width: 100%;
-          img {
-            margin: 0 auto;
-          }
+      a.latest {
+        width: 100%;
+        img {
+          margin: 0 auto;
         }
       }
     }
   }
+}
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index c978ebaa062..c23467c5020 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -17,7 +17,7 @@ h1 .topic-statuses .topic-status i {
   max-width: 80px;
   height: auto;
   max-height: 40px;
-  }
+}
 
 .topic-body {
   padding: 0;
@@ -34,14 +34,17 @@ h1 .topic-statuses .topic-status i {
   }
 
   .actions .fade-out {
-     .discourse-no-touch & {
-       opacity: 0.7;
-       transition: opacity 0.7s ease-in-out;
-     }
-     .discourse-touch & {opacity: 1;}
+    .discourse-no-touch & {
+      opacity: 0.7;
+      transition: opacity 0.7s ease-in-out;
+    }
+    .discourse-touch & {
+      opacity: 1;
+    }
   }
 
-  &:hover .actions .fade-out, .selected .actions .fade-out {
+  &:hover .actions .fade-out,
+  .selected .actions .fade-out {
     opacity: 1;
   }
 }
@@ -51,7 +54,6 @@ section.post-menu-area {
 }
 
 nav.post-controls {
-
   padding: 0;
 
   .like-button {
@@ -79,7 +81,7 @@ nav.post-controls {
     }
 
     &:active {
-      box-shadow: inset 0 1px 3px rgba(0,0,0, .4);
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
 
       .widget-button {
         box-shadow: none;
@@ -94,7 +96,7 @@ nav.post-controls {
 
     .like-count {
       font-size: $font-up-1;
-      margin-left: 0;      
+      margin-left: 0;
       i.d-icon {
         padding-left: 10px;
         color: dark-light-choose($primary-low-mid, $secondary-high);
@@ -117,11 +119,12 @@ nav.post-controls {
     color: dark-light-choose($primary-medium, $secondary-high);
   }
 
-  a, button {
+  a,
+  button {
     color: dark-light-choose($primary-low-mid, $secondary-high);
 
     .d-icon {
-      opacity: 1.0;
+      opacity: 1;
     }
     margin-right: 2px;
     display: inline-block;
@@ -135,7 +138,6 @@ nav.post-controls {
   span.badge-posts {
     margin-right: 5px;
     transition: all linear 0.15s;
-
   }
 
   .actions {
@@ -151,10 +153,14 @@ nav.post-controls {
   .show-replies {
     margin-left: -10px;
     font-size: inherit;
-    span.badge-posts {color: dark-light-choose($primary-medium, $secondary-high); }
+    span.badge-posts {
+      color: dark-light-choose($primary-medium, $secondary-high);
+    }
     &:hover {
       background: $primary-low;
-      span.badge-posts {color: $primary;}
+      span.badge-posts {
+        color: $primary;
+      }
     }
     i {
       margin-left: 5px;
@@ -180,13 +186,14 @@ nav.post-controls {
     border: none;
     margin-left: 3px;
 
-    &.d-hover, &:focus {
+    &.d-hover,
+    &:focus {
       background: $primary-low;
       color: $primary;
     }
 
     &:active {
-      box-shadow: inset 0 1px 3px rgba(0,0,0, .4);
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
     }
 
     &.hidden {
@@ -196,17 +203,21 @@ nav.post-controls {
       position: relative;
     }
 
-    &.delete.d-hover, &.delete:focus {
+    &.delete.d-hover,
+    &.delete:focus {
       background: $danger;
       color: $secondary;
     }
 
-    &.like.d-hover, &.like:focus {
+    &.like.d-hover,
+    &.like:focus {
       color: $love;
       background: $love-low;
     }
 
-    &.has-like {color: $love;}
+    &.has-like {
+      color: $love;
+    }
     &.has-like[disabled]:hover {
       background: transparent;
     }
@@ -257,8 +268,12 @@ nav.post-controls {
 }
 
 .embedded-posts {
-  h1, h2, h3 { margin: 10px 0; }
-  border:  1px solid $primary-low;
+  h1,
+  h2,
+  h3 {
+    margin: 10px 0;
+  }
+  border: 1px solid $primary-low;
 
   .topic-body {
     box-sizing: border-box;
@@ -280,11 +295,12 @@ nav.post-controls {
     padding-top: 15px;
   }
 
-  .collapse-down, .collapse-up {
+  .collapse-down,
+  .collapse-up {
     position: absolute;
     color: $primary-medium;
     background: $secondary;
-    border:  1px solid $primary-low;
+    border: 1px solid $primary-low;
     padding: 6px 9px 8px;
     z-index: 99; // Needs to be higher than topic-avatar
     &:hover {
@@ -307,8 +323,9 @@ nav.post-controls {
       transform: translate(-50%, -164%);
     }
     .row {
-      padding-bottom: .5em;
-      .topic-avatar, .topic-body {
+      padding-bottom: 0.5em;
+      .topic-avatar,
+      .topic-body {
         border-top: 1px solid $primary-low;
       }
     }
@@ -324,7 +341,8 @@ nav.post-controls {
     width: 699px;
     .row {
       border-bottom: none;
-      .topic-avatar, .topic-body {
+      .topic-avatar,
+      .topic-body {
         border-top: 1px solid $primary-low;
       }
     }
@@ -333,9 +351,16 @@ nav.post-controls {
     padding: 0;
   }
 
-  .post-date { color: dark-light-choose($primary-medium, $secondary-high); }
-  .d-icon-arrow-up, .d-icon-arrow-down { margin-left: 5px; }
-  .reply:first-of-type .row { border-top: none; }
+  .post-date {
+    color: dark-light-choose($primary-medium, $secondary-high);
+  }
+  .d-icon-arrow-up,
+  .d-icon-arrow-down {
+    margin-left: 5px;
+  }
+  .reply:first-of-type .row {
+    border-top: none;
+  }
 
   .topic-meta-data {
     position: relative;
@@ -349,38 +374,48 @@ nav.post-controls {
       color: dark-light-choose($primary-low-mid, $secondary-high);
     }
   }
-  .arrow {color: dark-light-choose($primary-medium, $secondary-high); }
+  .arrow {
+    color: dark-light-choose($primary-medium, $secondary-high);
+  }
 }
 
 .post-action {
   .relative-date {
     margin-left: 5px;
   }
-  .avatar { margin-right: 2px; }
+  .avatar {
+    margin-right: 2px;
+  }
 }
 
 .topic-map {
   margin: 20px 0;
 
   .map {
-    .secondary {text-align: center;}
+    .secondary {
+      text-align: center;
+    }
     li {
       float: left;
       padding: 7px 10px;
       &:last-of-type {
         border-right: 0;
       }
-      &:nth-child(3) { text-align:center; }
+      &:nth-child(3) {
+        text-align: center;
+      }
     }
-    a, .number {
+    a,
+    .number {
       line-height: $line-height-large;
     }
-    .number, i {
+    .number,
+    i {
       color: dark-light-choose($primary-high, $secondary-low);
       font-size: $font-up-2;
       line-height: $line-height-medium;
     }
-    .avatar  a {
+    .avatar a {
       float: left;
     }
     .topic-map-post {
@@ -394,8 +429,12 @@ nav.post-controls {
     color: $primary;
   }
 
-  .participants { // PMs //
-    .user { float: left; margin: 7px 20px 7px 0; }
+  .participants {
+    // PMs //
+    .user {
+      float: left;
+      margin: 7px 20px 7px 0;
+    }
     .user a {
       color: dark-light-choose($primary-high, $secondary-low);
       font-weight: bold;
@@ -455,7 +494,9 @@ nav.post-controls {
   }
   .btn {
     @include topic-footer-button;
-    .d-icon-bookmark.bookmarked { color: $tertiary; }
+    .d-icon-bookmark.bookmarked {
+      color: $tertiary;
+    }
   }
 
   .bookmark.bookmarked .d-icon-bookmark {
@@ -484,14 +525,14 @@ nav.post-controls {
 #suggested-topics .topic-statuses .topic-status {
   padding: 0;
   i {
-    font-size:1em;
+    font-size: 1em;
   }
 }
 
 span.post-count {
   background: $primary;
   color: $secondary;
-  opacity: .8;
+  opacity: 0.8;
 }
 
 button.expand-post {
@@ -511,28 +552,46 @@ video {
 }
 
 @-webkit-keyframes fadein {
-  from {opacity: 0;}
-  to {opacity: 1;}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fadein {
-    from {opacity: 0;}
-    to {opacity: 1;}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .extra-info-wrapper {
   overflow: hidden;
 
-  .badge-wrapper, i, .topic-link {
-    -webkit-animation: fadein .7s;
-    animation: fadein .7s;
+  .badge-wrapper,
+  i,
+  .topic-link {
+    -webkit-animation: fadein 0.7s;
+    animation: fadein 0.7s;
   }
 
   .topic-statuses {
-    i { color: $header_primary; }
-    .d-icon-envelope { color: $danger; }
-    .d-icon-lock {padding-top: .15em;}
-    .unpinned { color: $header_primary; }
+    i {
+      color: $header_primary;
+    }
+    .d-icon-envelope {
+      color: $danger;
+    }
+    .d-icon-lock {
+      padding-top: 0.15em;
+    }
+    .unpinned {
+      color: $header_primary;
+    }
   }
 
   .topic-link {
@@ -571,8 +630,7 @@ video {
   }
 }
 
-
-.open >.dropdown-menu {
+.open > .dropdown-menu {
   display: block;
 }
 
@@ -585,10 +643,14 @@ video {
   position: relative;
 }
 
-
 .deleted {
   .topic-body {
-    background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -60%);
+    background-color: dark-light-diff(
+      rgba($danger, 0.7),
+      $secondary,
+      50%,
+      -60%
+    );
   }
 }
 
@@ -612,7 +674,6 @@ video {
   color: $primary;
 }
 
-
 /* solo quotes */
 blockquote {
   /* leave browser defaults for top and bottom here */
@@ -623,23 +684,27 @@ blockquote {
 
 /* quotes with attribution */
 .quote {
-  &>blockquote {
+  & > blockquote {
     .onebox-result {
       background-color: blend-primary-secondary(5%);
     }
   }
 
   aside {
-    .quote, .title, blockquote, .onebox, .onebox-result {
+    .quote,
+    .title,
+    blockquote,
+    .onebox,
+    .onebox-result {
       background: blend-primary-secondary(5%);
       border-left: 5px solid $primary-low;
     }
 
-    aside.quote>blockquote, aside.quote>.title {
+    aside.quote > blockquote,
+    aside.quote > .title {
       border-left: 0;
     }
   }
-
 }
 
 // variables are used to calculate the width of .gap
@@ -665,7 +730,9 @@ $topic-avatar-width: 45px;
 }
 
 .gap {
-  width: calc(#{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding});
+  width: calc(
+    #{$topic-avatar-width} + #{$topic-body-width} + 2 * #{$topic-body-width-padding}
+  );
 }
 
 /* hide the reply border above the time gap notices */
@@ -678,7 +745,6 @@ $topic-avatar-width: 45px;
   border-bottom: 1px solid $primary-low;
 }
 
-
 .posts-wrapper {
   position: relative;
   -webkit-font-smoothing: subpixel-antialiased;
@@ -730,7 +796,7 @@ $topic-avatar-width: 45px;
   font-weight: normal;
   line-height: $line-height-medium;
   color: $primary;
-  transition: all linear .15s;
+  transition: all linear 0.15s;
 
   & > div {
     margin-left: 26px;
@@ -742,7 +808,6 @@ $topic-avatar-width: 45px;
   color: $primary;
   text-decoration: none;
   background-color: $highlight-medium;
-
 }
 
 .dropdown-menu .disabled > a,
@@ -818,8 +883,7 @@ $topic-avatar-width: 45px;
     &[href] {
       color: $secondary;
     }
-    &:hover
-    {
+    &:hover {
       color: $secondary;
       background: $tertiary-high;
     }
@@ -830,7 +894,7 @@ $topic-avatar-width: 45px;
     &[disabled] {
       text-shadow: 0 1px 0 rgba($primary, 0.2);
       @include linear-gradient($tertiary, darken($tertiary, 20%));
-      @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.33));
+      @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.33));
     }
   }
 }
@@ -878,7 +942,9 @@ a.attachment:before {
   content: "\f019";
 }
 
-.private_message .gutter, .deleted-topic .gutter,.read_restricted .gutter {
+.private_message .gutter,
+.deleted-topic .gutter,
+.read_restricted .gutter {
   position: relative;
 }
 
@@ -886,29 +952,29 @@ a.attachment:before {
   display: block;
   position: absolute;
   left: 767px;
-  color: rgba($primary-low, .8);
+  color: rgba($primary-low, 0.8);
   font: 6.429em/1 FontAwesome;
   content: "\f014";
   z-index: z("base");
 }
 
 .topic-meta-data {
-
- &:after {
+  &:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
- }
-
- .post-info  {
-   display: inline-block;
-   float: right;
-   a {color: dark-light-choose($primary-medium, $secondary-medium); }
- }
+  }
 
+  .post-info {
+    display: inline-block;
+    float: right;
+    a {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+    }
+  }
 }
 
 .who-liked {
@@ -945,10 +1011,7 @@ span.highlighted {
 
 /* Tablet (portrait) ----------- */
 
-
-@media all
-and (max-width : 775px) {
-
+@media all and (max-width: 775px) {
   .gutter {
     display: none;
   }
@@ -958,15 +1021,15 @@ and (max-width : 775px) {
   }
 
   .topic-post .reply-to-tab {
-      right: 15%;
+    right: 15%;
   }
 
   .topic-body {
-      box-sizing: border-box;
-      width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px]
+    box-sizing: border-box;
+    width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px]
 
-      padding-left: 2%;
-    }
+    padding-left: 2%;
+  }
 
   .embedded-posts {
     // top means "in reply to expansion" above a post
@@ -974,5 +1037,4 @@ and (max-width : 775px) {
       width: calc(100% - 56px); // [100% - margin-left]
     }
   }
-
 }
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 0f964d9d8e6..f5eb0974c9d 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -14,14 +14,18 @@
   margin: 20px 0;
 }
 
-.edits {margin-right: 5px;}
+.edits {
+  margin-right: 5px;
+}
 
 #topic-title {
   z-index: z("base");
   padding-top: 14px;
   margin-bottom: 10px;
 
-  #edit-title, .category-chooser, .edit-controls {
+  #edit-title,
+  .category-chooser,
+  .edit-controls {
     width: 500px;
   }
   h1 {
@@ -29,12 +33,16 @@
     line-height: $line-height-medium;
     overflow: hidden;
     width: 100%;
-    a {color: $primary;}
+    a {
+      color: $primary;
+    }
   }
   .topic-statuses {
     margin-top: -2px;
   }
-  .private-message-glyph { display: none; }
+  .private-message-glyph {
+    display: none;
+  }
   .remove-featured-link {
     float: right;
     text-transform: lowercase;
@@ -47,7 +55,9 @@
   float: left;
 }
 
-.private_message #topic-title .private-message-glyph { display: inline; }
+.private_message #topic-title .private-message-glyph {
+  display: inline;
+}
 
 .topic-error {
   padding: 18px;
@@ -169,9 +179,9 @@
     bottom: 0;
     width: 0;
     max-width: 145px;
-    border-right: 1px solid  $tertiary-low;
-    background-color:  $tertiary-low;
-    transition: width .75s;
+    border-right: 1px solid $tertiary-low;
+    background-color: $tertiary-low;
+    transition: width 0.75s;
   }
 }
 
@@ -185,10 +195,9 @@
   z-index: z("dropdown");
 }
 
-@media all
-and (min-width: 400px) {
-
-  #topic-progress, #topic-progress-expanded {
+@media all and (min-width: 400px) {
+  #topic-progress,
+  #topic-progress-expanded {
     right: 0;
     left: 0;
   }
@@ -206,14 +215,11 @@ and (min-width: 400px) {
   }
 }
 
-@media all
-and (max-width : 485px) {
-
+@media all and (max-width: 485px) {
   #topic-progress-wrapper.docked {
     display: none;
   }
 
-
   #topic-footer-main-buttons {
     max-width: 100%;
   }
diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss
index fce130e7d37..b724f6bab9a 100644
--- a/app/assets/stylesheets/desktop/upload.scss
+++ b/app/assets/stylesheets/desktop/upload.scss
@@ -22,7 +22,8 @@
         font-size: $font-0;
         line-height: $line-height-medium;
       }
-      .description, .hint {
+      .description,
+      .hint {
         color: dark-light-choose($primary-medium, $secondary-medium);
         display: block;
       }
@@ -32,7 +33,8 @@
       }
     }
   }
-  .radios:last-child:not(:nth-child(2)) { // last child for composer modal, but not theme import modal
+  .radios:last-child:not(:nth-child(2)) {
+    // last child for composer modal, but not theme import modal
     min-height: 20px;
   }
 }
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index 0f637ee1f0f..d7e470b3823 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -4,7 +4,8 @@
 $user_card_primary: $primary;
 $user_card_background: $secondary;
 
-#user-card, #group-card {
+#user-card,
+#group-card {
   position: absolute;
   width: 500px;
   left: -9999px;
@@ -16,11 +17,11 @@ $user_card_background: $secondary;
   background: $user_card_background center center;
   background-size: cover;
   min-height: 175px;
-  -webkit-transition: opacity .2s, -webkit-transform .2s;
-          transition: opacity .2s, transform .2s;
+  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
+  transition: opacity 0.2s, transform 0.2s;
 
   opacity: 0;
-  @include transform(scale(.9));
+  @include transform(scale(0.9));
 
   &.show {
     opacity: 1;
@@ -29,16 +30,16 @@ $user_card_background: $secondary;
 
   &.fixed {
     position: fixed;
-    z-index: z("composer","content") + 1;
+    z-index: z("composer", "content") + 1;
   }
 
   .card-content {
     padding: 12px 12px 0 12px;
-    background: rgba($user_card_background, .85);
+    background: rgba($user_card_background, 0.85);
     margin-top: 80px;
 
     &:after {
-      content: '';
+      content: "";
       display: block;
       clear: both;
     }
@@ -132,12 +133,17 @@ $user_card_background: $secondary;
     h3 {
       display: inline;
       margin-right: 5px;
-      .desc, a {
+      .desc,
+      a {
         color: scale-color($user_card_primary, $lightness: 35%);
       }
     }
-    div {display: inline; color: scale-color($user_card_background, $lightness: 50%);
-    .group-link {color: scale-color($user_card_background, $lightness: 50%);}
+    div {
+      display: inline;
+      color: scale-color($user_card_background, $lightness: 50%);
+      .group-link {
+        color: scale-color($user_card_background, $lightness: 50%);
+      }
     }
   }
 
@@ -173,30 +179,33 @@ $user_card_background: $secondary;
     width: 100%;
     align-items: center;
     padding-top: 5px;
-    .location, .website-name {
+    .location,
+    .website-name {
       display: flex;
       max-width: 90%;
       overflow: hidden;
       align-items: baseline;
       i {
-        margin-right: .25em;
+        margin-right: 0.25em;
       }
     }
-    .website-name a, .location span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: $user_card_primary;
+    .website-name a,
+    .location span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: $user_card_primary;
     }
     .location {
-      margin-right: .5em;
+      margin-right: 0.5em;
     }
     .website-name a {
       text-decoration: underline;
     }
   }
 
-  .user-card-avatar, .group-card-avatar {
+  .user-card-avatar,
+  .group-card-avatar {
     float: left;
     margin-right: 10px;
     margin-top: -53px;
@@ -249,7 +258,10 @@ $user_card_background: $secondary;
     float: right;
     margin: 0;
 
-    button { width: 100%; min-width: 150px; }
+    button {
+      width: 100%;
+      min-width: 150px;
+    }
   }
 
   .new-user a {
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 3a031554b3a..fb988b512e6 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -18,7 +18,7 @@
   height: 420px;
   width: 100%;
   background-size: cover;
-  transition: height .15s linear;
+  transition: height 0.15s linear;
 }
 
 .no-background {
@@ -85,7 +85,7 @@
   }
 
   .btn.right {
-    float: right
+    float: right;
   }
 
   h2 {
@@ -149,11 +149,11 @@
     .details {
       padding: 0 0 4px 0;
       margin-top: -200px;
-      transition: margin .15s linear;
+      transition: margin 0.15s linear;
 
       img.avatar {
         margin: 0 20px 10px 0;
-        transition: all .1s linear;
+        transition: all 0.1s linear;
       }
 
       .primary {
@@ -206,7 +206,6 @@
         width: auto;
 
         ul {
-
           li {
             display: inline;
           }
@@ -237,7 +236,7 @@
   }
 
   .user-field {
-    input[type=text] {
+    input[type="text"] {
       width: 530px;
     }
 
@@ -249,7 +248,8 @@
   }
 
   .viewing-self & .about.collapsed-info {
-    .secondary, .staff-counters {
+    .secondary,
+    .staff-counters {
       display: inherit;
     }
   }
@@ -270,7 +270,8 @@
     width: 530px;
   }
 
-  .category-selector, .tag-chooser {
+  .category-selector,
+  .tag-chooser {
     width: 530px;
   }
 
@@ -279,7 +280,7 @@
       width: 530px;
     }
 
-    &[type=text] {
+    &[type="text"] {
       @include small-width {
         width: 450px;
       }
diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
index 45b0bf9ca85..75e6ef54a33 100644
--- a/app/assets/stylesheets/embed.scss
+++ b/app/assets/stylesheets/embed.scss
@@ -19,10 +19,13 @@ article.post {
     border-left: 5px solid darken($primary-low, 10%);
     background-color: $primary-low;
     padding: 10px 10px 0 12px;
-    .avatar { margin-right: 7px; }
+    .avatar {
+      margin-right: 7px;
+    }
   }
 
-  ol, ul {
+  ol,
+  ul {
     clear: none;
   }
 
@@ -35,7 +38,7 @@ article.post {
       margin: 0 0 10px 0;
     }
     p:last-of-type {
-      margin-bottom:0;
+      margin-bottom: 0;
     }
   }
 
@@ -56,7 +59,6 @@ article.post {
     }
   }
 
-
   .cooked {
     padding: 10px 0;
     margin-left: 65px;
@@ -67,7 +69,7 @@ article.post {
       white-space: pre-wrap;
     }
     img {
-      max-width:100%;
+      max-width: 100%;
     }
     p {
       margin: 0 0 1em 0;
@@ -80,7 +82,7 @@ article.post {
   margin: 0 0 10px 0;
 
   a {
-    color: #5c5c5c
+    color: #5c5c5c;
   }
   a.staff {
     background-color: #ffffc2;
@@ -119,7 +121,6 @@ img.emoji {
   clear: both;
 }
 
-
 header.discourse {
   padding-left: 10px;
   padding-right: 10px;
diff --git a/app/assets/stylesheets/mobile/alert.scss b/app/assets/stylesheets/mobile/alert.scss
index ac71f845a90..0c126089280 100644
--- a/app/assets/stylesheets/mobile/alert.scss
+++ b/app/assets/stylesheets/mobile/alert.scss
@@ -4,9 +4,9 @@
 
 // there are (n) new or updated topics, click to show
 .alert.alert-info {
-    margin: 0;
-    margin-bottom: -3px;
-    margin-top: -5px;
-    padding: 15px;
-    font-size: $font-0;
+  margin: 0;
+  margin-bottom: -3px;
+  margin-top: -5px;
+  padding: 15px;
+  font-size: $font-0;
 }
diff --git a/app/assets/stylesheets/mobile/banner.scss b/app/assets/stylesheets/mobile/banner.scss
index 8740699c6b6..9380ca2ada5 100644
--- a/app/assets/stylesheets/mobile/banner.scss
+++ b/app/assets/stylesheets/mobile/banner.scss
@@ -14,5 +14,4 @@
   @media all and (min-height: 500px) {
     max-height: 180px;
   }
-
 }
diff --git a/app/assets/stylesheets/mobile/components/user-stream-item.scss b/app/assets/stylesheets/mobile/components/user-stream-item.scss
index 3727bbd76b1..0b0e0ceba2c 100644
--- a/app/assets/stylesheets/mobile/components/user-stream-item.scss
+++ b/app/assets/stylesheets/mobile/components/user-stream-item.scss
@@ -1,6 +1,5 @@
 // Mobile styles for "user-stream-item" component
 .user-stream {
-
   // DEPRECATION:
   // The ".item" class should be eventually removed because it's too generic.
   // Once ".item" has been removed, ".user-stream-item" can replace
@@ -17,7 +16,10 @@
 
   .notification {
     &.unread {
-      background-color: dark-light-choose($tertiary-low, srgb-scale($tertiary, $secondary, 15%));
+      background-color: dark-light-choose(
+        $tertiary-low,
+        srgb-scale($tertiary, $secondary, 15%)
+      );
     }
   }
 
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index af1d5ea8a0d..8436b643daa 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -8,151 +8,150 @@
 
 #reply-control {
   z-index: z("mobile-composer");
-    .reply-area {
-      padding: 0 10px;
-      @media screen and (max-width: 374px) {
-        padding: 0 5px;
-      }
-      flex-grow: 1;
+  .reply-area {
+    padding: 0 10px;
+    @media screen and (max-width: 374px) {
+      padding: 0 5px;
     }
+    flex-grow: 1;
+  }
 
-    &.open {
-      height: 250px;
-      &.edit-title {
-        height: 100%;
-      }
-    }
-
-    .reply-to {
-      margin: 5px 0;
-    }
-
-    .toggler {
-      margin-left: -5px;
-      .d-icon-chevron-down {
-        vertical-align: text-top;
-      }
-    }
-
-    &.draft {
-      .toggle-toolbar,
-      .toggler {
-        top: 8px;
-      }
-      .draft-text {
-        width: calc(100% - 40px);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    #reply-title {
-      width: calc(100% - 20px);
-    }
-
-    .category-input {
-      margin-bottom: 5px;
-      .category-chooser {
-        width: 100% !important;
-      }
-    }
-
-    .submit-panel {
-      margin-bottom: 5px;
-      align-items: baseline;
-      .save-or-cancel {
-        flex: 1 1 auto;
-        #draft-status,
-        #file-uploading {
-          margin-left: 15px;
-        }
-        .cancel {
-          font-size: 1.6em;
-          color: $primary-low-mid;
-          margin-left: .6em;  
-          padding: 0 5px;        
-        }
-      }
-      .composer-bottom-right {
-        margin-left: auto;
-        flex: 1 1 auto;
-      }
-    }
-
-    .d-editor-textarea-wrapper {
-      width: 100%;
-    }
-
-    &.show-preview {
-      .d-editor-preview-wrapper {
-        position: fixed;
-        z-index: z("base") + 1;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: $secondary;
-        max-width: 100%;
-        margin: 0;
-        padding: 10px;
-        overflow: auto;        
-        .d-editor-preview {
-          margin-bottom: 40px;
-        }
-      }
-      .btn.hide-preview {
-        position: fixed;
-        right: 5px;
-        bottom: 5px;
-        z-index: z("base") + 2;
-      }
-    }
-
-    &.hide-preview {
-      .d-editor-preview-wrapper {
-        display: none;
-      }
-    }
-
-    .d-editor-button-bar {
-      display: none;
-    }
-
-    .toolbar-visible .d-editor-button-bar {
-      display: flex;
-    }
-
-    .d-editor-button-bar .btn {
-      @media all and ( max-width: 350px) {
-        padding: 2px 4px;
-      }
-      &.preview {
-        margin: 0;
-      }
-    }
-
-    #mobile-uploader {
-      display: none;
-    }
-
-    .title-and-category,
-    .user-selector {
-      margin: 0;
-      .users-input {
-        margin-bottom: 5px;
-      }
-    }
-
-    .title-input,
-    .category-input,
-    .users-input,
-    .add-warning {
-      width: 100%;
-    }
-
-    .add-warning {
-      margin: 0 0 5px 5px;
+  &.open {
+    height: 250px;
+    &.edit-title {
+      height: 100%;
     }
   }
 
+  .reply-to {
+    margin: 5px 0;
+  }
+
+  .toggler {
+    margin-left: -5px;
+    .d-icon-chevron-down {
+      vertical-align: text-top;
+    }
+  }
+
+  &.draft {
+    .toggle-toolbar,
+    .toggler {
+      top: 8px;
+    }
+    .draft-text {
+      width: calc(100% - 40px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  #reply-title {
+    width: calc(100% - 20px);
+  }
+
+  .category-input {
+    margin-bottom: 5px;
+    .category-chooser {
+      width: 100% !important;
+    }
+  }
+
+  .submit-panel {
+    margin-bottom: 5px;
+    align-items: baseline;
+    .save-or-cancel {
+      flex: 1 1 auto;
+      #draft-status,
+      #file-uploading {
+        margin-left: 15px;
+      }
+      .cancel {
+        font-size: 1.6em;
+        color: $primary-low-mid;
+        margin-left: 0.6em;
+        padding: 0 5px;
+      }
+    }
+    .composer-bottom-right {
+      margin-left: auto;
+      flex: 1 1 auto;
+    }
+  }
+
+  .d-editor-textarea-wrapper {
+    width: 100%;
+  }
+
+  &.show-preview {
+    .d-editor-preview-wrapper {
+      position: fixed;
+      z-index: z("base") + 1;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: $secondary;
+      max-width: 100%;
+      margin: 0;
+      padding: 10px;
+      overflow: auto;
+      .d-editor-preview {
+        margin-bottom: 40px;
+      }
+    }
+    .btn.hide-preview {
+      position: fixed;
+      right: 5px;
+      bottom: 5px;
+      z-index: z("base") + 2;
+    }
+  }
+
+  &.hide-preview {
+    .d-editor-preview-wrapper {
+      display: none;
+    }
+  }
+
+  .d-editor-button-bar {
+    display: none;
+  }
+
+  .toolbar-visible .d-editor-button-bar {
+    display: flex;
+  }
+
+  .d-editor-button-bar .btn {
+    @media all and (max-width: 350px) {
+      padding: 2px 4px;
+    }
+    &.preview {
+      margin: 0;
+    }
+  }
+
+  #mobile-uploader {
+    display: none;
+  }
+
+  .title-and-category,
+  .user-selector {
+    margin: 0;
+    .users-input {
+      margin-bottom: 5px;
+    }
+  }
+
+  .title-input,
+  .category-input,
+  .users-input,
+  .add-warning {
+    width: 100%;
+  }
+
+  .add-warning {
+    margin: 0 0 5px 5px;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index d978a127895..e211ebc25b7 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -8,13 +8,12 @@ html {
   font-size: 15px; // Increasing overall font-size on mobile by 1px
 }
 
-
 body {
   background-color: $secondary;
 }
 
 textarea {
-  background-color:$secondary;
+  background-color: $secondary;
 }
 
 blockquote {
@@ -25,10 +24,9 @@ blockquote {
     margin: 0 0 10px 0;
 
     &:last-of-type {
-      margin-bottom:0;
+      margin-bottom: 0;
     }
   }
-
 }
 
 // Common classes
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
index 7bbf8107645..95bf29956ca 100644
--- a/app/assets/stylesheets/mobile/group.scss
+++ b/app/assets/stylesheets/mobile/group.scss
@@ -22,7 +22,8 @@
   float: left;
 }
 
-.group-activity, .group-manage {
+.group-activity,
+.group-manage {
   position: relative;
 }
 
@@ -34,7 +35,8 @@
   }
 }
 
-.group-activity-outlet, .group-messages-outlet {
+.group-activity-outlet,
+.group-messages-outlet {
   float: none;
 }
 
@@ -45,7 +47,7 @@
 
   .group-flair-inputs {
     .group-flair-right {
-      margin: 0
+      margin: 0;
     }
   }
 }
@@ -100,7 +102,6 @@ table.group-manage-logs {
   }
 }
 
-
 .group-add-members-btn {
   margin-bottom: 10px;
 }
diff --git a/app/assets/stylesheets/mobile/groups.scss b/app/assets/stylesheets/mobile/groups.scss
index a7e6df7af16..c80e39bd8bc 100644
--- a/app/assets/stylesheets/mobile/groups.scss
+++ b/app/assets/stylesheets/mobile/groups.scss
@@ -9,7 +9,7 @@
   }
 
   .groups-header-filters-name,
-  .groups-header-filters-type, 
+  .groups-header-filters-type,
   .groups-header-new {
     margin-top: 10px;
   }
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 30f480f94b3..dfc21d816a0 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -12,7 +12,6 @@
 }
 
 .d-header {
-
   #site-logo {
     max-width: 130px;
   }
@@ -32,7 +31,7 @@
   }
 
   button.sign-up-button {
-    display:none;
+    display: none;
   }
 }
 
@@ -41,7 +40,9 @@
     line-height: $line-height-medium;
   }
   .active .icon {
-    &:after { margin-top: -1px; }
+    &:after {
+      margin-top: -1px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 8c5f55e3e65..4a1441084a2 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -1,6 +1,8 @@
 // base styles for every modal popup used in Discourse
 
-.modal-open #main {overflow:hidden;}
+.modal-open #main {
+  overflow: hidden;
+}
 
 .modal-middle-container {
   margin-top: 10%;
@@ -15,7 +17,7 @@
 }
 
 .modal.fade {
-  transition: opacity .3s linear, top .3s ease-out;
+  transition: opacity 0.3s linear, top 0.3s ease-out;
   top: -25%;
 }
 .modal.fade.in {
@@ -28,11 +30,11 @@
 // we need a little extra room on mobile for the
 // stuff inside the footer to fit
 .modal-footer {
-  padding: 10px
+  padding: 10px;
 }
 
 .modal-header {
-  padding: 10px;  
+  padding: 10px;
   h3 {
     font-size: $font-up-2;
   }
@@ -49,7 +51,7 @@
     margin-top: 0;
   }
 
-  input[type=radio] {
+  input[type="radio"] {
     margin-right: 10px;
   }
 
@@ -61,7 +63,7 @@
 
   form {
     margin-top: 20px;
-    input[type=text] {
+    input[type="text"] {
       box-sizing: border-box;
       width: 100%;
     }
diff --git a/app/assets/stylesheets/mobile/search.scss b/app/assets/stylesheets/mobile/search.scss
index b27a8d326f0..6cf7bf78133 100644
--- a/app/assets/stylesheets/mobile/search.scss
+++ b/app/assets/stylesheets/mobile/search.scss
@@ -1,6 +1,6 @@
 .search-container {
   flex-direction: column;
-  margin-top: .5em;
+  margin-top: 0.5em;
 
   .search-advanced {
     order: 1;
@@ -14,7 +14,7 @@
       .sort-by {
         display: flex;
         align-items: center;
-        margin-top: .5em;
+        margin-top: 0.5em;
         margin-left: 0;
         width: 100%;
 
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index e9ba6a16792..a98e53c0a9b 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -6,7 +6,7 @@
 // --------------------------------------------------
 
 .list-controls {
-  margin: 10px -3px 5px -3px;  
+  margin: 10px -3px 5px -3px;
   .category-breadcrumb.hidden {
     display: none;
   }
@@ -19,8 +19,8 @@
       box-sizing: border-box;
       display: flex;
       align-self: stretch;
-      margin: 0 3px 10px 3px;   
-      order: 10; // always last for consistent placement      
+      margin: 0 3px 10px 3px;
+      order: 10; // always last for consistent placement
     }
   }
 
@@ -34,10 +34,10 @@
     flex-wrap: wrap;
     width: 100%;
     margin: 5px 0;
-  
+
     button {
       margin: 0 3px;
-     
+
       &.select-kit-header {
         display: flex;
         height: 100%;
@@ -48,15 +48,16 @@
 
   .select-kit {
     display: flex;
-    align-self: stretch;    
+    align-self: stretch;
     margin-bottom: 10px;
   }
-  
+
   .btn:not(.select-kit-header) {
     margin-bottom: 10px;
   }
 
-  .categories-admin-dropdown, .tag-notifications-button {
+  .categories-admin-dropdown,
+  .tag-notifications-button {
     order: 2; // after main nav
   }
 
@@ -68,7 +69,8 @@
       i {
         margin: 0;
       }
-      @media screen and (max-width: 374px) { // Hide edit label on very tiny screens
+      @media screen and (max-width: 374px) {
+        // Hide edit label on very tiny screens
         .d-button-label {
           display: none;
         }
@@ -85,12 +87,12 @@
       flex: 0 1 auto;
       margin-bottom: 5px;
     }
-    >li {
+    > li {
       margin-right: 0;
       background: $primary-low;
       font-size: $font-down-1;
     }
-    >li>a {
+    > li > a {
       line-height: $line-height-large;
       display: flex;
       align-items: center;
@@ -108,7 +110,7 @@
       top: 100%;
       margin: 0;
       left: 0; // iOS6 alignment
-      li {  
+      li {
         list-style-type: none;
         margin-left: 0;
         margin-top: 5px;
@@ -120,7 +122,6 @@
       }
     }
   }
-  
 }
 
 .list-container .full-width {
@@ -131,7 +132,6 @@
 // --------------------------------------------------
 
 .topic-list {
-
   .right {
     margin-left: 55px;
   }
@@ -143,15 +143,20 @@
     max-width: 300px;
   }
 
-  a.title {color: $primary;}
+  a.title {
+    color: $primary;
+  }
 
-  .badge-notification, .category-topic-link td.num .badge-notification {
+  .badge-notification,
+  .category-topic-link td.num .badge-notification {
     position: relative;
     display: inline;
     top: -1px;
     font-size: $font-down-1;
     padding: 4px 6px 3px 6px;
-    i {color: $secondary;}
+    i {
+      color: $secondary;
+    }
 
     &.new-topic::before {
       margin-right: 0;
@@ -163,24 +168,28 @@
   }
 
   .category-topic-link td.num .badge-notification {
-    &.new-posts, &.unread-posts {
+    &.new-posts,
+    &.unread-posts {
       color: dark-light-choose($secondary, $secondary);
     }
   }
 
   .topic-item-stats {
-    .category, .num, .last-poster {
+    .category,
+    .num,
+    .last-poster {
       float: left;
     }
     .category a {
       max-width: 160px;
     }
-    .num .fa, a, a:visited {
+    .num .fa,
+    a,
+    a:visited {
       color: dark-light-choose($primary-medium, $secondary-medium);
     }
   }
 
-
   .age {
     white-space: nowrap;
     a {
@@ -212,7 +221,6 @@
   }
 
   tbody {
-
     .category {
       border-left: 6px solid;
     }
@@ -225,7 +233,9 @@
   }
   // Allow percentage widths on table cells to include their padding
   box-sizing: border-box;
-  *, *:before, *:after {
+  *,
+  *:before,
+  *:after {
     box-sizing: inherit;
   }
 
@@ -257,29 +267,40 @@ tr.category-topic-link {
     margin-top: 1px;
   }
   .featured-users {
-    @include mobile-portrait  {
+    @include mobile-portrait {
       margin-bottom: 10px;
       padding-top: 8px;
       clear: left;
     }
-    @include not-mobile-portrait  {
+    @include not-mobile-portrait {
       float: right;
     }
   }
   .latest {
-    @include mobile-portrait { width: 150px; }
-    @include mobile-landscape { width: 270px; }
-    @include tablet-landscape { width: 450px; }
+    @include mobile-portrait {
+      width: 150px;
+    }
+    @include mobile-landscape {
+      width: 270px;
+    }
+    @include tablet-landscape {
+      width: 450px;
+    }
     .featured-topic {
       margin: 8px 0;
-      a.last-posted-at, a.last-posted-at:visited {
+      a.last-posted-at,
+      a.last-posted-at:visited {
         color: dark-light-choose($primary-medium, $secondary-medium);
       }
     }
   }
   .stats {
-    @include not-tablet-landscape { display: none; }
-    @include tablet-landscape { min-width: 80px; }
+    @include not-tablet-landscape {
+      display: none;
+    }
+    @include tablet-landscape {
+      min-width: 80px;
+    }
   }
 }
 
@@ -304,7 +325,9 @@ tr.category-topic-link {
     max-width: 80vw;
   }
 
-  .category-topic-link .main-link, .subcategories-list td, .category-description td {
+  .category-topic-link .main-link,
+  .subcategories-list td,
+  .category-description td {
     padding-left: 10px;
   }
 
@@ -343,7 +366,6 @@ tr.category-topic-link {
     }
   }
 
-
   .posters {
     float: left;
   }
@@ -378,7 +400,6 @@ tr.category-topic-link {
   margin: 20px 0 0 0;
 }
 
-
 // Misc. stuff
 // --------------------------------------------------
 .btn-group .dropdown-toggle:active,
@@ -420,7 +441,10 @@ tr.category-topic-link {
   box-shadow: shadow("dropdown");
   background-clip: padding-box;
   margin: 1px 0 20px;
-  .title {font-weight: bold; display: block;}
+  .title {
+    font-weight: bold;
+    display: block;
+  }
 }
 .dropdown-menu a {
   display: block;
@@ -443,7 +467,7 @@ tr.category-topic-link {
 }
 .fade {
   opacity: 0;
-  transition: opacity linear .15s;
+  transition: opacity linear 0.15s;
 }
 .fade.in {
   opacity: 1;
@@ -457,7 +481,7 @@ ol.category-breadcrumb {
   li.select-kit {
     flex: 1 1 33%;
     margin: 0 3px 5px 3px;
-    .select-kit-header .selected-name  {   
+    .select-kit-header .selected-name {
       max-width: 80vw;
       .badge-wrapper {
         max-width: 100%;
@@ -467,9 +491,15 @@ ol.category-breadcrumb {
 }
 
 .top-lists {
-  h2 { margin-left: 10px; }
-  .topic-list { padding-bottom: 10px; }
-  .btn-default.pull-right { margin-right: 10px; }
+  h2 {
+    margin-left: 10px;
+  }
+  .topic-list {
+    padding-bottom: 10px;
+  }
+  .btn-default.pull-right {
+    margin-right: 10px;
+  }
 }
 
 .tags-admin-menu {
@@ -481,8 +511,8 @@ ol.category-breadcrumb {
 }
 
 .topic-list-bottom h3 {
-  clear:both;
-  padding-top:10px;
+  clear: both;
+  padding-top: 10px;
 }
 
 .category-logo {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 2a45dc766a4..b083511599d 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -39,7 +39,7 @@ span.badge-posts {
       flex: 0 1 auto;
       button {
         &.like {
-          flex: 1 1 auto;          
+          flex: 1 1 auto;
         }
         &.like-count {
           padding: 8px 4px 8px 8px;
@@ -65,11 +65,11 @@ span.badge-posts {
       }
       button.like-count + button.toggle-like {
         padding: 8px 9px 8px 4px;
-      }  
+      }
     }
 
     .d-icon {
-      opacity: 1.0;
+      opacity: 1;
     }
     button {
       border: none;
@@ -85,7 +85,7 @@ span.badge-posts {
         position: relative;
       }
       &.expand-post {
-        margin:10px 0 10px 0;
+        margin: 10px 0 10px 0;
       }
       &.reply {
         color: $primary-high;
@@ -98,7 +98,6 @@ span.badge-posts {
         color: $tertiary;
       }
     }
-
   }
 }
 
@@ -135,7 +134,6 @@ span.badge-posts {
   }
 }
 
-
 .embedded-posts {
   .topic-meta-data h5 a {
     margin-left: 10px;
@@ -197,7 +195,8 @@ a.reply-to-tab {
     .number {
       line-height: $line-height-medium;
     }
-    .number, i {
+    .number,
+    i {
       color: dark-light-choose($primary-high, $secondary-low);
       font-size: $font-up-1;
     }
@@ -210,7 +209,9 @@ a.reply-to-tab {
     display: none;
   }
 
-  .links, .information, .avatars {
+  .links,
+  .information,
+  .avatars {
     padding: 10px;
     color: $primary;
     overflow: auto;
@@ -222,8 +223,12 @@ a.reply-to-tab {
     }
   }
 
-  .participants { // PMs //
-    .user {float: left; margin: 0 10px 10px 0;}
+  .participants {
+    // PMs //
+    .user {
+      float: left;
+      margin: 0 10px 10px 0;
+    }
   }
 
   .buttons {
@@ -251,7 +256,9 @@ a.reply-to-tab {
 #topic-footer-buttons {
   @include clearfix;
   padding: 20px 0 0 0;
-  .d-icon-bookmark.bookmarked { color: $tertiary; }
+  .d-icon-bookmark.bookmarked {
+    color: $tertiary;
+  }
 
   .combobox {
     float: left;
@@ -261,7 +268,6 @@ a.reply-to-tab {
   }
 }
 
-
 #topic-footer-buttons p {
   clear: both; /* this is to force the drop-down notification state description para below the button */
   margin: 0;
@@ -276,23 +282,28 @@ a.reply-to-tab {
 #suggested-topics {
   clear: left;
   padding: 20px 0 15px 0;
-    th.views, td.views, td.activity, th.activity, th.likes, td.likes {
+  th.views,
+  td.views,
+  td.activity,
+  th.activity,
+  th.likes,
+  td.likes {
     display: none;
-    }
+  }
 
-   a.badge-category, a.badge-category-parent {
+  a.badge-category,
+  a.badge-category-parent {
     font-size: $font-down-1;
     vertical-align: top;
-    }
+  }
 }
 
 span.post-count {
   background: $primary;
   color: $secondary;
-  opacity: .8;
+  opacity: 0.8;
 }
 
-
 #topic-footer-buttons {
   .btn {
     margin-bottom: 5px;
@@ -308,7 +319,7 @@ span.post-count {
 
 // mobile has no fixed width on topic-body so overflow: hidden causes problems
 .topic-body {
-  overflow:inherit;
+  overflow: inherit;
 }
 
 // instead, for mobile we set overflow hidden on the cooked part of post body
@@ -330,11 +341,11 @@ iframe {
   display: none;
 }
 
-.open>.dropdown-menu {
+.open > .dropdown-menu {
   display: block;
 }
 
-.dropdown-menu li  {
+.dropdown-menu li {
   margin: 5px 0;
   .fa {
     float: left;
@@ -381,7 +392,9 @@ iframe {
 }
 
 // hide the full set of selection buttons on mobile
-.select-posts button { display: none; }
+.select-posts button {
+  display: none;
+}
 
 // unhide the simple "select just this post" button
 button.select-post {
@@ -394,18 +407,20 @@ button.select-post {
   padding: 5px;
 }
 
-
 .post-select {
   float: right;
   margin-right: 20px;
   margin-top: -20px;
 }
 
-
-
 .deleted {
   .topic-body {
-    background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -60%);
+    background-color: dark-light-diff(
+      rgba($danger, 0.7),
+      $secondary,
+      50%,
+      -60%
+    );
   }
 }
 
@@ -413,10 +428,12 @@ button.select-post {
   font-size: $font-up-5;
 }
 
-span.btn-text {display: none;}
+span.btn-text {
+  display: none;
+}
 
 blockquote {
-  clear:both;
+  clear: both;
   /* leave browser defaults for top and bottom here */
   margin-left: 0;
   margin-right: 0;
@@ -426,9 +443,13 @@ blockquote {
   padding: 0.25em 0;
 }
 
-.gutter { display: none; }
+.gutter {
+  display: none;
+}
 
-.posts-wrapper {  position: relative; }
+.posts-wrapper {
+  position: relative;
+}
 
 span.highlighted {
   background-color: dark-light-choose($highlight-low, $highlight);
@@ -452,7 +473,9 @@ span.highlighted {
   }
   .post-info {
     float: right;
-    .edits { margin-right: 5px; }
+    .edits {
+      margin-right: 5px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 4281d322b8e..c9948eec620 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -1,4 +1,6 @@
-.post-info a {color: #aaa;}
+.post-info a {
+  color: #aaa;
+}
 
 .topic-meta-data-inside {
   float: right;
@@ -6,12 +8,13 @@
   margin-right: 5px;
 }
 
-
-.post-info  {
+.post-info {
   display: inline-block;
 }
 
-.edits {margin-right: 5px;}
+.edits {
+  margin-right: 5px;
+}
 
 #topic-title {
   //margin-bottom: 20px;
@@ -26,15 +29,20 @@
     }
   }
   .title-category-wrapper {
-    margin-top:5px;
+    margin-top: 5px;
+  }
+  .private-message-glyph {
+    display: none;
   }
-  .private-message-glyph { display: none; }
 }
 
-.private_message #topic-title .private-message-glyph { display: inline; }
+.private_message #topic-title .private-message-glyph {
+  display: inline;
+}
 
 /* both blocks that appear under the standard post control buttons */
-.notification-options, .pinned-options {
+.notification-options,
+.pinned-options {
   float: left;
   margin-top: 0;
   padding-top: 1px;
@@ -138,9 +146,9 @@
     top: 0;
     bottom: 0;
     width: 0;
-    border-right: 1px solid  $tertiary-low;
-    background-color:  $tertiary-low;
-    transition: width .75s;
+    border-right: 1px solid $tertiary-low;
+    background-color: $tertiary-low;
+    transition: width 0.75s;
   }
 }
 
@@ -164,9 +172,16 @@
   position: absolute;
 }
 
-.topic-post:last-of-type {padding-bottom: 40px;}
+.topic-post:last-of-type {
+  padding-bottom: 40px;
+}
 
-sup sup, sub sup, sup sub, sub sub { top: 0; }
+sup sup,
+sub sup,
+sup sub,
+sub sub {
+  top: 0;
+}
 
 // inline editing of title on mobile
 #topic-title .title-wrapper {
@@ -192,12 +207,13 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
 
 // make mobile timeline top and bottom dates easier to select
 .topic-timeline {
-  .start-date, .now-date {
+  .start-date,
+  .now-date {
     font-size: $font-up-1;
     padding: 5px;
   }
   .topic-category {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/upload.scss b/app/assets/stylesheets/mobile/upload.scss
index 2d487d8013a..263b32e8b46 100644
--- a/app/assets/stylesheets/mobile/upload.scss
+++ b/app/assets/stylesheets/mobile/upload.scss
@@ -1,5 +1,5 @@
 .upload-selector {
-  input[type="text"]{
+  input[type="text"] {
     width: calc(100% - 20px);
   }
   input[type="file"] {
@@ -16,7 +16,8 @@
     &:first-of-type {
       margin-bottom: 1em;
     }
-    input, label {
+    input,
+    label {
       min-height: 20px;
       line-height: $line-height-medium;
       margin: 0;
@@ -25,11 +26,10 @@
       padding-left: 5px;
     }
     .inputs {
-      margin-top: 10px; 
+      margin-top: 10px;
       width: 100%;
     }
   }
-
 }
 
 .uploaded-image-preview {
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 5ab0a5fc5d0..bec296e3bba 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -9,7 +9,7 @@
 }
 
 .user-main {
-margin-top: 10px;
+  margin-top: 10px;
   table.group-members {
     width: 100%;
     p {
@@ -45,7 +45,7 @@ margin-top: 10px;
     margin-top: 10px;
 
     .btn.right {
-      float: right
+      float: right;
     }
 
     table {
@@ -133,7 +133,6 @@ margin-top: 10px;
         display: flex;
         flex: 1 1 auto;
         flex-wrap: wrap;
-
       }
 
       li {
@@ -233,7 +232,6 @@ margin-top: 10px;
 }
 
 .user-preferences {
-
   .instructions {
     margin-top: 5px;
   }
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 0fa4c95008c..0693073c7fb 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -7,7 +7,7 @@
 
 body.wizard {
   background-color: #fff;
-  background-image: asset-url('/images/wizard/bubbles.png');
+  background-image: asset-url("/images/wizard/bubbles.png");
   background-repeat: repeat;
   background-position: left top;
 
@@ -32,7 +32,7 @@ body.wizard {
 }
 
 .discourse-logo {
-  background-image: asset-url('/images/wizard/discourse.png');
+  background-image: asset-url("/images/wizard/discourse.png");
   height: 30px;
   width: 110px;
   background-size: 110px 30px;
@@ -40,13 +40,10 @@ body.wizard {
 }
 
 .wizard-warning {
-  font-family: sans-serif,
-
-  p {
+  font-family: sans-serif, p {
     margin-top: 0;
   }
 
-
   fieldset {
     display: none;
   }
@@ -75,7 +72,6 @@ body.wizard {
 }
 
 .wizard-step-emoji {
-
   .radio-area {
     display: flex;
     flex-direction: row;
@@ -108,7 +104,7 @@ body.wizard {
   position: relative;
   z-index: 11;
   background-color: white;
-  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-sizing: border-box;
   margin: 1.5em auto;
   padding: 0;
@@ -144,7 +140,7 @@ body.wizard {
   }
 
   .wizard-progress {
-    border: 1px solid #A3C1FF;
+    border: 1px solid #a3c1ff;
     width: 200px;
     height: 1.4em;
 
@@ -161,7 +157,7 @@ body.wizard {
 
     .black {
       background: black;
-      transition: width .3s;
+      transition: width 0.3s;
       z-index: 12;
     }
 
@@ -175,7 +171,7 @@ body.wizard {
     }
 
     .screen {
-      background-color: #A3C1FF;
+      background-color: #a3c1ff;
       mix-blend-mode: screen;
       width: 200px;
       z-index: 14;
@@ -193,13 +189,13 @@ body.wizard {
     font-size: $font-0;
     border: 0;
     padding: 0.5em;
-    transition: background-color .3s;
+    transition: background-color 0.3s;
     margin-right: 0.5em;
     text-decoration: none;
 
     background-color: #fff;
     color: #333;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 
     &.small {
       padding: 0.25em 0.5em;
@@ -235,14 +231,14 @@ body.wizard {
   .wizard-btn.primary {
     background-color: #6699ff;
     color: white;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 
     &:hover {
-      background-color: #80B3FF;
+      background-color: #80b3ff;
     }
 
     &:active {
-      background-color: #4D80E6;
+      background-color: #4d80e6;
     }
 
     &:disabled {
@@ -251,15 +247,15 @@ body.wizard {
   }
 
   .wizard-btn.danger {
-    background-color: #E60000;
+    background-color: #e60000;
     color: white;
 
     &:hover {
-      background-color: #CC0000;
+      background-color: #cc0000;
     }
 
     &:active {
-      background-color: #B30000;
+      background-color: #b30000;
     }
 
     &:disabled {
@@ -267,7 +263,6 @@ body.wizard {
     }
   }
 
-
   .wizard-btn-upload {
     clear: both;
     display: inline-block;
@@ -294,7 +289,7 @@ body.wizard {
     .wizard-btn.back {
       background-color: #fff;
       color: #333;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 
       &:hover {
         background-color: #eee;
@@ -315,14 +310,14 @@ body.wizard {
 
     button.wizard-btn.done {
       color: #fff;
-      background-color: #33B333;
+      background-color: #33b333;
 
       &:hover {
-        background-color: #4DCD4D;
+        background-color: #4dcd4d;
       }
 
       &:active {
-        background-color: #66E666;
+        background-color: #66e666;
       }
 
       &:disabled {
@@ -378,7 +373,7 @@ body.wizard {
       margin-top: 0.5em;
 
       a {
-        color: #7B68EE;
+        color: #7b68ee;
       }
     }
 
@@ -406,7 +401,7 @@ body.wizard {
     font-size: $font-up-1;
     padding: 6px;
     border: 1px solid #ccc;
-    transition: border-color .5s;
+    transition: border-color 0.5s;
   }
 
   &.invalid {
@@ -476,27 +471,62 @@ body.wizard {
 
 /* fix wizard for mobile -- iPhone 5 default width */
 @media only screen and (max-device-width: 568px) {
-  h1 { font-size: $font-up-2 !important; }
-  .wizard-column { margin: auto !important; }
-  .wizard-step-contents { min-height: auto !important; }
-  .wizard-step-banner { width: 100% !important; margin-bottom: 1em !important; }
-  .wizard-step-footer { display: block !important; }
-  .wizard-progress { margin-bottom: 10px !important; }
-  .wizard-buttons { text-align: right !important; }
-  .wizard-footer { display: none !important; }
-  .wizard-field { margin-bottom: 1em !important; }
-  .wizard-step-description { margin-bottom: 1em !important; }
-  .wizard-column-contents { padding: 1em !important; }
-  .emoji-preview img { width: 16px !important; height: 16px !important; }
-  .invite-list .new-user { flex-direction: column !important; align-items: inherit !important; }
-  .invite-list .new-user .invite-email { width: 100% !important; margin-bottom: 5px !important; }
-  .invite-list .add-user { margin-top: 5px !important; }
+  h1 {
+    font-size: $font-up-2 !important;
+  }
+  .wizard-column {
+    margin: auto !important;
+  }
+  .wizard-step-contents {
+    min-height: auto !important;
+  }
+  .wizard-step-banner {
+    width: 100% !important;
+    margin-bottom: 1em !important;
+  }
+  .wizard-step-footer {
+    display: block !important;
+  }
+  .wizard-progress {
+    margin-bottom: 10px !important;
+  }
+  .wizard-buttons {
+    text-align: right !important;
+  }
+  .wizard-footer {
+    display: none !important;
+  }
+  .wizard-field {
+    margin-bottom: 1em !important;
+  }
+  .wizard-step-description {
+    margin-bottom: 1em !important;
+  }
+  .wizard-column-contents {
+    padding: 1em !important;
+  }
+  .emoji-preview img {
+    width: 16px !important;
+    height: 16px !important;
+  }
+  .invite-list .new-user {
+    flex-direction: column !important;
+    align-items: inherit !important;
+  }
+  .invite-list .new-user .invite-email {
+    width: 100% !important;
+    margin-bottom: 5px !important;
+  }
+  .invite-list .add-user {
+    margin-top: 5px !important;
+  }
 
   canvas {
     max-width: 365px;
   }
 
-  .wizard-step-logos, .wizard-step-icons {
+  .wizard-step-logos,
+  .wizard-step-icons {
     canvas {
       max-width: 225px;
     }
diff --git a/lib/tasks/docker.rake b/lib/tasks/docker.rake
index ba8537c07bb..432d1e690f4 100644
--- a/lib/tasks/docker.rake
+++ b/lib/tasks/docker.rake
@@ -39,14 +39,27 @@ task 'docker:test' do
   begin
     @good = true
     unless ENV['SKIP_LINT']
-      puts "Running linters"
+      puts "Running linters/prettyfiers"
       if ENV["SINGLE_PLUGIN"]
         @good &&= run_or_fail("bundle exec rubocop --parallel plugins/#{ENV["SINGLE_PLUGIN"]}")
         @good &&= run_or_fail("eslint --ext .es6 plugins/#{ENV['SINGLE_PLUGIN']}")
+
+        puts "Listing prettier offenses in #{ENV['SINGLE_PLUGIN']}:"
+        @good &&= run_or_fail("prettier --list-different 'plugins/#{ENV['SINGLE_PLUGIN']}/**/*.scss'")
       else
         @good &&= run_or_fail("bundle exec rubocop --parallel") unless ENV["SKIP_CORE"]
         @good &&= run_or_fail("eslint app/assets/javascripts test/javascripts") unless ENV["SKIP_CORE"]
         @good &&= run_or_fail("eslint --ext .es6 app/assets/javascripts test/javascripts plugins") unless ENV["SKIP_PLUGINS"]
+
+        unless ENV["SKIP_CORE"]
+          puts "Listing prettier offenses in core:"
+          @good &&= run_or_fail('prettier --list-different "app/assets/stylesheets/**/*.scss"')
+        end
+
+        unless ENV["SKIP_PLUGINS"]
+          puts "Listing prettier offenses in plugins:"
+          @good &&= run_or_fail('prettier --list-different "plugins/**/*.scss"')
+        end
       end
     end
 
diff --git a/package.json b/package.json
index c52e09aaa5c..bc918b3eef1 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "chrome-launcher": "^0.10.2",
     "chrome-remote-interface": "^0.25.6",
     "eslint": "^4.19.1",
+    "prettier": "1.13.4",
     "puppeteer": "^1.4.0"
   }
 }
diff --git a/plugins/discourse-details/assets/stylesheets/details.scss b/plugins/discourse-details/assets/stylesheets/details.scss
index a0265d894e3..afdf7a134c3 100644
--- a/plugins/discourse-details/assets/stylesheets/details.scss
+++ b/plugins/discourse-details/assets/stylesheets/details.scss
@@ -18,8 +18,8 @@ summary:first-of-type {
 }
 
 summary:before {
-  content: '\25BA';
-  margin-right: .25em;
+  content: "\25BA";
+  margin-right: 0.25em;
 }
 
 details[open] > * {
@@ -27,12 +27,12 @@ details[open] > * {
 }
 
 details[open] > summary:before,
-details.open  > summary:before {
-  content: '\25BC';
+details.open > summary:before {
+  content: "\25BC";
 }
 
 details[open] > summary:first-of-type ~ *,
-details.open  > summary:first-of-type ~ * {
+details.open > summary:first-of-type ~ * {
   display: block;
 }
 
@@ -46,11 +46,9 @@ details .lazyYT-container {
   display: none;
 }
 
-
 .elided {
-
   summary:before {
-    content: '' !important;
+    content: "" !important;
     display: none;
   }
 
@@ -68,7 +66,6 @@ details .lazyYT-container {
     border: 1px solid #ddd;
     width: 21px;
     line-height: 12px;
-
   }
 
   summary:hover {
diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
index f3e846b8428..c8a5ff0f532 100644
--- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
+++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
@@ -8,7 +8,7 @@
     cursor: pointer;
 
     .d-icon-globe {
-      margin-right: .25em;
+      margin-right: 0.25em;
       color: $primary-medium;
 
       &:hover {
@@ -27,7 +27,8 @@
   align-items: center;
   justify-content: flex-start;
 
-  &:before, &:after {
+  &:before,
+  &:after {
     content: none;
   }
 
@@ -111,28 +112,30 @@
         width: 300px;
       }
     }
-   }
+  }
 
-   .format {
-     .format-input {
-       width: 280px;
-     }
-   }
+  .format {
+    .format-input {
+      width: 280px;
+    }
+  }
 
-   .formats {
-     list-style: none;
-     padding: 0;
-     margin: 0;
-     .format {
-       .previewed-format {
-         color: $primary-medium;
-       }
-     }
-   }
+  .formats {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    .format {
+      .previewed-format {
+        color: $primary-medium;
+      }
+    }
+  }
 
-   .control-group.recurrence, .control-group.format, .control-group.timezones {
-     margin-top: 1em;
-   }
+  .control-group.recurrence,
+  .control-group.format,
+  .control-group.timezones {
+    margin-top: 1em;
+  }
 
   .timezones-input {
     width: 99%;
diff --git a/plugins/discourse-presence/assets/stylesheets/presence.scss b/plugins/discourse-presence/assets/stylesheets/presence.scss
index 3fc25f06a5b..85f9950ca77 100644
--- a/plugins/discourse-presence/assets/stylesheets/presence.scss
+++ b/plugins/discourse-presence/assets/stylesheets/presence.scss
@@ -2,23 +2,23 @@
   background-color: $secondary;
   color: $primary-medium;
   display: flex;
-  
+
   span.presence-text {
     margin-left: 5px;
     margin-right: 2px;
     flex: 0 0 auto;
-    padding-top: 3px;    
+    padding-top: 3px;
   }
 
   .presence-avatars {
     display: flex;
     overflow: hidden;
-    flex-wrap: wrap;    
+    flex-wrap: wrap;
   }
 
   .wave {
     flex: 0 0 auto;
-    
+
     .dot {
       display: inline-block;
       animation: wave 1.8s linear infinite;
@@ -34,7 +34,9 @@
   }
 
   @keyframes wave {
-    0%, 60%, 100% {
+    0%,
+    60%,
+    100% {
       transform: initial;
     }
 
@@ -49,7 +51,7 @@
   top: 18px;
   right: 40px;
   @media screen and (max-width: $small-width) {
-    max-width: 318px;    
+    max-width: 318px;
     .presence-avatars {
       flex-wrap: nowrap;
     }
@@ -68,7 +70,7 @@
       flex-wrap: nowrap;
     }
     .description {
-      display:none;
+      display: none;
     }
   }
 }
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 09460788e0f..0ebd7355b2b 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -1,5 +1,5 @@
-$border-color: rgb(219,219,219);
-$text-color: #9E9E9E;
+$border-color: rgb(219, 219, 219);
+$text-color: #9e9e9e;
 
 $option-background: dark-light-diff($primary, $secondary, 90%, -65%);
 
@@ -9,7 +9,8 @@ div.poll {
 
   @include unselectable;
 
-  ul, ol {
+  ul,
+  ol {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -25,7 +26,7 @@ div.poll {
 
   li[data-poll-option-id] {
     color: $primary;
-    padding: .5em .7em .7em .5em;
+    padding: 0.5em 0.7em 0.7em 0.5em;
   }
 
   .button {
@@ -95,7 +96,6 @@ div.poll {
   }
 
   .results {
-
     .option {
       padding-bottom: 5px;
       p {
@@ -116,7 +116,7 @@ div.poll {
 
     .bar {
       height: 10px;
-      background: dark-light-diff($primary, $secondary, 50%, -25%);;
+      background: dark-light-diff($primary, $secondary, 50%, -25%);
     }
 
     .chosen .bar {
@@ -125,13 +125,10 @@ div.poll {
   }
 
   &[data-poll-type="number"] {
-
     li[data-poll-option-id] {
       display: inline-block;
       width: 45px;
       margin-right: 5px;
     }
-
   }
-
 }
diff --git a/plugins/poll/assets/stylesheets/mobile/poll.scss b/plugins/poll/assets/stylesheets/mobile/poll.scss
index 2d552a5f6b5..14e97458ff9 100644
--- a/plugins/poll/assets/stylesheets/mobile/poll.scss
+++ b/plugins/poll/assets/stylesheets/mobile/poll.scss
@@ -9,7 +9,7 @@ div.poll {
 
   .poll-info {
     .info-label:before {
-      content:"\00a0"; //nbsp
+      content: "\00a0"; //nbsp
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a806bafb980..d908e1a0967 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -813,6 +813,10 @@ prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
 
+prettier@1.13.4:
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.4.tgz#31bbae6990f13b1093187c731766a14036fa72e6"
+
 process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"