From d0e6246e99ccf1b0367569a3d99a110c91b346ce Mon Sep 17 00:00:00 2001
From: mrliptontea <rayman17@gmail.com>
Date: Sun, 20 Nov 2016 20:19:51 +0000
Subject: [PATCH] Linting

- Update scss_lint rules
- Fix linter errors
- Add .editorconfig file
---
 .editorconfig                                 |   9 +
 .scss-lint.yml                                |  25 +-
 src/sass/_variables.scss                      |   2 +
 src/sass/application.scss                     |   1 +
 src/sass/components/_admin.scss               |  35 +-
 src/sass/components/_buttons.scss             |  47 +-
 src/sass/components/_coderay.scss             |  74 ++-
 src/sass/components/_content.scss             |   2 +-
 src/sass/components/_elements.scss            | 152 ++---
 src/sass/components/_flash.scss               |  16 +-
 src/sass/components/_forms.scss               | 185 +++---
 src/sass/components/_gantt.scss               |  68 ++-
 src/sass/components/_gravatar.scss            |   7 +-
 src/sass/components/_icons.scss               | 543 ++++++++----------
 src/sass/components/_image-base64.scss        |   2 +-
 src/sass/components/_issue.scss               |  25 +-
 src/sass/components/_jquery-ui.scss           |  30 +-
 src/sass/components/_jstoolbar.scss           |  55 +-
 src/sass/components/_list.scss                |  69 +--
 src/sass/components/_plugins.scss             |   4 +-
 src/sass/components/_simple-list.scss         |   2 +-
 src/sass/components/_tabs.scss                |   7 +-
 src/sass/components/_top.scss                 |   8 +-
 src/sass/components/_wiki.scss                |  71 ++-
 src/sass/javascripts/_sidebar-toggler.scss    |  10 +-
 src/sass/mixins/_clearfix.scss                |  10 +-
 src/sass/mixins/_issues.scss                  |   6 +-
 src/sass/mixins/_shadows.scss                 |   8 +-
 src/sass/plugins/redmine_backlogs/global.scss |  40 +-
 .../redmine_backlogs/jquery/jquery-ui.scss    |   8 +-
 .../jquery/jquery.multiselect.scss            |   3 +-
 .../redmine_backlogs/master_backlog.scss      |  90 ++-
 .../plugins/redmine_backlogs/taskboard.scss   |  36 +-
 33 files changed, 776 insertions(+), 874 deletions(-)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..d741e40
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 4
diff --git a/.scss-lint.yml b/.scss-lint.yml
index 2dc4634..304b3b7 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -18,7 +18,7 @@ linters:
     enabled: false
 
   Comment:
-    enabled: false
+    enabled: true
 
   DebugStatement:
     enabled: true
@@ -30,8 +30,7 @@ linters:
     enabled: true
 
   ElsePlacement:
-    enabled: false
-    style: same_line
+    enabled: true
 
   EmptyLineBetweenBlocks:
     enabled: true
@@ -94,6 +93,9 @@ linters:
     enabled: true
     extra_properties: []
 
+  PseudoElement:
+    enabled: true
+
   QualifyingElement:
     enabled: false
 
@@ -124,6 +126,12 @@ linters:
   SpaceAfterPropertyName:
     enabled: true
 
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+
   SpaceBeforeBrace:
     enabled: true
     style: space
@@ -140,8 +148,14 @@ linters:
   TrailingSemicolon:
     enabled: true
 
+  TrailingWhitespace:
+    enabled: true
+
   TrailingZero:
-    enabled: false
+    enabled: true
+
+  TransitionAll:
+    enabled: true
 
   UnnecessaryMantissa:
     enabled: true
@@ -154,3 +168,6 @@ linters:
 
   UrlQuotes:
     enabled: true
+
+  ZeroUnit:
+    enabled: true
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 075b826..b73bfd6 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -248,6 +248,7 @@ $diff-in-bg-light:              rgba($diff-in-bg, .3) !default;
 
 //== Journal changes
 //
+
 $journal-old-value-color:       #430 !default;
 $journal-old-value-bg:          rgba(#ffeaaa, .3) !default;
 $journal-new-value-color:       #350 !default;
@@ -481,6 +482,7 @@ $issue-attribute-padding-h:     5px !default;
 
 //== Speech "bubbles"
 //
+
 $bubble-gravatar-size:          24px !default;
 $bubble-gravatar-space:         12px !default;
 $bubble-padding-vertical:       8px !default;
diff --git a/src/sass/application.scss b/src/sass/application.scss
index cbda3a8..83dfdbd 100644
--- a/src/sass/application.scss
+++ b/src/sass/application.scss
@@ -4,6 +4,7 @@
 @import "lib/normalize";
 @import "lib/font-awesome";
 
+
 //== Redmine's core elements
 //
 
diff --git a/src/sass/components/_admin.scss b/src/sass/components/_admin.scss
index 8b5c676..d2815fe 100644
--- a/src/sass/components/_admin.scss
+++ b/src/sass/components/_admin.scss
@@ -32,9 +32,8 @@
 }
 
 
-/**
- * Groups
- */
+//== Groups
+//
 
 table.members,
 table.memberships {
@@ -44,9 +43,8 @@ table.memberships {
 }
 
 
-/**
- * Permissions
- */
+//== Permissions
+//
 
 table.permissions {
     td.role {
@@ -58,9 +56,8 @@ table.permissions {
 }
 
 
-/**
- * Workflows
- */
+//== Workflows
+//
 
 table.transitions {
     td.enabled {
@@ -88,9 +85,8 @@ table.fields_permissions {
 }
 
 
-/**
- * Enumerations
- */
+//== Enumerations
+//
 
 .controller-enumerations.action-index {
     #content {
@@ -106,18 +102,16 @@ table.fields_permissions {
 }
 
 
-/**
- * Settings labels
- */
+//== Settings labels
+//
 
 fieldset.settings label {
     display: block;
 }
 
 
-/**
- * Settings -> Notifications
- */
+//== Settings -> Notifications
+//
 
 fieldset#notified_events {
     .parent {
@@ -126,9 +120,8 @@ fieldset#notified_events {
 }
 
 
-/**
- * Settings -> Repositories
- */
+//== Settings -> Repositories
+//
 
 .settings.enabled_scm {
     table {
diff --git a/src/sass/components/_buttons.scss b/src/sass/components/_buttons.scss
index 3db6230..f430ad2 100644
--- a/src/sass/components/_buttons.scss
+++ b/src/sass/components/_buttons.scss
@@ -37,9 +37,8 @@ button {
 }
 
 
-/**
- * Form buttons layout
- */
+//== Form buttons layout
+//
 
 form {
     input[type="submit"] {
@@ -51,26 +50,25 @@ form {
 
         + a {
             margin-right: 5px;
-        }
 
-        + a + a {
-            margin-left: 5px;
+            + a {
+                margin-left: 5px;
+            }
         }
     }
 }
 
 
-/**
- * Repository's 'View differences' button
- */
+//== Repository's 'View differences' button
+//
+
 form[action*="repository/diff"] {
     margin-bottom: $line-height-computed / 2;
 }
 
 
-/**
- * Forum and news message form buttons layout
- */
+//== Forum and news message form buttons layout
+//
 
 #message-form,
 #news-form {
@@ -83,9 +81,8 @@ form[action*="repository/diff"] {
 }
 
 
-/**
- * Button links
- */
+//== Button links
+//
 
 p.buttons,
 .other-formats > span,
@@ -126,18 +123,16 @@ p.buttons,
 }
 
 
-/**
- * Action buttons group
- */
+//== Action buttons group
+//
 
 p.buttons {
     margin-bottom: $line-height-computed;
 }
 
 
-/**
- * Export actions
- */
+//== Export actions
+//
 
 .other-formats {
     margin: $line-height-computed 0 0;
@@ -151,9 +146,8 @@ p.buttons {
 }
 
 
-/**
- * Query builder buttons
- */
+//== Query builder buttons
+//
 
 .query-columns {
     select {
@@ -175,9 +169,8 @@ p.buttons {
 }
 
 
-/**
- * Button for toggling multiselect (in filters)
- */
+//== Button for toggling multiselect (in filters)
+//
 
 a[data-expands],
 .toggle-multiselect {
diff --git a/src/sass/components/_coderay.scss b/src/sass/components/_coderay.scss
index 42b24ee..1250d96 100644
--- a/src/sass/components/_coderay.scss
+++ b/src/sass/components/_coderay.scss
@@ -302,36 +302,13 @@
 
     .insert {
         background: hsla(120, 100%, 50%, .12);
-    }
 
-    .delete {
-        background: hsla(0, 100%, 50%, .12);
-    }
-
-    .change {
-        background: #007;
-        color: #bbf;
-    }
-
-    .head {
-        background: #505;
-        color: #f8f;
-
-        .filename {
-            color: #fff;
+        .insert {
+            background: transparent;
+            color: #0c0;
+            font-weight: $font-weight-bold;
         }
-    }
 
-    .delete .eyecatcher {
-        margin: -1px;
-        border: 1px solid hsla(0, 100%, 45%, .5);
-        border-bottom: 0 none;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        background-color: hsla(0, 100%, 50%, .2);
-    }
-
-    .insert {
         .eyecatcher {
             margin: -1px;
             border: 1px solid hsla(120, 100%, 25%, .5);
@@ -340,25 +317,46 @@
             border-bottom-right-radius: 5px;
             background-color: hsla(120, 100%, 50%, .2);
         }
+    }
 
-        .insert {
+    .delete {
+        background: hsla(0, 100%, 50%, .12);
+
+        .delete {
             background: transparent;
-            color: #0c0;
+            color: #c00;
             font-weight: $font-weight-bold;
         }
+
+        .eyecatcher {
+            margin: -1px;
+            border: 1px solid hsla(0, 100%, 45%, .5);
+            border-bottom: 0 none;
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+            background-color: hsla(0, 100%, 50%, .2);
+        }
     }
 
-    .delete .delete {
-        background: transparent;
-        color: #c00;
-        font-weight: $font-weight-bold;
+    .change {
+        background: #007;
+        color: #bbf;
+
+        .change {
+            color: #88f;
+        }
     }
 
-    .change .change {
-        color: #88f;
-    }
+    .head {
+        background: #505;
+        color: #f8f;
 
-    .head .head {
-        color: #f4f;
+        .head {
+            color: #f4f;
+        }
+
+        .filename {
+            color: #fff;
+        }
     }
 }
diff --git a/src/sass/components/_content.scss b/src/sass/components/_content.scss
index a35c0fb..b091324 100644
--- a/src/sass/components/_content.scss
+++ b/src/sass/components/_content.scss
@@ -20,10 +20,10 @@
     @if $flexbox-layout {
         // scss-lint:disable VendorPrefix
         $side-space: $sidebar-width + $padding-side * 2;
-        width: calc(100% - #{$side-space});
         -webkit-flex: 1 1 auto;
         -ms-flex: 1 1 auto;
         flex: 1 1 auto;
+        width: calc(100% - #{$side-space});
     } @else {
         overflow: hidden;
     }
diff --git a/src/sass/components/_elements.scss b/src/sass/components/_elements.scss
index 55a07d1..b66edb0 100644
--- a/src/sass/components/_elements.scss
+++ b/src/sass/components/_elements.scss
@@ -3,9 +3,8 @@
 // --------------------------------------------------
 
 
-/**
- * Collapsible
- */
+//== Collapsible
+//
 
 a.collapsible,
 .collapsible > legend {
@@ -17,7 +16,7 @@ a.collapsible,
         color: $link-hover-color;
     }
 
-    &:before {
+    &::before {
         display: inline-block;
         position: relative;
         top: -1px;
@@ -39,7 +38,7 @@ a.collapsible,
 
 a.collapsible.collapsed,
 .collapsible.collapsed > legend {
-    &:before {
+    &::before {
         @include rotate(-90deg);
     }
 }
@@ -73,18 +72,16 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Elements with context menus (doesn't really work on Windows)
- */
+//== Elements with context menus (doesn't really work on Windows)
+//
 
 .hascontextmenu {
     cursor: context-menu;
 }
 
 
-/**
- * Actions for block
- */
+//== Actions for block
+//
 
 .contextual {
     padding-left: $padding-base-vertical;
@@ -106,9 +103,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Accessibility specific styles
- */
+//== Accessibility specific styles
+//
 
 .hidden-for-sighted {
     position: absolute;
@@ -120,9 +116,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Responsive autoscroll
- */
+//== Responsive autoscroll
+//
 
 .autoscroll {
     overflow-x: auto;
@@ -130,9 +125,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Container
- */
+//== Container
+//
 
 .box {
     margin-bottom: $line-height-computed;
@@ -161,9 +155,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Column form layout
- */
+//== Column form layout
+//
 
 .splitcontent {
     @extend %clearfix;
@@ -186,9 +179,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Watchers selection list
- */
+//== Watchers selection list
+//
 
 #users_for_watcher {
     height: 200px;
@@ -201,9 +193,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Watchers list
- */
+//== Watchers list
+//
 
 #watchers {
     select {
@@ -250,9 +241,8 @@ a.collapsible.collapsed,
 }
 
 
-/**
- * Subtitle paragraph (can be seen on activity list)
- */
+//== Subtitle paragraph (can be seen on activity list)
+//
 
 p.subtitle {
     margin-top: ($line-height-computed / -2);
@@ -261,18 +251,8 @@ p.subtitle {
 }
 
 
-/**
- * Breadcrumbs (can be seen in time entries report)
- * No need to style them, but let this selector be here.
- */
-
-// p.breadcrumb {
-// }
-
-
-/**
- * My page layout
- */
+//== My page layout
+//
 
 #block-form {
     display: inline;
@@ -335,9 +315,9 @@ a.close-icon {
 }
 
 
-/**
- * Resetting font for SCM (repository files)
- */
+//== Resetting font for SCM (repository files)
+//
+
 #content table.filecontent {
     width: 100%;
     background: $body-bg;
@@ -410,9 +390,8 @@ a.close-icon {
 }
 
 
-/**
- * Projects list
- */
+//== Projects list
+//
 
 ul.projects {
     padding-left: $padding-side;
@@ -466,9 +445,8 @@ ul.projects {
 }
 
 
-/**
- * Time report
- */
+//== Time report
+//
 
 #time-report {
     th {
@@ -513,9 +491,8 @@ ul.projects {
 }
 
 
-/**
- * Version issue list and page layout
- */
+//== Version issue list and page layout
+//
 
 div#roadmap {
     .related-issues {
@@ -569,9 +546,8 @@ div#version-summary {
 }
 
 
-/**
- * Add form bottom space
- */
+//== Add form bottom space
+//
 
 #new_document,
 #add-message,
@@ -581,9 +557,8 @@ div#version-summary {
 }
 
 
-/**
- * Ajax indicator
- */
+//== Ajax indicator
+//
 
 #ajax-indicator {
     position: fixed;
@@ -611,9 +586,8 @@ div#version-summary {
 }
 
 
-/**
- * Boards (forum)
- */
+//== Boards (forum)
+//
 
 tr.message {
     &.locked {
@@ -662,9 +636,8 @@ div.table-list.boards {
 }
 
 
-/**
- * Topic page
- */
+//== Topic page
+//
 
 .controller-messages.action-show {
     h2 {
@@ -727,8 +700,8 @@ div.table-list.boards {
             > h4 {
                 position: relative;
 
-                &:before,
-                &:after {
+                &::before,
+                &::after {
                     display: block;
                     position: absolute;
                     top: 9px;
@@ -742,14 +715,14 @@ div.table-list.boards {
                     pointer-events: none;
                 }
 
-                &:after {
+                &::after {
                     margin-top: 1px;
                     margin-left: 2px;
                     border-width: 6px;
                     border-right-color: $panel-bg;
                 }
 
-                &:before {
+                &::before {
                     border-width: 7px;
                     border-right-color: $panel-border;
                 }
@@ -769,9 +742,9 @@ div.table-list.boards {
 }
 
 
-/**
- * News
- */
+//== News
+//
+
 .news-article {
     margin-bottom: $line-height-computed;
 
@@ -792,9 +765,8 @@ div.table-list.boards {
 }
 
 
-/**
- * News comments
- */
+//== News comments
+//
 
 #comments {
     > h4 {
@@ -812,9 +784,8 @@ div.table-list.boards {
 }
 
 
-/**
- * Diff
- */
+//== Diff
+//
 
 .text-diff {
     margin-bottom: $line-height-computed;
@@ -842,9 +813,8 @@ div.table-list.boards {
 }
 
 
-/**
- * Repository view
- */
+//== Repository view
+//
 
 .revision-info {
     margin-bottom: $line-height-computed;
@@ -916,12 +886,6 @@ tr.changeset {
     }
 }
 
-.revision-graph {
-    circle {
-        // @include translate(0, $table-cell-padding - 1px);
-    }
-}
-
 #content #changes-legend {
     font-size: 1em;
 
@@ -947,22 +911,22 @@ tr.changeset {
     }
 
     .change-A {
-        &:before { color: $changeset-add-color; }
+        &::before { color: $changeset-add-color; }
         a { @include link-variant($changeset-add-color); }
     }
 
     .change-M {
-        &:before { color: $changeset-modified-color; }
+        &::before { color: $changeset-modified-color; }
         a { @include link-variant($changeset-modified-color); }
     }
 
     .change-C {
-        &:before { color: $changeset-copied-color; }
+        &::before { color: $changeset-copied-color; }
         a { @include link-variant($changeset-copied-color); }
     }
 
     .change-R {
-        &:before { color: $changeset-renamed-color; }
+        &::before { color: $changeset-renamed-color; }
         a { @include link-variant($changeset-renamed-color); }
     }
 
diff --git a/src/sass/components/_flash.scss b/src/sass/components/_flash.scss
index f54298d..3927585 100644
--- a/src/sass/components/_flash.scss
+++ b/src/sass/components/_flash.scss
@@ -17,7 +17,7 @@
     @if $use-font-awesome {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             margin-left: -(8px + 16px);
             float: left;
             line-height: $line-height-computed;
@@ -38,11 +38,15 @@
     border-color: $border;
 
     @if $use-font-awesome {
-        @if     $icon == "true"        { $icon: $fa-var-check; }
-        @elseif $icon == "warning"     { $icon: $fa-var-warning; }
-        @elseif $icon == "exclamation" { $icon: $fa-var-exclamation-circle; }
+        @if $icon == "true" {
+            $icon: $fa-var-check;
+        } @elseif $icon == "warning" {
+            $icon: $fa-var-warning;
+        } @elseif $icon == "exclamation" {
+            $icon: $fa-var-exclamation-circle;
+        }
 
-        &:before {
+        &::before {
             content: $icon;
         }
     } @else {
@@ -75,7 +79,7 @@
     text-align: center;
 
     @if $use-font-awesome {
-        &:before {
+        &::before {
             margin-left: 0;
             float: none;
         }
diff --git a/src/sass/components/_forms.scss b/src/sass/components/_forms.scss
index 3fbc402..98f952f 100644
--- a/src/sass/components/_forms.scss
+++ b/src/sass/components/_forms.scss
@@ -33,7 +33,7 @@ input[type="week"],
 input[type="number"],
 input[type="url"],
 input[type="tel"],
-input[type="color"]
+input[type="color"],
 input[type="search"],
 input[type="email"],
 input[type="text"],
@@ -62,6 +62,11 @@ input[type="password"] {
 textarea {
     resize: vertical;
     height: auto;
+
+    &.text_cf {
+        width: 100%;
+        resize: vertical;
+    }
 }
 
 input[type="search"] {
@@ -84,14 +89,21 @@ input[type="range"] {
     width: 100%;
 }
 
-input.autocomplete {
-    padding-right: 30px;
-    @extend %image-aci;
-    background-repeat: no-repeat;
-    background-position: right center;
+input {
+    &.autocomplete {
+        padding-right: 30px;
+        @extend %image-aci;
+        background-repeat: no-repeat;
+        background-position: right center;
 
-    &.ajax-loading {
-        background-image: url("../images/preloader.gif");
+        &.ajax-loading {
+            background-image: url("../images/preloader.gif");
+        }
+    }
+
+    &.string_cf,
+    &.link_cf {
+        width: 100%;
     }
 }
 
@@ -108,15 +120,24 @@ select {
     option[disabled] {
         color: $gray-lighter;
     }
+
+    &.expandable {
+        vertical-align: top;
+    }
+
+    &.bool_cf {
+        // scss-lint:disable ImportantRule
+        width: auto !important;
+    }
 }
 
 
-/**
- * Browser hacks: unfortunately every browser has different capabilities when it
- * comes to styling <select> and <option> tags.
- */
+//== Browser hacks: unfortunately every browser has different capabilities when
+//   it comes to styling <select> and <option> tags.
+//
 
 // Mozilla Firefox
+
 @-moz-document url-prefix() {
     select {
         &[multiple] {
@@ -124,7 +145,7 @@ select {
         }
 
         option,
-        optgroup:before {
+        optgroup::before {
             padding: $input-padding-vertical $input-padding-horizontal;
             border-bottom: 1px dotted $gray-lighter;
         }
@@ -137,6 +158,7 @@ select {
 }
 
 // Google Chrome and Safari
+
 @supports (-webkit-appearance: none) {
     select[multiple] {
         padding: 0;
@@ -154,16 +176,16 @@ select:-moz-focusring {
     text-shadow: 0 0 0 #000;
 }
 
-select.expandable {
-    vertical-align: top;
-}
-
 fieldset {
     min-width: 0;
     margin: 0;
     padding: ($line-height-computed / 2) 0;
     border: 0 none;
     border-top: 1px solid $legend-border-color;
+
+    > p > label:first-child {
+        margin-right: $label-space;
+    }
 }
 
 legend {
@@ -172,9 +194,8 @@ legend {
 }
 
 
-/**
- * Required fields' asterisk
- */
+//== Required fields' asterisk
+//
 
 span.required {
     position: relative;
@@ -187,9 +208,8 @@ span.required {
 }
 
 
-/**
- * Field's hint
- */
+//== Field's hint
+//
 
 em.info {
     display: block;
@@ -200,9 +220,9 @@ em.info {
 }
 
 
-/**
- * Wiki editor
- */
+//== Wiki editor
+//
+
 .wiki-edit {
     color: $wiki-text;
     font-family: $font-family-monospace;
@@ -210,9 +230,8 @@ em.info {
 }
 
 
-/**
- * Tabular forms
- */
+//== Tabular forms
+//
 
 .tabular {
     &.settings {
@@ -322,14 +341,10 @@ label.block {
     }
 }
 
-fieldset > p > label:first-child {
-    margin-right: $label-space;
-}
 
+//== Hack: align description edit icon with label
+//
 
-/**
- * Hack: align description edit icon with label
- */
 label[for=issue_description] + a {
     display: inline-block;
     margin-top: $input-padding-vertical + 1px;
@@ -340,9 +355,9 @@ label[for=issue_description] + a {
 }
 
 
-/**
- * Hack: better looking filter checkbox in sidebar in projects list
- */
+//== Hack: better looking filter checkbox in sidebar in projects list
+//
+
 label[for=closed] {
     display: block;
     margin-bottom: $line-height-computed / 2;
@@ -350,9 +365,8 @@ label[for=closed] {
 }
 
 
-/**
- * Input sizes
- */
+//== Input sizes
+//
 
 .wiki-edit,
 #principal_search,
@@ -371,23 +385,6 @@ label[for=closed] {
     width: 100%;
 }
 
-textarea.text_cf {
-    width: 100%;
-    resize: vertical;
-}
-
-input {
-    &.string_cf,
-    &.link_cf {
-        width: 100%;
-    }
-}
-
-select.bool_cf {
-    // scss-lint:disable ImportantRule
-    width: auto !important;
-}
-
 @if $issue-subject-large {
     $input-padding-large-vertical:   8px;
     $input-padding-large-horizontal: 12px;
@@ -406,17 +403,16 @@ select.bool_cf {
     }
 }
 
-/**
- * Add space below WYSIWYG
- */
+//== Add space below WYSIWYG
+//
 
 .jstEditor {
     margin-bottom: $line-height-computed / 2;
 }
 
-/**
- * User form
- */
+//== User form
+//
+
 #user_form {
     @extend %clearfix;
     margin-bottom: $line-height-computed;
@@ -427,9 +423,8 @@ select.bool_cf {
 }
 
 
-/**
- * Attachments
- */
+//== Attachments
+//
 
 #attachments_fields {
     > span {
@@ -441,13 +436,13 @@ select.bool_cf {
         width: 21.5em;
         margin-right: .5em;
         margin-bottom: $line-height-computed / 4;
-    }
 
-    input.filename {
-        padding-left: $input-padding-horizontal + 16px;
-        background-image: url("../../../images/attachment.png");
-        background-repeat: no-repeat;
-        background-position: 4px center;
+        &.filename {
+            padding-left: $input-padding-horizontal + 16px;
+            background-image: url("../../../images/attachment.png");
+            background-repeat: no-repeat;
+            background-position: 4px center;
+        }
     }
 
     .ajax-waiting input.filename {
@@ -473,9 +468,8 @@ select.bool_cf {
 }
 
 
-/**
- * Issue form elements
- */
+//== Issue form elements
+//
 
 #issue-form {
     fieldset {
@@ -487,9 +481,7 @@ select.bool_cf {
             }
         }
     }
-}
 
-#issue-form {
     .splitcontentleft,
     .splitcontentright {
         width: 100%;
@@ -526,9 +518,9 @@ select.bool_cf {
 }
 
 
-/**
- * #all_attributes > p[style] is targeting Redmine 2.x
- */
+//== #all_attributes > p[style] is targeting Redmine 2.x
+//
+
 #issue_is_private_wrap,
 #all_attributes > p[style] {
     // scss-lint:disable ImportantRule
@@ -581,9 +573,8 @@ select.bool_cf {
 }
 
 
-/**
- * Custom logic (boolean) field displayed as radio buttons
- */
+//== Custom logic (boolean) field displayed as radio buttons
+//
 
 .check_box_group {
     display: block;
@@ -618,9 +609,8 @@ select.bool_cf {
 }
 
 
-/**
- * Filters
- */
+//== Filters
+//
 
 fieldset#filters {
     table {
@@ -629,6 +619,10 @@ fieldset#filters {
         }
     }
 
+    .add-filter {
+        text-align: right;
+    }
+
     td {
         &.field {
             min-width: 180px;
@@ -651,15 +645,11 @@ fieldset#filters {
                 min-width: 130px;
             }
         }
-    }
 
-    .add-filter {
-        text-align: right;
-    }
-
-    td.add-filter {
-        padding-top: $table-condensed-cell-padding * 2;
-        vertical-align: top;
+        &.add-filter {
+            padding-top: $table-condensed-cell-padding * 2;
+            vertical-align: top;
+        }
     }
 
     div.add-filter {
@@ -672,9 +662,8 @@ fieldset#filters {
 }
 
 
-/**
- * Reset label style for trackers selector in custom field editor
- */
+//== Reset label style for trackers selector in custom field editor
+//
 
 label.no-css {
     width: auto;
diff --git a/src/sass/components/_gantt.scss b/src/sass/components/_gantt.scss
index cfb9145..7d66ae9 100644
--- a/src/sass/components/_gantt.scss
+++ b/src/sass/components/_gantt.scss
@@ -44,6 +44,32 @@
             font-weight: $font-weight-bold;
         }
     }
+
+    &.parent {
+        height: 3px;
+
+        &.marker {
+            &.starting {
+                position: absolute;
+                top: -1px;
+                left: 0;
+                width: 8px;
+                height: 16px;
+                margin-left: -4px;
+                background: url("../../../images/task_parent_end.png") no-repeat 0 0;
+            }
+
+            &.ending {
+                position: absolute;
+                top: -1px;
+                right: 0;
+                width: 8px;
+                height: 16px;
+                margin-left: -4px;
+                background: url("../../../images/task_parent_end.png") no-repeat 0 0;
+            }
+        }
+    }
 }
 
 .task_late {
@@ -66,32 +92,6 @@
     }
 }
 
-.task.parent {
-    height: 3px;
-}
-
-.task.parent.marker {
-    &.starting {
-        position: absolute;
-        top: -1px;
-        left: 0;
-        width: 8px;
-        height: 16px;
-        margin-left: -4px;
-        background: url("../../../images/task_parent_end.png") no-repeat 0 0;
-    }
-
-    &.ending {
-        position: absolute;
-        top: -1px;
-        right: 0;
-        width: 8px;
-        height: 16px;
-        margin-left: -4px;
-        background: url("../../../images/task_parent_end.png") no-repeat 0 0;
-    }
-}
-
 .project,
 .version {
     &.task_late,
@@ -126,9 +126,9 @@
     color: $brand-danger;
 }
 
-/**
- * Tooltips
- */
+
+//== Tooltips
+//
 
 .tooltip {
     position: relative;
@@ -136,6 +136,10 @@
 
     &:hover {
         z-index: 25;
+
+        .tip {
+            display: block;
+        }
     }
 
     .tip {
@@ -161,10 +165,4 @@
             }
         }
     }
-
-    &:hover {
-        .tip {
-            display: block;
-        }
-    }
 }
diff --git a/src/sass/components/_gravatar.scss b/src/sass/components/_gravatar.scss
index 5c1e3b3..818ebc5 100644
--- a/src/sass/components/_gravatar.scss
+++ b/src/sass/components/_gravatar.scss
@@ -18,7 +18,8 @@ img.gravatar {
 }
 
 
-// For Administration -> /users
+//== Administration -> /users
+//
 
 .username img.gravatar {
     position: relative;
@@ -27,7 +28,9 @@ img.gravatar {
     vertical-align: top;
 }
 
-/* Used on 12px Gravatar img tags without the icon background */
+//== Gravatar
+//   Used on 12px Gravatar img tags without the icon background
+
 .icon-gravatar {
     margin-right: 5px;
     float: left;
diff --git a/src/sass/components/_icons.scss b/src/sass/components/_icons.scss
index cc8c2d7..4eff30f 100644
--- a/src/sass/components/_icons.scss
+++ b/src/sass/components/_icons.scss
@@ -7,14 +7,14 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
 
 @if $use-font-awesome {
     %fa-icon {
-        &:before {
+        &::before {
             @include fa-icon();
             margin-right: $padding-small-vertical;
         }
     }
 
     %fa-icon-after {
-        &:after {
+        &::after {
             display: inline-block;
             margin-left: $padding-small-vertical;
             font: normal normal normal 14px/1 FontAwesome; // shortening font declaration
@@ -49,15 +49,15 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
         }
     }
 
-    table.list .buttons > a:before {
+    table.list .buttons > a::before {
         font-size: 14px;
     }
 }
 
 
-/**
- * Context menu
- */
+//== Context menu
+//
+
 #context-menu {
     > ul,
     > ul > li > ul {
@@ -70,7 +70,7 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
         a {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 margin-top: 3px;
                 margin-left: -16px;
                 float: left;
@@ -87,19 +87,18 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
     }
 }
 
-/**
- * Buttons icons
- */
 
-@if $use-font-awesome
-{
+//== Buttons icons
+//
+
+@if $use-font-awesome {
     .icon {
         @extend %fa-icon;
         padding-left: 20px;
         background-repeat: no-repeat;
         background-position: 0% 50%;
 
-        &:before {
+        &::before {
             margin-left: -20px;
         }
     }
@@ -109,69 +108,67 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
         font-size: 0;
         white-space: nowrap;
 
-        &:before {
+        &::before {
             font-size: $font-size-base;
         }
     }
 
-    .icon-add:before                   { content: $fa-var-plus-square; }
-    .icon-edit:before                  { content: $fa-var-pencil; }
-    .icon-copy:before                  { content: $fa-var-copy; }
-    .icon-duplicate:before             { content: $fa-var-clipboard; }
-    .icon-del:before                   { content: $fa-var-trash; }
-    .icon-move:before                  { content: $fa-var-arrows; }
-    .icon-save:before                  { content: $fa-var-save; }
-    .icon-cancel:before                { content: $fa-var-ban; }
-    .icon-multiple:before              { content: $fa-var-plus-circle; }
-    .icon-folder:before                { content: $fa-var-folder; }
-    .open .icon-folder:before          { content: $fa-var-folder-open; }
-    .icon-package:before               { content: $fa-var-cube; }
-    .icon-user:before                  { content: $fa-var-user; }
-    .icon-projects:before              { content: $fa-var-cubes; }
-    .icon-help:before                  { content: $fa-var-info-circle; }
-    .icon-attachment:before            { content: $fa-var-paperclip; }
-    .icon-history:before               { content: $fa-var-history; }
-    .icon-time:before                  { content: $fa-var-clock-o; }
-    .icon-time-add:before              { content: $fa-var-clock-o; }
-    .icon-stats:before                 { content: $fa-var-line-chart; }
-    .icon-warning:before               { content: $fa-var-warning; }
-    .icon-error:before                 { content: $fa-var-exclamation; }
-    .icon-fav:before                   { content: $fa-var-star; }
-    .icon-fav-off:before               { content: $fa-var-star-o; }
-    .icon-reload:before                { content: $fa-var-refresh; }
-    .icon-lock:before                  { content: $fa-var-lock; }
-    .icon-unlock:before                { content: $fa-var-unlock; }
-    .icon-checked:before               { content: $fa-var-check; }
-    .icon-details:before               { content: $fa-var-search-plus; }
-    .icon-report:before                { content: $fa-var-pie-chart; }
-    .icon-comment:before               { content: $fa-var-comment; }
-    .icon-summary:before               { content: $fa-var-file-text; }
-    .icon-server-authentication:before { content: $fa-var-key; }
-    .icon-issue:before                 { content: $fa-var-ticket; }
-    .icon-zoom-in:before               { content: $fa-var-search-plus; }
-    .icon-zoom-out:before              { content: $fa-var-search-minus; }
-    .icon-passwd:before                { content: $fa-var-key; }
-    .icon-test:before                  { content: $fa-var-arrow-circle-right; }
-    .icon-phone:before                 { content: $fa-var-phone; }
-    .icon-email:before                 { content: $fa-var-envelope; }
-    .icon-skype:before                 { content: $fa-var-skype; }
-    .icon-facebook:before              { content: $fa-var-facebook-square; }
-    .icon-linkedin:before              { content: $fa-var-linkedin-square; }
-    .icon-twitter:before               { content: $fa-var-twitter-square; }
-    .icon-magnifier:before             { content: $fa-var-search; }
-    .icon-email:before                 { content: $fa-var-envelope; }
-    .icon-email-disabled:before        { content: $fa-var-envelope-o; }
-    .icon-move-up:before               { content: $fa-var-angle-up; }
-    .icon-move-top:before              { content: $fa-var-angle-double-up; }
-    .icon-move-down:before             { content: $fa-var-angle-down; }
-    .icon-move-bottom:before           { content: $fa-var-angle-double-down; }
-    .icon-ok:before                    { content: $fa-var-check; }
-    .icon-not-ok:before                { content: $fa-var-times; }
-    .icon-link-break:before            { content: $fa-var-chain-broken; }
-    .icon-list:before                  { content: $fa-var-list-ul; }
-}
-@else
-{
+    .icon-add::before                   { content: $fa-var-plus-square; }
+    .icon-edit::before                  { content: $fa-var-pencil; }
+    .icon-copy::before                  { content: $fa-var-copy; }
+    .icon-duplicate::before             { content: $fa-var-clipboard; }
+    .icon-del::before                   { content: $fa-var-trash; }
+    .icon-move::before                  { content: $fa-var-arrows; }
+    .icon-save::before                  { content: $fa-var-save; }
+    .icon-cancel::before                { content: $fa-var-ban; }
+    .icon-multiple::before              { content: $fa-var-plus-circle; }
+    .icon-folder::before                { content: $fa-var-folder; }
+    .open .icon-folder::before          { content: $fa-var-folder-open; }
+    .icon-package::before               { content: $fa-var-cube; }
+    .icon-user::before                  { content: $fa-var-user; }
+    .icon-projects::before              { content: $fa-var-cubes; }
+    .icon-help::before                  { content: $fa-var-info-circle; }
+    .icon-attachment::before            { content: $fa-var-paperclip; }
+    .icon-history::before               { content: $fa-var-history; }
+    .icon-time::before                  { content: $fa-var-clock-o; }
+    .icon-time-add::before              { content: $fa-var-clock-o; }
+    .icon-stats::before                 { content: $fa-var-line-chart; }
+    .icon-warning::before               { content: $fa-var-warning; }
+    .icon-error::before                 { content: $fa-var-exclamation; }
+    .icon-fav::before                   { content: $fa-var-star; }
+    .icon-fav-off::before               { content: $fa-var-star-o; }
+    .icon-reload::before                { content: $fa-var-refresh; }
+    .icon-lock::before                  { content: $fa-var-lock; }
+    .icon-unlock::before                { content: $fa-var-unlock; }
+    .icon-checked::before               { content: $fa-var-check; }
+    .icon-details::before               { content: $fa-var-search-plus; }
+    .icon-report::before                { content: $fa-var-pie-chart; }
+    .icon-comment::before               { content: $fa-var-comment; }
+    .icon-summary::before               { content: $fa-var-file-text; }
+    .icon-server-authentication::before { content: $fa-var-key; }
+    .icon-issue::before                 { content: $fa-var-ticket; }
+    .icon-zoom-in::before               { content: $fa-var-search-plus; }
+    .icon-zoom-out::before              { content: $fa-var-search-minus; }
+    .icon-passwd::before                { content: $fa-var-key; }
+    .icon-test::before                  { content: $fa-var-arrow-circle-right; }
+    .icon-phone::before                 { content: $fa-var-phone; }
+    .icon-email::before                 { content: $fa-var-envelope; }
+    .icon-skype::before                 { content: $fa-var-skype; }
+    .icon-facebook::before              { content: $fa-var-facebook-square; }
+    .icon-linkedin::before              { content: $fa-var-linkedin-square; }
+    .icon-twitter::before               { content: $fa-var-twitter-square; }
+    .icon-magnifier::before             { content: $fa-var-search; }
+    .icon-email::before                 { content: $fa-var-envelope; }
+    .icon-email-disabled::before        { content: $fa-var-envelope-o; }
+    .icon-move-up::before               { content: $fa-var-angle-up; }
+    .icon-move-top::before              { content: $fa-var-angle-double-up; }
+    .icon-move-down::before             { content: $fa-var-angle-down; }
+    .icon-move-bottom::before           { content: $fa-var-angle-double-down; }
+    .icon-ok::before                    { content: $fa-var-check; }
+    .icon-not-ok::before                { content: $fa-var-times; }
+    .icon-link-break::before            { content: $fa-var-chain-broken; }
+    .icon-list::before                  { content: $fa-var-list-ul; }
+} @else {
     .icon {
         padding-top: 2px;
         padding-bottom: 3px;
@@ -195,7 +192,7 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
         overflow: hidden;
         vertical-align: text-bottom;
 
-        &:after {
+        &::after {
             content: "&nbsp;";
         }
     }
@@ -252,20 +249,16 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
 }
 
 
-/**
- * Checkbox toggler
- */
+//== Checkbox toggler
+//
 
-@if $use-font-awesome
-{
+@if $use-font-awesome {
     a.toggle-checkboxes {
         @extend %fa-icon;
 
-        &:before { content: $fa-var-check-square-o; }
+        &::before { content: $fa-var-check-square-o; }
     }
-}
-else
-{
+} @else {
     a.toggle-checkboxes {
         margin-left: 5px;
         padding-left: 12px;
@@ -274,9 +267,8 @@ else
 }
 
 
-/**
- * Colorize some actions
- */
+//== Colorize some actions
+//
 
 .icon-add,
 .icon-edit,
@@ -290,62 +282,58 @@ else
 }
 
 
-/**
- * File types
- */
+//== File types
+//
 
-@if $use-font-awesome
-{
+@if $use-font-awesome {
     .icon-folder,
     .icon-file {
-        &:before {
+        &::before {
             width: 16px;
             text-align: center;
         }
     }
 
     .icon-file {
-        &:before {
+        &::before {
             color: $gray;
             content: $fa-var-file-o;
         }
 
-        &.text-plain:before         { content: $fa-var-file-text-o; }
-        &.text-x-c:before           { content: $fa-var-file-code-o; }
-        &.text-x-csharp:before      { content: $fa-var-file-code-o; }
-        &.text-x-java:before        { content: $fa-var-file-code-o; }
-        &.text-x-php:before         { content: $fa-var-file-code-o; }
-        &.text-x-ruby:before        { content: $fa-var-file-code-o; }
-        &.text-xml:before           { content: $fa-var-file-code-o; }
-        &.text-css:before           { content: $fa-var-file-code-o; }
-        &.text-html:before          { content: $fa-var-file-code-o; }
-        &.text-x-sh:before          { content: $fa-var-file-text-o; }
+        &.text-plain::before         { content: $fa-var-file-text-o; }
+        &.text-x-c::before           { content: $fa-var-file-code-o; }
+        &.text-x-csharp::before      { content: $fa-var-file-code-o; }
+        &.text-x-java::before        { content: $fa-var-file-code-o; }
+        &.text-x-php::before         { content: $fa-var-file-code-o; }
+        &.text-x-ruby::before        { content: $fa-var-file-code-o; }
+        &.text-xml::before           { content: $fa-var-file-code-o; }
+        &.text-css::before           { content: $fa-var-file-code-o; }
+        &.text-html::before          { content: $fa-var-file-code-o; }
+        &.text-x-sh::before          { content: $fa-var-file-text-o; }
 
-        &.application-javascript:before,
-        &.text-x-javascript:before { content: $fa-var-file-code-o; }
+        &.application-javascript::before,
+        &.text-x-javascript::before { content: $fa-var-file-code-o; }
 
-        &.application-pdf:before    { content: $fa-var-file-pdf-o; }
-        &.application-msword:before { content: $fa-var-file-word-o; }
+        &.application-pdf::before    { content: $fa-var-file-pdf-o; }
+        &.application-msword::before { content: $fa-var-file-word-o; }
 
-        &.application-vnd\.openxmlformats-officedocument\.spreadsheetml\.sheet:before,
-        &.application-vnd\.ms-excel:before { content: $fa-var-file-excel-o; }
+        &.application-vnd\.openxmlformats-officedocument\.spreadsheetml\.sheet::before,
+        &.application-vnd\.ms-excel::before { content: $fa-var-file-excel-o; }
 
-        &.image-vnd\.microsoft\.icon:before,
-        &.image-gif:before,
-        &.image-jpeg:before,
-        &.image-png:before,
-        &.image-tiff:before {
+        &.image-vnd\.microsoft\.icon::before,
+        &.image-gif::before,
+        &.image-jpeg::before,
+        &.image-png::before,
+        &.image-tiff::before {
             content: $fa-var-file-image-o;
         }
 
-        &.application-zip:before,
-        &.application-x-gzip:before {
+        &.application-zip::before,
+        &.application-x-gzip::before {
             content: $fa-var-file-zip-o;
         }
     }
-}
-@else
-{
+} @else {
     .icon-file {
         background-image: url("../../../images/files/default.png");
 
@@ -376,26 +364,25 @@ else
 }
 
 
-/**
- * Admininistration menu sections
- */
-@if $use-font-awesome
-{
+//== Admininistration menu sections
+//
+
+@if $use-font-awesome {
     %admin-icon {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             width: 20px;
             margin-left: -(5px + 20px);
             color: $gray;
             text-align: center;
         }
 
-        &:hover:before {
+        &:hover::before {
             color: $gray-darker;
         }
 
-        &.selected:before {
+        &.selected::before {
             color: $gray-darkest;
         }
     }
@@ -416,84 +403,82 @@ else
         .projects {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-cubes; }
+            &::before { content: $fa-var-cubes; }
         }
 
         .users {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-user; }
+            &::before { content: $fa-var-user; }
         }
 
         .groups {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-group; }
+            &::before { content: $fa-var-group; }
         }
 
         .roles {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-eye; }
+            &::before { content: $fa-var-eye; }
         }
 
         .trackers {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-ticket; }
+            &::before { content: $fa-var-ticket; }
         }
 
         .issue_statuses {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-pencil-square; }
+            &::before { content: $fa-var-pencil-square; }
         }
 
         .workflows {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-sitemap; }
+            &::before { content: $fa-var-sitemap; }
         }
 
         .custom_fields {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-edit; }
+            &::before { content: $fa-var-edit; }
         }
 
         .enumerations {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-list; }
+            &::before { content: $fa-var-list; }
         }
 
         .settings {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-gear; }
+            &::before { content: $fa-var-gear; }
         }
 
         .plugins {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-puzzle-piece; }
+            &::before { content: $fa-var-puzzle-piece; }
         }
 
         .info {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-info-circle; }
+            &::before { content: $fa-var-info-circle; }
         }
 
         .server_authentication {
             @extend %admin-icon;
 
-            &:before { content: $fa-var-key; }
+            &::before { content: $fa-var-key; }
         }
     }
-}
-@else
-{
+} @else {
     #admin-menu {
         .projects              { background-image: url("../../../images/projects.png"); }
         .users                 { background-image: url("../../../images/user.png"); }
@@ -512,26 +497,24 @@ else
 }
 
 
-/**
- * Drag-and-drop sorting
- */
+//== Drag-and-drop sorting
+//
 
-@if $use-font-awesome
-{
+@if $use-font-awesome {
     .sort-handle {
         @extend %fa-icon;
         @include link-variant($icon-success-color, $icon-success-hover-color);
-        cursor: move;
         text-align: center;
+        cursor: move;
 
-        &:before {
+        &::before {
             width: 16px;
             margin: 0;
             content: $fa-var-arrows-v;
         }
 
         &.ajax-loading {
-            &:before {
+            &::before {
                 color: $gray;
                 -webkit-animation: spin 1s linear infinite;
                 animation: spin 1s linear infinite;
@@ -539,16 +522,14 @@ else
             }
         }
     }
-}
-else
-{
+} @else {
     .sort-handle {
         display: inline-block;
         width: 16px;
         height: 16px;
         background: url("../../../images/reorder.png") no-repeat 0 50%;
-        vertical-align: middle;
         cursor: move;
+        vertical-align: middle;
 
         &.ajax-loading {
             background-image: url("../../../images/loading.gif");
@@ -557,12 +538,10 @@ else
 }
 
 
-/**
- * Headers with icons
- */
+//== Headers with icons
+//
 
-@if $use-font-awesome
-{
+@if $use-font-awesome {
     h3.version,
     h3.comments,
     div.issues h3,
@@ -571,7 +550,7 @@ else
     div.projects h3 {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             width: 1em;
             margin-right: .5em;
             color: $gray-dark;
@@ -579,15 +558,13 @@ else
         }
     }
 
-    h3.version:before      { content: $fa-var-cube; }
-    h3.comments:before     { content: $fa-var-comments; }
-    div.issues h3:before   { content: $fa-var-ticket; }
-    div.members h3:before  { content: $fa-var-user; }
-    div.news h3:before     { content: $fa-var-newspaper-o; }
-    div.projects h3:before { content: $fa-var-cubes; }
-}
-@else
-{
+    h3.version::before      { content: $fa-var-cube; }
+    h3.comments::before     { content: $fa-var-comments; }
+    div.issues h3::before   { content: $fa-var-ticket; }
+    div.members h3::before  { content: $fa-var-user; }
+    div.news h3::before     { content: $fa-var-newspaper-o; }
+    div.projects h3::before { content: $fa-var-cubes; }
+} @else {
     h3.version,
     h3.comments,
     div.issues h3,
@@ -606,12 +583,10 @@ else
 }
 
 
-/**
- * Activity types icons
- */
+//== Activity types icons
+//
 
-@if $use-font-awesome
-{
+@if $use-font-awesome {
     dt {
         &.issue,
         &.issue-edit,
@@ -629,31 +604,29 @@ else
         &.time-entry {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 margin-left: -$padding-side;
                 float: left;
                 line-height: $line-height-computed;
             }
         }
 
-        &.issue:before        { content: $fa-var-ticket; }
-        &.issue-edit:before   { content: $fa-var-edit; }
-        &.issue.closed:before { content: $fa-var-ticket; }
-        &.issue-closed:before { content: $fa-var-ticket; }
-        &.issue-note:before   { content: $fa-var-comment; }
-        &.changeset:before    { content: $fa-var-upload; }
-        &.news:before         { content: $fa-var-newspaper-o; }
-        &.message:before      { content: $fa-var-comment; }
-        &.reply:before        { content: $fa-var-comment-o; }
-        &.wiki-page:before    { content: $fa-var-file-text-o; }
-        &.attachment:before   { content: $fa-var-paperclip; }
-        &.document:before     { content: $fa-var-file-text; }
-        &.project:before      { content: $fa-var-cube; }
-        &.time-entry:before   { content: $fa-var-clock-o; }
+        &.issue::before        { content: $fa-var-ticket; }
+        &.issue-edit::before   { content: $fa-var-edit; }
+        &.issue.closed::before { content: $fa-var-ticket; }
+        &.issue-closed::before { content: $fa-var-ticket; }
+        &.issue-note::before   { content: $fa-var-comment; }
+        &.changeset::before    { content: $fa-var-upload; }
+        &.news::before         { content: $fa-var-newspaper-o; }
+        &.message::before      { content: $fa-var-comment; }
+        &.reply::before        { content: $fa-var-comment-o; }
+        &.wiki-page::before    { content: $fa-var-file-text-o; }
+        &.attachment::before   { content: $fa-var-paperclip; }
+        &.document::before     { content: $fa-var-file-text; }
+        &.project::before      { content: $fa-var-cube; }
+        &.time-entry::before   { content: $fa-var-clock-o; }
     }
-}
-@else
-{
+} @else {
     dt {
         &.issue        { background-image: url("../../../images/ticket.png"); }
         &.issue-edit   { background-image: url("../../../images/ticket_edit.png"); }
@@ -673,22 +646,20 @@ else
 }
 
 
-/**
- * Alternative icons
- */
+//== Alternative icons
+//
 
-@if $use-font-awesome
-{
+@if $use-font-awesome {
     .search_for_watchers > a {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             color: $icon-success-color;
             content: $fa-var-plus;
         }
 
-        &:hover:before,
-        &:focus:before {
+        &:hover::before,
+        &:focus::before {
             color: $icon-success-hover-color;
         }
 
@@ -700,7 +671,7 @@ else
     .atom {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             content: $fa-var-rss-square;
         }
     }
@@ -710,7 +681,7 @@ else
         &[data-method="delete"] {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 content: $fa-var-chain-broken;
             }
 
@@ -732,7 +703,7 @@ else
             color: $icon-danger-hover-color;
         }
 
-        &:before {
+        &::before {
             content: $fa-var-remove;
         }
     }
@@ -740,7 +711,7 @@ else
     .my-project {
         @extend %fa-icon-after;
 
-        &:after {
+        &::after {
             color: #f6ab02;
             font-size: $font-size-small;
             content: $fa-var-star;
@@ -750,7 +721,7 @@ else
     .sort {
         @extend %fa-icon-after;
 
-        &:after {
+        &::after {
             margin-left: .2em;
         }
 
@@ -759,11 +730,11 @@ else
             background-image: none;
         }
 
-        &.asc:after {
+        &.asc::after {
             content: $fa-var-sort-amount-asc;
         }
 
-        &.desc:after {
+        &.desc::after {
             content: $fa-var-sort-amount-desc;
         }
 
@@ -771,14 +742,14 @@ else
         .sort-by-done-ratio &,
         .sort-by-estimated-hours &,
         .sort-by-spent-hours & {
-            &.asc:after  { content: $fa-var-sort-numeric-asc; }
-            &.desc:after { content: $fa-var-sort-numeric-desc; }
+            &.asc::after  { content: $fa-var-sort-numeric-asc; }
+            &.desc::after { content: $fa-var-sort-numeric-desc; }
         }
 
         .sort-by-assigned-to &,
         .sort-by-subject & {
-            &.asc:after  { content: $fa-var-sort-alpha-asc; }
-            &.desc:after { content: $fa-var-sort-alpha-desc; }
+            &.asc::after  { content: $fa-var-sort-alpha-asc; }
+            &.desc::after { content: $fa-var-sort-alpha-desc; }
         }
     }
 
@@ -795,7 +766,7 @@ else
             opacity: 1;
         }
 
-        &:before {
+        &::before {
             content: $fa-var-trash;
         }
     }
@@ -803,7 +774,7 @@ else
     em.info.error {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             content: $fa-var-exclamation-circle;
         }
     }
@@ -819,7 +790,7 @@ else
             }
 
             &:nth-child(1) {
-                &:before {
+                &::before {
                     content: $fa-var-comment;
                 }
             }
@@ -827,7 +798,7 @@ else
             &:nth-child(2) {
                 @include link-variant($icon-success-color, $icon-success-hover-color);
 
-                &:before {
+                &::before {
                     content: $fa-var-pencil;
                 }
             }
@@ -835,7 +806,7 @@ else
             &:nth-child(3) {
                 @include link-variant($icon-danger-color, $icon-danger-hover-color);
 
-                &:before {
+                &::before {
                     content: $fa-var-trash;
                 }
             }
@@ -856,7 +827,7 @@ else
             color: $gray;
 
             td.subject {
-                &:before {
+                &::before {
                     content: $fa-var-lock;
                 }
             }
@@ -865,7 +836,7 @@ else
         &.sticky td.subject {
             font-weight: $font-weight-bold;
 
-            &:before {
+            &::before {
                 content: $fa-var-bookmark;
             }
         }
@@ -874,7 +845,7 @@ else
     tr.version.shared td.name {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             content: $fa-var-link;
         }
     }
@@ -883,7 +854,7 @@ else
         a.board {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 content: $fa-var-comments;
             }
         }
@@ -895,7 +866,7 @@ else
         td.groupanonymous {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 content: $fa-var-group;
             }
         }
@@ -905,7 +876,7 @@ else
         .external {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 display: inline;
                 margin-right: 3px;
                 font-size: 10px;
@@ -918,7 +889,7 @@ else
         @extend %fa-icon;
         @include link-variant($icon-success-color, $icon-success-hover-color);
 
-        &:before {
+        &::before {
             content: $fa-var-pencil;
         }
 
@@ -930,14 +901,14 @@ else
     #attach_files_link {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             margin-right: .3em;
             color: $icon-success-color;
             content: $fa-var-plus;
         }
 
-        &:hover:before,
-        &:focus:before {
+        &:hover::before,
+        &:focus::before {
             color: $icon-success-hover-color;
         }
     }
@@ -946,7 +917,7 @@ else
         %other-format {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 margin-right: .3em;
             }
         }
@@ -954,7 +925,7 @@ else
         .pdf {
             @extend %other-format;
 
-            &:before {
+            &::before {
                 content: $fa-var-file-pdf-o;
             }
         }
@@ -962,7 +933,7 @@ else
         .html {
             @extend %other-format;
 
-            &:before {
+            &::before {
                 content: $fa-var-file-code-o;
             }
         }
@@ -970,7 +941,7 @@ else
         .txt {
             @extend %other-format;
 
-            &:before {
+            &::before {
                 content: $fa-var-file-text-o;
             }
         }
@@ -978,7 +949,7 @@ else
         .csv {
             @extend %other-format;
 
-            &:before {
+            &::before {
                 content: $fa-var-file-excel-o;
             }
         }
@@ -986,7 +957,7 @@ else
         .png {
             @extend %other-format;
 
-            &:before {
+            &::before {
                 content: $fa-var-file-image-o;
             }
         }
@@ -997,38 +968,36 @@ else
         @extend %fa-icon;
         background: transparent;
 
-        &:before {
+        &::before {
             position: relative;
             top: -.12em;
             font-size: .7143em;
             content: $fa-var-circle;
         }
 
-        &.folder:before          { top: 0; font-size: 1em; content: $fa-var-folder; }
-        &.folder.change-A:before { content: $fa-var-folder-open; }
-        &.folder.change-M:before { content: $fa-var-folder-open; }
-        &.change-A:before        { content: $fa-var-plus-circle; }
-        &.change-M:before        { content: $fa-var-circle; }
-        &.change-C:before        { content: $fa-var-arrow-circle-right; }
-        &.change-R:before        { content: $fa-var-check-circle; }
-        &.change-D:before        { content: $fa-var-minus-circle; }
+        &.folder::before          { top: 0; font-size: 1em; content: $fa-var-folder; }
+        &.folder.change-A::before { content: $fa-var-folder-open; }
+        &.folder.change-M::before { content: $fa-var-folder-open; }
+        &.change-A::before        { content: $fa-var-plus-circle; }
+        &.change-M::before        { content: $fa-var-circle; }
+        &.change-C::before        { content: $fa-var-arrow-circle-right; }
+        &.change-R::before        { content: $fa-var-check-circle; }
+        &.change-D::before        { content: $fa-var-minus-circle; }
     }
 
     .changeset-changes ul > li.change {
-        &.folder:before {
+        &.folder::before {
             top: $table-condensed-cell-padding - 2px;
             margin-left: -20px;
         }
 
-        &:before {
+        &::before {
             top: $table-condensed-cell-padding;
             margin-left: -(20px - $table-condensed-cell-padding);
             float: left;
         }
     }
-}
-@else
-{
+} @else {
     .search_for_watchers > a {
         padding-left: 20px;
         background: url("../../../images/add.png") no-repeat 0 50%;
@@ -1130,28 +1099,24 @@ else
 }
 
 
-/**
- * Hacks and overrides for Font Awesome
- */
+//== Hacks and overrides for Font Awesome
+//
 
-@if $use-font-awesome
-{
-    /**
-     * Attachments and watchers delete icon
-     */
+@if $use-font-awesome {
+    // Attachments and watchers delete icon
 
     .attachments,
     .watchers {
         a.delete {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 color: $icon-danger-color;
                 content: $fa-var-trash;
             }
 
-            &:hover:before,
-            &:focus:before {
+            &:hover::before,
+            &:focus::before {
                 color: $icon-danger-hover-color;
             }
 
@@ -1162,27 +1127,25 @@ else
     }
 
 
-    /**
-     * Issue edit form icon
-     */
+    // Issue edit form icon
 
     #all_attributes label[for="issue_description"] + a {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             color: $icon-success-color;
             content: $fa-var-pencil;
         }
 
-        &:hover:before,
-        &:focus:before {
+        &:hover::before,
+        &:focus::before {
             color: $icon-success-hover-color;
         }
 
         .icon {
             padding-left: 0;
 
-            &:before {
+            &::before {
                 margin: 0;
                 content: "";
             }
@@ -1194,15 +1157,13 @@ else
     }
 
 
-    /**
-     * Issue journal contextual icons
-     */
+    // Issue journal contextual icons
 
     .journal .contextual {
         a {
             @extend %fa-icon;
 
-            &:before {
+            &::before {
                 content: $fa-var-comment;
             }
 
@@ -1213,7 +1174,7 @@ else
             &:nth-child(2) {
                 @include link-variant($icon-success-color, $icon-success-hover-color);
 
-                &:before {
+                &::before {
                     content: $fa-var-pencil;
                 }
             }
@@ -1221,7 +1182,7 @@ else
             &:nth-child(3) {
                 @include link-variant($icon-danger-color, $icon-danger-hover-color);
 
-                &:before {
+                &::before {
                     content: $fa-var-trash;
                 }
             }
@@ -1229,21 +1190,19 @@ else
     }
 
 
-    /**
-     * Category and target vesion add icon
-     */
+    // Category and target vesion add icon
 
     #issue_category_id + a,
     #issue_fixed_version_id + a {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             color: $icon-success-color;
             content: $fa-var-plus-square;
         }
 
-        &:hover:before,
-        &:focus:before {
+        &:hover::before,
+        &:focus::before {
             color: $icon-success-hover-color;
         }
 
@@ -1253,9 +1212,7 @@ else
     }
 
 
-    /**
-     * jQuery UI datepicker trigger button
-     */
+    // jQuery UI datepicker trigger button
 
     img.ui-datepicker-trigger {
         position: relative;
@@ -1269,14 +1226,12 @@ else
     }
 
 
-    /**
-     * Lists toggle checkbox icon
-     */
+    // Lists toggle checkbox icon
 
     table.list th.checkbox > a {
         @extend %fa-icon;
 
-        &:before {
+        &::before {
             margin-right: 0;
             color: $icon-success-color;
             content: $fa-var-check;
@@ -1288,19 +1243,17 @@ else
     }
 
 
-    /**
-     * Time entries list icons
-     */
+    // Time entries list icons
 
     .time-entry .buttons > a {
         @extend %fa-icon;
 
-        &[href*="edit"]:before {
+        &[href*="edit"]::before {
             color: $icon-success-color;
             content: $fa-var-pencil;
         }
 
-        &[data-method="delete"]:before {
+        &[data-method="delete"]::before {
             color: $icon-danger-color;
             content: $fa-var-trash;
         }
@@ -1311,14 +1264,12 @@ else
     }
 
 
-    /**
-     * Files list
-     */
+    // Files list
 
     .file .buttons > a {
         @extend %fa-icon;
 
-        &[data-method="delete"]:before {
+        &[data-method="delete"]::before {
             color: $icon-danger-color;
             content: $fa-var-trash;
         }
@@ -1329,15 +1280,13 @@ else
     }
 
 
-    /**
-     * Commit keywords
-     */
+    // Commit keywords
 
     .delete-commit-keywords {
         @extend %fa-icon;
         font-size: $font-size-base;
 
-        &:before {
+        &::before {
             color: $icon-danger-color;
             content: $fa-var-trash;
         }
@@ -1351,7 +1300,7 @@ else
         @extend %fa-icon;
         font-size: $font-size-base;
 
-        &:before {
+        &::before {
             color: $icon-success-color;
             content: $fa-var-plus-square;
         }
diff --git a/src/sass/components/_image-base64.scss b/src/sass/components/_image-base64.scss
index b4babf3..24e43d1 100644
--- a/src/sass/components/_image-base64.scss
+++ b/src/sass/components/_image-base64.scss
@@ -2,7 +2,7 @@
 // Base64 encoded images
 // --------------------------------------------------
 
-/* ACI = AutoComplete Indicator */
+// ACI = AutoComplete Indicator
 %image-aci {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
 }
diff --git a/src/sass/components/_issue.scss b/src/sass/components/_issue.scss
index a07f327..d1de0ea 100644
--- a/src/sass/components/_issue.scss
+++ b/src/sass/components/_issue.scss
@@ -12,8 +12,7 @@
         color: $issue-text;
         word-wrap: break-word;
 
-        @if $use-gravatars
-        {
+        @if $use-gravatars {
             > img.gravatar {
                 width: $issue-gravatar-size;
                 height: $issue-gravatar-size;
@@ -324,7 +323,7 @@ div.thumbnails {
     &.hide-details {
         .journal,
         .details,
-        .first-of-notes:before {
+        .first-of-notes::before {
             display: none;
         }
 
@@ -336,7 +335,7 @@ div.thumbnails {
     &.hide-notes {
         .journal,
         .wiki,
-        .first-of-details:before {
+        .first-of-details::before {
             display: none;
         }
 
@@ -354,7 +353,7 @@ div.thumbnails {
         margin-left: $bubble-gravatar-size + $bubble-gravatar-space;
     }
 
-    &:before {
+    &::before {
         display: block;
         position: absolute;
         top: -($line-height-computed + 2px);
@@ -366,7 +365,7 @@ div.thumbnails {
         z-index: -1;
     }
 
-    .tabs + &:before {
+    .tabs + &::before {
         display: none;
     }
 
@@ -378,7 +377,7 @@ div.thumbnails {
             border-color: darken($issue-border, 25%);
 
             @if $use-gravatars {
-                h4:before {
+                h4::before {
                     border-right-color: darken($issue-border, 25%);
                 }
             }
@@ -410,8 +409,8 @@ div.thumbnails {
         h4 {
             position: relative;
 
-            &:before,
-            &:after {
+            &::before,
+            &::after {
                 display: block;
                 position: absolute;
                 top: 9px;
@@ -425,14 +424,14 @@ div.thumbnails {
                 pointer-events: none;
             }
 
-            &:after {
+            &::after {
                 margin-top: 1px;
                 margin-left: 2px;
                 border-width: 6px;
                 border-right-color: $issue-bg;
             }
 
-            &:before {
+            &::before {
                 border-width: 7px;
                 border-right-color: $issue-border;
             }
@@ -461,7 +460,7 @@ div.thumbnails {
                 margin-bottom: 0;
             }
 
-            &:before {
+            &::before {
                 display: block;
                 position: absolute;
                 top: 5px;
@@ -539,7 +538,7 @@ div.thumbnails {
     > div {
         border-left-color: $brand-warning;
 
-        h4:before {
+        h4::before {
             border-right-color: $brand-warning;
         }
     }
diff --git a/src/sass/components/_jquery-ui.scss b/src/sass/components/_jquery-ui.scss
index c7ce4e0..891ae57 100644
--- a/src/sass/components/_jquery-ui.scss
+++ b/src/sass/components/_jquery-ui.scss
@@ -3,9 +3,8 @@
 // --------------------------------------------------
 
 
-/**
- * Component containers
- */
+//== Component containers
+//
 
 .ui-widget {
     &,
@@ -19,9 +18,8 @@
 }
 
 
-/**
- * Widgets
- */
+//== Widgets
+//
 
 .ui-widget-content {
     border: 1px solid $panel-border;
@@ -64,9 +62,8 @@
 }
 
 
-/**
- * Interaction states
- */
+//== Interaction states
+//
 
 .ui-state-default,
 .ui-widget-content .ui-state-default,
@@ -134,9 +131,8 @@
 }
 
 
-/**
- * Menu (e.g. autocomplete)
- */
+//== Menu (e.g. autocomplete)
+//
 
 .ui-menu {
     padding: 3px;
@@ -149,9 +145,8 @@
 }
 
 
-/**
- * Dialogs
- */
+//== Dialogs
+//
 
 .modal {
     background: $body-bg;
@@ -192,9 +187,8 @@
 }
 
 
-/**
- * Datepicker
- */
+//== Datepicker
+//
 
 img.ui-datepicker-trigger {
     margin-left: 4px;
diff --git a/src/sass/components/_jstoolbar.scss b/src/sass/components/_jstoolbar.scss
index f7175a6..5ee6d08 100644
--- a/src/sass/components/_jstoolbar.scss
+++ b/src/sass/components/_jstoolbar.scss
@@ -7,15 +7,7 @@
 
     .box & {
         padding: 0;
-    }
 
-    button {
-        margin-bottom: 5px;
-        box-shadow: none;
-        vertical-align: top;
-    }
-
-    .box & {
         button {
             margin-right: 2px;
         }
@@ -42,10 +34,15 @@
             }
         }
     }
+
+    button {
+        margin-bottom: 5px;
+        box-shadow: none;
+        vertical-align: top;
+    }
 }
 
-@if $use-font-awesome
-{
+@if $use-font-awesome {
     .jstElements {
         %jstb-icon {
             padding: 0;
@@ -54,7 +51,7 @@
             color: $btn-default-color;
             @include fa-icon();
 
-            &:before {
+            &::before {
                 text-align: center;
             }
         }
@@ -62,97 +59,97 @@
         .jstb_strong {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-bold; }
+            &::before { content: $fa-var-bold; }
         }
 
         .jstb_em {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-italic; }
+            &::before { content: $fa-var-italic; }
         }
 
         .jstb_ins {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-underline; }
+            &::before { content: $fa-var-underline; }
         }
 
         .jstb_del {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-strikethrough; }
+            &::before { content: $fa-var-strikethrough; }
         }
 
         .jstb_code {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-code; }
+            &::before { content: $fa-var-code; }
         }
 
         .jstb_h1 {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-header; }
+            &::before { content: $fa-var-header; }
         }
 
         .jstb_h2 {
             @extend %jstb-icon;
 
-            &:before { font-size: .7857em; content: $fa-var-header; }
+            &::before { font-size: .7857em; content: $fa-var-header; }
         }
 
         .jstb_h3 {
             @extend %jstb-icon;
 
-            &:before { font-size: .6429em; content: $fa-var-header; }
+            &::before { font-size: .6429em; content: $fa-var-header; }
         }
 
         .jstb_ul {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-list-ul; }
+            &::before { content: $fa-var-list-ul; }
         }
 
         .jstb_ol {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-list-ol; }
+            &::before { content: $fa-var-list-ol; }
         }
 
         .jstb_bq {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-indent; }
+            &::before { content: $fa-var-indent; }
         }
 
         .jstb_unbq {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-outdent; }
+            &::before { content: $fa-var-outdent; }
         }
 
         .jstb_pre {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-terminal; }
+            &::before { content: $fa-var-terminal; }
         }
 
         .jstb_link {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-link; }
+            &::before { content: $fa-var-link; }
         }
 
         .jstb_img {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-image; }
+            &::before { content: $fa-var-image; }
         }
 
         .jstb_cut {
             @extend %jstb-icon;
 
-            &:before { content: $fa-var-scissors; }
+            &::before { content: $fa-var-scissors; }
         }
 
         .jstb_precode,
@@ -161,7 +158,7 @@
             @extend %jstb-icon;
             color: $brand-danger;
 
-            &:before { content: $fa-var-code; }
+            &::before { content: $fa-var-code; }
         }
 
         button.jstb_help {
@@ -172,7 +169,7 @@
                 color: $link-hover-color;
             }
 
-            &:before { content: $fa-var-question-circle; }
+            &::before { content: $fa-var-question-circle; }
         }
     }
 }
diff --git a/src/sass/components/_list.scss b/src/sass/components/_list.scss
index 8fd2130..7dcf038 100644
--- a/src/sass/components/_list.scss
+++ b/src/sass/components/_list.scss
@@ -7,6 +7,10 @@ table.list {
     margin-bottom: $line-height-computed;
     font-size: $font-size-list;
 
+    .autoscroll & {
+        margin-bottom: 0;
+    }
+
     th,
     .table-list-header {
         padding: $table-cell-padding;
@@ -23,12 +27,6 @@ table.list {
     tr.ui-sortable-helper {
         background-color: $highlight-bg;
     }
-}
-
-table.list {
-    .autoscroll & {
-        margin-bottom: 0;
-    }
 
     @if $table-list-highlight-rows {
         > tbody > tr:hover {
@@ -282,9 +280,9 @@ tr.entry {
 }
 
 
-/**
- * Priorities
- */
+//== Priorities
+//
+
 // scss-lint:disable SpaceAfterComma
 @if $color-priorities {
     @include priority(".priority-lowest",  $priority-lowest-bg,  $priority-lowest-text,  $priority-lowest-link);
@@ -325,7 +323,7 @@ tr.entry {
             color: mix($tracker-default-text, $tracker-default-bg, 75%);
             text-decoration: none;
 
-            &:after {
+            &::after {
                 display: block;
                 position: absolute;
                 right: 5px;
@@ -338,7 +336,7 @@ tr.entry {
                 @include transition(border-color .1s);
             }
 
-            &:hover:after {
+            &:hover::after {
                 border-top-color: rgba($tracker-default-text, .25);
             }
         }
@@ -348,7 +346,7 @@ tr.entry {
         display: block;
         padding: $tracker-list-padding;
 
-        &:before {
+        &::before {
             color: mix($tracker-default-text, $tracker-default-bg, 50%);
             content: "#";
         }
@@ -386,9 +384,8 @@ tr.entry {
 }
 
 
-/**
- * List groups
- */
+//== List groups
+//
 
 tr.group {
     > td {
@@ -429,9 +426,8 @@ tr.group {
 }
 
 
-/**
- * Time entry in report
- */
+//== Time entry in report
+//
 
 tr.time-entry {
     text-align: center;
@@ -484,9 +480,8 @@ tr.time-entry {
     }
 }
 
-/**
- * Wiki page history entry
- */
+//== Wiki page history entry
+//
 
 tr.wiki-page-version {
     td.updated_on,
@@ -495,9 +490,8 @@ tr.wiki-page-version {
     }
 }
 
-/**
- * Project versions list
- */
+//== Project versions list
+//
 
 tr.version {
     &.closed {
@@ -519,9 +513,8 @@ tr.version {
 }
 
 
-/**
- * Users list
- */
+//== Users list
+//
 
 tr.user {
     td {
@@ -549,9 +542,8 @@ tr.user {
 }
 
 
-/**
- * Plugins list
- */
+//== Plugins list
+//
 
 table.plugins {
     .configure {
@@ -571,9 +563,8 @@ table.plugins {
 }
 
 
-/**
- * Files list
- */
+//== Files list
+//
 
 table.files {
     tbody th {
@@ -593,9 +584,8 @@ table.files {
 }
 
 
-/**
- * Admin lists
- */
+//== Admin lists
+//
 
 .controller-enumerations {
     td.name {
@@ -610,9 +600,8 @@ table.files {
 }
 
 
-/**
- * Totals
- */
+//== Totals
+//
 
 .query-totals {
     > span {
@@ -626,4 +615,4 @@ table.files {
     .value {
         font-weight: $font-weight-bold;
     }
-}
\ No newline at end of file
+}
diff --git a/src/sass/components/_plugins.scss b/src/sass/components/_plugins.scss
index 8a620cd..6942098 100644
--- a/src/sass/components/_plugins.scss
+++ b/src/sass/components/_plugins.scss
@@ -62,7 +62,7 @@
                 color: $icon-success-color;
             }
 
-            &:before {
+            &::before {
                 content: $fa-var-clock-o;
             }
         }
@@ -75,7 +75,7 @@
                 color: $icon-danger-color;
             }
 
-            &:before {
+            &::before {
                 content: $fa-var-history;
             }
         }
diff --git a/src/sass/components/_simple-list.scss b/src/sass/components/_simple-list.scss
index fd013ee..4a52c8a 100644
--- a/src/sass/components/_simple-list.scss
+++ b/src/sass/components/_simple-list.scss
@@ -20,7 +20,7 @@
         background-position: 0 center;
     }
 
-    span.project:after {
+    span.project::after {
         content: " -";
     }
 
diff --git a/src/sass/components/_tabs.scss b/src/sass/components/_tabs.scss
index 805dcba..9f6e999 100644
--- a/src/sass/components/_tabs.scss
+++ b/src/sass/components/_tabs.scss
@@ -24,10 +24,10 @@
             display: -ms-flexbox;
             display: -webkit-flex;
             display: flex;
-            height: $line-height-computed + $tab-padding-vertical * 2 + 1px;
             -webkit-flex-wrap: nowrap;
             -ms-flex-wrap: nowrap;
             flex-wrap: nowrap;
+            height: $line-height-computed + $tab-padding-vertical * 2 + 1px;
         } @else {
             width: 2000px;
             @extend %clearfix;
@@ -114,9 +114,8 @@
     }
 }
 
-/**
- * Specific tabs content layout
- */
+//== Specific tabs content layout
+//
 
 #tab-content-modules fieldset p {
     margin: 3px 0 4px;
diff --git a/src/sass/components/_top.scss b/src/sass/components/_top.scss
index 352330b..0b7cfaf 100644
--- a/src/sass/components/_top.scss
+++ b/src/sass/components/_top.scss
@@ -42,7 +42,7 @@
             @if $use-font-awesome {
                 font-size: 14px;
 
-                &:before {
+                &::before {
                     content: $fa-var-caret-square-o-down;
                 }
             } @else {
@@ -54,7 +54,7 @@
                 color: mix($top-menu-link, $top-menu-bg, 33%);
                 line-height: 1;
 
-                &:before {
+                &::before {
                     margin-right: 0;
                 }
 
@@ -79,7 +79,7 @@
 
             &.expanded {
                 @if $use-font-awesome {
-                    &:before {
+                    &::before {
                         content: $fa-var-caret-square-o-up;
                     }
                 } @else {
@@ -360,6 +360,7 @@
     }
 
     .tabs-buttons {
+        // scss-lint:disable ImportantRule
         display: none !important;
         padding-left: 0;
         background-color: $main-menu-bg;
@@ -371,6 +372,7 @@
     }
 
     ul + .tabs-buttons {
+        // scss-lint:disable ImportantRule
         display: block !important;
     }
 }
diff --git a/src/sass/components/_wiki.scss b/src/sass/components/_wiki.scss
index fbbf55b..670a367 100644
--- a/src/sass/components/_wiki.scss
+++ b/src/sass/components/_wiki.scss
@@ -3,18 +3,14 @@
     font-size: $wiki-font-size;
 
     @if $wiki-page-more-vertical-space {
-        /**
-         * Anchors will make headers more separated,
-         * and it will look better when you open page with hash in URL
-         */
+        // Anchors will make headers more separated,
+        // and it will look better when you open page with hash in URL
         a[name]:empty {
             display: block;
             overflow: hidden;
         }
 
-        /**
-         * Add some space between list items
-         */
+        // Add some space between list items
         ul,
         ol {
             li {
@@ -55,21 +51,36 @@ div.wiki {
         line-height: $headings-line-height;
     }
 
-    h1, .h1 { font-size: $font-size-h1; line-height: 1.2; }
-    h2, .h2 { font-size: $font-size-h2; line-height: 1.225; }
-    h3, .h3 { font-size: $font-size-h3; line-height: 1.43; }
-    h4, .h4 { font-size: $font-size-h4; }
-    h5, .h5 { font-size: $font-size-h5; }
-    h6, .h6 { font-size: $font-size-h6; }
+    h1, .h1 {
+        padding-bottom: .3em;
+        border-bottom: 1px solid $gray-lighter;
+        font-size: $font-size-h1;
+        line-height: 1.2;
+    }
 
-    h1, .h1,
     h2, .h2 {
         padding-bottom: .3em;
         border-bottom: 1px solid $gray-lighter;
+        font-size: $font-size-h2;
+        line-height: 1.225;
+    }
+
+    h3, .h3 {
+        font-size: $font-size-h3;
+        line-height: 1.43;
+    }
+
+    h4, .h4 {
+        font-size: $font-size-h4;
+    }
+
+    h5, .h5 {
+        font-size: $font-size-h5;
     }
 
     h6, .h6 {
         color: $gray;
+        font-size: $font-size-h6;
     }
 
     .text-normal {
@@ -93,7 +104,7 @@ div.wiki {
         + h4,
         + h5,
         + h6 {
-            &:before {
+            &::before {
                 display: inline-block;
                 width: .7em;
                 margin-left: -.7em;
@@ -336,7 +347,7 @@ h6 {
 p.footnote {
     margin-bottom: 5px;
 
-    &:before {
+    &::before {
         display: block;
         width: 300px;
         margin-top:  $line-height-computed;
@@ -345,7 +356,7 @@ p.footnote {
         content: "";
     }
 
-    + p.footnote:before {
+    + p.footnote::before {
         display: none;
     }
 }
@@ -382,10 +393,10 @@ p.footnote {
 // Custom classes for Bootstrap-like features
 // --------------------------------------------------
 
-/**
- * Pager
- * see: http://getbootstrap.com/components/#pagination-pager
- */
+
+// Pager
+// see: http://getbootstrap.com/components/#pagination-pager
+
 .wiki-pager {
     > a {
         display: inline-block;
@@ -417,12 +428,13 @@ p.footnote {
     }
 }
 
-/**
- * Typographic helper classes
- */
+
+//== Typographic helper classes
+//
 
 // Lead body copy
 // see: http://getbootstrap.com/css/#lead-body-copy
+
 .lead {
     margin-bottom: $line-height-computed;
     font-size: floor(($font-size-base * 1.15));
@@ -434,24 +446,27 @@ p.footnote {
     }
 }
 
+
 // Alignment
 // see: http://getbootstrap.com/css/#type-alignment
+
 .text-left       { text-align: left; }
 .text-right      { text-align: right; }
 .text-center     { text-align: center; }
 .text-justify    { text-align: justify; }
 .text-nowrap     { white-space: nowrap; }
 
+
 // Transformation
 // see: http://getbootstrap.com/css/#type-transformation
+
 .text-lowercase  { text-transform: lowercase; }
 .text-uppercase  { text-transform: uppercase; }
 .text-capitalize { text-transform: capitalize; }
 
-/**
- * Other helper classes
- * see: http://getbootstrap.com/css/#helper-classes
- */
+
+// Other helper classes
+// see: http://getbootstrap.com/css/#helper-classes
 
 .text-muted      { color: $gray-light; }
 .text-primary    { color: $brand-primary; }
diff --git a/src/sass/javascripts/_sidebar-toggler.scss b/src/sass/javascripts/_sidebar-toggler.scss
index 110da7a..eac8ea6 100644
--- a/src/sass/javascripts/_sidebar-toggler.scss
+++ b/src/sass/javascripts/_sidebar-toggler.scss
@@ -44,7 +44,7 @@
             color: $gray-light;
             line-height: 1;
 
-            &:before {
+            &::before {
                 margin-right: 0;
             }
 
@@ -71,7 +71,7 @@
             left: $toggler-position-h;
 
             @if $use-font-awesome {
-                &:before {
+                &::before {
                     content: $fa-var-caret-square-o-left;
                 }
             } @else {
@@ -81,7 +81,7 @@
             right: $toggler-position-h;
 
             @if $use-font-awesome {
-                &:before {
+                &::before {
                     content: $fa-var-caret-square-o-right;
                 }
             } @else {
@@ -92,7 +92,7 @@
         &.sidebar-hidden {
             @if $sidebar-position == "left" {
                 @if $use-font-awesome {
-                    &:before {
+                    &::before {
                         content: $fa-var-caret-square-o-right;
                     }
                 } @else {
@@ -100,7 +100,7 @@
                 }
             } @else {
                 @if $use-font-awesome {
-                    &:before {
+                    &::before {
                         content: $fa-var-caret-square-o-left;
                     }
                 } @else {
diff --git a/src/sass/mixins/_clearfix.scss b/src/sass/mixins/_clearfix.scss
index 7ad9135..a9a5d1e 100644
--- a/src/sass/mixins/_clearfix.scss
+++ b/src/sass/mixins/_clearfix.scss
@@ -2,7 +2,7 @@
 //
 // For modern browsers
 // 1. The use of `table` rather than `block` is only necessary if using
-//    `:before` to contain the top-margins of child elements.
+//    `::before` to contain the top-margins of child elements.
 // 2. The space content is one way to avoid an Opera bug when the
 //    contenteditable attribute is included anywhere else in the document.
 //    Otherwise it causes space to appear at the top and bottom of elements
@@ -11,13 +11,13 @@
 // Source: http://nicolasgallagher.com/micro-clearfix-hack/
 
 @mixin clearfix() {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
         display: table; // 1
         content: " "; // 2
     }
 
-    &:after {
+    &::after {
         clear: both;
     }
 }
@@ -26,7 +26,7 @@
 // Lighter (for output CSS) cleafix with placeholder
 
 %clearfix {
-    &:after {
+    &::after {
         display: table;
         clear: both;
         content: "";
diff --git a/src/sass/mixins/_issues.scss b/src/sass/mixins/_issues.scss
index 2f708d3..5840461 100644
--- a/src/sass/mixins/_issues.scss
+++ b/src/sass/mixins/_issues.scss
@@ -154,18 +154,18 @@
         &.closed {
             color: mix($color, $background, 75%);
 
-            &:after {
+            &::after {
                 border-top-color: rgba($color, .95);
             }
 
-            &:hover:after {
+            &:hover::after {
                 border-top-color: rgba($color, .25);
             }
         }
     }
 
     tr#{$parent} .id > a {
-        &:before {
+        &::before {
             color: mix($color, $background, 50%);
         }
     }
diff --git a/src/sass/mixins/_shadows.scss b/src/sass/mixins/_shadows.scss
index 2e89984..a1ddd94 100644
--- a/src/sass/mixins/_shadows.scss
+++ b/src/sass/mixins/_shadows.scss
@@ -2,21 +2,17 @@
 
 @mixin nice-shadow($depth: 1) {
     $shadow: none;
+
     @if ($depth == 1) {
-        // $shadow: 0 3px 1px -2px rgba(#000, .14), 0 2px 2px 0 rgba(#000, .098), 0 1px 5px 0 rgba(#000, .082);
         $shadow: 0 1px 3px rgba(#000, .12), 0 1px 2px rgba(#000, .24);
     } @elseif ($depth == 2) {
-        // $shadow: 0 2px 4px -1px rgba(#000, .14), 0 4px 5px 0 rgba(#000, .098), 0 1px 10px 0 rgba(#000, .082)
         $shadow: 0 3px 6px rgba(#000, .16), 0 3px 6px rgba(#000, .23);
     } @elseif ($depth == 3) {
-        // $shadow: 0 3px 5px -1px rgba(#000, .14), 0 6px 10px 0 rgba(#000, .098), 0 1px 18px 0 rgba(#000, .082)
         $shadow: 0 10px 18px rgba(#000, .19), 0 6px 8px rgba(#000, .23);
     } @elseif ($depth == 4) {
-        // $shadow: 0 5px 5px -3px rgba(#000, .14), 0 8px 10px 1px rgba(#000, .098), 0 3px 14px 2px rgba(#000, .082)
         $shadow: 0 14px 28px rgba(#000, .25), 0 10px 10px rgba(#000, .22);
     } @elseif ($depth == 5) {
-        // $shadow: 0 8px 10px -5px rgba(#000, .14), 0 16px 24px 2px rgba(#000, .098), 0 6px 30px 5px rgba(#000, .082)
-        $shadow: 0 19px 38px rgba(#000, .30), 0 15px 12px rgba(#000, .22);
+        $shadow: 0 19px 38px rgba(#000, .3), 0 15px 12px rgba(#000, .22);
     }
 
     box-shadow: $shadow;
diff --git a/src/sass/plugins/redmine_backlogs/global.scss b/src/sass/plugins/redmine_backlogs/global.scss
index 7761510..563bad7 100644
--- a/src/sass/plugins/redmine_backlogs/global.scss
+++ b/src/sass/plugins/redmine_backlogs/global.scss
@@ -43,9 +43,8 @@ a {
 }
 
 
-/**
- * Form elements
- */
+//== Form elements
+//
 
 button,
 input,
@@ -119,9 +118,8 @@ button.ui-multiselect {
 }
 
 
-/**
- * Top toolbar
- */
+//== Top toolbar
+//
 
 #toolbar {
     display: block;
@@ -214,9 +212,8 @@ button.ui-multiselect {
 }
 
 
-/**
- * Other elements
- */
+//== Other elements
+//
 
 .clearfix {
     @include clearfix;
@@ -234,12 +231,9 @@ button.ui-multiselect {
     display: none;
 }
 
-/**
- * .editor is the classname for field editors of sprint,
- * story, task, impediment. These field editors get created
- * at runtime whenever any of the above models are edited.
- */
-
+// .editor is the classname for field editors of sprint,
+// story, task, impediment. These field editors get created
+// at runtime whenever any of the above models are edited.
 .ui-dialog .editor {
     display: block;
 }
@@ -248,9 +242,9 @@ ul.ui-sortable {
     min-height: 20px;
 }
 
-/**
- * Story tooltip
- */
+//== Story tooltip
+//
+
 .ui-tooltip {
     .ui-tooltip-content {
         hr {
@@ -294,9 +288,8 @@ ul.ui-sortable {
     display: none;
 }
 
-/**
- * drag-drop effect: disabled dropzones are greyed out
- */
+//== drag-drop effect: disabled dropzones are greyed out
+//
 
 .rb-sortable-disabled,
 .ui-sortable-disabled {
@@ -310,9 +303,8 @@ ul.ui-sortable {
 }
 
 
-/**
- * Fix jQuery-UI datepicker
- */
+//== Fix jQuery-UI datepicker
+//
 
 body {
     .ui-widget {
diff --git a/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss b/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss
index f28a847..3422f31 100644
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss
+++ b/src/sass/plugins/redmine_backlogs/jquery/jquery-ui.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// scss-lint:disable Comment ImportantRule
 @import "../common";
 
 /*
@@ -32,7 +32,7 @@
 .ui-helper-clearfix {
     display: inline-block;
 
-    &:after {
+    &::after {
         display: block;
         height: 0;
         clear: both;
@@ -521,7 +521,7 @@
 
 .ui-widget-overlay {
     background: #000;
-    opacity: .30;
+    opacity: .3;
 }
 
 .ui-widget-shadow {
@@ -529,7 +529,7 @@
     padding: 8px;
     border-radius: 8px;
     background: #aaa;
-    opacity: .30;
+    opacity: .3;
 }
 
 /* Resizable
diff --git a/src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss b/src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss
index ea08a1c..03a7004 100644
--- a/src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss
+++ b/src/sass/plugins/redmine_backlogs/jquery/jquery.multiselect.scss
@@ -112,8 +112,7 @@
     }
 }
 
-/* remove label borders in IE6 because IE6 does not support transparency */
-
+// Remove label borders in IE6 because IE6 does not support transparency
 * html .ui-multiselect-checkboxes label {
     border: 0 none;
 }
diff --git a/src/sass/plugins/redmine_backlogs/master_backlog.scss b/src/sass/plugins/redmine_backlogs/master_backlog.scss
index 1425a4e..a52814c 100644
--- a/src/sass/plugins/redmine_backlogs/master_backlog.scss
+++ b/src/sass/plugins/redmine_backlogs/master_backlog.scss
@@ -23,7 +23,7 @@ $story-sp-input-width:          50px;
         background-color: $background;
         color: $color;
 
-        &:before {
+        &::before {
             color: mix($color, $background, 50%);
         }
 
@@ -38,21 +38,18 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * reserved classes are
- * .backlog (used in master_backlog.js to initialize all backlogs)
- * .model (used in backlog.js editable_inplace.js model.js)
- * .sprint (used in backlog.js
- * .stories (used in backlog.js for sortable)
- * .editor
- * .editable (bind click on)
- * .close_sprint (bind click on)
- */
+// Reserved classes are
+// .backlog (used in master_backlog.js to initialize all backlogs)
+// .model (used in backlog.js editable_inplace.js model.js)
+// .sprint (used in backlog.js
+// .stories (used in backlog.js for sortable)
+// .editor
+// .editable (bind click on)
+// .close_sprint (bind click on)
 
 
-/**
- * fluid, 2-colum layout
- */
+//== Fluid, 2-colum layout
+//
 
 #backlogs_container {
     padding: ($padding-side / 2) ($padding-side / 4);
@@ -92,9 +89,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * Fixed-Fluid-Fixed layout
- */
+//== Fixed-Fluid-Fixed layout
+//
 
 .fff-wrapmiddle {
     width: 100%;
@@ -146,18 +142,16 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * Just some space at the bottom of the page
- */
+//== Just some space at the bottom of the page
+//
 
 #dummy_backlog_container {
     height: 150px;
 }
 
 
-/**
- * Base backlog container
- */
+//== Base backlog container
+//
 
 #backlogs_container {
     .closedbacklog,
@@ -176,9 +170,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * Backlog header
- */
+//== Backlog header
+//
 
 #backlogs_container {
     .header {
@@ -419,15 +412,13 @@ $story-sp-input-width:          50px;
 
         .headertext {
             cursor: default;
-            /*we have model class here, but are not editable*/
         }
     }
 }
 
 
-/**
- * Backlog items
- */
+//== Backlog items
+//
 
 #backlogs_container {
     .stories {
@@ -501,7 +492,7 @@ $story-sp-input-width:          50px;
                     font-weight: $font-weight-bold;
                     text-align: right;
 
-                    &:before {
+                    &::before {
                         margin-left: -1em;
                         @if $color-trackers {
                             color: mix($tracker-default-text, $tracker-default-bg, 50%);
@@ -689,10 +680,7 @@ $story-sp-input-width:          50px;
         cursor: default;
     }
 
-    /**
-     * override: display story subject in multiple lines
-     */
-
+    // Override: display story subject in multiple lines
     .rb-multilinesubject & .subject {
         height: auto;
         white-space: normal;
@@ -711,9 +699,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * dialog
- */
+//== Dialog
+//
 
 .ui-dialog {
     .ui-dialog-titlebar-close {
@@ -753,9 +740,8 @@ $story-sp-input-width:          50px;
 }
 
 
-/**
- * In-place Sprint Editor
- */
+//== In-place Sprint Editor
+//
 
 #backlogs_container {
 
@@ -798,7 +784,9 @@ $story-sp-input-width:          50px;
     }
 }
 
-/* In-place Story Editor */
+
+//== In-place Story Editor
+//
 
 .debug {
     .story {
@@ -826,18 +814,20 @@ $story-sp-input-width:          50px;
     }
 }
 
-/* Naive but light handling of colors by user stories tracker */
 
-/* datepicker bugfix: hide until it opens itself */
-
-.ui-datepicker {
-    display: none;
-}
-
-/* show completed sprints */
+//== Completed sprints
+//
 
 #show_completed_sprints {
     margin-left: $padding-side / 2;
     color: $gray-darkest;
     cursor: pointer;
 }
+
+
+//== Datepicker bugfix: hide until it opens itself
+//
+
+.ui-datepicker {
+    display: none;
+}
diff --git a/src/sass/plugins/redmine_backlogs/taskboard.scss b/src/sass/plugins/redmine_backlogs/taskboard.scss
index 9c3e381..c3aba21 100644
--- a/src/sass/plugins/redmine_backlogs/taskboard.scss
+++ b/src/sass/plugins/redmine_backlogs/taskboard.scss
@@ -43,14 +43,14 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
 }
 
 
-/**
- * swimlane class is used by:
- * - #board_header
- * - .board
- *
- * Also use by the Column Width preference to determine the unit width of the
- * swimlanes. See RB.Taskboard.initialize()
- */
+//== Swimlane
+//
+// Swimlane class is used by:
+// - #board_header
+// - .board
+// Also use by the Column Width preference to determine the unit width of the
+// swimlanes. See RB.Taskboard.initialize()
+//
 
 .swimlane {
     width: $swimlane-width;
@@ -58,7 +58,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     padding: 5px;
 }
 
-/* status labels */
+
+//== Status labels
+//
 
 #board_header {
     position: absolute;
@@ -208,7 +210,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     }
 }
 
-/* item styles used by .task and .impediment */
+
+//== Item styles used by .task and .impediment
+//
 
 #taskboard {
     .issue,
@@ -361,7 +365,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     }
 }
 
-/* dialog */
+
+//== Dialog
+//
 
 .rb_editor_dialog.ui-dialog {
     .ui-dialog-titlebar-close {
@@ -392,7 +398,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     }
 }
 
-/* item editor */
+
+//== Item editor
+//
 
 .rb_editor {
     label {
@@ -432,7 +440,9 @@ $swimlane-width:                $issue-width + 2 * ($issue-margin + $issue-paddi
     }
 }
 
-/* others */
+
+//== Others
+//
 
 #impediment_template,
 #task_template {